Merge pull request #819 from WestpacGEL/main

update the develop with main branch
WestpacGEL · Jul 12, 2024 · bdacf9d · bdacf9d
2 parents 2c43a44 + 4a69efd
commit bdacf9d
Show file tree

Hide file tree

Showing 60 changed files with 498 additions and 451 deletions.
diff --git a/apps/site/src/app/(home)/components/hero/hero.component.tsx b/apps/site/src/app/(home)/components/hero/hero.component.tsx
@@ -14,9 +14,9 @@ export function Hero() {
           </div>
           <div className="col-span-10 col-start-2 row-start-2 row-end-[span_1] mb-7 xsl:col-span-9 xsl:col-start-3 xsl:mb-9 sm:mb-14 md:mb-15 lg:mb-16">
             <p className="font-gel-serif text-[1.125rem] leading-[1.33] text-white antialiased sm:text-[1.5rem] sm:leading-[1.38]">
-              The Global Experience Language is our single source of truth, providing everything you need to deliver our
-              brand promises and create consistent, coherent customer experiences across our entire digital landscape
-              faster, and with less effort.
+              The Global Experience Language is our single source of truth communicating how we design for the digital
+              channel. It provides tools and guidelines to create and deliver consistent, coherent customer experiences
+              across our entire digital landscape faster, and with less effort.
             </p>
           </div>
         </Grid>

diff --git a/apps/site/src/app/articles/[article]/components/article-page/article-page.component.tsx b/apps/site/src/app/articles/[article]/components/article-page/article-page.component.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { DocumentRenderer } from '@keystatic/core/renderer';
 import { Grid, GridContainer } from '@westpac/ui';
 import Image from 'next/image';

diff --git a/apps/site/src/content/articles/banker-file-upload/content.mdoc b/apps/site/src/content/articles/banker-file-upload/content.mdoc
diff --git a/apps/site/src/content/articles/banking-display-accounts.yaml b/apps/site/src/content/articles/banking-display-accounts.yaml
@@ -1,7 +1,8 @@
 name: Banking display of accounts
-author: Digital Experience
+thumbnail: {}
 image:
   src: >-
     https://res.cloudinary.com/westpac-gel/image/upload/v1695774586/cln10ek1v001qvd8idm00epsy.png
   height: 1080
-  width: 1920
+  width: 1920
+author: Digital Experience
diff --git a/apps/site/src/content/articles/banking-display-accounts/content.mdoc b/apps/site/src/content/articles/banking-display-accounts/content.mdoc
@@ -25,18 +25,12 @@ Anywhere we need to display account information to customers e.g. dashboards, ac
 
 ## Looking for detailed designs?
 
-Here are links to detailed specifications and guidelines for the pattern in Figma. This information is only available to Westpac Group employees:
+Here are links to detailed specifications of the pattern in Figma. This information is only available to Westpac Group employees:
 
-[Pattern guidelines - Display of accounts](https://www.figma.com/proto/DvJHR8VGazoB8d97ddy6Xf/DEEPEN-UX-Patterns-%26-guiding-principles?page-id=1112%3A36781&type=design&node-id=1338-24546&viewport=978%2C494%2C0.27&t=vueEBRWB6w2i0pgB-1&scaling=scale-down-width&starting-point-node-id=1338%3A24546&hotspot-hints=0&mode=design)
+{% linkList
+   links=[{label: "Pattern guidelines - Display of accounts", url: "https://www.figma.com/proto/DvJHR8VGazoB8d97ddy6Xf/DEEPEN-UX-Patterns-%26-guiding-principles?page-id=1112%3A36781&type=design&node-id=1338-24546&viewport=978%2C494%2C0.27&t=vueEBRWB6w2i0pgB-1&scaling=scale-down-width&starting-point-node-id=1338%3A24546&hotspot-hints=0&mode=design", type: "_blank"}] /%}
 
-## Related items
+## More patterns
 
-[Display of transactions](/articles/banking-display-transactions)
-
-[Onboarding](/articles/banking-onboarding)
-
-[Hand offs](/articles/banking-hand-offs)
-
-[Things you should know](/articles/banking-tysk)
-
-[Back to Banking](/articles/banking)
+{% linkList
+   links=[{label: "All banking patterns", url: "/articles/banking", type: "_self"}] /%}
diff --git a/apps/site/src/content/articles/banking-display-transactions.yaml b/apps/site/src/content/articles/banking-display-transactions.yaml
@@ -1,7 +1,8 @@
 name: Display of transactions
-author: Digital Experience
+thumbnail: {}
 image:
   src: >-
     https://res.cloudinary.com/westpac-gel/image/upload/v1695782572/cln155psl001uvd8i0fuq9dfs.png
   height: 1080
-  width: 1920
+  width: 1920
+author: Digital Experience
diff --git a/apps/site/src/content/articles/banking-display-transactions/content.mdoc b/apps/site/src/content/articles/banking-display-transactions/content.mdoc
@@ -19,26 +19,20 @@ The transaction detail and its status is real-time, giving the customers the mos
 
 ### Reduce load
 
-Providing visual indicators (i.e. icons and logos) helps the customer to quickly scan a list to see either the source or the transaction of which type or group it belongs to. 
+Providing visual indicators (i.e. icons and logos) helps the customer to quickly scan a list to see either the source or the transaction of which type or group it belongs to.
 
 ## Where does it sit in the experience?
 
 Transaction information is used throughout the entire online banking experience.
 
 ## Looking for detailed designs?
 
-Here are links to detailed specifications and guidelines for the pattern in Figma. This information is only available to Westpac Group employees:
+Here are links to detailed specifications of the pattern in Figma. This information is only available to Westpac Group employees:
 
-[Pattern guidelines - Display of transactions](https://www.figma.com/proto/DvJHR8VGazoB8d97ddy6Xf/DEEPEN-UX-Patterns-%26-guiding-principles?page-id=1112%3A36784&type=design&node-id=1508-24717&viewport=1013%2C532%2C0.18&t=EV37V9vYsmI3DO6d-1&scaling=scale-down-width&mode=design)
+{% linkList
+   links=[{label: "Pattern guidelines - Display of accounts", url: "https://www.figma.com/proto/DvJHR8VGazoB8d97ddy6Xf/DEEPEN-UX-Patterns-%26-guiding-principles?page-id=1112%3A36784&type=design&node-id=1508-24717&viewport=1013%2C532%2C0.18&t=EV37V9vYsmI3DO6d-1&scaling=scale-down-width&mode=design", type: "_blank"}] /%}
 
-## Related items
+## More patterns
 
-[Display of accounts](/articles/banking-display-accounts)
-
-[Onboarding](/articles/banking-onboarding)
-
-[Hand offs](/articles/banking-hand-offs)
-
-[Things you should know](/articles/banking-tysk)
-
-[Back to Banking](/articles/banking)
+{% linkList
+   links=[{label: "All banking patterns", url: "/articles/banking", type: "_self"}] /%}
diff --git a/apps/site/src/content/articles/banking-hand-offs.yaml b/apps/site/src/content/articles/banking-hand-offs.yaml
@@ -1,7 +1,8 @@
 name: Hand-offs
-author: Digital Experience
+thumbnail: {}
 image:
   src: >-
     https://res.cloudinary.com/westpac-gel/image/upload/v1695783266/cln15klrw001xvd8igne64soh.png
   height: 1080
-  width: 1920
+  width: 1920
+author: Digital Experience
diff --git a/apps/site/src/content/articles/banking-hand-offs/content.mdoc b/apps/site/src/content/articles/banking-hand-offs/content.mdoc
@@ -2,7 +2,7 @@ Use this pattern when your experience transitions from one platform to another.
 
 ## What’s happening here?
 
-When a process involves multiple technology platforms, the customer may experience a moment of waiting while the new platform screen appears, such as from a native iOS or Android online banking application to a web page. This pattern describes the various loading states required depending on where they are coming from or going to. 
+When a process involves multiple technology platforms, the customer may experience a moment of waiting while the new platform screen appears, such as from a native iOS or Android online banking application to a web page. This pattern describes the various loading states required depending on where they are coming from or going to.
 
 ## Why do we do it this way?
 
@@ -16,18 +16,12 @@ This pattern is displayed when the customer is moving from one process to anothe
 
 ## Looking for detailed designs?
 
-Here are links to detailed specifications and guidelines for the pattern in Figma. This information is only available to Westpac Group employees:
+Here are links to detailed specifications of the pattern in Figma. This information is only available to Westpac Group employees:
 
-[Pattern guidelines - Hand-offs](https://www.figma.com/proto/DvJHR8VGazoB8d97ddy6Xf/DEEPEN-UX-Patterns-%26-guiding-principles?page-id=1112%3A36793&type=design&node-id=1508-25061&viewport=1004%2C689%2C0.16&t=oLJLtWyZFnNNZujl-1&scaling=scale-down-width&mode=design)
+{% linkList
+   links=[{label: "Pattern guidelines - Banking hand-offs", url: "https://www.figma.com/proto/DvJHR8VGazoB8d97ddy6Xf/DEEPEN-UX-Patterns-%26-guiding-principles?page-id=1112%3A36793&type=design&node-id=1508-25061&viewport=1004%2C689%2C0.16&t=oLJLtWyZFnNNZujl-1&scaling=scale-down-width&mode=design", type: "_blank"}] /%}
 
-## Related items
+## More patterns
 
-[Display of accounts](/articles/banking-display-accounts)
-
-[Display of transactions](/articles/banking-display-transactions)
-
-[Onboarding](/articles/banking-onboarding)
-
-[Things you should know](/articles/banking-tysk)
-
-[Back to Banking](/articles/banking)
+{% linkList
+   links=[{label: "All banking patterns", url: "/articles/banking", type: "_self"}] /%}
diff --git a/apps/site/src/content/articles/banking-onboarding.yaml b/apps/site/src/content/articles/banking-onboarding.yaml
@@ -1,7 +1,8 @@
 name: Onboarding
-author: Digital Experience
+thumbnail: {}
 image:
   src: >-
     https://res.cloudinary.com/westpac-gel/image/upload/v1695783106/cln15h6a4001wvd8i9rs50m3t.png
   height: 1080
-  width: 1920
+  width: 1920
+author: Digital Experience
diff --git a/apps/site/src/content/articles/banking-onboarding/content.mdoc b/apps/site/src/content/articles/banking-onboarding/content.mdoc
@@ -19,18 +19,12 @@ This pattern should be presented BEFORE the customer gets into the specific feat
 
 ## Looking for detailed designs?
 
-Here are links to detailed specifications and guidelines for the pattern in Figma. This information is only available to Westpac Group employees:
+Here are links to detailed specifications of the pattern in Figma. This information is only available to Westpac Group employees:
 
-[Pattern guidelines - Onboarding](https://www.figma.com/proto/DvJHR8VGazoB8d97ddy6Xf/DEEPEN-UX-Patterns-%26-guiding-principles?page-id=1112%3A36774&type=design&node-id=1508-24889&viewport=776%2C343%2C0.18&t=os1CQGTUR2I7cPxe-1&scaling=scale-down-width&starting-point-node-id=1508%3A24889&mode=design)
+{% linkList
+   links=[{label: "Pattern guidelines - Banking onboarding", url: "https://www.figma.com/proto/DvJHR8VGazoB8d97ddy6Xf/DEEPEN-UX-Patterns-%26-guiding-principles?page-id=1112%3A36774&type=design&node-id=1508-24889&viewport=776%2C343%2C0.18&t=os1CQGTUR2I7cPxe-1&scaling=scale-down-width&starting-point-node-id=1508%3A24889&mode=design", type: "_blank"}] /%}
 
-## Related items
+## More patterns
 
-[Display of accounts](/articles/banking-display-accounts)
-
-[Display of transactions](/articles/banking-display-transactions)
-
-[Hand offs](/articles/banking-hand-offs)
-
-[Things you should know](/articles/banking-tysk)
-
-[Back to Banking](/articles/banking)
+{% linkList
+   links=[{label: "All banking patterns", url: "/articles/banking", type: "_self"}] /%}
diff --git a/apps/site/src/content/articles/banking-tysk.yaml b/apps/site/src/content/articles/banking-tysk.yaml
@@ -1,7 +1,8 @@
 name: Things you should kn -
-author: Digital Experience
+thumbnail: {}
 image:
   src: >-
     https://res.cloudinary.com/westpac-gel/image/upload/v1695782900/cln15crdr001vvd8igdiy7fcz.png
   height: 1080
-  width: 1920
+  width: 1920
+author: Digital Experience
diff --git a/apps/site/src/content/articles/banking-tysk/content.mdoc b/apps/site/src/content/articles/banking-tysk/content.mdoc
@@ -23,18 +23,12 @@ This pattern is for customers who are at any stage of an experience. However, it
 
 ## Looking for detailed designs?
 
-Here are links to detailed specifications and guidelines for the pattern in Figma. This information is only available to Westpac Group employees:
+Here are links to detailed specifications of the pattern in Figma. This information is only available to Westpac Group employees:
 
-[Pattern guidelines - Things you should know](https://www.figma.com/proto/DvJHR8VGazoB8d97ddy6Xf/DEEPEN-UX-Patterns-%26-guiding-principles?page-id=1109%3A36771&type=design&node-id=1508-23333&viewport=163%2C45%2C0.14&t=UDz9r4BXRg16cv1U-1&scaling=scale-down-width)
+{% linkList
+   links=[{label: "Pattern guidelines - Things you should know", url: "https://www.figma.com/proto/DvJHR8VGazoB8d97ddy6Xf/DEEPEN-UX-Patterns-%26-guiding-principles?page-id=1109%3A36771&type=design&node-id=1508-23333&viewport=163%2C45%2C0.14&t=UDz9r4BXRg16cv1U-1&scaling=scale-down-width", type: "_blank"}] /%}
 
-## Related items
+## More patterns
 
-[Display of accounts](/articles/banking-display-accounts)
-
-[Display of transactions](/articles/banking-display-transactions)
-
-[Onboarding](/articles/banking-onboarding)
-
-[Hand offs](/articles/banking-hand-offs)
-
-[Back to Banking](/articles/banking)
+{% linkList
+   links=[{label: "All banking patterns", url: "/articles/banking", type: "_self"}] /%}
diff --git a/apps/site/src/content/articles/banking.yaml b/apps/site/src/content/articles/banking.yaml
@@ -8,9 +8,10 @@ description: >-
   compliance commitments, and create consistency across our digital channels. 
   By using these patterns, projects can replicate what works, so there’s no need
   to reinvent the wheel.
-author: Digital Experience
+thumbnail: {}
 image:
   src: >-
     https://res.cloudinary.com/westpac-gel/image/upload/v1695868279/cln2k6p0p0025vd8iauie3l0o.png
   height: 1080
-  width: 1920
+  width: 1920
+author: Digital Experience
diff --git a/apps/site/src/content/articles/banking/content.mdoc b/apps/site/src/content/articles/banking/content.mdoc
@@ -1,6 +1,6 @@
-{% articleBodyImage 
-    image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1695871389/cln2m1do10026vd8i9uf66u3a.png", alt: "orginations", height: 1800, width: 1852} 
-    type="body" /%}
+{% articleBodyImage
+   image={src: "https://res.cloudinary.com/westpac-gel/image/upload/v1695871389/cln2m1do10026vd8i9uf66u3a.png", alt: "orginations", height: 1800, width: 1852}
+   type="body" /%}
 
 By reducing re-work we can achieve increased speed to market and more consistent, simple experiences for our customers, leading to greater satisfaction with the Bank. We support our customers to get what they need done when they need to do it, simply and efficiently.&nbsp;
 
@@ -24,11 +24,7 @@ Provide meaningful financial insights to empower customers to make more informed
 
 Support customers to take control of preferences and customise their banking experience.
 
-## Getting support
-
-[How to get support and have your work reviewed.](https://www.figma.com/proto/XCsYG5gUYfeFQFi2lRiKJD/GEL-Patterns---Graphics?page-id=1%3A14811&type=design&node-id=103-14210&viewport=3875%2C1658%2C0.25&t=FxDW9hxQavw78gve-1&scaling=scale-down-width&mode=design)
-
-## Related items
+### UX patterns
 
 [Display of accounts](/articles/banking-display-accounts)
 
@@ -39,3 +35,7 @@ Support customers to take control of preferences and customise their banking exp
 [Hand offs](/articles/banking-hand-offs)
 
 [Things you should know](/articles/banking-tysk)
+
+## Getting support
+
+[How to get support and have your work reviewed.](https://www.figma.com/proto/XCsYG5gUYfeFQFi2lRiKJD/GEL-Patterns---Graphics?page-id=1%3A14811&type=design&node-id=103-14210&viewport=3875%2C1658%2C0.25&t=FxDW9hxQavw78gve-1&scaling=scale-down-width&mode=design)
diff --git a/apps/site/src/content/articles/notifications-push/content.mdoc b/apps/site/src/content/articles/notifications-push/content.mdoc
@@ -12,7 +12,7 @@ Their immediacy and ability to grab attention means they can also assist in the
 
 **Call to action** – Give the customer the confidence to act.
 
-### Why do we do it this way? 
+### Why do we do it this way?
 
 Our push notification design is grounded in delivering a user-centric experience that is not only effective but also respectful of our customers' preferences and needs.
 
@@ -28,24 +28,17 @@ We're providing a two-way communication channel, so that our customers can insta
 
 #### Know Me
 
-Addressing our customers by their names is a fundamental aspect of our notification design, because you will be treating each customer as an individual as well as establishing a sense of familiarity and trust. 
+Addressing our customers by their names is a fundamental aspect of our notification design, because you will be treating each customer as an individual as well as establishing a sense of familiarity and trust.
 
 ### Where does it sit in the sequence?
 
 Push is the first notification type that we send. It is our first attempt to contact the customer.
 
 ### How do we want our customers to feel?
 
-“It's great that the Bank lets me know what I need to do to take care of my accounts and makes it easy to sort things out.” 
+“It's great that the Bank lets me know what I need to do to take care of my accounts and makes it easy to sort things out.”
 
-### Related items
+## More patterns
 
-[SMS](/articles/notifications-sms)
-
-[Splash](/articles/notifications-splash)
-
-[Secure message](/articles/notifications-secure-message)
-
-[Skinny banner](/articles/notifications-skinny-banner)
-
-[Notifications](/articles/notifications)
+{% linkList
+   links=[{label: "All notifications patterns", url: "/articles/notifications", type: "_self"}] /%}
diff --git a/apps/site/src/content/articles/notifications-secure-message/content.mdoc b/apps/site/src/content/articles/notifications-secure-message/content.mdoc
@@ -8,11 +8,11 @@ Use this pattern to ensure secure, confidential, and convenient communication be
 
 Some data is pulled dynamically to display as part of the message.
 
-### Why do we do it this way? 
+### Why do we do it this way?
 
 #### Brilliantly simple
 
-We provide a clear and concise message with relevant action to make engagement simple for our customers. 
+We provide a clear and concise message with relevant action to make engagement simple for our customers.
 
 #### Promotes peace of mind
 
@@ -24,20 +24,13 @@ It ensures that notifications are part of a coherent user experience, with consi
 
 ### Where does it sit in the sequence?
 
-Secure messages are typically used after a Push Notification as confirmation or follow-up. 
+Secure messages are typically used after a Push Notification as confirmation or follow-up.
 
 ### How do we want our customers to feel?
 
 "It’s easy to understand what’s happening with my accounts and to find the really important notifications I’ve been sent."
 
-### Related items
+## More patterns
 
-[Push](/articles/notifications-push)
-
-[SMS](/articles/notifications-sms)
-
-[Splash](/articles/notifications-splash)
-
-[Skinny banner](/articles/notifications-skinny-banner)
-
-[Notifications](/articles/notifications)
+{% linkList
+   links=[{label: "All notifications patterns", url: "/articles/notifications", type: "_self"}] /%}