@weni/unnnic-system 2.14.2 → 2.15.0

package/src/components/Tag/DefaultTag.vue

@@ -1,27 +1,36 @@
 <template>
-  <div
+  <section
     :class="`unnnic-tag
         ${!disabled ? `unnnic-tag-scheme--${scheme}` : `unnnic-tag--disabled`}
         ${clickable ? 'unnnic-tag--clickable' : ''}`"
   >
+    <section
+      v-if="leftIcon"
+      class="unnnic-tag__icon"
+    >
+      <UnnnicIcon
+        :icon="leftIcon"
+        :scheme="scheme"
+        size="sm"
+      />
+    </section>
     <span
       :class="`unnnic-tag__label
-      ${hasCloseIcon ? 'unnnic-tag__label--hasIcon' : ''}
       ${disabled ? 'unnnic-tag__label--disabled' : ''}`"
       >{{ text }}</span
     >
-    <div
-      v-if="hasCloseIcon"
-      class="unnnic-tag__icon"
-      @click.stop="emitClose"
+    <section
+      v-if="rightIcon || hasCloseIcon"
+      :class="{ 'unnnic-tag__icon': true, clickable: !rightIcon }"
+      @click.stop="hasCloseIcon ? emitClose() : () => {}"
     >
       <UnnnicIcon
-        icon="close-1"
-        scheme="neutral-darkest"
-        size="xs"
+        :icon="rightIcon || 'close'"
+        :scheme="rightIcon ? scheme : 'neutral-darkest'"
+        size="sm"
       />
-    </div>
-  </div>
+    </section>
+  </section>
 </template>
 
 <script>
@@ -53,6 +62,14 @@ export default {
       type: String,
       default: 'aux-purple',
     },
+    leftIcon: {
+      type: String,
+      default: null,
+    },
+    rightIcon: {
+      type: String,
+      default: null,
+    },
   },
   methods: {
     closeClicked() {
@@ -84,6 +101,7 @@ export default {
   align-items: center;
   justify-content: center;
   border-radius: $unnnic-border-radius-pill;
+  padding: 0 $unnnic-spacing-xs;
 
   &--disabled {
     background-color: $unnnic-color-background-sky;
@@ -107,22 +125,19 @@ export default {
     font-size: $unnnic-font-size-body-md;
     font-weight: $unnnic-font-weight-regular;
     line-height: ($unnnic-font-size-body-md + $unnnic-line-height-medium);
-    padding: $unnnic-spacing-stack-nano $unnnic-inline-ant;
+    padding: $unnnic-spacing-stack-nano;
     color: $unnnic-color-neutral-darkest;
 
     &--disabled {
       color: $unnnic-color-neutral-cloudy;
     }
-
-    &--hasIcon {
-      padding-left: $unnnic-inline-ant;
-      padding-right: $unnnic-spacing-stack-nano;
-    }
   }
 
   &__icon {
     display: flex;
-    margin-right: $unnnic-inline-ant;
+  }
+
+  .clickable {
     cursor: pointer;
   }
 }

package/src/components/Tag/Tag.vue

@@ -12,7 +12,8 @@
     :clickable="clickable"
     :tooltipText="tooltipText"
     :enableTooltip="enableTooltip"
-    :icon="icon"
+    :leftIcon="leftIcon"
+    :rightIcon="rightIcon"
   />
 </template>
 
@@ -67,9 +68,13 @@ export default {
       type: Boolean,
       default: false,
     },
-    icon: {
+    leftIcon: {
       type: String,
-      default: null,
+      default: '',
+    },
+    rightIcon: {
+      type: String,
+      default: '',
     },
   },
   computed: {

package/src/stories/TableNext.stories.js

@@ -2,9 +2,46 @@ import UnnnicTableNext from '../components/TableNext/TableNext.vue';
 import UnnnicButton from '../components/Button/Button.vue';
 
 export default {
-  title: 'example/TableNext',
+  title: 'Data Display/TableNext',
   component: UnnnicTableNext,
-  argTypes: {},
+  tags: ['autodocs'],
+  argTypes: {
+    headers: {
+      description:
+        'Array of header items defining the structure of the table header.',
+      control: 'object',
+    },
+    rows: {
+      description: 'Array of row items defining the content of the table rows.',
+      control: 'object',
+    },
+    size: {
+      description:
+        'The size of the table. Options are `sm` for small and `md` for medium.',
+      control: { type: 'select' },
+      options: ['sm', 'md'],
+    },
+    pagination: {
+      description: 'The current page number for pagination.',
+      control: 'number',
+    },
+    paginationTotal: {
+      description: 'The total number of pages available for pagination.',
+      control: 'number',
+    },
+    paginationInterval: {
+      description: 'The number of items displayed per page.',
+      control: 'number',
+    },
+    isLoading: {
+      description: 'Indicates whether the table data is loading.',
+      control: 'boolean',
+    },
+    hideHeaders: {
+      description: 'Determines if the table headers should be hidden.',
+      control: 'boolean',
+    },
+  },
   render: (args) => ({
     components: {
       UnnnicTableNext,
@@ -19,7 +56,7 @@ export default {
           headers: [
             {
               content: 'ID',
-              size: 0.3,
+              size: 'auto',
             },
             {
               content: 'Name',
@@ -32,6 +69,7 @@ export default {
             },
             {
               content: 'Add with friend',
+              size: 0.5,
             },
           ],
           rows: [],
@@ -67,32 +105,48 @@ const addButton = {
   },
 };
 
+const rows = [
+  {
+    content: ['1', 'Alice', '30', 'USA', addButton],
+    link: {
+      url: 'https://weni.ai/',
+      target: '_blank',
+    },
+  },
+  {
+    content: ['2', 'Bob', '25', 'Canada', addButton],
+    link: {
+      url: 'https://weni.ai/',
+    },
+  },
+  {
+    content: ['3', 'Charlie', '35', 'UK', addButton],
+  },
+  {
+    content: ['4', 'Diana', '28', 'Australia', addButton],
+  },
+  {
+    content: ['5', 'Ethan', '22', 'New Zealand', addButton],
+  },
+];
+
 export const Default = {
   args: {
-    rows: [
-      {
-        content: ['1', 'Alice', '30', 'USA', addButton],
-        link: {
-          url: 'https://weni.ai/',
-          target: '_blank',
-        },
-      },
-      {
-        content: ['2', 'Bob', '25', 'Canada', addButton],
-        link: {
-          url: 'https://weni.ai/',
-        },
-      },
-      {
-        content: ['3', 'Charlie', '35', 'UK', addButton],
-      },
-      {
-        content: ['4', 'Diana', '28', 'Australia', addButton],
-      },
-      {
-        content: ['5', 'Ethan', '22', 'New Zealand', addButton],
-      },
-    ],
+    rows,
+  },
+};
+
+export const Medium = {
+  args: {
+    rows,
+    size: 'md',
+  },
+};
+
+export const HideHeaders = {
+  args: {
+    rows,
+    hideHeaders: true,
   },
 };
 

package/src/stories/Tag.stories.js

@@ -1,9 +1,10 @@
-import unnnicTag from '../components/Tag/Tag.vue';
+import UnnnicTag from '../components/Tag/Tag.vue';
 import colorsList from '../utils/colorsList';
 
 export default {
-  title: 'Example/Tag',
-  component: unnnicTag,
+  title: 'Data Display/Tag',
+  component: UnnnicTag,
+  tags: ['autodocs'],
   argTypes: {
     text: { control: { type: 'text' } },
     type: {
@@ -25,6 +26,30 @@ export const Default = {
   },
 };
 
+export const LeftIcon = {
+  args: {
+    text: 'Label',
+    type: 'default',
+    leftIcon: 'check_circle',
+  },
+};
+
+export const RightIcon = {
+  args: {
+    text: 'Label',
+    type: 'default',
+    rightIcon: 'check_circle',
+  },
+};
+
+export const CloseIcon = {
+  args: {
+    text: 'Label',
+    type: 'default',
+    hasCloseIcon: true,
+  },
+};
+
 export const Indicator = {
   args: {
     text: 'Tag Name',