feat(SW-2178): Changed to new buttons for summary inside enter details

Approved-by: Michael Zetterberg Approved-by: Matilda Landström
2025-04-11 15:13:37 +00:00
parent 8961cbd9d5
commit f62723c6e5
15 changed files with 363 additions and 101 deletions
--- a/packages/design-system/lib/components/Button/Button.stories.tsx
+++ b/packages/design-system/lib/components/Button/Button.stories.tsx
@@ -2,9 +2,10 @@ import type { Meta, StoryObj } from '@storybook/react'

 import { fn } from '@storybook/test'

+import { MaterialIcon } from '../Icons/MaterialIcon'
+import { config as typographyConfig } from '../Typography/variants'
 import { Button } from './Button'
 import { config as buttonConfig } from './variants'
-import { config as typographyConfig } from '../Typography/variants'

 const meta: Meta<typeof Button> = {
  title: 'Components/Button',
@@ -22,6 +23,28 @@ const meta: Meta<typeof Button> = {
    variant: {
      control: 'select',
      options: Object.keys(buttonConfig.variants.variant),
+      default: 'Primary',
+    },
+    color: {
+      control: 'select',
+      options: Object.keys(buttonConfig.variants.color),
+      type: 'string',
+      description:
+        'The color variant, only applies to the variants `Primary`, `Secondary` and `Text`. Defaults to `Primary`.',
+    },
+    size: {
+      control: 'select',
+      options: Object.keys(buttonConfig.variants.size),
+      type: 'string',
+      description:
+        'The size of the button. Defaults to `Large`. This variant does not apply to the `Icon` variant.',
+    },
+    wrapping: {
+      control: 'radio',
+      options: Object.keys(buttonConfig.variants.wrapping),
+      type: 'boolean',
+      description:
+        'Only applies to variant `Text`. If `true`, the button will keep the default padding set on the buttons. Defaults to `true`.',
    },
  },
 }
@@ -67,6 +90,44 @@ export const PrimarySmall: Story = {
  },
 }

