@weni/unnnic-system 3.31.1-alpha.2 → 3.32.0

package/src/components/Alert/Version1dot1.vue

@@ -0,0 +1,231 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div
+    ref="alertContainer"
+    class="alert-container"
+  >
+    <div
+      :class="[
+        'alert',
+        {
+          'alert--scheme-aux-green':
+            scheme === 'feedback-green' || type === 'success',
+          'alert--scheme-aux-red':
+            scheme === 'feedback-red' || type === 'error',
+        },
+      ]"
+    >
+      <div
+        ref="progress"
+        class="alert__progress"
+      ></div>
+
+      <div
+        v-show="text"
+        class="alert__text"
+      >
+        {{ text }}
+      </div>
+
+      <div
+        class="alert__close"
+        @click="emitClose"
+      >
+        <UnnnicIcon
+          icon="close-1"
+          size="sm"
+          scheme="fg-inverted"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import UnnnicIcon from '../Icon.vue';
+
+export default {
+  components: {
+    UnnnicIcon,
+  },
+  props: {
+    text: {
+      type: String,
+      default: null,
+    },
+    scheme: {
+      type: String,
+      default: null,
+    },
+    onClose: {
+      type: Function,
+      default: () => {},
+    },
+    type: {
+      type: String,
+      default: 'default',
+    },
+  },
+  emits: ['close'],
+
+  mounted() {
+    this.$refs.progress.addEventListener('animationend', () => {
+      this.$refs.alertContainer.classList.add('slide-down');
+    });
+
+    this.$refs.alertContainer.addEventListener('animationend', (event) => {
+      if (event.animationName?.startsWith('slideDown')) {
+        this.emitClose();
+      }
+    });
+  },
+
+  methods: {
+    emitClose() {
+      this.onClose();
+
+      this.$emit('close');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.alert-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  animation: slideUp 200ms ease;
+  pointer-events: none;
+
+  @keyframes slideUp {
+    from {
+      bottom: -3.375 * $unnnic-font-size;
+    }
+
+    to {
+      bottom: 0;
+    }
+  }
+
+  &.slide-down {
+    animation-name: slideDown;
+  }
+
+  @keyframes slideDown {
+    from {
+      bottom: 0;
+    }
+
+    to {
+      bottom: -3.375 * $unnnic-font-size;
+    }
+  }
+}
+
+.alert {
+  position: relative;
+  border-radius: $unnnic-border-radius-sm;
+
+  display: inline-flex;
+  align-items: center;
+  margin-bottom: $unnnic-spacing-sm;
+
+  color: $unnnic-color-fg-inverted;
+  font-family: $unnnic-font-family-secondary;
+  font-size: $unnnic-font-size-body-gt;
+  line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
+  font-weight: $unnnic-font-weight-regular;
+
+  background-color: $unnnic-color-fg-base;
+
+  z-index: 9999;
+
+  overflow: hidden;
+  pointer-events: auto;
+
+  @keyframes progress {
+    from {
+      width: 0;
+    }
+
+    to {
+      width: 100%;
+    }
+  }
+
+  &__progress {
+    position: absolute;
+    height: 100%;
+    background-color: $unnnic-color-fg-emphasized;
+    border-radius: $unnnic-border-radius-sm;
+    left: 0;
+    top: 0;
+    pointer-events: none;
+    z-index: -1;
+    animation-name: progress;
+    animation-duration: 5000ms;
+    animation-timing-function: linear;
+  }
+
+  &:hover {
+    .alert__progress {
+      animation-play-state: paused;
+    }
+  }
+
+  &__text {
+    padding: $unnnic-spacing-xs $unnnic-spacing-sm;
+  }
+
+  &__close {
+    border-left: 1px solid $unnnic-color-fg-base;
+
+    &:hover {
+      background-color: $unnnic-color-fg-base;
+    }
+  }
+
+  &__close {
+    padding: $unnnic-spacing-xs $unnnic-spacing-sm;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  &--scheme-aux-green {
+    background-color: $unnnic-color-green-10;
+
+    .alert__progress {
+      background-color: $unnnic-color-green-9;
+    }
+
+    .alert__close {
+      border-left: 1px solid $unnnic-color-green-4;
+
+      &:hover {
+        background-color: $unnnic-color-green-4;
+      }
+    }
+  }
+
+  &--scheme-aux-red {
+    background-color: $unnnic-color-red-10;
+
+    .alert__progress {
+      background-color: $unnnic-color-red-9;
+    }
+
+    .alert__close {
+      border-left: 1px solid $unnnic-color-red-4;
+
+      &:hover {
+        background-color: $unnnic-color-red-4;
+      }
+    }
+  }
+}
+</style>

package/src/components/Alert/__tests__/Alert.spec.js

@@ -0,0 +1,41 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach, describe, expect, afterEach, test, vi } from 'vitest';
+import UnnnicAlert from '@/components/Alert/Alert.vue';
+
+describe('UnnnicAlert.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(UnnnicAlert, {
+      props: {
+        version: '2.0',
+        title: 'Test Alert',
+        text: 'This is an alert message',
+        type: 'success',
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.unmount();
+  });
+
+  test('renders correctly', () => {
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  test('renders the correct component for version 1.1', async () => {
+    await wrapper.setProps({ version: '1.1' });
+    const versionComponent = wrapper.findComponent({ name: 'Version1dot1' });
+    expect(versionComponent.exists()).toBe(true);
+  });
+
+  test('does not render alert if version is not 1.0', async () => {
+    await wrapper.setProps({ version: '1.2' });
+    expect(wrapper.find('.unnnic-alert').exists()).toBe(false);
+  });
+
+  test('matches the snapshot', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

package/src/components/Alert/__tests__/Version1dot1.spec.js

@@ -0,0 +1,101 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, test, vi, beforeEach, afterEach } from 'vitest';
+import Alert from '@/components/Alert/Version1dot1.vue';
+import UnnnicIcon from '@/components/Icon.vue';
+
+vi.mock('@/components/Icon.vue');
+
+describe('Alert.vue', () => {
+  let wrapper;
+
+  const defaultProps = {
+    text: 'Test Alert',
+    scheme: 'feedback-green',
+    onClose: vi.fn(),
+    type: 'success',
+  };
+
+  beforeEach(() => {
+    wrapper = mount(Alert, {
+      props: defaultProps,
+      global: {
+        stubs: {
+          UnnnicIcon: true,
+        },
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.unmount();
+    vi.clearAllMocks();
+  });
+
+  test('renders correctly', () => {
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.find('.alert').exists()).toBe(true);
+    expect(wrapper.find('.alert__text').text()).toBe('Test Alert');
+  });
+
+  test('applies correct classes based on scheme and type props', () => {
+    expect(wrapper.find('.alert--scheme-aux-green').exists()).toBe(true);
+
+    wrapper = mount(Alert, {
+      props: { ...defaultProps, scheme: 'feedback-red', type: 'error' },
+      global: { stubs: { UnnnicIcon: true } },
+    });
+    expect(wrapper.find('.alert--scheme-aux-red').exists()).toBe(true);
+  });
+
+  test('emits close event and calls onClose prop when close button is clicked', async () => {
+    await wrapper.find('.alert__close').trigger('click');
+    expect(wrapper.emitted('close')).toBeTruthy();
+    expect(defaultProps.onClose).toHaveBeenCalled();
+  });
+
+  test('adds slide-down class on progress animation end', async () => {
+    const progressElement = wrapper.find('.alert__progress');
+    await progressElement.trigger('animationend');
+    expect(wrapper.find('.alert-container').classes()).toContain('slide-down');
+  });
+
+  test('emits close event on slide-down animation end', async () => {
+    const alertContainer = wrapper.find('.alert-container');
+    await alertContainer.trigger('animationend', {
+      animationName: 'slideDown',
+    });
+    expect(wrapper.emitted('close')).toBeTruthy();
+  });
+
+  test('does not emit close event on non-slideDown animation end', async () => {
+    const alertContainer = wrapper.find('.alert-container');
+    await alertContainer.trigger('animationend', {
+      animationName: 'someOtherAnimation',
+    });
+    expect(wrapper.emitted('close')).toBeFalsy();
+  });
+
+  test.each([
+    ['text', 'New Alert Text'],
+    ['scheme', 'feedback-red'],
+    ['type', 'error'],
+  ])('updates %s prop correctly', async (propName, newValue) => {
+    await wrapper.setProps({ [propName]: newValue });
+    expect(wrapper.props(propName)).toBe(newValue);
+  });
+
+  test('renders UnnnicIcon component', () => {
+    expect(wrapper.findComponent(UnnnicIcon).exists()).toBe(true);
+    expect(wrapper.findComponent(UnnnicIcon).props()).toEqual({
+      clickable: false,
+      filled: false,
+      icon: 'close-1',
+      size: 'sm',
+      scheme: 'fg-inverted',
+    });
+  });
+
+  test('matches snapshot', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

package/src/components/Alert/__tests__/__snapshots__/Alert.spec.js.snap

@@ -0,0 +1,15 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`UnnnicAlert.vue > matches the snapshot 1`] = `
+"<transition-stub data-v-c3231c18="" name="toast-slide" appear="true" persisted="false" css="true" data-testid="toast-transition">
+  <aside data-v-c3231c18="" class="unnnic-toast unnnic-toast--success" role="status" aria-live="polite" data-testid="toast" style="z-index: 1005;">
+    <section data-v-c3231c18="" class="unnnic-toast__content" data-testid="toast-content">
+      <header data-v-c3231c18="" class="unnnic-toast__header" data-testid="toast-header"><span data-v-26446d8e="" data-v-c3231c18="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-success unnnic-icon-size--ant unnnic-icon__size--ant" data-testid="toast-type-icon" translate="no">check_circle</span>
+        <h3 data-v-c3231c18="" class="unnnic-toast__title" data-testid="toast-title">Test Alert</h3><span data-v-26446d8e="" data-v-c3231c18="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable unnnic-toast__close" data-testid="toast-close-icon" translate="no">close</span>
+      </header>
+      <!--v-if-->
+    </section>
+    <!--v-if-->
+  </aside>
+</transition-stub>"
+`;

package/src/components/Alert/__tests__/__snapshots__/AlertBanner.spec.js.snap

@@ -0,0 +1,10 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AlertBanner.vue > matches the snapshot 1`] = `
+"<section data-v-e8e4d051="" class="banner-alert banner-alert--banner-danger">
+  <header data-v-e8e4d051="" class="banner-alert__container-text"><span data-v-26446d8e="" data-v-e8e4d051="" class="material-symbols-rounded unnnic-icon-scheme--neutral-white unnnic-icon-size--sm banner-alert__textIcon" data-testid="material-icon" translate="no" data-test="unnnic-icon">block</span>
+    <p data-v-e8e4d051="" class="text">This is a banner alert</p><a data-v-e8e4d051="" class="banner-alert__link" href="https://example.com" target="_self">Learn more</a>
+  </header>
+  <div data-v-e8e4d051="" class="banner-alert__close"><span data-v-26446d8e="" data-v-e8e4d051="" class="material-symbols-rounded unnnic-icon-scheme--neutral-white unnnic-icon-size--sm" data-testid="material-icon" translate="no" data-test="unnnic-close-icon">close</span></div>
+</section>"
+`;

package/src/components/Alert/__tests__/__snapshots__/AlertCaller.spec.js.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AlertCaller.vue > matches snapshot 1`] = `"<button>Launch alert</button>"`;

package/src/components/Alert/__tests__/__snapshots__/Version1dot1.spec.js.snap

@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Alert.vue > matches snapshot 1`] = `
+"<div data-v-fb94f284="" class="alert-container">
+  <div data-v-fb94f284="" class="alert alert--scheme-aux-green">
+    <div data-v-fb94f284="" class="alert__progress"></div>
+    <div data-v-fb94f284="" class="alert__text">Test Alert</div>
+    <div data-v-fb94f284="" class="alert__close">
+      <unnnic-icon-stub data-v-fb94f284="" filled="false" icon="close-1" clickable="false" size="sm" scheme="fg-inverted"></unnnic-icon-stub>
+    </div>
+  </div>
+</div>"
+`;

package/src/components/AudioRecorder/AudioHandler.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="audio-handler">
+    <div>
+      <span class="audio-handler__time">
+        {{ time }}
+      </span>
+
+      <UnnnicIcon
+        v-if="!hideRecordingIndicator"
+        icon="indicator"
+        size="sm"
+        :class="[{ 'is-recording': isRecording }]"
+        :scheme="isRecording ? null : 'fg-base'"
+      />
+    </div>
+
+    <UnnnicToolTip
+      enabled
+      :text="saveText || i18n('save')"
+      side="top"
+    >
+      <span
+        class="unnnic--clickable"
+        @click="save"
+        @keypress.enter="save"
+      >
+        <UnnnicIcon
+          size="ant"
+          icon="check_circle"
+          scheme="feedback-green"
+        />
+      </span>
+    </UnnnicToolTip>
+  </div>
+</template>
+
+<script>
+import UnnnicIcon from '../Icon.vue';
+import UnnnicToolTip from '../ToolTip/ToolTip.vue';
+import UnnnicI18n from '../../mixins/i18n';
+
+export default {
+  components: {
+    UnnnicIcon,
+    UnnnicToolTip,
+  },
+
+  mixins: [UnnnicI18n],
+
+  props: {
+    isRecording: {
+      type: Boolean,
+      default: false,
+    },
+    time: {
+      type: String,
+      default: '',
+    },
+    saveText: {
+      type: String,
+      default: '',
+    },
+    hideRecordingIndicator: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: ['save'],
+
+  data() {
+    return {
+      defaultTranslations: {
+        save: {
+          'pt-br': 'Salvar',
+          en: 'Save',
+          es: 'Guardar',
+        },
+      },
+    };
+  },
+
+  methods: {
+    save() {
+      this.$emit('save');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.audio-handler {
+  display: inline-flex;
+  align-items: center;
+  gap: $unnnic-spacing-stack-xs;
+
+  .unnnic-icon.is-recording {
+    margin-left: $unnnic-spacing-inline-nano;
+
+    :deep(.primary) {
+      animation: ease-in-out pulse 2s infinite;
+    }
+  }
+}
+
+@keyframes pulse {
+  0% {
+    fill: $unnnic-color-border-base;
+  }
+
+  50% {
+    fill: $unnnic-color-fg-critical;
+  }
+
+  100% {
+    fill: $unnnic-color-border-base;
+  }
+}
+</style>