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

package/src/stories/Colors.stories.mdx

@@ -1,91 +1,91 @@
-import { Meta, Preview } from '@storybook/addon-docs/blocks';
-
-<Meta title="Colors/Introduction" />
-
-# Colors
-
-## Text
-
-<Preview>
-  <div>
-    <div class="color-background-solo bg-neutral-black">color-background-solo</div>
-    <div class="color-background-sky bg-neutral-black">color-background-sky</div>
-    <div class="color-background-grass bg-neutral-black">color-background-grass</div>
-    <div class="color-background-carpet bg-neutral-black">color-background-carpet</div>
-    <div class="color-background-snow bg-neutral-black">color-background-snow</div>
-    <div class="color-neutral-black">color-neutral-black</div>
-    <div class="color-neutral-darkest">color-neutral-darkest</div>
-    <div class="color-neutral-dark">color-neutral-dark</div>
-    <div class="color-neutral-cloudy">color-neutral-cloudy</div>
-    <div class="color-neutral-cleanest bg-neutral-black">color-neutral-cleanest</div>
-    <div class="color-neutral-clean bg-neutral-black">color-neutral-clean</div>
-    <div class="color-neutral-soft bg-neutral-black">color-neutral-soft</div>
-    <div class="color-neutral-lightest bg-neutral-black">color-neutral-lightest</div>
-    <div class="color-neutral-light bg-neutral-black">color-neutral-light</div>
-    <div class="color-neutral-snow bg-neutral-black">color-neutral-snow</div>
-    <div class="color-feedback-red">color-feedback-red</div>
-    <div class="color-feedback-green">color-feedback-green</div>
-    <div class="color-feedback-yellow">color-feedback-yellow</div>
-    <div class="color-feedback-blue">color-feedback-blue</div>
-    <div class="color-feedback-grey bg-neutral-black">color-feedback-grey</div>
-    <div class="color-aux-blue">color-aux-blue</div>
-    <div class="color-aux-purple">color-aux-purple</div>
-    <div class="color-aux-orange">color-aux-orange</div>
-    <div class="color-aux-lemon">color-aux-lemon</div>
-    <div class="color-aux-pink">color-aux-pink</div>
-    <div class="color-aux-baby-blue">color-aux-baby-blue</div>
-    <div class="color-aux-baby-yellow">color-aux-baby-yellow</div>
-    <div class="color-aux-baby-red">color-aux-baby-red</div>
-    <div class="color-aux-baby-green">color-aux-baby-green</div>
-    <div class="color-aux-baby-pink">color-aux-baby-pink</div>
-    <div class="color-brand-weni">color-brand-weni</div>
-    <div class="color-brand-weni-dark">color-brand-weni-dark</div>
-    <div class="color-brand-weni-soft">color-brand-weni-soft</div>
-    <div class="color-brand-sec-dark">color-brand-sec-dark</div>
-    <div class="color-brand-sec-soft">color-brand-sec-soft</div>
-    <div class="color-brand-sec bg-neutral-black">color-brand-sec</div>
-  </div>
-</Preview>
-
-## Background
-
-<Preview>
-  <div>
-    <div class="bg-background-solo">bg-background-solo</div>
-    <div class="bg-background-sky">bg-background-sky</div>
-    <div class="bg-background-grass">bg-background-grass</div>
-    <div class="bg-background-carpet">bg-background-carpet</div>
-    <div class="bg-background-snow">bg-background-snow</div>
-    <div class="bg-neutral-black">bg-neutral-black</div>
-    <div class="bg-neutral-darkest">bg-neutral-darkest</div>
-    <div class="bg-neutral-dark">bg-neutral-dark</div>
-    <div class="bg-neutral-cloudy">bg-neutral-cloudy</div>
-    <div class="bg-neutral-cleanest">bg-neutral-cleanest</div>
-    <div class="bg-neutral-clean">bg-neutral-clean</div>
-    <div class="bg-neutral-soft">bg-neutral-soft</div>
-    <div class="bg-neutral-lightest">bg-neutral-lightest</div>
-    <div class="bg-neutral-light">bg-neutral-light</div>
-    <div class="bg-neutral-snow">bg-neutral-snow</div>
-    <div class="bg-feedback-red">bg-feedback-red</div>
-    <div class="bg-feedback-green">bg-feedback-green</div>
-    <div class="bg-feedback-yellow">bg-feedback-yellow</div>
-    <div class="bg-feedback-blue">bg-feedback-blue</div>
-    <div class="bg-feedback-grey">bg-feedback-grey</div>
-    <div class="bg-aux-blue">bg-aux-blue</div>
-    <div class="bg-aux-purple">bg-aux-purple</div>
-    <div class="bg-aux-orange">bg-aux-orange</div>
-    <div class="bg-aux-lemon">bg-aux-lemon</div>
-    <div class="bg-aux-pink">bg-aux-pink</div>
-    <div class="bg-aux-baby-blue">bg-aux-baby-blue</div>
-    <div class="bg-aux-baby-yellow">bg-aux-baby-yellow</div>
-    <div class="bg-aux-baby-red">bg-aux-baby-red</div>
-    <div class="bg-aux-baby-green">bg-aux-baby-green</div>
-    <div class="bg-aux-baby-pink">bg-aux-baby-pink</div>
-    <div class="bg-brand-weni">bg-brand-weni</div>
-    <div class="bg-brand-weni-dark">bg-brand-weni-dark</div>
-    <div class="bg-brand-weni-soft">bg-brand-weni-soft</div>
-    <div class="bg-brand-sec-dark">bg-brand-sec-dark</div>
-    <div class="bg-brand-sec-soft">bg-brand-sec-soft</div>
-    <div class="bg-brand-sec">bg-brand-sec</div>
-  </div>
-</Preview>
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+<Meta title="Colors/Introduction" />
+
+# Colors
+
+## Text
+
+<Preview>
+  <div>
+    <div class="color-background-solo bg-neutral-black">color-background-solo</div>
+    <div class="color-background-sky bg-neutral-black">color-background-sky</div>
+    <div class="color-background-grass bg-neutral-black">color-background-grass</div>
+    <div class="color-background-carpet bg-neutral-black">color-background-carpet</div>
+    <div class="color-background-snow bg-neutral-black">color-background-snow</div>
+    <div class="color-neutral-black">color-neutral-black</div>
+    <div class="color-neutral-darkest">color-neutral-darkest</div>
+    <div class="color-neutral-dark">color-neutral-dark</div>
+    <div class="color-neutral-cloudy">color-neutral-cloudy</div>
+    <div class="color-neutral-cleanest bg-neutral-black">color-neutral-cleanest</div>
+    <div class="color-neutral-clean bg-neutral-black">color-neutral-clean</div>
+    <div class="color-neutral-soft bg-neutral-black">color-neutral-soft</div>
+    <div class="color-neutral-lightest bg-neutral-black">color-neutral-lightest</div>
+    <div class="color-neutral-light bg-neutral-black">color-neutral-light</div>
+    <div class="color-neutral-snow bg-neutral-black">color-neutral-snow</div>
+    <div class="color-feedback-red">color-feedback-red</div>
+    <div class="color-feedback-green">color-feedback-green</div>
+    <div class="color-feedback-yellow">color-feedback-yellow</div>
+    <div class="color-feedback-blue">color-feedback-blue</div>
+    <div class="color-feedback-grey bg-neutral-black">color-feedback-grey</div>
+    <div class="color-aux-blue">color-aux-blue</div>
+    <div class="color-aux-purple">color-aux-purple</div>
+    <div class="color-aux-orange">color-aux-orange</div>
+    <div class="color-aux-lemon">color-aux-lemon</div>
+    <div class="color-aux-pink">color-aux-pink</div>
+    <div class="color-aux-baby-blue">color-aux-baby-blue</div>
+    <div class="color-aux-baby-yellow">color-aux-baby-yellow</div>
+    <div class="color-aux-baby-red">color-aux-baby-red</div>
+    <div class="color-aux-baby-green">color-aux-baby-green</div>
+    <div class="color-aux-baby-pink">color-aux-baby-pink</div>
+    <div class="color-brand-weni">color-brand-weni</div>
+    <div class="color-brand-weni-dark">color-brand-weni-dark</div>
+    <div class="color-brand-weni-soft">color-brand-weni-soft</div>
+    <div class="color-brand-sec-dark">color-brand-sec-dark</div>
+    <div class="color-brand-sec-soft">color-brand-sec-soft</div>
+    <div class="color-brand-sec bg-neutral-black">color-brand-sec</div>
+  </div>
+</Preview>
+
+## Background
+
+<Preview>
+  <div>
+    <div class="bg-background-solo">bg-background-solo</div>
+    <div class="bg-background-sky">bg-background-sky</div>
+    <div class="bg-background-grass">bg-background-grass</div>
+    <div class="bg-background-carpet">bg-background-carpet</div>
+    <div class="bg-background-snow">bg-background-snow</div>
+    <div class="bg-neutral-black">bg-neutral-black</div>
+    <div class="bg-neutral-darkest">bg-neutral-darkest</div>
+    <div class="bg-neutral-dark">bg-neutral-dark</div>
+    <div class="bg-neutral-cloudy">bg-neutral-cloudy</div>
+    <div class="bg-neutral-cleanest">bg-neutral-cleanest</div>
+    <div class="bg-neutral-clean">bg-neutral-clean</div>
+    <div class="bg-neutral-soft">bg-neutral-soft</div>
+    <div class="bg-neutral-lightest">bg-neutral-lightest</div>
+    <div class="bg-neutral-light">bg-neutral-light</div>
+    <div class="bg-neutral-snow">bg-neutral-snow</div>
+    <div class="bg-feedback-red">bg-feedback-red</div>
+    <div class="bg-feedback-green">bg-feedback-green</div>
+    <div class="bg-feedback-yellow">bg-feedback-yellow</div>
+    <div class="bg-feedback-blue">bg-feedback-blue</div>
+    <div class="bg-feedback-grey">bg-feedback-grey</div>
+    <div class="bg-aux-blue">bg-aux-blue</div>
+    <div class="bg-aux-purple">bg-aux-purple</div>
+    <div class="bg-aux-orange">bg-aux-orange</div>
+    <div class="bg-aux-lemon">bg-aux-lemon</div>
+    <div class="bg-aux-pink">bg-aux-pink</div>
+    <div class="bg-aux-baby-blue">bg-aux-baby-blue</div>
+    <div class="bg-aux-baby-yellow">bg-aux-baby-yellow</div>
+    <div class="bg-aux-baby-red">bg-aux-baby-red</div>
+    <div class="bg-aux-baby-green">bg-aux-baby-green</div>
+    <div class="bg-aux-baby-pink">bg-aux-baby-pink</div>
+    <div class="bg-brand-weni">bg-brand-weni</div>
+    <div class="bg-brand-weni-dark">bg-brand-weni-dark</div>
+    <div class="bg-brand-weni-soft">bg-brand-weni-soft</div>
+    <div class="bg-brand-sec-dark">bg-brand-sec-dark</div>
+    <div class="bg-brand-sec-soft">bg-brand-sec-soft</div>
+    <div class="bg-brand-sec">bg-brand-sec</div>
+  </div>
+</Preview>

