@weni/unnnic-system 2.0.0 → 2.0.2

package/src/stories/Accordion.stories.js

@@ -2,7 +2,7 @@ import unnnicAccordion from '../components/Accordion/Accordion.vue';
 import unnnicButton from '../components/Button/Button.vue';
 
 export default {
-  title: 'example/Accordion',
+  title: 'accordion/Accordion',
   component: unnnicAccordion,
   argTypes: {
     open: { control: { type: 'boolean' } },
@@ -19,13 +19,18 @@ const Template = (args, { argTypes }) => ({
   },
 
   data() {
-    return {};
+    return {
+      o: false,
+    };
   },
 
   template: `
     <div>
-      <unnnic-accordion v-model="open" v-bind="$props">
-        <unnnic-button @click.stop="click" slot="actions" type="secondary" size="small" icon-left="button-play-1">Assista ao vídeo</unnnic-button>
+      <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>

package/src/stories/Alert.stories.js

@@ -12,14 +12,30 @@ export default {
     scheme: {
       control: {
         type: 'select',
-        options: ['feedback-red', 'feedback-green', 'feedback-yellow', 'feedback-blue', 'feedback-grey',
-          'aux-blue', 'aux-purple', 'aux-orange', 'aux-lemon', 'aux-pink'],
+        options: [
+          'feedback-red',
+          'feedback-green',
+          'feedback-yellow',
+          'feedback-blue',
+          'feedback-grey',
+          'aux-blue',
+          'aux-purple',
+          'aux-orange',
+          'aux-lemon',
+          'aux-pink',
+        ],
       },
     },
     position: {
       control: {
         type: 'select',
-        options: ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'bottom-center'],
+        options: [
+          'top-left',
+          'top-right',
+          'bottom-left',
+          'bottom-right',
+          'bottom-center',
+        ],
       },
     },
     icon: {
@@ -41,7 +57,32 @@ export default {
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { alertCaller, unnnicAlert },
-  template: '<div><button @click="unnnicCallAlert"> Click for alert </button> <unnnic-alert v-bind="$props"></unnnic-alert> </div>',
+  template: `
+<div>
+  <button @click="unnnicCallAlert">Click for alert</button>
+
+<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>
+
+<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 });
@@ -49,6 +90,32 @@ const Template = (args, { argTypes }) => ({
   },
 });
 
+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>
+
+      <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,
+      });
+    },
+  },
+});
+
 export const Normal = Template.bind({});
 Normal.args = {
   title: 'Title',
@@ -56,3 +123,11 @@ Normal.args = {
   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',
+};

package/src/stories/AvatarIcon.stories.js

@@ -1,24 +1,40 @@
 import AvatarIcon from '../components/AvatarIcon/AvatarIcon.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-blue-500',
+  'aux-green-500',
+  'aux-purple',
+  'aux-purple-500',
+  'aux-orange',
+  'aux-orange-500',
+  'aux-lemon',
+  'aux-red-500',
+  'aux-pink',
+];
 
 export default {
   title: 'Example/AvatarIcon',
   component: AvatarIcon,
   argTypes: {
+    enabled: { control: 'boolean' },
+    icon: { control: 'select', options: iconsOptions },
     size: {
-      control: {
-        type: 'select',
-        options: ['nano', 'xs', 'sm', 'lg', 'xl'],
-      },
+      control: 'select',
+      options: ['nano', 'xs', 'sm', 'lg', 'xl'],
     },
+    scheme: { control: 'select', options: schemes },
   },
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { AvatarIcon },
-  template: '<avatar-icon v-bind="$props"/>',
-});
-
-export const Normal = Template.bind({});
-Normal.args = {
+export const Normal = {
+  args: {},
 };

package/src/stories/Banner.stories.js

@@ -19,28 +19,35 @@ export default {
     subtitle: { control: { type: 'text' } },
     rating: { control: { type: 'number' } },
   },
-};
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicBanner },
-  template: '<unnnicBanner v-bind="$props" @ratingAction="emitRatingAction" />',
-  methods: {
-    emitRatingAction(star) {
-      window.alert(`star: ${star}`);
+  render: (args) => ({
+    components: {
+      unnnicBanner,
     },
-  },
-});
+    setup() {
+      return { args };
+    },
+    methods: {
+      emitRatingAction(star) {
+        window.alert(`star: ${star}`);
+      },
+    },
+    template: `
+      <unnnicBanner v-bind="args" @ratingAction="emitRatingAction" />
+    `,
+  }),
+};
 
