@weni/unnnic-system 2.0.8 → 2.0.10

package/src/locales/pt_br.json

@@ -1,15 +1,18 @@
-{
-  "upload_area": {
-    "title": {
-      "text": "Arraste seu arquivo aqui, ou",
-      "highlight": "procure-o"
-    },
-    "invalid": {
-      "subtitle": "Arquivo não compatível, selecione formatos suportados:"
-    },
-    "subtitle": "Formatos suportados:"
-  },
-  "import_card": {
-    "importing": "Importando"
-  }
-}
+{
+  "upload_area": {
+    "title": {
+      "text": "Arraste seu arquivo aqui, ou",
+      "highlight": "procure-o"
+    },
+    "invalid": {
+      "subtitle": "Arquivo não compatível, selecione formatos suportados:"
+    },
+    "subtitle": "Formatos suportados:"
+  },
+  "import_card": {
+    "importing": "Importando"
+  },
+  "audio_recorder": {
+    "discard_button" : "Descartar"
+  }
+}

package/src/mixins/i18n.js

@@ -14,7 +14,20 @@ export default {
     i18n(...args) {
       const [key, defaults] = args;
 
-      const locale = (this.locale || get(this, '$i18n.locale'))?.toLowerCase();
+      const validLocaleValues = Object.keys(this.$i18n.messages);
+
+      let { locale } = this;
+
+      const treatedSelectedLocale =
+        get(this, '$i18n.locale') === 'en-us'
+          ? 'en'
+          : get(this, '$i18n.locale');
+
+      locale = validLocaleValues.includes(locale)
+        ? locale
+        : treatedSelectedLocale;
+
+      locale = locale.toLowerCase();
 
       let text = get(
         this.translations,

package/src/stories/Alert.stories.js

@@ -1,12 +1,15 @@
+import alertCaller from '../components/Alert/AlertCaller.vue';
+import alert from '../utils/call';
 import unnnicAlert from '../components/Alert/Alert.vue';
-import { unnnicCallAlert } from '../components';
+import alertBanner from '../components/Alert/AlertBanner.vue';
 
 export default {
   title: 'example/Alert',
   component: unnnicAlert,
   argTypes: {
-    type: { control: { type: 'text' } },
     text: { control: { type: 'text' } },
+    showCloseButton: { control: { type: 'boolean' } },
+    title: { control: { type: 'text' } },
     closeText: { control: { type: 'text' } },
     scheme: {
       control: {
@@ -55,7 +58,7 @@ export default {
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { unnnicCallAlert },
+  components: { alertCaller, unnnicAlert },
   template: `
 <div>
   <button @click="unnnicCallAlert">Click for alert</button>
@@ -84,21 +87,14 @@ Recommended use:
 </div>`,
   methods: {
     unnnicCallAlert() {
-      unnnicCallAlert({
-        props: {
-          type: 'success',
-          text: 'Alert'
-        },
-        containerRef: this.$refs.divContainer,
-      })
+      alert.callAlert({ props: this.$props, seconds: this.$props.seconds });
     },
-
   },
 });
 
 const TemplateWithContainerRef = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { unnnicCallAlert },
+  components: { alertCaller, unnnicAlert },
   template: `
     <div ref="divContainer" style="height: 200px; position: relative; border: 1px solid black">
       <button @click="unnnicCallAlert">Click for alert</button>
@@ -114,25 +110,55 @@ const TemplateWithContainerRef = (args, { argTypes }) => ({
     </div>`,
   methods: {
     unnnicCallAlert() {
-      unnnicCallAlert({
-        props: {
-          type: 'success',
-          text: 'Alert'
-        },
+      alert.callAlert({
+        props: this.$props,
         containerRef: this.$refs.divContainer,
-      })
+      });
     },
   },
 });
 
+const TemplateBanner = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { alertBanner },
+  template: `
+    <div>
+      <alert-banner v-bind="$props" />
+
+    <pre>
+    Recommended use:
+
+    &lt;unnnic-alert-banner
+      type            String default 'info' ('info', 'warning', 'danger')
+      text            String required
+      showCloseButton Boolean default false
+      @close          Event
+      link-href       String
+      ┠ link-text    String default 'Learn more'
+      ┖ link-target  String default '_blank'
+    /&gt;
+    </pre>
+    </div>`,
+});
+
 export const Normal = Template.bind({});
 Normal.args = {
-  type: 'success',
+  title: 'Title',
   text: 'Text',
+  icon: 'check-circle-1-1',
+  scheme: 'feedback-green',
 };
 
 export const WithContainerRef = TemplateWithContainerRef.bind({});
 WithContainerRef.args = {
-  type: 'error',
+  title: 'Title',
+  text: 'Text',
+  icon: 'check-circle-1-1',
+  scheme: 'feedback-green',
+};
+
+export const Banner = TemplateBanner.bind({});
+Banner.args = {
   text: 'Text',
+  showCloseButton: false,
 };

package/src/stories/AudioRecorder.stories.js

@@ -5,44 +5,40 @@ export default {
   title: 'Form/AudioRecorder',
   component: unnnicAudioRecorder,
   argTypes: {},
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-
-  components: {
-    unnnicAudioRecorder,
-  },
-
-  data() {
-    return {
-      audio: null,
-      status: '',
-    };
-  },
-
-  template: `
+  render: (args) => ({
+    components: {
+      unnnicAudioRecorder,
+    },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        audio: null,
+        status: '',
+      };
+    },
+    template: `
     <div>
       <button @click="$refs['audio-recorder'].record()">Gravar</button>
 
       <pre>v-model: {{ audio }}</pre>
       <pre>status: {{ status }}</pre>
 
-      <unnnic-audio-recorder v-bind="$props" ref="audio-recorder" v-model="audio" @status="(value) => this.status = value" />
+      <unnnic-audio-recorder v-bind="args" ref="audio-recorder" v-model="audio" @status="(value) => this.status = value" />
     </div>
   `,
-
-  methods: {},
-});
-
-export const Default = Template.bind({});
-
-Default.args = {
-  canDiscard: true,
+  }),
 };
 
-export const Player = Template.bind({});
+export const Default = {
+  args: {
+    canDiscard: true,
+  },
+};
 
-Player.args = {
-  src: AudioSample,
+export const Player = {
+  args: {
+    src: AudioSample,
+  },
 };

package/src/stories/Introduction.mdx

@@ -1,196 +1,196 @@
-import { Meta } from '@storybook/blocks'
-
-<Meta title="Example/Introduction" />
-
-<style>
-  {`
-    .subheading {
-      --mediumdark: '#999999';
-      font-weight: 700;
-      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;
-      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,
-    .link-item p {
-      margin: 0;
-      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 `stories` 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/addons/addon-types"
-    target="_blank"
-  >
-    <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"
-  >
-    <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"
-  >
-    <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"
-  >
-    <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">
-    <span>
-      <strong>Storybook documentation</strong>
-      Configure, customize, and extend
-    </span>
-  </a>
-  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
-    <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">
-    <span>
-      <strong>GitHub project</strong>
-      View the source and add issues
-    </span>
-  </a>
-  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
-    <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>stories/Introduction.stories.mdx</code>
-</div>
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Example/Introduction" />
+
+<style>
+  {`
+    .subheading {
+      --mediumdark: '#999999';
+      font-weight: 700;
+      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;
+      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,
+    .link-item p {
+      margin: 0;
+      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 `stories` 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/addons/addon-types"
+    target="_blank"
+  >
+    <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"
+  >
+    <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"
+  >
+    <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"
+  >
+    <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">
+    <span>
+      <strong>Storybook documentation</strong>
+      Configure, customize, and extend
+    </span>
+  </a>
+  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
+    <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">
+    <span>
+      <strong>GitHub project</strong>
+      View the source and add issues
+    </span>
+  </a>
+  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
+    <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>stories/Introduction.stories.mdx</code>
+</div>

package/src/stories/Slider.stories.js

@@ -3,25 +3,21 @@ import unnnicSlider from '../components/Slider/Slider.vue';
 export default {
   title: 'Form/Slider',
   component: unnnicSlider,
+  argTypes: {
+    size: { control: { type: 'select', options: ['small', 'medium'] } },
+    textLeft: { control: { type: 'text' } },
+    textRight: { control: { type: 'text' } },
+    disabled: { control: { type: 'boolean' } },
+  },
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicSlider },
-  template: '<unnnicSlider v-bind="$props" @valueChange="onChange"/>',
-  methods: {
-    onChange: (value) => {
-      console.log(value);
-    },
+export const Default = {
+  args: {
+    initialValue: 1,
+    minValue: 1,
+    maxValue: 4,
+    step: 1,
+    minLabel: '1',
+    maxLabel: '4',
   },
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  initialValue: 1,
-  minValue: 1,
-  maxValue: 4,
-  step: 1,
-  minLabel: '1',
-  maxLabel: '4',
 };