@weni/unnnic-system 2.1.1 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "2.1.1",
+  "version": "2.3.0",
   "type": "commonjs",
   "files": [
     "dist",

package/src/components/Button/Button.vue

@@ -74,7 +74,7 @@ export default {
     },
     text: {
       type: String,
-      default: null,
+      default: '',
     },
     type: {
       type: String,
@@ -86,28 +86,29 @@ export default {
     },
     iconLeft: {
       type: String,
-      default: null,
+      default: '',
     },
     iconRight: {
       type: String,
-      default: null,
+      default: '',
     },
     iconCenter: {
       type: String,
-      default: null,
+      default: '',
     },
     next: {
       type: Boolean,
-      default: null,
+      default: false,
     },
 
     disabled: {
       type: Boolean,
-      default: null,
+      default: false,
     },
 
     loading: {
       type: Boolean,
+      default: false,
     },
   },
   computed: {

package/src/components/TableNext/TableNext.vue

@@ -1,7 +1,10 @@
 <template>
   <table class="unnnic-table-next">
     <thead class="unnnic-table-next__header">
-      <tr class="unnnic-table-next__header-row">
+      <tr
+        class="unnnic-table-next__header-row"
+        :style="{ gridTemplateColumns }"
+      >
         <th
           v-for="(cell, index) of headers"
           :key="cell.content + index"
@@ -28,10 +31,14 @@
           v-for="(row, index) of rows"
           :key="row.content + index"
           class="unnnic-table-next__body-row"
+          :style="{
+            gridTemplateColumns: row.link ? 'auto' : gridTemplateColumns,
+          }"
         >
           <a
             v-if="row.link"
             class="unnnic-table-next__body-row--redirect"
+            :style="{ gridTemplateColumns }"
             :href="row.link.url"
             :target="row.link.target || '_blank'"
           >
@@ -92,6 +99,7 @@ export default {
     /**
      * @typedef {Array} HeaderItem
      * @property {string} content - The content of the header cell.
+     * @property {number} size - The size of the header cell in fractions.
      * @property {boolean|undefined} isSortable - Indicates if the cell is enabled for sorting.
      */
 
@@ -157,6 +165,9 @@ export default {
     treatedPaginationTotal() {
       return this.rows.length === 0 ? 0 : this.paginationTotal;
     },
+    gridTemplateColumns() {
+      return this.headers.map((header) => `${header.size || 1}fr`).join(' ');
+    },
   },
 };
 </script>
@@ -173,6 +184,9 @@ $tableBorder: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
 
   width: 100%;
 
+  display: flex;
+  flex-direction: column;
+
   &__header {
     &-row {
       @extend %base-row;
@@ -268,7 +282,6 @@ $tableBorder: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
 
   %base-row {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
     align-items: center;
   }
 }

package/src/components/TableNext/validation.js

@@ -1,11 +1,19 @@
-const validateHeader = (cell) => {
-  const isContentString = typeof cell.content !== 'string';
+const validateHeader = (header) => {
+  const isContentString = typeof header.content !== 'string';
   if (isContentString) {
     throw new Error('Each item in "headers" must have "content" as a string.');
   }
 
+  const isSizePositiveNumber =
+    'size' in header && (typeof header.size !== 'number' || header.size < 0);
+  if (isSizePositiveNumber) {
+    throw new Error(
+      'Each item in "headers" that contains "size" must assign it as positive number',
+    );
+  }
+
   const isSortableBoolean =
-    'isSortable' in cell && typeof cell.isSortable !== 'boolean';
+    'isSortable' in header && typeof header.isSortable !== 'boolean';
   if (isSortableBoolean) {
     throw new Error(
       'Each item in "headers" that contains “isSortable” must assign it as boolean',

package/src/stories/Button.stories.js

@@ -3,7 +3,36 @@ import iconList from '../utils/iconList';
 
 export default {
   title: 'Form/Button',
+  parameters: {
+    docs: {
+      description: {
+        component: `Allows users to perform an action or navigate to another page. 
+          It has styles for various needs and are ideal for directing the user's attention. 
+          It is divided into 6 types: Primary, Secondary, Tertiary, Alternative, Warning, Attention.
+          Each of these types has its states.
+          <br/>
+          <br/>
+          This component has 5 variations: without icon, with icon on the left, with icon on the right, just the icon and float. 
+          Each of this variation has 4 states: default, hover, active and disabled. 
+          The component has a fixed height of 46px and variable width. However, the icon-only variation has a fixed height and width of 46px.
+          `,
+      },
+    },
+  },
   component: unnnicButton,
+  tags: ['autodocs'],
+  args: {
+    text: '',
+    type: 'primary',
+    size: 'large',
+    iconLeft: '',
+    iconCenter: '',
+    iconRight: '',
+    disabled: false,
+    loading: false,
+    float: false,
+    next: false,
+  },
   argTypes: {
     type: {
       control: { type: 'select' },
@@ -19,7 +48,6 @@ export default {
     size: {
       control: { type: 'select' },
       options: ['large', 'small'],
-      defaultValue: 'large',
     },
     text: { control: { type: 'text' } },
     iconLeft: {
@@ -37,13 +65,17 @@ export default {
     disabled: { control: { type: 'boolean' } },
     loading: { control: { type: 'boolean' } },
     float: { control: { type: 'boolean' } },
+    next: {
+      control: { type: 'boolean' },
+      description:
+        'Used to indicate whether the button icon should be converted to the new icon library',
+    },
   },
 };
 
 export const Primary = {
   args: {
     text: 'Button Text',
-    disabled: false,
   },
 };
 
@@ -51,7 +83,6 @@ export const Secondary = {
   args: {
     type: 'secondary',
     text: 'Button Text',
-    disabled: false,
   },
 };
 
@@ -59,20 +90,19 @@ export const Tertiary = {
   args: {
     type: 'tertiary',
     text: 'Button Text',
-    disabled: false,
   },
 };
 
 export const WithIcon = {
   args: {
     text: 'Button Text',
-    iconLeft: 'developer-community-github-1-1',
+    iconLeft: 'add',
   },
 };
 
 export const OnlyIcon = {
   args: {
-    iconCenter: 'add-1',
+    iconCenter: 'add',
   },
 };
 
@@ -85,9 +115,17 @@ export const Alternative = {
 };
 
 export const Warning = {
+  parameters: {
+    docs: {
+      description: {
+        story: `This variation aims to highlight actions that could be destructive or have negative consequences if taken. 
+        For example: Deleting an element.`,
+      },
+    },
+  },
   args: {
     type: 'warning',
-    iconLeft: 'add-1',
+    iconLeft: 'add',
     text: 'Text',
   },
 };
@@ -95,12 +133,21 @@ export const Warning = {
 export const Attention = {
   args: {
     type: 'attention',
-    iconLeft: 'add-1',
+    iconLeft: 'add',
     text: 'Text',
   },
 };
 
 export const Float = {
+  parameters: {
+    docs: {
+      description: {
+        story: `When there is a need to present a main action above a list of contents. <br/>
+          It is important that the component is always floating over the content and fixed to the bottom right side. <br/>
+          (Remember to add ${'`position relative`'} style to your container)`,
+      },
+    },
+  },
   argTypes: {
     size: {
       control: { type: 'select' },
@@ -116,11 +163,6 @@ export const Float = {
     template: `<div style="height: 80vh; display: grid; position: relative;">
       <unnnic-button v-bind="args" />
 
-      When to use this variation: <br/>
-      When there is a need to present a main action above a list of contents. <br/>
-      It is important that the component is always floating over the content and fixed to the bottom right side. <br/>
-      (Remember to add position relative style to your container)
-
       <br/>
       <br/>
 

package/src/stories/TableNext.stories.js

@@ -19,6 +19,7 @@ export default {
           headers: [
             {
               content: 'ID',
+              size: 0.3,
             },
             {
               content: 'Name',