@weni/unnnic-system 3.8.2-alpha.2 → 3.9.0

package/src/stories/Input.stories.js

@@ -7,25 +7,14 @@ export default {
   component: unnnicInput,
   argTypes: {
     label: { control: { type: 'text' } },
-    size: {
-      control: { type: 'select' },
-      options: ['md', 'sm'],
-      defaultValue: {
-        summary: 'md',
-      },
-    },
-    type: {
-      control: { type: 'select' },
-      options: ['normal', 'error'],
-      defaultValue: {
-        summary: 'normal',
-      },
-    },
+    size: { control: { type: 'select' }, options: ['md', 'sm'] },
+    type: { control: { type: 'select' }, options: ['normal', 'error'] },
     nativeType: { control: { type: 'select' }, options: ['text', 'password'] },
     placeholder: { control: { type: 'text' } },
     iconLeft: { control: { type: 'select' }, options: iconList },
     iconRight: { control: { type: 'select' }, options: iconList },
     allowTogglePassword: { control: { type: 'boolean' } },
+    hasCloudyColor: { control: { type: 'select' }, options: [true, false] },
   },
   render: (args) => ({
     components: {
@@ -46,72 +35,106 @@ export default {
       },
     },
     template: `
-      <unnnic-input v-model="value" @icon-right-click="click" v-bind="args" />
+      <unnnic-form-element label="Label" message="Helper text">
+        <unnnic-input v-model="value" @icon-right-click="click" v-bind="args" />
+      </unnnic-form-element>
     `,
   }),
 };
 
