@weni/unnnic-system 2.0.16 → 2.0.17

package/src/stories/Comment.stories.js

@@ -1,62 +1,65 @@
-import unnnicComment from '../components/Comment/Comment.vue';
-import unnnicButton from '../components/Button/Button.vue';
-import unnnicDropdown from '../components/Dropdown/Dropdown.vue';
-import unnnicDropdownItem from '../components/Dropdown/DropdownItem.vue';
+import UnnnicComment from '../components/Comment/Comment.vue';
+import UnnnicButton from '../components/Button/Button.vue';
+import UnnnicDropdown from '../components/Dropdown/Dropdown.vue';
+import UnnnicDropdownItem from '../components/Dropdown/DropdownItem.vue';
 import UnnnicIcon from '../components/Icon.vue';
 
 export default {
   title: 'Example/Comment',
-  component: unnnicComment,
+  component: UnnnicComment,
+  render: (args) => ({
+    components: {
+      UnnnicComment,
+      UnnnicButton,
+      UnnnicDropdown,
+      UnnnicDropdownItem,
+      UnnnicIcon,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+    <unnnic-comment v-bind="args">
+      <template #avatar>
+        <img src="https://images.unsplash.com/photo-1568564321589-3e581d074f9b?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NTl8fGRvZ3xlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80" />
+      </template>
+      <template #actions>
+        <unnnic-dropdown>
+          <template #trigger>
+            <unnnic-icon
+              icon="navigation-menu-vertical-1"
+              size="sm"
+            />
+          </template>
+          <unnnic-dropdown-item>
+            <unnnic-button
+              type="tertiary"
+              iconLeft="pencil-write-1"
+              text="Edit comment"
+              size="small"
+            />
+          </unnnic-dropdown-item>
+          <unnnic-dropdown-item>
+            <unnnic-button
+              type="tertiary"
+              iconLeft="delete-1"
+              text="Delete Comment"
+              size="small"
+            />
+          </unnnic-dropdown-item>
+        </unnnic-dropdown>
+      </template>
+    </unnnic-comment>
+    `,
+  }),
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: {
-    unnnicComment,
-    unnnicButton,
-    unnnicDropdown,
-    unnnicDropdownItem,
-    UnnnicIcon,
+export const Default = {
+  args: {
+    avatar:
+      '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',
   },
-  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" />
-    <template v-slot:actions>
-    <unnnic-dropdown>
-      <template v-slot:trigger>
-        <unnnic-icon
-          slot="trigger"
-          icon="navigation-menu-vertical-1"
-          size="sm"
-        />
-      </template>
-      <unnnic-dropdown-item>
-        <unnnic-button
-          type="tertiary"
-          iconLeft="pencil-write-1"
-          text="Edit comment"
-          size="small"
-        />
-      </unnnic-dropdown-item>
-      <unnnic-dropdown-item>
-        <unnnic-button
-          type="tertiary"
-          iconLeft="delete-1"
-          text="Delete Comment"
-          size="small"
-        />
-      </unnnic-dropdown-item>
-    </unnnic-dropdown>
-    </template>
-  </unnnic-comment>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  avatar:
-    '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',
 };

package/src/stories/DataArea.stories.js

@@ -1,79 +1,74 @@
-import unnnicDataArea from '../components/DataArea/DataArea.vue';
-import unnnicButton from '../components/Button/Button.vue';
+import UnnnicDataArea from '../components/DataArea/DataArea.vue';
+import UnnnicButton from '../components/Button/Button.vue';
 import { unnnicFontSize } from '../components/config';
 
 export default {
   title: 'example/DataArea',
-  component: unnnicDataArea,
+  component: UnnnicDataArea,
   argTypes: {
     title: { control: { type: 'text' } },
     text: { control: { type: 'text' } },
     enableHover: { control: { type: 'boolean' } },
     hoverText: { control: { type: 'text' } },
   },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    unnnicDataArea,
-    unnnicButton,
-  },
-
-  data() {
-    return {
-      slotStyle: {
-        display: 'flex',
-        gap: `${0.5 * unnnicFontSize}px`,
-        color: 'red',
-      },
-      linkStyle: {
-        color: 'DimGray',
+  render: (args) => ({
+    components: {
+      UnnnicDataArea,
+      UnnnicButton,
+    },
+    setup() {
+      return { args };
+    },
+    methods: {
+      click() {
+        console.log('clicked');
       },
-    };
-  },
-
-  template: `
-    <div>
-      <unnnic-data-area v-bind="$props">
-        <template v-slot:links>
-          <div :style="slotStyle">
-            <a href="#" :style="linkStyle">Link1</a>
-            <a href="#" :style="linkStyle">Link2</a>
-          </div>
-        </template>
-
-        <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>
-  `,
-
-  methods: {
-    click() {
-      console.log('clicked');
     },
-  },
-});
-
-export const Default = Template.bind({});
+    data() {
+      return {
+        slotStyle: {
+          display: 'flex',
+          gap: `${0.5 * unnnicFontSize}px`,
+          color: 'red',
+        },
+        linkStyle: {
+          color: 'DimGray',
+        },
+      };
+    },
+    template: `
+      <div>
+        <unnnic-data-area v-bind="args">
+          <template #links>
+            <div :style="slotStyle">
+              <a href="#" :style="linkStyle">Link1</a>
+              <a href="#" :style="linkStyle">Link2</a>
+            </div>
+          </template>
+  
+          <template #buttons>
+            <div :style="slotStyle">
+              <unnnic-button
+                size="small"
+                type="secondary"
+                iconCenter="copy-paste-1"
+              />
+              <unnnic-button
+                size="small"
+                type="secondary"
+                iconCenter="button-refresh-arrows-1"
+              />
+            </div>
+          </template>
+        </unnnic-data-area>
+      </div>
+    `,
+  }),
+};
 
-Default.args = {
-  title: 'Title text',
-  text: '1e65416859c4cdff11cf94a70ce7395eba0f494d',
+export const Default = {
+  args: {
+    title: 'Title text',
+    text: '1e65416859c4cdff11cf94a70ce7395eba0f494d',
+  },
 };

package/src/stories/DateFilter.stories.js

@@ -1,8 +1,8 @@
-import unnnicDateFilter from '../components/DateFilter/DateFilter.vue';
+import UnnnicDateFilter from '../components/DateFilter/DateFilter.vue';
 
 export default {
   title: 'Form/DateFilter',
-  component: unnnicDateFilter,
+  component: UnnnicDateFilter,
   argTypes: {
     dateFormat: { control: { type: 'text' } },
     startDate: { control: { type: 'date' } },
@@ -10,14 +10,9 @@ export default {
   },
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicDateFilter },
-  template: '<unnnic-date-filter v-bind="$props"/>',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  dateFormat: 'DD/MM/YYYY',
-  placeholder: 'DD/MM/YYYY ~ DD/MM/YYYY',
+export const Default = {
+  args: {
+    dateFormat: 'DD/MM/YYYY',
+    placeholder: 'DD/MM/YYYY ~ DD/MM/YYYY',
+  },
 };

package/src/stories/DatePicker.stories.js

@@ -1,8 +1,8 @@
-import unnnicDatePicker from '../components/DatePicker/DatePicker.vue';
+import UnnnicDatePicker from '../components/DatePicker/DatePicker.vue';
 
 export default {
   title: 'example/DatePicker',
-  component: unnnicDatePicker,
+  component: UnnnicDatePicker,
   argTypes: {
     type: {
       control: {
@@ -24,71 +24,53 @@ export default {
   },
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    unnnicDatePicker,
-  },
-
-  data() {
-    return {};
+export const Default = {
+  args: {
+    size: 'large',
+    clearLabel: 'Limpar',
+    actionLabel: 'Filtrar',
+    months: [
+      'Janeiro',
+      'Fevereiro',
+      'Março',
+      'Abril',
+      'Maio',
+      'Junho',
+      'Julho',
+      'Agosto',
+      'Setembro',
+      'Outubro',
+      'Novembro',
+      'Dezembro',
+    ],
+    days: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
+    initialStartDate: '12-01-2021',
+    initialEndDate: '12-01-2021',
+    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',
+      },
+    ],
   },
-
-  template: `
-    <div>
-      <unnnic-date-picker v-bind="$props" initial-start-date="12-01-2021" initial-end-date="12-31-2021"></unnnic-date-picker>
-    </div>
-  `,
-
-  methods: {},
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  size: 'large',
-  clearLabel: 'Limpar',
-  actionLabel: 'Filtrar',
-  months: [
-    'Janeiro',
-    'Fevereiro',
-    'Março',
-    'Abril',
-    'Maio',
-    'Junho',
-    'Julho',
-    'Agosto',
-    'Setembro',
-    'Outubro',
-    'Novembro',
-    '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',
-    },
-  ],
 };

package/src/stories/Disclaimer.stories.js

@@ -1,37 +1,22 @@
-import unnnicDisclaimer from '../components/Disclaimer/Disclaimer.vue';
+import UnnnicDisclaimer from '../components/Disclaimer/Disclaimer.vue';
 import icons from '../utils/iconList';
 import colors from '../utils/colorsList';
 
 export default {
-    title: 'Example/Disclaimer',
-    component: unnnicDisclaimer,
-    args: {},
-    argTypes: {
-        text: { control: { type: 'text' } },
-        icon: { options: icons, control: { type: 'select', } },
-        iconColor: { options: colors, control: { type: 'select', } },
-    },
+  title: 'Example/Disclaimer',
+  component: UnnnicDisclaimer,
+  args: {},
+  argTypes: {
+    text: { control: { type: 'text' } },
+    icon: { options: icons, control: { type: 'select' } },
+    iconColor: { options: colors, control: { type: 'select' } },
+  },
 };
 
-const Template = (args) => ({
-    components: {
-        unnnicDisclaimer,
-    },
-    setup() {
-        return { args };
-    },
-    props: Object.keys(args),
-    template: `
-     <div>
-       <unnnic-disclaimer v-bind="args" />
-     </div>
-    `,
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
+export const Default = {
+  args: {
     text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
     icon: 'alert-circle-1-1',
     iconColor: 'feedback-yellow',
+  },
 };