feat(WEB-304): remaning UI from design system primitives

components/TempDesignSystem/Link/index.tsx

@@ -8,6 +8,7 @@ import type { LinkProps } from "./link"
 
 export default function Link({
   className,
+  color,
   href,
   partialMatch = false,
   size,
@@ -23,6 +24,7 @@ export default function Link({
   const classNames = linkVariants({
     active: isActive,
     className,
+    color,
     size,
     variant,
   })

components/TempDesignSystem/Link/link.module.css

@@ -6,36 +6,97 @@
   font-family: var(--typography-Body-Regular-fontFamily);
 }
 
+.breadcrumb {
+  font-family: var(--typography-Footnote-Bold-fontFamily);
+  font-size: var(--typography-Footnote-Bold-fontSize);
+  font-weight: var(--typography-Footnote-Bold-fontWeight);
+  letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
+  line-height: var(--typography-Footnote-Bold-lineHeight);
+}
+
 .myPage {
-  color: var(--some-black-color, #000);
-  font-family: var(--ff-fira-sans);
-  font-size: 1.6rem;
-  font-weight: 600;
-  letter-spacing: 0.6%;
-  line-height: 2.4rem;
+  font-family: var(--typography-Body-Underlined-fontFamily);
+  font-size: var(--typography-Body-Underlined-fontSize);
+  font-weight: var(--typography-Body-Underlined-fontWeight);
+  letter-spacing: var(--typography-Body-Underlined-letterSpacing);
+  line-height: var(--typography-Body-Underlined-lineHeight);
   text-decoration: underline;
 }
 
+.shortcut {
+  align-items: center;
+  border-bottom: 0.5px solid var(--Scandic-Beige-20);
+  display: grid;
+  font-family: var(--typography-Body-Regular-fontFamily);
+  font-size: var(--typography-Body-Regular-fontSize);
+  font-weight: var(--typography-Body-Regular-fontWeight);
+  gap: var(--Spacing-x2);
+  grid-template-columns: 1fr auto;
+  letter-spacing: var(--typography-Body-Regular-letterSpacing);
+  line-height: var(--typography-Body-Regular-lineHeight);
+  padding: var(--Spacing-x3);
+}
+
+.shortcut:last-of-type {
+  border-bottom: none;
+}
+
 .sidebar {
   align-items: center;
-  color: var(--some-text-color, #111);
+  border-radius: var(--Corner-radius-Medium);
   display: flex;
-  font-size: 1.6rem;
-  font-weight: 400;
-  gap: 0.6rem;
-  line-height: 1.9rem;
-  position: relative;
+  gap: var(--Spacing-x1);
+  padding: var(--Spacing-x1);
 }
 
 .activeSidebar {
-  font-weight: 600;
+  background-color: var(--Scandic-Brand-Warm-White);
 }
 
-.activeSidebar::before {
-  bottom: -0.4rem;
-  background-color: var(--some-text-color, #000);
-  content: "";
-  height: 0.2rem;
-  position: absolute;
-  width: 100%;
+.black {
+  color: #000;
+}
+
+.burgundy {
+  color: var(--Scandic-Brand-Burgundy);
+}
+
+.pale {
+  color: var(--Scandic-Brand-Pale-Peach);
+}
+
+.peach80 {
+  color: var(--Scandic-Peach-80);
+}
+
+.regular {
+  font-family: var(--typography-Body-Regular-fontFamily);
+  font-size: var(--typography-Body-Regular-fontSize);
+  font-weight: var(--typography-Body-Regular-fontWeight);
+  letter-spacing: var(--typography-Body-Regular-letterSpacing);
+  line-height: var(--typography-Body-Regular-lineHeight);
+}
+
+.activeRegular {
+  font-family: var(--typography-Body-Bold-fontFamily);
+  font-size: var(--typography-Body-Bold-fontSize);
+  font-weight: var(--typography-Body-Bold-fontWeight);
+  letter-spacing: var(--typography-Body-Bold-letterSpacing);
+  line-height: var(--typography-Body-Bold-lineHeight);
+}
+
+.small {
+  font-family: var(--typography-Caption-Regular-fontFamily);
+  font-size: var(--typography-Caption-Regular-fontSize);
+  font-weight: var(--typography-Caption-Regular-fontWeight);
+  letter-spacing: var(--typography-Caption-Regular-letterSpacing);
+  line-height: var(--typography-Caption-Regular-lineHeight);
+}
+
+.activeSmall {
+  font-family: var(--typography-Caption-Bold-fontFamily);
+  font-size: var(--typography-Caption-Bold-fontSize);
+  font-weight: var(--typography-Caption-Bold-fontWeight);
+  letter-spacing: var(--typography-Caption-Bold-letterSpacing);
+  line-height: var(--typography-Caption-Bold-lineHeight);
 }

components/TempDesignSystem/Link/link.ts

@@ -3,7 +3,7 @@ import { linkVariants } from "./variants"
 import type { VariantProps } from "class-variance-authority"
 
 export interface LinkProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement>,
+  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "color">,
     VariantProps<typeof linkVariants> {
   href: string
   partialMatch?: boolean

components/TempDesignSystem/Link/variants.ts

@@ -7,20 +7,39 @@ export const linkVariants = cva(styles.link, {
     active: {
       true: styles.active,
     },
-    size: {},
+    color: {
+      black: styles.black,
+      burgundy: styles.burgundy,
+      pale: styles.pale,
+      peach80: styles.peach80,
+    },
+    size: {
+      small: styles.small,
+      regular: styles.regular,
+    },
     variant: {
+      breadcrumb: styles.breadcrumb,
       default: styles.default,
       myPage: styles.myPage,
+      shortcut: styles.shortcut,
       sidebar: styles.sidebar,
     },
   },
   defaultVariants: {
+    color: "black",
     variant: "default",
   },
   compoundVariants: [
     {
-      class: styles.activeSidebar,
+      class: `${styles.activeSidebar} ${styles.activeRegular}`,
       active: true,
+      size: "regular",
+      variant: "sidebar",
+    },
+    {
+      class: `${styles.activeSidebar} ${styles.activeSmall}`,
+      active: true,
+      size: "small",
       variant: "sidebar",
     },
   ],