Merged in feat/SW-1450-destination-page-cs-components (pull request #1204)

feat(SW-1450): added components in destination pages from cs

* feat(SW-1450): added components in destination pages from cs

* feat(SW-1450): added correct refs and removed classNames


Approved-by: Fredrik Thorsson

components/TempDesignSystem/Breadcrumbs/breadcrumbs.module.css

@@ -10,7 +10,7 @@
   padding-bottom: 0;
 }
 
-.hotelHeaderWidth.breadcrumbs {
+.headerWidth.breadcrumbs {
   max-width: min(var(--max-width-page), calc(100% - var(--max-width-spacing)));
 }
 

components/TempDesignSystem/Breadcrumbs/variants.ts

@@ -10,10 +10,10 @@ export const breadcrumbsVariants = cva(styles.breadcrumbs, {
       [PageContentTypeEnum.accountPage]: styles.fullWidth,
       [PageContentTypeEnum.contentPage]: styles.contentWidth,
       [PageContentTypeEnum.collectionPage]: styles.contentWidth,
-      [PageContentTypeEnum.destinationOverviewPage]: styles.contentWidth,
-      [PageContentTypeEnum.destinationCountryPage]: styles.contentWidth,
-      [PageContentTypeEnum.destinationCityPage]: styles.contentWidth,
-      [PageContentTypeEnum.hotelPage]: styles.hotelHeaderWidth,
+      [PageContentTypeEnum.destinationOverviewPage]: styles.fullWidth,
+      [PageContentTypeEnum.destinationCountryPage]: styles.fullWidth,
+      [PageContentTypeEnum.destinationCityPage]: styles.fullWidth,
+      [PageContentTypeEnum.hotelPage]: styles.headerWidth,
       [PageContentTypeEnum.loyaltyPage]: styles.fullWidth,
       [PageContentTypeEnum.startPage]: styles.contentWidth,
       default: styles.fullWidth,

components/TempDesignSystem/Chip/chip.module.css

@@ -1,19 +1,31 @@
 div.chip {
-  align-items: center;
-  border-radius: var(--Corner-radius-xLarge);
+  --chip-text-color: var(--Base-Text-High-contrast);
+  --chip-background-color: var(--Base-Surface-Primary-light-Normal);
   display: flex;
-  gap: var(--Spacing-x-half);
-  height: 22px;
   justify-content: center;
+  align-items: center;
   padding: var(--Spacing-x-half) var(--Spacing-x1);
+  gap: var(--Spacing-x-half);
+  border-radius: var(--Corner-radius-Small);
+  color: var(--chip-text-color);
+  background-color: var(--chip-background-color);
 }
 
-.primary {
-  background-color: var(--Scandic-Red-90);
-  color: var(--Primary-Dark-On-Surface-Accent);
+.chip *,
+.chip svg * {
+  fill: var(--chip-text-color);
 }
 
-.secondary {
-  background-color: var(--Base-Surface-Primary-light-Normal);
-  color: var(--Primary-Light-On-Surface-Text);
+.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);
 }

components/TempDesignSystem/Chip/index.tsx

@@ -4,15 +4,9 @@ import { chipVariants } from "./variants"
 
 import type { ChipProps } from "./chip"
 
-export default function Chip({
-  children,
-  className,
-  intent,
-  variant,
-}: ChipProps) {
+export default function Chip({ children, className, variant }: ChipProps) {
   const classNames = chipVariants({
     className,
-    intent,
     variant,
   })
   return (

components/TempDesignSystem/Chip/variants.ts

@@ -4,16 +4,14 @@ import styles from "./chip.module.css"
 
 export const chipVariants = cva(styles.chip, {
   variants: {
-    intent: {
-      primary: styles.primary,
-      secondary: styles.secondary,
-    },
     variant: {
       default: styles.default,
+      burgundy: styles.burgundy,
+      transparent: styles.transparent,
+      tag: styles.tag,
     },
   },
   defaultVariants: {
-    intent: "primary",
     variant: "default",
   },
 })