Merged in feat/SW-1276-implement-design (pull request #1348)

Feat/SW-1276 implement design

* feat(SW-1276) UI implementation Desktop part 1 for MyStay

* feat(SW-1276) UI implementation Desktop part 2 for MyStay

* feat(SW-1276) UI implementation Mobile part 1 for MyStay

* refactor: move files from MyStay/MyStay to MyStay

* feat(SW-1276) Sidepeek implementation

* feat(SW-1276): Refactoring

* feat(SW-1276) UI implementation Mobile part 2 for MyStay

* feat(SW-1276): translations

* feat(SW-1276) fixed skeleton

* feat(SW-1276): Added missing translations

* feat(SW-1276): Removed console log

* feat(SW-1276) fixed translations

* feat(SW-1276): Added translations

* feat(SW-1276) fix dynamic ID:s

* feat(SW-1276) removed createElement

* feat(SW-1276): Fixed build errors

* feat(SW-1276): Updated label

* feat(SW-1276): Rewrite SummaryCard


Approved-by: Niclas Edenvin

components/TempDesignSystem/IconChip/iconChip.module.css

@@ -0,0 +1,22 @@
+.chip {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x1);
+  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+  border-radius: var(--Corner-radius-Small);
+}
+
+.blue {
+  background-color: var(--Scandic-Blue-00);
+  color: var(--UI-Semantic-Information);
+}
+
+.green {
+  background-color: var(--Scandic-Green-00);
+  color: var(--UI-Semantic-Success);
+}
+
+.red {
+  background-color: var(--Scandic-Red-00);
+  color: var(--UI-Semantic-Error);
+}

components/TempDesignSystem/IconChip/index.tsx

@@ -0,0 +1,19 @@
+import { iconChipVariants } from "./variants"
+
+interface IconChipProps {
+  color: "blue" | "green" | "red" | null | undefined
+  icon: React.ReactNode
+  children: React.ReactNode
+}
+
+export default function IconChip({ color, icon, children }: IconChipProps) {
+  const classNames = iconChipVariants({
+    color: color,
+  })
+  return (
+    <div className={classNames}>
+      {icon}
+      {children}
+    </div>
+  )
+}

components/TempDesignSystem/IconChip/variants.ts

@@ -0,0 +1,13 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./iconChip.module.css"
+
+export const iconChipVariants = cva(styles.chip, {
+  variants: {
+    color: {
+      blue: styles.blue,
+      green: styles.green,
+      red: styles.red,
+    },
+  },
+})

components/TempDesignSystem/Text/Body/body.module.css

@@ -143,3 +143,7 @@
 .baseText {
   color: var(--Base-Text-Inverted);
 }
+
+.success {
+  color: var(--UI-Semantic-Success);
+}

components/TempDesignSystem/Text/Body/variants.ts

@@ -26,6 +26,7 @@ const config = {
       primaryDim: styles.primaryDim,
       primaryStrong: styles.primaryStrong,
       baseText: styles.baseText,
+      success: styles.success,
     },
     textAlign: {
       center: styles.textAlignCenter,

components/TempDesignSystem/Text/Caption/caption.module.css

@@ -110,3 +110,10 @@ p.caption {
 .left {
   text-align: left;
 }
+
+.green {
+  color: var(--UI-Semantic-Success);
+}
+.blue {
+  color: var(--UI-Semantic-Information);
+}

components/TempDesignSystem/Text/Caption/variants.ts

@@ -18,6 +18,8 @@ const config = {
       textMediumContrast: styles.textMediumContrast,
       red: styles.red,
       white: styles.white,
+      green: styles.green,
+      blue: styles.blue,
       uiTextHighContrast: styles.uiTextHighContrast,
       uiTextActive: styles.uiTextActive,
       uiTextMediumContrast: styles.uiTextMediumContrast,

components/TempDesignSystem/Toasts/toasts.module.css

@@ -9,8 +9,7 @@
 }
 
 .content {
-  padding: var(--Spacing-x-one-and-half) var(--Spacing-x3)
-    var(--Spacing-x-one-and-half) var(--Spacing-x2);
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x3);
 }
 
 @media screen and (min-width: 768px) {