@weni/unnnic-system 2.0.16 → 2.0.17

package/src/stories/Alert.stories.js

@@ -1,11 +1,11 @@
-import alertCaller from '../components/Alert/AlertCaller.vue';
+import AlertCaller from '../components/Alert/AlertCaller.vue';
 import alert from '../utils/call';
-import unnnicAlert from '../components/Alert/Alert.vue';
-import alertBanner from '../components/Alert/AlertBanner.vue';
+import UnnnicAlert from '../components/Alert/Alert.vue';
+import AlertBanner from '../components/Alert/AlertBanner.vue';
 
 export default {
   title: 'example/Alert',
-  component: unnnicAlert,
+  component: UnnnicAlert,
   argTypes: {
     text: { control: { type: 'text' } },
     showCloseButton: { control: { type: 'boolean' } },
@@ -56,74 +56,106 @@ export default {
   },
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { alertCaller, unnnicAlert },
-  template: `
-<div>
-  <button @click="unnnicCallAlert">Click for alert</button>
+export const Normal = {
+  render: (args) => ({
+    components: { AlertCaller, UnnnicAlert },
+    setup() {
+      return { args };
+    },
+    methods: {
+      unnnicCallAlert() {
+        alert.callAlert({ props: this.args, seconds: this.args.seconds });
+      },
+    },
+    template: `
+    <div>
+      <button @click="unnnicCallAlert">Click for alert</button>
 
-<h3>Refactoring changes:</h3>
+    <h3>Refactoring changes:</h3>
 
-<ul>
-  <li>Removed props: title, icon, hide-close-text, close-text, position</li>
-  <li>Added props: link-text, link-href, link-target (default: '_blank'), type (default, success, error)</li>
-  <li>Avoid using scheme prop, instead use the 'type' prop to change the color variant</li>
-  <li>Avoid using on-close prop to listen to close event, instead use the '@close' event</li>
-</ul>
+    <ul>
+      <li>Removed props: title, icon, hide-close-text, close-text, position</li>
+      <li>Added props: link-text, link-href, link-target (default: '_blank'), type (default, success, error)</li>
+      <li>Avoid using scheme prop, instead use the 'type' prop to change the color variant</li>
+      <li>Avoid using on-close prop to listen to close event, instead use the '@close' event</li>
+    </ul>
 
-<pre>
-Recommended use:
+    <pre>
+    Recommended use:
 
-&lt;unnnic-alert
-  type            String default 'default' ('default', 'success', 'error')
-  text            String required
-  @close          Event
-  link-href       String
-   ┠ link-text    String default 'Learn more'
-   ┖ link-target  String default '_blank'
-/&gt;
-</pre>
-</div>`,
-  methods: {
-    unnnicCallAlert() {
-      alert.callAlert({ props: this.$props, seconds: this.$props.seconds });
-    },
+    &lt;unnnic-alert
+      type            String default 'default' ('default', 'success', 'error')
+      text            String required
+      @close          Event
+      link-href       String
+      ┠ link-text    String default 'Learn more'
+      ┖ link-target  String default '_blank'
+    /&gt;
+    </pre>
+    </div>`,
+  }),
+  args: {
+    title: 'Title',
+    text: 'Text',
+    icon: 'check-circle-1-1',
+    scheme: 'feedback-green',
   },
-});
+};
 
-const TemplateWithContainerRef = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { alertCaller, unnnicAlert },
-  template: `
-    <div ref="divContainer" style="height: 200px; position: relative; border: 1px solid black">
-      <button @click="unnnicCallAlert">Click for alert</button>
+export const WithContainerRef = {
+  render: (args) => ({
+    components: { AlertCaller, UnnnicAlert },
+    setup() {
+      return { args };
+    },
+    methods: {
+      unnnicCallAlert() {
+        alert.callAlert({
+          props: this.args,
+          containerRef: this.$refs.divContainer,
+        });
+      },
+    },
+    template: `
+      <div ref="divContainer" style="height: 200px; position: relative; border: 1px solid black">
+        <button @click="unnnicCallAlert">Click for alert</button>
 
-      <pre>
-      To use, add position relative style to your container
-      and pass it as "containerRef" at callAlert function like:
+        <pre>
+        To use, add position relative style to your container
+        and pass it as "containerRef" at callAlert function like:
 
-      alert.callAlert({
-        containerRef: this.$refs.divContainer,
-      });
-      </pre>
-    </div>`,
-  methods: {
-    unnnicCallAlert() {
-      alert.callAlert({
-        props: this.$props,
-        containerRef: this.$refs.divContainer,
-      });
-    },
+        alert.callAlert({
+          containerRef: this.$refs,
+        });
+        </pre>
+      </div>
+    `,
+  }),
+  args: {
+    title: 'Title',
+    text: 'Text',
+    icon: 'check-circle-1-1',
+    scheme: 'feedback-green',
   },
