@weni/unnnic-system 3.9.3-alpha.0 → 3.9.3

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

@@ -37,7 +37,6 @@ export const Default = {
     errors: [],
     size: 'md',
     message: 'Helper text',
-    tooltip: 'Tooltip',
   },
 };
 
@@ -48,7 +47,7 @@ export const Error = {
     maxLength: 150,
     disabled: false,
     type: 'error',
-    errors: 'Error text',
+    error: 'Error text',
     size: 'md',
   },
 };
@@ -85,7 +84,7 @@ export const ErrorSm = {
     maxLength: 150,
     disabled: false,
     type: 'error',
-    errors: 'Error text',
+    error: 'Error text',
     size: 'sm',
   },
 };
@@ -101,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);
   }
 };
 

package/dist/assets/tokens/colors.json.d.ts

@@ -1,376 +0,0 @@
-declare const _default: {
-  "color": {
-    "white": {
-      "value": "#FFFFFF"
-    },
-    "black": {
-      "value": "#000000"
-    },
-    "gray": {
-      "50": {
-        "value": "#F6F7F9"
-      },
-      "100": {
-        "value": "#ECEEF2"
-      },
-      "200": {
-        "value": "#D6D9E1"
-      },
-      "300": {
-        "value": "#B2B9C7"
-      },
-      "400": {
-        "value": "#8893A8"
-      },
-      "500": {
-        "value": "#67738B"
-      },
-      "600": {
-        "value": "#545E75"
-      },
-      "700": {
-        "value": "#454D5F"
-      },
-      "800": {
-        "value": "#3B4151"
-      },
-      "900": {
-        "value": "#353945"
-      },
-      "950": {
-        "value": "#23262E"
-      }
-    },
-    "teal": {
-      "50": {
-        "value": "#EFFEFC"
-      },
-      "100": {
-        "value": "#C7FFF7"
-      },
-      "200": {
-        "value": "#90FFEF"
-      },
-      "300": {
-        "value": "#51F7E7"
-      },
-      "400": {
-        "value": "#1DE4D7"
-      },
-      "500": {
-        "value": "#04C8BD"
-      },
-      "600": {
-        "value": "#00A49F"
-      },
-      "700": {
-        "value": "#05807D"
-      },
-      "800": {
-        "value": "#0A6564"
-      },
-      "900": {
-        "value": "#0D5453"
-      },
-      "950": {
-        "value": "#003133"
-      }
-    },
-      "green": {
-        "50": {
-          "value": "#F0F9F3"
-        },
-        "100": {
-          "value": "#DAF1E0"
-        },
-        "200": {
-          "value": "#B7E3C6"
-        },
-        "300": {
-          "value": "#88CDA4"
-        },
-        "400": {
-          "value": "#56B17E"
-        },
-        "500": {
-          "value": "#38A169"
-        },
-        "600": {
-          "value": "#24774C"
-        },
-        "700": {
-          "value": "#1D5F3F"
-        },
-        "800": {
-          "value": "#194C34"
-        },
-        "900": {
-          "value": "#153F2C"
-        },
-        "950": {
-          "value": "#0B2318"
-        }
-      },
-      "blue": {
-        "50": {
-          "value": "#F2F7FD"
-        },
-        "100": {
-          "value": "#E5EEF9"
-        },
-        "200": {
-          "value": "#C4DBF3"
-        },
-        "300": {
-          "value": "#90BDE9"
-        },
-        "400": {
-          "value": "#559BDB"
-        },
-        "500": {
-          "value": "#3182CE"
-        },
-        "600": {
-          "value": "#2062A9"
-        },
-        "700": {
-          "value": "#1B4F89"
-        },
-        "800": {
-          "value": "#1A4472"
-        },
-        "900": {
-          "value": "#1B3A5F"
-        },
-        "950": {
-          "value": "#12253F"
-        }
-      },
-      "purple": {
-        "50": {
-          "value": "#F6F5FD"
-        },
-        "100": {
-          "value": "#EEECFB"
-        },
-        "200": {
-          "value": "#DFDCF8"
-        },
-        "300": {
-          "value": "#C7BFF3"
-        },
-        "400": {
-          "value": "#AA9BEA"
-        },
-        "500": {
-          "value": "#8D72E0"
-        },
-        "600": {
-          "value": "#805AD5"
-        },
-        "700": {
-          "value": "#6B41C0"
-        },
-        "800": {
-          "value": "#5A36A1"
-        },
-        "900": {
-          "value": "#4B2E84"
-        },
-        "950": {
-          "value": "#2E1C59"
-        }
-      },
-      "red": {
-        "50": {
-          "value": "#FDF3F3"
-        },
-        "100": {
-          "value": "#FDE3E3"
-        },
-        "200": {
-          "value": "#FCCCCC"
-        },
-        "300": {
-          "value": "#F8A9A9"
-        },
-        "400": {
-          "value": "#F27777"
-        },
-        "500": {
-          "value": "#E53E3E"
-        },
-        "600": {
-          "value": "#D32F2F"
-        },
-        "700": {
-          "value": "#B22323"
-        },
-        "800": {
-          "value": "#932121"
-        },
-        "900": {
-          "value": "#7A2222"
-        },
-        "950": {
-          "value": "#420D0D"
-        }
-      },
-      "orange": {
-        "50": {
-          "value": "#FDF8EF"
-        },
-        "100": {
-          "value": "#FBEED9"
-        },
-        "200": {
-          "value": "#F7DAB1"
-        },
-        "300": {
-          "value": "#F1C080"
-        },
-        "400": {
-          "value": "#EB9D4C"
-        },
-        "500": {
-          "value": "#E5812A"
-        },
-        "600": {
-          "value": "#DD6B20"
-        },
-        "700": {
-          "value": "#B2501C"
-        },
-        "800": {
-          "value": "#8E401E"
-        },
-        "900": {
-          "value": "#73361B"
-        },
-        "950": {
-          "value": "#3E1A0C"
-        }
-      },
-      "yellow": {
-        "50": {
-          "value": "#FBF7EB"
-        },
-        "100": {
-          "value": "#F5EDCC"
-        },
-        "200": {
-          "value": "#EDD89B"
-        },
-        "300": {
-          "value": "#E2BC62"
-        },
-        "400": {
-          "value": "#D69E2E"
-        },
-        "500": {
-          "value": "#C88D2A"
-        },
-        "600": {
-          "value": "#AC6E22"
-        },
-        "700": {
-          "value": "#8A501E"
-        },
-        "800": {
-          "value": "#734120"
-        },
-        "900": {
-          "value": "#633720"
-        },
-        "950": {
-          "value": "#391B0F"
-        }
-      },
-    "bg": {
-      "base": {
-        "value": "{color.white}"
-      },
-      "soft": {
-        "value": "{color.gray.50}"
-      },
-      "muted": {
-        "value": "{color.gray.100}"
-      },
-      "active": {
-        "value": "{color.teal.600}"
-      },
-      "info": {
-        "value": "{color.blue.50}"
-      },
-      "success": {
-        "value": "{color.green.50}"
-      },
-      "warning": {
-        "value": "{color.yellow.50}"
-      },
-      "critical": {
-        "value": "{color.red.50}"
-      }
-    },
-    "fg": {
-      "base": {
-        "value": "{color.gray.500}"
-      },
-      "muted": {
-        "value": "{color.gray.300}"
-      },
-      "emphasized": {
-        "value": "{color.gray.900}"
-      },
-      "inverted": {
-        "value": "{color.white}"
-      },
-      "active": {
-        "value": "{color.teal.600}"
-      },
-      "info": {
-        "value": "{color.blue.500}"
-      },
-      "success": {
-        "value": "{color.green.500}"
-      },
-      "warning": {
-        "value": "{color.yellow.500}"
-      },
-      "critical": {
-        "value": "{color.red.500}"
-      }
-    },
-    "border": {
-      "base": {
-        "value": "{color.gray.200}"
-      },
-      "soft": {
-        "value": "{color.gray.100}"
-      },
-      "muted": {
-        "value": "{color.gray.200}"
-      },
-      "emphasized": {
-        "value": "{color.gray.400}"
-      },
-      "active": {
-        "value": "{color.teal.600}"
-      },
-      "info": {
-        "value": "{color.blue.300}"
-      },
-      "success": {
-        "value": "{color.green.300}"
-      },
-      "warning": {
-        "value": "{color.yellow.300}"
-      },
-      "critical": {
-        "value": "{color.red.300}"
-      }
-    }
-  }
-};
-
-export default _default;