package/src/stories/Comment.stories.js

@@ -1,59 +1,59 @@
-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 unnnicIconSvg from '../components/Icon.vue';
-
-export default {
-  title: 'Example/Comment',
-  component: unnnicComment,
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: {
-    unnnicComment,
-    unnnicButton,
-    unnnicDropdown,
-    unnnicDropdownItem,
-    unnnicIconSvg,
-  },
-  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"
-      />
-      <unnnic-dropdown-item>
-        <unnnic-button
-          type="terciary"
-          iconLeft="pencil-write-1"
-          text="Edit comment"
-          size="small"
-        />
-      </unnnic-dropdown-item>
-      <unnnic-dropdown-item>
-        <unnnic-button
-          type="terciary"
-          iconLeft="delete-1"
-          text="Delete Comment"
-          size="small"
-        />
-      </unnnic-dropdown-item>
-    </unnnic-dropdown>
-  </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',
-};
+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 unnnicIconSvg from '../components/Icon.vue';
+
+export default {
+  title: 'Example/Comment',
+  component: unnnicComment,
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: {
+    unnnicComment,
+    unnnicButton,
+    unnnicDropdown,
+    unnnicDropdownItem,
+    unnnicIconSvg,
+  },
+  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"
+      />
+      <unnnic-dropdown-item>
+        <unnnic-button
+          type="terciary"
+          iconLeft="pencil-write-1"
+          text="Edit comment"
+          size="small"
+        />
+      </unnnic-dropdown-item>
+      <unnnic-dropdown-item>
+        <unnnic-button
+          type="terciary"
+          iconLeft="delete-1"
+          text="Delete Comment"
+          size="small"
+        />
+      </unnnic-dropdown-item>
+    </unnnic-dropdown>
+  </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,75 +1,75 @@
-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,
-  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',
-      },
-    };
-  },
-
-  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>
-
-        <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>
-      </unnnic-data-area>
-    </div>
-  `,
-
-  methods: {
-    click() {
-      console.log('clicked');
-    },
-  },
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  title: 'Title text',
-  text: '1e65416859c4cdff11cf94a70ce7395eba0f494d',
-};
+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,
+  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',
+      },
+    };
+  },
+
+  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>
+
+        <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>
+      </unnnic-data-area>
+    </div>
+  `,
+
+  methods: {
+    click() {
+      console.log('clicked');
+    },
+  },
+});
+
+export const Default = Template.bind({});
+
+Default.args = {
+  title: 'Title text',
+  text: '1e65416859c4cdff11cf94a70ce7395eba0f494d',
+};

package/src/stories/DateFilter.stories.js

@@ -1,23 +1,23 @@
-import unnnicDateFilter from '../components/DateFilter/DateFilter.vue';
-
-export default {
-  title: 'Form/DateFilter',
-  component: unnnicDateFilter,
-  argTypes: {
-    dateFormat: { control: { type: 'text' } },
-    startDate: { control: { type: 'date' } },
-    endDate: { control: { type: 'date' } },
-  },
-};
-
-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',
-};
+import unnnicDateFilter from '../components/DateFilter/DateFilter.vue';
+
+export default {
+  title: 'Form/DateFilter',
+  component: unnnicDateFilter,
+  argTypes: {
+    dateFormat: { control: { type: 'text' } },
+    startDate: { control: { type: 'date' } },
+    endDate: { control: { type: 'date' } },
+  },
+};
+
+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',
+};