@weni/unnnic-system 2.0.0 → 2.0.2

package/src/stories/Colors.stories.mdx

@@ -1,91 +0,0 @@
-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/DropdownSkeleton.stories.js

@@ -1,15 +0,0 @@
-import unnnicDropdownSkeleton from '../components/Dropdown/DropdownSkeleton.vue';
-
-export default {
-  title: 'Example/DropdownSkeleton',
-  component: unnnicDropdownSkeleton,
-  argTypes: {},
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicDropdownSkeleton },
-  template: '<div><unnnic-dropdown-skeleton v-bind="$props">See the message<div slot="inside">Hello World!</div></unnnic-dropdown-skeleton></div>',
-});
-
-export const Normal = Template.bind({});

package/src/stories/Font.stories.mdx

@@ -1,80 +0,0 @@
-import { Meta, Preview } from '@storybook/addon-docs/blocks';
-
-<Meta title="Font/Introduction" />
-
-# Unnnic Font
-
-## Primary
-
-<Preview>
-  <div class="unnnic-font">Lorem ipsum dolor sit amet.</div>
-</Preview>
-
-<ul>
-  <li>family-primary (Aleo)</li>
-  <li>weight-regular (400)</li>
-</ul>
-
-## Secondary
-
-<Preview>
-  <div class="unnnic-font secondary">Lorem ipsum dolor sit amet.</div>
-</Preview>
-
-<ul>
-  <li><s>family-primary (Aleo)</s></li>
-  <li>weight-regular (400)</li>
-  <li>family-secondary (Lato)</li>
-</ul>
-
-## Sizes
-
-<Preview>
-  <div>
-    <div class="unnnic-font body-sm">body-sm Lorem ipsum dolor sit amet.</div>
-    <div class="unnnic-font body-md">body-md Lorem ipsum dolor sit amet.</div>
-    <div class="unnnic-font body-gt">body-gt Lorem ipsum dolor sit amet.</div>
-    <div class="unnnic-font body-lg">body-lg Lorem ipsum dolor sit amet.</div>
-    <div class="unnnic-font title-sm">title-sm Lorem ipsum dolor sit amet.</div>
-    <div class="unnnic-font title-md">title-md Lorem ipsum dolor sit amet.</div>
-    <div class="unnnic-font title-lg">title-lg Lorem ipsum dolor sit amet.</div>
-    <div class="unnnic-font h4">h4 Lorem ipsum.</div>
-    <div class="unnnic-font h3">h3 Lorem ipsum.</div>
-    <div class="unnnic-font h2">h2 Lorem ipsum.</div>
-    <div class="unnnic-font h1">h1 Lorem ipsum.</div>
-  </div>
-</Preview>
-
-<ul>
-  <li>family-primary (Aleo)</li>
-  <li>weight-regular (400)</li>
-  <li>body-sm (8px) line-height-md (16px)</li>
-  <li>body-md (12px) line-height-md (20px)</li>
-  <li>body-gt (14px) line-height-md (22px)</li>
-  <li>body-lg (16px) line-height-md (24px)</li>
-  <li>title-sm (20px) line-height-md (28px)</li>
-  <li>title-md (24px) line-height-md (32px)</li>
-  <li>title-lg (32px) line-height-md (40px)</li>
-  <li>h4 (40px) line-height-md (48px)</li>
-  <li>h3 (48px) line-height-md (56px)</li>
-  <li>h2 (56px) line-height-md (64px)</li>
-  <li>h1 (72px) line-height-md (80px)</li>
-</ul>
-
-## Weights
-
-<Preview>
-  <div>
-    <div class="unnnic-font black">body-sm Lorem ipsum dolor sit amet.</div>
-    <div class="unnnic-font bold">body-md Lorem ipsum dolor sit amet.</div>
-    <div class="unnnic-font light">body-gt Lorem ipsum dolor sit amet.</div>
-  </div>
-</Preview>
-
-<ul>
-  <li>family-primary (Aleo)</li>
-  <li><s>weight-regular (400)</s></li>
-  <li>weight-black (900)</li>
-  <li>weight-bold (700)</li>
-  <li>weight-light (300)</li>
-</ul>

package/src/stories/InputNext.stories.js

