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

package/src/stories/Breadcrumb.stories.js

@@ -1,31 +1,31 @@
-import unnnicBreadcrumb from '../components/Breadcrumb/Breadcrumb.vue';
-
-export default {
-  title: 'Example/Breadcrumb',
-  component: unnnicBreadcrumb,
-};
-
-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>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  crumbs: [
-    { name: 'One', path: 'One' },
-    { name: 'Two', path: 'Two' },
-    { name: 'Active', path: 'Active' },
-  ],
-};
+import unnnicBreadcrumb from '../components/Breadcrumb/Breadcrumb.vue';
+
+export default {
+  title: 'Example/Breadcrumb',
+  component: unnnicBreadcrumb,
+};
+
+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>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  crumbs: [
+    { name: 'One', path: 'One' },
+    { name: 'Two', path: 'Two' },
+    { name: 'Active', path: 'Active' },
+  ],
+};

package/src/stories/Button.stories.js

@@ -1,49 +1,49 @@
-import unnnicButton from '../components/Button/Button.vue';
-import iconList from '../utils/iconList';
-
-export default {
-  title: 'Form/Button',
-  component: unnnicButton,
-  argTypes: {
-    type: { control: { type: 'select', options: ['primary', 'secondary', 'terciary'] } },
-    size: { control: { type: 'select', options: ['large', 'small'] } },
-    text: { control: { type: 'text' } },
-    iconLeft: { control: { type: 'select', options: [null, ...iconList] } },
-    iconRight: { control: { type: 'select', options: [null, ...iconList] } },
-    disabled: { control: { type: 'boolean' } },
-    loading: { control: { type: 'boolean' } },
-    scheme: { control: { type: 'select', options: ['feedback-red', 'feedback-green', 'feedback-yellow'] } },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicButton },
-  template: '<unnnicButton v-bind="$props" />',
-});
-
-export const Normal = Template.bind({});
-Normal.args = {
-  text: 'Button text',
-  disabled: false,
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-  type: 'secondary',
-  text: 'Button Text',
-  disabled: false,
-};
-
-export const Terciary = Template.bind({});
-Terciary.args = {
-  type: 'terciary',
-  text: 'Button Text',
-  disabled: false,
-};
-
-export const withIcon = Template.bind({});
-withIcon.args = {
-  text: 'Button Text',
-  iconLeft: 'developer-community-github-1-1',
-};
+import unnnicButton from '../components/Button/Button.vue';
+import iconList from '../utils/iconList';
+
+export default {
+  title: 'Form/Button',
+  component: unnnicButton,
+  argTypes: {
+    type: { control: { type: 'select', options: ['primary', 'secondary', 'terciary'] } },
+    size: { control: { type: 'select', options: ['large', 'small'] } },
+    text: { control: { type: 'text' } },
+    iconLeft: { control: { type: 'select', options: [null, ...iconList] } },
+    iconRight: { control: { type: 'select', options: [null, ...iconList] } },
+    disabled: { control: { type: 'boolean' } },
+    loading: { control: { type: 'boolean' } },
+    scheme: { control: { type: 'select', options: ['feedback-red', 'feedback-green', 'feedback-yellow'] } },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { unnnicButton },
+  template: '<unnnicButton v-bind="$props" />',
+});
+
+export const Normal = Template.bind({});
+Normal.args = {
+  text: 'Button text',
+  disabled: false,
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  type: 'secondary',
+  text: 'Button Text',
+  disabled: false,
+};
+
+export const Terciary = Template.bind({});
+Terciary.args = {
+  type: 'terciary',
+  text: 'Button Text',
+  disabled: false,
+};
+
+export const withIcon = Template.bind({});
+withIcon.args = {
+  text: 'Button Text',
+  iconLeft: 'developer-community-github-1-1',
+};

package/src/stories/ButtonIcon.stories.js

