feat(SW-2264): Added campaign overview page

Approved-by: Matilda Landström

apps/scandic-web/components/TempDesignSystem/LinkChips/Chip/chip.module.css

@@ -1,14 +0,0 @@
-.linkChip {
-  display: flex;
-  align-items: center;
-  gap: var(--Spacing-x-half);
-  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
-  border-radius: var(--Corner-radius-sm);
-  background-color: var(--Base-Button-Inverted-Fill-Normal);
-  transition: background-color 0.3s;
-  text-decoration: none;
-}
-
-.linkChip:hover {
-  background-color: var(--Base-Button-Inverted-Fill-Hover-alt);
-}

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

@@ -1,4 +0,0 @@
-export interface LinkChipProps {
-  url: string
-  title: string
-}

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

@@ -1,20 +0,0 @@
-import Link from "next/link"
-
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-
-import styles from "./chip.module.css"
-
-import type { LinkChipProps } from "./chip"
-
-export default function LinkChip({ url, title }: LinkChipProps) {
-  return (
-    <Caption type="bold" color="burgundy" asChild>
-      <Link href={url} className={styles.linkChip}>
-        {title}
-        <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
-      </Link>
-    </Caption>
-  )
-}

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

@@ -1,8 +1,15 @@
-import LinkChip from "./Chip"
+"use client"
 
-import styles from "./linkChips.module.css"
+import { ChipLink } from "@scandic-hotels/design-system/ChipLink"
+import { Chips } from "@scandic-hotels/design-system/Chips"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
-import type { LinkChipsProps } from "./linkChips"
+interface LinkChipsProps {
+  chips: {
+    url: string
+    title: string
+  }[]
+}
 
 export default function LinkChips({ chips }: LinkChipsProps) {
   if (!chips.length) {
@@ -10,12 +17,13 @@ export default function LinkChips({ chips }: LinkChipsProps) {
   }
 
   return (
-    <ul className={styles.linkChips}>
-      {chips.map(({ url, title }) => (
-        <li key={`link-chip-${title}`}>
-          <LinkChip url={url} title={title} />
-        </li>
+    <Chips>
+      {chips.map(({ title, url }) => (
+        <ChipLink key={`${title}-${url}`} href={url}>
+          {title}
+          <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
+        </ChipLink>
       ))}
-    </ul>
+    </Chips>
   )
 }

apps/scandic-web/components/TempDesignSystem/LinkChips/linkChips.module.css

@@ -1,8 +0,0 @@
-.linkChips {
-  list-style: none;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  align-items: center;
-  gap: var(--Spacing-x1);
-}

apps/scandic-web/components/TempDesignSystem/LinkChips/linkChips.ts

@@ -1,5 +0,0 @@
-import type { LinkChipProps } from "./Chip/chip"
-
-export interface LinkChipsProps {
-  chips: LinkChipProps[]
-}