Merged in feat-StaticChip-component (pull request #3401)

feat: create new StaticChip component

* feat: create new StaticChip componeny

* refactor: remove deprecated Chip

* fix: update type

* refactor: remove div


Approved-by: Erik Tiekstra

apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx

@@ -1,7 +1,7 @@
 import { Lock } from "react-feather"
 
 import { MembershipLevelEnum } from "@scandic-hotels/common/constants/membershipLevels"
-import Chip from "@scandic-hotels/design-system/Chip"
+import { ChipStatic } from "@scandic-hotels/design-system/ChipStatic"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { getMembershipLevel } from "@/lib/trpc/memoizedRequests"
@@ -46,13 +46,13 @@ export default async function NextLevelRewardsBlock({
       <Grids.Stackable columns={2}>
         {nextLevelRewards.rewards.map((reward) => (
           <article key={reward.reward_id} className={styles.card}>
-            <Chip>
+            <ChipStatic lowerCase>
               <Lock height={16} />
               {intl.formatMessage({
                 id: "rewards.nextLevel.levelUpToUnlock",
                 defaultMessage: "Level up to unlock",
               })}
-            </Chip>
+            </ChipStatic>
             <div className={styles.textContainer}>
               <Typography
                 variant="Body/Paragraph/mdRegular"

apps/scandic-web/components/ContentCard/index.tsx

@@ -4,7 +4,7 @@ import { cx } from "class-variance-authority"
 import NextLink from "next/link"
 import { useIntl } from "react-intl"
 
-import Chip from "@scandic-hotels/design-system/Chip"
+import { ChipStatic } from "@scandic-hotels/design-system/ChipStatic"
 import Image from "@scandic-hotels/design-system/Image"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -47,7 +47,14 @@ export function ContentCard({
           dimensions={image.dimensions}
         />
         {promoText ? (
-          <Chip className={styles.promoTag}>{promoText}</Chip>
+          <ChipStatic
+            color="Neutral"
+            size="sm"
+            lowerCase
+            className={styles.promoTag}
+          >
+            {promoText}
+          </ChipStatic>
         ) : null}
       </div>
       <div className={styles.content}>

apps/scandic-web/components/ContentType/DestinationPage/ExperienceList/index.tsx

@@ -2,7 +2,7 @@
 
 import { useIntl } from "react-intl"
 
-import Chip from "@scandic-hotels/design-system/Chip"
+import { ChipStatic } from "@scandic-hotels/design-system/ChipStatic"
 
 import { mapExperiencesToListData } from "./utils"
 
@@ -25,10 +25,10 @@ export default function ExperienceList({ experiences }: ExperienceListProps) {
     <ul className={styles.experienceList}>
       {experienceList.map(({ Icon, name }) => (
         <li key={name}>
-          <Chip variant="tag">
+          <ChipStatic>
             <Icon size={20} color="Icon/Interactive/Default" />
             {name}
-          </Chip>
+          </ChipStatic>
         </li>
       ))}
     </ul>

apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/DialogImage/index.tsx

@@ -1,8 +1,7 @@
-import Chip from "@scandic-hotels/design-system/Chip"
+import { ChipStatic } from "@scandic-hotels/design-system/ChipStatic"
 import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
 import Image from "@scandic-hotels/design-system/Image"
 import ImageFallback from "@scandic-hotels/design-system/ImageFallback"
-import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./dialogImage.module.css"
 
@@ -34,12 +33,10 @@ export default function DialogImage({
       )}
       {rating ? (
         <div className={styles.tripAdvisor}>
-          <Chip className={styles.tripAdvisor}>
+          <ChipStatic color="Neutral" size="sm" className={styles.tripAdvisor}>
             <TripadvisorIcon color="Icon/Interactive/Default" />
-            <Typography variant="Tag/sm">
+            {rating}
-              <span>{rating}</span>
+          </ChipStatic>
-            </Typography>
-          </Chip>
         </div>
       ) : null}
     </div>

packages/design-system/lib/components/Chip/chip.module.css

@@ -1,43 +0,0 @@
-div.chip {
-  --chip-text-color: var(--Base-Text-High-contrast);
-  --chip-background-color: var(--Base-Surface-Primary-light-Normal);
-  align-items: center;
-  color: var(--chip-text-color);
-  background-color: var(--chip-background-color);
-  border-radius: var(--Corner-radius-sm);
-  display: flex;
-  gap: var(--Space-x05);
-  justify-content: center;
-}
-
-.chip.small {
-  padding: var(--Space-x025) var(--Space-x05);
-}
-
-.chip.medium {
-  padding: var(--Space-x05) var(--Space-x1);
-}
-
-.chip *,
-.chip svg * {
-  fill: var(--chip-text-color);
-}
-
-.chip.burgundy {
-  --chip-text-color: var(--Primary-Dark-On-Surface-Text);
-  --chip-background-color: var(--Base-Text-High-contrast);
-}
-
-.chip.transparent {
-  --chip-text-color: var(--UI-Input-Controls-On-Fill-Normal);
-  --chip-background-color: rgba(64, 57, 55, 0.9);
-}
-
-.chip.tag {
-  --chip-background-color: var(--Base-Surface-Subtle-Hover);
-}
-
-.chip.uiTextHighContrast {
-  --chip-background-color: var(--UI-Text-High-contrast);
-  --chip-text-color: var(--UI-Input-Controls-On-Fill-Normal);
-}

packages/design-system/lib/components/Chip/index.tsx

@@ -1,30 +0,0 @@
-import { VariantProps } from "class-variance-authority"
-import { chipVariants } from "./variants"
-import Footnote from "../Footnote"
-
-export interface ChipProps
-  extends
-    React.HtmlHTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof chipVariants> {}
-
-/**
- * @deprecated Do not use
- */
-
-export default function Chip({
-  children,
-  className,
-  size,
-  variant,
-}: ChipProps) {
-  const classNames = chipVariants({
-    className,
-    size,
-    variant,
-  })
-  return (
-    <Footnote asChild>
-      <div className={classNames}>{children}</div>
-    </Footnote>
-  )
-}

packages/design-system/lib/components/Chip/variants.ts

@@ -1,23 +0,0 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./chip.module.css"
-
-export const chipVariants = cva(styles.chip, {
-  variants: {
-    size: {
-      small: styles.small,
-      medium: styles.medium,
-    },
-    variant: {
-      default: styles.default,
-      burgundy: styles.burgundy,
-      transparent: styles.transparent,
-      tag: styles.tag,
-      uiTextHighContrast: styles.uiTextHighContrast,
-    },
-  },
-  defaultVariants: {
-    size: "medium",
-    variant: "default",
-  },
-})

packages/design-system/lib/components/ChipStatic/ChipStatic.stories.tsx

@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite"
+
+import { ChipStatic } from "./ChipStatic.tsx"
+import { MaterialIcon } from "../Icons/MaterialIcon/MaterialIcon.tsx"
+
+const meta: Meta<typeof ChipStatic> = {
+  title: "Core Components/ChipStatic",
+  component: ChipStatic,
+}
+
+export default meta
+
+type Story = StoryObj<typeof ChipStatic>
+
+export const Neutral: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
+      <ChipStatic color="Neutral" size="xs" lowerCase>
+        <MaterialIcon icon="lock" />
+        lowerCase xs
+        <MaterialIcon icon="lock" />
+      </ChipStatic>
+
+      <ChipStatic color="Neutral" size="xs">
+        <MaterialIcon icon="lock" />
+        xs
+        <MaterialIcon icon="lock" />
+      </ChipStatic>
+
+      <ChipStatic color="Neutral" size="sm">
+        <MaterialIcon icon="lock" />
+        sm
+        <MaterialIcon icon="lock" />
+      </ChipStatic>
+
+      <ChipStatic color="Neutral" size="lg">
+        <MaterialIcon icon="lock" />
+        lg
+        <MaterialIcon icon="lock" />
+      </ChipStatic>
+    </div>
+  ),
+}
+
+export const Subtle: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
+      <ChipStatic color="Subtle" size="xs" lowerCase>
+        <MaterialIcon icon="lock" />
+        lowerCase xs
+        <MaterialIcon icon="lock" />
+      </ChipStatic>
+
+      <ChipStatic color="Subtle" size="xs">
+        <MaterialIcon icon="lock" />
+        xs
+        <MaterialIcon icon="lock" />
+      </ChipStatic>
+
+      <ChipStatic color="Subtle" size="sm">
+        <MaterialIcon icon="lock" />
+        sm
+        <MaterialIcon icon="lock" />
+      </ChipStatic>
+
+      <ChipStatic color="Subtle" size="lg">
+        <MaterialIcon icon="lock" />
+        lg
+        <MaterialIcon icon="lock" />
+      </ChipStatic>
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
+      <ChipStatic color="Disabled" size="xs" lowerCase>
+        <MaterialIcon icon="lock" />
+        lowerCase xs
+        <MaterialIcon icon="lock" />
+      </ChipStatic>
+
+      <ChipStatic color="Disabled" size="xs">
+        <MaterialIcon icon="lock" />
+        xs
+        <MaterialIcon icon="lock" />
+      </ChipStatic>
+
+      <ChipStatic color="Disabled" size="sm">
+        <MaterialIcon icon="lock" />
+        sm
+        <MaterialIcon icon="lock" />
+      </ChipStatic>
+
+      <ChipStatic color="Disabled" size="lg">
+        <MaterialIcon icon="lock" />
+        lg
+        <MaterialIcon icon="lock" />
+      </ChipStatic>
+    </div>
+  ),
+}

packages/design-system/lib/components/ChipStatic/ChipStatic.tsx

@@ -0,0 +1,39 @@
+import { Typography } from "../Typography"
+
+import { variants } from "./variants"
+
+import type { TypographyProps } from "../Typography/types"
+import type { VariantProps } from "class-variance-authority"
+import type { ReactNode } from "react"
+
+import styles from "./chip-static.module.css"
+
+type ChipStaticProps = {
+  children: ReactNode
+  className?: string
+  lowerCase?: boolean
+} & VariantProps<typeof variants>
+
+export function ChipStatic({
+  className,
+  color,
+  size,
+  lowerCase = false,
+  children,
+}: ChipStaticProps) {
+  const classNames = variants({ className, color, size })
+  const typographyVariant = getTypographyVariant(lowerCase)
+
+  return (
+    <Typography variant={typographyVariant}>
+      <span className={classNames}>{children}</span>
+    </Typography>
+  )
+}
+
+function getTypographyVariant(lowerCase: boolean): TypographyProps["variant"] {
+  if (lowerCase) {
+    return "Body/Supporting text (caption)/smRegular"
+  }
+  return "Tag/sm"
+}

packages/design-system/lib/components/ChipStatic/chip-static.module.css

@@ -0,0 +1,35 @@
+.chip {
+  border-radius: var(--Corner-radius-sm);
+  padding: 0 var(--Space-x1);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--Space-x05);
+}
+
+.size-xs {
+  height: 24px;
+}
+
+.size-sm {
+  height: 26px;
+}
+
+.size-lg {
+  height: 32px;
+}
+
+.color-subtle {
+  background-color: var(--Surface-Secondary-Subtle);
+  color: var(--Text-Interactive-Default);
+}
+
+.color-disabled {
+  background-color: var(--Surface-UI-Fill-Disabled);
+  border: 1px solid var(--Border-Interactive-Disabled);
+  color: var(--Text-Interactive-Disabled);
+}
+
+.color-neutral {
+  background-color: var(--Surface-Primary-Default);
+  color: var(--Text-Interactive-Default);
+}

packages/design-system/lib/components/ChipStatic/index.tsx

@@ -0,0 +1 @@
+export { ChipStatic } from "./ChipStatic"

packages/design-system/lib/components/ChipStatic/variants.ts

@@ -0,0 +1,24 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './chip-static.module.css'
+
+export const config = {
+  variants: {
+    color: {
+      Subtle: styles['color-subtle'],
+      Disabled: styles['color-disabled'],
+      Neutral: styles['color-neutral'],
+    },
+    size: {
+      xs: styles['size-xs'],
+      sm: styles['size-sm'],
+      lg: styles['size-lg'],
+    },
+  },
+  defaultVariants: {
+    color: 'Neutral',
+    size: 'sm',
+  },
+} as const
+
+export const variants = cva(styles.chip, config)

packages/design-system/package.json

@@ -16,10 +16,10 @@
     "./CampaignRateCard": "./lib/components/RateCard/Campaign/index.tsx",
     "./Caption": "./lib/components/Caption/index.tsx",
     "./Card": "./lib/components/Card/index.tsx",
-    "./Chip": "./lib/components/Chip/index.tsx",
     "./ChipButton": "./lib/components/ChipButton/index.tsx",
     "./ChipLink": "./lib/components/ChipLink/index.tsx",
     "./Chips": "./lib/components/Chips/index.tsx",
+    "./ChipStatic": "./lib/components/ChipStatic/index.tsx",
     "./CodeRateCard": "./lib/components/RateCard/Code/index.tsx",
     "./DeprecatedSelect": "./lib/components/DeprecatedSelect/index.tsx",
     "./Divider": "./lib/components/Divider/index.tsx",