From a5336afc9de11fd43bdd17c5ff49ac1119610047 Mon Sep 17 00:00:00 2001 From: kostasdano Date: Fri, 19 Apr 2024 16:01:15 +0300 Subject: [PATCH] feat: remove group haeders from documentation --- .../Table/Table-ColumnChooser.snap | 140 +++++++----------- src/components/Table/Table.mdx | 14 +- src/components/Table/Table.stories.tsx | 48 +++--- src/components/Table/types.ts | 3 +- 4 files changed, 78 insertions(+), 127 deletions(-) diff --git a/src/__storyshots__/Updated Components/Table/Table-ColumnChooser.snap b/src/__storyshots__/Updated Components/Table/Table-ColumnChooser.snap index f4f7fbca6..b4976aeb3 100644 --- a/src/__storyshots__/Updated Components/Table/Table-ColumnChooser.snap +++ b/src/__storyshots__/Updated Components/Table/Table-ColumnChooser.snap @@ -121,24 +121,6 @@ } .emotion-8 { - width: 300%; - height: 2.75rem; - -webkit-align-content: center; - -ms-flex-line-pack: center; - align-content: center; - box-sizing: border-box; - padding: 8px 16px; - border-bottom: 1px solid rgba(200,206,255,0.70); - border-right: 1px solid rgba(200,206,255,0.70); - color: #52567a; - font-family: Roboto; - font-weight: 400; - line-height: 1.25rem; - font-size: 0.875rem; - letter-spacing: 0.015625rem; -} - -.emotion-9 { width: 150%; height: 2.75rem; -webkit-align-content: center; @@ -156,7 +138,7 @@ letter-spacing: 0.015625rem; } -.emotion-15 { +.emotion-12 { height: 2.75rem; padding: 8px 16px; border-bottom: 1px solid rgba(200,206,255,0.70); @@ -166,7 +148,7 @@ align-content: center; } -.emotion-16 { +.emotion-13 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -230,40 +212,24 @@ - Personal Details - - - - - - First Name Last Name Age Job @@ -273,37 +239,37 @@
Rachel
Berry
30
Fashion Executive
@@ -311,37 +277,37 @@
Ross
Geller
32
Paleontologist
@@ -349,37 +315,37 @@
Monica
Geller
31
Chef
@@ -387,37 +353,37 @@
Chandler
Bing
32
?
@@ -425,37 +391,37 @@
Joey
Tribbiani
30
Actor
@@ -463,37 +429,37 @@
Phoebe
Buffay
31
Massage Therapist
diff --git a/src/components/Table/Table.mdx b/src/components/Table/Table.mdx index f6f66176c..3fd7e70c7 100644 --- a/src/components/Table/Table.mdx +++ b/src/components/Table/Table.mdx @@ -1,11 +1,7 @@ import { Meta, Canvas, ArgTypes } from '@storybook/blocks'; import Table from './Table'; import * as TableStories from './Table.stories'; -import { - GroupColumnStory, - DisplayColumnStory, - ColumnsConfigType, -} from './utils/TableStoryComponents'; +import { DisplayColumnStory, ColumnsConfigType } from './utils/TableStoryComponents'; @@ -27,10 +23,6 @@ A universal Table component that applies Orfium basic usages. -## GroupColumn Type - - - ## DisplayColumn Type @@ -54,10 +46,6 @@ This type includes all the configuration for the columns -### Column Groups - - - ### Column Chooser diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx index e43c03e3e..b39965061 100644 --- a/src/components/Table/Table.stories.tsx +++ b/src/components/Table/Table.stories.tsx @@ -43,21 +43,23 @@ export const ColumnAndRowSizing = { }, }; -export const ColumnGroups = { - render: (args) => { - const { rowSize } = args; +/** Story for Group Headers */ - return data={simpleData} columns={groupedColumns} rowSize={rowSize} />; - }, +// export const ColumnGroups = { +// render: (args) => { +// const { rowSize } = args; - name: 'Column Groups', +// return data={simpleData} columns={groupedColumns} rowSize={rowSize} />; +// }, - parameters: { - controls: { - disable: true, - }, - }, -}; +// name: 'Column Groups', + +// parameters: { +// controls: { +// disable: true, +// }, +// }, +// }; export const ColumnChooser = { render: (args) => { @@ -65,20 +67,14 @@ export const ColumnChooser = { const columns = [ { - id: 'personalDetails', - header: 'Personal Details', - columns: [ - { - id: 'firstName', - header: 'First Name', - isAlwaysVisible: isAlwaysVisible.includes('firstName'), - }, - { - id: 'lastName', - header: 'Last Name', - isAlwaysVisible: isAlwaysVisible.includes('lastName'), - }, - ], + id: 'firstName', + header: 'First Name', + isAlwaysVisible: isAlwaysVisible.includes('firstName'), + }, + { + id: 'lastName', + header: 'Last Name', + isAlwaysVisible: isAlwaysVisible.includes('lastName'), }, { id: 'age', header: 'Age', isAlwaysVisible: isAlwaysVisible.includes('age') }, { id: 'job', header: 'Job', isAlwaysVisible: isAlwaysVisible.includes('job') }, diff --git a/src/components/Table/types.ts b/src/components/Table/types.ts index 8a72e012d..b5f33639f 100644 --- a/src/components/Table/types.ts +++ b/src/components/Table/types.ts @@ -2,7 +2,8 @@ import type { TableOptions } from '@tanstack/react-table'; export type TableProps = { /** The Columns configuration of the Table */ - columns: (DisplayColumn | GroupColumn)[]; + // Columns Type for Group Headers: columns: (DisplayColumn | GroupColumn)[]; + columns: DisplayColumn[]; /** The Data of the Table */ data: TableData; /** Size of Row */