-export const Info = Template.bind({});
-Info.args = {
-  type: 'info',
-  firstTitle: 'Title 1',
-  firstDescription: 'Description 1',
-  secondTitle: 'Title 2',
-  secondDescription: 'Description 2',
-  thirdTitle: 'Title 3',
-  thirdDescription: 'Description 3',
-  subtitle: 'Subtitle',
-  rating: 3,
+export const Info = {
+  args: {
+    type: 'info',
+    firstTitle: 'Title 1',
+    firstDescription: 'Description 1',
+    secondTitle: 'Title 2',
+    secondDescription: 'Description 2',
+    thirdTitle: 'Title 3',
+    thirdDescription: 'Description 3',
+    subtitle: 'Subtitle',
+    rating: 3,
+  },
 };

package/src/stories/Breadcrumb.stories.js

@@ -3,29 +3,29 @@ import unnnicBreadcrumb from '../components/Breadcrumb/Breadcrumb.vue';
 export default {
   title: 'Example/Breadcrumb',
   component: unnnicBreadcrumb,
+  argTypes: {
+    'on-crumb-click': { action: '@crumb-click' },
+  },
 };
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
+
   components: {
     unnnicBreadcrumb,
   },
-  methods: {
-    handleCrumbClick(crumb) {
-      // eslint-disable-next-line no-alert
-      alert(`${crumb.path}`);
-    },
-  },
+
   template: `
-  <unnnic-breadcrumb v-bind="$props" @crumbClick="handleCrumbClick"></unnnic-breadcrumb>
+    <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' },
+    { name: 'One', path: '/One' },
+    { name: 'Two', path: '/Two' },
+    { name: 'Active', path: '/Active' },
   ],
 };

package/src/stories/Button.stories.js

@@ -5,59 +5,133 @@ export default {
   title: 'Form/Button',
   component: unnnicButton,
   argTypes: {
-    type: { control: { type: 'select', options: ['primary', 'secondary', 'terciary', 'ghost', 'warning'] } },
-    size: { control: { type: 'select', options: ['large', 'small'] } },
+    type: {
+      control: { type: 'select' },
+      options: [
+        'primary',
+        'secondary',
+        'tertiary',
+        'alternative',
+        'warning',
+        'attention',
+      ],
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['large', 'small'],
+      defaultValue: 'large',
+    },
     text: { control: { type: 'text' } },
-    iconLeft: { control: { type: 'select', options: [null, ...iconList] } },
-    iconCenter: { control: { type: 'select', options: [null, ...iconList] } },
-    iconRight: { control: { type: 'select', options: [null, ...iconList] } },
+    iconLeft: {
+      control: { type: 'select' },
+      options: [null, ...iconList],
+    },
+    iconCenter: {
+      control: { type: 'select' },
+      options: [null, ...iconList],
+    },
+    iconRight: {
+      control: { type: 'select' },
+      options: [null, ...iconList],
+    },
     disabled: { control: { type: 'boolean' } },
     loading: { control: { type: 'boolean' } },
+    float: { control: { type: 'boolean' } },
   },
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicButton },
-  template: '<unnnicButton v-bind="$props" />',
-});
+export const Primary = {
+  args: {
+    text: 'Button Text',
+    disabled: false,
+  },
+};
+
+export const Secondary = {
+  args: {
+    type: 'secondary',
+    text: 'Button Text',
+    disabled: false,
+  },
+};
 
-export const Normal = Template.bind({});
-Normal.args = {
-  text: 'Button text',
-  disabled: false,
+export const Tertiary = {
+  args: {
+    type: 'tertiary',
+    text: 'Button Text',
+    disabled: false,
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  type: 'secondary',
-  text: 'Button Text',
-  disabled: false,
+export const WithIcon = {
+  args: {
+    text: 'Button Text',
+    iconLeft: 'developer-community-github-1-1',
+  },
 };
 
-export const Terciary = Template.bind({});
-Terciary.args = {
-  type: 'terciary',
-  text: 'Button Text',
-  disabled: false,
+export const OnlyIcon = {
+  args: {
+    iconCenter: 'add-1',
+  },
 };
 
-export const Ghost = Template.bind({});
-Ghost.args = {
-  type: 'ghost',
-  text: 'Button Text',
-  disabled: false,
+export const Alternative = {
+  args: {
+    type: 'alternative',
+    iconLeft: 'add',
+    text: 'Text',
+  },
 };
 
-export const Warning = Template.bind({});
-Warning.args = {
-  type: 'warning',
-  text: 'Button Text',
-  disabled: false,
+export const Warning = {
+  args: {
+    type: 'warning',
+    iconLeft: 'add-1',
+    text: 'Text',
+  },
 };
 
-export const withIcon = Template.bind({});
-withIcon.args = {
-  text: 'Button Text',
-  iconLeft: 'developer-community-github-1-1',
+export const Attention = {
+  args: {
+    type: 'attention',
+    iconLeft: 'add-1',
+    text: 'Text',
+  },
+};
+
+export const Float = {
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['extra-large', 'large'],
+      defaultValue: 'large',
+    },
+  },
+  render: (args) => ({
+    components: { unnnicButton },
+    setup() {
+      return { args };
+    },
+    template: `<div style="height: 80vh; display: grid; position: relative;">
+      <unnnic-button v-bind="args" />
+
+      When to use this variation: <br/>
+      When there is a need to present a main action above a list of contents. <br/>
+      It is important that the component is always floating over the content and fixed to the bottom right side. <br/>
+      (Remember to add position relative style to your container)
+
+      <br/>
+      <br/>
+
+      <div style="overflow: scroll;">
+        <p v-for="item in 50" :key="item">Scroll <br/></p>
+      </div>
+    </div>`,
+  }),
+  args: {
+    type: 'primary',
+    iconCenter: 'add',
+    float: true,
+  },
 };

package/src/stories/ButtonIcon.stories.js

@@ -23,18 +23,9 @@ export default {
   },
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: {
-    unnnicButtonIcon,
+export const Normal = {
+  args: {
+    size: 'small',
+    icon: iconsOptions[0],
   },
-  template: `
-    <unnnic-button-icon v-bind="$props" />
-  `,
-});
-
-export const Normal = Template.bind({});
-Normal.args = {
-  size: 'small',
-  icon: iconsOptions[0],
 };