@@ -1,40 +1,40 @@
-import unnnicButtonIcon from '../components/Button/ButtonIcon.vue';
-import icons from '../utils/icons';
-
-const iconsOptions = Object.keys(icons);
-
-export default {
-  title: 'Form/ButtonIcon',
-  component: unnnicButtonIcon,
-  argTypes: {
-    size: {
-      control: {
-        type: 'select',
-        options: ['small', 'large'],
-      },
-    },
-
-    icon: {
-      control: {
-        type: 'select',
-        options: iconsOptions,
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: {
-    unnnicButtonIcon,
-  },
-  template: `
-    <unnnic-button-icon v-bind="$props" />
-  `,
-});
-
-export const Normal = Template.bind({});
-Normal.args = {
-  size: 'small',
-  icon: iconsOptions[0],
-};
+import unnnicButtonIcon from '../components/Button/ButtonIcon.vue';
+import icons from '../utils/icons';
+
+const iconsOptions = Object.keys(icons);
+
+export default {
+  title: 'Form/ButtonIcon',
+  component: unnnicButtonIcon,
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+        options: ['small', 'large'],
+      },
+    },
+
+    icon: {
+      control: {
+        type: 'select',
+        options: iconsOptions,
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: {
+    unnnicButtonIcon,
+  },
+  template: `
+    <unnnic-button-icon v-bind="$props" />
+  `,
+});
+
+export const Normal = Template.bind({});
+Normal.args = {
+  size: 'small',
+  icon: iconsOptions[0],
+};

package/src/stories/Card.stories.js

@@ -1,118 +1,118 @@
-import Card from '../components/Card/Card.vue';
-import iconList from '../utils/iconList';
-import unnnicButton from '../components/Button/Button.vue';
-import unnnicDropdown from '../components/Dropdown/Dropdown.vue';
-import unnnicDropdownItem from '../components/Dropdown/DropdownItem.vue';
-
-export default {
-  title: 'Card/Card',
-  component: Card,
-  argTypes: {
-    enabled: { control: { type: 'select', options: [true, false] } },
-    infoPosition: { control: { type: 'select', options: ['top', 'right', 'bottom', 'left'] } },
-    type: { control: { type: 'select', options: ['title', 'dash', 'account', 'status', 'default', 'blank', 'content', 'marketplace'] } },
-    icon: { control: { type: 'select', options: iconList } },
-    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', 'brand-weni-soft'],
-      },
-    },
-    typeAction: { control: { type: 'select', options: ['add', 'config', 'edit'] } },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: {
-    Card,
-    unnnicButton,
-    unnnicDropdown,
-    unnnicDropdownItem,
-  },
-  template: `
-    <Card v-bind="$props">
-      <unnnic-dropdown slot="actions">
-        <unnnic-button
-          slot="trigger"
-          size="small"
-          type="secondary"
-          iconCenter="cog-1"
-        />
-        <unnnic-dropdown-item>
-          Configure
-        </unnnic-dropdown-item>
-        <unnnic-dropdown-item>
-          Remove
-        </unnnic-dropdown-item>
-      </unnnic-dropdown>
-    </Card>
-  `,
-});
-
-export const Title = Template.bind({});
-Title.args = {
-  type: 'title',
-  title: 'This is the title',
-  info: 'This is the info',
-  hasInformationIcon: true,
-};
-
-export const Dash = Template.bind({});
-Dash.args = {
-  type: 'dash',
-  title: 'This is the title',
-  value: 12345,
-  percent: 15,
-};
-
-export const Status = Template.bind({});
-Status.args = {
-  type: 'status',
-  title: 'This is the title',
-  description: 'This is the description',
-  status: 'This is the status',
-};
-
-export const Account = Template.bind({});
-Account.args = {
-  type: 'account',
-  title: 'This is the title',
-  description: 'This is the description',
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  type: 'default',
-  title: 'This is the title',
-  description: 'This is the description',
-};
-
-export const Blank = Template.bind({});
-Blank.args = {
-  type: 'blank',
-  text: 'This is the text',
-};
-
-export const Content = Template.bind({});
-Content.args = {
-  type: 'content',
-  title: 'This is the title',
-  description: 'This is the description',
-  enabled: false,
-  icon: 'view-1-1',
-};
-
-export const Marketplace = Template.bind({});
-Marketplace.args = {
-  type: 'marketplace',
-  title: 'This is the title',
-  description: 'This is the description',
-  rating: 4.9,
-  comments: '3 comments',
-  iconSrc: 'https://api.iconify.design/grommet-icons:slack.svg',
-  enabled: false,
-  typeAction: 'add',
-  clickable: true,
-};
+import Card from '../components/Card/Card.vue';
+import iconList from '../utils/iconList';
+import unnnicButton from '../components/Button/Button.vue';
+import unnnicDropdown from '../components/Dropdown/Dropdown.vue';
+import unnnicDropdownItem from '../components/Dropdown/DropdownItem.vue';
+
+export default {
+  title: 'Card/Card',
+  component: Card,
+  argTypes: {
+    enabled: { control: { type: 'select', options: [true, false] } },
+    infoPosition: { control: { type: 'select', options: ['top', 'right', 'bottom', 'left'] } },
+    type: { control: { type: 'select', options: ['title', 'dash', 'account', 'status', 'default', 'blank', 'content', 'marketplace'] } },
+    icon: { control: { type: 'select', options: iconList } },
+    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', 'brand-weni-soft'],
+      },
+    },
+    typeAction: { control: { type: 'select', options: ['add', 'config', 'edit'] } },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: {
+    Card,
+    unnnicButton,
+    unnnicDropdown,
+    unnnicDropdownItem,
+  },
+  template: `
+    <Card v-bind="$props">
+      <unnnic-dropdown slot="actions">
+        <unnnic-button
+          slot="trigger"
+          size="small"
+          type="secondary"
+          iconCenter="cog-1"
+        />
+        <unnnic-dropdown-item>
+          Configure
+        </unnnic-dropdown-item>
+        <unnnic-dropdown-item>
+          Remove
+        </unnnic-dropdown-item>
+      </unnnic-dropdown>
+    </Card>
+  `,
+});
+
+export const Title = Template.bind({});
+Title.args = {
+  type: 'title',
+  title: 'This is the title',
+  info: 'This is the info',
+  hasInformationIcon: true,
+};
+
+export const Dash = Template.bind({});
+Dash.args = {
+  type: 'dash',
+  title: 'This is the title',
+  value: 12345,
+  percent: 15,
+};
+
+export const Status = Template.bind({});
+Status.args = {
+  type: 'status',
+  title: 'This is the title',
+  description: 'This is the description',
+  status: 'This is the status',
+};
+
+export const Account = Template.bind({});
+Account.args = {
+  type: 'account',
+  title: 'This is the title',
+  description: 'This is the description',
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  type: 'default',
+  title: 'This is the title',
+  description: 'This is the description',
+};
+
+export const Blank = Template.bind({});
+Blank.args = {
+  type: 'blank',
+  text: 'This is the text',
+};
+
+export const Content = Template.bind({});
+Content.args = {
+  type: 'content',
+  title: 'This is the title',
+  description: 'This is the description',
+  enabled: false,
+  icon: 'view-1-1',
+};
+
+export const Marketplace = Template.bind({});
+Marketplace.args = {
+  type: 'marketplace',
+  title: 'This is the title',
+  description: 'This is the description',
+  rating: 4.9,
+  comments: '3 comments',
+  iconSrc: 'https://api.iconify.design/grommet-icons:slack.svg',
+  enabled: false,
+  typeAction: 'add',
+  clickable: true,
+};

