@weni/unnnic-system 2.0.16 → 2.0.18

package/src/components/TabsExpanded/TabsExpanded.vue

@@ -41,6 +41,7 @@
           @click.stop="$emit('close-tab', item)"
           icon="close-1"
           size="xs"
+          clickable
           scheme="neutral-cloudy"
         />
       </div>

package/src/stories/Accordion.stories.js

@@ -1,51 +1,46 @@
-import unnnicAccordion from '../components/Accordion/Accordion.vue';
-import unnnicButton from '../components/Button/Button.vue';
+import UnnnicAccordion from '../components/Accordion/Accordion.vue';
+import UnnnicButton from '../components/Button/Button.vue';
 
 export default {
   title: 'accordion/Accordion',
-  component: unnnicAccordion,
+  component: UnnnicAccordion,
   argTypes: {
     open: { control: { type: 'boolean' } },
     title: { control: { type: 'text' } },
   },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: {
+      UnnnicAccordion,
+      UnnnicButton,
+    },
+    data() {
+      return {
+        open: false,
+      };
+    },
+    template: `
+      <div>
+        <pre>v-model:open {{ open }}</pre>
+        <unnnic-accordion v-bind="args" v-model:open="open">
+          <template #actions>
+            <unnnic-button type="secondary" size="small" icon-left="button-play-1">
+              Assista ao vídeo
+            </unnnic-button>
+          </template>
+
+          Quae assumenda aut non nulla quod ratione odio. Suscipit voluptatem natus a. Cumque et delectus ut. Nostrum ratione eos voluptatem voluptatu quia quod qui. Velit in consequatur corrupti similique. Quae assumenda aut non nulla quod ratione odio. Suscipit voluptatem natus a.
+        </unnnic-accordion>
+      </div>
+    `,
+  }),
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    unnnicAccordion,
-    unnnicButton,
+export const Default = {
+  args: {
+    title:
+      'Os valores permanecem os mesmos? O que muda no meu plano contratado?',
   },
-
-  data() {
-    return {
-      o: false,
-    };
-  },
-
-  template: `
-    <div>
-      <pre>v-model:open {{ o }}</pre>
-      <unnnic-accordion v-bind="$props" v-model:open="o">
-        <template v-slot:actions>
-          <unnnic-button @click.stop="click" type="secondary" size="small" icon-left="button-play-1">Assista ao vídeo</unnnic-button>
-        </template>
-
-        Quae assumenda aut non nulla quod ratione odio. Suscipit voluptatem natus a. Cumque et delectus ut. Nostrum ratione eos voluptatem voluptatu quia quod qui. Velit in consequatur corrupti similique. Quae assumenda aut non nulla quod ratione odio. Suscipit voluptatem natus a.
-      </unnnic-accordion>
-    </div>
-  `,
-
-  methods: {
-    click() {
-      console.log('clicked test 2');
-    },
-  },
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  title: 'Os valores permanecem os mesmos? O que muda no meu plano contratado?',
 };

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',
-    },
-  ],
 };