@weni/unnnic-system 1.16.17 → 1.16.19-develop.0

package/src/stories/DatePicker.stories.js

@@ -1,87 +1,87 @@
-import unnnicDatePicker from '../components/DatePicker/DatePicker.vue';
-
-export default {
-  title: 'example/DatePicker',
-  component: unnnicDatePicker,
-  argTypes: {
-    type: {
-      control: {
-        type: 'select',
-        options: ['day', 'month', 'year'],
-      },
-    },
-    size: {
-      control: {
-        type: 'select',
-        options: ['small', 'large'],
-      },
-    },
-    months: { control: { type: 'array' } },
-    days: { control: { type: 'array' } },
-    options: { control: { type: 'array' } },
-    clearLabel: { control: { type: 'text' } },
-    actionLabel: { control: { type: 'text' } },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    unnnicDatePicker,
-  },
-
-  data() {
-    return {};
-  },
-
-  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',
-  }],
-};
+import unnnicDatePicker from '../components/DatePicker/DatePicker.vue';
+
+export default {
+  title: 'example/DatePicker',
+  component: unnnicDatePicker,
+  argTypes: {
+    type: {
+      control: {
+        type: 'select',
+        options: ['day', 'month', 'year'],
+      },
+    },
+    size: {
+      control: {
+        type: 'select',
+        options: ['small', 'large'],
+      },
+    },
+    months: { control: { type: 'array' } },
+    days: { control: { type: 'array' } },
+    options: { control: { type: 'array' } },
+    clearLabel: { control: { type: 'text' } },
+    actionLabel: { control: { type: 'text' } },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+
+  components: {
+    unnnicDatePicker,
+  },
+
+  data() {
+    return {};
+  },
+
+  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/Dropdown.stories.js

@@ -1,19 +1,19 @@
-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,
-  argTypes: {
-    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>',
-});
-
-export const Normal = Template.bind({});
+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,
+  argTypes: {
+    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>',
+});
+
+export const Normal = Template.bind({});

package/src/stories/DropdownSkeleton.stories.js

@@ -1,15 +1,15 @@
-import unnnicDropdownSkeleton from '../components/Dropdown/DropdownSkeleton.vue';
-
-export default {
-  title: 'Example/DropdownSkeleton',
-  component: unnnicDropdownSkeleton,
-  argTypes: {},
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicDropdownSkeleton },
-  template: '<div><unnnic-dropdown-skeleton v-bind="$props">See the message<div slot="inside">Hello World!</div></unnnic-dropdown-skeleton></div>',
-});
-
-export const Normal = Template.bind({});
+import unnnicDropdownSkeleton from '../components/Dropdown/DropdownSkeleton.vue';
+
+export default {
+  title: 'Example/DropdownSkeleton',
+  component: unnnicDropdownSkeleton,
+  argTypes: {},
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { unnnicDropdownSkeleton },
+  template: '<div><unnnic-dropdown-skeleton v-bind="$props">See the message<div slot="inside">Hello World!</div></unnnic-dropdown-skeleton></div>',
+});
+
+export const Normal = Template.bind({});

package/src/stories/Font.stories.mdx

