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

package/src/stories/Toast.mdx

@@ -0,0 +1,123 @@
+import { Meta, Source, Story } from '@storybook/addon-docs/blocks';
+
+import * as ToastStories from './Toast.stories';
+
+<Meta of={ToastStories} />
+
+# Toast
+
+The Toast component is used to display temporary notifications in the user interface. It appears in the bottom right corner of the screen with smooth animation and can be closed automatically or manually.
+
+<Source
+  language="html"
+  dark
+  code={`
+<UnnnicToast
+  title="Success!"
+  description="Your action was completed successfully."
+  type="success"
+  :timeout="5000"
+  @close="onClose"
+  @destroy="onDestroy"
+/>
+  `}
+/>
+
+---
+
+#### **Props Options:**
+
+| Key         | Description                              | Values                                                      | Default         |
+|-------------|------------------------------------------|-------------------------------------------------------------|-----------------|
+| title       | **Required.** Toast title                | `string`                                                    | -               |
+| description | Toast descriptive text                   | `string`                                                    | `''`            |
+| type        | Visual type of the toast                 | `'informational'` \| `'attention'` \| `'success'` \| `'error'` | `'informational'` |
+| timeout     | Time in ms for auto-dismiss (0 = persistent) | `number`                                                | `5000`          |
+| button      | Optional action button configuration     | `{ text: string; action: () => void }`                     | `undefined`     |
+
+#### **Events:**
+
+| Event   | Description                                    |
+|---------|------------------------------------------------|
+| close   | Emitted when the toast is closed              |
+| destroy | Emitted when the toast is removed from DOM    |
+
+---
+
+## Features
+
+- **Animations**: Smooth entry and exit transitions
+- **Visual types**: Different variations for different types of messages
+- **Action button**: Optional, for quick actions
+- **Auto-dismiss**: Configurable or persistent
+
+## Usage
+
+### As component
+
+<Source
+  language="vue"
+  dark
+  code={`
+<template>
+  <UnnnicToast
+    title="Success!"
+    description="Your action was completed successfully."
+    type="success"
+    :timeout="5000"
+    @close="onToastClose"
+  />
+</template>
+
+<script setup>
+import { UnnnicToast } from '@weni/unnnic-system';
+
+const onToastClose = () => {
+  console.log('Toast closed');
+};
+</script>
+  `}
+/>
+
+### Programmatically
+
+The Toast component can be used programmatically through the `toast` utility, which provides a simple API for creating toasts without needing to manage component state.
+
+<Source
+  language="javascript"
+  dark
+  code={`
+// Basic usage
+import { toast } from '@weni/unnnic-system';
+
+toast.info('Information', 'Here is some useful information');
+  `}
+/>
+
+#### API Reference
+
+| Method | Parameters | Description |
+|--------|------------|-------------|
+| `toast.success(title, description?, options?)` | `title: string`<br/>`description?: string`<br/>`options?: ToastOptions` | Creates a success toast |
+| `toast.error(title, description?, options?)` | `title: string`<br/>`description?: string`<br/>`options?: ToastOptions` | Creates an error toast |
+| `toast.attention(title, description?, options?)` | `title: string`<br/>`description?: string`<br/>`options?: ToastOptions` | Creates an attention/warning toast |
+| `toast.info(title, description?, options?)` | `title: string`<br/>`description?: string`<br/>`options?: ToastOptions` | Creates an informational toast |
+
+#### ToastOptions Interface
+
+```typescript
+interface ToastOptions {
+  timeout?: number;           // Auto-dismiss time in ms (0 = persistent)
+  button?: {                  // Optional action button
+    text: string;
+    action: () => void;
+  };
+  onClose?: () => void;      // Callback when toast is closed
+}
+```
+
+## Animations
+
+- **Entry**: Slide from bottom to top with fade-in
+- **Exit**: Slide from top to bottom with fade-out
+- **Duration**: 300ms with smooth easing

package/src/stories/Toast.stories.js

