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

Approved-by: Michael Zetterberg
Approved-by: Matilda Landström

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',
+  },
+}