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: "Core Components/Cards/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,
  },
}

export const AllThemesBassinSeven: Story = {
  args: {
    ...meta.args,
    hotelTheme: Theme.bassinSeven,
  },
}