@weni/unnnic-system 3.9.3-alpha.0 → 3.9.4

package/src/stories/Alert.stories.js

@@ -1,5 +1,7 @@
+import AlertCaller from '../components/Alert/AlertCaller.vue';
 import alert from '../utils/call';
 import UnnnicAlert from '../components/Alert/Alert.vue';
+import AlertBanner from '../components/Alert/AlertBanner.vue';
 
 export default {
   title: 'Feedback/Alert',
@@ -18,6 +20,9 @@ export default {
   args: {
     type: 'default',
     text: 'Text',
+    linkHref: '',
+    linkText: '',
+    linkTarget: '',
   },
   argTypes: {
     type: {
@@ -32,15 +37,42 @@ export default {
         type: 'text',
       },
     },
-    version: {
+
+    linkHref: {
       control: {
-        type: 'select',
+        type: 'text',
+      },
+    },
+
+    linkText: {
+      control: {
+        type: 'text',
+      },
+    },
+
+    linkTarget: {
+      control: {
+        type: 'text',
       },
-      options: ['1.1', '2.0'],
+    },
+    position: {
+      if: { arg: 'version' },
+    },
+    version: {
+      control: false,
     },
     title: {
       if: { arg: 'version' },
     },
+    icon: {
+      if: { arg: 'version' },
+    },
+    closeText: {
+      if: { arg: 'version' },
+    },
+    scheme: {
+      if: { arg: 'version' },
+    },
   },
 };
 
@@ -63,7 +95,7 @@ export const Normal = {
     },
   },
   render: (args) => ({
-    components: { UnnnicAlert },
+    components: { AlertCaller, UnnnicAlert },
     setup() {
       return { args };
     },
@@ -85,7 +117,7 @@ export const Normal = {
 
 export const InlineComponent = {
   render: (args) => ({
-    components: { UnnnicAlert },
+    components: { AlertCaller, UnnnicAlert },
     setup() {
       return { args };
     },
@@ -134,7 +166,7 @@ export const WithContainerRef = {
     },
   },
   render: (args) => ({
-    components: { UnnnicAlert },
+    components: { AlertCaller, UnnnicAlert },
     setup() {
       return { args };
     },
@@ -158,3 +190,32 @@ export const WithContainerRef = {
     scheme: 'feedback-green',
   },
 };
+
+export const Banner = {
+  parameters: {
+    docs: {
+      description: {
+        story: `This variation has the additional prop ${'`showCloseButton`'}, false by default.`,
+      },
+    },
+  },
+  render: (args) => ({
+    components: { AlertBanner },
+    setup() {
+      return { args };
+    },
+    methods: {
+      unnnicCallAlert() {
+        alert.callAlert({
+          props: this.args,
+          containerRef: this.$refs.divContainer,
+        });
+      },
+    },
+    template: '<alert-banner v-bind="args" />',
+  }),
+  args: {
+    text: 'Text',
+    showCloseButton: false,
+  },
+};

package/src/stories/Button.stories.js

@@ -8,7 +8,7 @@ export default {
       description: {
         component: `Allows users to perform an action or navigate to another page. 
           It has styles for various needs and are ideal for directing the user's attention. 
-          It is divided into 5 types: Primary, Secondary, Tertiary, Warning, Attention.
+          It is divided into 6 types: Primary, Secondary, Tertiary, Alternative, Warning, Attention.
           Each of these types has its states.
           <br/>
           <br/>
@@ -36,7 +36,14 @@ export default {
   argTypes: {
     type: {
       control: { type: 'select' },
-      options: ['primary', 'secondary', 'tertiary', 'warning', 'attention'],
+      options: [
+        'primary',
+        'secondary',
+        'tertiary',
+        'alternative',
+        'warning',
+        'attention',
+      ],
     },
     size: {
       control: { type: 'select' },
@@ -68,71 +75,74 @@ export default {
 
 export const Primary = {
   args: {
-    text: 'Text',
+    text: 'Button Text',
   },
 };
 
 export const Secondary = {
   args: {
     type: 'secondary',
-    text: 'Text',
+    text: 'Button Text',
   },
 };
 
 export const Tertiary = {
   args: {
     type: 'tertiary',
-    text: 'Text',
+    text: 'Button Text',
   },
 };
 
-export const Warning = {
-  parameters: {
-    docs: {
-      description: {
-        story: `This variation aims to highlight actions that could be destructive or have negative consequences if taken. 
-        For example: Deleting an element.`,
-      },
-    },
-  },
+export const WithIcon = {
   args: {
-    type: 'warning',
-    text: 'Text',
+    text: 'Button Text',
+    iconLeft: 'add',
   },
 };
 
-export const Attention = {
+export const FilledIcon = {
   args: {
-    type: 'attention',
-    text: 'Text',
+    text: 'Button Text',
+    iconLeft: 'play_arrow',
+    iconsFilled: true,
   },
 };
 
-export const Loading = {
+export const OnlyIcon = {
   args: {
-    loading: true,
-    text: 'Text',
+    iconCenter: 'add',
   },
 };
 
-export const WithIcon = {
+export const Alternative = {
   args: {
-    text: 'Text',
+    type: 'alternative',
     iconLeft: 'add',
+    text: 'Text',
   },
 };
 
-export const FilledIcon = {
+export const Warning = {
+  parameters: {
+    docs: {
+      description: {
+        story: `This variation aims to highlight actions that could be destructive or have negative consequences if taken. 
+        For example: Deleting an element.`,
+      },
+    },
+  },
   args: {
+    type: 'warning',
+    iconLeft: 'add',
     text: 'Text',
-    iconLeft: 'play_arrow',
-    iconsFilled: true,
   },
 };
 
-export const OnlyIcon = {
+export const Attention = {
   args: {
-    iconCenter: 'add',
+    type: 'attention',
+    iconLeft: 'add',
+    text: 'Text',
   },
 };
 

package/src/stories/Checkbox.stories.js

@@ -15,12 +15,12 @@ export default {
       },
     },
   },
-  args: { disabled: false },
+  args: { disabled: false, size: 'md' },
   argTypes: {
     modelValue: { control: 'inline-radio', options: [true, false, 'less'] },
     disabled: { control: 'boolean' },
-    label: { control: 'text' },
-    helper: { control: 'text' },
+    size: { control: 'select', options: ['md', 'sm'] },
+    textRight: { control: 'text' },
   },
   render: (args) => ({
     components: {
@@ -34,7 +34,6 @@ export default {
       return { args, updateModelValue };
     },
     template: `
-      <pre>v-model: {{ args.modelValue }}</pre>
       <UnnnicCheckbox v-bind="args" @update:modelValue="updateModelValue"/>
     `,
   }),
@@ -43,22 +42,18 @@ export default {
 export const Default = {
   args: {
     modelValue: false,
-    label: 'Label',
-    helper: 'Helper',
   },
 };
 
 export const Selected = {
   args: {
     modelValue: true,
-    label: 'Label',
   },
 };
 
-export const Less = {
+export const LessSelected = {
   args: {
     modelValue: 'less',
-    label: 'Label',
   },
 };
 
@@ -66,7 +61,6 @@ export const Disabled = {
   args: {
     modelValue: false,
     disabled: true,
-    label: 'Label',
   },
 };
 
@@ -74,6 +68,5 @@ export const DisabledSelected = {
   args: {
     modelValue: true,
     disabled: true,
-    label: 'Label',
   },
 };

package/src/stories/Input.stories.js

@@ -7,25 +7,14 @@ export default {
   component: unnnicInput,
   argTypes: {
     label: { control: { type: 'text' } },
-    size: {
-      control: { type: 'select' },
-      options: ['md', 'sm'],
-      defaultValue: {
-        summary: 'md',
-      },
-    },
-    type: {
-      control: { type: 'select' },
-      options: ['normal', 'error'],
-      defaultValue: {
-        summary: 'normal',
-      },
-    },
+    size: { control: { type: 'select' }, options: ['md', 'sm'] },
+    type: { control: { type: 'select' }, options: ['normal', 'error'] },
     nativeType: { control: { type: 'select' }, options: ['text', 'password'] },
     placeholder: { control: { type: 'text' } },
     iconLeft: { control: { type: 'select' }, options: iconList },
     iconRight: { control: { type: 'select' }, options: iconList },
     allowTogglePassword: { control: { type: 'boolean' } },
+    hasCloudyColor: { control: { type: 'select' }, options: [true, false] },
   },
   render: (args) => ({
     components: {
@@ -46,72 +35,106 @@ export default {
       },
     },
     template: `
-      <unnnic-input v-model="value" @icon-right-click="click" v-bind="args" />
+      <unnnic-form-element label="Label" message="Helper text">
+        <unnnic-input v-model="value" @icon-right-click="click" v-bind="args" />
+      </unnnic-form-element>
     `,
   }),
 };
 
-export const Normal = {
-  args: {
-    label: 'Label',
-    placeholder: 'Placeholder',
+const TemplateError = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+
+  components: {
+    unnnicFormElement,
+    unnnicInput,
   },
-};
 
-export const NormalSm = {
-  args: {
-    label: 'Label',
-    size: 'sm',
-    placeholder: 'Placeholder',
+  setup() {
+    return { args };
   },
-};
 
-export const Error = {
-  args: {
-    label: 'Label',
-    placeholder: 'Placeholder',
-    errors: 'Error text',
+  data() {
+    return {
+      value: '',
+    };
   },
-};
 
-export const ErrorSm = {
-  args: {
-    label: 'Label',
-    size: 'sm',
-    errors: 'Error text',
-    placeholder: 'Placeholder',
+  template: `
+    <unnnic-form-element label="Label" error="Error text">
+      <unnnic-input v-model="value" v-bind="args"/>
+    </unnnic-form-element>
+  `,
+});
+
+const TemplateDisabled = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+
+  components: {
+    unnnicFormElement,
+    unnnicInput,
+  },
+
+  setup() {
+    return { args };
   },
-};
 
-export const Disabled = {
+  data() {
+    return {
+      value: '',
+    };
+  },
+
+  template: `
+    <unnnic-form-element label="Label" message="Helper text" disabled>
+      <unnnic-input v-model="value" v-bind="args"/>
+    </unnnic-form-element>
+  `,
+});
+
+export const Normal = {
   args: {
-    label: 'Label',
-    disabled: true,
+    type: 'normal',
     placeholder: 'Placeholder',
   },
 };
 
-export const DisabledSm = {
+export const NormalSm = {
   args: {
-    label: 'Label',
     size: 'sm',
-    disabled: true,
+    type: 'normal',
     placeholder: 'Placeholder',
   },
 };
 
-export const DisabledError = {
-  args: {
-    label: 'Label',
-    disabled: true,
-    errors: 'Error text',
-    placeholder: 'Placeholder',
-  },
+export const Error = TemplateError.bind({});
+Error.args = {
+  type: 'error',
+  placeholder: 'Placeholder',
+};
+
+export const ErrorSm = TemplateError.bind({});
+ErrorSm.args = {
+  size: 'sm',
+  type: 'error',
+  placeholder: 'Placeholder',
+};
+
+export const Disabled = TemplateDisabled.bind({});
+Disabled.args = {
+  disabled: true,
+  placeholder: 'Placeholder',
+};
+
+export const DisabledSm = TemplateDisabled.bind({});
+DisabledSm.args = {
+  size: 'sm',
+  disabled: true,
+  placeholder: 'Placeholder',
 };
 
 export const Password = {
   args: {
-    label: 'Label',
     placeholder: 'Password',
     nativeType: 'password',
     allowTogglePassword: true,
@@ -120,7 +143,6 @@ export const Password = {
 
 export const IconLeftAndRight = {
   args: {
-    label: 'Label',
     placeholder: 'Text',
     iconLeft: 'email',
     iconRight: 'search',
@@ -135,20 +157,3 @@ export const Mask = {
     mask: ['###.###.###-##', '##.###.###/####-##'],
   },
 };
-
-export const LimitMaxLength = {
-  args: {
-    label: 'Label',
-    placeholder: 'Text',
-    maxlength: 10,
-    showMaxlengthCounter: true,
-  },
-};
-
-export const WithTooltip = {
-  args: {
-    label: 'Label',
-    placeholder: 'Text',
-    tooltip: 'Tooltip',
-  },
-};

package/src/stories/Label.stories.js

@@ -13,10 +13,3 @@ export const Default = {
     label: 'Label',
   },
 };
-
-export const WithTooltip = {
-  args: {
-    label: 'Label',
-    tooltip: 'Tooltip',
-  },
-};

package/src/stories/Radio.stories.js

@@ -21,28 +21,9 @@ export default {
     disabled: { control: { type: 'boolean' } },
     size: { control: { type: 'select', options: ['md', 'sm'] } },
   },
-  render: (args) => ({
-    components: {
-      UnnnicRadio,
-    },
-    setup() {
-      const updateModelValue = (value) => {
-        action('update:modelValue')(value);
-        args.modelValue = value;
-      };
-      return { args, updateModelValue };
-    },
-    template: `
-      <div>
-        <UnnnicRadio v-bind="args" @update:model-value="updateModelValue" :value="args.value">
-          Option
-        </UnnnicRadio>
-      </div>
-    `,
-  }),
 };
 
-export const Multiple = {
+export const Default = {
   render: (args) => ({
     components: {
       UnnnicRadio,
@@ -94,11 +75,3 @@ export const DisableSelected = {
     disabled: true,
   },
 };
-
-export const Helper = {
-  args: {
-    modelValue: 'option 1',
-    value: 'option 1',
-    helper: 'Helper text',
-  },
-};

package/src/stories/Switch.stories.js

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

package/src/stories/Tab.stories.js

@@ -3,6 +3,9 @@ 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,
@@ -33,15 +36,6 @@ 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>
     `,
   }),
@@ -50,7 +44,6 @@ export default {
 export const Default = {
   args: {
     initialTab: 'first',
-    tabs: ['first', 'second', 'third'],
-    disabledTabs: ['third'],
+    tabs: ['first', 'second'],
   },
 };