@weni/unnnic-system 1.10.19 → 1.10.21

package/src/components/TextArea/TextArea.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['unnnic-text-area', { disabled }, size]">
+  <div :class="['unnnic-text-area', { disabled }, size, type]">
     <div v-if="label" class="label">{{ label }}</div>
 
     <textarea
@@ -10,7 +10,14 @@
       @input="$emit('input', $event.srcElement.value)"
     ></textarea>
 
-    <div v-if="maxLength" class="helper">{{ value.length }}/{{ maxLength }}</div>
+    <div v-if="(maxLength && type === 'normal')" class="helper">
+      {{ value.length }}/{{ maxLength }}
+    </div>
+    <div v-if="type === 'error'" class="error-list">
+      <span v-for="(error, index) in errors" :key="index">
+        {{ error }}
+      </span>
+    </div>
   </div>
 </template>
 
@@ -41,12 +48,25 @@ export default {
     disabled: {
       type: Boolean,
     },
+
+    type: {
+      type: String,
+      default: 'normal',
+      validator(value) {
+        return ['normal', 'error'].indexOf(value) !== -1;
+      },
+    },
+
+    errors: {
+      type: Array,
+      default: () => [],
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-text-area {
   .label {
@@ -136,5 +156,38 @@ export default {
       color: $unnnic-color-neutral-cleanest;
     }
   }
+
+  &.error {
+    .label {
+      color: $unnnic-color-feedback-red;
+    }
+
+    textarea {
+      border-color: $unnnic-color-feedback-red;
+      &::placeholder {
+        color: $unnnic-color-feedback-red;
+      }
+    }
+
+    .error-list {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      width: 100%;
+
+      color: $unnnic-color-feedback-red;
+      font-family: $unnnic-font-family-secondary;
+      font-size: $unnnic-font-size-body-md;
+      line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
+      font-weight: $unnnic-font-weight-regular;
+      margin-top: $unnnic-spacing-stack-nano;
+
+      span {
+        max-width: 100%;
+        word-wrap: break-word;
+        text-align: right;
+      }
+    }
+  }
 }
 </style>

package/src/locales/en.json

@@ -1,15 +1,15 @@
-{
-  "upload_area": {
-    "title": {
-      "text": "Drag your file here or",
-      "highlight": "search it"
-    },
-    "invalid": {
-      "subtitle": "File not supported, select supported formats:"
-    },
-    "subtitle": "Supported formats:"
-  },
-  "import_card": {
-    "importing": "Importing"
-  }
-}
+{
+  "upload_area": {
+    "title": {
+      "text": "Drag your file here or",
+      "highlight": "search it"
+    },
+    "invalid": {
+      "subtitle": "File not supported, select supported formats:"
+    },
+    "subtitle": "Supported formats:"
+  },
+  "import_card": {
+    "importing": "Importing"
+  }
+}

package/src/locales/es.json

@@ -1,15 +1,15 @@
-{
-  "upload_area": {
-    "title": {
-      "text": "Arrastra tu archivo aquí o",
-      "highlight": "búscalo"
-    },
-    "invalid": {
-      "subtitle": "Archivo no compatible, seleccione los formatos compatibles:"
-    },
-    "subtitle": "Formatos compatibles:"
-  },
-  "import_card": {
-    "importing": "Importando"
-  }
-}
+{
+  "upload_area": {
+    "title": {
+      "text": "Arrastra tu archivo aquí o",
+      "highlight": "búscalo"
+    },
+    "invalid": {
+      "subtitle": "Archivo no compatible, seleccione los formatos compatibles:"
+    },
+    "subtitle": "Formatos compatibles:"
+  },
+  "import_card": {
+    "importing": "Importando"
+  }
+}

package/src/locales/pt_br.json

@@ -1,15 +1,15 @@
-{
-  "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"
+  }
+}

package/src/stories/AudioRecorder.stories.js

@@ -38,5 +38,5 @@ Default.args = {
 export const Player = Template.bind({});
 
 Player.args = {
-  src: 'http://127.0.0.1:8081/1667509049894.mp3',
+  src: 'http://172.17.32.1:8080/sample-3s.mp3',
 };

package/src/stories/Introduction.stories.mdx

@@ -1,207 +1,207 @@
-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>
+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/TextArea.stories.js

@@ -5,6 +5,7 @@ export default {
   component: unnnicTextArea,
   argTypes: {
     size: { control: { type: 'select', options: ['md', 'sm'] } },
+    type: { control: { type: 'select', options: ['normal', 'error'] } },
   },
 };
 
@@ -37,4 +38,6 @@ Default.args = {
   placeholder: 'Placeholder',
   maxLength: 150,
   disabled: false,
+  type: 'normal',
+  errors: [],
 };

package/src/utils/icons.js

@@ -4,6 +4,7 @@ import add1 from '!!svg-inline-loader!../assets/icons/add-1.svg';
 import addCircle1 from '!!svg-inline-loader!../assets/icons/add-circle-1.svg';
 import alarmBell2 from '!!svg-inline-loader!../assets/icons/alarm-bell-2.svg';
 import alarmBell3 from '!!svg-inline-loader!../assets/icons/alarm-bell-3.svg';
+import alarmBellRing from '!!svg-inline-loader!../assets/icons/alarm-bell-ring.svg';
 import alertCircle1 from '!!svg-inline-loader!../assets/icons/alert-circle-1.svg';
 import alertCircle11 from '!!svg-inline-loader!../assets/icons/alert-circle-1-1.svg';
 import americanExpress from '!!svg-inline-loader!../assets/icons/american-express.svg';
@@ -36,6 +37,7 @@ import checkboxLess from '!!svg-inline-loader!../assets/icons/checkbox-less.svg'
 import checkboxSelect from '!!svg-inline-loader!../assets/icons/checkbox-select.svg';
 import checkCircle11 from '!!svg-inline-loader!../assets/icons/check-circle-1-1.svg';
 import checkCircle111 from '!!svg-inline-loader!../assets/icons/check-circle-1-1-1.svg';
+import checkDouble from '!!svg-inline-loader!../assets/icons/check-double.svg';
 import checkSquare1 from '!!svg-inline-loader!../assets/icons/check-square-1.svg';
 import checkSquare2 from '!!svg-inline-loader!../assets/icons/check-square-2.svg';
 import close1 from '!!svg-inline-loader!../assets/icons/close-1.svg';
@@ -121,6 +123,7 @@ import radioDefault from '!!svg-inline-loader!../assets/icons/radio-default.svg'
 import radioDisable from '!!svg-inline-loader!../assets/icons/radio-disable.svg';
 import radioSelected from '!!svg-inline-loader!../assets/icons/radio-selected.svg';
 import ratingStar1 from '!!svg-inline-loader!../assets/icons/rating-star-1.svg';
+import ratingStar11 from '!!svg-inline-loader!../assets/icons/rating-star-1-1.svg';
 import readEmailAt1 from '!!svg-inline-loader!../assets/icons/read-email-at-1.svg';
 import scienceFictionRobot1 from '!!svg-inline-loader!../assets/icons/science-fiction-robot-1.svg';
 import scienceFictionRobot2 from '!!svg-inline-loader!../assets/icons/science-fiction-robot-2.svg';
@@ -170,6 +173,7 @@ export default {
   'add-circle-1': addCircle1,
   'alarm-bell-2': alarmBell2,
   'alarm-bell-3': alarmBell3,
+  'alarm-bell-ring': alarmBellRing,
   'alert-circle-1-1': alertCircle11,
   'alert-circle-1': alertCircle1,
   'american-express': americanExpress,
@@ -198,6 +202,7 @@ export default {
   'check-2': check2,
   'check-circle-1-1-1': checkCircle111,
   'check-circle-1-1': checkCircle11,
+  'check-double': checkDouble,
   'check-square-1': checkSquare1,
   'check-square-2': checkSquare2,
   'checkbox-default': checkboxDefault,
@@ -287,6 +292,7 @@ export default {
   'radio-disable': radioDisable,
   'radio-selected': radioSelected,
   'rating-star-1': ratingStar1,
+  'rating-star-1-1': ratingStar11,
   'read-email-at-1': readEmailAt1,
   'science-fiction-robot-1': scienceFictionRobot1,
   'science-fiction-robot-2': scienceFictionRobot2,