@weni/unnnic-system 3.9.1-alpha.4 → 3.9.2

package/src/components/CheckboxGroup/CheckboxGroup.vue

@@ -1,96 +0,0 @@
-<template>
-  <section
-    :class="[
-      'unnnic-checkbox-group__container',
-      `unnnic-checkbox-group--state-${state}`,
-    ]"
-  >
-    <UnnnicLabel
-      v-if="label"
-      :label="label"
-      :tooltip="labelTooltip"
-      :useHtmlTooltip="labelUseHtmlTooltip"
-    />
-
-    <section class="unnnic-checkbox-group__checkboxes">
-      <slot />
-    </section>
-
-    <footer
-      v-if="helper"
-      class="unnnic-checkbox-group__helper"
-    >
-      {{ helper }}
-    </footer>
-  </section>
-</template>
-
-<script setup>
-import UnnnicLabel from '../Label/Label.vue';
-
-const props = defineProps({
-  state: {
-    type: String,
-    default: 'horizontal',
-    validator(value) {
-      return ['horizontal', 'vertical'].includes(value);
-    },
-  },
-
-  label: {
-    type: String,
-  },
-
-  labelTooltip: {
-    type: String,
-  },
-
-  labelUseHtmlTooltip: {
-    type: Boolean,
-  },
-
-  helper: {
-    type: String,
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-checkbox-group {
-  &__container {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &__checkboxes {
-    margin-top: $unnnic-space-3;
-
-    display: flex;
-    gap: $unnnic-space-4 $unnnic-space-6;
-  }
-
-  &__helper {
-    margin-top: $unnnic-space-2;
-    font: $unnnic-font-caption-2;
-    color: $unnnic-color-fg-base;
-  }
-
-  &--state-horizontal {
-    .unnnic-checkbox-group__checkboxes {
-      flex-direction: row;
-    }
-  }
-
-  &--state-vertical {
-    .unnnic-checkbox-group__checkboxes {
-      flex-direction: column;
-    }
-
-    .unnnic-checkbox-group__helper {
-      margin-top: $unnnic-space-3;
-    }
-  }
-}
-</style>

package/src/components/PageHeader/PageHeader.vue

@@ -1,148 +0,0 @@
-<template>
-  <header
-    :class="`page-header 
-      ${hasBackButton ? 'page-header--has-back-button' : ''} 
-      ${$slots.tabs ? 'page-header--has-tabs' : ''}
-    `"
-  >
-    <UnnnicButton
-      v-if="hasBackButton"
-      data-testid="back-button"
-      type="tertiary"
-      iconCenter="arrow_back_ios_new"
-      class="page-header__back-button"
-      @click="handleBackClick"
-    />
-
-    <section class="page-header__infos">
-      <section class="page-header__main-infos">
-        <h1
-          class="page-header__title"
-          data-testid="page-title"
-        >
-          {{ title }}
-        </h1>
-
-        <slot name="tag" />
-      </section>
-
-      <p
-        v-if="description"
-        class="page-header__description"
-        data-testid="page-description"
-      >
-        {{ description }}
-      </p>
-    </section>
-
-    <section
-      v-if="$slots.actions"
-      class="page-header__actions"
-      data-testid="page-actions"
-    >
-      <slot name="actions" />
-    </section>
-
-    <section
-      v-if="$slots.tabs"
-      class="page-header__tabs"
-      data-testid="page-tabs"
-    >
-      <slot name="tabs" />
-    </section>
-  </header>
-</template>
-
-<script setup lang="ts">
-import UnnnicButton from '../Button/Button.vue';
-
-import type { PageHeaderProps, PageHeaderEmits } from './types';
-
-withDefaults(defineProps<PageHeaderProps>(), {
-  description: '',
-  hasBackButton: false,
-});
-
-const emit = defineEmits<PageHeaderEmits>();
-
-const handleBackClick = (): void => {
-  emit('back');
-};
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-.page-header {
-  width: 100%;
-
-  margin-top: $unnnic-space-2;
-  padding-bottom: $unnnic-space-6;
-
-  display: grid;
-  gap: $unnnic-space-4;
-  grid-template-columns: 1fr minmax(250px, 20%); // TODO: Verify if is 250px or 20% (8fr 2fr)
-  align-items: center;
-
-  border-bottom: 1px solid $unnnic-color-border-soft;
-
-  &--has-back-button {
-    grid-template-columns: auto 1fr minmax(250px, 20%);
-  }
-
-  &--has-tabs {
-    border-bottom: none;
-  }
-
-  &__infos {
-    display: flex;
-    flex-direction: column;
-    gap: $unnnic-space-2;
-  }
-
-  &__main-infos {
-    display: flex;
-    align-items: center;
-    gap: $unnnic-space-2;
-  }
-
-  &__title {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    color: $unnnic-color-fg-emphasized;
-    text-overflow: ellipsis;
-
-    font: $unnnic-font-display-1;
-  }
-
-  &__description {
-    color: $unnnic-color-fg-base;
-
-    font: $unnnic-font-body;
-  }
-
-  &__actions {
-    display: flex;
-    gap: $unnnic-space-2;
-    align-items: center;
-    justify-content: flex-end;
-
-    > * {
-      width: 100%;
-    }
-  }
-
-  &__tabs {
-    grid-column: 1 / -1;
-    grid-row: 2 / 3;
-  }
-}
-</style>

package/src/components/PageHeader/index.ts

@@ -1,2 +0,0 @@
-export { default } from './PageHeader.vue';
-export { default as PageHeader } from './PageHeader.vue';

package/src/components/PageHeader/types.ts

@@ -1,10 +0,0 @@
-export interface PageHeaderProps {
-  title: string;
-  description?: string;
-
-  hasBackButton?: boolean;
-}
-
-export interface PageHeaderEmits {
-  (event: 'back'): void;
-}

package/src/components/RadioGroup/RadioGroup.vue

@@ -1,142 +0,0 @@
-<template>
-  <section
-    :class="[
-      'unnnic-radio-group__container',
-      `unnnic-radio-group--state-${state}`,
-    ]"
-  >
-    <UnnnicLabel
-      v-if="label"
-      :label="label"
-      :tooltip="labelTooltip"
-      :useHtmlTooltip="labelUseHtmlTooltip"
-      class="unnnic-radio-group__label"
-    />
-
-    <section class="unnnic-radio-group__radios">
-      <slot />
-    </section>
-
-    <footer
-      v-if="helper"
-      class="unnnic-radio-group__helper"
-    >
-      {{ helper }}
-    </footer>
-  </section>
-</template>
-
-<script setup>
-import { ref, provide, watch, computed } from 'vue';
-import UnnnicLabel from '../Label/Label.vue';
-
-const props = defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: '',
-  },
-
-  state: {
-    type: String,
-    default: 'horizontal',
-    validator(value) {
-      return ['horizontal', 'vertical'].includes(value);
-    },
-  },
-
-  label: {
-    type: String,
-  },
-
-  labelTooltip: {
-    type: String,
-  },
-
-  labelUseHtmlTooltip: {
-    type: Boolean,
-  },
-
-  name: {
-    type: String,
-    default: '',
-  },
-
-  helper: {
-    type: String,
-  },
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const contextModelValue = ref(props.modelValue);
-
-watch(
-  () => props.modelValue,
-  (newVal) => {
-    if (newVal !== contextModelValue.value) {
-      contextModelValue.value = newVal;
-    }
-  },
-);
-
-watch(contextModelValue, (newVal) => {
-  if (newVal !== props.modelValue) {
-    emit('update:modelValue', newVal);
-  }
-});
-
-const computedName = computed(() => {
-  return (
-    props.name ||
-    `unnnic-radio-group-${Math.random().toString(36).substring(2, 15)}`
-  );
-});
-
-provide('contextModelValue', contextModelValue);
-provide('contextName', computedName);
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-radio-group {
-  &__container {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &__label {
-    margin-bottom: $unnnic-space-3;
-  }
-
-  &__radios {
-    display: flex;
-    gap: $unnnic-space-4 $unnnic-space-6;
-  }
-
-  &__helper {
-    font: $unnnic-font-caption-2;
-    color: $unnnic-color-fg-base;
-  }
-
-  &--state-horizontal {
-    .unnnic-radio-group__radios {
-      flex-direction: row;
-    }
-
-    .unnnic-radio-group__helper {
-      margin-top: $unnnic-space-2;
-    }
-  }
-
-  &--state-vertical {
-    .unnnic-radio-group__radios {
-      flex-direction: column;
-    }
-
-    .unnnic-radio-group__helper {
-      margin-top: $unnnic-space-3;
-    }
-  }
-}
-</style>

package/src/components/Tag/types.ts

@@ -1,19 +0,0 @@
-export type TagType = 'default' | 'brand' | 'next';
-export type TagSize = 'small' | 'medium';
-
-export interface TagProps {
-  type?: TagType;
-  size?: TagSize;
-  text?: string;
-  disabled?: boolean;
-  scheme?: string;
-  leftIcon?: string;
-  hasCloseIcon?: boolean;
-}
-
-export interface DefaultTagProps {
-  text?: string;
-  size?: TagSize;
-  scheme?: string;
-  leftIcon?: string;
-}

package/src/components/Toast/Toast.vue

@@ -1,246 +0,0 @@
-<template>
-  <Transition
-    name="toast-slide"
-    appear
-    data-testid="toast-transition"
-    @after-leave="$emit('destroy')"
-  >
-    <aside
-      v-if="isVisible"
-      :class="['unnnic-toast', `unnnic-toast--${type}`]"
-      :role="type === 'error' ? 'alert' : 'status'"
-      :aria-live="type === 'error' ? 'assertive' : 'polite'"
-      data-testid="toast"
-    >
-      <section
-        class="unnnic-toast__content"
-        data-testid="toast-content"
-      >
-        <header
-          class="unnnic-toast__header"
-          data-testid="toast-header"
-        >
-          <UnnnicIcon
-            :icon="typeConfig.icon"
-            :scheme="typeConfig.scheme"
-            size="ant"
-            data-testid="toast-type-icon"
-          />
-
-          <h3
-            class="unnnic-toast__title"
-            data-testid="toast-title"
-          >
-            {{ title }}
-          </h3>
-
-          <UnnnicIcon
-            icon="close"
-            scheme="neutral-dark"
-            size="ant"
-            clickable
-            class="unnnic-toast__close"
-            data-testid="toast-close-icon"
-            @click="handleClose"
-            @keydown.enter="handleClose"
-          />
-        </header>
-
-        <p
-          v-if="description"
-          data-testid="toast-text"
-          class="unnnic-toast__text"
-        >
-          {{ description }}
-        </p>
-      </section>
-
-      <UnnnicButton
-        v-if="button"
-        type="tertiary"
-        :text="button.text"
-        class="unnnic-toast__action-button"
-        data-testid="toast-action-button"
-        @click="handleAction"
-        @keydown.enter="handleAction"
-        @keydown.space.prevent="handleAction"
-      />
-    </aside>
-  </Transition>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue';
-
-import UnnnicIcon from '@/components/Icon.vue';
-import UnnnicButton from '@/components/Button/Button.vue';
-
-import type { ToastProps, ToastEmits } from './types';
-import type { SchemeColor } from '@/types/scheme-colors';
-
-defineOptions({
-  name: 'UnnnicToast',
-});
-
-const props = withDefaults(defineProps<ToastProps>(), {
-  title: '',
-  description: '',
-  button: undefined,
-  timeout: 5000,
-  type: 'informational',
-});
-
-const emit = defineEmits<ToastEmits>();
-
-const isVisible = ref(false);
-let timeoutId: number | null = null;
-
-const typeConfig = computed(() => {
-  const configMap = {
-    informational: { icon: 'info', scheme: 'blue-500' },
-    attention: { icon: 'error', scheme: 'yellow-500' },
-    success: { icon: 'check_circle', scheme: 'green-500' },
-    error: { icon: 'cancel', scheme: 'red-500' },
-  };
-
-  return configMap[props.type || 'informational'] as {
-    icon: string;
-    scheme: SchemeColor;
-  };
-});
-
-const handleClose = () => {
-  isVisible.value = false;
-  emit('close');
-};
-
-const handleAction = () => {
-  if (props.button?.action) {
-    props.button.action();
-  }
-};
-
-const startTimeout = () => {
-  if (props.timeout > 0) {
-    timeoutId = window.setTimeout(() => {
-      handleClose();
-    }, props.timeout);
-  }
-};
-
-const stopTimeout = () => {
-  if (timeoutId) {
-    window.clearTimeout(timeoutId);
-    timeoutId = null;
-  }
-};
-
-onMounted(() => {
-  isVisible.value = true;
-  startTimeout();
-});
-
-onUnmounted(() => {
-  stopTimeout();
-});
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-toast {
-  position: fixed;
-  bottom: $unnnic-space-4;
-  right: $unnnic-space-4;
-  z-index: 9999;
-
-  display: flex;
-  align-items: flex-end;
-  flex-direction: column;
-  gap: $unnnic-space-2;
-
-  min-width: 250px;
-  max-width: 450px;
-  padding: $unnnic-space-4;
-
-  border-radius: $unnnic-radius-2;
-  box-shadow: $unnnic-shadow-2;
-  border: 1px solid $unnnic-color-border-base;
-
-  &--informational {
-    border-color: $unnnic-color-border-info;
-    background-color: $unnnic-color-bg-info;
-  }
-
-  &--attention {
-    border-color: $unnnic-color-border-warning;
-    background-color: $unnnic-color-bg-warning;
-  }
-
-  &--success {
-    border-color: $unnnic-color-border-success;
-    background-color: $unnnic-color-bg-success;
-  }
-
-  &--error {
-    border-color: $unnnic-color-border-critical;
-    background-color: $unnnic-color-bg-critical;
-  }
-
-  &__content,
-  &__header {
-    width: 100%;
-
-    display: flex;
-  }
-
-  &__content {
-    flex-direction: column;
-    gap: $unnnic-space-1;
-  }
-
-  &__header {
-    align-items: center;
-    gap: $unnnic-space-2;
-  }
-
-  &__title {
-    flex: 1;
-
-    margin: 0;
-
-    font: $unnnic-font-action;
-    color: $unnnic-color-fg-emphasized;
-  }
-
-  &__text {
-    margin: 0;
-    margin-left: $unnnic-space-7;
-
-    font: $unnnic-font-caption-2;
-    color: $unnnic-color-fg-emphasized;
-  }
-}
-
-// Animations
-.toast-slide-enter-active,
-.toast-slide-leave-active {
-  transition: all 0.3s ease;
-}
-
-.toast-slide-enter-from {
-  transform: translateY(100%);
-  opacity: 0;
-}
-
-.toast-slide-leave-to {
-  transform: translateY(100%);
-  opacity: 0;
-}
-
-.toast-slide-enter-to,
-.toast-slide-leave-from {
-  transform: translateY(0);
-  opacity: 1;
-}
-</style>