@weni/unnnic-system 2.0.0 → 2.0.2

package/src/stories/Checkbox.stories.js

@@ -4,25 +4,32 @@ export default {
   title: 'Form/Checkbox',
   component: unnnicCheckbox,
   argTypes: {
-    value: { control: { type: 'inline-radio', options: [true, false, 'less'] } },
-    disabled: { control: { type: 'boolean' } },
-    size: { control: { type: 'select', options: ['md', 'sm'] } },
+    value: { control: 'inline-radio', options: [true, false, 'less'] },
+    disabled: { control: 'boolean' },
+    size: { control: 'select', options: ['md', 'sm'] },
   },
+  render: (args) => ({
+    components: {
+      unnnicCheckbox,
+    },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        value: true,
+      };
+    },
+    template: `
+      <unnnicCheckbox v-model="value" />
+    `,
+  }),
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes).concat(['input']),
-  components: {
-    unnnicCheckbox,
+export const Default = {
+  args: {
+    value: true,
+    disabled: false,
+    size: 'md',
   },
-  template: `
-    <unnnic-checkbox v-bind="$props"></unnnic-checkbox>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  value: true,
-  disabled: false,
-  size: 'md',
 };

package/src/stories/CircleProgressBar.stories.js

@@ -17,11 +17,7 @@ const Template = (args, { argTypes }) => ({
     return {};
   },
 
-  template: `
-    <div>
-      <unnnic-circle-progress-bar v-bind="$props" />
-    </div>
-  `,
+  template: `<unnnic-circle-progress-bar v-bind="$props" />`,
 
   methods: {},
 });
@@ -29,8 +25,6 @@ const Template = (args, { argTypes }) => ({
 export const Default = Template.bind({});
 
 Default.args = {
-  value: 50,
   progress: 4,
   totalProgress: 8,
-  description: 'Description',
 };

package/src/stories/Collapse.stories.js

@@ -0,0 +1,97 @@
+import unnnicCollapse from '../components/Collapse/Collapse.vue';
+
+export default {
+  title: 'accordion/Collapse',
+  component: unnnicCollapse,
+  argTypes: {
+    'on-update:model-value': { action: '@update:model-value' },
+    size: {
+      control: {
+        type: 'select',
+        options: ['md', 'lg'],
+      },
+    },
+    borderBottom: { control: { type: 'boolean' } },
+    unspacedIcon: { control: { type: 'boolean' } },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+
+  components: {
+    unnnicCollapse,
+  },
+
+  data() {
+    return {
+      active: true,
+    };
+  },
+
+  template: `
+    <div>
+      <button @click="active = !active">External change active</button>
+
+      <pre>v-model: {{ active }}</pre>
+
+      <unnnic-collapse v-bind="$props" v-model="active">
+        Default slot
+        <br />
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat.
+      </unnnic-collapse>
+
+<pre>
+
+<b>Basic usage:</b>
+
+&lt;unnnic-collapse title="Title"&gt;
+  Collapse body
+&lt;/unnnic-collapse&gt;
+
+
+<b>With header slot:</b>
+
+&lt;unnnic-collapse&gt;
+  &lt;template slot="header"&gt;Title&lt;/template&gt;
+
+  Collapse body
+&lt;/unnnic-collapse&gt;
+
+
+<b>With v-model:</b>
+
+&lt;unnnic-collapse title="Title" v-model="active"&gt;
+  Collapse body
+&lt;/unnnic-collapse&gt;
+
+
+<b>Complete usage:</b>
+
+&lt;unnnic-collapse
+  title           String
+  border-bottom   Boolean
+  unspaced-icon   Boolean
+  active          Boolean
+  @change         Boolean Event
+&gt;
+  &lt;template slot="header"&gt;Title&lt;/template&gt;
+
+  Collapse body
+&lt;/unnnic-collapse&gt;
+</pre>
+    </div>
+  `,
+
+  methods: {
+    click() {},
+  },
+});
+
+export const Default = Template.bind({});
+
+Default.args = {
+  title: 'Title prop or header slot',
+};

package/src/stories/Comment.stories.js

@@ -21,15 +21,18 @@ const Template = (args, { argTypes }) => ({
   template: `
   <unnnic-comment v-bind="$props">
     <img slot="avatar" src="https://images.unsplash.com/photo-1568564321589-3e581d074f9b?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NTl8fGRvZ3xlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80" />
-    <unnnic-dropdown slot="actions">
-      <unnnic-icon-svg
-        slot="trigger"
-        icon="navigation-menu-vertical-1"
-        size="sm"
-      />
+    <template v-slot:actions>
+    <unnnic-dropdown>
+      <template v-slot:trigger>
+        <unnnic-icon-svg
+          slot="trigger"
+          icon="navigation-menu-vertical-1"
+          size="sm"
+        />
+      </template>
       <unnnic-dropdown-item>
         <unnnic-button
-          type="terciary"
+          type="tertiary"
           iconLeft="pencil-write-1"
           text="Edit comment"
           size="small"
@@ -37,13 +40,14 @@ const Template = (args, { argTypes }) => ({
       </unnnic-dropdown-item>
       <unnnic-dropdown-item>
         <unnnic-button
-          type="terciary"
+          type="tertiary"
           iconLeft="delete-1"
           text="Delete Comment"
           size="small"
         />
       </unnnic-dropdown-item>
     </unnnic-dropdown>
+    </template>
   </unnnic-comment>
   `,
 });
@@ -54,6 +58,5 @@ Default.args = {
     'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT8qiVsOfzasQWdcm81N6WmPicyHp50mMkvgw&usqp=CAU',
   title: 'This is the username',
   time: '- 2 hours ago',
-  text:
-    'This is a very very very very very very very very very very very long comment This is a very very very very very very very very very very very long comment This is a very very very very very very very very very very very long comment This is a very very very very very very very very very very very long comment This is a very very very very very very very very very very very long comment',
+  text: 'This is a very very very very very very very very very very very long comment This is a very very very very very very very very very very very long comment This is a very very very very very very very very very very very long comment This is a very very very very very very very very very very very long comment This is a very very very very very very very very very very very long comment',
 };

package/src/stories/DataArea.stories.js

@@ -37,25 +37,29 @@ const Template = (args, { argTypes }) => ({
   template: `
     <div>
       <unnnic-data-area v-bind="$props">
-        <div slot="links" :style="slotStyle">
-          <a href="#" :style="linkStyle">Link1</a>
-          <a href="#" :style="linkStyle">Link2</a>
-        </div>
+        <template v-slot:links>
+          <div :style="slotStyle">
+            <a href="#" :style="linkStyle">Link1</a>
+            <a href="#" :style="linkStyle">Link2</a>
+          </div>
+        </template>
 
-        <div slot="buttons" :style="slotStyle">
-          <unnnic-button
-            slot="trigger"
-            size="small"
-            type="secondary"
-            iconCenter="copy-paste-1"
-          />
-          <unnnic-button
-            slot="trigger"
-            size="small"
-            type="secondary"
-            iconCenter="button-refresh-arrows-1"
-          />
-        </div>
+        <template v-slot:buttons>
+          <div :style="slotStyle">
+            <unnnic-button
+              slot="trigger"
+              size="small"
+              type="secondary"
+              iconCenter="copy-paste-1"
+            />
+            <unnnic-button
+              slot="trigger"
+              size="small"
+              type="secondary"
+              iconCenter="button-refresh-arrows-1"
+            />
+          </div>
+        </template>
       </unnnic-data-area>
     </div>
   `,

package/src/stories/DatePicker.stories.js

@@ -7,14 +7,14 @@ export default {
     type: {
       control: {
         type: 'select',
-        options: ['day', 'month', 'year'],
       },
+      options: ['day', 'month', 'year'],
     },
     size: {
       control: {
         type: 'select',
-        options: ['small', 'large'],
       },
+      options: ['small', 'large'],
     },
     months: { control: { type: 'array' } },
     days: { control: { type: 'array' } },
@@ -65,23 +65,30 @@ Default.args = {
     'Dezembro',
   ],
   days: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
-  options: [{
-    name: 'Últimos 7 dias',
-    id: 'last-7-days',
-  }, {
-    name: 'Últimos 14 dias',
-    id: 'last-14-days',
-  }, {
-    name: 'Últimos 30 dias',
-    id: 'last-30-days',
-  }, {
-    name: 'Últimos 12 meses',
-    id: 'last-12-months',
-  }, {
-    name: 'Mês Atual',
-    id: 'current-month',
-  }, {
-    name: 'Personalizar',
-    id: 'custom',
-  }],
+  options: [
+    {
+      name: 'Últimos 7 dias',
+      id: 'last-7-days',
+    },
+    {
+      name: 'Últimos 14 dias',
+      id: 'last-14-days',
+    },
+    {
+      name: 'Últimos 30 dias',
+      id: 'last-30-days',
+    },
+    {
+      name: 'Últimos 12 meses',
+      id: 'last-12-months',
+    },
+    {
+      name: 'Mês Atual',
+      id: 'current-month',
+    },
+    {
+      name: 'Personalizar',
+      id: 'custom',
+    },
+  ],
 };

package/src/stories/Dropdown.stories.js

@@ -6,14 +6,20 @@ export default {
   title: 'example/Dropdown',
   component: unnnicDropdown,
   argTypes: {
-    position: { control: { type: 'select', options: ['top-left', 'top-right', 'bottom-left', 'bottom-right'] } },
+    position: {
+      control: {
+        type: 'select',
+        options: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
+      },
+    },
   },
 };
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { unnnicDropdown, unnnicDropdownItem, unnnicButton },
-  template: '<unnnic-dropdown v-bind="$props"> <unnnic-button slot="trigger" /> <unnnic-dropdown-item> Item1 </unnnic-dropdown-item> <unnnic-dropdown-item> Item2 </unnnic-dropdown-item> </unnnic-dropdown>',
+  template:
+    '<unnnic-dropdown v-bind="$props"> <template v-slot:trigger><unnnic-button text="click me"/></template> <unnnic-dropdown-item> Item1 </unnnic-dropdown-item> <unnnic-dropdown-item> Item2 </unnnic-dropdown-item> </unnnic-dropdown>',
 });
 
 export const Normal = Template.bind({});

package/src/stories/EmojiPicker.stories.js

@@ -0,0 +1,59 @@
+import unnnicButton from '../components/Button/Button.vue';
+import unnnicEmojiPicker from '../components/EmojiPicker/EmojiPicker.vue';
+
+export default {
+  title: 'Form/EmojiPicker',
+  decorators: () => {
+    return {
+      template:
+        '<div style="height: 90vh; display: flex; align-items: end"><story/></div>',
+    };
+  },
+};
+
+export const Default = () => ({
+  components: { unnnicEmojiPicker, unnnicButton },
+  template: `
+    <section style="position: relative;">
+      <unnnicButton @click.stop="handleEmojiPicker" type="secondary" iconCenter="emoji" size="small"/>
+      <unnnicEmojiPicker
+        v-show="isEmojiPickerOpen"
+        @emojiSelected="handleInput"
+        @close="closeEmojiPicker"
+      />
+      <input
+        placeholder="..."
+        :value="inputValue"
+        @input="handleInput"
+      />
+    </section>
+  `,
+  data() {
+    return {
+      isEmojiPickerOpen: false,
+      inputValue: '',
+    };
+  },
+  methods: {
+    openEmojiPicker() {
+      this.isEmojiPickerOpen = true;
+    },
+    closeEmojiPicker() {
+      this.isEmojiPickerOpen = false;
+    },
+    handleEmojiPicker() {
+      if (this.isEmojiPickerOpen) {
+        this.closeEmojiPicker();
+      } else {
+        this.openEmojiPicker();
+      }
+    },
+    handleInput(event) {
+      if (typeof event === 'string') {
+        this.inputValue += event;
+      } else {
+        this.inputValue = event.target.value;
+      }
+    },
+  },
+});

package/src/stories/Grid.stories.js

@@ -4,7 +4,12 @@ export default {
   title: 'Example/Grid',
   component: Grid,
   argTypes: {
-    size: { control: { type: 'select', options: ['xs', 'sm', 'md', 'lg', 'xl', 'giant'] } },
+    size: {
+      control: {
+        type: 'select',
+        options: ['xs', 'sm', 'md', 'lg', 'xl', 'giant'],
+      },
+    },
   },
 };
 

package/src/stories/Icon.stories.js

@@ -97,7 +97,6 @@ export default {
   title: 'example/Icon',
   component: unnnicIcon,
   argTypes: {
-    icon: { control: { type: 'select', options: iconsOptions } },
     scheme: { control: { type: 'select', options: schemes } },
     size: {
       control: {
@@ -119,16 +118,8 @@ export default {
   },
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicIcon },
-  template: `
-    <unnnic-icon v-bind="$props" />
-  `,
-});
-
-export const Normal = Template.bind({});
-
-Normal.args = {
-  icon: iconsOptions[0],
+export const Normal = {
+  args: {
+    icon: iconsOptions[0],
+  },
 };

package/src/stories/IconLoading.stories.js

@@ -0,0 +1,126 @@
+import unnnicIconLoading from '../components/IconLoading/IconLoading.vue';
+
+const schemes = [
+  'background-solo',
+  'background-sky',
+  'background-grass',
+  'background-carpet',
+  'background-snow',
+  'background-lightest',
+  'background-white',
+  'neutral-black',
+  'neutral-darkest',
+  'neutral-dark',
+  'neutral-cloudy',
+  'neutral-cleanest',
+  'neutral-clean',
+  'neutral-soft',
+  'neutral-lightest',
+  'neutral-light',
+  'neutral-white',
+  'neutral-snow',
+  'feedback-red',
+  'feedback-green',
+  'feedback-yellow',
+  'feedback-blue',
+  'feedback-grey',
+  'aux-blue',
+  'aux-purple',
+  'aux-orange',
+  'aux-lemon',
+  'aux-pink',
+  'aux-baby-blue',
+  'aux-baby-yellow',
+  'aux-baby-red',
+  'aux-baby-green',
+  'aux-baby-pink',
+  'aux-green-100',
+  'aux-green-300',
+  'aux-green-500',
+  'aux-green-700',
+  'aux-green-900',
+  'aux-blue-100',
+  'aux-blue-300',
+  'aux-blue-500',
+  'aux-blue-700',
+  'aux-blue-900',
+  'aux-purple-100',
+  'aux-purple-300',
+  'aux-purple-500',
+  'aux-purple-700',
+  'aux-purple-900',
+  'aux-red-100',
+  'aux-red-300',
+  'aux-red-500',
+  'aux-red-700',
+  'aux-red-900',
+  'aux-orange-100',
+  'aux-orange-300',
+  'aux-orange-500',
+  'aux-orange-700',
+  'aux-orange-900',
+  'aux-yellow-100',
+  'aux-yellow-300',
+  'aux-yellow-500',
+  'aux-yellow-700',
+  'aux-yellow-900',
+  'floweditor-blue',
+  'floweditor-purple',
+  'floweditor-wine',
+  'floweditor-orange',
+  'floweditor-pink',
+  'floweditor-turquoise',
+  'floweditor-green',
+  'weni-50',
+  'weni-100',
+  'weni-200',
+  'weni-300',
+  'weni-400',
+  'weni-500',
+  'weni-600',
+  'weni-700',
+  'weni-800',
+  'weni-900',
+  'weni-950',
+  'brand-weni',
+  'brand-weni-dark',
+  'brand-weni-soft',
+  'brand-sec-dark',
+  'brand-sec-soft',
+  'brand-sec',
+];
+
+export default {
+  title: 'example/IconLoading',
+  component: unnnicIconLoading,
+  argTypes: {
+    scheme: { control: { type: 'select', options: schemes } },
+    size: {
+      control: {
+        type: 'select',
+        options: [
+          'nano',
+          'xs',
+          'sm',
+          'md',
+          'lg',
+          'avatar-lg',
+          'avatar-md',
+          'avatar-sm',
+          'avatar-xs',
+          'avatar-nano',
+        ],
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { unnnicIconLoading },
+  template: `
+    <unnnic-icon-loading v-bind="$props" />
+  `,
+});
+
+export const Default = Template.bind({});

package/src/stories/ImportCard.stories.js

@@ -1,6 +1,12 @@
 import i18n from '../utils/plugins/i18n';
 import unnnicImportCard from '../components/ImportCard/ImportCard.vue';
 
+import { setup } from '@storybook/vue3';
+
+setup((app) => {
+  app.use(i18n);
+});
+
 export default {
   title: 'Example/ImportCard',
   component: unnnicImportCard,
@@ -20,7 +26,6 @@ const Template = (args, { argTypes }) => ({
   components: { unnnicImportCard },
 
   template: '<unnnic-import-card v-bind="$props" />',
-  i18n,
 });
 
 export const Default = Template.bind({});

package/src/stories/Input.stories.js

@@ -6,21 +6,27 @@ export default {
   component: unnnicInput,
   argTypes: {
     label: { control: { type: 'text' } },
-    size: { control: { type: 'select', options: ['md', 'sm'] } },
-    type: { control: { type: 'select', options: ['normal', 'error'] } },
-    nativeType: { control: { type: 'select', options: ['text', 'password'] } },
+    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 } },
+    iconLeft: { control: { type: 'select' }, options: iconList },
+    iconRight: { control: { type: 'select' }, options: iconList },
     allowTogglePassword: { control: { type: 'boolean' } },
-    hasCloudyColor: { control: { type: 'select', options: [true, false] } },
+    hasCloudyColor: { control: { type: 'select' }, options: [true, false] },
   },
 };
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { unnnicInput },
-  template: '<unnnic-input v-bind="$props" />',
+  data() {
+    return {
+      v: '',
+    };
+  },
+  template:
+    '<div><pre>v-model: {{ v }}</pre><unnnic-input v-bind="$props" v-model="v" /></div>',
 });
 
 export const Normal = Template.bind({});