@weni/unnnic-system 3.10.0 → 3.11.0-alpha.2

package/src/stories/RadioGroup.stories.js

@@ -0,0 +1,144 @@
+import { action } from '@storybook/addon-actions';
+import UnnnicRadioGroup from '../components/RadioGroup/RadioGroup.vue';
+import UnnnicRadio from '../components/Radio/Radio.vue';
+import { ref } from 'vue';
+
+export default {
+  title: 'Form/RadioGroup',
+  component: UnnnicRadioGroup,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `Fundamental in forms, used when we present a list of two or more mutually 
+        exclusive options, and the user needs to choose exactly one of them. When you click on 
+        an unselected radio button, it will automatically deselect any other buttons that were 
+        previously selected in the list.
+          `,
+      },
+    },
+  },
+  argTypes: {
+    label: { control: { type: 'text' } },
+    labelTooltip: { control: { type: 'text' } },
+    labelUseHtmlTooltip: { control: 'boolean' },
+    modelValue: { control: { type: ['string', 'number'] } },
+    name: { control: { type: 'text' } },
+    state: { control: 'select', options: ['horizontal', 'vertical'] },
+    helper: { control: { type: 'text' } },
+  },
+};
+
+export const Default = {
+  args: {
+    label: 'Radio Group 1',
+    helper: 'Helper text',
+  },
+
+  render: (args) => ({
+    components: {
+      UnnnicRadioGroup,
+      UnnnicRadio,
+    },
+
+    setup() {
+      const modelValue = ref('option 1');
+
+      const updateModelValue = (value) => {
+        action('update:modelValue')(value);
+        modelValue.value = value;
+      };
+
+      return { args, modelValue, updateModelValue };
+    },
+
+    template: `
+      <section>
+        <pre>v-model: {{ modelValue }}</pre>
+
+        <UnnnicRadioGroup v-bind="args" :modelValue="modelValue" @update:modelValue="updateModelValue">
+          <UnnnicRadio value="option 1">
+            Option 1
+          </UnnnicRadio>
+
+          <UnnnicRadio value="option 2">
+            Option 2
+          </UnnnicRadio>
+
+          <UnnnicRadio value="option 3">
+            Option 3
+          </UnnnicRadio>
+        </UnnnicRadioGroup>
+      </section>
+    `,
+  }),
+};
+
+export const Horizontal = {
+  args: {
+    state: 'horizontal',
+    label: 'Label',
+    name: 'Radio Group 1',
+    helper: 'Helper text',
+  },
+
+  render: (args) => ({
+    components: {
+      UnnnicRadioGroup,
+      UnnnicRadio,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <UnnnicRadioGroup v-bind="args">
+        <UnnnicRadio value="option 1">
+            Option 1
+        </UnnnicRadio>
+
+        <UnnnicRadio value="option 2">
+            Option 2
+        </UnnnicRadio>
+
+        <UnnnicRadio value="option 3">
+            Option 3
+        </UnnnicRadio>
+      </UnnnicRadioGroup>
+    `,
+  }),
+};
+
+export const Vertical = {
+  args: {
+    state: 'vertical',
+    label: 'Label',
+    labelTooltip: 'Tooltip',
+    name: 'Radio Group 2',
+    helper: 'Helper text',
+  },
+
+  render: (args) => ({
+    components: {
+      UnnnicRadioGroup,
+      UnnnicRadio,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <UnnnicRadioGroup v-bind="args">
+        <UnnnicRadio value="option 1">
+            Option 1
+        </UnnnicRadio>
+
+        <UnnnicRadio value="option 2">
+            Option 2
+        </UnnnicRadio>
+
+        <UnnnicRadio value="option 3">
+            Option 3
+        </UnnnicRadio>
+      </UnnnicRadioGroup>
+    `,
+  }),
+};

package/src/stories/SegmentedControl.stories.js

@@ -0,0 +1,253 @@
+import {
+  SegmentedControl,
+  SegmentedControlList,
+  SegmentedControlTrigger,
+  SegmentedControlContent,
+} from '@/components/ui/segmented-control';
+
+const segmentedControlTrigger = (
+  value,
+  disabled = false,
+  isUnnnic = false,
+) => `<${isUnnnic ? 'Unnnic' : ''}SegmentedControlTrigger value="${value}" ${disabled ? 'disabled' : ''}>
+      ${value.charAt(0).toUpperCase() + value.slice(1)}
+    </${isUnnnic ? 'Unnnic' : ''}SegmentedControlTrigger>`;
+
+const unnnicSegmentedControlTrigger = (value, disabled = false) =>
+  segmentedControlTrigger(value, disabled, true);
+
+const segmentedControlContent = (
+  value,
+  isUnnnic = false,
+) => `<${isUnnnic ? 'Unnnic' : ''}SegmentedControlContent value="${value}">
+    <div>Content for ${value} here.</div>
+  </${isUnnnic ? 'Unnnic' : ''}SegmentedControlContent>`;
+
+const unnnicSegmentedControlContent = (value) =>
+  segmentedControlContent(value, true);
+
+export default {
+  title: 'Navigation/SegmentedControl',
+  component: SegmentedControl,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `A segmented control component that allows the user to select a single option from a list of options.
+          <br/>
+          It supports two sizes (small, medium).
+          <br/>
+          API reference: https://www.reka-ui.com/docs/components/tabs
+          `,
+      },
+      source: {
+        code: `
+<UnnnicSegmentedControl>
+  <UnnnicSegmentedControlList>
+    ${unnnicSegmentedControlTrigger('account')}
+    ${unnnicSegmentedControlTrigger('password')}
+    ${unnnicSegmentedControlTrigger('settings')}
+    ${unnnicSegmentedControlTrigger('help')}
+    ${unnnicSegmentedControlTrigger('about')}
+  </UnnnicSegmentedControlList>
+  ${unnnicSegmentedControlContent('account')}
+  ${unnnicSegmentedControlContent('password')}
+  ${unnnicSegmentedControlContent('settings')}
+  ${unnnicSegmentedControlContent('help')}
+  ${unnnicSegmentedControlContent('about')}
+</UnnnicSegmentedControl>
+        `,
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium'],
+      description: 'The size of the triggers in the segmented control',
+    },
+  },
+  args: {
+    defaultValue: 'account',
+    size: 'medium',
+  },
+  render: (args) => ({
+    components: {
+      SegmentedControl,
+      SegmentedControlList,
+      SegmentedControlTrigger,
+      SegmentedControlContent,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+<SegmentedControl v-bind="args">
+  <SegmentedControlList :size="args.size">
+    ${segmentedControlTrigger('account')}
+    ${segmentedControlTrigger('password')}
+    ${segmentedControlTrigger('settings')}
+    ${segmentedControlTrigger('help')}
+    ${segmentedControlTrigger('about')}
+  </SegmentedControlList>
+  ${segmentedControlContent('account')}
+  ${segmentedControlContent('password')}
+  ${segmentedControlContent('settings')}
+  ${segmentedControlContent('help')}
+  ${segmentedControlContent('about')}
+</SegmentedControl>
+    `,
+  }),
+};
+
+export const Default = {
+  args: {
+    defaultValue: 'account',
+  },
+};
+
+export const Disabled = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Segmented control with disabled triggers.',
+      },
+      source: {
+        code: `
+<UnnnicSegmentedControl>
+  <UnnnicSegmentedControlList>
+    ${unnnicSegmentedControlTrigger('account')}
+    ${unnnicSegmentedControlTrigger('password', true)}
+    ${unnnicSegmentedControlTrigger('settings')}
+  </UnnnicSegmentedControlList>
+  ${unnnicSegmentedControlContent('account')}
+  ${unnnicSegmentedControlContent('settings')}
+</UnnnicSegmentedControl>
+        `,
+      },
+    },
+  },
+  render: (args) => ({
+    components: {
+      SegmentedControl,
+      SegmentedControlList,
+      SegmentedControlTrigger,
+      SegmentedControlContent,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <SegmentedControl v-bind="args">
+        <SegmentedControlList :size="args.size">
+          ${segmentedControlTrigger('account')}
+          ${segmentedControlTrigger('password', true)}
+          ${segmentedControlTrigger('settings')}
+        </SegmentedControlList>
+        ${segmentedControlContent('account')}
+        ${segmentedControlContent('settings')}
+      </SegmentedControl>
+    `,
+  }),
+};
+
+export const AdaptedTriggersWidth = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Segmented control with triggers width adapted to the content width.',
+      },
+      source: {
+        code: `
+<div style="width: fit-content;">
+  <UnnnicSegmentedControl>
+    <UnnnicSegmentedControlList>
+      ${unnnicSegmentedControlTrigger('account')}
+      ${unnnicSegmentedControlTrigger('password')}
+    </UnnnicSegmentedControlList>
+    ${unnnicSegmentedControlContent('account')}
+    ${unnnicSegmentedControlContent('password')}
+  </UnnnicSegmentedControl>
+</div>
+        `,
+      },
+    },
+  },
+  render: (args) => ({
+    components: {
+      SegmentedControl,
+      SegmentedControlList,
+      SegmentedControlTrigger,
+      SegmentedControlContent,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+    <div style="width: fit-content;">
+      <SegmentedControl v-bind="args">
+        <SegmentedControlList :size="args.size">
+          ${segmentedControlTrigger('account')}
+          ${segmentedControlTrigger('password')}
+        </SegmentedControlList>
+        ${segmentedControlContent('account')}
+        ${segmentedControlContent('password')}
+      </SegmentedControl>
+    </div>
+    `,
+  }),
+  args: {
+    defaultValue: 'account',
+  },
+};
+
+export const Small = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Segmented control with small triggers.',
+      },
+      source: {
+        code: `
+<UnnnicSegmentedControl>
+  <UnnnicSegmentedControlList size="small">
+    ${unnnicSegmentedControlTrigger('account')}
+    ${unnnicSegmentedControlTrigger('password')}
+    ${unnnicSegmentedControlTrigger('settings')}
+  </UnnnicSegmentedControlList>
+  ${unnnicSegmentedControlContent('account')}
+  ${unnnicSegmentedControlContent('password')}
+  ${unnnicSegmentedControlContent('settings')}
+</UnnnicSegmentedControl>
+        `,
+      },
+    },
+  },
+  render: (args) => ({
+    components: {
+      SegmentedControl,
+      SegmentedControlList,
+      SegmentedControlTrigger,
+      SegmentedControlContent,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <SegmentedControl v-bind="args">
+        <SegmentedControlList :size="args.size">
+          ${segmentedControlTrigger('account')}
+          ${segmentedControlTrigger('password')}
+          ${segmentedControlTrigger('settings')}
+        </SegmentedControlList>
+        ${segmentedControlContent('account')}
+        ${segmentedControlContent('password')}
+        ${segmentedControlContent('settings')}
+      </SegmentedControl>
+    `,
+  }),
+  args: {
+    size: 'small',
+  },
+};

