feat(SW-2264): Added campaign overview page

Approved-by: Matilda Landström

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);
 }