package/dist/components/CheckboxGroup/CheckboxGroup.vue.d.ts

@@ -1,28 +0,0 @@
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & (new () => {
-    $slots: S;
-});
-declare const __VLS_component: import('vue').DefineComponent<{}, {
-    state: string;
-    labelUseHtmlTooltip: boolean;
-    label?: string | undefined;
-    helper?: string | undefined;
-    labelTooltip?: string | undefined;
-    $props: {
-        readonly state?: string | undefined;
-        readonly labelUseHtmlTooltip?: boolean | undefined;
-        readonly label?: string | undefined;
-        readonly helper?: string | undefined;
-        readonly labelTooltip?: string | undefined;
-    };
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLElement>;
-type __VLS_TemplateResult = {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLElement;
-};
-//# sourceMappingURL=CheckboxGroup.vue.d.ts.map

package/dist/components/CheckboxGroup/CheckboxGroup.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CheckboxGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroup.vue"],"names":[],"mappings":"AA0BA;wBAkNqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;;;;;;;mPAQG"}

package/dist/components/PageHeader/PageHeader.vue.d.ts

@@ -1,28 +0,0 @@
-import { PageHeaderProps } from './types';
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        tag?(_: {}): any;
-        actions?(_: {}): any;
-        tabs?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<PageHeaderProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    back: () => any;
-}, string, import('vue').PublicProps, Readonly<PageHeaderProps> & Readonly<{
-    onBack?: (() => any) | undefined;
-}>, {
-    description: string;
-    hasBackButton: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
-//# sourceMappingURL=PageHeader.vue.d.ts.map

package/dist/components/PageHeader/PageHeader.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageHeader.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PageHeader/PageHeader.vue"],"names":[],"mappings":"AAsDA;AAwJA,OAAO,KAAK,EAAE,eAAe,EAAmB,MAAM,SAAS,CAAC;AAqBhE,iBAAS,cAAc;WA2FT,OAAO,IAA6B;;qBAZzB,GAAG;yBACC,GAAG;sBACN,GAAG;;;;EAe5B;AAYD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;qFASnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/PageHeader/index.d.ts

@@ -1,3 +0,0 @@
-export { default } from './PageHeader.vue';
-export { default as PageHeader } from './PageHeader.vue';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/PageHeader/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/PageHeader/types.d.ts

@@ -1,9 +0,0 @@
-export interface PageHeaderProps {
-    title: string;
-    description?: string;
-    hasBackButton?: boolean;
-}
-export interface PageHeaderEmits {
-    (event: 'back'): void;
-}
-//# sourceMappingURL=types.d.ts.map

package/dist/components/PageHeader/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/PageHeader/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,eAAe;IAC9B,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB"}

package/dist/components/Tag/types.d.ts

@@ -1,18 +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;
-}
-//# sourceMappingURL=types.d.ts.map