Merged in feat/sw-3271-move-chip-to-design-system (pull request #2659)

feat(SW-3271): Move Chip to design-system

* Move Chip to design-system


Approved-by: Joakim Jäderberg

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

@@ -2,6 +2,7 @@ import { Lock } from "react-feather"
 
 import { MembershipLevelEnum } from "@scandic-hotels/common/constants/membershipLevels"
 import Body from "@scandic-hotels/design-system/Body"
+import Chip from "@scandic-hotels/design-system/Chip"
 import Title from "@scandic-hotels/design-system/Title"
 
 import { getMembershipLevel } from "@/lib/trpc/memoizedRequests"
@@ -10,7 +11,6 @@ import { serverClient } from "@/lib/trpc/server"
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
-import Chip from "@/components/TempDesignSystem/Chip"
 import Grids from "@/components/TempDesignSystem/Grids"
 import { getIntl } from "@/i18n"
 

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

@@ -1,10 +1,9 @@
 import Body from "@scandic-hotels/design-system/Body"
+import Chip from "@scandic-hotels/design-system/Chip"
 import Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/Link"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
-import Chip from "@/components/TempDesignSystem/Chip"
-
 import styles from "./contentCard.module.css"
 
 import type { ContentCardProps } from "./contentCard"

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

@@ -2,7 +2,7 @@
 
 import { useIntl } from "react-intl"
 
-import Chip from "@/components/TempDesignSystem/Chip"
+import Chip from "@scandic-hotels/design-system/Chip"
 
 import { mapExperiencesToListData } from "./utils"
 

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

@@ -1,9 +1,8 @@
+import Chip from "@scandic-hotels/design-system/Chip"
 import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
 import Image from "@scandic-hotels/design-system/Image"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Chip from "@/components/TempDesignSystem/Chip"
-
 import styles from "./dialogImage.module.css"
 
 interface DialogImageProps {

apps/scandic-web/components/HotelReservation/HotelCardDialog/HotelCardDialogImage/index.tsx

@@ -1,8 +1,7 @@
+import Chip from "@scandic-hotels/design-system/Chip"
 import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
 import Image from "@scandic-hotels/design-system/Image"
 
-import Chip from "@/components/TempDesignSystem/Chip"
-
 import { hotelCardDialogImageVariants } from "./variants"
 
 import styles from "./hotelCardDialogImage.module.css"

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx

@@ -5,13 +5,13 @@ import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { logger } from "@scandic-hotels/common/logger"
 import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
+import Chip from "@scandic-hotels/design-system/Chip"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { RateEnum } from "@scandic-hotels/trpc/enums/rate"
 
-import Chip from "@/components/TempDesignSystem/Chip"
 import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"
 import { useIsUserLoggedIn } from "@/hooks/useIsUserLoggedIn"
 

apps/scandic-web/components/TempDesignSystem/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(--Spacing-x-half);
-  justify-content: center;
-}
-
-.chip.small {
-  padding: var(--Spacing-x-quarter) var(--Spacing-x-half);
-}
-
-.chip.medium {
-  padding: var(--Spacing-x-half) var(--Spacing-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);
-}

apps/scandic-web/components/TempDesignSystem/Chip/chip.ts

@@ -1,7 +0,0 @@
-import type { VariantProps } from "class-variance-authority"
-
-import type { chipVariants } from "./variants"
-
-export interface ChipProps
-  extends React.HtmlHTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof chipVariants> {}

apps/scandic-web/components/TempDesignSystem/Chip/index.tsx

@@ -1,23 +0,0 @@
-import Footnote from "@scandic-hotels/design-system/Footnote"
-
-import { chipVariants } from "./variants"
-
-import type { ChipProps } from "./chip"
-
-export default function Chip({
-  children,
-  className,
-  size,
-  variant,
-}: ChipProps) {
-  const classNames = chipVariants({
-    className,
-    size,
-    variant,
-  })
-  return (
-    <Footnote asChild>
-      <div className={classNames}>{children}</div>
-    </Footnote>
-  )
-}

apps/scandic-web/components/TempDesignSystem/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",
-  },
-})