web/packages/design-system/lib/components/InfoCard/InfoCard.stories.tsx

import type { Meta, StoryObj } from '@storybook/nextjs-vite'

import { Theme } from '@scandic-hotels/common/utils/theme'
import { InfoCard } from './InfoCard.tsx'
import { infoCardConfig } from './variants.ts'

const DEFAULT_ARGS = {
  topTitle: "Here's to your health!",
  heading: 'Gym & Wellness',
  primaryButton: {
    href: '#',
    text: 'Primary button',
  },
  secondaryButton: {
    href: '#',
    text: 'Secondary button',
  },
  bodyText:
    'Our gym is open 24/7 and offers state-of-the-art equipment to help you stay fit during your stay.',
}

const meta: Meta<typeof InfoCard> = {
  title: 'Components/InfoCard',
  component: InfoCard,
  argTypes: {
    topTitle: {
      control: 'text',
      table: {
        type: { summary: 'string' },
      },
    },
    topTitleAngled: {
      control: 'boolean',
      description:
        'Whether the top title should be angled. Only applies when `hotelTheme` is set to `Theme.scandic`.',
      type: 'boolean',
    },
    heading: {
      control: 'text',
      table: {
        type: { summary: 'string' },
      },
    },
    bodyText: {
      control: 'text',
      table: {
        type: { summary: 'string' },
      },
    },
    theme: {
      control: 'select',
      options: Object.keys(infoCardConfig.variants.theme),
      table: {
        type: {
          summary: Object.keys(infoCardConfig.variants.theme).join(' | '),
        },
      },
    },
    height: {
      control: 'select',
      options: Object.keys(infoCardConfig.variants.height),
      table: {
        type: {
          summary: Object.keys(infoCardConfig.variants.height).join(' | '),
        },
      },
    },
    hotelTheme: {
      control: 'select',
      options: Object.keys(infoCardConfig.variants.hotelTheme),
      description:
        'The hotel theme to adjust button colors for better contrast.',
      table: {
        type: { summary: 'Theme', detail: Object.values(Theme).join(' | ') },
      },
    },
    backgroundImage: {
      control: 'object',
      table: {
        type: {
          summary: 'InfoCardBackgroundImage',
          detail:
            '{ src: string, alt?: string, focalPoint?: { x: number, y: number }, dimensions?: { width: number, height: number, aspectRatio?: number } }',
        },
      },
    },
    primaryButton: {
      control: 'object',
      table: {
        type: {
          summary: 'InfoCardButton',
          detail:
            '{ href: string, text: string, openInNewTab?: boolean, scrollOnClick?: boolean, onClick?: MouseEventHandler }',
        },
      },
    },
    secondaryButton: {
      control: 'object',
      table: {
        type: {
          summary: 'InfoCardButton',
          detail:
            '{ href: string, text: string, openInNewTab?: boolean, scrollOnClick?: boolean, onClick?: MouseEventHandler }',
        },
      },
    },
  },
  args: { ...DEFAULT_ARGS },
  decorators: [
    (Story, context) => {
      if (context.name.toLowerCase().indexOf('all themes') >= 0) {
        return (
          <div
            className={context.args.hotelTheme!}
            style={{ display: 'grid', gap: '1rem' }}
          >
            {Object.keys(infoCardConfig.variants.theme).map((theme) => {
              const args = {
                ...context.args,
                backgroundImage:
                  theme === 'Image'
                    ? {
                        src: './img/img1.jpg',
                        alt: 'Image alt text',
                      }
                    : undefined,
              }
              return (
                <div style={{ display: 'grid', gap: '0.5rem' }}>
                  <h3>{theme}</h3>
                  <InfoCard
                    {...args}
                    theme={theme as keyof typeof infoCardConfig.variants.theme}
                  />
                </div>
              )
            })}
          </div>
        )
      }

      return (
        <div style={{ display: 'flex' }}>
          <Story />
        </div>
      )
    },
  ],
}

export default meta

type Story = StoryObj<typeof InfoCard>

export const Default: Story = {
  args: {
    ...meta.args,
  },
}

export const Primary_1: Story = {
  args: {
    ...meta.args,
    theme: 'Primary 1',
  },
}

export const Primary_2: Story = {
  args: {
    ...meta.args,
    theme: 'Primary 2',
  },
}

export const Primary_3: Story = {
  args: {
    ...meta.args,
    theme: 'Primary 3',
  },
}

export const Accent: Story = {
  args: {
    ...meta.args,
    theme: 'Accent',
  },
}

export const White: Story = {
  args: {
    ...meta.args,
    theme: 'White',
  },
}

export const Image: Story = {
  args: {
    ...meta.args,
    backgroundImage: {
      src: './img/img1.jpg',
      alt: 'Image alt text',
    },
    theme: 'Image',
  },
}

export const AllThemesScandic: Story = {
  args: {
    ...meta.args,
    hotelTheme: Theme.scandic,
  },
}

export const AllThemesDowntownCamper: Story = {
  args: {
    ...meta.args,
    hotelTheme: Theme.downtownCamper,
  },
}

export const AllThemesHaymarket: Story = {
  args: {
    ...meta.args,
    hotelTheme: Theme.haymarket,
  },
}

export const AllThemesScandicGo: Story = {
  args: {
    ...meta.args,
    hotelTheme: Theme.scandicGo,
  },
}

export const AllThemesGrandHotel: Story = {
  args: {
    ...meta.args,
    hotelTheme: Theme.grandHotel,
  },
}

export const AllThemesHotelNorge: Story = {
  args: {
    ...meta.args,
    hotelTheme: Theme.hotelNorge,
  },
}

export const AllThemesMarski: Story = {
  args: {
    ...meta.args,
    hotelTheme: Theme.marski,
  },
}

export const AllThemesTheDock: Story = {
  args: {
    ...meta.args,
    hotelTheme: Theme.theDock,
  },
}