package/src/stories/CardCompany.stories.js

@@ -1,52 +1,52 @@
-import CardCompany from '../components/Card/CardCompany.vue';
-
-export default {
-  title: 'Card/CardCompany',
-  component: CardCompany,
-  argTypes: {},
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { CardCompany },
-  template: '<card-company v-bind="$props"/>',
-});
-
-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');
-    },
-  }, {
-    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',
-  }, {
-    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',
-};
+import CardCompany from '../components/Card/CardCompany.vue';
+
+export default {
+  title: 'Card/CardCompany',
+  component: CardCompany,
+  argTypes: {},
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CardCompany },
+  template: '<card-company v-bind="$props"/>',
+});
+
+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');
+    },
+  }, {
+    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',
+  }, {
+    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',
+};

package/src/stories/CardData.stories.js

@@ -1,41 +1,41 @@
-import unnnicCardData from '../components/Card/CardData.vue';
-
-export default {
-  title: 'Card/CardData',
-  component: unnnicCardData,
-  argTypes: {
-    title: { control: { type: 'text' } },
-    description: { control: { type: 'text' } },
-    score: { control: { type: 'text' } },
-    info: { control: { type: 'text' } },
-    checked: { control: { type: 'boolean' } },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    unnnicCardData,
-  },
-
-  data() {
-    return {};
-  },
-
-  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,
-};
+import unnnicCardData from '../components/Card/CardData.vue';
+
+export default {
+  title: 'Card/CardData',
+  component: unnnicCardData,
+  argTypes: {
+    title: { control: { type: 'text' } },
+    description: { control: { type: 'text' } },
+    score: { control: { type: 'text' } },
+    info: { control: { type: 'text' } },
+    checked: { control: { type: 'boolean' } },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+
+  components: {
+    unnnicCardData,
+  },
+
+  data() {
+    return {};
+  },
+
+  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,
+};