-export const Normal = {
-  args: {
-    label: 'Label',
-    placeholder: 'Placeholder',
+const TemplateError = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+
+  components: {
+    unnnicFormElement,
+    unnnicInput,
   },
-};
 
-export const NormalSm = {
-  args: {
-    label: 'Label',
-    size: 'sm',
-    placeholder: 'Placeholder',
+  setup() {
+    return { args };
   },
-};
 
-export const Error = {
-  args: {
-    label: 'Label',
-    placeholder: 'Placeholder',
-    errors: 'Error text',
+  data() {
+    return {
+      value: '',
+    };
   },
-};
 
-export const ErrorSm = {
-  args: {
-    label: 'Label',
-    size: 'sm',
-    errors: 'Error text',
-    placeholder: 'Placeholder',
+  template: `
+    <unnnic-form-element label="Label" error="Error text">
+      <unnnic-input v-model="value" v-bind="args"/>
+    </unnnic-form-element>
+  `,
+});
+
+const TemplateDisabled = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+
+  components: {
+    unnnicFormElement,
+    unnnicInput,
+  },
+
+  setup() {
+    return { args };
   },
-};
 
-export const Disabled = {
+  data() {
+    return {
+      value: '',
+    };
+  },
+
+  template: `
+    <unnnic-form-element label="Label" message="Helper text" disabled>
+      <unnnic-input v-model="value" v-bind="args"/>
+    </unnnic-form-element>
+  `,
+});
+
+export const Normal = {
   args: {
-    label: 'Label',
-    disabled: true,
+    type: 'normal',
     placeholder: 'Placeholder',
   },
 };
 
-export const DisabledSm = {
+export const NormalSm = {
   args: {
-    label: 'Label',
     size: 'sm',
-    disabled: true,
+    type: 'normal',
     placeholder: 'Placeholder',
   },
 };
 
-export const DisabledError = {
-  args: {
-    label: 'Label',
-    disabled: true,
-    errors: 'Error text',
-    placeholder: 'Placeholder',
-  },
+export const Error = TemplateError.bind({});
+Error.args = {
+  type: 'error',
+  placeholder: 'Placeholder',
+};
+
+export const ErrorSm = TemplateError.bind({});
+ErrorSm.args = {
+  size: 'sm',
+  type: 'error',
+  placeholder: 'Placeholder',
+};
+
+export const Disabled = TemplateDisabled.bind({});
+Disabled.args = {
+  disabled: true,
+  placeholder: 'Placeholder',
+};
+
+export const DisabledSm = TemplateDisabled.bind({});
+DisabledSm.args = {
+  size: 'sm',
+  disabled: true,
+  placeholder: 'Placeholder',
 };
 
 export const Password = {
   args: {
-    label: 'Label',
     placeholder: 'Password',
     nativeType: 'password',
     allowTogglePassword: true,
@@ -120,7 +143,6 @@ export const Password = {
 
 export const IconLeftAndRight = {
   args: {
-    label: 'Label',
     placeholder: 'Text',
     iconLeft: 'email',
     iconRight: 'search',
@@ -135,20 +157,3 @@ export const Mask = {
     mask: ['###.###.###-##', '##.###.###/####-##'],
   },
 };
-
-export const LimitMaxLength = {
-  args: {
-    label: 'Label',
-    placeholder: 'Text',
-    maxlength: 10,
-    showMaxlengthCounter: true,
-  },
-};
-
-export const WithTooltip = {
-  args: {
-    label: 'Label',
-    placeholder: 'Text',
-    tooltip: 'Tooltip',
-  },
-};

package/src/stories/Label.stories.js

@@ -13,10 +13,3 @@ export const Default = {
     label: 'Label',
   },
 };
-
-export const WithTooltip = {
-  args: {
-    label: 'Label',
-    tooltip: 'Tooltip',
-  },
-};

package/src/stories/ModalDialog.mdx

@@ -6,9 +6,6 @@ import * as ModalDialogStories from './ModalDialog.stories';
 
 # ModalDialog
 
-> **⚠️ DEPRECATED**: This component has been deprecated in favor of the new `Dialog` component. Please use `UnnnicDialog` 
-instead for new implementations. See the [Dialog documentation](?path=/docs/feedback-dialog--docs) for more information.
-
 The ModalDialog was designed to inform the user about a specific task, request information, or involve other tasks.
 
 <Source

package/src/stories/ModalDialog.stories.js

@@ -7,7 +7,7 @@ import iconsList from '../utils/iconList';
 import colorsList from '../utils/colorsList';
 
 export default {
-  title: 'Feedback/ModalDialog',
+  title: 'Example/ModalDialog',
   component: UnnnicModalDialog,
   argTypes: {
     type: {

package/src/stories/Switch.stories.js

@@ -4,11 +4,9 @@ export default {
   title: 'Form/Switch',
   component: UnnnicSwitch,
   argTypes: {
-    label: { control: { type: 'text' } },
-    labelTooltip: { control: { type: 'text' } },
-    labelUseHtmlTooltip: { control: 'boolean' },
-    option: { control: { type: 'text' } },
-    helper: { control: { type: 'text' } },
+    size: { control: { type: 'select', options: ['small', 'medium'] } },
+    textLeft: { control: { type: 'text' } },
+    textRight: { control: { type: 'text' } },
     disabled: { control: { type: 'boolean' } },
   },
   render: (args) => ({
@@ -34,11 +32,8 @@ export default {
 
 export const Default = {
   args: {
-    label: 'Default',
-    labelTooltip: 'Tooltip',
-    labelUseHtmlTooltip: true,
-    option: 'Option',
-    helper: 'Helper text',
+    size: 'medium',
+    textRight: 'Default',
     disabled: false,
   },
 };

package/src/stories/Tab.stories.js

@@ -3,6 +3,9 @@ import unnnicTab from '../components/Tab/Tab.vue';
 export default {
   title: 'tabs/Tab',
   component: unnnicTab,
+  argTypes: {
+    size: { control: { type: 'select', options: ['md', 'sm'] } },
+  },
   render: (args) => ({
     components: {
       unnnicTab,
@@ -33,15 +36,6 @@ export default {
             Second description
           </p>
         </template>
-        <template #tab-head-third>
-          Third
-        </template>
-        <template #tab-panel-third>
-          <h2 class="title">Third Content</h2>
-          <p class="description">
-            Third description
-          </p>
-        </template>
       </unnnic-tab>
     `,
   }),
@@ -50,7 +44,6 @@ export default {
 export const Default = {
   args: {
     initialTab: 'first',
-    tabs: ['first', 'second', 'third'],
-    disabledTabs: ['third'],
+    tabs: ['first', 'second'],
   },
 };

package/src/stories/Tabs.stories.js

@@ -0,0 +1,125 @@
+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: 'Misc/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',
+  },
+};

package/src/stories/Tag.stories.js

@@ -1,4 +1,5 @@
 import UnnnicTag from '../components/Tag/Tag.vue';
+import colorsList from '../utils/colorsList';
 
 export default {
   title: 'Data Display/Tag',
@@ -7,30 +8,13 @@ export default {
   argTypes: {
     text: { control: { type: 'text' } },
     type: {
-      control: 'select',
-      options: ['default', 'brand', 'next'],
+      control: { type: 'select', options: ['default', 'indicator', 'brand'] },
     },
     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'],
+      control: {
+        type: 'select',
+        options: colorsList,
+      },
     },
   },
 };
@@ -50,10 +34,45 @@ export const LeftIcon = {
   },
 };
 
-export const Small = {
+export const RightIcon = {
   args: {
     text: 'Label',
     type: 'default',
-    size: 'small',
+    rightIcon: 'check_circle',
+  },
+};
+
+export const CloseIcon = {
+  args: {
+    text: 'Label',
+    type: 'default',
+    hasCloseIcon: true,
+  },
+};
+
+export const Next = {
+  args: {
+    text: 'Label',
+    type: 'next',
+    scheme: 'weni',
+  },
+};
+
+export const Indicator = {
+  args: {
+    text: 'Tag Name',
+    type: 'indicator',
+    count: 100,
+    clickable: true,
+    hasBackButton: false,
+    enableTooltip: true,
+    tooltipText: 'This is the amount',
+  },
+};
+
+export const Brand = {
+  args: {
+    text: 'Settings',
+    type: 'brand',
   },
 };

package/src/stories/TextArea.stories.js

@@ -47,7 +47,7 @@ export const Error = {
     maxLength: 150,
     disabled: false,
     type: 'error',
-    errors: 'Error text',
+    error: 'Error text',
     size: 'md',
   },
 };
@@ -84,7 +84,7 @@ export const ErrorSm = {
     maxLength: 150,
     disabled: false,
     type: 'error',
-    errors: 'Error text',
+    error: 'Error text',
     size: 'sm',
   },
 };
@@ -100,14 +100,3 @@ export const DisabledSm = {
     message: 'Helper text',
   },
 };
-
-export const ResizeNone = {
-  args: {
-    label: 'Label',
-    placeholder: 'Placeholder',
-    maxLength: 150,
-    disabled: false,
-    type: 'normal',
-    resize: 'none',
-  },
-};

package/src/types/scheme-colors.d.ts

@@ -140,7 +140,6 @@ export type SchemeColor =
   | 'feedback-yellow'
   | 'feedback-blue'
   | 'feedback-grey'
-  | 'fg-base'
   | 'aux-blue'
   | 'aux-purple'
   | 'aux-orange'

package/src/utils/call.js

@@ -1,58 +1,30 @@
 import { createApp } from 'vue';
 import Alert from '../components/Alert/Alert.vue';
 import Modal from '../components/Modal/Modal.vue';
-import ToastInstance from '../components/Toast/ToastManager';
 import mitt from 'mitt';
 
 const emitter = mitt();
-const callAlert = ({ props, containerRef, seconds }) => {
-  if (props.version === '1.1' || containerRef) {
-    const AlertComponent = createApp(Alert, {
-      ...props,
-      seconds,
-      version: '1.1',
-      onClose: () => {
+
+const callAlert = ({ props, containerRef }) => {
+  const AlertComponent = createApp(Alert, {
+    ...props,
+    onClose: () => {
+      instance.$el.remove();
+    },
+    created() {
+      emitter.on(['close'], () => {
         instance.$el.remove();
-      },
-      created() {
-        emitter.on(['close'], () => {
-          instance.$el.remove();
-        });
-      },
-    });
-    const element = document.createElement('div');
-    const instance = AlertComponent.mount(element);
+      });
+    },
+  });
+  const element = document.createElement('div');
+  const instance = AlertComponent.mount(element);
 
-    if (containerRef) {
-      instance.$el.style.position = 'absolute';
-      containerRef.appendChild(instance.$el);
-    } else {
-      document.body.appendChild(instance.$el);
-    }
+  if (containerRef) {
+    instance.$el.style.position = 'absolute';
+    containerRef.appendChild(instance.$el);
   } else {
-    const typeMap = {
-      success: 'success',
-      error: 'error',
-      attention: 'attention',
-      default: 'informational',
-      'feedback-green': 'success',
-      'feedback-red': 'error',
-    };
-
-    const toastProps = {
-      timeout: seconds ? seconds * 1000 : 5000,
-      type: typeMap[props.scheme || props.type] || typeMap.default,
-
-      onClose: () => {
-        emitter.emit(['close']);
-      },
-    };
-
-    ToastInstance.show({
-      title: props.text,
-      description: '',
-      ...toastProps,
-    });
+    document.body.appendChild(instance.$el);
   }
 };