@@ -1,109 +0,0 @@
-import unnnicInputNext from '../components/InputNext/InputNext.vue';
-import icons from '../utils/icons';
-
-const iconsOptions = Object.keys(icons);
-
-export default {
-  title: 'form/InputNext',
-  component: unnnicInputNext,
-  argTypes: {
-    iconLeft: { control: { type: 'select', options: iconsOptions } },
-    iconRight: { control: { type: 'select', options: iconsOptions } },
-    size: { control: { type: 'select', options: ['md', 'sm'] } },
-    type: { control: { type: 'select', options: ['normal', 'error'] } },
-    nativeType: { control: { type: 'select', options: ['text', 'password'] } },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  components: {
-    unnnicInputNext,
-  },
-
-  props: Object.keys(argTypes),
-
-  data() {
-    return {
-      v: '',
-    };
-  },
-
-  template: '<div><pre>v-model: {{ v }}</pre><unnnic-input-next v-model="v" v-bind="$props"></unnnic-input-next></div>',
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  placeholder: 'Placeholder',
-};
-
-export const WithLabel = Template.bind({});
-WithLabel.args = {
-  placeholder: 'Placeholder',
-  label: 'Label',
-  size: undefined,
-  type: undefined,
-  nativeType: undefined,
-};
-
-export const Small = Template.bind({});
-Small.args = {
-  placeholder: 'Placeholder',
-  size: 'sm',
-  type: undefined,
-  nativeType: undefined,
-};
-
-export const ErrorWithMessage = Template.bind({});
-ErrorWithMessage.args = {
-  placeholder: 'Placeholder',
-  error: 'Error message',
-  size: undefined,
-  type: undefined,
-  nativeType: undefined,
-};
-
-export const ErrorWithoutMessage = Template.bind({});
-ErrorWithoutMessage.args = {
-  placeholder: 'Placeholder',
-  error: true,
-  size: undefined,
-  type: undefined,
-  nativeType: undefined,
-};
-
-export const WithMessage = Template.bind({});
-ErrorWithoutMessage.args = {
-  placeholder: 'Placeholder',
-  message: 'Message',
-  size: undefined,
-  type: undefined,
-  nativeType: undefined,
-};
-
-export const PasswordWithToggle = Template.bind({});
-PasswordWithToggle.args = {
-  placeholder: 'Placeholder',
-  allowTogglePassword: true,
-  size: undefined,
-  type: undefined,
-  nativeType: undefined,
-};
-
-export const PasswordWithoutToggle = Template.bind({});
-PasswordWithoutToggle.args = {
-  placeholder: 'Placeholder',
-  nativeType: 'password',
-  size: undefined,
-  type: undefined,
-};
-
-export const IconLeftAndRight = Template.bind({});
-IconLeftAndRight.args = {
-  placeholder: 'Placeholder',
-  iconLeft: 'read-email-at-1',
-  iconRight: 'read-email-at-1',
-  size: undefined,
-  type: undefined,
-  nativeType: undefined,
-};

package/src/stories/Introduction.stories.mdx

@@ -1,207 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
-
-<Meta title="Example/Introduction" />
-
-<style>{`
-  .subheading {
-    --mediumdark: '#999999';
-    font-weight: 900;
-    font-size: 13px;
-    color: #999;
-    letter-spacing: 6px;
-    line-height: 24px;
-    text-transform: uppercase;
-    margin-bottom: 12px;
-    margin-top: 40px;
-  }
-
-  .link-list {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr;
-    row-gap: 10px;
-  }
-
-  @media (min-width: 620px) {
-    .link-list {
-      row-gap: 20px;
-      column-gap: 20px;
-      grid-template-columns: 1fr 1fr;
-    }
-  }
-
-  @media all and (-ms-high-contrast:none) {
-  .link-list {
-      display: -ms-grid;
-      -ms-grid-columns: 1fr 1fr;
-      -ms-grid-rows: 1fr 1fr;
-    }
-  }
-
-  .link-item {
-    display: block;
-    padding: 20px 30px 20px 15px;
-    border: 1px solid #00000010;
-    border-radius: 5px;
-    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
-    color: #333333;
-    display: flex;
-    align-items: flex-start;
-  }
-
-  .link-item:hover {
-    border-color: #1EA7FD50;
-    transform: translate3d(0, -3px, 0);
-    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
-  }
-
-  .link-item:active {
-    border-color: #1EA7FD;
-    transform: translate3d(0, 0, 0);
-  }
-
-  .link-item strong {
-    font-weight: 700;
-    display: block;
-    margin-bottom: 2px;
-  }
-  
-  .link-item img {
-    height: 40px;
-    width: 40px;
-    margin-right: 15px;
-    flex: none;
-  }
-
-  .link-item span {
-    font-size: 14px;
-    line-height: 20px;
-  }
-
-  .tip {
-    display: inline-block;
-    border-radius: 1em;
-    font-size: 11px;
-    line-height: 12px;
-    font-weight: 700;
-    background: #E7FDD8;
-    color: #66BF3C;
-    padding: 4px 12px;
-    margin-right: 10px;
-    vertical-align: top;
-  }
-
-  .tip-wrapper {
-    font-size: 13px;
-    line-height: 20px;
-    margin-top: 40px;
-    margin-bottom: 40px;
-  }
-
-  .tip-wrapper code {
-    font-size: 12px;
-    display: inline-block;
-  }
-
-  
-`}</style>
-
-# Welcome to Storybook
-
-Storybook helps you build UI components in isolation from your app's business logic, data, and context.
-That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
-
-Browse example stories now by navigating to them in the sidebar.
-View their code in the `src/storybook-examples` directory to learn how they work.
-We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
-
-<div className="subheading">Configure</div>
-
-<div className="link-list">
-  <a className="link-item" href="https://storybook.js.org/docs/react/api/presets" target="_blank">
-    <img src={Plugin} alt="plugin" />
-    <span>
-      <strong>Presets for popular tools</strong>
-      Easy setup for TypeScript, SCSS and more.
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/webpack"
-    target="_blank"
-  >
-    <img src={StackAlt} alt="Build" />
-    <span>
-      <strong>Build configuration</strong>
-      How to customize webpack and Babel
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/styling-and-css"
-    target="_blank"
-  >
-    <img src={Colors} alt="colors" />
-    <span>
-      <strong>Styling</strong>
-      How to load and configure CSS libraries
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
-    target="_blank"
-  >
-    <img src={Flow} alt="flow" />
-    <span>
-      <strong>Data</strong>
-      Providers and mocking for data libraries
-    </span>
-  </a>
-</div>
-
-<div className="subheading">Learn</div>
-
-<div className="link-list">
-  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
-    <img src={Repo} alt="repo" />
-    <span>
-      <strong>Storybook documentation</strong>
-      Configure, customize, and extend
-    </span>
-  </a>
-  <a className="link-item" href="https://www.learnstorybook.com" target="_blank">
-    <img src={Direction} alt="direction" />
-    <span>
-      <strong>In-depth guides</strong>
-      Best practices from leading teams
-    </span>
-  </a>
-  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
-    <img src={Code} alt="code" />
-    <span>
-      <strong>GitHub project</strong>
-      View the source and add issues
-    </span>
-  </a>
-  <a className="link-item" href="https://discord.gg/UUt2PJb" target="_blank">
-    <img src={Comments} alt="comments" />
-    <span>
-      <strong>Discord chat</strong>
-      Chat with maintainers and the community
-    </span>
-  </a>
-</div>
-
-<div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{' '}
-  <code>src/storybook-examples/welcome.mdx</code>
-</div>

package/src/stories/ModalNext.stories.js

@@ -1,171 +0,0 @@
-import unnnicModalNext from '../components/ModalNext/ModalNext.vue';
-import icons from '../utils/icons';
-
-const iconsOptions = Object.keys(icons);
-
-const schemesOptions = [
-  'feedback-red',
-  'feedback-green',
-  'feedback-yellow',
-  'feedback-blue',
-  'feedback-grey',
-  'aux-blue',
-  'aux-purple',
-  'aux-orange',
-  'aux-lemon',
-  'aux-pink',
-  'brand-weni',
-  'brand-weni-soft',
-  'neutral-clean',
-  'neutral-cleanest',
-  'neutral-dark',
-  'neutral-soft',
-  'neutral-darkest',
-];
-
-export default {
-  title: 'Example/ModalNext',
-  component: unnnicModalNext,
-  argTypes: {
-    type: { control: { type: 'select', options: ['default', 'video', 'alert'] } },
-    icon: { control: { type: 'select', options: iconsOptions } },
-    scheme: { control: { type: 'select', options: schemesOptions } },
-    text: { control: { type: 'text' } },
-    description: { control: { type: 'text' } },
-    actionPrimaryButtonType: { control: { type: 'select', options: ['primary', 'secondary'] } },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicModalNext },
-  data() {
-    return {
-      open: false,
-    };
-  },
-  template: `<div>
-  <button @click="open = true">Open</button>
-  <unnnic-modal-next v-show="open" v-bind="$props" @close="open = false" />
-</div>`,
-});
-
-export const Video = Template.bind({});
-Video.args = {
-  type: 'video',
-  url: 'https://www.youtube.com/embed/J9QJBPrmoHs',
-  confirmButtonType: undefined,
-};
-
-const TemplateDefault = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicModalNext },
-  data() {
-    return {
-      open: false,
-    };
-  },
-  template: `<div>
-  <button @click="open = true">Open</button>
-  <unnnic-modal-next v-show="open" v-bind="$props" @close="open = false">
-    <template>
-      This is the info content<br>
-      This is the info content<br>
-      This is the info content<br>
-      This is the info content<br>
-      This is the info content<br>
-      This is the info content<br>
-      This is the info content<br>
-      This is the info content<br>
-      This is the info content<br>
-      This is the info content<br>
-      This is the info content<br>
-      This is the info content<br>
-      This is the info content<br>
-      This is the info content<br>
-      This is the info content<br>
-      This is the info content<br>
-      This is the info content<br>
-      This is the info content<br>
-      This is the info content<br>
-      This is the info content<br>
-      This is the info content<br>
-    </template>
-  </unnnic-modal-next>
-</div>`,
-});
-
-export const Default = TemplateDefault.bind({});
-Default.args = {
-  type: undefined,
-  confirmButtonType: undefined,
-};
-
-export const Alert = TemplateDefault.bind({});
-Alert.args = {
-  type: 'alert',
-  icon: 'add-1',
-  scheme: 'feedback-green',
-  title: 'Title',
-  description: 'Description',
-  confirmButtonType: undefined,
-};
-
-const TemplateAlertWithSlots = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicModalNext },
-  data() {
-    return {
-      open: false,
-    };
-  },
-  template: `<div>
-  <button @click="open = true">Open</button>
-  <unnnic-modal-next v-show="open" v-bind="$props" @close="open = false">
-    <template slot="title">
-      Title Slot
-    </template>
-
-    <template slot="description">
-      Description Slot
-    </template>
-  </unnnic-modal-next>
-</div>`,
-});
-
-export const AlertWithSlots = TemplateAlertWithSlots.bind({});
-AlertWithSlots.args = {
-  type: 'alert',
-  icon: 'add-1',
-  scheme: 'feedback-green',
-  confirmButtonType: undefined,
-};
-
-export const AlertWithValidate = TemplateDefault.bind({});
-AlertWithValidate.args = {
-  type: 'alert',
-  icon: 'add-1',
-  scheme: 'feedback-red',
-  title: 'Title',
-  description: 'Description',
-  confirmButtonType: undefined,
-  validate: 'Hello World!',
-  validatePlaceholder: 'Validate Placeholder',
-  validateLabel: 'Validate <b>Label</b>',
-  actionPrimaryLabel: 'Confirm',
-  actionSecondaryLabel: 'Cancel',
-};
-
-export const AlertWithActionButtons = TemplateDefault.bind({});
-AlertWithActionButtons.args = {
-  type: 'alert',
-  icon: 'add-1',
-  scheme: 'feedback-red',
-  title: 'Title',
-  description: 'Description',
-  confirmButtonType: undefined,
-  actionPrimaryLabel: 'Confirm',
-  actionSecondaryLabel: 'Cancel',
-  actionPrimaryButtonType: undefined,
-  showCloseButton: true,
-};