feat(SW-2264): Added campaign overview page

Approved-by: Matilda Landström

packages/design-system/example/components/ContentPage/Header/Header.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@scandic-hotels/design-system/Button'
-import { Chips } from '@scandic-hotels/design-system/Chips'
 import { ChipButton } from '@scandic-hotels/design-system/ChipButton'
 import { ChipLink } from '@scandic-hotels/design-system/ChipLink'
+import { Chips } from '@scandic-hotels/design-system/Chips'
 import { Typography } from '@scandic-hotels/design-system/Typography'
 
 import styles from './header.module.css'
@@ -10,8 +10,6 @@ import type { PressEvent } from 'react-aria-components'
 
 export function Header() {
   const onPress = (e: PressEvent) => alert(e.target.innerHTML)
-  const onClick = (e: React.MouseEvent<HTMLAnchorElement>) =>
-    alert(`Link to: ${e.currentTarget.href}`)
 
   return (
     <header className={styles.header}>
@@ -42,27 +40,27 @@ export function Header() {
       <div className={styles.chips}>
         <Chips>
           <ChipButton onPress={onPress}>Restaurants and bars</ChipButton>
-          <ChipLink onClick={onClick} href="/kristianshavn">
+          <ChipLink onPress={onPress} href="/kristianshavn">
             Kristianshavn
           </ChipLink>
           <ChipButton onPress={onPress}>Tivoli Gardens</ChipButton>
-          <ChipLink onClick={onClick} href="/copenhagen">
+          <ChipLink onPress={onPress} href="/copenhagen">
             See all Copenhagen
           </ChipLink>
           <ChipButton onPress={onPress}>See all Copenhagen</ChipButton>
-          <ChipLink onClick={onClick} href="/copenhagen">
+          <ChipLink onPress={onPress} href="/copenhagen">
             See all Copenhagen
           </ChipLink>
           <ChipButton onPress={onPress}>See all Copenhagen</ChipButton>
-          <ChipLink onClick={onClick} href="/copenhagen">
+          <ChipLink onPress={onPress} href="/copenhagen">
             See all Copenhagen
           </ChipLink>
           <ChipButton onPress={onPress}>See all Copenhagen</ChipButton>
-          <ChipLink onClick={onClick} href="/copenhagen">
+          <ChipLink onPress={onPress} href="/copenhagen">
             See all Copenhagen
           </ChipLink>
           <ChipButton onPress={onPress}>See all Copenhagen</ChipButton>
-          <ChipLink onClick={onClick} href="/copenhagen">
+          <ChipLink onPress={onPress} href="/copenhagen">
             See all Copenhagen
           </ChipLink>
         </Chips>

packages/design-system/lib/components/ChipButton/chip-button.module.css

@@ -26,7 +26,6 @@
   background-color: var(--Surface-Primary-Hover);
 }
 
-.Outlined:focus,
 .Outlined:active {
   border-color: var(--Border-Interactive-Selected);
 }

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

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { ChipLink } from './ChipLink.tsx'
 import { MaterialIcon } from '../Icons/MaterialIcon'
+import { ChipLink } from './ChipLink.tsx'
 
 const meta: Meta<typeof ChipLink> = {
-  title: 'Components/Chip/ChipLInk 🚧',
+  title: 'Components/Chip/ChipLink',
   component: ChipLink,
 }
 
@@ -15,7 +15,7 @@ type Story = StoryObj<typeof ChipLink>
 export const Default: Story = {
   args: {
     href: '/',
-    onClick: (e) => e.preventDefault(),
+    onPress: (e) => console.log(e),
     children: (
       <>
         Link Chip

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

@@ -1,19 +1,24 @@
+import { cx } from 'class-variance-authority'
 import { Typography } from '../Typography'
 
 import styles from './chip-link.module.css'
 
 import type { PropsWithChildren } from 'react'
+import {
+  Link as LinkRAC,
+  LinkProps as LinkRACProps,
+} from 'react-aria-components'
 
 export function ChipLink({
   children,
   className,
   ...props
-}: PropsWithChildren<React.AnchorHTMLAttributes<HTMLAnchorElement>>) {
+}: PropsWithChildren<LinkRACProps>) {
   return (
     <Typography variant="Body/Supporting text (caption)/smBold">
-      <a {...props} className={[styles.chip, className].join(' ')}>
+      <LinkRAC {...props} className={cx(styles.chip, className)}>
         {children}
-      </a>
+      </LinkRAC>
     </Typography>
   )
 }

packages/design-system/lib/components/ChipLink/chip-link.module.css

@@ -1,18 +1,21 @@
 .chip {
   background-color: var(--Component-Button-Inverted-Fill-Default);
-  border-color: var(--Component-Button-Inverted-Border-Default);
-  border-style: solid;
-  border-width: 1px;
+  border: 1px solid var(--Component-Button-Inverted-Border-Default);
   border-radius: var(--Corner-radius-sm);
   padding: var(--Space-x1) var(--Space-x15);
   color: var(--Text-Interactive-Default);
   display: inline-flex;
   align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  gap: var(--Space-x05);
 }
 
 .chip:hover {
-  /* TODO: change to proper Component-variable once it is available */
-  background-color: var(--Scandic-Peach-10);
-  /* TODO: change to proper Component-variable once it is available */
-  color: var(--Scandic-Red-100);
+  background-color: var(--Surface-Primary-Hover-Accent);
+}
+
+.chip:focus {
+  outline-offset: 4px;
+  outline-color: var(--Border-Interactive-Focus);
 }