@@ -0,0 +1,126 @@
+import Toast from '../components/Toast/Toast.vue';
+import { action } from 'storybook/actions';
+
+export default {
+  title: 'Feedback/Toast',
+  component: Toast,
+  argTypes: {
+    title: {
+      control: 'text',
+    },
+    description: {
+      control: 'text',
+    },
+    type: {
+      control: 'select',
+      options: ['informational', 'attention', 'success', 'error'],
+    },
+    timeout: {
+      control: 'number',
+    },
+    button: {
+      control: 'object',
+    },
+  },
+  render: (args) => ({
+    components: { Toast },
+    setup() {
+      return { args };
+    },
+    methods: {
+      onClose() {
+        action('@close')('');
+      },
+      onDestroy() {
+        action('@destroy')('');
+      },
+    },
+    template: `
+      <div style="position: relative; height: 50px;">
+        <Toast
+          v-bind="args"
+          @close="onClose"
+          @destroy="onDestroy"
+        />
+      </div>
+    `,
+  }),
+};
+
+export const Informational = {
+  args: {
+    title: 'Information',
+    description: 'This is an informative message for the user.',
+    type: 'informational',
+    timeout: 5000,
+  },
+};
+
+export const Attention = {
+  args: {
+    title: 'Attention',
+    description: 'Please verify the data before continuing.',
+    type: 'attention',
+    timeout: 5000,
+  },
+};
+
+export const Success = {
+  args: {
+    title: 'Success!',
+    description: 'Your action was completed successfully.',
+    type: 'success',
+    timeout: 5000,
+  },
+};
+
+export const Error = {
+  args: {
+    title: 'Error',
+    description: 'An error occurred while processing your request.',
+    type: 'error',
+    timeout: 5000,
+  },
+};
+
+export const WithActionButton = {
+  args: {
+    title: 'New version available',
+    description: 'A new version of the system is available for download.',
+    type: 'informational',
+    timeout: 0,
+    button: {
+      text: 'Update',
+      action: () => {
+        alert('Updating...');
+      },
+    },
+  },
+};
+
+export const Persistent = {
+  args: {
+    title: 'Important message',
+    description: 'This message will remain visible until manually closed.',
+    type: 'attention',
+    timeout: 0,
+  },
+};
+
+export const TitleOnly = {
+  args: {
+    title: 'Simple message',
+    type: 'success',
+    timeout: 5000,
+  },
+};
+
+export const LongText = {
+  args: {
+    title: 'Document processed',
+    description:
+      'The document "Annual_Report_2024_Final_Definitive_Complete_Version.pdf" was processed successfully and is available for download in your workspace.',
+    type: 'success',
+    timeout: 8000,
+  },
+};

package/src/stories/ToolTip.stories.js

