From e206da7383bc150698a484ccdc8f57aca820cc88 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Thu, 22 Aug 2024 11:39:13 +1000 Subject: [PATCH 01/23] Update src/content/design-system/components/flexi-cell --- .../design/vertical-stack/content.mdoc | 83 +++++++++---------- 1 file changed, 39 insertions(+), 44 deletions(-) diff --git a/apps/site/src/content/design-system/components/flexi-cell/design/vertical-stack/content.mdoc b/apps/site/src/content/design-system/components/flexi-cell/design/vertical-stack/content.mdoc index 560a2d71c..2aa70b82f 100644 --- a/apps/site/src/content/design-system/components/flexi-cell/design/vertical-stack/content.mdoc +++ b/apps/site/src/content/design-system/components/flexi-cell/design/vertical-stack/content.mdoc @@ -1,47 +1,42 @@ ``` () => { - const title = 'Title'; - const subtitle = 'Sub-title'; - return ( - <> - - - - } - > - - - {title} - - {subtitle} - - - - - - } - > - - - {title} - - {subtitle} - - - ); -}; + return <> + +
+ +
+ Title + Descriptive information +
+
+ + +
+ +
+ Title + Descriptive information +
+
+ + +
+ +
+ Title + Descriptive information +
+
+ + ; +} ``` From 1689c58e818515e0b7b47c08b83a1cd30e0dad48 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Thu, 22 Aug 2024 13:06:48 +1000 Subject: [PATCH 02/23] Update src/content/design-system/components/flexi-cell --- .../design/horizontal-layout/content.mdoc | 138 ++++++++---------- 1 file changed, 60 insertions(+), 78 deletions(-) diff --git a/apps/site/src/content/design-system/components/flexi-cell/design/horizontal-layout/content.mdoc b/apps/site/src/content/design-system/components/flexi-cell/design/horizontal-layout/content.mdoc index 36c20c7c5..eff37179d 100644 --- a/apps/site/src/content/design-system/components/flexi-cell/design/horizontal-layout/content.mdoc +++ b/apps/site/src/content/design-system/components/flexi-cell/design/horizontal-layout/content.mdoc @@ -1,80 +1,62 @@ ``` -
- - - - - - - - SUB-HEADING - - - - Tile title - - -This is the tile description. It can be a couple of lines long. - - - - - - - - - - - - - SUB-HEADING - - - - Tile title - - -This is the tile description. It can be a couple of lines long. - - - - - - - - - - - - SUB-HEADING - - - - Tile title - - -This is the tile description. It can be a couple of lines long. - - - - -
+ () => { + return + + + +
+
+ +
+
+ + Flexi-cell title + + Description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tellus libero, faucibus eu leo non, aliquam ultrices odio. Proin mattis tellus neque, et molestie urna ullamcorper. +
+
+ + + + +
+
+ +
+
+ + Flexi-cell title + + Description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tellus libero, faucibus eu leo non, aliquam ultrices odio. Proin mattis tellus neque, et molestie urna ullamcorper. +
+
+ + + + +
+
+ +
+
+ + Flexi-cell title + + Description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tellus libero, faucibus eu leo non, aliquam ultrices odio. Proin mattis tellus neque, et molestie urna ullamcorper. +
+
+ + + + ; +} ``` From 542f9a7c8ba2c19235051d604c29506a4762eab2 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Thu, 22 Aug 2024 13:07:56 +1000 Subject: [PATCH 03/23] Update src/content/design-system/components/flexi-cell --- .../flexi-cell/design/horizontal-layout/content.mdoc | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/site/src/content/design-system/components/flexi-cell/design/horizontal-layout/content.mdoc b/apps/site/src/content/design-system/components/flexi-cell/design/horizontal-layout/content.mdoc index eff37179d..b7a546f6d 100644 --- a/apps/site/src/content/design-system/components/flexi-cell/design/horizontal-layout/content.mdoc +++ b/apps/site/src/content/design-system/components/flexi-cell/design/horizontal-layout/content.mdoc @@ -15,7 +15,7 @@ Flexi-cell title - Description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tellus libero, faucibus eu leo non, aliquam ultrices odio. Proin mattis tellus neque, et molestie urna ullamcorper. + Descriptive information - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tellus libero, faucibus eu leo non, aliquam ultrices odio. Proin mattis tellus neque, et molestie urna ullamcorper. @@ -33,7 +33,7 @@ Flexi-cell title - Description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tellus libero, faucibus eu leo non, aliquam ultrices odio. Proin mattis tellus neque, et molestie urna ullamcorper. + Descriptive information - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tellus libero, faucibus eu leo non, aliquam ultrices odio. Proin mattis tellus neque, et molestie urna ullamcorper. @@ -51,7 +51,7 @@ Flexi-cell title - Description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tellus libero, faucibus eu leo non, aliquam ultrices odio. Proin mattis tellus neque, et molestie urna ullamcorper. + Descriptive information - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tellus libero, faucibus eu leo non, aliquam ultrices odio. Proin mattis tellus neque, et molestie urna ullamcorper. From 723c80da5e37f14a5ef45696d44ffc940f67f5af Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Thu, 22 Aug 2024 13:09:39 +1000 Subject: [PATCH 04/23] Update src/content/design-system/components/flexi-cell --- .../design/{vertical-stack => simple-tile}/content.mdoc | 4 ++++ .../content/design-system/components/flexi-cell/index.yaml | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) rename apps/site/src/content/design-system/components/flexi-cell/design/{vertical-stack => simple-tile}/content.mdoc (97%) diff --git a/apps/site/src/content/design-system/components/flexi-cell/design/vertical-stack/content.mdoc b/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc similarity index 97% rename from apps/site/src/content/design-system/components/flexi-cell/design/vertical-stack/content.mdoc rename to apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc index 2aa70b82f..86b6fea95 100644 --- a/apps/site/src/content/design-system/components/flexi-cell/design/vertical-stack/content.mdoc +++ b/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc @@ -1,3 +1,5 @@ +## Vertical stack + ``` () => { return <> @@ -40,3 +42,5 @@ ; } ``` + +## Horizontal layout diff --git a/apps/site/src/content/design-system/components/flexi-cell/index.yaml b/apps/site/src/content/design-system/components/flexi-cell/index.yaml index feef90713..792ce19b3 100644 --- a/apps/site/src/content/design-system/components/flexi-cell/index.yaml +++ b/apps/site/src/content/design-system/components/flexi-cell/index.yaml @@ -8,8 +8,8 @@ namedExport: excludeFromNavbar: true design: - title: - name: Vertical stack - slug: vertical-stack + name: Simple tile + slug: simple-tile noTitle: false - title: name: Horizontal layout From b2c5b8042781950f65ce8f09032119fd74642ee4 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Thu, 22 Aug 2024 13:09:53 +1000 Subject: [PATCH 05/23] Update src/content/design-system/components/flexi-cell --- .../design/simple-tile/content.mdoc | 63 +++++++++++++++++++ 1 file changed, 63 insertions(+) diff --git a/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc b/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc index 86b6fea95..92fd5c546 100644 --- a/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc +++ b/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc @@ -44,3 +44,66 @@ ``` ## Horizontal layout + +``` + () => { + return + + + +
+
+ +
+
+ + Flexi-cell title + + Descriptive information - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tellus libero, faucibus eu leo non, aliquam ultrices odio. Proin mattis tellus neque, et molestie urna ullamcorper. +
+
+ + + + +
+
+ +
+
+ + Flexi-cell title + + Descriptive information - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tellus libero, faucibus eu leo non, aliquam ultrices odio. Proin mattis tellus neque, et molestie urna ullamcorper. +
+
+ + + + +
+
+ +
+
+ + Flexi-cell title + + Descriptive information - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tellus libero, faucibus eu leo non, aliquam ultrices odio. Proin mattis tellus neque, et molestie urna ullamcorper. +
+
+ + + + ; +} +``` From d2a9dd0d550367db4fc9f264e6359317809aea3f Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Thu, 22 Aug 2024 13:10:22 +1000 Subject: [PATCH 06/23] Update src/content/design-system/components/flexi-cell --- .../components/flexi-cell/design/simple-tile/content.mdoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc b/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc index 92fd5c546..30abb0579 100644 --- a/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc +++ b/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc @@ -1,4 +1,4 @@ -## Vertical stack +### Vertical stack ``` () => { @@ -43,7 +43,7 @@ } ``` -## Horizontal layout +### Horizontal layout ``` () => { From 59f0b7754c532c7b4294b4a7bf080f113225606e Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Thu, 22 Aug 2024 13:11:19 +1000 Subject: [PATCH 07/23] Update src/content/design-system/components/flexi-cell --- .../design/{horizontal-layout => image-tile}/content.mdoc | 0 .../content/design-system/components/flexi-cell/index.yaml | 4 ++-- 2 files changed, 2 insertions(+), 2 deletions(-) rename apps/site/src/content/design-system/components/flexi-cell/design/{horizontal-layout => image-tile}/content.mdoc (100%) diff --git a/apps/site/src/content/design-system/components/flexi-cell/design/horizontal-layout/content.mdoc b/apps/site/src/content/design-system/components/flexi-cell/design/image-tile/content.mdoc similarity index 100% rename from apps/site/src/content/design-system/components/flexi-cell/design/horizontal-layout/content.mdoc rename to apps/site/src/content/design-system/components/flexi-cell/design/image-tile/content.mdoc diff --git a/apps/site/src/content/design-system/components/flexi-cell/index.yaml b/apps/site/src/content/design-system/components/flexi-cell/index.yaml index 792ce19b3..43145ce5e 100644 --- a/apps/site/src/content/design-system/components/flexi-cell/index.yaml +++ b/apps/site/src/content/design-system/components/flexi-cell/index.yaml @@ -12,8 +12,8 @@ design: slug: simple-tile noTitle: false - title: - name: Horizontal layout - slug: horizontal-layout + name: Image tile + slug: image-tile noTitle: false - title: name: User experience From 6851eeaa32941f1ae2157559196dba62235f8a7c Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Thu, 22 Aug 2024 13:52:36 +1000 Subject: [PATCH 08/23] Update src/content/design-system/components/flexi-cell --- .../flexi-cell/design/image-tile/content.mdoc | 78 +++++-------------- 1 file changed, 20 insertions(+), 58 deletions(-) diff --git a/apps/site/src/content/design-system/components/flexi-cell/design/image-tile/content.mdoc b/apps/site/src/content/design-system/components/flexi-cell/design/image-tile/content.mdoc index b7a546f6d..fd2acdca6 100644 --- a/apps/site/src/content/design-system/components/flexi-cell/design/image-tile/content.mdoc +++ b/apps/site/src/content/design-system/components/flexi-cell/design/image-tile/content.mdoc @@ -1,62 +1,24 @@ ``` - () => { - return - - - -
-
- -
-
- - Flexi-cell title - - Descriptive information - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tellus libero, faucibus eu leo non, aliquam ultrices odio. Proin mattis tellus neque, et molestie urna ullamcorper. -
+ () => { + return <> + {new Array(3).fill(null).map((_, index) => +
+ background + + Title + Descriptive information +
+ Label + + Label +
- - - - -
-
- -
-
- - Flexi-cell title - - Descriptive information - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tellus libero, faucibus eu leo non, aliquam ultrices odio. Proin mattis tellus neque, et molestie urna ullamcorper. -
-
- - - - -
-
- -
-
- - Flexi-cell title - - Descriptive information - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tellus libero, faucibus eu leo non, aliquam ultrices odio. Proin mattis tellus neque, et molestie urna ullamcorper. -
-
- - - - ; + +
+ )} + ; } ``` From 59bebbb70bd93b8fed63833431aed87636a2e900 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Thu, 22 Aug 2024 13:54:39 +1000 Subject: [PATCH 09/23] Update src/content/design-system/components/flexi-cell --- .../flexi-cell/design/image-tile/content.mdoc | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/apps/site/src/content/design-system/components/flexi-cell/design/image-tile/content.mdoc b/apps/site/src/content/design-system/components/flexi-cell/design/image-tile/content.mdoc index fd2acdca6..4b4dfdadb 100644 --- a/apps/site/src/content/design-system/components/flexi-cell/design/image-tile/content.mdoc +++ b/apps/site/src/content/design-system/components/flexi-cell/design/image-tile/content.mdoc @@ -1,3 +1,5 @@ +### Vertical stack + ``` () => { return <> @@ -22,3 +24,36 @@ ; } ``` + +### Horizontal layout + +``` +() => { + return + + {new Array(3).fill(null).map((_, index) => + +
+
+ background +
+ + Title + Description +
+ Label + + Label + +
+ +
+ + )} + + ; +} +``` From 4067741579bc9cfbeb6dd93d2add23df0c26fe86 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Thu, 22 Aug 2024 13:56:35 +1000 Subject: [PATCH 10/23] Update src/content/design-system/components/flexi-cell --- .../flexi-cell/code/development-examples/content.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/components/flexi-cell/code/development-examples/content.mdoc b/apps/site/src/content/design-system/components/flexi-cell/code/development-examples/content.mdoc index cd5f7bd5e..5a7ea7a84 100644 --- a/apps/site/src/content/design-system/components/flexi-cell/code/development-examples/content.mdoc +++ b/apps/site/src/content/design-system/components/flexi-cell/code/development-examples/content.mdoc @@ -693,7 +693,7 @@ > From bed969f168fa8171c984cd7574db8c882c278634 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Thu, 22 Aug 2024 15:05:05 +1000 Subject: [PATCH 11/23] Update src/content/design-system/components/flexi-cell --- .../code/development-examples/content.mdoc | 824 ++---------------- 1 file changed, 88 insertions(+), 736 deletions(-) diff --git a/apps/site/src/content/design-system/components/flexi-cell/code/development-examples/content.mdoc b/apps/site/src/content/design-system/components/flexi-cell/code/development-examples/content.mdoc index 5a7ea7a84..049415037 100644 --- a/apps/site/src/content/design-system/components/flexi-cell/code/development-examples/content.mdoc +++ b/apps/site/src/content/design-system/components/flexi-cell/code/development-examples/content.mdoc @@ -18,760 +18,112 @@ ``` -### Credit card usage +### **Simple tile (Vertical stack)** ```jsx - - - $9,999.99 - - avail $9,999.99 - - } -> - Credit card - Card ending in 1234 - -``` - -### Account usage - -```jsx - - - $9,999.99 - - - } -> - Account - 032-123 12345678 - -``` - -### Payee usage - -```jsx - - - Fri 5 Aug - - - } - before={ - - WW - - } - tag="a" - href="#" -> - With Circle and Info Button - Payee Details - -``` - -### Payee with info usage - -```jsx - - } /> - - } - before={ - - WW - - } - dualAction - href="#" -> - With Circle and Info Button - Payee Details - -``` - -### Flag payee usage - -```jsx - - } /> - - } - before={ - - - - } - dualAction - href="#" -> - With Flag and Info Button - Payee Details - -``` - -### List item with flag usage - -```jsx - - - - } - withBorder - tag="a" - href="#" -> - List Item - -``` - -### List item usage - -```jsx - - List Item - -``` - -### Westpac special product usage - -```jsx - - - - } -> - - - Westpac specials and product offers - - Discounts and cashback from select merchants & product offers from Westpac - -``` - -### Horizontal Promo Tile with footer - -```jsx - - - Graphic Here - - - } - topBadge={({ className }) => Corner flag} -> - - MYER - - - This is talking about the bonus - - This is more about the bonus and all the other exciting things about this. - - Badge 1 - Badge 2 - - +() => { + return <> + {new Array(3).fill(null).map((_, index) => +
+ +
+ Label + Descriptive information +
+
+ )} + ; +} ``` -### Account list usage +### **Simple tile (Horizontal layout)** ```jsx () => { - const MOCK_ACCOUNTS = [ - { - title: 'Cash', - id: 'cash', - accounts: [ - { - name: 'Westpac Choice', - amount: '$1,234.99', - number: '732-123 746587', - }, - { - name: 'Offset account for loan', - amount: '$20,000.00', - number: '732-123 123456', - }, - ], - }, - { - title: 'Foreign currency', - id: 'foreign-currency', - accounts: [ - { - name: 'US Dollar Currency Account', - amount: '$3,957.57', - number: '123-456 1234567', - }, - { - name: 'British pound Currency Account', - amount: '$9,999,999,999.99', - number: '123-456 1234567', - }, - ], - }, - { - title: 'Credit cards', - id: 'credit-cards', - accounts: [ - { - name: 'Altitude Black World Mastercard', - amount: '-$3,957.57', - number: 'Card ending in 1234', - }, - ], - }, - ]; - - return ( - <> - {MOCK_ACCOUNTS.map(({ title, id, accounts }) => ( -
-

{title}

- {accounts.map(({ name, amount, number }) => ( - - - {amount} + return + + {new Array(3).fill(null).map((_, index) => + +
+
+ +
+
+ + Title - available $9,999 - - } - > - - {name} - - {number} + Description +
+
- ))} -
- ))} - - ); -}; -``` - -### Payee list usage - -```jsx -() => { - const MOCK_PAYEES = [ - { - title: 'Recently Paid', - id: 'recently-paid', - payees: [ - { - initials: 'AJ', - name: 'Andrew Jones', - paidAt: 'Fri 5 Aug', - number: '123-986 463846', - }, - { - initials: 'JW', - name: 'Joss Wight', - paidAt: 'Mon 1 Aug', - number: '098-567 465352', - }, - ], - }, - { - title: 'A', - id: 'a', - payees: [ - { - initials: 'AO', - name: 'Active OOSH', - number: '857-434 856383', - paidAt: undefined, - }, - { - initials: 'AC', - name: 'Alice Cartwright', - number: '950-456 345363', - paidAt: undefined, - }, - ], - }, - { - title: 'B', - id: 'b', - payees: [ - { - initials: 'BN', - name: 'Benjamin North', - number: '098-123 745362', - paidAt: undefined, - }, - ], - }, - ]; - - return ( - <> - {MOCK_PAYEES.map(({ title, id, payees }) => ( -
-

{title}

- {payees.map(({ name, initials, number, paidAt }) => - paidAt ? ( - {initials}} - after={ - - - {paidAt} - - - } - > - {name} - {number} - - ) : ( - {initials}} - after={ } />} - > - {name} - {number} - - ), - )} -
- ))} - - ); -}; + )} + + ; +} ``` -### Country list usage +### **Image tile (Vertical stack)** ```jsx () => { - const MOCK_COUNTRIES = [ - { - title: 'Popular', - id: 'popular', - payees: [ - { - code: 'IN', - name: 'India', - svg: ( - - ), - }, - { - code: 'UK', - name: 'United Kingdom', - svg: ( - - ), - }, - { - code: 'USA', - name: 'United States', - svg: ( - - ), - }, - ], - }, - { - title: 'A', - id: 'a', - payees: [ - { - code: 'AI', - name: 'Ascension Island', - svg: ( - - ), - }, - { - code: 'AN', - name: 'Andorra', - svg: ( - - ), - }, - { - code: 'UA', - name: 'United Arab Emirates', - svg: ( - - ), - }, - { - code: 'AF', - name: 'Afghanistan', - svg: ( - - ), - }, - ], - }, - ]; - - return ( -
- {MOCK_COUNTRIES.map(({ title, id, payees }) => ( -
-

{title}

-
- {payees.map(({ name, svg }) => { - return ( - {svg}} - > - {name} - - ); - })} + return <> + {new Array(3).fill(null).map((_, index) => +
+ background + + Title + Description +
+ Label + + Label + +
+
-
- ))} -
- ); -}; -``` - -### Foreign Payee list usage - -```jsx -() => { - const MOCK_FOREIGNPAYEES = [ - { - title: 'Recently Paid', - id: 'recently-paid', - payees: [ - { - name: 'Andrew Jones', - paidAt: 'Fri 5 Aug', - number: '10964567891', - bank: 'BANK OF ANTARCTICA, ANTARCTICA', - code: 'NFBKAS33XXX', - svg: ( - - ), - }, - { - name: 'Joss Wight', - paidAt: 'Mon 1 Aug', - number: '10964567892', - bank: 'LLOYDS OF LONDON, DEVON', - code: 'NFBKAS33XXX', - svg: ( - - ), - }, - ], - }, - { - title: 'A', - id: 'a', - payees: [ - { - name: 'American Apparel', - number: '10964567894', - bank: 'BANK OF AMERICA, NEW YORK', - code: 'NFBKAS33XXX', - paidAt: undefined, - svg: ( - - ), - }, - { - initials: 'AC', - name: 'Alfred Prince', - number: '10964567895', - bank: 'BANK OF AMERICA, NEW YORK', - code: 'NFBKAS33XXX', - paidAt: undefined, - svg: ( - - ), - }, - ], - }, - { - title: 'H', - id: 'h', - payees: [ - { - name: 'Havana Houseboats', - number: '10964567896', - bank: 'BANK OF CUBA, HAVANA', - code: 'NFBKAS33XXX', - paidAt: undefined, - svg: ( - - ), - }, - ], - }, - ]; - - return ( - <> - {MOCK_FOREIGNPAYEES.map(({ title, id, payees }) => ( -
-

{title}

- {payees.map(({ name, number, paidAt, bank, code, svg }) => - paidAt ? ( - {svg}} - after={ - - - {paidAt} - - - } - > - {name} - {number} - {bank} - {code} - - ) : ( - - {svg} - - } - after={ } />} - > - {name} - {number} - {bank} - {code} - - ), - )} -
- ))} - - ); -}; -``` - -### Promo tiles - Vertically stacked - -```jsx -() => { - const MOCK_PROMOS = [ - { - title: 'This is talking about the bonus', - subtitle: 'This is more about the bonus and all the other exciting things about this.', - }, - { - title: 'This is a longer heading talking all about the bonus this one wraps', - subtitle: 'This is more about the bonus', - }, - { - title: 'This is talking about the bonus', - subtitle: 'This is more about the bonus and all the other exciting things about this.', - }, - ]; - - return ( -
- {MOCK_PROMOS.map(({ title, subtitle }) => ( - - - Graphic Here - - - } - topBadge={({ className }) => Corner flag} - > - - MYER - - - {title} - - {subtitle} - - Badge 1 - Badge 2 - - - ))} -
- ); -}; + )} + ; +} ``` -### Promo Tiles - Horizontal layout +### **Image tile - Edge to edge (Horizontal layout)** ```jsx () => { - const MOCK_VERTICAL_PROMOS = [ - { - title: 'About the bonus', - subtitle: - 'The bonus and all the other exciting things. This will truncate if it gets too long with some extra text to make it a bit longer.', - }, - { - title: 'Short heading', - subtitle: 'This is more about the bonus.', - }, - { - title: 'This is a longer heading talking all about the bonus this one wraps', - subtitle: 'This is more about the bonus', - }, - ]; - - return ( -
- {MOCK_VERTICAL_PROMOS.map(({ title, subtitle }) => ( - Corner flag} - > - - - - - - MYER - - - {title} - - {subtitle} - - Badge 1 - Badge 2 - - - ))} -
- ); -}; -``` - -### Product tiles usage - -```jsx -() => { - const title = 'Westpac specials and product offers'; - const subtitle = 'Discounts and cashback from select merchants & products offers from Westpac'; - return ( - <> - - - - } - after={ - - Completed - - } - > - - - {title} - - {subtitle} - - - - - } - after={ - - Completed - - } - > - - - {title} - - {subtitle} - - - ); -}; + return + + {new Array(3).fill(null).map((_, index) => + +
+
+ background +
+ + Title + Description +
+ Label + + Label + +
+ +
+ + )} + + ; +} ``` From 1077c9aaadabfe8d0772e116b9692c511a341058 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Thu, 22 Aug 2024 15:06:31 +1000 Subject: [PATCH 12/23] Update src/content/design-system/components/flexi-cell --- .../flexi-cell/code/development-examples/content.mdoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/src/content/design-system/components/flexi-cell/code/development-examples/content.mdoc b/apps/site/src/content/design-system/components/flexi-cell/code/development-examples/content.mdoc index 049415037..2434d4905 100644 --- a/apps/site/src/content/design-system/components/flexi-cell/code/development-examples/content.mdoc +++ b/apps/site/src/content/design-system/components/flexi-cell/code/development-examples/content.mdoc @@ -78,7 +78,7 @@ md: 'large' }}>
- background + background Title Description @@ -108,7 +108,7 @@ }}>
- background + background
Title From 4df8859a9c4c89ac53b5e50956b7e72b700b7ab8 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Tue, 27 Aug 2024 14:21:50 +1000 Subject: [PATCH 13/23] Update src/content/design-system/components/flexi-cell --- .../flexi-cell/design/simple-tile/content.mdoc | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc b/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc index 30abb0579..be9894eff 100644 --- a/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc +++ b/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc @@ -1,5 +1,12 @@ ### Vertical stack +This tile has a responsive content layout: + +- Xs - Sm: Symbol is stacked above labels, tile padding 12px +- Md +: Symbol is inline to the left of the labels tile padding 18px + +Use the demo button to preview this responsive behaviour. + ``` () => { return <> @@ -45,6 +52,13 @@ ### Horizontal layout +This tile has a responsive content layout: + +- Xs - Sm: Tile padding 12px +- Md +: Tile padding 18px + +Use the demo button to preview this responsive behaviour. + ``` () => { return From 1c8765a086c28b3ff81a640164a0981beea0a097 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Tue, 27 Aug 2024 14:22:22 +1000 Subject: [PATCH 14/23] Update src/content/design-system/components/flexi-cell --- .../components/flexi-cell/design/simple-tile/content.mdoc | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc b/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc index be9894eff..b64b9a309 100644 --- a/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc +++ b/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc @@ -2,8 +2,9 @@ This tile has a responsive content layout: -- Xs - Sm: Symbol is stacked above labels, tile padding 12px -- Md +: Symbol is inline to the left of the labels tile padding 18px +**Xs - Sm:** Symbol is stacked above labels, tile padding 12px + +**Md +:** Symbol is inline to the left of the labels tile padding 18px Use the demo button to preview this responsive behaviour. From 52f187b5d2ff49d7e6021ce426f32e08d723f968 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Tue, 27 Aug 2024 14:23:06 +1000 Subject: [PATCH 15/23] Update src/content/design-system/components/flexi-cell --- .../components/flexi-cell/design/simple-tile/content.mdoc | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc b/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc index b64b9a309..fff43c537 100644 --- a/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc +++ b/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc @@ -1,13 +1,11 @@ ### Vertical stack -This tile has a responsive content layout: +This tile has a responsive content layout, use the demo button to preview this responsive behaviour. **Xs - Sm:** Symbol is stacked above labels, tile padding 12px **Md +:** Symbol is inline to the left of the labels tile padding 18px -Use the demo button to preview this responsive behaviour. - ``` () => { return <> From 4d0b2a2eaaa8c1a3bca742a1e0c0f86692ac224d Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Tue, 27 Aug 2024 14:24:27 +1000 Subject: [PATCH 16/23] Update src/content/design-system/components/flexi-cell --- .../design-system/components/flexi-cell/index.yaml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/design-system/components/flexi-cell/index.yaml b/apps/site/src/content/design-system/components/flexi-cell/index.yaml index 43145ce5e..1354f6928 100644 --- a/apps/site/src/content/design-system/components/flexi-cell/index.yaml +++ b/apps/site/src/content/design-system/components/flexi-cell/index.yaml @@ -25,12 +25,12 @@ design: noTitle: false accessibility: [] relatedComponents: - - title: Icons - slug: /components/foundation/icon - - title: Pictograms - slug: /components/foundation/icon - title: Badges slug: /components/badge + - title: Icons + slug: /components/foundation/icon + - title: Selector + slug: /components/selector code: - title: name: Development examples From 492531f943343755c78210393b0b9421fb0d714f Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Tue, 27 Aug 2024 14:25:07 +1000 Subject: [PATCH 17/23] Update src/content/design-system/components/flexi-cell --- .../components/flexi-cell/design/simple-tile/content.mdoc | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc b/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc index fff43c537..298de0b5b 100644 --- a/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc +++ b/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc @@ -51,12 +51,11 @@ This tile has a responsive content layout, use the demo button to preview this r ### Horizontal layout -This tile has a responsive content layout: +This tile has a responsive content layout, use the demo button to preview this responsive behaviour. -- Xs - Sm: Tile padding 12px -- Md +: Tile padding 18px +**Xs - Sm:** Tile padding 12px -Use the demo button to preview this responsive behaviour. +**Md +:** Tile padding 18px ``` () => { From 46fbec7d21db720f03311449f8fabf02c12ae2d2 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Tue, 27 Aug 2024 14:26:15 +1000 Subject: [PATCH 18/23] Update src/content/design-system/components/flexi-cell --- .../components/flexi-cell/design/simple-tile/content.mdoc | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc b/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc index 298de0b5b..94685c06f 100644 --- a/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc +++ b/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc @@ -1,6 +1,6 @@ -### Vertical stack +These tiles have a responsive content layout, use the demo button to preview this responsive behaviour. -This tile has a responsive content layout, use the demo button to preview this responsive behaviour. +### Vertical stack **Xs - Sm:** Symbol is stacked above labels, tile padding 12px @@ -51,8 +51,6 @@ This tile has a responsive content layout, use the demo button to preview this r ### Horizontal layout -This tile has a responsive content layout, use the demo button to preview this responsive behaviour. - **Xs - Sm:** Tile padding 12px **Md +:** Tile padding 18px From 6b3bf6938a930c8968ae33c2738a8bccaa4badba Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Tue, 27 Aug 2024 14:26:41 +1000 Subject: [PATCH 19/23] Update src/content/design-system/components/flexi-cell --- .../flexi-cell/design/simple-tile/content.mdoc | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc b/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc index 94685c06f..db812a9f4 100644 --- a/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc +++ b/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc @@ -2,9 +2,8 @@ These tiles have a responsive content layout, use the demo button to preview thi ### Vertical stack -**Xs - Sm:** Symbol is stacked above labels, tile padding 12px - -**Md +:** Symbol is inline to the left of the labels tile padding 18px +- **Xs - Sm:** Symbol is stacked above labels, tile padding 12px +- **Md +:** Symbol is inline to the left of the labels tile padding 18px ``` () => { @@ -51,9 +50,8 @@ These tiles have a responsive content layout, use the demo button to preview thi ### Horizontal layout -**Xs - Sm:** Tile padding 12px - -**Md +:** Tile padding 18px +- **Xs - Sm:** Tile padding 12px +- **Md +:** Tile padding 18px ``` () => { From d43dc824a8378922eb6e5f0561d3c80f4ed18244 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Tue, 27 Aug 2024 14:27:38 +1000 Subject: [PATCH 20/23] Update src/content/design-system/components/flexi-cell --- .../components/flexi-cell/design/image-tile/content.mdoc | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/apps/site/src/content/design-system/components/flexi-cell/design/image-tile/content.mdoc b/apps/site/src/content/design-system/components/flexi-cell/design/image-tile/content.mdoc index 4b4dfdadb..12c78a314 100644 --- a/apps/site/src/content/design-system/components/flexi-cell/design/image-tile/content.mdoc +++ b/apps/site/src/content/design-system/components/flexi-cell/design/image-tile/content.mdoc @@ -1,5 +1,10 @@ +These tiles have a responsive content layout, use the demo button to preview this responsive behaviour. + ### Vertical stack +- **Xs - Sm:** Tile padding 12px +- **Md +:** Tile padding 18px + ``` () => { return <> @@ -27,6 +32,9 @@ ### Horizontal layout +- **Xs - Sm:** Tile padding 12px +- **Md +:** Tile padding 18px + ``` () => { return From de8aa1b2332f4c4e29c6501205e889e0284c1bb2 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Tue, 27 Aug 2024 14:33:31 +1000 Subject: [PATCH 21/23] Update src/content/design-system/components/flexi-cell --- .../components/flexi-cell/design/user-experience/content.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/components/flexi-cell/design/user-experience/content.mdoc b/apps/site/src/content/design-system/components/flexi-cell/design/user-experience/content.mdoc index e1a49aa9b..b080157c3 100644 --- a/apps/site/src/content/design-system/components/flexi-cell/design/user-experience/content.mdoc +++ b/apps/site/src/content/design-system/components/flexi-cell/design/user-experience/content.mdoc @@ -1 +1 @@ -The user experience considerations for the flexi-cell components are specific to the patterns that are utilising it. +Try to keep the amount of content displayed in each tile consistent, tiles that appear in a horizontal layout should all be the same height. From e860e97d2804360243f85d20f0c027529ddf432a Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Tue, 27 Aug 2024 14:34:29 +1000 Subject: [PATCH 22/23] Update src/content/design-system/components/flexi-cell --- .../flexi-cell/code/development-examples/content.mdoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/src/content/design-system/components/flexi-cell/code/development-examples/content.mdoc b/apps/site/src/content/design-system/components/flexi-cell/code/development-examples/content.mdoc index 2434d4905..13ac2afa6 100644 --- a/apps/site/src/content/design-system/components/flexi-cell/code/development-examples/content.mdoc +++ b/apps/site/src/content/design-system/components/flexi-cell/code/development-examples/content.mdoc @@ -1,4 +1,4 @@ -### Default usage +### **Default usage** ```jsx @@ -7,7 +7,7 @@ ``` -### With NextJS Link usage +### **With NextJS Link usage** ```jsx From f6c62d75caeb60984e03ed32546aaefcbfe603c0 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Mon, 2 Sep 2024 11:46:40 +1000 Subject: [PATCH 23/23] Update src/content/design-system/components/flexi-cell --- .../design/{image-tile => image-bleed}/content.mdoc | 4 ++-- .../design/{simple-tile => symbol}/content.mdoc | 4 ++-- .../design-system/components/flexi-cell/index.yaml | 8 ++++---- 3 files changed, 8 insertions(+), 8 deletions(-) rename apps/site/src/content/design-system/components/flexi-cell/design/{image-tile => image-bleed}/content.mdoc (98%) rename apps/site/src/content/design-system/components/flexi-cell/design/{simple-tile => symbol}/content.mdoc (99%) diff --git a/apps/site/src/content/design-system/components/flexi-cell/design/image-tile/content.mdoc b/apps/site/src/content/design-system/components/flexi-cell/design/image-bleed/content.mdoc similarity index 98% rename from apps/site/src/content/design-system/components/flexi-cell/design/image-tile/content.mdoc rename to apps/site/src/content/design-system/components/flexi-cell/design/image-bleed/content.mdoc index 12c78a314..e00b26b59 100644 --- a/apps/site/src/content/design-system/components/flexi-cell/design/image-tile/content.mdoc +++ b/apps/site/src/content/design-system/components/flexi-cell/design/image-bleed/content.mdoc @@ -1,6 +1,6 @@ These tiles have a responsive content layout, use the demo button to preview this responsive behaviour. -### Vertical stack +### Horizontal - **Xs - Sm:** Tile padding 12px - **Md +:** Tile padding 18px @@ -30,7 +30,7 @@ These tiles have a responsive content layout, use the demo button to preview thi } ``` -### Horizontal layout +### Vertical - **Xs - Sm:** Tile padding 12px - **Md +:** Tile padding 18px diff --git a/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc b/apps/site/src/content/design-system/components/flexi-cell/design/symbol/content.mdoc similarity index 99% rename from apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc rename to apps/site/src/content/design-system/components/flexi-cell/design/symbol/content.mdoc index db812a9f4..1b0a532d9 100644 --- a/apps/site/src/content/design-system/components/flexi-cell/design/simple-tile/content.mdoc +++ b/apps/site/src/content/design-system/components/flexi-cell/design/symbol/content.mdoc @@ -1,6 +1,6 @@ These tiles have a responsive content layout, use the demo button to preview this responsive behaviour. -### Vertical stack +### Horizontal - **Xs - Sm:** Symbol is stacked above labels, tile padding 12px - **Md +:** Symbol is inline to the left of the labels tile padding 18px @@ -48,7 +48,7 @@ These tiles have a responsive content layout, use the demo button to preview thi } ``` -### Horizontal layout +### Vertical - **Xs - Sm:** Tile padding 12px - **Md +:** Tile padding 18px diff --git a/apps/site/src/content/design-system/components/flexi-cell/index.yaml b/apps/site/src/content/design-system/components/flexi-cell/index.yaml index 1354f6928..ae301663e 100644 --- a/apps/site/src/content/design-system/components/flexi-cell/index.yaml +++ b/apps/site/src/content/design-system/components/flexi-cell/index.yaml @@ -8,12 +8,12 @@ namedExport: excludeFromNavbar: true design: - title: - name: Simple tile - slug: simple-tile + name: Symbol + slug: symbol noTitle: false - title: - name: Image tile - slug: image-tile + name: Image bleed + slug: image-bleed noTitle: false - title: name: User experience