@@ -1,80 +1,80 @@
-import { Meta, Preview } from '@storybook/addon-docs/blocks';
-
-<Meta title="Font/Introduction" />
-
-# Unnnic Font
-
-## Primary
-
-<Preview>
-  <div class="unnnic-font">Lorem ipsum dolor sit amet.</div>
-</Preview>
-
-<ul>
-  <li>family-primary (Aleo)</li>
-  <li>weight-regular (400)</li>
-</ul>
-
-## Secondary
-
-<Preview>
-  <div class="unnnic-font secondary">Lorem ipsum dolor sit amet.</div>
-</Preview>
-
-<ul>
-  <li><s>family-primary (Aleo)</s></li>
-  <li>weight-regular (400)</li>
-  <li>family-secondary (Lato)</li>
-</ul>
-
-## Sizes
-
-<Preview>
-  <div>
-    <div class="unnnic-font body-sm">body-sm Lorem ipsum dolor sit amet.</div>
-    <div class="unnnic-font body-md">body-md Lorem ipsum dolor sit amet.</div>
-    <div class="unnnic-font body-gt">body-gt Lorem ipsum dolor sit amet.</div>
-    <div class="unnnic-font body-lg">body-lg Lorem ipsum dolor sit amet.</div>
-    <div class="unnnic-font title-sm">title-sm Lorem ipsum dolor sit amet.</div>
-    <div class="unnnic-font title-md">title-md Lorem ipsum dolor sit amet.</div>
-    <div class="unnnic-font title-lg">title-lg Lorem ipsum dolor sit amet.</div>
-    <div class="unnnic-font h4">h4 Lorem ipsum.</div>
-    <div class="unnnic-font h3">h3 Lorem ipsum.</div>
-    <div class="unnnic-font h2">h2 Lorem ipsum.</div>
-    <div class="unnnic-font h1">h1 Lorem ipsum.</div>
-  </div>
-</Preview>
-
-<ul>
-  <li>family-primary (Aleo)</li>
-  <li>weight-regular (400)</li>
-  <li>body-sm (8px) line-height-md (16px)</li>
-  <li>body-md (12px) line-height-md (20px)</li>
-  <li>body-gt (14px) line-height-md (22px)</li>
-  <li>body-lg (16px) line-height-md (24px)</li>
-  <li>title-sm (20px) line-height-md (28px)</li>
-  <li>title-md (24px) line-height-md (32px)</li>
-  <li>title-lg (32px) line-height-md (40px)</li>
-  <li>h4 (40px) line-height-md (48px)</li>
-  <li>h3 (48px) line-height-md (56px)</li>
-  <li>h2 (56px) line-height-md (64px)</li>
-  <li>h1 (72px) line-height-md (80px)</li>
-</ul>
-
-## Weights
-
-<Preview>
-  <div>
-    <div class="unnnic-font black">body-sm Lorem ipsum dolor sit amet.</div>
-    <div class="unnnic-font bold">body-md Lorem ipsum dolor sit amet.</div>
-    <div class="unnnic-font light">body-gt Lorem ipsum dolor sit amet.</div>
-  </div>
-</Preview>
-
-<ul>
-  <li>family-primary (Aleo)</li>
-  <li><s>weight-regular (400)</s></li>
-  <li>weight-black (900)</li>
-  <li>weight-bold (700)</li>
-  <li>weight-light (300)</li>
-</ul>
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+<Meta title="Font/Introduction" />
+
+# Unnnic Font
+
+## Primary
+
+<Preview>
+  <div class="unnnic-font">Lorem ipsum dolor sit amet.</div>
+</Preview>
+
+<ul>
+  <li>family-primary (Aleo)</li>
+  <li>weight-regular (400)</li>
+</ul>
+
+## Secondary
+
+<Preview>
+  <div class="unnnic-font secondary">Lorem ipsum dolor sit amet.</div>
+</Preview>
+
+<ul>
+  <li><s>family-primary (Aleo)</s></li>
+  <li>weight-regular (400)</li>
+  <li>family-secondary (Lato)</li>
+</ul>
+
+## Sizes
+
+<Preview>
+  <div>
+    <div class="unnnic-font body-sm">body-sm Lorem ipsum dolor sit amet.</div>
+    <div class="unnnic-font body-md">body-md Lorem ipsum dolor sit amet.</div>
+    <div class="unnnic-font body-gt">body-gt Lorem ipsum dolor sit amet.</div>
+    <div class="unnnic-font body-lg">body-lg Lorem ipsum dolor sit amet.</div>
+    <div class="unnnic-font title-sm">title-sm Lorem ipsum dolor sit amet.</div>
+    <div class="unnnic-font title-md">title-md Lorem ipsum dolor sit amet.</div>
+    <div class="unnnic-font title-lg">title-lg Lorem ipsum dolor sit amet.</div>
+    <div class="unnnic-font h4">h4 Lorem ipsum.</div>
+    <div class="unnnic-font h3">h3 Lorem ipsum.</div>
+    <div class="unnnic-font h2">h2 Lorem ipsum.</div>
+    <div class="unnnic-font h1">h1 Lorem ipsum.</div>
+  </div>
+</Preview>
+
+<ul>
+  <li>family-primary (Aleo)</li>
+  <li>weight-regular (400)</li>
+  <li>body-sm (8px) line-height-md (16px)</li>
+  <li>body-md (12px) line-height-md (20px)</li>
+  <li>body-gt (14px) line-height-md (22px)</li>
+  <li>body-lg (16px) line-height-md (24px)</li>
+  <li>title-sm (20px) line-height-md (28px)</li>
+  <li>title-md (24px) line-height-md (32px)</li>
+  <li>title-lg (32px) line-height-md (40px)</li>
+  <li>h4 (40px) line-height-md (48px)</li>
+  <li>h3 (48px) line-height-md (56px)</li>
+  <li>h2 (56px) line-height-md (64px)</li>
+  <li>h1 (72px) line-height-md (80px)</li>
+</ul>
+
+## Weights
+
+<Preview>
+  <div>
+    <div class="unnnic-font black">body-sm Lorem ipsum dolor sit amet.</div>
+    <div class="unnnic-font bold">body-md Lorem ipsum dolor sit amet.</div>
+    <div class="unnnic-font light">body-gt Lorem ipsum dolor sit amet.</div>
+  </div>
+</Preview>
+
+<ul>
+  <li>family-primary (Aleo)</li>
+  <li><s>weight-regular (400)</s></li>
+  <li>weight-black (900)</li>
+  <li>weight-bold (700)</li>
+  <li>weight-light (300)</li>
+</ul>