-});
+};
 
-const TemplateBanner = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { alertBanner },
-  template: `
+export const Banner = {
+  render: (args) => ({
+    components: { AlertBanner },
+    setup() {
+      return { args };
+    },
+    methods: {
+      unnnicCallAlert() {
+        alert.callAlert({
+          props: this.args,
+          containerRef: this.$refs.divContainer,
+        });
+      },
+    },
+    template: `
     <div>
-      <alert-banner v-bind="$props" />
+      <alert-banner v-bind="args" />
 
     <pre>
     Recommended use:
@@ -139,26 +171,9 @@ const TemplateBanner = (args, { argTypes }) => ({
     /&gt;
     </pre>
     </div>`,
-});
-
-export const Normal = Template.bind({});
-Normal.args = {
-  title: 'Title',
-  text: 'Text',
-  icon: 'check-circle-1-1',
-  scheme: 'feedback-green',
-};
-
-export const WithContainerRef = TemplateWithContainerRef.bind({});
-WithContainerRef.args = {
-  title: 'Title',
-  text: 'Text',
-  icon: 'check-circle-1-1',
-  scheme: 'feedback-green',
-};
-
-export const Banner = TemplateBanner.bind({});
-Banner.args = {
-  text: 'Text',
-  showCloseButton: false,
+  }),
+  args: {
+    text: 'Text',
+    showCloseButton: false,
+  },
 };

package/src/stories/Breadcrumb.stories.js

@@ -1,31 +1,20 @@
-import unnnicBreadcrumb from '../components/Breadcrumb/Breadcrumb.vue';
+import UnnnicBreadcrumb from '../components/Breadcrumb/Breadcrumb.vue';
+import { action } from '@storybook/addon-actions';
 
 export default {
   title: 'Example/Breadcrumb',
-  component: unnnicBreadcrumb,
-  argTypes: {
-    'on-crumb-click': { action: '@crumb-click' },
+  component: UnnnicBreadcrumb,
+  args: {
+    onCrumbClick: action('crumb-click'),
   },
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    unnnicBreadcrumb,
+export const Default = {
+  args: {
+    crumbs: [
+      { name: 'One', path: '/One' },
+      { name: 'Two', path: '/Two' },
+      { name: 'Active', path: '/Active' },
+    ],
   },
-
-  template: `
-    <unnnic-breadcrumb v-bind="$props"></unnnic-breadcrumb>
-  `,
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  crumbs: [
-    { name: 'One', path: '/One' },
-    { name: 'Two', path: '/Two' },
-    { name: 'Active', path: '/Active' },
-  ],
 };

package/src/stories/ButtonIcon.stories.js

@@ -1,11 +1,11 @@
-import unnnicButtonIcon from '../components/Button/ButtonIcon.vue';
+import UnnnicButtonIcon from '../components/Button/ButtonIcon.vue';
 import icons from '../utils/icons';
 
 const iconsOptions = Object.keys(icons);
 
 export default {
   title: 'Form/ButtonIcon',
-  component: unnnicButtonIcon,
+  component: UnnnicButtonIcon,
   argTypes: {
     size: {
       control: {

package/src/stories/CardCompany.stories.js

@@ -1,70 +1,64 @@
+import { action } from '@storybook/addon-actions';
 import CardCompany from '../components/Card/CardCompany.vue';
 
 export default {
   title: 'Card/CardCompany',
   component: CardCompany,
   argTypes: {
-    join: {
-      action: 'join',
-    },
+    onJoin: action('join'),
   },
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { CardCompany },
-  template: '<card-company v-bind="$props" @join="join"/>',
-});
-
-export const Normal = Template.bind({});
-Normal.args = {
-  title: 'Weni',
-  tag: 'Gratuita',
-  description: 'Description',
-  joinLabel: 'Join',
-  options: [
-    {
-      icon: 'view-1-1',
-      title: 'View members',
-      click() {
-        console.log('view');
+export const Normal = {
+  args: {
+    title: 'Weni',
+    tag: 'Gratuita',
+    description: 'Description',
+    joinLabel: 'Join',
+    options: [
+      {
+        icon: 'view-1-1',
+        title: 'View members',
+        click() {
+          console.log('view');
+        },
+      },
+      {
+        icon: 'delete-1-1',
+        title: 'Delete organization',
+        scheme: 'feedback-red',
+        click() {
+          console.log('delete');
+        },
+      },
+    ],
+    members: [
+      {
+        name: 'Cristian',
+        photo:
+          'https://weni-sp-connect-staging.s3.amazonaws.com/media/user/avatars/av_ef64cdfa-26b9-4896-93ba-098c00724d88.jpg?AWSAccessKeyId=AKIATQ3M7WDGK6GLYL6V&Signature=ka1ANr0Z6MuiRHKkOFbz%2Fr6krA4%3D&Expires=1625729559',
+      },
+      {
+        name: 'Cristian',
+        photo:
+          'https://weni-sp-connect-staging.s3.amazonaws.com/media/user/avatars/av_ef64cdfa-26b9-4896-93ba-098c00724d88.jpg?AWSAccessKeyId=AKIATQ3M7WDGK6GLYL6V&Signature=ka1ANr0Z6MuiRHKkOFbz%2Fr6krA4%3D&Expires=1625729559',
       },
-    },
-    {
-      icon: 'delete-1-1',
-      title: 'Delete organization',
-      scheme: 'feedback-red',
-      click() {
-        console.log('delete');
+      {
+        name: 'Cristian',
+        photo:
+          'https://weni-sp-connect-staging.s3.amazonaws.com/media/user/avatars/av_ef64cdfa-26b9-4896-93ba-098c00724d88.jpg?AWSAccessKeyId=AKIATQ3M7WDGK6GLYL6V&Signature=ka1ANr0Z6MuiRHKkOFbz%2Fr6krA4%3D&Expires=1625729559',
       },
-    },
-  ],
-  members: [
-    {
-      name: 'Cristian',
-      photo:
-        'https://weni-sp-connect-staging.s3.amazonaws.com/media/user/avatars/av_ef64cdfa-26b9-4896-93ba-098c00724d88.jpg?AWSAccessKeyId=AKIATQ3M7WDGK6GLYL6V&Signature=ka1ANr0Z6MuiRHKkOFbz%2Fr6krA4%3D&Expires=1625729559',
-    },
-    {
-      name: 'Cristian',
-      photo:
-        'https://weni-sp-connect-staging.s3.amazonaws.com/media/user/avatars/av_ef64cdfa-26b9-4896-93ba-098c00724d88.jpg?AWSAccessKeyId=AKIATQ3M7WDGK6GLYL6V&Signature=ka1ANr0Z6MuiRHKkOFbz%2Fr6krA4%3D&Expires=1625729559',
-    },
-    {
-      name: 'Cristian',
-      photo:
-        'https://weni-sp-connect-staging.s3.amazonaws.com/media/user/avatars/av_ef64cdfa-26b9-4896-93ba-098c00724d88.jpg?AWSAccessKeyId=AKIATQ3M7WDGK6GLYL6V&Signature=ka1ANr0Z6MuiRHKkOFbz%2Fr6krA4%3D&Expires=1625729559',
-    },
-    {
-      name: 'Cristian',
-      photo:
-        'https://weni-sp-connect-staging.s3.amazonaws.com/media/user/avatars/av_ef64cdfa-26b9-4896-93ba-098c00724d88.jpg?AWSAccessKeyId=AKIATQ3M7WDGK6GLYL6V&Signature=ka1ANr0Z6MuiRHKkOFbz%2Fr6krA4%3D&Expires=1625729559',
-    },
-    {
-      name: 'Cristian',
-      photo:
-        'https://weni-sp-connect-staging.s3.amazonaws.com/media/user/avatars/av_ef64cdfa-26b9-4896-93ba-098c00724d88.jpg?AWSAccessKeyId=AKIATQ3M7WDGK6GLYL6V&Signature=ka1ANr0Z6MuiRHKkOFbz%2Fr6krA4%3D&Expires=1625729559',
-    },
-  ],
-  membersDescription: '+24 members',
+      {
+        name: 'Cristian',
+        photo:
+          'https://weni-sp-connect-staging.s3.amazonaws.com/media/user/avatars/av_ef64cdfa-26b9-4896-93ba-098c00724d88.jpg?AWSAccessKeyId=AKIATQ3M7WDGK6GLYL6V&Signature=ka1ANr0Z6MuiRHKkOFbz%2Fr6krA4%3D&Expires=1625729559',
+      },
+      {
+        name: 'Cristian',
+        photo:
+          'https://weni-sp-connect-staging.s3.amazonaws.com/media/user/avatars/av_ef64cdfa-26b9-4896-93ba-098c00724d88.jpg?AWSAccessKeyId=AKIATQ3M7WDGK6GLYL6V&Signature=ka1ANr0Z6MuiRHKkOFbz%2Fr6krA4%3D&Expires=1625729559',
+      },
+    ],
+    membersDescription: '+24 members',
+  },
 };

package/src/stories/CardData.stories.js

@@ -12,31 +12,13 @@ export default {
   },
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    unnnicCardData,
-  },
-
-  data() {
-    return {};
+export const Default = {
+  args: {
+    title: 'Title Card',
+    description:
+      'Description Description Description Description Description Description Description Description.',
+    score: '4.9',
+    info: '(3 comments)',
+    checked: true,
   },
-
-  template: `
-    <div>
-      <unnnic-card-data v-bind="$props"/>
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  title: 'Title Card',
-  description:
-    'Description Description Description Description Description Description Description Description.',
-  score: '4.9',
-  info: '(3 comments)',
-  checked: true,
 };

package/src/stories/CardImage.stories.js

@@ -5,55 +5,56 @@ export default {
   title: 'card/CardImage',
   component: UnnnicCardImage,
   argTypes: {},
+  render: (args) => ({
+    components: {
+      UnnnicCardImage,
+      UnnnicDropdownItem,
+    },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        value: true,
+      };
+    },
+    template: `
+      <div>
+        <pre>v-model: {{ value }}</pre>
+        <unnnic-card-image v-bind="args" v-model="value">
+        <template #actions>
+          <unnnic-dropdown-item>
+            Option 1
+          </unnnic-dropdown-item>
+
+          <unnnic-dropdown-item>
+            Option 2
+          </unnnic-dropdown-item>
+        </template>
+        </unnnic-card-image>
+      </div>
+    `,
+  }),
 };
 
