@weni/unnnic-system 2.0.10 → 2.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "2.0.10",
+  "version": "2.0.12",
   "type": "commonjs",
   "files": [
     "dist",

package/src/components/Disclaimer/Disclaimer.vue

@@ -0,0 +1,64 @@
+<template>
+  <section class="unnnic-disclaimer">
+    <unnnic-icon
+      class="unnnic-disclaimer__icon"
+      size="avatar-nano"
+      :icon="icon"
+      :scheme="iconColor"
+    />
+    <p class="unnnic-disclaimer__text">{{ text }}</p>
+  </section>
+</template>
+
+<script>
+import icons from '../../utils/iconList';
+import colors from '../../utils/colorsList';
+
+import unnnicIcon from '../Icon.vue';
+
+export default {
+  name: 'unnnic-disclaimer',
+  components: { unnnicIcon },
+  props: {
+    text: {
+      type: String,
+      required: true,
+    },
+    icon: {
+      type: String,
+      default: 'alert-circle-1-1',
+      validator(value) {
+        return icons.includes(value);
+      },
+    },
+    iconColor: {
+      type: String,
+      validator(value) {
+        return colors.includes(value);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/scss/unnnic.scss';
+.unnnic-disclaimer {
+  display: inline-flex;
+  align-items: center;
+  gap: $unnnic-spacing-xs;
+  padding: $unnnic-spacing-sm;
+  border-radius: $unnnic-border-radius-sm;
+  border: 1px solid $unnnic-color-neutral-soft;
+  background: $unnnic-color-background-lightest;
+  .unnnic-disclaimer__text {
+    margin: 0;
+    font-family: $unnnic-font-family-secondary;
+    font-size: $unnnic-font-size-body-gt;
+    line-height: $unnnic-line-height-large * 1.375;
+    font-weight: $unnnic-font-weight-regular;
+    color: $unnnic-color-neutral-dark;
+  }
+}
+
+</style>

package/src/components/Drawer/Drawer.vue

@@ -0,0 +1,262 @@
+<template>
+  <aside
+    v-if="modelValue"
+    class="unnnic-drawer"
+  >
+    <section
+      class="unnnic-drawer__overlay"
+      @click.stop="close"
+    />
+    <transition
+      appear
+      name="drawer"
+    >
+      <section
+        v-if="showDrawer"
+        :class="[
+          'unnnic-drawer__container',
+          wide && 'unnnic-drawer__container--wide',
+        ]"
+      >
+        <header class="unnnic-drawer__header">
+          <section class="unnnic-drawer__title-container">
+            <h1 class="unnnic-drawer__title">{{ title }}</h1>
+            <p
+              v-if="description"
+              class="unnnic-drawer__description"
+            >
+              {{ description }}
+            </p>
+          </section>
+          <unnnic-icon
+            class="unnnic-drawer__close"
+            icon="arrow_back"
+            size="avatar-nano"
+            clickable
+            @click="close"
+          />
+        </header>
+        <section class="unnnic-drawer__content">
+          <slot name="content"></slot>
+        </section>
+        <footer
+          v-if="showFooter"
+          class="unnnic-drawer__footer"
+        >
+          <unnnic-button
+            v-if="secondaryButtonText"
+            size="large"
+            type="tertiary"
+            :disabled="disabledSecondaryButton"
+            :loading="loadingSecondaryButton"
+            :text="secondaryButtonText"
+            @click="$emit('secondaryButtonClick')"
+          />
+          <unnnic-button
+            v-if="primaryButtonText"
+            size="large"
+            :disabled="disabledPrimaryButton"
+            :loading="loadingPrimaryButton"
+            :type="primaryButtonType"
+            :text="primaryButtonText"
+            @click="$emit('primaryButtonClick')"
+          />
+        </footer>
+      </section>
+    </transition>
+  </aside>
+</template>
+
+<script>
+import unnnicIcon from '../Icon.vue';
+import unnnicButton from '../Button/Button.vue';
+
+export default {
+  name: 'unnnic-drawer',
+  emits: ['primaryButtonClick', 'secondaryButtonClick', 'close'],
+  components: {
+    unnnicIcon,
+    unnnicButton,
+  },
+  data() {
+    return {
+      showDrawer: true,
+    };
+  },
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+    },
+    disabledPrimaryButton: {
+      type: Boolean,
+      default: false,
+    },
+    disabledSecondaryButton: {
+      type: Boolean,
+      default: false,
+    },
+    loadingPrimaryButton: {
+      type: Boolean,
+      default: false,
+    },
+    loadingSecondaryButton: {
+      type: Boolean,
+      default: false,
+    },
+    primaryButtonText: {
+      type: String,
+    },
+    primaryButtonType: {
+      type: String,
+      default: 'primary',
+    },
+    secondaryButtonText: {
+      type: String,
+    },
+    wide: {
+      type: Boolean,
+      default: false,
+    },
+    modelValue: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    showFooter() {
+      return !!(this.primaryButtonText || this.secondaryButtonText);
+    },
+  },
+  methods: {
+    close() {
+      this.showDrawer = false;
+      setTimeout(() => {
+        this.$emit('close');
+        this.showDrawer = true;
+      }, 200);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/scss/unnnic.scss';
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+@keyframes drawerOpen {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes drawerClose {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+.drawer-enter-active,
+.drawer-enter-to {
+  animation: drawerOpen 200ms ease-in;
+}
+
+.drawer-leave-active,
+.drawer-leave-to {
+  display: none;
+  animation: drawerClose 200ms ease-in;
+}
+
+.unnnic-drawer {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 8;
+}
+
+.unnnic-drawer__overlay {
+  z-index: 9;
+  background-color: rgba(0, 0, 0, 0.4);
+  width: 100%;
+  height: 100%;
+}
+
+.unnnic-drawer__container {
+  z-index: 10;
+  top: 0;
+  right: 0;
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  font-family: $unnnic-font-family-secondary;
+  justify-content: space-between;
+  height: 100%;
+  background-color: $unnnic-color-neutral-white;
+  width: calc(100% / 3);
+
+  &--wide {
+    width: 50%;
+  }
+
+  .unnnic-drawer__header {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid $unnnic-color-neutral-soft;
+    padding: $unnnic-spacing-md;
+    .unnnic-drawer__title-container {
+      .unnnic-drawer__title {
+        color: $unnnic-color-neutral-darkest;
+        font-family: $unnnic-font-family-secondary;
+        font-size: $unnnic-font-size-title-sm;
+        font-weight: $unnnic-font-weight-black;
+        line-height: $unnnic-line-height-large * 1.75;
+      }
+
+      .unnnic-drawer__description {
+        color: $unnnic-color-neutral-cloudy;
+        font-family: $unnnic-font-family-secondary;
+        font-size: $unnnic-font-size-body-gt;
+        font-weight: $unnnic-font-weight-regular;
+        line-height: $unnnic-line-height-large * 1.375;
+      }
+    }
+
+    .unnnic-drawer__close {
+      margin: $unnnic-spacing-nano;
+      transform: rotate(180deg);
+      display: flex;
+    }
+  }
+
+  .unnnic-drawer__content {
+    overflow-y: auto;
+    color: $unnnic-color-neutral-cloudy;
+    padding: $unnnic-spacing-md $unnnic-spacing-md 0 $unnnic-spacing-md;
+    flex: 1 0 0;
+  }
+
+  .unnnic-drawer__footer {
+    display: flex;
+    padding: $unnnic-spacing-md;
+    gap: $unnnic-spacing-ant;
+    > * {
+      flex-grow: 1;
+    }
+  }
+}
+</style>

package/src/components/index.js

@@ -77,6 +77,8 @@ import ChatsUserAvatar from './ChatsUserAvatar/ChatsUserAvatar.vue';
 import ChartMultiLine from './ChartMultiLine/ChartMultiLine.vue';
 import EmojiPicker from './EmojiPicker/EmojiPicker.vue';
 import ChartFunnel from './ChartFunnel/ChartFunnel.vue';
+import Disclaimer from './Disclaimer/Disclaimer.vue';
+import Drawer from './Drawer/Drawer.vue';
 
 export const components = {
   unnnicFormElement: formElement,
@@ -159,6 +161,8 @@ export const components = {
   unnnicChartMultiLine: ChartMultiLine,
   unnnicEmojiPicker: EmojiPicker,
   unnnicChartFunnel: ChartFunnel,
+  unnnicDisclaimer: Disclaimer,
+  unnnicDrawer: Drawer,
 };
 
 export const unnnicFontSize = fontSize;
@@ -242,3 +246,5 @@ export const unnnicChatsUserAvatar = ChatsUserAvatar;
 export const unnnicChartMultiLine = ChartMultiLine;
 export const unnnicEmojiPicker = EmojiPicker;
 export const unnnicChartFunnel = ChartFunnel;
+export const unnnicDisclaimer = Disclaimer;
+export const unnnicDrawer = Drawer;

package/src/stories/Disclaimer.stories.js

@@ -0,0 +1,37 @@
+import unnnicDisclaimer from '../components/Disclaimer/Disclaimer.vue';
+import icons from '../utils/iconList';
+import colors from '../utils/colorsList';
+
+export default {
+    title: 'Example/Disclaimer',
+    component: unnnicDisclaimer,
+    args: {},
+    argTypes: {
+        text: { control: { type: 'text' } },
+        icon: { options: icons, control: { type: 'select', } },
+        iconColor: { options: colors, control: { type: 'select', } },
+    },
+};
+
+const Template = (args) => ({
+    components: {
+        unnnicDisclaimer,
+    },
+    setup() {
+        return { args };
+    },
+    props: Object.keys(args),
+    template: `
+     <div>
+       <unnnic-disclaimer v-bind="args" />
+     </div>
+    `,
+});
+
+export const Default = Template.bind({});
+
+Default.args = {
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    icon: 'alert-circle-1-1',
+    iconColor: 'feedback-yellow',
+};

package/src/stories/Drawer.stories.js

@@ -0,0 +1,150 @@
+import unnnicDrawer from '../components/Drawer/Drawer.vue';
+import unnnicButton from '../components/Button/Button.vue';
+
+const primaryButtonTypeOptions = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'alternative',
+  'warning',
+  'attention',
+];
+
+export default {
+  title: 'Example/Drawer',
+  component: unnnicDrawer,
+  argTypes: {
+    title: { control: { type: 'text' } },
+    description: { control: { type: 'text' } },
+    primaryButtonType: {
+      options: primaryButtonTypeOptions,
+      control: { type: 'select' },
+    },
+    disabledPrimaryButton: { control: { type: 'boolean' } },
+    disabledSecondaryButton: { control: { type: 'boolean' } },
+    loadingPrimaryButton: { control: { type: 'boolean' } },
+    loadingSecondaryButton: { control: { type: 'boolean' } },
+    primaryButtonText: { control: { type: 'text' } },
+    secondaryButtonText: { control: { type: 'text' } },
+    modelValue: { control: { type: 'boolean' } },
+    wide: { control: { type: 'boolean' } },
+  },
+};
+
+const Template = (args) => ({
+  props: Object.keys(args),
+  setup() {
+    return { args };
+  },
+  components: { unnnicDrawer, unnnicButton },
+  data() {
+    return {
+      opened: false,
+    };
+  },
+  methods: {
+    primaryClick() {
+      console.log('primaryClick');
+    },
+    secondaryClick() {
+      console.log('secondaryClick');
+    },
+  },
+  template: `
+  <div>
+    <pre>v-model: {{ opened }}</pre>
+    <button @click="opened = !opened">Change</button>
+    <unnnic-drawer v-bind="args" v-model="opened" @close="opened = false" @primaryButtonClick="primaryClick" @secondaryButtonClick="secondaryClick">
+      <template #content>
+        <p style="padding: 0; margin:0;">Conteúdo</p>
+      </template>
+    </unnnic-drawer>
+  </div>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Title',
+  description: 'Description',
+  primaryButtonText: 'Confirmar',
+  secondaryButtonText: 'Cancelar',
+};
+
+export const Wide = Template.bind({});
+Wide.args = {
+  title: 'Title',
+  description: 'Description',
+  primaryButtonText: 'Confirmar',
+  secondaryButtonText: 'Cancelar',
+  wide: true,
+};
+
+const TemplateOveflowed = (args) => ({
+  props: Object.keys(args),
+  components: { unnnicDrawer, unnnicButton },
+  setup() {
+    return { args };
+  },
+  data() {
+    return {
+      opened: false,
+    };
+  },
+  template: `
+  <div>
+    <pre>v-model: {{ opened }}</pre>
+    <button @click="opened = !opened">Change</button>
+    <unnnic-drawer v-bind="args" v-model="opened" @close="opened = false">
+      <template #content>
+        <p style="padding: 0; margin:0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum dolor viverra, aliquam metus dictum, vehicula felis. Nulla sapien nisi, laoreet sit amet nisi sed, consectetur ornare odio. Nullam facilisis a ligula quis accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus et sodales ex. Donec mauris dui, tempor eget lorem vel, blandit consequat tellus. Maecenas ut justo vitae orci commodo consectetur eget id nisl. Donec auctor sollicitudin ex at lacinia. Integer lobortis, eros nec congue facilisis, augue nisl elementum nibh, pharetra euismod odio turpis eu lorem. Vivamus a tristique tellus.</p>
+      </template>
+    </unnnic-drawer>
+  </div>
+  `,
+});
+
+export const ContentOverflowed = TemplateOveflowed.bind({});
+ContentOverflowed.args = {
+  title: 'Title',
+  description: 'Description',
+  primaryButtonText: 'Confirmar',
+  secondaryButtonText: 'Cancelar',
+  wide: true,
+};
+
+const TemplateVideo = (args) => ({
+  props: Object.keys(args),
+  components: { unnnicDrawer, unnnicButton },
+  setup() {
+    return { args };
+  },
+  data() {
+    return {
+      opened: false,
+    };
+  },
+  template: `
+  <div>
+    <pre>v-model: {{ opened }}</pre>
+    <button @click="opened = !opened">Change</button>
+    <unnnic-drawer v-bind="args" v-model="opened" @close="opened = false">
+      <template #content>
+        <iframe width="100%" height="315" src="https://www.youtube.com/embed/dD8ENnN-2CI?si=68dJEsG5FdiNaYvY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+      </template>
+    </unnnic-drawer>
+  </div>
+  `,
+});
+
+export const ContentVideo = TemplateVideo.bind({});
+ContentVideo.args = {
+  title: 'Title',
+  description: 'Description',
+  wide: true,
+};

package/.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
-}