package/src/stories/Switch.stories.js

@@ -4,9 +4,11 @@ export default {
   title: 'Form/Switch',
   component: UnnnicSwitch,
   argTypes: {
-    size: { control: { type: 'select', options: ['small', 'medium'] } },
-    textLeft: { control: { type: 'text' } },
-    textRight: { control: { type: 'text' } },
+    label: { control: { type: 'text' } },
+    labelTooltip: { control: { type: 'text' } },
+    labelUseHtmlTooltip: { control: 'boolean' },
+    option: { control: { type: 'text' } },
+    helper: { control: { type: 'text' } },
     disabled: { control: { type: 'boolean' } },
   },
   render: (args) => ({
@@ -32,8 +34,11 @@ export default {
 
 export const Default = {
   args: {
-    size: 'medium',
-    textRight: 'Default',
+    label: 'Default',
+    labelTooltip: 'Tooltip',
+    labelUseHtmlTooltip: true,
+    option: 'Option',
+    helper: 'Helper text',
     disabled: false,
   },
 };

package/src/stories/Tab.stories.js

@@ -3,9 +3,6 @@ import unnnicTab from '../components/Tab/Tab.vue';
 export default {
   title: 'tabs/Tab',
   component: unnnicTab,
-  argTypes: {
-    size: { control: { type: 'select', options: ['md', 'sm'] } },
-  },
   render: (args) => ({
     components: {
       unnnicTab,
@@ -36,6 +33,15 @@ export default {
             Second description
           </p>
         </template>
+        <template #tab-head-third>
+          Third
+        </template>
+        <template #tab-panel-third>
+          <h2 class="title">Third Content</h2>
+          <p class="description">
+            Third description
+          </p>
+        </template>
       </unnnic-tab>
     `,
   }),
@@ -44,6 +50,7 @@ export default {
 export const Default = {
   args: {
     initialTab: 'first',
-    tabs: ['first', 'second'],
+    tabs: ['first', 'second', 'third'],
+    disabledTabs: ['third'],
   },
 };

package/src/stories/Tabs.stories.js

@@ -4,7 +4,7 @@ import UnnnicIcon from '@/components/Icon.vue';
 import '@/assets/scss/tailwind.scss';
 
 export default {
-  title: 'Misc/Tabs',
+  title: 'Navigation/Tabs',
   component: Tabs,
   tags: ['autodocs'],
   render: (args) => ({

package/src/stories/Tag.stories.js

@@ -1,5 +1,4 @@
 import UnnnicTag from '../components/Tag/Tag.vue';
-import colorsList from '../utils/colorsList';
 
 export default {
   title: 'Data Display/Tag',
@@ -8,13 +7,30 @@ export default {
   argTypes: {
     text: { control: { type: 'text' } },
     type: {
-      control: { type: 'select', options: ['default', 'indicator', 'brand'] },
+      control: 'select',
+      options: ['default', 'brand', 'next'],
     },
     scheme: {
-      control: {
-        type: 'select',
-        options: colorsList,
-      },
+      control: 'select',
+      options: [
+        'green',
+        'blue',
+        'purple',
+        'red',
+        'orange',
+        'yellow',
+        'gray',
+        'teal',
+      ],
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium'],
+    },
+    hasCloseIcon: { control: 'boolean' },
+    leftIcon: {
+      control: 'select',
+      options: [null, 'check_circle', 'sentiment_satisfied'],
     },
   },
 };
@@ -34,45 +50,10 @@ export const LeftIcon = {
   },
 };
 
-export const RightIcon = {
+export const Small = {
   args: {
     text: 'Label',
     type: 'default',
-    rightIcon: 'check_circle',
-  },
-};
-
-export const CloseIcon = {
-  args: {
-    text: 'Label',
-    type: 'default',
-    hasCloseIcon: true,
-  },
-};
-
-export const Next = {
-  args: {
-    text: 'Label',
-    type: 'next',
-    scheme: 'weni',
-  },
-};
-
-export const Indicator = {
-  args: {
-    text: 'Tag Name',
-    type: 'indicator',
-    count: 100,
-    clickable: true,
-    hasBackButton: false,
-    enableTooltip: true,
-    tooltipText: 'This is the amount',
-  },
-};
-
-export const Brand = {
-  args: {
-    text: 'Settings',
-    type: 'brand',
+    size: 'small',
   },
 };

package/src/stories/TextArea.stories.js

@@ -37,6 +37,7 @@ export const Default = {
     errors: [],
     size: 'md',
     message: 'Helper text',
+    tooltip: 'Tooltip',
   },
 };
 
@@ -47,7 +48,7 @@ export const Error = {
     maxLength: 150,
     disabled: false,
     type: 'error',
-    error: 'Error text',
+    errors: 'Error text',
     size: 'md',
   },
 };
@@ -84,7 +85,7 @@ export const ErrorSm = {
     maxLength: 150,
     disabled: false,
     type: 'error',
-    error: 'Error text',
+    errors: 'Error text',
     size: 'sm',
   },
 };
@@ -100,3 +101,14 @@ export const DisabledSm = {
     message: 'Helper text',
   },
 };
+
+export const ResizeNone = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    maxLength: 150,
+    disabled: false,
+    type: 'normal',
+    resize: 'none',
+  },
+};