V3 button and color updates

messages/en.json

@@ -18,7 +18,8 @@
   },
   "contact_information": {
     "help": "Curious about Variant and want to explore what we offer?",
-    "contact_sale": "Contact sale!"
+    "contact_sale": "Contact sales!",
+    "contact_us": "Contact us"
   },
   "custom_link": {
     "visit_cv": "Visit mini-CV",

messages/no.json

@@ -18,7 +18,8 @@
   },
   "contact_information": {
     "help": "Trenger du hjelp med lignende eller noe helt annet?",
-    "contact_sale": "Kontakt salg!"
+    "contact_sale": "Kontakt salg!",
+    "contact_us": "Kontakt oss"
   },
   "custom_link": {
     "visit_cv": "Gå til mini-CV",

messages/se.json

@@ -18,7 +18,8 @@
   },
   "contact_information": {
     "help": "Nyfiken på Variant och vill utforska vad vi erbjuder?",
-    "contact_sale": "Kontakta sälj!"
+    "contact_sale": "Kontakta sälj!",
+    "contact_us": "Kontakt oss"
   },
   "custom_link": {
     "visit_cv": "Besök mini-CV",

src/components/buttons/Button.stories.tsx

@@ -17,7 +17,7 @@ const meta: Meta<typeof Button> = {
     size: {
       control: {
         type: "select",
-        options: ["large", "small"],
+        options: ["large", "medium", "small"],
       },
     },
     type: {
@@ -26,6 +26,18 @@ const meta: Meta<typeof Button> = {
         options: ["primary", "secondary"],
       },
     },
+    icon: {
+      control: {
+        type: "select",
+        options: ["iconLeft", "iconRight"],
+      },
+    },
+    background: {
+      control: {
+        type: "select",
+        options: ["dark", "light"],
+      },
+    },
     onClick: { action: "clicked" },
     children: {
       control: "text",
@@ -40,7 +52,17 @@ export const PrimaryLarge: Story = {
   args: {
     size: "large",
     type: "primary",
-    children: "Primary Large Button",
+    children: "Primary large Button",
+    background: "dark",
+  },
+};
+
+export const PrimaryMedium: Story = {
+  args: {
+    size: "medium",
+    type: "primary",
+    children: "Primary Medium Button",
+    background: "dark",
   },
 };
 
@@ -49,6 +71,7 @@ export const PrimarySmall: Story = {
     size: "small",
     type: "primary",
     children: "Primary Small Button",
+    background: "dark",
   },
 };
 
@@ -60,10 +83,40 @@ export const SecondaryLarge: Story = {
   },
 };
 
+export const SecondaryMedium: Story = {
+  args: {
+    size: "medium",
+    type: "secondary",
+    children: "Secondary Medium Button",
+    background: "dark",
+  },
+};
+
 export const SecondarySmall: Story = {
   args: {
     size: "small",
     type: "secondary",
     children: "Secondary Small Button",
+    background: "dark",
+  },
+};
+
+export const PrimaryLargeLeftIcon: Story = {
+  args: {
+    size: "large",
+    type: "primary",
+    children: "Primary Large Left Icon Button",
+    icon: "iconLeft",
+    background: "dark",
+  },
+};
+
+export const FilledMediumRightIcon: Story = {
+  args: {
+    size: "medium",
+    type: "primary",
+    children: "Primary Medium Left Icon Button",
+    icon: "iconRight",
+    background: "dark",
   },
 };

src/components/buttons/Button.tsx

@@ -2,12 +2,16 @@ import React from "react";
 
 import styles from "./button.module.css";
 
-type ButtonType = "primary" | "secondary" | "secondaryFilled";
-type ButtonSize = "large" | "small" | "extraSmall";
+type ButtonType = "primary" | "secondary";
+type ButtonSize = "large" | "medium" | "small";
+type ButtonIcon = "iconLeft" | "iconRight";
+type ButtonBackground = "dark" | "light";
 
 interface IButton {
   size?: ButtonSize;
   type?: ButtonType;
+  icon?: ButtonIcon;
+  background?: ButtonBackground;
   onClick?: () => void;
   children: React.ReactNode;
   disabled?: boolean;
@@ -17,14 +21,18 @@ interface IButton {
 
 const sizeClassMap: { [key in ButtonSize]: string } = {
   large: styles.large,
+  medium: styles.medium,
   small: styles.small,
-  extraSmall: styles.extraSmall,
 };
 
 const typeClassMap: { [key in ButtonType]: string } = {
   primary: styles.primary,
   secondary: styles.secondary,
-  secondaryFilled: styles.secondaryFilled,
+};
+
+const backgroundClassMap: { [key in ButtonBackground]: string } = {
+  dark: styles.dark,
+  light: styles.light,
 };
 
 const Button = ({
@@ -35,8 +43,9 @@ const Button = ({
   disabled,
   loading,
   ariaDisabled,
+  background = "dark",
 }: IButton) => {
-  const className = `${styles.button} ${sizeClassMap[size]} ${typeClassMap[type]} ${loading ? styles.loading : ""}`;
+  const className = `${styles.button} ${typeClassMap[type]} ${sizeClassMap[size]} ${backgroundClassMap[background]} ${loading ? styles.loading : ""}`;
 
   return (
     <button

src/components/buttons/button.module.css

@@ -1,105 +1,65 @@
 .button {
   max-width: 320px;
+  height: fit-content;
   cursor: pointer;
-  padding: 0.5rem 1.5rem;
   display: inline-flex;
-  gap: 0.6rem;
   justify-content: center;
   align-items: center;
-  border-radius: 1.5625rem;
-  border: none;
-  background: var(--primary-white);
-  font-family: var(--font-britti-sans);
   text-wrap: nowrap;
+  border-radius: 0.5rem;
 }
 
-.large {
-  composes: button;
-  padding: 0.5rem 1.5rem;
-  font-size: 1.25rem;
-  font-weight: 400;
-  font-size: 1.25rem;
-
-  @media (min-width: 1024px) {
-    font-size: 1.5rem;
-    padding: 0.5rem 1.5rem;
-  }
+.dark {
+  background-color: var(--background-button-outline-dark);
+  color: var(--text-primary-light);
 }
 
-.small {
-  composes: button;
-  padding: 0.375rem 1.25rem;
-  font-size: 1.125rem;
-  font-weight: 400;
+.light {
+  background-color: var(--background-bg-light-primary);
+  color: var(--text-primary);
+}
 
-  @media (min-width: 1024px) {
-    font-size: 1.25rem;
-  }
+.large {
+  gap: 0.375rem;
+  padding: 10px 12px;
 }
 
-.extraSmall {
-  composes: button;
-  padding: 0.375rem 1.25rem;
-  font-size: 1rem;
-  font-weight: 400;
+.medium {
+  gap: 0.25rem;
+  padding: 6px 8px;
+}
 
-  @media (min-width: 1024px) {
-    font-size: 1.125rem;
-  }
+.small {
+  gap: 0.25rem;
+  padding: 2px 4px;
 }
 
 .primary {
-  background: var(--primary-dark);
-  color: var(--primary-white);
-  border: 1px solid var(--primary-dark);
-
-  &:hover {
-    background: var(--primary-darker);
-  }
-
-  &:active {
-    background: var(--primary-darker);
-  }
+  border: none;
 }
 
-.secondary {
-  color: var(--primary-black);
-  background: rgba(255, 255, 255, 0);
-  border: 1px solid var(--primary-black);
-
-  &:hover {
-    background: rgba(31, 31, 31, 0.05);
-  }
-
-  &:active {
-    background: rgba(31, 31, 31, 0.16);
-  }
+.secondary.large.dark {
+  border: 1px solid var(--background-button-outline-light);
 }
 
-.secondaryFilled {
-  background: var(--primary-black);
-  color: var(--primary-white);
-  border: 1px solid var(--primary-black);
+.secondary.large.light {
+  border: 1px solid var(--background-button-outline-dark);
+}
 
-  &:hover {
-    background: var(--primary-black-darker);
-  }
+.secondary.medium.dark {
+  border: 1px solid var(--background-button-outline-light);
+}
 
-  &:active {
-    background: var(--primary-black-darker);
-  }
+.secondary.medium.light {
+  border: 1px solid var(--background-button-outline-dark);
 }
 
-.back {
-  composes: secondary;
+.secondary.small.dark {
+  border: 0.5px solid var(--background-button-outline-light);
+}
 
-  &::before {
-    content: "";
-    width: 1.5rem;
-    height: 1.5rem;
-    -webkit-mask: url("/_assets/arrow-back.svg") no-repeat 50% 50%;
-    background-color: var(--primary-black);
-  }
+.secondary.small.light {
+  border: 0.5px solid var(--background-button-outline-dark);
 }
 
 .loading {
@@ -110,7 +70,7 @@
     height: 1.5rem;
     -webkit-mask: url("/_assets/spinner.svg") no-repeat 50% 50%;
     mask: url("/_assets/spinner.svg") no-repeat 50% 50%;
-    background-color: var(--primary-black);
+    background-color: var(--Dark-500);
     animation: rotateSpinner 750ms linear infinite;
   }
 }

src/components/customErrorMessage/customErrorMessage.module.css

@@ -23,8 +23,8 @@
   align-self: stretch;
 
   border-radius: 1rem;
-  border: 2px solid var(--primary-red-error);
-  background: var(--primary-white, #faf8f5);
+  border: 2px solid var(--surface-red);
+  background: var(--text-primary-light, #fafafa);
 }
 
 .buttonWrapper {

src/components/customerCaseEmployeeCard/customerCaseEmployeeCard.module.css

@@ -2,19 +2,18 @@
   display: flex;
   width: 100%;
   gap: 1rem;
-  min-width: 400px;
-  width: fit-content;
+  min-width: 375px;
 }
 
 .employeeImage {
   display: flex;
   flex-direction: column;
   align-items: center;
-  background-color: var(--primary-black);
+  background-color: var(--background-bg-dark);
   border-radius: 12px;
   position: relative;
-  width: 96px;
-  height: 94px;
+  width: 112px;
+  height: 112px;
 }
 
 .employeeInfo {
@@ -34,6 +33,7 @@
   display: flex;
   width: fit-content;
   flex-direction: row;
+  flex-wrap: wrap;
 }
 
 .employeeRoleDot::after {