feat(table): added justify content prop in table col

takenet · Sep 5, 2024 · 10c7ff7 · 10c7ff7
1 parent 9c86fe1
commit 10c7ff7
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 23 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -60,6 +60,8 @@ import { sidebarBackground, sidebarPosition, sidebarType } from "./components/si
 import { Shape as Shape1 } from "./components/skeleton/skeleton";
 import { StepOption, typeRange } from "./components/slider/slider-interface";
 import { SwitchSize } from "./components/switch/switch";
+import { JustifyContent } from "./components/table/table-cell/table-cell";
+import { JustifyContent as JustifyContent1 } from "./components/table/table-header-cell/table-header-cell";
 import { Overflow } from "./components/tabs/tab (depreciated)/tabs-interface";
 import { Themes } from "./components/theme-provider/theme-provider";
 import { ActionType, ButtonActionType, CreateToastType, PositionType, VariantType } from "./components/toast/toast-interface";
@@ -2484,6 +2486,7 @@ export namespace Components {
     interface BdsTableBody {
     }
     interface BdsTableCell {
+        "justifyContent": JustifyContent;
         "sortable": boolean;
         "type"?: string;
     }
@@ -2503,6 +2506,7 @@ export namespace Components {
     }
     interface BdsTableTh {
         "arrow": string;
+        "justifyContent": JustifyContent;
         "sortable": boolean;
     }
     interface BdsTabs {
@@ -6251,6 +6255,7 @@ declare namespace LocalJSX {
     interface BdsTableBody {
     }
     interface BdsTableCell {
+        "justifyContent"?: JustifyContent;
         "sortable"?: boolean;
         "type"?: string;
     }
@@ -6270,6 +6275,7 @@ declare namespace LocalJSX {
     }
     interface BdsTableTh {
         "arrow"?: string;
+        "justifyContent"?: JustifyContent;
         "sortable"?: boolean;
     }
     interface BdsTabs {

diff --git a/src/components/table/table-cell/readme.md b/src/components/table/table-cell/readme.md
@@ -7,10 +7,11 @@
 
 ## Properties
 
-| Property   | Attribute  | Description | Type      | Default  |
-| ---------- | ---------- | ----------- | --------- | -------- |
-| `sortable` | `sortable` |             | `boolean` | `false`  |
-| `type`     | `type`     |             | `string`  | `'text'` |
+| Property         | Attribute         | Description | Type                            | Default  |
+| ---------------- | ----------------- | ----------- | ------------------------------- | -------- |
+| `justifyContent` | `justify-content` |             | `"center" \| "left" \| "right"` | `'left'` |
+| `sortable`       | `sortable`        |             | `boolean`                       | `false`  |
+| `type`           | `type`            |             | `string`                        | `'text'` |
 
 
 ## Dependencies

diff --git a/src/components/table/table-cell/table-cell.scss b/src/components/table/table-cell/table-cell.scss
@@ -16,19 +16,31 @@
   flex-wrap: wrap;
 }
 
-.dense-cell {
+.dense_cell {
   margin: 0;
 }
 
-.cell-custom {
+.cell_custom {
   gap: 8px;
 }
 
-.cell-action {
+.cell_action {
   flex-direction: row;
   gap: 8px;
 }
 
+.justify {
+  &--left {
+    justify-content: flex-start;
+  }
+  &--center {
+    justify-content: center;
+  }
+  &--right {
+    justify-content: flex-end;
+  }
+}
+
 :host:first-child {
   padding-left: 16px;
 }

diff --git a/src/components/table/table-cell/table-cell.tsx b/src/components/table/table-cell/table-cell.tsx
@@ -2,6 +2,8 @@ import { Component, h, Host, Prop, Element, State } from '@stencil/core';
 
 export type IconType = 'text' | 'custom' | 'emoji' | 'collapse';
 
+export type JustifyContent = 'left' | 'center' | 'right';
+
 @Component({
   tag: 'bds-table-cell',
   styleUrl: 'table-cell.scss',
@@ -12,24 +14,25 @@ export class TableCell {
   @State() isDense = false;
   @Prop() type?: string = 'text';
   @Prop() sortable = false;
+  @Prop() justifyContent: JustifyContent = 'left';
 
   renderContent(): HTMLElement {
     return this.type === 'custom' ? (
-      <div class="cell cell-custom dense-cell">
+      <div class={{ cell:true, cell_custom:true, dense_cell:true, [`justify--${this.justifyContent}`]:true }}>
         <slot />
       </div>
     ) : this.type === 'text' ? (
-      <div class="cell dense-cell">
+      <div class={{ cell:true, dense_cell:true, [`justify--${this.justifyContent}`]:true }}>
         <bds-typo variant="fs-14" bold={this.sortable ? 'bold' : 'regular'}>
           <slot />
         </bds-typo>
       </div>
     ) : this.type === 'action' ? (
-      <div class="cell cell-action dense-cell">
+      <div class={{ cell:true, cell_action:true, dense_cell:true, [`justify--${this.justifyContent}`]:true }}>
         <slot />
       </div>
     ) : this.type === 'collapse' ? (
-      <td colSpan={2} class="cell cell-action dense-cell">
+      <td colSpan={2} class={{ cell:true, cell_action:true, dense_cell:true, [`justify--${this.justifyContent}`]:true }}>
         <slot />
       </td>
     ) : (

diff --git a/src/components/table/table-header-cell/readme.md b/src/components/table/table-header-cell/readme.md
@@ -7,10 +7,11 @@
 
 ## Properties
 
-| Property   | Attribute  | Description | Type      | Default |
-| ---------- | ---------- | ----------- | --------- | ------- |
-| `arrow`    | `arrow`    |             | `string`  | `''`    |
-| `sortable` | `sortable` |             | `boolean` | `false` |
+| Property         | Attribute         | Description | Type                            | Default  |
+| ---------------- | ----------------- | ----------- | ------------------------------- | -------- |
+| `arrow`          | `arrow`           |             | `string`                        | `''`     |
+| `justifyContent` | `justify-content` |             | `"center" \| "left" \| "right"` | `'left'` |
+| `sortable`       | `sortable`        |             | `boolean`                       | `false`  |
 
 
 ## Dependencies

diff --git a/src/components/table/table-header-cell/table-header-cell.scss b/src/components/table/table-header-cell/table-header-cell.scss
@@ -15,6 +15,18 @@
   }
 }
 
+.justify {
+  &--left {
+    justify-content: flex-start;
+  }
+  &--center {
+    justify-content: center;
+  }
+  &--right {
+    justify-content: flex-end;
+  }
+}
+
 .dense-th {
   min-height: 48px;
   height: auto;

diff --git a/src/components/table/table-header-cell/table-header-cell.tsx b/src/components/table/table-header-cell/table-header-cell.tsx
@@ -1,5 +1,6 @@
 import { Component, h, Host, Prop, Element, State } from '@stencil/core';
 
+export type JustifyContent = 'left' | 'center' | 'right';
 @Component({
   tag: 'bds-table-th',
   styleUrl: 'table-header-cell.scss',
@@ -10,6 +11,7 @@ export class TableHeaderCell {
   @State() isDense = false;
   @Prop() sortable = false;
   @Prop() arrow = '';
+  @Prop() justifyContent: JustifyContent = 'left';
 
   componentWillLoad() {
     const bdsTable = this.element.closest('bds-table');
@@ -25,6 +27,7 @@ export class TableHeaderCell {
             th_cell: true,
             [`th_cell--sortable-${this.sortable}`]: true,
             'dense-th': this.isDense,
+            [`justify--${this.justifyContent}`]:true
           }}
         >
           <bds-typo bold={this.sortable ? 'bold' : 'semi-bold'} variant="fs-14">
@@ -35,9 +38,9 @@ export class TableHeaderCell {
               size="small"
               name={this.arrow === 'asc' ? 'arrow-down' : this.arrow === 'dsc' ? 'arrow-up' : ''}
             ></bds-icon>
-          ) : (
-            <div style={{ width: '20px' }}></div>
-          )}
+          ) : ''
+            // <div style={{ width: '20px' }}></div>
+          }
         </div>
       </Host>
     );

diff --git a/src/components/table/table/table.stories.jsx b/src/components/table/table/table.stories.jsx
@@ -63,16 +63,20 @@ export const Properties = (args) => {
     <bds-table id="table-default" scrollable={args.scrollable} dense-table={args.denseTable}>
       <bds-table-header>
         <bds-table-row>
-          {heading.map((item, index) => {
-            return <bds-table-th key={index}>{item}</bds-table-th>;
-          })}
+          <bds-table-th justify-content="center">Identificador</bds-table-th>
+          <bds-table-th>Produtos</bds-table-th>
+          <bds-table-th>Valor</bds-table-th>
+          <bds-table-th>Disponibilidade</bds-table-th>
+          <bds-table-th>Marca</bds-table-th>
+          <bds-table-th justify-content="right">Estoque</bds-table-th>
+          <bds-table-th>Categoria</bds-table-th>
         </bds-table-row>
       </bds-table-header>
       <bds-table-body>
         {DATA.map((row, index) => {
           return (
             <bds-table-row key={index}>
-              <bds-table-cell>
+              <bds-table-cell justify-content="center">
                 <bds-typo variant="fs-14">{row.id}</bds-typo>
               </bds-table-cell>
               <bds-table-cell>
@@ -91,7 +95,7 @@ export const Properties = (args) => {
               <bds-table-cell>
                 <bds-typo variant="fs-14">{row.marca}</bds-typo>
               </bds-table-cell>
-              <bds-table-cell>
+              <bds-table-cell justify-content="right">
                 <bds-typo variant="fs-14">{row.estoque}</bds-typo>
               </bds-table-cell>
               <bds-table-cell>