LITE-30099: Update button component to match the design

Author: arnaugiralt

components/src/stories/Button.mdx

@@ -0,0 +1,12 @@
+import { Meta, ArgsTable } from '@storybook/blocks';
+import { Figma } from '@storybook/addon-designs/blocks';
+
+<Meta title="Components/Button/Design" />
+
+# Button Design Specification
+
+<Figma
+  url="https://www.figma.com/file/iWvG1cSD2xzbGS2KAB1DgV/Connect-UI-Guides-%26-Specs?type=design&node-id=1-4009&mode=design&t=5CPLKuHbPQnKMEJh-0"
+  height="1000%"
+/>
+<ArgsTable of={Figma} />

components/src/stories/Button.stories.js

@@ -1,18 +1,45 @@
+import * as icons from '@cloudblueconnect/material-svg';
 import Button from '~widgets/button/widget.vue';
 import registerWidget from '~core/registerWidget';
 
 registerWidget('ui-button', Button);
 
-export const Component = {
+export const Base = {
+  name: 'Base component',
   render: (args) => ({
     setup() {
-      return { args };
+      const showAlert = () => alert('The button was clicked');
+      return { args, showAlert };
     },
-    template: `<ui-button disabled v-bind="args"></ui-button>`,
+    template: '<ui-button v-bind="args" @clicked="showAlert" />',
   }),
+  args: {
+    mode: 'solid',
+    size: 'large',
+    label: 'Accept',
+    icon: 'googleCheckBaseline',
+    iconRight: '',
+    color: '#2C98F0',
+    progress: false,
+    lowerCase: false,
+    onlyIcon: false,
+    disabled: false,
+  },
+};
 
+export const Slotted = {
+  name: 'Using the default slot',
+  render: (args) => ({
+    setup() {
+      const showAlert = () => alert('The button was clicked');
+      return { args, showAlert };
+    },
+    template:
+      '<ui-button v-bind="args" @clicked="showAlert"><pre style="background-color:darkblue;color:lightcyan;font-style:italic;">Custom slot content</pre></ui-button>',
+  }),
   args: {
-    text: 'Text',
+    ...Base.args,
+    label: '',
   },
 };
 
@@ -23,6 +50,25 @@ export default {
     layout: 'centered',
   },
   argTypes: {
-    text: 'text',
+    mode: { control: 'radio', options: ['solid', 'flat', 'outlined'] },
+    size: { control: 'radio', options: ['small', 'large'] },
+    label: 'text',
+    icon: {
+      options: Object.keys(icons),
+      control: {
+        type: 'select',
+      },
+    },
+    iconRight: {
+      options: Object.keys(icons),
+      control: {
+        type: 'select',
+      },
+    },
+    color: 'text',
+    progress: 'boolean',
+    lowerCase: 'boolean',
+    onlyIcon: 'boolean',
+    disabled: 'boolean',
   },
 };