From 4909d39b894c3b033e3c7527b78550653d746fd5 Mon Sep 17 00:00:00 2001 From: Kenji Shiroma Date: Fri, 1 Dec 2023 10:59:47 +1000 Subject: [PATCH 1/4] fix design system layout --- .../components/section/section.component.tsx | 2 +- apps/site/src/app/design-system/page.tsx | 25 +++++++++++-------- apps/site/src/components/logos/react-logo.tsx | 12 +++++++-- 3 files changed, 26 insertions(+), 13 deletions(-) diff --git a/apps/site/src/app/design-system/components/section/section.component.tsx b/apps/site/src/app/design-system/components/section/section.component.tsx index 3ac81c29e..4d9eebe96 100644 --- a/apps/site/src/app/design-system/components/section/section.component.tsx +++ b/apps/site/src/app/design-system/components/section/section.component.tsx @@ -4,7 +4,7 @@ import { Container } from '@/app/design-system/components'; export function Section({ background, children }: { background?: boolean; children: React.ReactNode }) { return background ? ( -
+
<>{children} diff --git a/apps/site/src/app/design-system/page.tsx b/apps/site/src/app/design-system/page.tsx index 02ae77555..667b704eb 100644 --- a/apps/site/src/app/design-system/page.tsx +++ b/apps/site/src/app/design-system/page.tsx @@ -26,7 +26,7 @@ export default function DesignSystemHomePage() {
Accessible by design - +

Accessibility and inclusive design is a strong part of the GEL Design System.

The system supports teams to deliver to the Group accessibility commitment, to provide meaningful banking @@ -41,19 +41,24 @@ export default function DesignSystemHomePage() {

- + Built on React -

+

The GEL Design System is now using React. You can still access HTML/CSS but with React at its core we can showcase so much more and deliver even higher-quality, more accessible code.

Who else is using React?

- + {[GovLogo, MicrosoftLogo, MyobLogo, IBMLogo, AtlassianLogo, FacebookLogo, TwitterLogo, ShopifyLogo].map( (Logo, i) => ( - + ), @@ -66,7 +71,7 @@ export default function DesignSystemHomePage() { Subscribe to GEL updates -

+

Get the latest brand and component updates as well as access to new resources and helpful tips.

- Downloads and links - + Downloads & links + -

Design on-brand with greater efficiency and accuracy using the Sketch UI Kit.

-

Visit GitHub to follow Westpac GEL Design System code updates and log issues.

+

Design on-brand with greater efficiency and accuracy using the Sketch UI Kit.

+

Visit GitHub to follow Westpac GEL Design System code updates and log issues.

 diff --git a/apps/site/src/components/logos/react-logo.tsx b/apps/site/src/components/logos/react-logo.tsx index 45eabfdbb..4d8300362 100644 --- a/apps/site/src/components/logos/react-logo.tsx +++ b/apps/site/src/components/logos/react-logo.tsx @@ -1,8 +1,16 @@ +import { clsx } from 'clsx'; + import { Svg } from '@/components/svg'; -export function ReactLogo() { +export function ReactLogo({ className }: { className?: string }) { return ( - + React logo Date: Fri, 1 Dec 2023 11:03:34 +1000 Subject: [PATCH 2/4] - updated site examples for table - updated styling of table to match orignial GEL --- .../components/table/accessibilityDemo.mdoc | 62 ++-- .../design-system/components/table/code.mdoc | 264 +++++++++--------- .../basic-table-with-highlights/content.mdoc | 62 ++-- .../table/design/basic-table/content.mdoc | 45 +-- .../bordered-striped-table/content.mdoc | 45 +-- .../table/design/bordered-table/content.mdoc | 45 +-- .../design/striped-row-table/content.mdoc | 45 +-- .../table/components/footer/footer.styles.ts | 2 +- .../header-cell/header-cell.styles.ts | 2 +- .../table/components/row/row.styles.ts | 4 +- .../ui/src/components/table/table.stories.tsx | 8 +- .../ui/src/components/table/table.styles.ts | 2 +- 12 files changed, 301 insertions(+), 285 deletions(-) diff --git a/apps/site/src/content/design-system/components/table/accessibilityDemo.mdoc b/apps/site/src/content/design-system/components/table/accessibilityDemo.mdoc index e384c0f8b..bd8c5a3c7 100644 --- a/apps/site/src/content/design-system/components/table/accessibilityDemo.mdoc +++ b/apps/site/src/content/design-system/components/table/accessibilityDemo.mdoc @@ -1,50 +1,46 @@ ```jsx -
+
- {' '} - Caption this table width is: (100%){' '} + Table caption this table width is: (100%) - Name - Type - Date Modified - Extra Column 1 - Extra Column 2 + Column 1 + Column 2 + Column 3 + + Cell 1 + Cell 7 + Cell 13 + + + Cell 2 + Cell 8 + Cell 14 + - Games - File folder - 6/7/2020 - File folder - 6/7/2020 + Cell 3 + Cell 9 + Cell 15 - - Program Files - File folder - 4/7/2021 - File folder - 6/7/2020 + + Cell 4 + Cell 10 + Cell 16 - - {' '} - bootmgr{' '} - - System file - 11/20/2010 - File folder - 6/7/2020 + Cell 5 + Cell 11 + Cell 17 - - Program Files - File folder - 4/7/2021 - File folder - 6/7/2020 + + Cell 6 + Cell 12 + Cell 18 Footer goes here and should colSpan all columns diff --git a/apps/site/src/content/design-system/components/table/code.mdoc b/apps/site/src/content/design-system/components/table/code.mdoc index 1606f6e3d..1cd4928cd 100644 --- a/apps/site/src/content/design-system/components/table/code.mdoc +++ b/apps/site/src/content/design-system/components/table/code.mdoc @@ -1,39 +1,48 @@ -## Default table with caption and footer +### Default table ```jsx -
+
- {' '} - Caption this table width is: (100%){' '} + Table caption this table width is: (100%) - Name - Type - Date Modified + Column 1 + Column 2 + Column 3 - Games - File folder - 6/7/2020 + Cell 1 + Cell 7 + Cell 13 - Program Files - File folder - 4/7/2021 + Cell 2 + Cell 8 + Cell 14 - bootmgr - System file - 11/20/2010 + Cell 3 + Cell 9 + Cell 15 - log.txt - Text Document - 1/18/2016 + Cell 4 + Cell 10 + Cell 16 + + + Cell 5 + Cell 11 + Cell 17 + + + Cell 6 + Cell 12 + Cell 18 Footer goes here and should colSpan all columns @@ -41,128 +50,98 @@ ``` -## Bordered Table +### Table looks ```jsx -
+
+

Bordered

- {' '} - Caption this table width is: (100%){' '} + Table caption this table width is: (100%) - Name - Type - Date Modified + Column 1 + Column 2 + Column 3 - Games - File folder - 6/7/2020 + Cell 1 + Cell 7 + Cell 13 + + + Cell 2 + Cell 8 + Cell 14 + + + Cell 3 + Cell 9 + Cell 15 - Program Files - File folder - 4/7/2021 + Cell 4 + Cell 10 + Cell 16 - bootmgr - System file - 11/20/2010 + Cell 5 + Cell 11 + Cell 17 - log.txt - Text Document - 1/18/2016 + Cell 6 + Cell 12 + Cell 18 Footer goes here and should colSpan all columns
-
-``` - -## Striped Table - -```jsx -
+

Striped

- {' '} - Caption this table width is: (100%){' '} + Table caption this table width is: (100%) - Name - Type - Date Modified + Column 1 + Column 2 + Column 3 - Games - File folder - 6/7/2020 + Cell 1 + Cell 7 + Cell 13 - Program Files - File folder - 4/7/2021 + Cell 2 + Cell 8 + Cell 14 - bootmgr - System file - 11/20/2010 + Cell 3 + Cell 9 + Cell 15 - log.txt - Text Document - 1/18/2016 - - - Footer goes here and should colSpan all columns -
-
-``` - -## Bordered & Striped Table - -```jsx -
- - - {' '} - Caption this table width is: (100%){' '} - - - - Name - Type - Date Modified - - - - - Games - File folder - 6/7/2020 + Cell 4 + Cell 10 + Cell 16 - Program Files - File folder - 4/7/2021 + Cell 5 + Cell 11 + Cell 17 - bootmgr - System file - 11/20/2010 - - - log.txt - Text Document - 1/18/2016 + Cell 6 + Cell 12 + Cell 18 Footer goes here and should colSpan all columns @@ -170,58 +149,67 @@ ``` -## Highlighted Table +### Highlighted ```jsx -
+
- {' '} - Caption this table width is: (100%){' '} + Table caption this table width is: (100%) - Name - Type - Date Modified - Extra Column 1 - Extra Column 2 + Column 1 + Column 2 + Column 3 + Column 4 + Column 5 + Column 6 + + Cell 1 + Cell 7 + Cell 13 + Cell 1 + Cell 7 + Cell 13 + - Games - File folder - 6/7/2020 - File folder - 6/7/2020 - - - Program Files - File folder - 4/7/2021 - File folder - 6/7/2020 - - - - {' '} - bootmgr{' '} - - System file - 11/20/2010 - File folder - 6/7/2020 + Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Odit eligendi quasi quo nihil quia reiciendis obcaecati nosTrum. + Rem saepe eos, modi perferendis. + Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Odit eligendi quasi quo nihil quia reiciendis obcaecati nosTrum. + Rem saepe eos, modi perferendis. + + + Cell 3 + Cell 9 + Cell 15 + Cell 3 + Cell 9 + Cell 15 - Program Files - File folder - 4/7/2021 - File folder - 6/7/2020 + Cell 4 + Cell 10 + Cell 16 + Cell 4 + Cell 10 + Cell 16 + + + Cell 5 + Cell 11 + Cell 17 + Cell 5 + Cell 11 + Cell 17 Footer goes here and should colSpan all columns
-``` +``` \ No newline at end of file diff --git a/apps/site/src/content/design-system/components/table/design/basic-table-with-highlights/content.mdoc b/apps/site/src/content/design-system/components/table/design/basic-table-with-highlights/content.mdoc index 659c3e92b..1a3866f12 100644 --- a/apps/site/src/content/design-system/components/table/design/basic-table-with-highlights/content.mdoc +++ b/apps/site/src/content/design-system/components/table/design/basic-table-with-highlights/content.mdoc @@ -1,52 +1,48 @@ Use highlights to call out specific cells in a table. They can be added to an individual cell, multiple cells or to an entire row. ```jsx -
+
- {' '} - Caption this table width is: (100%){' '} + Table caption this table width is: (100%) - Name - Type - Date Modified - Extra Column 1 - Extra Column 2 + Column 1 + Column 2 + Column 3 + + Cell 1 + Cell 7 + Cell 13 + + + Cell 2 + Cell 8 + Cell 14 + - Games - File folder - 6/7/2020 - File folder - 6/7/2020 + Cell 3 + Cell 9 + Cell 15 - - Program Files - File folder - 4/7/2021 - File folder - 6/7/2020 + + Cell 4 + Cell 10 + Cell 16 - - {' '} - bootmgr{' '} - - System file - 11/20/2010 - File folder - 6/7/2020 + Cell 5 + Cell 11 + Cell 17 - - Program Files - File folder - 4/7/2021 - File folder - 6/7/2020 + + Cell 6 + Cell 12 + Cell 18 Footer goes here and should colSpan all columns diff --git a/apps/site/src/content/design-system/components/table/design/basic-table/content.mdoc b/apps/site/src/content/design-system/components/table/design/basic-table/content.mdoc index d0294cc83..5ec595d37 100644 --- a/apps/site/src/content/design-system/components/table/design/basic-table/content.mdoc +++ b/apps/site/src/content/design-system/components/table/design/basic-table/content.mdoc @@ -1,39 +1,48 @@ The basic table has a simple table structure without borders, that can be used when stretching edge to edge within a container. ```jsx -
+
- {' '} - Caption this table width is: (100%){' '} + Table caption this table width is: (100%) - Name - Type - Date Modified + Column 1 + Column 2 + Column 3 - Games - File folder - 6/7/2020 + Cell 1 + Cell 7 + Cell 13 - Program Files - File folder - 4/7/2021 + Cell 2 + Cell 8 + Cell 14 - bootmgr - System file - 11/20/2010 + Cell 3 + Cell 9 + Cell 15 - log.txt - Text Document - 1/18/2016 + Cell 4 + Cell 10 + Cell 16 + + + Cell 5 + Cell 11 + Cell 17 + + + Cell 6 + Cell 12 + Cell 18 Footer goes here and should colSpan all columns diff --git a/apps/site/src/content/design-system/components/table/design/bordered-striped-table/content.mdoc b/apps/site/src/content/design-system/components/table/design/bordered-striped-table/content.mdoc index 06455705b..208ca6315 100644 --- a/apps/site/src/content/design-system/components/table/design/bordered-striped-table/content.mdoc +++ b/apps/site/src/content/design-system/components/table/design/bordered-striped-table/content.mdoc @@ -1,39 +1,48 @@ You can combine multiple classes to configure your table style. ```jsx -
+
- {' '} - Caption this table width is: (100%){' '} + Table caption this table width is: (100%) - Name - Type - Date Modified + Column 1 + Column 2 + Column 3 - Games - File folder - 6/7/2020 + Cell 1 + Cell 7 + Cell 13 - Program Files - File folder - 4/7/2021 + Cell 2 + Cell 8 + Cell 14 - bootmgr - System file - 11/20/2010 + Cell 3 + Cell 9 + Cell 15 - log.txt - Text Document - 1/18/2016 + Cell 4 + Cell 10 + Cell 16 + + + Cell 5 + Cell 11 + Cell 17 + + + Cell 6 + Cell 12 + Cell 18 Footer goes here and should colSpan all columns diff --git a/apps/site/src/content/design-system/components/table/design/bordered-table/content.mdoc b/apps/site/src/content/design-system/components/table/design/bordered-table/content.mdoc index 3d1565cb1..6fb89ac0d 100644 --- a/apps/site/src/content/design-system/components/table/design/bordered-table/content.mdoc +++ b/apps/site/src/content/design-system/components/table/design/bordered-table/content.mdoc @@ -1,39 +1,48 @@ The bordered table outlines each cell, use a bordered table if displaying lots of complex data e.g. spreadsheet style. ```jsx -
+
- {' '} - Caption this table width is: (100%){' '} + Table caption this table width is: (100%) - Name - Type - Date Modified + Column 1 + Column 2 + Column 3 - Games - File folder - 6/7/2020 + Cell 1 + Cell 7 + Cell 13 - Program Files - File folder - 4/7/2021 + Cell 2 + Cell 8 + Cell 14 - bootmgr - System file - 11/20/2010 + Cell 3 + Cell 9 + Cell 15 - log.txt - Text Document - 1/18/2016 + Cell 4 + Cell 10 + Cell 16 + + + Cell 5 + Cell 11 + Cell 17 + + + Cell 6 + Cell 12 + Cell 18 Footer goes here and should colSpan all columns diff --git a/apps/site/src/content/design-system/components/table/design/striped-row-table/content.mdoc b/apps/site/src/content/design-system/components/table/design/striped-row-table/content.mdoc index b3b8c7627..b5b726f4e 100644 --- a/apps/site/src/content/design-system/components/table/design/striped-row-table/content.mdoc +++ b/apps/site/src/content/design-system/components/table/design/striped-row-table/content.mdoc @@ -1,39 +1,48 @@ The striped row table has alternate rows styled to help with content scanning. ```jsx -
+
- {' '} - Caption this table width is: (100%){' '} + Table caption this table width is: (100%) - Name - Type - Date Modified + Column 1 + Column 2 + Column 3 - Games - File folder - 6/7/2020 + Cell 1 + Cell 7 + Cell 13 - Program Files - File folder - 4/7/2021 + Cell 2 + Cell 8 + Cell 14 - bootmgr - System file - 11/20/2010 + Cell 3 + Cell 9 + Cell 15 - log.txt - Text Document - 1/18/2016 + Cell 4 + Cell 10 + Cell 16 + + + Cell 5 + Cell 11 + Cell 17 + + + Cell 6 + Cell 12 + Cell 18 Footer goes here and should colSpan all columns diff --git a/packages/ui/src/components/table/components/footer/footer.styles.ts b/packages/ui/src/components/table/components/footer/footer.styles.ts index acc7a53d2..d931ea7c1 100644 --- a/packages/ui/src/components/table/components/footer/footer.styles.ts +++ b/packages/ui/src/components/table/components/footer/footer.styles.ts @@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants'; export const styles = tv( { - slots: { base: 'typography-body-10 p-2 text-left font-light text-muted' }, + slots: { base: 'typography-body-10 p-2 text-left text-muted' }, variants: { bordered: { true: { base: 'border border-border' }, diff --git a/packages/ui/src/components/table/components/header-cell/header-cell.styles.ts b/packages/ui/src/components/table/components/header-cell/header-cell.styles.ts index bee60f9b9..7c6815f0d 100644 --- a/packages/ui/src/components/table/components/header-cell/header-cell.styles.ts +++ b/packages/ui/src/components/table/components/header-cell/header-cell.styles.ts @@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants'; export const styles = tv( { slots: { - base: 'typography-body-10 border border-x-0 border-b-[3px] border-t-0 border-hero p-2 text-left align-bottom text-text', + base: 'typography-body-10 border border-x-0 border-b-[3px] border-t-0 border-hero p-2 text-left align-bottom text-text group-[:nth-child(1)_&]/row:border-b-[1px] group-[:nth-child(1)_&]/row:border-b-border', }, variants: { bordered: { diff --git a/packages/ui/src/components/table/components/row/row.styles.ts b/packages/ui/src/components/table/components/row/row.styles.ts index f3543a12b..c84dd298d 100644 --- a/packages/ui/src/components/table/components/row/row.styles.ts +++ b/packages/ui/src/components/table/components/row/row.styles.ts @@ -2,9 +2,9 @@ import { tv } from 'tailwind-variants'; export const styles = tv( { - slots: { base: 'hover:bg-background' }, + slots: { base: 'group/row' }, variants: { - striped: { true: { base: 'even:bg-background hover:bg-[transparent]' } }, + striped: { true: { base: 'even:bg-light' }, false: { base: 'hover:bg-background' } }, highlightedRow: { true: { base: 'border border-b-[3px] border-l-[6px] border-r-0 border-primary' } }, }, }, diff --git a/packages/ui/src/components/table/table.stories.tsx b/packages/ui/src/components/table/table.stories.tsx index c36443f85..a6f725731 100644 --- a/packages/ui/src/components/table/table.stories.tsx +++ b/packages/ui/src/components/table/table.stories.tsx @@ -170,22 +170,22 @@ export const BorderedAndStriped: Story = { - Games + Games File folder 6/7/2020 - Program Files + Program Files File folder 4/7/2021 - bootmgr + bootmgr System file 11/20/2010 - log.txt + log.txt Text Document 1/18/2016 diff --git a/packages/ui/src/components/table/table.styles.ts b/packages/ui/src/components/table/table.styles.ts index 5d06ac991..82eccd198 100644 --- a/packages/ui/src/components/table/table.styles.ts +++ b/packages/ui/src/components/table/table.styles.ts @@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants'; export const styles = tv( { slots: { - base: 'w-full', + base: 'mb-4 w-full', }, variants: {}, }, From dc82a8137b75d6146b392c4cc3b065aad951ce70 Mon Sep 17 00:00:00 2001 From: Tom King Date: Fri, 1 Dec 2023 11:15:59 +1000 Subject: [PATCH 3/4] - updating test --- packages/ui/src/components/table/table.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/components/table/table.spec.tsx b/packages/ui/src/components/table/table.spec.tsx index 043692a72..debb8cf8e 100644 --- a/packages/ui/src/components/table/table.spec.tsx +++ b/packages/ui/src/components/table/table.spec.tsx @@ -111,7 +111,7 @@ describe('Table', () => {
, ); - expect(getByTestId('row-2')).toHaveClass('even:bg-background hover:bg-[transparent]'); + expect(getByTestId('row-2')).toHaveClass('even:bg-light'); }); it('should render table with correct styling with highlighting options', () => { From eb552702f23f878daed43c113ca46ce941fd1faa Mon Sep 17 00:00:00 2001 From: Tom King Date: Fri, 1 Dec 2023 14:10:08 +1000 Subject: [PATCH 4/4] - fixed component list ordered styles to be handled better --- packages/ui/src/components/list/components/item/item.styles.ts | 3 +-- packages/ui/src/components/list/list.spec.tsx | 2 +- packages/ui/src/components/list/list.styles.ts | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/ui/src/components/list/components/item/item.styles.ts b/packages/ui/src/components/list/components/item/item.styles.ts index ea3b37454..924a83841 100644 --- a/packages/ui/src/components/list/components/item/item.styles.ts +++ b/packages/ui/src/components/list/components/item/item.styles.ts @@ -65,8 +65,7 @@ export const styles = tv( bullet: 'border-none bg-[transparent]', }, ordered: { - // value gotten from taking rem of list number from original GEL value as tailwind seems to handled ordered list styling differently - base: 'pl-[0.35rem]', + base: 'pl-0', }, }, nested: { diff --git a/packages/ui/src/components/list/list.spec.tsx b/packages/ui/src/components/list/list.spec.tsx index 4f7350945..fdc9175a6 100644 --- a/packages/ui/src/components/list/list.spec.tsx +++ b/packages/ui/src/components/list/list.spec.tsx @@ -85,7 +85,7 @@ describe('List', () => { ordered list , ); - expect(getByText('ordered list')).toHaveClass('pl-[0.35rem]'); + expect(getByText('ordered list')).toHaveClass('pl-0'); }); it('should render with correct spacing when large spacing prop passed', () => { diff --git a/packages/ui/src/components/list/list.styles.ts b/packages/ui/src/components/list/list.styles.ts index fdd89b84b..3a79a088d 100644 --- a/packages/ui/src/components/list/list.styles.ts +++ b/packages/ui/src/components/list/list.styles.ts @@ -14,7 +14,7 @@ export const styles = tv( unstyled: {}, icon: {}, ordered: { - base: 'list-inside list-decimal', + base: 'list-decimal ps-[1.25rem]', }, }, nested: {