diff --git a/apps/scandic-web/components/Blocks/AllCampaigns/index.tsx b/apps/scandic-web/components/Blocks/AllCampaigns/index.tsx index bf1157038..c67061bc1 100644 --- a/apps/scandic-web/components/Blocks/AllCampaigns/index.tsx +++ b/apps/scandic-web/components/Blocks/AllCampaigns/index.tsx @@ -1,3 +1,4 @@ +import { ContentCard } from "@scandic-hotels/design-system/ContentCard" import { Typography } from "@scandic-hotels/design-system/Typography" import { Carousel } from "@/components/Carousel" @@ -8,7 +9,6 @@ import { CarouselNext, CarouselPrevious, } from "@/components/Carousel/CarouselNavigation" -import { ContentCard } from "@/components/ContentCard" import styles from "./allCampaigns.module.css" diff --git a/apps/scandic-web/components/Blocks/CardGallery/index.tsx b/apps/scandic-web/components/Blocks/CardGallery/index.tsx index 7a237ca1f..6398bd75c 100644 --- a/apps/scandic-web/components/Blocks/CardGallery/index.tsx +++ b/apps/scandic-web/components/Blocks/CardGallery/index.tsx @@ -2,8 +2,9 @@ import { useState } from "react" +import { ContentCard } from "@scandic-hotels/design-system/ContentCard" + import { Carousel } from "@/components/Carousel" -import { ContentCard } from "@/components/ContentCard" import { Section } from "@/components/Section" import { SectionHeader } from "@/components/Section/Header" import SectionLink from "@/components/Section/Link" diff --git a/apps/scandic-web/components/Blocks/CarouselCards/index.tsx b/apps/scandic-web/components/Blocks/CarouselCards/index.tsx index f34c22792..32fa0f2b7 100644 --- a/apps/scandic-web/components/Blocks/CarouselCards/index.tsx +++ b/apps/scandic-web/components/Blocks/CarouselCards/index.tsx @@ -2,8 +2,9 @@ import { useState } from "react" +import { ContentCard } from "@scandic-hotels/design-system/ContentCard" + import { Carousel } from "@/components/Carousel" -import { ContentCard } from "@/components/ContentCard" import { Section } from "@/components/Section" import { SectionHeader } from "@/components/Section/Header" import SectionLink from "@/components/Section/Link" diff --git a/apps/scandic-web/components/ContentType/HotelPage/Campaigns/CampaignCardList/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/Campaigns/CampaignCardList/index.tsx index 82513c8e5..5928822c2 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/Campaigns/CampaignCardList/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/Campaigns/CampaignCardList/index.tsx @@ -2,7 +2,7 @@ import { cx } from "class-variance-authority" -import { ContentCard } from "@/components/ContentCard" +import { ContentCard } from "@scandic-hotels/design-system/ContentCard" import styles from "./campaignCardList.module.css" diff --git a/apps/scandic-web/components/ContentType/HotelPage/Campaigns/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/Campaigns/index.tsx index 0d2977e15..c812aed68 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/Campaigns/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/Campaigns/index.tsx @@ -1,4 +1,5 @@ import { getTheme } from "@scandic-hotels/common/utils/theme/serverContext" +import { ContentCard } from "@scandic-hotels/design-system/ContentCard" import { Typography } from "@scandic-hotels/design-system/Typography" import { Carousel } from "@/components/Carousel" @@ -9,7 +10,6 @@ import { CarouselNext, CarouselPrevious, } from "@/components/Carousel/CarouselNavigation" -import { ContentCard } from "@/components/ContentCard" import CampaignHero from "@/components/ContentType/CampaignPage/Hero" import CampaignCardList from "@/components/ContentType/HotelPage/Campaigns/CampaignCardList" import { getIntl } from "@/i18n" diff --git a/packages/design-system/lib/components/Card/Compositions/ContentCard.stories.tsx b/packages/design-system/lib/components/Card/Compositions/ContentCard.stories.tsx deleted file mode 100644 index b63fb6d10..000000000 --- a/packages/design-system/lib/components/Card/Compositions/ContentCard.stories.tsx +++ /dev/null @@ -1,160 +0,0 @@ -import type { Meta, StoryObj } from "@storybook/nextjs-vite" -import { fn } from "storybook/test" - -import { themes } from "../../../../.storybook/preview" - -import { Card } from "../" -import { Button } from "../../Button" -import { Typography } from "../../Typography" - -type CompositionProps = React.ComponentPropsWithoutRef & { - _onPrimaryPress?: () => void - _onSecondaryPress?: () => void - inMainArea: boolean - showTitle: boolean - showPreamble: boolean - showPrimaryButton: boolean - showSecondaryButton: boolean -} - -const meta: Meta = { - title: "Compositions/Card", - component: Card, - decorators: [ - (Story, context) => { - if (context.name.toLowerCase().indexOf("all themes") >= 0) { - return ( - <> -

{context.name}

- {Object.entries(themes.themes).map(([key, value], ix) => { - return ( -
-

{key}

- -
- ) - })} - - ) - } - - return ( -
- -
- ) - }, - ], - argTypes: { - inMainArea: { - name: "Is in main area", - }, - showTitle: { - name: "Composition: Show title", - }, - showPreamble: { - name: "Composition: Show preamble", - }, - showPrimaryButton: { - name: "Composition: Show primary button", - }, - showSecondaryButton: { - name: "Composition: Show secondary button", - }, - _onPrimaryPress: { - table: { - disable: true, - }, - }, - _onSecondaryPress: { - table: { - disable: true, - }, - }, - }, - render: ({ - inMainArea, - showTitle, - showPreamble, - showPrimaryButton, - showSecondaryButton, - ...args - }) => ( - - {showTitle && ( - -

Content Card

- - )} - - {showPreamble && ( - -

- Mattis sit duis pulvinar ultricies auctor euismod. Augue mattis - mauris at est iaculis pulvinar pulvinar. -

- - )} - - {showPrimaryButton && inMainArea && ( - - )} - - {showPrimaryButton && !inMainArea && ( - - )} - - {showSecondaryButton && ( - - )} - - ), -} - -export default meta - -type Story = StoryObj - -export const ContentCardMainArea: Story = { - args: { - as: "Default", - inMainArea: true, - showTitle: true, - showPreamble: true, - showPrimaryButton: true, - showSecondaryButton: true, - _onPrimaryPress: fn(), - _onSecondaryPress: fn(), - }, -} - -export const ContentCardNonMainArea: Story = { - args: { - as: "Default", - inMainArea: false, - showTitle: true, - showPreamble: true, - showPrimaryButton: true, - showSecondaryButton: true, - _onPrimaryPress: fn(), - _onSecondaryPress: fn(), - }, -} - -export const ContentCardMainAreaAllThemes: Story = { - ...ContentCardMainArea, -} - -export const ContentCardNonMainAreaAllThemes: Story = { - ...ContentCardNonMainArea, -} diff --git a/packages/design-system/lib/components/ChipButton/ChipButton.stories.tsx b/packages/design-system/lib/components/ChipButton/ChipButton.stories.tsx index 7a3be21ee..a9c36051f 100644 --- a/packages/design-system/lib/components/ChipButton/ChipButton.stories.tsx +++ b/packages/design-system/lib/components/ChipButton/ChipButton.stories.tsx @@ -2,18 +2,47 @@ import type { Meta, StoryObj } from "@storybook/nextjs-vite" import { fn } from "storybook/test" +import { MaterialIcon } from "../Icons/MaterialIcon/index.tsx" import { ChipButton } from "./ChipButton.tsx" import { config as chipButtonConfig } from "./variants" -import { MaterialIcon } from "../Icons/MaterialIcon/index.tsx" const meta: Meta = { title: "Core Components/ChipButton", component: ChipButton, argTypes: { + children: { + table: { + disable: true, + }, + }, variant: { control: "select", - type: "string", options: Object.keys(chipButtonConfig.variants.variant), + table: { + type: { + summary: Object.keys(chipButtonConfig.variants.variant).join(" | "), + }, + defaultValue: { summary: chipButtonConfig.defaultVariants.variant }, + }, + }, + size: { + control: "select", + options: Object.keys(chipButtonConfig.variants.size), + table: { + type: { + summary: Object.keys(chipButtonConfig.variants.size).join(" | "), + }, + defaultValue: { summary: "Large" }, + }, + description: + "Sets the size of the ChipButton component. This only affects the `FilterRounded` variant.", + }, + selected: { + control: "boolean", + table: { + type: { summary: "boolean" }, + defaultValue: { summary: "false" }, + }, }, onPress: { table: { diff --git a/packages/design-system/lib/components/ContentCard/ContentCard.stories.tsx b/packages/design-system/lib/components/ContentCard/ContentCard.stories.tsx new file mode 100644 index 000000000..17be551a6 --- /dev/null +++ b/packages/design-system/lib/components/ContentCard/ContentCard.stories.tsx @@ -0,0 +1,127 @@ +import type { Meta, StoryObj } from "@storybook/nextjs-vite" + +import { ContentCard } from "./ContentCard.tsx" + +const IMAGE = { + id: 1, + url: "./img/img2.jpg", + title: "Placeholder image", + meta: { + alt: "Placeholder image", + caption: "This is a placeholder image", + }, + focalPoint: { x: 50, y: 50 }, + dimensions: { width: 1920, height: 1189, aspectRatio: 1.61 }, +} +const IMAGE_2 = { + ...IMAGE, + id: 2, + url: "./img/img3.jpg", + dimensions: { width: 1920, height: 2880, aspectRatio: 0.67 }, +} + +const DEFAULT_ARGS = { + heading: "Lorem ipsum", + bodyText: + "Dolor sit amet, consectetur adipiscing elit. Curabitur vitae neque non ipsum efficitur hendrerit at ut nulla.", + link: { + href: "#", + text: "Learn more", + }, + image: IMAGE, +} + +const meta: Meta = { + title: "Core Components/Cards/ContentCard", + parameters: { + docs: { + description: { + component: + "The card itself does not have a maximum width, but it will adapt to the width of its container. The card is mostly used together with other content cards. It is recommended to use the ContentCard inside a grid or a container with a set maximum width for best results.", + }, + }, + }, + component: ContentCard, + argTypes: { + heading: { + control: "text", + table: { + type: { summary: "string" }, + }, + }, + bodyText: { + control: "text", + table: { + type: { summary: "string" }, + }, + }, + promoText: { + control: "text", + table: { + type: { summary: "string | undefined" }, + }, + }, + link: { + control: "object", + description: + "The link of where the card should navigate to. The whole card is clickable.", + table: { + type: { + summary: + "{href: string, openInNewTab?: boolean, isExternal?: boolean}", + }, + }, + }, + image: { + control: "object", + table: { + type: { + summary: "ImageVaultAsset", + detail: + "{ id: number, url: string, meta: {alt?: string | null, caption?: string | null}, focalPoint: { x: number, y: number }, dimensions: { width: number, height: number, aspectRatio: number } }", + }, + }, + }, + }, + args: { ...DEFAULT_ARGS }, + globals: { + backgrounds: { default: "storybookLight" }, + }, +} + +export default meta + +type Story = StoryObj + +export const Default: Story = { + args: { + ...meta.args, + }, +} + +export const WithPromoText: Story = { + args: { + ...meta.args, + promoText: "Popular choice", + }, +} + +export const MultipleCards: Story = { + args: { + ...meta.args, + }, + render: (args) => ( +
+ + +
+ ), +} diff --git a/apps/scandic-web/components/ContentCard/index.tsx b/packages/design-system/lib/components/ContentCard/ContentCard.tsx similarity index 90% rename from apps/scandic-web/components/ContentCard/index.tsx rename to packages/design-system/lib/components/ContentCard/ContentCard.tsx index a6bca0761..e274dfb74 100644 --- a/apps/scandic-web/components/ContentCard/index.tsx +++ b/packages/design-system/lib/components/ContentCard/ContentCard.tsx @@ -4,13 +4,12 @@ import { cx } from "class-variance-authority" import NextLink from "next/link" import { useIntl } from "react-intl" -import { ChipStatic } from "@scandic-hotels/design-system/ChipStatic" -import Image from "@scandic-hotels/design-system/Image" -import { Typography } from "@scandic-hotels/design-system/Typography" - import styles from "./contentCard.module.css" import type { ImageVaultAsset } from "@scandic-hotels/common/utils/imageVault" +import { ChipStatic } from "../ChipStatic" +import Image from "../Image" +import { Typography } from "../Typography" interface ContentCardProps { link?: { @@ -30,10 +29,11 @@ export function ContentCard({ image, bodyText, promoText, - className = "", + className, link, }: ContentCardProps) { const intl = useIntl() + const card = (
diff --git a/apps/scandic-web/components/ContentCard/contentCard.module.css b/packages/design-system/lib/components/ContentCard/contentCard.module.css similarity index 100% rename from apps/scandic-web/components/ContentCard/contentCard.module.css rename to packages/design-system/lib/components/ContentCard/contentCard.module.css diff --git a/packages/design-system/lib/components/ContentCard/index.tsx b/packages/design-system/lib/components/ContentCard/index.tsx new file mode 100644 index 000000000..466b43784 --- /dev/null +++ b/packages/design-system/lib/components/ContentCard/index.tsx @@ -0,0 +1 @@ +export { ContentCard } from "./ContentCard" diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 8d053fe04..577eafbb7 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -20,6 +20,7 @@ "./Chips": "./lib/components/Chips/index.tsx", "./ChipStatic": "./lib/components/ChipStatic/index.tsx", "./CodeRateCard": "./lib/components/RateCard/Code/index.tsx", + "./ContentCard": "./lib/components/ContentCard/index.tsx", "./DeprecatedSelect": "./lib/components/DeprecatedSelect/index.tsx", "./Divider": "./lib/components/Divider/index.tsx", "./FacilityToIcon": "./lib/components/FacilityToIcon/index.tsx",