@weni/unnnic-system 3.2.9 → 3.3.1-alpha.0

package/src/stories/Alert.stories.js

@@ -1,7 +1,5 @@
-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',
@@ -20,9 +18,6 @@ export default {
   args: {
     type: 'default',
     text: 'Text',
-    linkHref: '',
-    linkText: '',
-    linkTarget: '',
   },
   argTypes: {
     type: {
@@ -37,42 +32,15 @@ export default {
         type: 'text',
       },
     },
-
-    linkHref: {
-      control: {
-        type: 'text',
-      },
-    },
-
-    linkText: {
-      control: {
-        type: 'text',
-      },
-    },
-
-    linkTarget: {
+    version: {
       control: {
-        type: 'text',
+        type: 'select',
       },
-    },
-    position: {
-      if: { arg: 'version' },
-    },
-    version: {
-      control: false,
+      options: ['1.1', '2.0'],
     },
     title: {
       if: { arg: 'version' },
     },
-    icon: {
-      if: { arg: 'version' },
-    },
-    closeText: {
-      if: { arg: 'version' },
-    },
-    scheme: {
-      if: { arg: 'version' },
-    },
   },
 };
 
@@ -95,7 +63,7 @@ export const Normal = {
     },
   },
   render: (args) => ({
-    components: { AlertCaller, UnnnicAlert },
+    components: { UnnnicAlert },
     setup() {
       return { args };
     },
@@ -117,7 +85,7 @@ export const Normal = {
 
 export const InlineComponent = {
   render: (args) => ({
-    components: { AlertCaller, UnnnicAlert },
+    components: { UnnnicAlert },
     setup() {
       return { args };
     },
@@ -166,7 +134,7 @@ export const WithContainerRef = {
     },
   },
   render: (args) => ({
-    components: { AlertCaller, UnnnicAlert },
+    components: { UnnnicAlert },
     setup() {
       return { args };
     },
@@ -190,32 +158,3 @@ 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 6 types: Primary, Secondary, Tertiary, Alternative, Warning, Attention.
+          It is divided into 5 types: Primary, Secondary, Tertiary, Warning, Attention.
           Each of these types has its states.
           <br/>
           <br/>
@@ -36,14 +36,7 @@ export default {
   argTypes: {
     type: {
       control: { type: 'select' },
-      options: [
-        'primary',
-        'secondary',
-        'tertiary',
-        'alternative',
-        'warning',
-        'attention',
-      ],
+      options: ['primary', 'secondary', 'tertiary', 'warning', 'attention'],
     },
     size: {
       control: { type: 'select' },
@@ -114,14 +107,6 @@ export const OnlyIcon = {
   },
 };
 
-export const Alternative = {
-  args: {
-    type: 'alternative',
-    iconLeft: 'add',
-    text: 'Text',
-  },
-};
-
 export const Warning = {
   parameters: {
     docs: {

package/src/stories/ChartFunnel.stories.js

@@ -14,6 +14,25 @@ export default {
   ],
 };
 
+export const TwoRows = {
+  args: {
+    data: [
+      {
+        title: '100%',
+        description: 'Clicou em comprar',
+        value: '18.621',
+        color: '#F6E05E',
+      },
+      {
+        title: '67%',
+        description: 'Informou entrega',
+        value: '12.476',
+        color: '#F6AD55',
+      },
+    ],
+  },
+};
+
 export const ThreeRows = {
   args: {
     data: [

package/src/stories/DataTable.stories.js

@@ -330,3 +330,63 @@ export const Loading = {
     isLoading: true,
   },
 };
+
+export const ControlledSort = {
+  args: { headers, items },
+  render: (args) => ({
+    components: {
+      UnnnicDataTable,
+    },
+    setup() {
+      let sortState = {
+        header: 'ID',
+        itemKey: 'id',
+        order: 'asc',
+      };
+
+      const handleSort = ({ order, header, itemKey }) => {
+        action('update:sort')({ order, header, itemKey });
+        sortState = { header, itemKey, order };
+
+        if (order === 'asc') {
+          args.items = [...args.items].sort((a, b) => {
+            if (itemKey === 'id') return a.id - b.id;
+            return a[itemKey] > b[itemKey] ? 1 : -1;
+          });
+        } else if (order === 'desc') {
+          args.items = [...args.items].sort((a, b) => {
+            if (itemKey === 'id') return b.id - a.id;
+            return a[itemKey] < b[itemKey] ? 1 : -1;
+          });
+        }
+      };
+
+      const updatePage = (page) => {
+        action('update:page')(page);
+        args.page = page;
+      };
+
+      const itemClick = (item) => {
+        action('itemClick')(item);
+      };
+
+      return { args, sortState, handleSort, updatePage, itemClick };
+    },
+    template: `
+    <div>
+      <UnnnicDataTable
+        v-bind="args"
+        :headers="args.headers"
+        :items="args.items"
+        :pageTotal="125"
+        :pageInterval="5"
+        v-model:sort="sortState"
+        @update:sort="handleSort"
+        @update:page="updatePage"
+        @itemClick="itemClick"
+      >
+      </UnnnicDataTable>
+    </div>
+    `,
+  }),
+};

package/src/stories/Input.stories.js

@@ -35,9 +35,7 @@ export default {
       },
     },
     template: `
-      <unnnic-form-element label="Label" message="Helper text">
-        <unnnic-input v-model="value" @icon-right-click="click" v-bind="args" />
-      </unnnic-form-element>
+        <unnnic-input v-model="value" @icon-right-click="click" v-bind="args" label="Label" />
     `,
   }),
 };
@@ -96,6 +94,11 @@ export const Normal = {
   args: {
     type: 'normal',
     placeholder: 'Placeholder',
+    showClear: true,
+    iconLeft: 'expand-8-1',
+    iconRight: 'messaging-we-chat-3',
+    iconLeftClickable: true,
+    iconRightClickable: false,
   },
 };
 
@@ -104,6 +107,7 @@ export const NormalSm = {
     size: 'sm',
     type: 'normal',
     placeholder: 'Placeholder',
+    showClear: true,
   },
 };
 
@@ -157,3 +161,18 @@ export const Mask = {
     mask: ['###.###.###-##', '##.###.###/####-##'],
   },
 };
+
+export const LimitMaxLength = {
+  args: {
+    placeholder: 'Text',
+    maxlength: 10,
+    showMaxlengthCounter: true,
+  },
+};
+
+export const WithTooltip = {
+  args: {
+    placeholder: 'Text',
+    tooltip: 'Tooltip',
+  },
+};

package/src/stories/Label.stories.js

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

package/src/stories/Popover.stories.js

@@ -0,0 +1,39 @@
+import UnnnicPopover from '../components/Popover/index.vue';
+
+export default {
+  title: 'example/Popover',
+  component: UnnnicPopover,
+  render: (args) => ({
+    components: { UnnnicPopover },
+    setup() {
+      return {
+        args,
+      };
+    },
+    template: `
+    <div>
+      <unnnic-popover v-bind="args">
+        <template #trigger>
+          <button>Click me</button>
+        </template>
+        <template #content>
+          <p>Hello</p>
+        </template>
+      </unnnic-popover>
+      <p>label label</p>
+    </div>
+  `,
+  }),
+};
+
+export const Default = {
+  args: {
+    modelValue: false,
+  },
+};
+
+export const WithModelValue = {
+  args: {
+    modelValue: true,
+  },
+};

package/src/stories/RadioGroup.stories.js

@@ -0,0 +1,139 @@
+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'] },
+  },
+};
+
+export const Default = {
+  args: {
+    label: 'Radio Group 1',
+  },
+
+  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',
+  },
+
+  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',
+    name: 'Radio Group 2',
+  },
+
+  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/Select.stories.js

@@ -0,0 +1,158 @@
+import UnnnicSelect from '../components/Select/index.vue';
+
+const options = [
+  { label: 'Option 1', value: 'option1', altValue: 'alt_value_option1' },
+  { label: 'Option 2', value: 'option2', altValue: 'alt_value_option2' },
+  { label: 'Option 3', value: 'option3', altValue: 'alt_value_option3' },
+  { label: 'Option 4', value: 'option4', altValue: 'alt_value_option4' },
+  { label: 'Option 5', value: 'option5', altValue: 'alt_value_option5' },
+  { label: 'Option 6', value: 'option6', altValue: 'alt_value_option6' },
+  { label: 'Option 7', value: 'option7', altValue: 'alt_value_option7' },
+  { label: 'Option 8', value: 'option8', altValue: 'alt_value_option8' },
+  { label: 'Option 9', value: 'option9', altValue: 'alt_value_option9' },
+  { label: 'Option 10', value: 'option10', disabled: true },
+];
+
+export default {
+  title: 'Form/Select',
+  component: UnnnicSelect,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Select is designed to solve common problems related to option selection.',
+      },
+    },
+  },
+  argTypes: {
+    options: {
+      description:
+        'List of items to be displayed in the options. If an item has a `disabled` key set to `true`, that item will be disabled. By default, the component looks for the `label` and `value` keys to display and update the model, but these are not required if you wish to customize them using the `itemLabel` and `itemValue` props, respectively.',
+    },
+    placeholder: {
+      description: 'Text to be displayed in the placeholder.',
+    },
+    label: {
+      description: 'Text to be displayed in the label.',
+    },
+    modelValue: {
+      description:
+        'Model variable. Its type will always match the return type of the key specified by `itemValue`, or the entire options object when `returnObject` prop is set to `true`.',
+    },
+    returnObject: {
+      description:
+        'Prop to indicate that the full option object should be returned in the v-model.',
+    },
+    itemLabel: {
+      description:
+        'Field of the option item that should be used to render the option label.',
+    },
+    itemValue: {
+      description:
+        'Field of the option item that should be used to return value to v-model.',
+    },
+    type: {
+      description: 'Select state type',
+    },
+    errors: {
+      description:
+        "Error message or messages. When it's an array, the messages will be separated by commas.",
+    },
+    message: {
+      description: 'Help or hint message.',
+    },
+    size: {
+      description: 'Select size',
+    },
+    optionsLines: {
+      description:
+        'Number of options to display at most; if exceeded, scrolling will be enabled.',
+    },
+    enableSearch: {
+      description:
+        'If true, enables a search field displayed inside the options popover. The `update:search` event is emitted on each input.',
+    },
+    search: {
+      description: 'Search value.',
+    },
+    locale: {
+      description: 'Locale for i18n translations.',
+    },
+    disabled: {
+      description: 'Disable the select.',
+    },
+  },
+  render: (args) => ({
+    components: { UnnnicSelect },
+    setup() {
+      const handleSearch = (value) => {
+        args.search = value;
+      };
+      return { args, handleSearch };
+    },
+    data() {
+      return {
+        exampleValue: null,
+      };
+    },
+    template: `
+      <p>modelValue: {{ exampleValue }}</p>
+      <unnnic-select v-model="exampleValue" v-bind="args" @update:search="handleSearch" />
+    `,
+  }),
+};
+
+export const Default = {
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+  },
+};
+
+export const ReturnObject = {
+  args: {
+    returnObject: true,
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+  },
+};
+
+export const AlternativeValueKey = {
+  args: {
+    itemValue: 'altValue',
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+  },
+};
+
+export const AlternativeValueLabel = {
+  args: {
+    itemLabel: 'altValue',
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+  },
+};
+
+export const Disabled = {
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+    disabled: true,
+  },
+};
+
+export const WithSearch = {
+  args: {
+    placeholder: 'Placeholder',
+    label: 'Label',
+    options,
+    enableSearch: true,
+    search: '',
+  },
+};

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'],
   },
 };