OZG-6242 Expand storybook

alfa-client/libs/design-system/src/lib/button/button.component.ts

@@ -37,7 +37,8 @@ export const buttonVariants = cva(
     variants: {
       variant: {
         primary: 'hover:enabled:bg-primary-hover bg-primary text-white shadow-sm',
-        outline: 'border border-primary bg-background-50 text-primary hover:enabled:bg-background-100',
+        outline:
+          'border border-primary bg-background-50 text-primary hover:enabled:bg-background-100 focus-visible:border-background-200',
         ghost: 'border-2 border-transparent hover:border-primary-hover text-primary focus-visible:border-background-200',
       },
       size: {

alfa-client/libs/design-system/src/lib/button/button.stories.ts

@@ -52,7 +52,7 @@ export const Default: Story = {
   },
   argTypes: {
     variant: {
-      options: ['primary', 'outline'],
+      options: ['primary', 'outline', 'ghost'],
       control: { type: 'radio' },
       table: { defaultValue: { summary: 'primary' } },
     },
@@ -97,6 +97,19 @@ export const SecondaryWithIcon: Story = {
   }),
 };
 
+export const SecondaryIconOnly: Story = {
+  args: {
+    variant: 'outline',
+    size: 'fit',
+  },
+  render: (args) => ({
+    props: args,
+    template: `<ods-button ${argsToTemplate(args)}>
+      <ods-save-icon icon size="small" />
+    </ods-button>`,
+  }),
+};
+
 export const IsLoading: Story = {
   args: {
     text: 'Loading...',