-const Template = (args, { argTypes }) => ({
-  components: {
-    UnnnicCardImage,
-    UnnnicDropdownItem,
-  },
-
-  props: Object.keys(argTypes),
-
-  data() {
-    return {
-      v: false,
-    };
+export const Default = {
+  args: {
+    title: 'Title Card',
+    description: 'Last edit',
+    image: 'https://picsum.photos/300/150',
+    data: [
+      {
+        icon: 'graph-stats-1',
+        scheme: 'aux-purple',
+        name: 'Data',
+        value: '00',
+      },
+      {
+        icon: 'graph-stats-1',
+        scheme: 'aux-purple',
+        name: 'Data',
+        value: '00',
+      },
+    ],
   },
-
-  template: `<div><pre>v-model: {{ v }}</pre>
-  <unnnic-card-image v-bind="$props" v-model="v">
-  <template slot="actions">
-    <unnnic-dropdown-item>
-      Option 1
-    </unnnic-dropdown-item>
-
-    <unnnic-dropdown-item>
-      Option 2
-    </unnnic-dropdown-item>
-  </template>
-  </unnnic-card-image>
-</div>`,
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  title: 'Title Card',
-  description: 'Last edit',
-  image: 'https://picsum.photos/300/150',
-  data: [
-    {
-      icon: 'graph-stats-1',
-      scheme: 'aux-purple',
-      name: 'Data',
-      value: '00',
-    },
-    {
-      icon: 'graph-stats-1',
-      scheme: 'aux-purple',
-      name: 'Data',
-      value: '00',
-    },
-  ],
 };

package/src/stories/CardInformation.stories.js

@@ -6,59 +6,38 @@ export default {
   argTypes: {},
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    unnnicCardInformation,
-  },
-
-  data() {
-    return {};
+export const Default = {
+  args: {
+    name: 'Title Card',
+    subtitle: 'Subtitle',
+    description: 'Description',
+    descriptionRow: 'Description Row',
+    descriptionRowInfo: 'Description Row Info',
+    statuses: [
+      {
+        title: 'AI',
+        icon: 'science-fiction-robot-2',
+        scheme: 'aux-blue',
+        count: 1,
+      },
+      {
+        title: 'Flows',
+        icon: 'hierarchy-3-2',
+        scheme: 'aux-purple',
+        count: 2,
+      },
+      {
+        title: 'Contatos',
+        icon: 'single-neutral-actions-1',
+        scheme: 'aux-lemon',
+        count: 3,
+      },
+      {
+        title: 'Contatos',
+        icon: 'single-neutral-actions-1',
+        scheme: 'aux-lemon',
+        count: 3,
+      },
+    ],
   },
-
-  template: `
-    <div>
-      <unnnic-card-information v-bind="$props">
-      </unnnic-card-information>
-    </div>
-  `,
-
-  methods: {},
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  name: 'Title Card',
-  subtitle: 'Subtitle',
-  description: 'Description',
-  descriptionRow: 'Description Row',
-  descriptionRowInfo: 'Description Row Info',
-  statuses: [
-    {
-      title: 'AI',
-      icon: 'science-fiction-robot-2',
-      scheme: 'aux-blue',
-      count: 1,
-    },
-    {
-      title: 'Flows',
-      icon: 'hierarchy-3-2',
-      scheme: 'aux-purple',
-      count: 2,
-    },
-    {
-      title: 'Contatos',
-      icon: 'single-neutral-actions-1',
-      scheme: 'aux-lemon',
-      count: 3,
-    },
-    {
-      title: 'Contatos',
-      icon: 'single-neutral-actions-1',
-      scheme: 'aux-lemon',
-      count: 3,
-    },
-  ],
 };