@@ -0,0 +1,71 @@
+import { ref } from 'vue';
+import { unnnicFontSize } from '../components/config';
+import unnnicToolTip from '../components/ToolTip/ToolTip.vue';
+
+export default {
+  title: 'Example/ToolTip',
+  component: unnnicToolTip,
+  argTypes: {
+    text: { control: { type: 'text' } },
+    side: {
+      control: { type: 'select', options: ['top', 'right', 'bottom', 'left'] },
+    },
+    maxWidth: { control: { type: 'text' } },
+    forceOpen: { control: { type: 'boolean' } },
+    enableHtml: { control: { type: 'boolean' } },
+  },
+  render: (args) => ({
+    components: {
+      unnnicToolTip,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+    <unnnic-tool-tip v-bind="args"> Hover over text </unnnic-tool-tip>
+    `,
+  }),
+};
+
+export const Normal = {
+  args: {
+    text: 'Label',
+    enabled: true,
+    maxWidth: `${15 * unnnicFontSize}px`,
+    side: 'bottom',
+  },
+};
+
+export const withLink = {
+  args: {
+    text: 'tooltip with <a href="https://weni.ai/" target="_blank" style="color: white;">weni</a> link',
+    enabled: true,
+    maxWidth: `${15 * unnnicFontSize}px`,
+    side: 'right',
+    enableHtml: true,
+  },
+};
+
+export const withCloseButton = {
+  args: {
+    text: 'tooltip with close button',
+    enabled: true,
+    maxWidth: `${15 * unnnicFontSize}px`,
+    side: 'right',
+    showClose: true,
+  },
+  render: (args) => ({
+    components: {
+      unnnicToolTip,
+    },
+    setup() {
+      const open = ref(true);
+      return { args, open };
+    },
+    template: `
+    <unnnic-tool-tip v-bind="args" :force-open="open" @click:close="open = false">
+      Hover over text
+    </unnnic-tool-tip>
+    `,
+  }),
+};

package/src/stories/Tour.stories.js

@@ -0,0 +1,216 @@
+import UnnnicTour from '../components/Tour/Tour.vue';
+import UnnnicCard from '../components/Card/Card.vue';
+
+export default {
+  title: 'Example/Tour',
+  component: UnnnicTour,
+  argTypes: {},
+  render: (args) => ({
+    components: {
+      UnnnicTour,
+      UnnnicCard,
+    },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        attachedElementsLoaded: false,
+      };
+    },
+    methods: {
+      startTour() {
+        this.$refs.tour.start();
+      },
+      handleTourStep(step) {
+        this.$refs.tour.start();
+        this.$refs.tour.handleStep(step);
+      },
+    },
+    mounted() {
+      this.$nextTick(() => {
+        args.steps[0].attachedElement = this.$refs.step1.$el;
+        args.steps[1].attachedElement = this.$refs.step2.$el;
+        args.steps[2].attachedElement = this.$refs.step3.$el;
+        args.steps[3].attachedElement = this.$refs.step4.$el;
+        this.attachedElementsLoaded = true;
+      });
+    },
+    template: `
+    <div style="height: 50%; width: 30%; border: 1px solid #ccc; padding: 16px; margin: auto">
+      <button @click="startTour">Start tour</button>
+      <button @click="handleTourStep(3)">Go to step 3</button>
+      <UnnnicCard 
+        type="default"
+        title="This is the title"
+        description="This is the description"
+        ref="step1"
+      />
+      <UnnnicCard 
+        type="default"
+        title="This is the title"
+        description="This is the description"
+        ref="step2"
+      />
+      <UnnnicCard 
+        type="default"
+        title="This is the title"
+        description="This is the description"
+        ref="step3"
+      />
+      <UnnnicCard 
+        type="default"
+        title="This is the title"
+        description="This is the description"
+        ref="step4"
+      />
+      <unnnic-tour v-if="attachedElementsLoaded" v-bind="args" ref="tour" />
+    </div>
+    `,
+  }),
+};
+
+export const Default = {
+  args: {
+    steps: [
+      {
+        title: 'Step 1',
+        description:
+          '<b>Lorem ipsum</b> dolor sit amet, consectetur adipiscing elit. Donec dapibus euismod nibh vel elementum. Integer nisi lectus, hendrerit aliquet tellus nec, volutpat porttitor erat. Vivamus tincidunt sit amet ex non. ',
+        attachedElement: null,
+        popoverPosition: 'right',
+      },
+      {
+        title: 'Step 2',
+        description:
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus dui orci. ',
+        attachedElement: null,
+        popoverPosition: 'bottom',
+      },
+      {
+        title: 'Step 3',
+        description:
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum accumsan erat, at bibendum nisi mollis et. Aliquam venenatis tristique.',
+        attachedElement: null,
+        popoverPosition: 'left',
+      },
+      {
+        title: 'Step 4',
+        description:
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ex purus, ullamcorper sed nunc eu. ',
+        attachedElement: null,
+        popoverPosition: 'top',
+      },
+    ],
+  },
+};
+
+export const WithPadding = {
+  args: {
+    steps: [
+      {
+        title: 'Step 1',
+        description:
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus euismod nibh vel elementum. Integer nisi lectus, hendrerit aliquet tellus nec, volutpat porttitor erat. Vivamus tincidunt sit amet ex non. ',
+        attachedElement: null,
+        popoverPosition: 'right',
+        padding: {
+          vertical: 20,
+          horizontal: 20,
+        },
+      },
+    ],
+  },
+  render: (args) => ({
+    components: {
+      UnnnicTour,
+      UnnnicCard,
+    },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        attachedElementsLoaded: false,
+      };
+    },
+    methods: {
+      startTour() {
+        this.$refs.tour.start();
+      },
+    },
+    mounted() {
+      this.$nextTick(() => {
+        args.steps[0].attachedElement = this.$refs.step1.$el;
+        this.attachedElementsLoaded = true;
+      });
+    },
+    template: `
+    <div style="height: 50%; width: 30%; border: 1px solid #ccc; padding: 16px; margin: auto">
+      <button @click="startTour">Start tour</button>
+      <UnnnicCard 
+        type="default"
+        title="This is the title"
+        description="This is the description"
+        ref="step1"
+      />
+      <unnnic-tour v-if="attachedElementsLoaded" v-bind="args" ref="tour" />
+    </div>
+    `,
+  }),
+};
+
+export const WithNegativePadding = {
+  args: {
+    steps: [
+      {
+        title: 'Step 1',
+        description:
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus euismod nibh vel elementum. Integer nisi lectus, hendrerit aliquet tellus nec, volutpat porttitor erat. Vivamus tincidunt sit amet ex non. ',
+        attachedElement: null,
+        popoverPosition: 'right',
+        padding: {
+          vertical: -30,
+          horizontal: -10,
+        },
+      },
+    ],
+  },
+  render: (args) => ({
+    components: {
+      UnnnicTour,
+      UnnnicCard,
+    },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        attachedElementsLoaded: false,
+      };
+    },
+    methods: {
+      startTour() {
+        this.$refs.tour.start();
+      },
+    },
+    mounted() {
+      this.$nextTick(() => {
+        args.steps[0].attachedElement = this.$refs.step1.$el;
+        this.attachedElementsLoaded = true;
+      });
+    },
+    template: `
+    <div style="height: 50%; width: 30%; border: 1px solid #ccc; padding: 16px; margin: auto">
+      <button @click="startTour">Start tour</button>
+      <UnnnicCard 
+        type="default"
+        title="This is the title"
+        description="This is the description"
+        ref="step1"
+      />
+      <unnnic-tour v-if="attachedElementsLoaded" v-bind="args" ref="tour" />
+    </div>
+    `,
+  }),
+};

package/src/stories/Typography.mdx

@@ -0,0 +1,83 @@
+import { Meta, Title, Story } from '@storybook/addon-docs/blocks';
+import * as TypographyStories from './Typography.stories.js';
+
+<Meta title="Typography" />
+
+<Title>Typography</Title>
+
+Typography follows the scale defined in the design system.
+
+**Design reference:** [Figma (Typography)](https://www.figma.com/design/YbvOpVPUBxTSEzg4J8pXKu/Weni---unnnic?node-id=404-210&m=dev)
+
+**Font:** Inter · **Weights:** 400 (Regular), 500 (Medium), 600 (Semibold)
+
+_Inter_ uses **letter-spacing** adjustments for legibility. **Prefer the typography mixins** so font and letter-spacing are always applied together; the variables remain available when you need them separately.
+
+---
+
+## Display
+
+Headings and large titles. Use for page titles and section headers.
+
+| Style     | Mixin                            | Size  | Weight   | Line height | Letter spacing |
+|-----------|----------------------------------|-------|----------|-------------|----------------|
+| Display 1 | `@include unnnic-font-display-1` | 24px  | Semibold | 1.4         | -4%            |
+| Display 2 | `@include unnnic-font-display-2` | 20px  | Semibold | 1.4         | -4%            |
+| Display 3 | `@include unnnic-font-display-3` | 16px  | Semibold | 1.4         | -2%            |
+| Display 4 | `@include unnnic-font-display-4` | 16px  | Regular  | 1.4         | -2%            |
+
+<Story of={TypographyStories.Display} />
+
+
+---
+
+## Body
+
+Default text and emphasized content. Use for paragraphs, labels, and UI copy.
+
+| Style   | Mixin                           | Size | Weight   | Line height | Letter spacing |
+|---------|---------------------------------|------|----------|-------------|----------------|
+| Body    | `@include unnnic-font-body`     | 14px | Regular  | 1.4         | -1%            |
+| Emphasis| `@include unnnic-font-emphasis` | 14px | Medium   | 1.4         | -1%            |
+| Action  | `@include unnnic-font-action`   | 14px | Semibold | 1.4         | -1%            |
+
+<Story of={TypographyStories.Body} />
+
+---
+
+## Caption
+
+Small text for captions, tags, and secondary information.
+
+| Style     | Mixin                            | Size | Weight   | Line height | Letter spacing |
+|-----------|----------------------------------|------|----------|-------------|----------------|
+| Caption 1 | `@include unnnic-font-caption-1` | 12px | Medium   | 1.4         | 0              |
+| Caption 2 | `@include unnnic-font-caption-2` | 12px | Regular  |  1.4        | 0              |
+
+<Story of={TypographyStories.Caption} />
+
+---
+
+## Usage
+
+**Recommended:** use the typography mixins so font and letter-spacing are always applied together.
+
+**When the project injects unnnic via sass-loader** (e.g. rspack/webpack/vite with `additionalData: "@use '@weni/unnnic-system/src/assets/scss/unnnic.scss' as *;"`), the mixins are available in every SCSS file and Vue `<style lang="scss">` without adding `@use` in each file:
+
+```scss
+.my-heading {
+  @include unnnic-font-display-1;
+}
+```
+
+**When unnnic is not globally injected**, add the `@use` once at the top of the file:
+
+```scss
+@use '@weni/unnnic-system/src/assets/scss/unnnic.scss' as *;
+
+.my-heading {
+  @include unnnic-font-display-1;
+}
+```
+
+If you need only the `font` or `letter-spacing` value (e.g. for overrides or calculations), use the variables: `$unnnic-font-display-1`, `$unnnic-font-letter-spacing-display-1`, etc.

package/src/stories/Typography.stories.js

@@ -0,0 +1,66 @@
+/**
+ * Typography stories. Display, Display4, Body, etc. use tags: ['!dev']
+ * so they only appear in Typography.mdx via <Story of={...} />, not in the sidebar.
+ */
+export default {
+  title: 'Typography',
+  args: {
+    fontFamily: 'Inter, sans-serif',
+  },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 0.5rem; border: 1px solid #D6D9E1; border-radius: 8px; padding: 1rem;">
+        <p
+          v-for="(size, i) in (Array.isArray(args.fontSizes) ? args.fontSizes : [args.fontSizes])"
+          :key="i"
+          :style="{
+            fontSize: size + 'px',
+            fontWeight: args.fontWeights[i],
+            fontFamily: args.fontFamily,
+            lineHeight: 1.4,
+            letterSpacing: args.letterSpacing[i],
+
+            margin: 0,
+          }"
+        >
+          {{ args.fontsIds[i] }} | The quick brown fox jumps over the lazy dog
+        </p>
+      </div>
+    `,
+  }),
+};
+
+const docsOnlyTag = ['!dev'];
+
+export const Display = {
+  tags: docsOnlyTag,
+  args: {
+    fontSizes: [24, 20, 16, 16],
+    fontWeights: ['600', '600', '600', '400'],
+    fontsIds: ['Display 1', 'Display 2', 'Display 3', 'Display 4'],
+    letterSpacing: ['-4%', '-4%', '-2%', '-2%'],
+  },
+};
+
+export const Body = {
+  tags: docsOnlyTag,
+  args: {
+    fontSizes: [14, 14, 14],
+    fontWeights: ['400', '500', '600'],
+    fontsIds: ['Body', 'Emphasis', 'Action'],
+    letterSpacing: ['-1%', '-1%', '-1%'],
+  },
+};
+
+export const Caption = {
+  tags: docsOnlyTag,
+  args: {
+    fontSizes: [12, 12],
+    fontWeights: ['500', '400'],
+    letterSpacing: ['0', '0'],
+    fontsIds: ['Caption 1', 'Caption 2'],
+  },
+};