package/src/stories/FormElement.stories.js

@@ -1,40 +1,40 @@
-import UnnnicFormElement from '../components/FormElement/FormElement.vue';
-
-export default {
-  title: 'Form/FormElement',
-  component: UnnnicFormElement,
-  argTypes: {
-    size: {
-      control: {
-        type: 'select',
-        options: ['sm', 'md'],
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    UnnnicFormElement,
-  },
-
-  data() {
-    return {};
-  },
-
-  template: `
-    <unnnic-form-element v-bind="$props">
-      <input />
-    </unnnic-form-element>
-  `,
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Name',
-  error: 'Error',
-  message: 'Message',
-};
+import UnnnicFormElement from '../components/FormElement/FormElement.vue';
+
+export default {
+  title: 'Form/FormElement',
+  component: UnnnicFormElement,
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+        options: ['sm', 'md'],
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+
+  components: {
+    UnnnicFormElement,
+  },
+
+  data() {
+    return {};
+  },
+
+  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

@@ -1,20 +1,20 @@
-import Grid from '../components/grid/Grid.vue';
-
-export default {
-  title: 'Example/Grid',
-  component: Grid,
-  argTypes: {
-    size: { control: { type: 'select', options: ['xs', 'sm', 'md', 'lg', 'xl', 'giant'] } },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Grid },
-  template: '<grid v-bind="$props" />',
-});
-
-export const grid = Template.bind({});
-grid.args = {
-  size: 'xs',
-};
+import Grid from '../components/grid/Grid.vue';
+
+export default {
+  title: 'Example/Grid',
+  component: Grid,
+  argTypes: {
+    size: { control: { type: 'select', options: ['xs', 'sm', 'md', 'lg', 'xl', 'giant'] } },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { Grid },
+  template: '<grid v-bind="$props" />',
+});
+
+export const grid = Template.bind({});
+grid.args = {
+  size: 'xs',
+};

package/src/stories/Icon.stories.js

@@ -1,64 +1,64 @@
-import unnnicIcon from '../components/Icon.vue';
-import icons from '../utils/icons';
-
-const iconsOptions = Object.keys(icons);
-
-const schemes = [
-  'feedback-red',
-  'feedback-green',
-  'feedback-yellow',
-  'feedback-blue',
-  'feedback-grey',
-  'aux-blue',
-  'aux-purple',
-  'aux-orange',
-  'aux-lemon',
-  'aux-pink',
-  'brand-weni',
-  'brand-weni-soft',
-  'neutral-clean',
-  'neutral-cleanest',
-  'neutral-dark',
-  'neutral-soft',
-  'neutral-darkest',
-];
-
-export default {
-  title: 'example/Icon',
-  component: unnnicIcon,
-  argTypes: {
-    icon: { control: { type: 'select', options: iconsOptions } },
-    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: { unnnicIcon },
-  template: `
-    <unnnic-icon v-bind="$props" />
-  `,
-});
-
-export const Normal = Template.bind({});
-
-Normal.args = {
-  icon: iconsOptions[0],
-};
+import unnnicIcon from '../components/Icon.vue';
+import icons from '../utils/icons';
+
+const iconsOptions = Object.keys(icons);
+
+const schemes = [
+  'feedback-red',
+  'feedback-green',
+  'feedback-yellow',
+  'feedback-blue',
+  'feedback-grey',
+  'aux-blue',
+  'aux-purple',
+  'aux-orange',
+  'aux-lemon',
+  'aux-pink',
+  'brand-weni',
+  'brand-weni-soft',
+  'neutral-clean',
+  'neutral-cleanest',
+  'neutral-dark',
+  'neutral-soft',
+  'neutral-darkest',
+];
+
+export default {
+  title: 'example/Icon',
+  component: unnnicIcon,
+  argTypes: {
+    icon: { control: { type: 'select', options: iconsOptions } },
+    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: { unnnicIcon },
+  template: `
+    <unnnic-icon v-bind="$props" />
+  `,
+});
+
+export const Normal = Template.bind({});
+
+Normal.args = {
+  icon: iconsOptions[0],
+};