@weni/unnnic-system 2.0.31 → 2.1.0

package/package.json

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

package/src/components/ModalDialog/ModalDialog.vue

@@ -0,0 +1,286 @@
+<template>
+  <section
+    v-if="modelValue"
+    class="unnnic-modal-dialog"
+  >
+    <section
+      class="unnnic-modal-dialog__overlay"
+      @click.stop="!persistent && close()"
+    />
+    <section
+      :class="[
+        'unnnic-modal-dialog__container',
+        `unnnic-modal-dialog__container--${size}`,
+      ]"
+    >
+      <header
+        v-if="title"
+        class="unnnic-modal-dialog__container__header"
+      >
+        <section class="unnnic-modal-dialog__container__title-container">
+          <UnnnicIcon
+            v-if="icon || type"
+            class="unnnic-modal-dialog__container__title-icon"
+            :icon="icon || iconsMapper[type]?.icon"
+            :scheme="iconScheme || iconsMapper[type]?.scheme"
+            size="md"
+          />
+          <h1 class="unnnic-modal-dialog__container__title-text">
+            {{ title }}
+          </h1>
+        </section>
+        <UnnnicIcon
+          v-if="showCloseIcon"
+          icon="close"
+          clickable
+          @click="close()"
+        />
+      </header>
+      <section class="unnnic-modal-dialog__container__content">
+        <slot></slot>
+      </section>
+      <section
+        v-if="primaryButtonText"
+        :class="[
+          'unnnic-modal-dialog__container__actions',
+          {
+            'unnnic-modal-dialog__container__actions--divider':
+              showActionsDivider,
+          },
+        ]"
+      >
+        <UnnnicButton
+          type="tertiary"
+          :text="secondaryButtonText || i18n('cancel')"
+          @click.stop="
+            secondaryButtonText ? $emit('secondaryButtonClick') : close()
+          "
+        />
+        <UnnnicButton
+          :type="
+            primaryButtonType || primaryButtonTypeMapper[type] || 'primary'
+          "
+          :text="primaryButtonText"
+          @click.stop="$emit('primaryButtonClick')"
+        />
+      </section>
+    </section>
+  </section>
+</template>
+
+<script>
+import UnnnicIcon from '../Icon.vue';
+import UnnnicButton from '../Button/Button.vue';
+import UnnnicI18n from '../../mixins/i18n';
+
+export default {
+  name: 'UnnnicModalDialog',
+  components: {
+    UnnnicIcon,
+    UnnnicButton,
+  },
+  mixins: [UnnnicI18n],
+  props: {
+    modelValue: {
+      type: Boolean,
+      required: true,
+    },
+    persistent: {
+      type: Boolean,
+      default: false,
+    },
+    type: {
+      type: String,
+      default: '',
+      validate(type) {
+        return ['success', 'warning', 'attention'].includes(type);
+      },
+    },
+    size: {
+      type: String,
+      default: 'md',
+      validate(size) {
+        return ['sm', 'md', 'lg'].includes(size);
+      },
+    },
+    title: {
+      type: String,
+      default: 'title',
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    iconScheme: {
+      type: String,
+      default: '',
+    },
+    showCloseIcon: {
+      type: Boolean,
+      default: false,
+    },
+    primaryButtonText: {
+      type: String,
+      default: '',
+    },
+    secondaryButtonText: {
+      type: String,
+      default: '',
+    },
+    primaryButtonType: {
+      type: String,
+      default: '',
+    },
+    showActionsDivider: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['primaryButtonClick', 'secondaryButtonClick', 'update:modelValue'],
+
+  data() {
+    return {
+      defaultTranslations: {
+        cancel: {
+          'pt-br': 'Cancelar',
+          en: 'Cancel',
+          es: 'Cancelar',
+        },
+      },
+      iconsMapper: {
+        success: { icon: 'check_circle', scheme: 'aux-green-500' },
+        warning: { icon: 'warning', scheme: 'aux-red-500' },
+        attention: { icon: 'error', scheme: 'aux-yellow-500' },
+      },
+      primaryButtonTypeMapper: {
+        success: 'primary',
+        warning: 'warning',
+        attention: 'attention',
+      },
+    };
+  },
+  watch: {
+    modelValue(value) {
+      this.updateBodyOverflow(value);
+    },
+  },
+  methods: {
+    close() {
+      this.$emit('update:modelValue', false);
+    },
+    updateBodyOverflow(isHidden) {
+      document.body.style.overflow = isHidden ? 'hidden' : '';
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/scss/unnnic.scss';
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+.unnnic-modal-dialog {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+
+  &__overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+}
+
+.unnnic-modal-dialog__container {
+  display: flex;
+  flex-direction: column;
+  background: $unnnic-color-neutral-white;
+  border-radius: $unnnic-spacing-xs;
+  box-shadow: $unnnic-shadow-level-near;
+  position: fixed;
+  max-height: calc(100vh - $unnnic-spacing-giant);
+  overflow: hidden;
+
+  &--sm {
+    width: 400px;
+  }
+  &--md {
+    width: 600px;
+  }
+  &--lg {
+    width: 800px;
+  }
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid $unnnic-color-neutral-soft;
+    padding: $unnnic-spacing-md;
+    flex-shrink: 0;
+  }
+
+  &__title-container {
+    display: flex;
+    align-items: center;
+    gap: $unnnic-spacing-ant;
+  }
+
+  &__title-icon {
+    font-size: 28px;
+  }
+
+  &__title-text {
+    font-family: $unnnic-font-family-secondary;
+    font-size: $unnnic-font-size-title-sm;
+    font-weight: $unnnic-font-weight-black;
+    line-height: 28px;
+    color: $unnnic-color-neutral-darkest;
+  }
+
+  &__content {
+    padding: $unnnic-spacing-md;
+    color: $unnnic-color-neutral-cloudy;
+    flex-grow: 1;
+    overflow-y: auto;
+    font-family: $unnnic-font-family-secondary;
+
+    &::-webkit-scrollbar {
+      width: $unnnic-spacing-inline-nano;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: $unnnic-color-neutral-cleanest;
+      border-radius: $unnnic-border-radius-pill;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: $unnnic-color-neutral-soft;
+      border-radius: $unnnic-border-radius-pill;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    gap: $unnnic-spacing-sm;
+    padding: $unnnic-spacing-md;
+    flex-shrink: 0;
+    > * {
+      flex-grow: 1;
+    }
+    &--divider {
+      border-top: 1px solid $unnnic-color-neutral-soft;
+    }
+  }
+}
+</style>

package/src/components/index.js

@@ -81,6 +81,7 @@ import Disclaimer from './Disclaimer/Disclaimer.vue';
 import Drawer from './Drawer/Drawer.vue';
 import TableNext from './TableNext/TableNext.vue';
 import ModalNext from './ModalNext/ModalNext.vue';
+import ModalDialog from './ModalDialog/ModalDialog.vue';
 
 export const components = {
   unnnicFormElement: formElement,
@@ -114,6 +115,7 @@ export const components = {
   unnnicLanguageSelect: languageSelect,
   unnnicModal: modal,
   unnnicModalNext: ModalNext,
+  unnnicModalDialog: ModalDialog,
   unnnicModalUpload: modalUpload,
   unnnicSelectSmart: selectSmart,
   // unnnicSelect: select,
@@ -200,6 +202,7 @@ export const unnnicCollapse = collapse;
 export const unnnicRadio = radio;
 export const unnniclanguageSelect = languageSelect;
 export const unnnicModal = modal;
+export const unnnicModalDialog = ModalDialog;
 export const unnnicModalNext = ModalNext;
 export const unnnicModalUpload = modalUpload;
 export const unnnicSelectSmart = selectSmart;

package/src/stories/ModalDialog.mdx

@@ -0,0 +1,64 @@
+import { Meta, Source, Story } from '@storybook/blocks';
+
+import * as ModalDialogStories from './ModalDialog.stories';
+
+<Meta of={ModalDialogStories}/>
+
+# ModalDialog
+
+The ModalDialog was designed to inform the user about a specific task, request information, or involve other tasks.
+
+<Source
+  language='html'
+  dark
+  code={`
+    <UnnnicModalDialog v-model="showModal">
+    <p>Modal Content</p>
+</UnnnicModalDialog>
+  `}
+/>
+
+---
+
+#### **Props Options:**
+
+| Key                 | Description                                                                                                                                   | Values                                | Default |
+|---------------------|-----------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------|---------|
+| type                | Modal type predefinition                                                                                                                      | 'success' \| 'warning' \| 'attention' | ''      |
+| persistent          | Clicking outside of the element will not deactive it                                                                                          | true \| false                         | false   |
+| size                | Modal width size (sm = 400px; md = 600px; lg = 800px)                                                                                         | 'sm' \| 'md' \| 'lg'                  | 'md'    |
+| title               | Modal card title (if not provided, the title section will not be displayed)                                                                   | string                                | ''      |
+| icon                | Custom title section icon (if not provided, the preset icons will be considered according to the chosen modal type)                           | string                                | ''      |
+| iconScheme          | Custom scheme color to icon in title section (if not provided, the preset scheme color will be considered according to the chosen modal type) | string                                | ''      |
+| showCloseIcon       | Show close icon in title section                                                                                                              | boolean                               | false   |
+| primaryButtonText   | Button primary action text (if not provided, the actions section will not be displayed)                                                       | string                                | ''      |
+| secondaryButtonText | Button secondary action text (if not provided and there is primaryButtonText, this button will take 'Cancel' action                           | string                                | ''      |
+| primaryButtonType   | Button primary type (if not provided, defaults to the specified type)                                                                         | string                                | ''      |
+| showActionsDivider  | Show divider in between actions and dialog content                                                                                            | boolean                               | false   |
+
+## Examples
+Some examples of uses of the modal
+
+### Default
+
+<Story of={ModalDialogStories.Default} />
+
+### Warning
+
+<Story of={ModalDialogStories.Warning} />
+
+### Attention
+
+<Story of={ModalDialogStories.Attention} />
+
+### Overflowed Content
+
+<Story of={ModalDialogStories.Overflowed} />
+
+### Form Content
+
+<Story of={ModalDialogStories.Form} />
+
+### Image Content
+
+<Story of={ModalDialogStories.Image} />

package/src/stories/ModalDialog.stories.js

@@ -0,0 +1,208 @@
+import UnnnicModalDialog from '../components/ModalDialog/ModalDialog.vue';
+import UnnnicInput from '../components/Input/Input.vue';
+import UnnnicLabel from '../components/Label/Label.vue';
+import { action } from '@storybook/addon-actions';
+import iconsList from '../utils/iconList';
+import colorsList from '../utils/colorsList';
+
+export default {
+  title: 'Example/ModalDialog',
+  component: UnnnicModalDialog,
+  argTypes: {
+    type: {
+      control: {
+        type: 'select',
+      },
+      options: ['', 'success', 'warning', 'attention'],
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+    },
+    icon: { options: ['', ...iconsList], control: { type: 'select' } },
+    iconScheme: { control: { type: 'select' }, options: ['', ...colorsList] },
+    title: { control: 'text' },
+    showCloseIcon: { control: 'boolean' },
+    primaryButtonText: { control: 'text' },
+    secondaryButtonText: { control: 'text' },
+    primaryButtonType: {
+      control: { type: 'select' },
+      options: [
+        '',
+        'primary',
+        'secondary',
+        'tertiary',
+        'alternative',
+        'warning',
+        'attention',
+      ],
+    },
+    showActionsDivider: { control: 'boolean' },
+    persistent: { control: 'boolean' },
+  },
+  args: {
+    modelValue: false,
+    title: 'Default Modal',
+    type: '',
+    size: 'md',
+    showCloseIcon: true,
+    primaryButtonText: 'OK',
+  },
+};
+
+const Template = (args) => ({
+  components: { UnnnicModalDialog },
+  setup() {
+    const updateModelValue = (value) => {
+      action('update:modelValue')(value);
+      args.modelValue = value;
+    };
+    return { args, updateModelValue };
+  },
+  template: `
+  <div>
+    <button @click="updateModelValue(true)">Open Modal</button>
+    <unnnic-modal-dialog v-bind="args" @primaryButtonClick="primaryButtonClick" @secondaryButtonClick="secondaryButtonClick" @update:modelValue="updateModelValue">
+      <template v-slot>Slot content here</template>
+    </unnnic-modal-dialog>
+  </div>
+  `,
+  methods: {
+    primaryButtonClick: action('primaryButtonClick'),
+    secondaryButtonClick: action('secondaryButtonClick'),
+  },
+});
+
+const TemplateOverflowed = (args) => ({
+  components: { UnnnicModalDialog },
+  setup() {
+    const updateModelValue = (value) => {
+      action('update:modelValue')(value);
+      args.modelValue = value;
+    };
+    return { args, updateModelValue };
+  },
+  template: `
+  <div>
+    <button @click="updateModelValue(true)">Open Modal</button>
+    <unnnic-modal-dialog v-bind="args" @primaryButtonClick="primaryButtonClick" @secondaryButtonClick="secondaryButtonClick" @update:modelValue="updateModelValue">
+      <p style="margin: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non gravida velit. Mauris feugiat bibendum elit, ac semper tortor tempor quis. Maecenas ullamcorper condimentum ligula. Proin a rutrum enim. Nulla egestas porttitor congue. Suspendisse maximus, ante finibus aliquet hendrerit, metus nulla eleifend justo, et venenatis augue justo id ligula. Aenean convallis massa ligula, at scelerisque metus elementum at. Nulla facilisi. Integer imperdiet bibendum hendrerit. Etiam lobortis congue commodo. In dapibus odio sapien, ac volutpat lorem porta at.</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non gravida velit. Mauris feugiat bibendum elit, ac semper tortor tempor quis. Maecenas ullamcorper condimentum ligula. Proin a rutrum enim. Nulla egestas porttitor congue. Suspendisse maximus, ante finibus aliquet hendrerit, metus nulla eleifend justo, et venenatis augue justo id ligula. Aenean convallis massa ligula, at scelerisque metus elementum at. Nulla facilisi. Integer imperdiet bibendum hendrerit. Etiam lobortis congue commodo. In dapibus odio sapien, ac volutpat lorem porta at.</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non gravida velit. Mauris feugiat bibendum elit, ac semper tortor tempor quis. Maecenas ullamcorper condimentum ligula. Proin a rutrum enim. Nulla egestas porttitor congue. Suspendisse maximus, ante finibus aliquet hendrerit, metus nulla eleifend justo, et venenatis augue justo id ligula. Aenean convallis massa ligula, at scelerisque metus elementum at. Nulla facilisi. Integer imperdiet bibendum hendrerit. Etiam lobortis congue commodo. In dapibus odio sapien, ac volutpat lorem porta at.</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non gravida velit. Mauris feugiat bibendum elit, ac semper tortor tempor quis. Maecenas ullamcorper condimentum ligula. Proin a rutrum enim. Nulla egestas porttitor congue. Suspendisse maximus, ante finibus aliquet hendrerit, metus nulla eleifend justo, et venenatis augue justo id ligula. Aenean convallis massa ligula, at scelerisque metus elementum at. Nulla facilisi. Integer imperdiet bibendum hendrerit. Etiam lobortis congue commodo. In dapibus odio sapien, ac volutpat lorem porta at.</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non gravida velit. Mauris feugiat bibendum elit, ac semper tortor tempor quis. Maecenas ullamcorper condimentum ligula. Proin a rutrum enim. Nulla egestas porttitor congue. Suspendisse maximus, ante finibus aliquet hendrerit, metus nulla eleifend justo, et venenatis augue justo id ligula. Aenean convallis massa ligula, at scelerisque metus elementum at. Nulla facilisi. Integer imperdiet bibendum hendrerit. Etiam lobortis congue commodo. In dapibus odio sapien, ac volutpat lorem porta at.</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non gravida velit. Mauris feugiat bibendum elit, ac semper tortor tempor quis. Maecenas ullamcorper condimentum ligula. Proin a rutrum enim. Nulla egestas porttitor congue. Suspendisse maximus, ante finibus aliquet hendrerit, metus nulla eleifend justo, et venenatis augue justo id ligula. Aenean convallis massa ligula, at scelerisque metus elementum at. Nulla facilisi. Integer imperdiet bibendum hendrerit. Etiam lobortis congue commodo. In dapibus odio sapien, ac volutpat lorem porta at.</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non gravida velit. Mauris feugiat bibendum elit, ac semper tortor tempor quis. Maecenas ullamcorper condimentum ligula. Proin a rutrum enim. Nulla egestas porttitor congue. Suspendisse maximus, ante finibus aliquet hendrerit, metus nulla eleifend justo, et venenatis augue justo id ligula. Aenean convallis massa ligula, at scelerisque metus elementum at. Nulla facilisi. Integer imperdiet bibendum hendrerit. Etiam lobortis congue commodo. In dapibus odio sapien, ac volutpat lorem porta at.</p>
+    </unnnic-modal-dialog>
+  </div>
+  `,
+  methods: {
+    primaryButtonClick: action('primaryButtonClick'),
+    secondaryButtonClick: action('secondaryButtonClick'),
+  },
+});
+
+const TemplateForm = (args) => ({
+  components: { UnnnicModalDialog, UnnnicLabel, UnnnicInput },
+  setup() {
+    const updateModelValue = (value) => {
+      action('update:modelValue')(value);
+      args.modelValue = value;
+    };
+    return { args, updateModelValue };
+  },
+  template: `
+  <div>
+    <button @click="updateModelValue(true)">Open Modal</button>
+    <unnnic-modal-dialog v-bind="args" @primaryButtonClick="primaryButtonClick" @secondaryButtonClick="secondaryButtonClick" @update:modelValue="updateModelValue">
+      <p style="margin-top: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non gravida velit. Mauris feugiat bibendum elit, ac semper tortor tempor quis.</p>
+      <form>
+        <UnnnicLabel label="Label"></UnnnicLabel>
+        <UnnnicInput placeholder="Placeholder"></UnnnicInput>
+        <UnnnicLabel label="Label"></UnnnicLabel>
+        <UnnnicInput placeholder="Placeholder"></UnnnicInput>
+        <UnnnicLabel label="Label"></UnnnicLabel>
+        <UnnnicInput placeholder="Placeholder"></UnnnicInput>
+      </form>
+    </unnnic-modal-dialog>
+  </div>
+  `,
+  methods: {
+    primaryButtonClick: action('primaryButtonClick'),
+    secondaryButtonClick: action('secondaryButtonClick'),
+  },
+});
+
+const TemplateImage = (args) => ({
+  components: { UnnnicModalDialog },
+  setup() {
+    const updateModelValue = (value) => {
+      action('update:modelValue')(value);
+      args.modelValue = value;
+    };
+    return { args, updateModelValue };
+  },
+  template: `
+  <div>
+    <button @click="updateModelValue(true)">Open Modal</button>
+    <unnnic-modal-dialog v-bind="args" @primaryButtonClick="primaryButtonClick" @secondaryButtonClick="secondaryButtonClick" @update:modelValue="updateModelValue">
+      <section style="display: flex; flex-direction: column; align-items: center; gap: 24px">
+        <img height='120' width='120' src="./doris.png"/>
+        <section style="display: flex; flex-direction: column; justify-content: center; align-items: center">
+          <h1 style="font-family: 'Lato'; font-size: 20px; font-weight: 900; line-height: 28px; padding: 0; margin: 0; color:#3B414D">Title</h1>
+          <p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
+        </section>
+      </section>
+    </unnnic-modal-dialog>
+  </div>
+  `,
+  methods: {
+    primaryButtonClick: action('primaryButtonClick'),
+    secondaryButtonClick: action('secondaryButtonClick'),
+  },
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Default Modal',
+  type: '',
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  title: 'Warning Modal',
+  type: 'warning',
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  title: 'Success Modal',
+  type: 'success',
+};
+
+export const Attention = Template.bind({});
+Attention.args = {
+  title: 'Attention Modal',
+  type: 'attention',
+};
+
+export const Overflowed = TemplateOverflowed.bind({});
+Overflowed.args = {
+  title: 'Overflowed Modal',
+  type: '',
+};
+
+export const Form = TemplateForm.bind({});
+Form.args = {
+  title: 'Form Modal',
+  type: '',
+  showActionsDivider: true,
+  persistent: true,
+};
+
+export const Image = TemplateImage.bind({});
+Image.args = {
+  title: '',
+  type: '',
+  showActionsDivider: true,
+};