Merged in feat/SW-3477-hide-voucher-booking-code-sas- (pull request #2836)

feat(SW-3477) Updated booking widget for SAS white label

Approved-by: Anton Gunnarsson

packages/design-system/lib/components/Button/index.tsx

@@ -1,3 +1,5 @@
 export { Button } from './Button'
 // eslint-disable-next-line react-refresh/only-export-components
 export { withButton } from './variants'
+
+export { type ButtonProps } from './types'

packages/design-system/lib/components/Form/Checkbox/checkbox.module.css

@@ -1,7 +1,7 @@
 .container {
   display: flex;
   flex-direction: column;
-  color: var(--text-color);
+  color: var(--Text-Default);
   cursor: pointer;
 }
 

packages/design-system/lib/components/IconButton/IconButton.stories.tsx

@@ -27,6 +27,11 @@ const meta: Meta<typeof IconButton> = {
       type: 'string',
       description: `The style variant is only applied on certain variants. The examples below shows the possible combinations of variants and style variants.`,
     },
+    wrapping: {
+      control: 'select',
+      options: Object.keys(config.variants.wrapping),
+      default: undefined,
+    },
   },
 }
 

packages/design-system/lib/components/IconButton/IconButton.tsx

@@ -8,11 +8,13 @@ export function IconButton({
   theme,
   style,
   className,
+  wrapping,
   ...props
 }: IconButtonProps) {
   const classNames = variants({
     theme,
     style,
+    wrapping,
     className,
   })
 

packages/design-system/lib/components/IconButton/iconButton.module.css

@@ -100,3 +100,7 @@
     background-color: var(--Component-Button-Muted-Fill-Disabled-inverted);
   }
 }
+
+.no-wrapping {
+  padding: 0;
+}

packages/design-system/lib/components/IconButton/variants.ts

@@ -33,6 +33,10 @@ export const config = {
       [variantKeys.style.Elevated]: '',
       [variantKeys.style.Faded]: '',
     },
+    wrapping: {
+      true: styles['no-wrapping'],
+      false: undefined,
+    },
   },
   compoundVariants: [
     // Primary should only use Normal

packages/design-system/lib/components/Switch/switch.module.css

@@ -1,7 +1,7 @@
 .container {
   display: flex;
   flex-direction: row;
-  color: var(--text-color);
+  color: var(--Text-Default);
   cursor: pointer;
   width: 100%;
   justify-content: space-between;