@weni/unnnic-system 2.0.16 → 2.0.17

package/src/stories/Drawer.stories.js

@@ -1,5 +1,5 @@
-import unnnicDrawer from '../components/Drawer/Drawer.vue';
-import unnnicButton from '../components/Button/Button.vue';
+import UnnnicDrawer from '../components/Drawer/Drawer.vue';
+import UnnnicButton from '../components/Button/Button.vue';
 
 const primaryButtonTypeOptions = [
   'primary',
@@ -12,7 +12,7 @@ const primaryButtonTypeOptions = [
 
 export default {
   title: 'Example/Drawer',
-  component: unnnicDrawer,
+  component: UnnnicDrawer,
   argTypes: {
     title: { control: { type: 'text' } },
     description: { control: { type: 'text' } },
@@ -29,122 +29,128 @@ export default {
     modelValue: { control: { type: 'boolean' } },
     wide: { control: { type: 'boolean' } },
   },
-};
-
-const Template = (args) => ({
-  props: Object.keys(args),
-  setup() {
-    return { args };
-  },
-  components: { unnnicDrawer, unnnicButton },
-  data() {
-    return {
-      opened: false,
-    };
-  },
-  methods: {
-    primaryClick() {
-      console.log('primaryClick');
+  render: (args) => ({
+    setup() {
+      return { args };
     },
-    secondaryClick() {
-      console.log('secondaryClick');
+    components: { UnnnicDrawer, UnnnicButton },
+    data() {
+      return {
+        opened: false,
+      };
     },
-  },
-  template: `
-  <div>
-    <pre>v-model: {{ opened }}</pre>
-    <button @click="opened = !opened">Change</button>
-    <unnnic-drawer v-bind="args" v-model="opened" @close="opened = false" @primaryButtonClick="primaryClick" @secondaryButtonClick="secondaryClick">
-      <template #content>
-        <p style="padding: 0; margin:0;">Conteúdo</p>
-      </template>
-    </unnnic-drawer>
-  </div>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  title: 'Title',
-  description: 'Description',
-  primaryButtonText: 'Confirmar',
-  secondaryButtonText: 'Cancelar',
+    methods: {
+      primaryClick() {
+        console.log('primaryClick');
+      },
+      secondaryClick() {
+        console.log('secondaryClick');
+      },
+    },
+    template: `
+      <div>
+        <pre>v-model: {{ opened }}</pre>
+        <button @click="opened = !opened">Change</button>
+        <unnnic-drawer v-bind="args" v-model="opened" @close="opened = false" @primaryButtonClick="primaryClick" @secondaryButtonClick="secondaryClick">
+          <template #content>
+            <p style="padding: 0; margin:0;">Conteúdo</p>
+          </template>
+        </unnnic-drawer>
+      </div>
+    `,
+  }),
 };
 
-export const Wide = Template.bind({});
-Wide.args = {
-  title: 'Title',
-  description: 'Description',
-  primaryButtonText: 'Confirmar',
-  secondaryButtonText: 'Cancelar',
-  wide: true,
+export const Default = {
+  args: {
+    title: 'Title',
+    description: 'Description',
+    primaryButtonText: 'Confirmar',
+    secondaryButtonText: 'Cancelar',
+  },
 };
 
-const TemplateOveflowed = (args) => ({
-  props: Object.keys(args),
-  components: { unnnicDrawer, unnnicButton },
-  setup() {
-    return { args };
-  },
-  data() {
-    return {
-      opened: false,
-    };
+export const Wide = {
+  args: {
+    title: 'Title',
+    description: 'Description',
+    primaryButtonText: 'Confirmar',
+    secondaryButtonText: 'Cancelar',
+    wide: true,
   },
-  template: `
-  <div>
-    <pre>v-model: {{ opened }}</pre>
-    <button @click="opened = !opened">Change</button>
-    <unnnic-drawer v-bind="args" v-model="opened" @close="opened = false">
-      <template #content>
-        <p style="padding: 0; margin:0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
-      </template>
-    </unnnic-drawer>
-  </div>
-  `,
-});
-
-export const ContentOverflowed = TemplateOveflowed.bind({});
-ContentOverflowed.args = {
-  title: 'Title',
-  description: 'Description',
-  primaryButtonText: 'Confirmar',
-  secondaryButtonText: 'Cancelar',
-  wide: true,
 };
 
-const TemplateVideo = (args) => ({
-  props: Object.keys(args),
-  components: { unnnicDrawer, unnnicButton },
-  setup() {
-    return { args };
-  },
-  data() {
-    return {
-      opened: false,
-    };
+export const ContentOverflowed = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UnnnicDrawer, UnnnicButton },
+    data() {
+      return {
+        opened: false,
+      };
+    },
+    methods: {
+      primaryClick() {
+        console.log('primaryClick');
+      },
+      secondaryClick() {
+        console.log('secondaryClick');
+      },
+    },
+    template: `
+      <div>
+        <pre>v-model: {{ opened }}</pre>
+        <button @click="opened = !opened">Change</button>
+        <unnnic-drawer v-bind="args" v-model="opened" @close="opened = false">
+          <template #content>
+            <p style="padding: 0; margin:0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
+          </template>
+        </unnnic-drawer>
+      </div>  
+    `,
+  }),
+  args: {
+    title: 'Title',
+    description: 'Description',
+    primaryButtonText: 'Confirmar',
+    secondaryButtonText: 'Cancelar',
+    wide: true,
   },
-  template: `
-  <div>
-    <pre>v-model: {{ opened }}</pre>
-    <button @click="opened = !opened">Change</button>
-    <unnnic-drawer v-bind="args" v-model="opened" @close="opened = false">
-      <template #content>
-        <iframe width="100%" height="315" src="https://www.youtube.com/embed/dD8ENnN-2CI?si=68dJEsG5FdiNaYvY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-      </template>
-    </unnnic-drawer>
-  </div>
-  `,
-});
+};
 
-export const ContentVideo = TemplateVideo.bind({});
-ContentVideo.args = {
-  title: 'Title',
-  description: 'Description',
-  wide: true,
+export const ContentVideo = {
+  render: (args) => ({
+    components: { UnnnicDrawer, UnnnicButton },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        opened: false,
+      };
+    },
+    template: `
+      <div>
+        <pre>v-model: {{ opened }}</pre>
+        <button @click="opened = !opened">Change</button>
+        <unnnic-drawer v-bind="args" v-model="opened" @close="opened = false">
+          <template #content>
+            <iframe width="100%" height="315" src="https://www.youtube.com/embed/dD8ENnN-2CI?si=68dJEsG5FdiNaYvY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+          </template>
+        </unnnic-drawer>
+      </div>
+    `,
+  }),
+  args: {
+    title: 'Title',
+    description: 'Description',
+    wide: true,
+  },
 };

package/src/stories/Dropdown.stories.js

@@ -1,10 +1,10 @@
-import unnnicDropdown from '../components/Dropdown/Dropdown.vue';
-import unnnicDropdownItem from '../components/Dropdown/DropdownItem.vue';
-import unnnicButton from '../components/Button/Button.vue';
+import UnnnicDropdown from '../components/Dropdown/Dropdown.vue';
+import UnnnicDropdownItem from '../components/Dropdown/DropdownItem.vue';
+import UnnnicButton from '../components/Button/Button.vue';
 
 export default {
   title: 'example/Dropdown',
-  component: unnnicDropdown,
+  component: UnnnicDropdown,
   argTypes: {
     position: {
       control: {
@@ -13,13 +13,23 @@ export default {
       },
     },
   },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UnnnicDropdown, UnnnicDropdownItem, UnnnicButton },
+    template: `
+      <unnnic-dropdown v-bind="args"> 
+        <template #trigger>
+          <unnnic-button text="click me"/>
+        </template>
+        <unnnic-dropdown-item> Item1 </unnnic-dropdown-item>
+        <unnnic-dropdown-item> Item2 </unnnic-dropdown-item>
+      </unnnic-dropdown>
+    `,
+  }),
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicDropdown, unnnicDropdownItem, unnnicButton },
-  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({});
+export const Default = {
+  args: {},
+};

package/src/stories/FormElement.stories.js

@@ -11,30 +11,25 @@ export default {
       },
     },
   },
+  render: (args) => ({
+    components: {
+      UnnnicFormElement,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <unnnic-form-element v-bind="args">
+        <input />
+      </unnnic-form-element>
+    `,
+  }),
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    UnnnicFormElement,
-  },
-
-  data() {
-    return {};
+export const Default = {
+  args: {
+    label: 'Name',
+    error: 'Error',
+    message: 'Message',
   },
-
-  template: `
-    <unnnic-form-element v-bind="$props">
-      <input />
-    </unnnic-form-element>
-  `,
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Name',
-  error: 'Error',
-  message: 'Message',
 };

package/src/stories/Grid.stories.js

@@ -12,14 +12,8 @@ export default {
     },
   },
 };
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Grid },
-  template: '<grid v-bind="$props" />',
-});
-
-export const grid = Template.bind({});
-grid.args = {
-  size: 'xs',
+export const grid = {
+  args: {
+    size: 'xs',
+  },
 };

package/src/stories/Icon.stories.js

@@ -1,4 +1,4 @@
-import unnnicIcon from '../components/Icon.vue';
+import UnnnicIcon from '../components/Icon.vue';
 import icons from '../utils/icons';
 
 const iconsOptions = Object.keys(icons);
@@ -95,7 +95,7 @@ const schemes = [
 
 export default {
   title: 'example/Icon',
-  component: unnnicIcon,
+  component: UnnnicIcon,
   argTypes: {
     scheme: { control: { type: 'select', options: schemes } },
     size: {

package/src/stories/IconLoading.stories.js

@@ -1,4 +1,4 @@
-import unnnicIconLoading from '../components/IconLoading/IconLoading.vue';
+import UnnnicIconLoading from '../components/IconLoading/IconLoading.vue';
 
 const schemes = [
   'background-solo',
@@ -92,7 +92,7 @@ const schemes = [
 
 export default {
   title: 'example/IconLoading',
-  component: unnnicIconLoading,
+  component: UnnnicIconLoading,
   argTypes: {
     scheme: { control: { type: 'select', options: schemes } },
     size: {
@@ -115,12 +115,6 @@ export default {
   },
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicIconLoading },
-  template: `
-    <unnnic-icon-loading v-bind="$props" />
-  `,
-});
-
-export const Default = Template.bind({});
+export const Default = {
+  args: {},
+};

package/src/stories/ImportCard.stories.js

@@ -1,5 +1,5 @@
 import i18n from '../utils/plugins/i18n';
-import unnnicImportCard from '../components/ImportCard/ImportCard.vue';
+import UnnnicImportCard from '../components/ImportCard/ImportCard.vue';
 
 import { setup } from '@storybook/vue3';
 
@@ -9,7 +9,7 @@ setup((app) => {
 
 export default {
   title: 'Example/ImportCard',
-  component: unnnicImportCard,
+  component: UnnnicImportCard,
   argTypes: {
     title: { control: { type: 'text' } },
     subtitle: { control: { type: 'text' } },
@@ -20,21 +20,14 @@ export default {
     acceptedFormats: { control: { type: 'text' } },
   },
 };
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicImportCard },
-
-  template: '<unnnic-import-card v-bind="$props" />',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  title: 'file.txt',
-  subtitle: 'file.txt',
-  importProgress: 24,
-  isImporting: true,
-  canImport: true,
-  canDelete: true,
-  acceptedFormats: '.txt',
+export const Default = {
+  args: {
+    title: 'file.txt',
+    subtitle: 'file.txt',
+    importProgress: 24,
+    isImporting: true,
+    canImport: true,
+    canDelete: true,
+    acceptedFormats: '.txt',
+  },
 };

package/src/stories/Indicator.stories.js

@@ -1,23 +1,18 @@
-import unnnicIndicator from '../components/Indicator/Indicator.vue';
+import UnnnicIndicator from '../components/Indicator/Indicator.vue';
 
 export default {
   title: 'Example/Indicator',
-  component: unnnicIndicator,
+  component: UnnnicIndicator,
   argTypes: {
     numberOfSteps: { control: { type: 'number' } },
     currentStep: { control: { type: 'number' } },
   },
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicIndicator },
-  template: '<unnnic-indicator v-bind="$props"/>',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  numberOfSteps: 3,
-  currentStep: 2,
-  titles: ['Indicator-1', 'Indicator-2', 'Indicator-3'],
+export const Default = {
+  args: {
+    numberOfSteps: 3,
+    currentStep: 2,
+    titles: ['Indicator-1', 'Indicator-2', 'Indicator-3'],
+  },
 };

package/src/stories/InputDatePicker.stories.js

@@ -1,8 +1,8 @@
-import unnnicInputDatePicker from '../components/InputDatePicker/InputDatePicker.vue';
+import UnnnicInputDatePicker from '../components/InputDatePicker/InputDatePicker.vue';
 
 export default {
   title: 'Form/InputDatePicker',
-  component: unnnicInputDatePicker,
+  component: UnnnicInputDatePicker,
   argTypes: {
     type: {
       control: {
@@ -17,37 +17,32 @@ export default {
       },
     },
   },
+  render: (args) => ({
+    components: {
+      UnnnicInputDatePicker,
+    },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        dates: {
+          start: null,
+          end: null,
+        },
+      };
+    },
+    template: `
+      <div>
+        <!--<pre>v-model: {{ dates }}</pre>-->
+        <unnnic-input-date-picker v-bind="args" v-model="dates" />
+      </div>
+    `,
+  }),
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    unnnicInputDatePicker,
+export const Default = {
+  args: {
+    size: 'sm',
   },
-
-  data() {
-    return {
-      dates: {
-        start: null,
-        end: null,
-      },
-    };
-  },
-
-  template: `
-    <div>
-      <!--<pre>v-model: {{ dates }}</pre>-->
-      <unnnic-input-date-picker v-bind="$props" v-model="dates">
-      </unnnic-input-date-picker>
-    </div>
-  `,
-
-  methods: {},
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  size: 'sm',
 };

package/src/stories/LanguageSelect.stories.js

@@ -1,8 +1,8 @@
-import unnnicLanguageSelect from '../components/Dropdown/LanguageSelect.vue';
+import UnnnicLanguageSelect from '../components/Dropdown/LanguageSelect.vue';
 
 export default {
   title: 'example/LanguageSelect',
-  component: unnnicLanguageSelect,
+  component: UnnnicLanguageSelect,
   argTypes: {
     value: { control: { type: 'select', options: ['pt-br', 'en'] } },
     position: {
@@ -11,20 +11,16 @@ export default {
   },
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicLanguageSelect },
-  template: '<unnnic-language-select v-bind="$props" />',
-});
-
-export const Normal = Template.bind({});
-Normal.args = {
-  value: 'pt-br',
-  position: 'bottom',
+export const Normal = {
+  args: {
+    value: 'pt-br',
+    position: 'bottom',
+  },
 };
 
-export const Contracted = Template.bind({});
-Contracted.args = {
-  value: 'pt-br',
-  contracted: true,
+export const Contracted = {
+  args: {
+    value: 'pt-br',
+    contracted: true,
+  },
 };