+export const PrimaryInvertedDefault: Story = {
+  args: {
+    onPress: fn(),
+    children: 'Primary inverted button',
+    typography: 'Body/Paragraph/mdBold',
+    variant: 'Primary',
+    color: 'Inverted',
+  },
+}
+
+export const PrimaryInvertedDisabled: Story = {
+  args: {
+    ...PrimaryInvertedDefault.args,
+    isDisabled: true,
+  },
+}
+
+export const PrimaryInvertedLarge: Story = {
+  args: {
+    ...PrimaryInvertedDefault.args,
+    size: 'Large',
+  },
+}
+
+export const PrimaryInvertedMedium: Story = {
+  args: {
+    ...PrimaryInvertedDefault.args,
+    size: 'Medium',
+  },
+}
+
+export const PrimaryInvertedSmall: Story = {
+  args: {
+    ...PrimaryInvertedDefault.args,
+    size: 'Small',
+  },
+}
+
 export const SecondaryDefault: Story = {
  args: {
    onPress: fn(),
@@ -104,6 +165,44 @@ export const SecondarySmall: Story = {
  },
 }

+export const SecondaryInvertedDefault: Story = {
+  args: {
+    onPress: fn(),
+    children: 'Secondary inverted button',
+    typography: 'Body/Paragraph/mdBold',
+    variant: 'Secondary',
+    color: 'Inverted',
+  },
+}
+
+export const SecondaryInvertedDisabled: Story = {
+  args: {
+    ...SecondaryInvertedDefault.args,
+    isDisabled: true,
+  },
+}
+
+export const SecondaryInvertedLarge: Story = {
+  args: {
+    ...SecondaryInvertedDefault.args,
+    size: 'Large',
+  },
+}
+
+export const SecondaryInvertedMedium: Story = {
+  args: {
+    ...SecondaryInvertedDefault.args,
+    size: 'Medium',
+  },
+}
+
+export const SecondaryInvertedSmall: Story = {
+  args: {
+    ...SecondaryInvertedDefault.args,
+    size: 'Small',
+  },
+}
+
 export const TertiaryDefault: Story = {
  args: {
    onPress: fn(),
@@ -141,43 +240,6 @@ export const TertiarySmall: Story = {
  },
 }

-export const InvertedDefault: Story = {
-  args: {
-    onPress: fn(),
-    children: 'Inverted button',
-    typography: 'Body/Paragraph/mdBold',
-    variant: 'Inverted',
-  },
-}
-
-export const InvertedDisabled: Story = {
-  args: {
-    ...InvertedDefault.args,
-    isDisabled: true,
-  },
-}
-
-export const InvertedLarge: Story = {
-  args: {
-    ...InvertedDefault.args,
-    size: 'Large',
-  },
-}
-
-export const InvertedMedium: Story = {
-  args: {
-    ...InvertedDefault.args,
-    size: 'Medium',
-  },
-}
-
-export const InvertedSmall: Story = {
-  args: {
-    ...InvertedDefault.args,
-    size: 'Small',
-  },
-}
-
 export const TextDefault: Story = {
  args: {
    onPress: fn(),
@@ -187,6 +249,13 @@ export const TextDefault: Story = {
  },
 }

+export const TextDisabled: Story = {
+  args: {
+    ...TextDefault.args,
+    isDisabled: true,
+  },
+}
+
 export const TextLarge: Story = {
  args: {
    ...TextDefault.args,
@@ -207,3 +276,100 @@ export const TextSmall: Story = {
    size: 'Small',
  },
 }
+
+export const TextNoWrapping: Story = {
+  args: {
+    ...TextDefault.args,
+    children: 'Text button with wrapping false',
+    wrapping: false,
+  },
+}
+
+export const TextInvertedDefault: Story = {
+  args: {
+    onPress: fn(),
+    children: 'Text inverted button',
+    typography: 'Body/Paragraph/mdBold',
+    variant: 'Text',
+    color: 'Inverted',
+  },
+}
+
+export const TextInvertedDisabled: Story = {
+  args: {
+    ...TextInvertedDefault.args,
+    isDisabled: true,
+  },
+}
+
+export const TextInvertedLarge: Story = {
+  args: {
+    ...TextInvertedDefault.args,
+    size: 'Large',
+  },
+}
+
+export const TextInvertedMedium: Story = {
+  args: {
+    ...TextInvertedDefault.args,
+    size: 'Medium',
+  },
+}
+
+export const TextInvertedSmall: Story = {
+  args: {
+    ...TextInvertedDefault.args,
+    size: 'Small',
+  },
+}
+
+export const TextWithIcon: Story = {
+  args: {
+    onPress: fn(),
+    children: (
+      <>
+        Text with icon
+        <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
+      </>
+    ),
+    typography: 'Body/Paragraph/mdBold',
+    variant: 'Text',
+  },
+}
+
+export const TextWithIconInverted: Story = {
+  args: {
+    onPress: fn(),
+    children: (
+      <>
+        Text with icon
+        <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
+      </>
+    ),
+    typography: 'Body/Paragraph/mdBold',
+    variant: 'Text',
+    color: 'Inverted',
+  },
+}
+
+export const Icon: Story = {
+  args: {
+    onPress: fn(),
+    children: <MaterialIcon icon="favorite" size={24} />,
+    variant: 'Icon',
+  },
+}
+
+export const IconWithColor: Story = {
+  args: {
+    onPress: fn(),
+    children: (
+      <MaterialIcon
+        icon="check_circle"
+        size={24}
+        color="Icon/Feedback/Success"
+      />
+    ),
+    variant: 'Icon',
+  },
+}
--- a/packages/design-system/lib/components/Button/Button.tsx
+++ b/packages/design-system/lib/components/Button/Button.tsx
@@ -10,6 +10,7 @@ export function Button({
  variant,
  color,
  size,
+  wrapping,

  typography,
  className,
@@ -20,6 +21,7 @@ export function Button({
    variant,
    color,
    size,
+    wrapping,

    typography,
    className,
--- a/packages/design-system/lib/components/Button/button.module.css
+++ b/packages/design-system/lib/components/Button/button.module.css
@@ -6,6 +6,10 @@
  display: flex;
  align-items: center;
  justify-content: center;
+
+  &:disabled {
+    cursor: unset;
+  }
 }

 .size-large {
@@ -38,6 +42,24 @@
  color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
 }

+.variant-primary.color-inverted {
+  background-color: var(--Component-Button-Inverted-Fill-Default);
+  border-color: var(--Component-Button-Inverted-Border-Default);
+  color: var(--Component-Button-Inverted-On-fill-Default);
+}
+
+.variant-primary.color-inverted:hover {
+  background-color: var(--Component-Button-Inverted-Fill-Hover);
+  border-color: var(--Component-Button-Inverted-Border-Hover);
+  color: var(--Component-Button-Inverted-On-fill-Hover);
+}
+
+.variant-primary.color-inverted:disabled {
+  background-color: var(--Component-Button-Inverted-Fill-Disabled);
+  border-color: var(--Component-Button-Inverted-Border-Disabled);
+  color: var(--Component-Button-Inverted-On-fill-Disabled);
+}
+
 .variant-secondary {
  background-color: var(--Component-Button-Brand-Secondary-Fill-Default);
  border-color: var(--Component-Button-Brand-Secondary-Border-Default);
@@ -56,6 +78,24 @@
  color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
 }

+.variant-secondary.color-inverted {
+  background-color: var(--Component-Button-Brand-Secondary-Fill-Default);
+  border-color: var(--Component-Button-Brand-Secondary-Border-Inverted);
+  color: var(--Component-Button-Brand-Secondary-On-fill-Inverted);
+}
+
+.variant-secondary.color-inverted:hover {
+  background-color: var(--Component-Button-Brand-Secondary-Fill-Hover);
+  border-color: var(--Component-Button-Brand-Secondary-Border-Hover-inverted);
+  color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted);
+}
+
+.variant-secondary.color-inverted:disabled {
+  background-color: var(--Component-Button-Brand-Secondary-Fill-Disabled);
+  border-color: var(--Component-Button-Brand-Secondary-Border-Disabled);
+  color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
+}
+
 .variant-tertiary {
  background-color: var(--Component-Button-Brand-Tertiary-Fill-Default);
  border-color: var(--Component-Button-Brand-Tertiary-Border-Default);
@@ -95,9 +135,36 @@
 .variant-text {
  background-color: transparent;
  border-color: transparent;
-  /* TODO: Missing text variant tokens for button */
-  color: var(--Scandic-Red-100);
-  padding: var(--Space-x15) 0;
+  color: var(--Component-Button-Brand-Secondary-On-fill-Default);
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.variant-text:hover {
+  color: var(--Component-Button-Brand-Secondary-On-fill-Hover);
+  text-decoration: underline;
+}
+
+.variant-text:disabled {
+  color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
+  text-decoration: none;
+}
+
+.variant-text.no-wrapping {
+  padding: var(--Space-x025) 0;
+  border-width: 0;
+}
+
+.variant-text.color-inverted {
+  color: var(--Component-Button-Brand-Secondary-On-fill-Inverted);
+}
+
+.variant-text.color-inverted:hover {
+  color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted);
+}
+
+.variant-text.color-inverted:disabled {
+  color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
 }

 .variant-icon {
@@ -107,7 +174,3 @@
  padding: 0;
  margin: 0;
 }
-
-.color-icon-default {
-  color: var(--Icon-Default);
-}
--- a/packages/design-system/lib/components/Button/variants.ts
+++ b/packages/design-system/lib/components/Button/variants.ts
@@ -21,18 +21,22 @@ export const config = {
    color: {
      Primary: styles['color-primary'],
      Inverted: styles['color-inverted'],
-      IconDefault: styles['color-icon-default'],
    },
    size: {
      Small: styles['size-small'],
      Medium: styles['size-medium'],
      Large: styles['size-large'],
    },
+    wrapping: {
+      true: undefined,
+      false: styles['no-wrapping'],
+    },
  },
  defaultVariants: {
    variant: 'Primary',
    color: 'Primary',
    size: 'Large',
+    wrapping: true,
  },
 } as const