From 3508253afe3cee917dc0dee26551213cd599ff4f Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian@weahead.se>
Date: Mon, 21 Oct 2024 10:03:48 +0200
Subject: [PATCH] fix(SW-556): removed old caption label component, fixed
 outline on button

---
 .../Rewards/Surprises/index.tsx               | 23 +++---
 .../Rewards/Surprises/surprises.module.css    |  8 ++
 .../Text/CaptionLabel/captionLabel.module.css | 77 -------------------
 .../Text/CaptionLabel/captionLabel.ts         | 10 ---
 .../Text/CaptionLabel/index.tsx               | 32 --------
 .../Text/CaptionLabel/variants.ts             | 58 --------------
 6 files changed, 19 insertions(+), 189 deletions(-)
 delete mode 100644 components/TempDesignSystem/Text/CaptionLabel/captionLabel.module.css
 delete mode 100644 components/TempDesignSystem/Text/CaptionLabel/captionLabel.ts
 delete mode 100644 components/TempDesignSystem/Text/CaptionLabel/index.tsx
 delete mode 100644 components/TempDesignSystem/Text/CaptionLabel/variants.ts

diff --git a/components/Blocks/DynamicContent/Rewards/Surprises/index.tsx b/components/Blocks/DynamicContent/Rewards/Surprises/index.tsx
index 86d1ab2c5..66abfaa45 100644
--- a/components/Blocks/DynamicContent/Rewards/Surprises/index.tsx
+++ b/components/Blocks/DynamicContent/Rewards/Surprises/index.tsx
@@ -14,7 +14,6 @@ import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
-import CaptionLabel from "@/components/TempDesignSystem/Text/CaptionLabel"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
@@ -39,13 +38,15 @@ export default function Surprises({
     return null
   }
 
+  const surprise = surprises[selectedSurprise]
+
   function showSurprise(n: number) {
     setSelectedSurprise((surprise) => surprise + n)
   }
 
-  function viewRewards(id?: string) {
-    if (id) {
-      update.mutate({ id })
+  function viewRewards() {
+    if (surprise.id) {
+      update.mutate({ id: surprise.id })
     }
   }
 
@@ -69,13 +70,12 @@ export default function Surprises({
     }
   }
 
-  const surprise = surprises[selectedSurprise]
-
   return (
     <ModalOverlay
       className={styles.overlay}
       isOpen={open}
       onOpenChange={setOpen}
+      isKeyboardDismissDisabled
     >
       <Modal className={styles.modal}>
         <Dialog aria-label="Surprises" className={styles.dialog}>
@@ -84,7 +84,7 @@ export default function Surprises({
               <>
                 <div className={styles.top}>
                   {surprises.length > 1 && showSurprises && (
-                    <CaptionLabel uppercase>
+                    <Caption type="label" uppercase>
                       {intl.formatMessage(
                         { id: "{amount} out of {total}" },
                         {
@@ -92,7 +92,7 @@ export default function Surprises({
                           total: surprises.length,
                         }
                       )}
-                    </CaptionLabel>
+                    </Caption>
                   )}
                   <button
                     onClick={() => closeModal(close)}
@@ -123,7 +123,6 @@ export default function Surprises({
                       <>
                         <nav className={styles.nav}>
                           <Button
-                            wrapping
                             variant="icon"
                             intent="tertiary"
                             disabled={selectedSurprise === 0}
@@ -138,7 +137,6 @@ export default function Surprises({
                             {intl.formatMessage({ id: "Previous" })}
                           </Button>
                           <Button
-                            wrapping
                             variant="icon"
                             intent="tertiary"
                             disabled={selectedSurprise === surprises.length - 1}
@@ -178,7 +176,7 @@ export default function Surprises({
                         </Caption>
                       </Surprise>
                     ) : (
-                      <Surprise title={surprise.title}>
+                      <Surprise title={intl.formatMessage({ id: "Surprise!" })}>
                         <Body textAlign="center">
                           {intl.formatMessage({
                             id: "We have a special gift waiting for you!",
@@ -195,12 +193,13 @@ export default function Surprises({
                     <Button
                       intent="primary"
                       onPress={() => {
-                        viewRewards(surprise.id)
+                        viewRewards()
                         setShowSurprises(true)
                       }}
                       size="medium"
                       theme="base"
                       fullWidth
+                      autoFocus
                     >
                       {intl.formatMessage(
                         {
diff --git a/components/Blocks/DynamicContent/Rewards/Surprises/surprises.module.css b/components/Blocks/DynamicContent/Rewards/Surprises/surprises.module.css
index ddca5f85f..4bde7c46d 100644
--- a/components/Blocks/DynamicContent/Rewards/Surprises/surprises.module.css
+++ b/components/Blocks/DynamicContent/Rewards/Surprises/surprises.module.css
@@ -103,6 +103,14 @@
 }
 
 .nav button {
+  &:nth-child(1) {
+    padding-left: 0;
+  }
+
+  &:nth-child(2) {
+    padding-right: 0;
+  }
+
   &[disabled] {
     visibility: hidden;
   }
diff --git a/components/TempDesignSystem/Text/CaptionLabel/captionLabel.module.css b/components/TempDesignSystem/Text/CaptionLabel/captionLabel.module.css
deleted file mode 100644
index 987f31d71..000000000
--- a/components/TempDesignSystem/Text/CaptionLabel/captionLabel.module.css
+++ /dev/null
@@ -1,77 +0,0 @@
-p.caption {
-  margin: 0;
-  padding: 0;
-}
-
-.captionFontOnly {
-  font-style: normal;
-}
-
-.uppercase {
-  font-family: var(--typography-Caption-Labels-fontFamily);
-  font-size: var(--typography-Caption-Labels-fontSize);
-  font-weight: var(--typography-Caption-Labels-fontWeight);
-  letter-spacing: var(--typography-Caption-Labels-letterSpacing);
-  line-height: var(--typography-Caption-Labels-lineHeight);
-  text-transform: uppercase;
-}
-
-.regular {
-  font-family: var(--typography-Caption-Labels-fontFamily);
-  font-size: var(--typography-Caption-Labels-fontSize);
-  font-weight: var(--typography-Caption-Labels-fontWeight);
-  letter-spacing: var(--typography-Caption-Labels-letterSpacing);
-  line-height: var(--typography-Caption-Labels-lineHeight);
-}
-
-.baseTextAccent {
-  color: var(--Base-Text-Accent);
-}
-
-.black {
-  color: var(--Main-Grey-100);
-}
-
-.burgundy {
-  color: var(--Scandic-Brand-Burgundy);
-}
-
-.pale {
-  color: var(--Scandic-Brand-Pale-Peach);
-}
-
-.textMediumContrast {
-  color: var(--Base-Text-Medium-contrast);
-}
-
-.red {
-  color: var(--Scandic-Brand-Scandic-Red);
-}
-
-.white {
-  color: var(--UI-Opacity-White-100);
-}
-
-.uiTextActive {
-  color: var(--UI-Text-Active);
-}
-
-.uiTextMediumContrast {
-  color: var(--UI-Text-Medium-contrast);
-}
-
-.uiTextHighContrast {
-  color: var(--UI-Text-High-contrast);
-}
-
-.disabled {
-  color: var(--Base-Text-Disabled);
-}
-
-.center {
-  text-align: center;
-}
-
-.left {
-  text-align: left;
-}
diff --git a/components/TempDesignSystem/Text/CaptionLabel/captionLabel.ts b/components/TempDesignSystem/Text/CaptionLabel/captionLabel.ts
deleted file mode 100644
index 89bb313f0..000000000
--- a/components/TempDesignSystem/Text/CaptionLabel/captionLabel.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { captionVariants } from "./variants"
-
-import type { VariantProps } from "class-variance-authority"
-
-export interface CaptionLabelProps
-  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
-    VariantProps<typeof captionVariants> {
-  asChild?: boolean
-  fontOnly?: boolean
-}
diff --git a/components/TempDesignSystem/Text/CaptionLabel/index.tsx b/components/TempDesignSystem/Text/CaptionLabel/index.tsx
deleted file mode 100644
index 21c696eea..000000000
--- a/components/TempDesignSystem/Text/CaptionLabel/index.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Slot } from "@radix-ui/react-slot"
-
-import { captionVariants, fontOnlycaptionVariants } from "./variants"
-
-import type { CaptionLabelProps } from "./captionLabel"
-
-export default function CaptionLabel({
-  asChild = false,
-  className = "",
-  color,
-  fontOnly = false,
-  textAlign,
-  textTransform,
-  uppercase,
-  ...props
-}: CaptionLabelProps) {
-  const Comp = asChild ? Slot : "span"
-  const classNames = fontOnly
-    ? fontOnlycaptionVariants({
-        className,
-        textTransform,
-        uppercase,
-      })
-    : captionVariants({
-        className,
-        color,
-        textTransform,
-        textAlign,
-        uppercase,
-      })
-  return <Comp className={classNames} {...props} />
-}
diff --git a/components/TempDesignSystem/Text/CaptionLabel/variants.ts b/components/TempDesignSystem/Text/CaptionLabel/variants.ts
deleted file mode 100644
index ab2911a25..000000000
--- a/components/TempDesignSystem/Text/CaptionLabel/variants.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./captionLabel.module.css"
-
-const config = {
-  variants: {
-    color: {
-      baseTextAccent: styles.baseTextAccent,
-      black: styles.black,
-      burgundy: styles.burgundy,
-      pale: styles.pale,
-      textMediumContrast: styles.textMediumContrast,
-      red: styles.red,
-      white: styles.white,
-      uiTextHighContrast: styles.uiTextHighContrast,
-      uiTextActive: styles.uiTextActive,
-      uiTextMediumContrast: styles.uiTextMediumContrast,
-      disabled: styles.disabled,
-    },
-    textTransform: {
-      regular: styles.regular,
-      uppercase: styles.uppercase,
-    },
-    textAlign: {
-      center: styles.center,
-      left: styles.left,
-    },
-    uppercase: {
-      true: styles.uppercase,
-    },
-  },
-  defaultVariants: {
-    color: "black",
-    textTransform: "regular",
-  },
-} as const
-
-export const captionVariants = cva(styles.caption, config)
-
-const fontOnlyConfig = {
-  variants: {
-    textTransform: {
-      regular: styles.regular,
-      uppercase: styles.uppercase,
-    },
-    uppercase: {
-      true: styles.uppercase,
-    },
-  },
-  defaultVariants: {
-    textTransform: "regular",
-  },
-} as const
-
-export const fontOnlycaptionVariants = cva(
-  styles.captionFontOnly,
-  fontOnlyConfig
-)