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

package/src/stories/Tabs.stories.js

@@ -0,0 +1,169 @@
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import UnnnicToolTip from '@/components/ToolTip/ToolTip.vue';
+import UnnnicIcon from '@/components/Icon.vue';
+import '@/assets/scss/tailwind.scss';
+
+export default {
+  title: 'Navigation/Tabs',
+  component: Tabs,
+  tags: ['autodocs'],
+  render: (args) => ({
+    components: { Tabs, TabsList, TabsTrigger, TabsContent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Tabs v-bind="args">
+        <TabsList>
+          <TabsTrigger value="account">Account</TabsTrigger>
+          <TabsTrigger value="password">Password</TabsTrigger>
+          <TabsTrigger value="settings">Settings</TabsTrigger>
+        </TabsList>
+        <TabsContent value="account">
+          <div>Make changes to your account here.</div>
+        </TabsContent>
+        <TabsContent value="password">
+          <div>Change your password here.</div>
+        </TabsContent>
+        <TabsContent value="settings">
+          <div>Update your application settings here.</div>
+        </TabsContent>
+      </Tabs>
+    `,
+  }),
+  args: {
+    defaultValue: 'account',
+  },
+  argTypes: {
+    defaultValue: {
+      control: { type: 'select' },
+      options: ['account', 'password', 'settings'],
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    defaultValue: 'account',
+  },
+};
+
+export const Disabled = {
+  render: (args) => ({
+    components: { Tabs, TabsList, TabsTrigger, TabsContent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Tabs v-bind="args">
+        <TabsList>
+          <TabsTrigger value="account">Account</TabsTrigger>
+          <TabsTrigger value="password" disabled>Password</TabsTrigger>
+          <TabsTrigger value="settings" disabled>Settings</TabsTrigger>
+        </TabsList>
+        <TabsContent value="account">
+          <div>Make changes to your account here.</div>
+        </TabsContent>
+        <TabsContent value="password">
+          <div>Change your password here.</div>
+        </TabsContent>
+        <TabsContent value="settings">
+          <div>Update your application settings here.</div>
+        </TabsContent>
+      </Tabs>
+    `,
+  }),
+  args: {
+    defaultValue: 'account',
+  },
+};
+
+export const WithTooltip = {
+  render: (args) => ({
+    components: {
+      Tabs,
+      TabsList,
+      TabsTrigger,
+      TabsContent,
+      UnnnicToolTip,
+      UnnnicIcon,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <Tabs v-bind="args">
+        <TabsList>
+          <TabsTrigger value="account">
+              Account
+              <UnnnicToolTip enabled text="Manage your account settings" side="bottom" class="!inline-flex items-center">
+                <UnnnicIcon icon="help" size="sm" scheme="fg-base"/>
+              </UnnnicToolTip>
+          </TabsTrigger>
+          <TabsTrigger value="password">
+            <span>Password</span>
+          </TabsTrigger>
+          <TabsTrigger value="settings">
+            <span>Settings</span>
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value="account">
+          <div>Make changes to your account here.</div>
+        </TabsContent>
+        <TabsContent value="password">
+          <div>Change your password here.</div>
+        </TabsContent>
+        <TabsContent value="settings">
+          <div>Update your application settings here.</div>
+        </TabsContent>
+      </Tabs>
+    `,
+  }),
+  args: {
+    defaultValue: 'account',
+  },
+};
+
+const WithRightSlotTemplateCode = `
+<Tabs v-bind="args">
+  <TabsList>
+    <TabsTrigger value="account">Account</TabsTrigger>
+    <TabsTrigger value="password">Password</TabsTrigger>
+    <TabsTrigger value="settings">Settings</TabsTrigger>
+    <template #right>
+      <div style="display: flex; align-self: self-end; gap: $unnnic-space-2;">
+        <UnnnicIcon icon="add-1" size="sm" scheme="fg-base"/>
+        <UnnnicIcon icon="help" size="sm" scheme="fg-base"/>
+      </div>
+    </template>
+  </TabsList>
+  <TabsContent value="account">
+    <div>Make changes to your account here.</div>
+  </TabsContent>
+  <TabsContent value="password">
+    <div>Change your password here.</div>
+  </TabsContent>
+  <TabsContent value="settings">
+    <div>Update your application settings here.</div>
+  </TabsContent>
+</Tabs>
+    `;
+export const WithRightSlot = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'A simple popover with some content inside.',
+      },
+      source: {
+        code: WithRightSlotTemplateCode,
+      },
+    },
+  },
+  render: (args) => ({
+    components: { Tabs, TabsList, TabsTrigger, TabsContent, UnnnicIcon },
+    setup() {
+      return { args };
+    },
+    template: WithRightSlotTemplateCode,
+  }),
+};

package/src/stories/TabsExpanded.stories.js

@@ -0,0 +1,69 @@
+import { action } from 'storybook/actions';
+import UnnnicTabsExpanded from '../components/TabsExpanded/TabsExpanded.vue';
+
+export default {
+  title: 'tabs/TabsExpanded',
+  component: UnnnicTabsExpanded,
+  argTypes: {},
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: {
+      UnnnicTabsExpanded,
+    },
+
+    data() {
+      return {
+        v: 'uuid2',
+        lItems: [],
+      };
+    },
+
+    created() {
+      this.lItems = args.items;
+    },
+
+    methods: {
+      lCloseTab(tab) {
+        const index = this.lItems.findIndex(({ value }) => value === tab.value);
+
+        this.lItems.splice(index, 1);
+
+        this.v = this.lItems[index]?.value || this.lItems[index - 1]?.value;
+      },
+    },
+
+    template:
+      '<div><pre>v-model: {{ v }}</pre><unnnic-tabs-expanded  v-bind="args" v-model="v" @close-tab="lCloseTab"></unnnic-tabs-expanded></div>',
+  }),
+  args: {
+    onBack: action('@back'),
+    onAdd: action('@add'),
+    onCloseTab: action('@close-tab'),
+    items: [
+      {
+        title: 'Suporte',
+        description: 'Última edição há 5 minutos',
+        value: 'uuid1',
+      },
+      {
+        title: 'Boas vindas',
+        description: 'Última edição agora há pouco',
+        value: 'uuid2',
+      },
+      {
+        title: 'Atendimento',
+        description: 'Última edição em 4 de janeiro',
+        value: 'uuid3',
+      },
+      {
+        title: 'Texto grande texto grande texto grande',
+        description: 'Texto grande texto grande texto grande',
+        value: 'uuid4',
+      },
+    ],
+  },
+};
+
+export const Default = {};

package/src/stories/Tag.stories.js

@@ -0,0 +1,59 @@
+import UnnnicTag from '../components/Tag/Tag.vue';
+
+export default {
+  title: 'Data Display/Tag',
+  component: UnnnicTag,
+  tags: ['autodocs'],
+  argTypes: {
+    text: { control: { type: 'text' } },
+    type: {
+      control: 'select',
+      options: ['default', 'brand', 'next'],
+    },
+    scheme: {
+      control: 'select',
+      options: [
+        'green',
+        'blue',
+        'purple',
+        'red',
+        'orange',
+        'yellow',
+        'gray',
+        'teal',
+      ],
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium'],
+    },
+    hasCloseIcon: { control: 'boolean' },
+    leftIcon: {
+      control: 'select',
+      options: [null, 'check_circle', 'sentiment_satisfied'],
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    text: 'Label',
+    type: 'default',
+  },
+};
+
+export const LeftIcon = {
+  args: {
+    text: 'Label',
+    type: 'default',
+    leftIcon: 'check_circle',
+  },
+};
+
+export const Small = {
+  args: {
+    text: 'Label',
+    type: 'default',
+    size: 'small',
+  },
+};

package/src/stories/TemplatePreview.stories.js

@@ -0,0 +1,94 @@
+import UnnnicTemplatePreview from '../components/TemplatePreview/TemplatePreview.vue';
+
+export default {
+  title: 'example/TemplatePreview',
+  tags: ['autodocs'],
+  component: UnnnicTemplatePreview,
+};
+
+const Template = (args) => ({
+  components: { UnnnicTemplatePreview },
+  setup() {
+    return { args };
+  },
+  template: `
+      <unnnic-template-preview v-bind="args" />
+    `,
+});
+
+const bodyText =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sem orci, ultrices id lectus non, vehicula suscipit libero. Ut vehicula libero a tempus fringilla. Nam tincidunt vestibulum maximus. Morbi vel pretium risus. Curabitur id quam lectus. Quisque dolor elit, auctor a lacus non, rutrum ullamcorper mi. Nulla et turpis sed eros pharetra ullamcorper fermentum ac nisl. Donec lacinia hendrerit tellus, sit amet suscipit velit vestibulum sed. Praesent gravida posuere metus, ut fringilla dolor euismod vel. Aenean vel ipsum magna. Integer metus mi, fermentum ut nulla at, facilisis lobortis metus. Ut vitae tortor posuere, dapibus leo quis, finibus neque.';
+
+export const Default = Template.bind({});
+Default.args = {
+  template: {
+    header: {
+      type: 'TEXT',
+      text: 'Hello, world!',
+    },
+    footer: 'Weni by VTEX',
+    buttons: [
+      {
+        text: 'Button 1',
+        type: 'PHONE_NUMBER',
+      },
+      {
+        text: 'Button 2',
+        type: 'URL',
+      },
+      {
+        text: 'Button 3',
+        type: 'QUICK_REPLY',
+      },
+    ],
+    body: bodyText,
+  },
+};
+
+export const Image = Template.bind({});
+Image.args = {
+  template: {
+    header: {
+      type: 'MEDIA',
+      mediaType: 'IMAGE',
+    },
+    footer: 'Weni by VTEX',
+    body: bodyText,
+  },
+};
+
+export const Video = Template.bind({});
+Video.args = {
+  template: {
+    header: {
+      type: 'MEDIA',
+      mediaType: 'VIDEO',
+    },
+    buttons: [
+      {
+        text: 'Button 1',
+        type: 'PHONE_NUMBER',
+      },
+      {
+        text: 'Button 2',
+        type: 'URL',
+      },
+      {
+        text: 'Button 3',
+        type: 'QUICK_REPLY',
+      },
+    ],
+  },
+};
+
+export const Document = Template.bind({});
+Document.args = {
+  template: {
+    header: {
+      type: 'MEDIA',
+      mediaType: 'DOCUMENT',
+    },
+    footer: 'Weni by VTEX',
+    body: bodyText,
+  },
+};

package/src/stories/TemplatePreviewModal.stories.js

@@ -0,0 +1,110 @@
+import UnnnicTemplatePreviewModal from '../components/TemplatePreview/TemplatePreviewModal.vue';
+
+import { action } from 'storybook/actions';
+
+export default {
+  title: 'example/TemplatePreviewModal',
+  tags: ['autodocs'],
+  component: UnnnicTemplatePreviewModal,
+  argTypes: {
+    locale: {
+      control: { type: 'select' },
+      options: ['pt-br', 'en', 'es'],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { UnnnicTemplatePreviewModal },
+  setup() {
+    const close = () => {
+      action('close')();
+      args.modelValue = false;
+    };
+    return { args, close };
+  },
+  template: `
+    <div>
+      <button @click="args.modelValue = true">Open Modal</button>
+      <unnnic-template-preview-modal v-bind="args" @close="close" />
+    </div>
+    `,
+});
+
+const bodyText =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sem orci, ultrices id lectus non, vehicula suscipit libero. Ut vehicula libero a tempus fringilla. Nam tincidunt vestibulum maximus. Morbi vel pretium risus. Curabitur id quam lectus. Quisque dolor elit, auctor a lacus non, rutrum ullamcorper mi. Nulla et turpis sed eros pharetra ullamcorper fermentum ac nisl. Donec lacinia hendrerit tellus, sit amet suscipit velit vestibulum sed. Praesent gravida posuere metus, ut fringilla dolor euismod vel. Aenean vel ipsum magna. Integer metus mi, fermentum ut nulla at, facilisis lobortis metus. Ut vitae tortor posuere, dapibus leo quis, finibus neque.';
+
+export const Default = Template.bind({});
+Default.args = {
+  modelValue: false,
+  template: {
+    header: {
+      type: 'TEXT',
+      text: 'Hello, world!',
+    },
+    footer: 'Weni by VTEX',
+    buttons: [
+      {
+        text: 'Button 1',
+        type: 'PHONE_NUMBER',
+      },
+      {
+        text: 'Button 2',
+        type: 'URL',
+      },
+      {
+        text: 'Button 3',
+        type: 'QUICK_REPLY',
+      },
+    ],
+    body: bodyText,
+  },
+};
+
+export const Image = Template.bind({});
+Image.args = {
+  template: {
+    header: {
+      type: 'MEDIA',
+      mediaType: 'IMAGE',
+    },
+    footer: 'Weni by VTEX',
+    body: bodyText,
+  },
+};
+
+export const Video = Template.bind({});
+Video.args = {
+  template: {
+    header: {
+      type: 'MEDIA',
+      mediaType: 'VIDEO',
+    },
+    buttons: [
+      {
+        text: 'Button 1',
+        type: 'PHONE_NUMBER',
+      },
+      {
+        text: 'Button 2',
+        type: 'URL',
+      },
+      {
+        text: 'Button 3',
+        type: 'QUICK_REPLY',
+      },
+    ],
+  },
+};
+
+export const Document = Template.bind({});
+Document.args = {
+  template: {
+    header: {
+      type: 'MEDIA',
+      mediaType: 'DOCUMENT',
+    },
+    footer: 'Weni by VTEX',
+    body: bodyText,
+  },
+};

package/src/stories/TextArea.mdx

@@ -0,0 +1,68 @@
+import { Meta, Source, Story } from '@storybook/addon-docs/blocks';
+
+import * as TextAreaStories from './TextArea.stories';
+
+<Meta of={TextAreaStories}/>
+
+# TextArea
+
+The `TextArea` component is designed to provide a textarea field for users to enter texts.
+
+<Source
+  language='html'
+  dark
+  code={`<UnnnicTextArea
+  label="Label"
+  message="Helper text" | error="Error text"
+  :disabled="false | true"
+  v-model="value"
+  size="md"
+  type="normal"
+/>`}
+/>
+
+
+---
+
+#### **Props Options:**
+
+| Key     | Description                               | Values                  | Default     |
+|---------|-------------------------------------------|-------------------------|-------------|
+| label   | `String` of the textarea label            | `String`                | `undefined` |
+| message | `String` of the helper text, when applied | `String`                | `undefined` |
+| error   | `String` of the error text, when applied  | `String`                | `undefined` |
+| v-model | `String` of the textarea content          | `''`                    | `''`        |
+| size    | `String` of the size                      | `'md'` \| `'sm'`        | `md`        |
+| type    | `String` of the textarea type             | `'normal'` \| `'error'` | `'normal'`  |
+
+## Example
+Some examples of uses of the `UnnnicTextArea`
+
+### Default
+
+<Story of={TextAreaStories.Default} />
+
+
+### Error
+
+<Story of={TextAreaStories.Error} />
+
+
+### Disabled
+
+<Story of={TextAreaStories.Disabled} />
+
+
+### Default (small size)
+
+<Story of={TextAreaStories.DefaultSm} />
+
+
+### Error (small size)
+
+<Story of={TextAreaStories.ErrorSm} />
+
+
+### Disabled (small size)
+
+<Story of={TextAreaStories.DisabledSm} />

package/src/stories/TextArea.stories.js

@@ -0,0 +1,117 @@
+import unnnicFormElement from '../components/FormElement/FormElement.vue';
+import UnnnicTextArea from '../components/TextArea/TextArea.vue';
+
+export default {
+  title: 'Form/TextArea',
+  component: UnnnicTextArea,
+  argTypes: {
+    size: { control: { type: 'select' }, options: ['md', 'sm'] },
+    type: { control: { type: 'select' }, options: ['normal', 'error'] },
+  },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: {
+      unnnicFormElement,
+      UnnnicTextArea,
+    },
+    data() {
+      return {
+        content: '',
+      };
+    },
+    template: `
+      <unnnic-text-area v-bind="args" v-model="content"/>
+    `,
+  }),
+};
+
+export const Default = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    maxLength: 150,
+    disabled: false,
+    type: 'normal',
+    errors: [],
+    size: 'md',
+    message: 'Helper text',
+    tooltip: {
+      text: 'Tooltip',
+      enabled: true,
+    },
+  },
+};
+
+export const Error = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    maxLength: 150,
+    disabled: false,
+    type: 'error',
+    errors: 'Error text',
+    size: 'md',
+  },
+};
+
+export const Disabled = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    maxLength: 150,
+    disabled: true,
+    type: 'normal',
+    size: 'md',
+    message: 'Helper text',
+  },
+};
+
+export const DefaultSm = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    maxLength: 150,
+    disabled: false,
+    type: 'normal',
+    errors: [],
+    size: 'sm',
+    message: 'Helper text',
+  },
+};
+
+export const ErrorSm = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    maxLength: 150,
+    disabled: false,
+    type: 'error',
+    errors: 'Error text',
+    size: 'sm',
+  },
+};
+
+export const DisabledSm = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    maxLength: 150,
+    disabled: true,
+    type: 'normal',
+    size: 'sm',
+    message: 'Helper text',
+  },
+};
+
+export const ResizeNone = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    maxLength: 150,
+    disabled: false,
+    type: 'normal',
+    resize: 'none',
+  },
+};