From bc36b644c5a0919ad0a2437b24506432f7333e0f Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 25 Sep 2024 11:12:59 +1000 Subject: [PATCH 01/92] Update src/content/design-system/guides-loading --- .../design-system/guides-loading/accessibilityDemo.mdoc | 0 .../src/content/design-system/guides-loading/index.yaml | 8 ++++++++ .../design-system/guides-loading/relatedArticles.mdoc | 0 3 files changed, 8 insertions(+) create mode 100644 apps/site/src/content/design-system/guides-loading/accessibilityDemo.mdoc create mode 100644 apps/site/src/content/design-system/guides-loading/index.yaml create mode 100644 apps/site/src/content/design-system/guides-loading/relatedArticles.mdoc diff --git a/apps/site/src/content/design-system/guides-loading/accessibilityDemo.mdoc b/apps/site/src/content/design-system/guides-loading/accessibilityDemo.mdoc new file mode 100644 index 000000000..e69de29bb diff --git a/apps/site/src/content/design-system/guides-loading/index.yaml b/apps/site/src/content/design-system/guides-loading/index.yaml new file mode 100644 index 000000000..b1ce09ee9 --- /dev/null +++ b/apps/site/src/content/design-system/guides-loading/index.yaml @@ -0,0 +1,8 @@ +name: guides/loading +namedExport: + discriminant: false +excludeFromNavbar: false +design: [] +accessibility: [] +relatedComponents: [] +code: [] diff --git a/apps/site/src/content/design-system/guides-loading/relatedArticles.mdoc b/apps/site/src/content/design-system/guides-loading/relatedArticles.mdoc new file mode 100644 index 000000000..e69de29bb From 73ee6e25aa91ec3fe191431d00a29a20b2cdc657 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 25 Sep 2024 11:13:43 +1000 Subject: [PATCH 02/92] Update src/content/design-system/guides/loading --- .../{guides-loading => guides/loading}/accessibilityDemo.mdoc | 0 .../design-system/{guides-loading => guides/loading}/index.yaml | 2 +- .../{guides-loading => guides/loading}/relatedArticles.mdoc | 0 3 files changed, 1 insertion(+), 1 deletion(-) rename apps/site/src/content/design-system/{guides-loading => guides/loading}/accessibilityDemo.mdoc (100%) rename apps/site/src/content/design-system/{guides-loading => guides/loading}/index.yaml (85%) rename apps/site/src/content/design-system/{guides-loading => guides/loading}/relatedArticles.mdoc (100%) diff --git a/apps/site/src/content/design-system/guides-loading/accessibilityDemo.mdoc b/apps/site/src/content/design-system/guides/loading/accessibilityDemo.mdoc similarity index 100% rename from apps/site/src/content/design-system/guides-loading/accessibilityDemo.mdoc rename to apps/site/src/content/design-system/guides/loading/accessibilityDemo.mdoc diff --git a/apps/site/src/content/design-system/guides-loading/index.yaml b/apps/site/src/content/design-system/guides/loading/index.yaml similarity index 85% rename from apps/site/src/content/design-system/guides-loading/index.yaml rename to apps/site/src/content/design-system/guides/loading/index.yaml index b1ce09ee9..793cd63b0 100644 --- a/apps/site/src/content/design-system/guides-loading/index.yaml +++ b/apps/site/src/content/design-system/guides/loading/index.yaml @@ -1,4 +1,4 @@ -name: guides/loading +name: Loading namedExport: discriminant: false excludeFromNavbar: false diff --git a/apps/site/src/content/design-system/guides-loading/relatedArticles.mdoc b/apps/site/src/content/design-system/guides/loading/relatedArticles.mdoc similarity index 100% rename from apps/site/src/content/design-system/guides-loading/relatedArticles.mdoc rename to apps/site/src/content/design-system/guides/loading/relatedArticles.mdoc From 9fc563183e5f775adc1c94284768e7e8a888f0c5 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 25 Sep 2024 11:16:38 +1000 Subject: [PATCH 03/92] Update src/content/design-system/guides/loading --- .../loading/design/introduction/content.mdoc | 1 + .../loading/design/loading-pages/content.mdoc | 7 ++++++ .../design/overlays-and-spinners/content.mdoc | 5 +++++ .../design-system/guides/loading/index.yaml | 22 ++++++++++++++++++- 4 files changed, 34 insertions(+), 1 deletion(-) create mode 100644 apps/site/src/content/design-system/guides/loading/design/introduction/content.mdoc create mode 100644 apps/site/src/content/design-system/guides/loading/design/loading-pages/content.mdoc create mode 100644 apps/site/src/content/design-system/guides/loading/design/overlays-and-spinners/content.mdoc diff --git a/apps/site/src/content/design-system/guides/loading/design/introduction/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/introduction/content.mdoc new file mode 100644 index 000000000..fcf3503b7 --- /dev/null +++ b/apps/site/src/content/design-system/guides/loading/design/introduction/content.mdoc @@ -0,0 +1 @@ +There are a few different ways to communicate that something is loading, the direction you take depends on the content you are waiting on. diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-pages/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-pages/content.mdoc new file mode 100644 index 000000000..d4d642fd1 --- /dev/null +++ b/apps/site/src/content/design-system/guides/loading/design/loading-pages/content.mdoc @@ -0,0 +1,7 @@ +Sometimes the system is waiting for an entire page or application to load. This might be because the process is transitioning to a new application. It could be because of the volume of content on the page or there might be a technical issue.\ +\ +When possible it is important to communicate with the user about what is happening and why they are waiting.\ +\ +When to show a loading page\ +\ +Short , Medium, long wait diff --git a/apps/site/src/content/design-system/guides/loading/design/overlays-and-spinners/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/overlays-and-spinners/content.mdoc new file mode 100644 index 000000000..b5a3dfb2a --- /dev/null +++ b/apps/site/src/content/design-system/guides/loading/design/overlays-and-spinners/content.mdoc @@ -0,0 +1,5 @@ +The most common page loading pattern is a simple, animated spinning icon on a page overlay. This approach prevents the user from interacting with the content on the screen by covering the entire page including headers, footers or any other navigation. The loading animation should be accompanied by messaging that explains what is happening and why the user is waiting. The message can change based on how long the system is taking. + +### Spinner vs animation + +Depending on the process or the audience, instead of showing a simple spinner, the system can display a more complex and potentially engaging animation. This is usually reserved for customer facing processes. These animations can be visually specific to the actual process. diff --git a/apps/site/src/content/design-system/guides/loading/index.yaml b/apps/site/src/content/design-system/guides/loading/index.yaml index 793cd63b0..12e5fc158 100644 --- a/apps/site/src/content/design-system/guides/loading/index.yaml +++ b/apps/site/src/content/design-system/guides/loading/index.yaml @@ -1,8 +1,28 @@ name: Loading +description: >- + Loading patterns are used when the system takes too long to display the + requested content on screen. This sort of communication is a critical aspect + of the user experience. It helps manage user expectations and reduce perceived + wait times. namedExport: discriminant: false excludeFromNavbar: false -design: [] +design: + - title: + name: Introduction + slug: introduction + noTitle: true + noDemo: false + - title: + name: Loading pages + slug: loading-pages + noTitle: false + noDemo: false + - title: + name: Overlays & spinners + slug: overlays-and-spinners + noTitle: false + noDemo: false accessibility: [] relatedComponents: [] code: [] From 6abb396bc70298ec8b059ba9a0870329e0244ffd Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 25 Sep 2024 13:27:02 +1000 Subject: [PATCH 04/92] Update src/content/design-system/guides/loading --- .../guides/loading/design/loading-pages/content.mdoc | 2 ++ apps/site/src/content/design-system/guides/loading/index.yaml | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-pages/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-pages/content.mdoc index d4d642fd1..34f343cc4 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-pages/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-pages/content.mdoc @@ -1,3 +1,5 @@ +## Loading pages + Sometimes the system is waiting for an entire page or application to load. This might be because the process is transitioning to a new application. It could be because of the volume of content on the page or there might be a technical issue.\ \ When possible it is important to communicate with the user about what is happening and why they are waiting.\ diff --git a/apps/site/src/content/design-system/guides/loading/index.yaml b/apps/site/src/content/design-system/guides/loading/index.yaml index 12e5fc158..111b3f1b5 100644 --- a/apps/site/src/content/design-system/guides/loading/index.yaml +++ b/apps/site/src/content/design-system/guides/loading/index.yaml @@ -16,7 +16,7 @@ design: - title: name: Loading pages slug: loading-pages - noTitle: false + noTitle: true noDemo: false - title: name: Overlays & spinners From 8683c9b90bc0f51e8fd8e9d23fdeba045a2ab4c6 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 25 Sep 2024 13:27:27 +1000 Subject: [PATCH 05/92] Update src/content/design-system/guides/loading --- .../guides/loading/design/introduction/content.mdoc | 1 - .../guides/loading/design/loading-pages/content.mdoc | 2 ++ .../site/src/content/design-system/guides/loading/index.yaml | 5 ----- 3 files changed, 2 insertions(+), 6 deletions(-) delete mode 100644 apps/site/src/content/design-system/guides/loading/design/introduction/content.mdoc diff --git a/apps/site/src/content/design-system/guides/loading/design/introduction/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/introduction/content.mdoc deleted file mode 100644 index fcf3503b7..000000000 --- a/apps/site/src/content/design-system/guides/loading/design/introduction/content.mdoc +++ /dev/null @@ -1 +0,0 @@ -There are a few different ways to communicate that something is loading, the direction you take depends on the content you are waiting on. diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-pages/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-pages/content.mdoc index 34f343cc4..2042a77d3 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-pages/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-pages/content.mdoc @@ -1,3 +1,5 @@ +There are a few different ways to communicate that something is loading, the direction you take depends on the content you are waiting on. + ## Loading pages Sometimes the system is waiting for an entire page or application to load. This might be because the process is transitioning to a new application. It could be because of the volume of content on the page or there might be a technical issue.\ diff --git a/apps/site/src/content/design-system/guides/loading/index.yaml b/apps/site/src/content/design-system/guides/loading/index.yaml index 111b3f1b5..e5835375f 100644 --- a/apps/site/src/content/design-system/guides/loading/index.yaml +++ b/apps/site/src/content/design-system/guides/loading/index.yaml @@ -8,11 +8,6 @@ namedExport: discriminant: false excludeFromNavbar: false design: - - title: - name: Introduction - slug: introduction - noTitle: true - noDemo: false - title: name: Loading pages slug: loading-pages From 32560f501cd8f4f104e42b0d7ac71b31fd5fbb12 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 25 Sep 2024 13:33:25 +1000 Subject: [PATCH 06/92] Update src/content/design-system/guides/loading --- .../content.mdoc | 16 +++++++++++++++- .../loading/design/loading-pages/content.mdoc | 11 ----------- .../design-system/guides/loading/index.yaml | 9 ++------- 3 files changed, 17 insertions(+), 19 deletions(-) rename apps/site/src/content/design-system/guides/loading/design/{overlays-and-spinners => loading-options}/content.mdoc (53%) delete mode 100644 apps/site/src/content/design-system/guides/loading/design/loading-pages/content.mdoc diff --git a/apps/site/src/content/design-system/guides/loading/design/overlays-and-spinners/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc similarity index 53% rename from apps/site/src/content/design-system/guides/loading/design/overlays-and-spinners/content.mdoc rename to apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc index b5a3dfb2a..33f7de7da 100644 --- a/apps/site/src/content/design-system/guides/loading/design/overlays-and-spinners/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc @@ -1,5 +1,19 @@ +There are a few different ways to communicate that something is loading, the direction you take depends on the content you are waiting on. + +### Loading pages + +Sometimes the system is waiting for an entire page or application to load. This might be because the process is transitioning to a new application. It could be because of the volume of content on the page or there might be a technical issue.\ +\ +When possible it is important to communicate with the user about what is happening and why they are waiting.\ +\ +When to show a loading page\ +\ +Short , Medium, long wait + +### Overlays & spinners + The most common page loading pattern is a simple, animated spinning icon on a page overlay. This approach prevents the user from interacting with the content on the screen by covering the entire page including headers, footers or any other navigation. The loading animation should be accompanied by messaging that explains what is happening and why the user is waiting. The message can change based on how long the system is taking. -### Spinner vs animation +#### Spinner vs animation Depending on the process or the audience, instead of showing a simple spinner, the system can display a more complex and potentially engaging animation. This is usually reserved for customer facing processes. These animations can be visually specific to the actual process. diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-pages/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-pages/content.mdoc deleted file mode 100644 index 2042a77d3..000000000 --- a/apps/site/src/content/design-system/guides/loading/design/loading-pages/content.mdoc +++ /dev/null @@ -1,11 +0,0 @@ -There are a few different ways to communicate that something is loading, the direction you take depends on the content you are waiting on. - -## Loading pages - -Sometimes the system is waiting for an entire page or application to load. This might be because the process is transitioning to a new application. It could be because of the volume of content on the page or there might be a technical issue.\ -\ -When possible it is important to communicate with the user about what is happening and why they are waiting.\ -\ -When to show a loading page\ -\ -Short , Medium, long wait diff --git a/apps/site/src/content/design-system/guides/loading/index.yaml b/apps/site/src/content/design-system/guides/loading/index.yaml index e5835375f..7ffa21347 100644 --- a/apps/site/src/content/design-system/guides/loading/index.yaml +++ b/apps/site/src/content/design-system/guides/loading/index.yaml @@ -9,13 +9,8 @@ namedExport: excludeFromNavbar: false design: - title: - name: Loading pages - slug: loading-pages - noTitle: true - noDemo: false - - title: - name: Overlays & spinners - slug: overlays-and-spinners + name: Loading options + slug: loading-options noTitle: false noDemo: false accessibility: [] From 0479ccd805e570c2d77b941b710b01b834806bea Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 25 Sep 2024 13:37:24 +1000 Subject: [PATCH 07/92] Update src/content/design-system/guides/loading --- .../guides/loading/design/loading-options/content.mdoc | 6 +----- .../src/content/design-system/guides/loading/index.yaml | 2 +- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc index 33f7de7da..655602b30 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc @@ -1,8 +1,4 @@ -There are a few different ways to communicate that something is loading, the direction you take depends on the content you are waiting on. - -### Loading pages - -Sometimes the system is waiting for an entire page or application to load. This might be because the process is transitioning to a new application. It could be because of the volume of content on the page or there might be a technical issue.\ +There are a few different ways to communicate that something is loading, the direction you take depends on the content you are waiting on. Sometimes the system is waiting for an entire page or application to load. This might be because the process is transitioning to a new application. It could be because of the volume of content on the page or there might be a technical issue. In these scenarios it can be important o disable the entire screen so the user cannot interact with it during the loading process, using an overlay can achieve this.\ \ When possible it is important to communicate with the user about what is happening and why they are waiting.\ \ diff --git a/apps/site/src/content/design-system/guides/loading/index.yaml b/apps/site/src/content/design-system/guides/loading/index.yaml index 7ffa21347..5ef0cbe89 100644 --- a/apps/site/src/content/design-system/guides/loading/index.yaml +++ b/apps/site/src/content/design-system/guides/loading/index.yaml @@ -9,7 +9,7 @@ namedExport: excludeFromNavbar: false design: - title: - name: Loading options + name: Page loading slug: loading-options noTitle: false noDemo: false From 00b56060a4bf5f27f3062d698829847dd328b79d Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 25 Sep 2024 13:42:00 +1000 Subject: [PATCH 08/92] Update src/content/design-system/guides/loading --- .../guides/loading/design/loading-options/content.mdoc | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc index 655602b30..328a6f0c4 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc @@ -1,4 +1,12 @@ -There are a few different ways to communicate that something is loading, the direction you take depends on the content you are waiting on. Sometimes the system is waiting for an entire page or application to load. This might be because the process is transitioning to a new application. It could be because of the volume of content on the page or there might be a technical issue. In these scenarios it can be important o disable the entire screen so the user cannot interact with it during the loading process, using an overlay can achieve this.\ +There are a few different ways to communicate that something is loading, the direction you take depends on the content you are waiting on. Page loading solutions are used when the system is waiting for an entire page or application to load. + +#### What is happening + +- The process is transitioning to a new application +- Large volume of content on the page +- Technical issue + +In these scenarios it can be important to disable the entire screen so the user cannot interact with it during the loading process, using an overlay can achieve this.\ \ When possible it is important to communicate with the user about what is happening and why they are waiting.\ \ From d484d3e254364ac1ad2931c608ff5cc54648d74f Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 25 Sep 2024 13:51:01 +1000 Subject: [PATCH 09/92] Update src/content/design-system/guides/loading --- .../design/loading-options/content.mdoc | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc index 328a6f0c4..631dada72 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc @@ -1,18 +1,16 @@ -There are a few different ways to communicate that something is loading, the direction you take depends on the content you are waiting on. Page loading solutions are used when the system is waiting for an entire page or application to load. +There are a few different ways to communicate that something is loading, the direction you take depends on the content you are waiting on. Page loading solutions are used when the system is waiting for an entire page or application to load. Loading pages should also communicate with the user about what is happening and why they are waiting. -#### What is happening +#### What could be happening - The process is transitioning to a new application -- Large volume of content on the page -- Technical issue - -In these scenarios it can be important to disable the entire screen so the user cannot interact with it during the loading process, using an overlay can achieve this.\ -\ -When possible it is important to communicate with the user about what is happening and why they are waiting.\ -\ -When to show a loading page\ -\ -Short , Medium, long wait +- The page is loading a very large volume of content +- There is a technical issue + +In these scenarios it can be important to disable the entire screen so the user cannot interact with it during the loading process, using an overlay can achieve this. + +#### When should you display it? + +Generally speaking you should display a loading page if the content has taken more than 1-2 seconds to display. ### Overlays & spinners From 57f14fc8af1de12f1815cc0f108b56a8b4d2b2f1 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 25 Sep 2024 13:54:53 +1000 Subject: [PATCH 10/92] Update src/content/design-system/guides/loading --- .../guides/loading/design/loading-options/content.mdoc | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc index 631dada72..9e44d41bb 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc @@ -1,6 +1,6 @@ There are a few different ways to communicate that something is loading, the direction you take depends on the content you are waiting on. Page loading solutions are used when the system is waiting for an entire page or application to load. Loading pages should also communicate with the user about what is happening and why they are waiting. -#### What could be happening +### What could be happening - The process is transitioning to a new application - The page is loading a very large volume of content @@ -8,14 +8,14 @@ There are a few different ways to communicate that something is loading, the dir In these scenarios it can be important to disable the entire screen so the user cannot interact with it during the loading process, using an overlay can achieve this. -#### When should you display it? +### When should you display it? -Generally speaking you should display a loading page if the content has taken more than 1-2 seconds to display. +Generally speaking, you should display a loading page if the content has taken more than 1-2 seconds to display. -### Overlays & spinners +### What does it look like? The most common page loading pattern is a simple, animated spinning icon on a page overlay. This approach prevents the user from interacting with the content on the screen by covering the entire page including headers, footers or any other navigation. The loading animation should be accompanied by messaging that explains what is happening and why the user is waiting. The message can change based on how long the system is taking. #### Spinner vs animation -Depending on the process or the audience, instead of showing a simple spinner, the system can display a more complex and potentially engaging animation. This is usually reserved for customer facing processes. These animations can be visually specific to the actual process. +Depending on the process or the audience, instead of showing a simple spinner, the system can display a more complex and potentially engaging animation. This is usually reserved for customer facing processes. These animations can be visually specific to the actual process, for example showing an animated letter if the system is sending a message. From becbd9681ffa87721105e5211ff98b2c170c5602 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 25 Sep 2024 13:55:57 +1000 Subject: [PATCH 11/92] Update src/content/design-system/guides/loading --- .../guides/loading/design/loading-options/content.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc index 9e44d41bb..87b0203b5 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc @@ -6,7 +6,7 @@ There are a few different ways to communicate that something is loading, the dir - The page is loading a very large volume of content - There is a technical issue -In these scenarios it can be important to disable the entire screen so the user cannot interact with it during the loading process, using an overlay can achieve this. +In these scenarios it can be important to disable the entire screen so the user cannot interact with it, using an overlay can achieve this. ### When should you display it? From f919f5207fc65565ee56c0252166db298cbe3e36 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 25 Sep 2024 13:56:34 +1000 Subject: [PATCH 12/92] Update src/content/design-system/guides/loading --- .../guides/loading/design/loading-options/content.mdoc | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc index 87b0203b5..a321c6d87 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc @@ -1,6 +1,6 @@ There are a few different ways to communicate that something is loading, the direction you take depends on the content you are waiting on. Page loading solutions are used when the system is waiting for an entire page or application to load. Loading pages should also communicate with the user about what is happening and why they are waiting. -### What could be happening +### Why - The process is transitioning to a new application - The page is loading a very large volume of content @@ -8,11 +8,11 @@ There are a few different ways to communicate that something is loading, the dir In these scenarios it can be important to disable the entire screen so the user cannot interact with it, using an overlay can achieve this. -### When should you display it? +### When Generally speaking, you should display a loading page if the content has taken more than 1-2 seconds to display. -### What does it look like? +### What The most common page loading pattern is a simple, animated spinning icon on a page overlay. This approach prevents the user from interacting with the content on the screen by covering the entire page including headers, footers or any other navigation. The loading animation should be accompanied by messaging that explains what is happening and why the user is waiting. The message can change based on how long the system is taking. From 15adb10349c9c23969dab5cb8a268b9372fecec3 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 25 Sep 2024 14:02:57 +1000 Subject: [PATCH 13/92] Update src/content/design-system/guides/loading --- .../loading/design/loading-options/content.mdoc | 2 +- .../guides/loading/design/page-section/content.mdoc | 13 +++++++++++++ .../content/design-system/guides/loading/index.yaml | 5 +++++ 3 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 apps/site/src/content/design-system/guides/loading/design/page-section/content.mdoc diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc index a321c6d87..eb5b0a3ce 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc @@ -10,7 +10,7 @@ In these scenarios it can be important to disable the entire screen so the user ### When -Generally speaking, you should display a loading page if the content has taken more than 1-2 seconds to display. +Display after about 1-2 seconds ### What diff --git a/apps/site/src/content/design-system/guides/loading/design/page-section/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/page-section/content.mdoc new file mode 100644 index 000000000..d6bda6818 --- /dev/null +++ b/apps/site/src/content/design-system/guides/loading/design/page-section/content.mdoc @@ -0,0 +1,13 @@ +Sometimes the system is waiting for only a portion of the page to load, when only a part of the page is still loading we use a Skeleton loader + +### Why + +- This is often because of an API call that is feeding content into the page. + +### When + +Display after about 200–500 milliseconds + +### What + +A Skeleton loader displays a simplified visual placeholder that mimics the layout of the final content. These can often have an animation layer added called a shimmer that creates movement and a bit of visual interest to show that something is happening. As the Skeleton loaders only obscure the areas that are taking a while to appear, it means the user still has access to interact with other areas of the page including navigation. diff --git a/apps/site/src/content/design-system/guides/loading/index.yaml b/apps/site/src/content/design-system/guides/loading/index.yaml index 5ef0cbe89..76b89f079 100644 --- a/apps/site/src/content/design-system/guides/loading/index.yaml +++ b/apps/site/src/content/design-system/guides/loading/index.yaml @@ -13,6 +13,11 @@ design: slug: loading-options noTitle: false noDemo: false + - title: + name: Page section + slug: page-section + noTitle: false + noDemo: false accessibility: [] relatedComponents: [] code: [] From e74b46ff64489a9987173d97d10472fcda83fa32 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 25 Sep 2024 14:04:00 +1000 Subject: [PATCH 14/92] Update src/content/design-system/guides/loading --- .../guides/loading/design/page-section/content.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/page-section/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/page-section/content.mdoc index d6bda6818..99d7a1b38 100644 --- a/apps/site/src/content/design-system/guides/loading/design/page-section/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/page-section/content.mdoc @@ -2,7 +2,7 @@ Sometimes the system is waiting for only a portion of the page to load, when onl ### Why -- This is often because of an API call that is feeding content into the page. +- Often because of an API call that is feeding content into the page. ### When From 18acc43d7056c43dbcb54819f98c44f10bbbbade Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 25 Sep 2024 14:06:55 +1000 Subject: [PATCH 15/92] Update src/content/design-system/guides/loading --- .../{page-section => page-section-loading}/content.mdoc | 0 apps/site/src/content/design-system/guides/loading/index.yaml | 4 ++-- 2 files changed, 2 insertions(+), 2 deletions(-) rename apps/site/src/content/design-system/guides/loading/design/{page-section => page-section-loading}/content.mdoc (100%) diff --git a/apps/site/src/content/design-system/guides/loading/design/page-section/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/page-section-loading/content.mdoc similarity index 100% rename from apps/site/src/content/design-system/guides/loading/design/page-section/content.mdoc rename to apps/site/src/content/design-system/guides/loading/design/page-section-loading/content.mdoc diff --git a/apps/site/src/content/design-system/guides/loading/index.yaml b/apps/site/src/content/design-system/guides/loading/index.yaml index 76b89f079..65cfd0929 100644 --- a/apps/site/src/content/design-system/guides/loading/index.yaml +++ b/apps/site/src/content/design-system/guides/loading/index.yaml @@ -14,8 +14,8 @@ design: noTitle: false noDemo: false - title: - name: Page section - slug: page-section + name: Page section loading + slug: page-section-loading noTitle: false noDemo: false accessibility: [] From 6686e3b94ee8c28d1c7bd6432c37c2629befb900 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 25 Sep 2024 14:10:34 +1000 Subject: [PATCH 16/92] Update src/content/design-system/guides/loading --- .../loading-within-components/content.mdoc | 16 ++++++++++++++++ .../design-system/guides/loading/index.yaml | 5 +++++ 2 files changed, 21 insertions(+) create mode 100644 apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc new file mode 100644 index 000000000..ebdcbf21d --- /dev/null +++ b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc @@ -0,0 +1,16 @@ +There are also scenarios where small, individual components require a loading state, for example buttons or input fields. For example if you have a button that initiates an action in the page or that you only want the user to click once, the button can have an animated spinner icon that appears once the button is clicked and disables the button until the action is completed.\ +\ +Another common pattern is loading within an input field for an auto-complete component. The user starts typing, if there is a lag while the system calls the back-end to retrieve the items the field can display an animated spinner until the action is completed. + +### Why + +- To indicate a process has initiated, like search +- To disable a button from being clicked more than once + +### When + +Display immediately + +### What + +When indicating loading for very small elements we use an animated icon embedded with the component. diff --git a/apps/site/src/content/design-system/guides/loading/index.yaml b/apps/site/src/content/design-system/guides/loading/index.yaml index 65cfd0929..d494dfd46 100644 --- a/apps/site/src/content/design-system/guides/loading/index.yaml +++ b/apps/site/src/content/design-system/guides/loading/index.yaml @@ -18,6 +18,11 @@ design: slug: page-section-loading noTitle: false noDemo: false + - title: + name: Loading within components + slug: loading-within-components + noTitle: false + noDemo: false accessibility: [] relatedComponents: [] code: [] From e1572f3b6d2cb60226d250ea276b230816076899 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 25 Sep 2024 14:14:30 +1000 Subject: [PATCH 17/92] Update src/content/design-system/guides/loading --- .../loading/design/loading-within-components/content.mdoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc index ebdcbf21d..4aaed0471 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc @@ -1,4 +1,4 @@ -There are also scenarios where small, individual components require a loading state, for example buttons or input fields. For example if you have a button that initiates an action in the page or that you only want the user to click once, the button can have an animated spinner icon that appears once the button is clicked and disables the button until the action is completed.\ +There are also scenarios where small, individual components require a loading state. For example if you have a button that initiates an action in the page or that you only want the user to click once, the button can have an animated spinner icon that appears once the button is clicked and disables the button until the action is completed.\ \ Another common pattern is loading within an input field for an auto-complete component. The user starts typing, if there is a lag while the system calls the back-end to retrieve the items the field can display an animated spinner until the action is completed. @@ -9,7 +9,7 @@ Another common pattern is loading within an input field for an auto-complete com ### When -Display immediately +Display immediately for disabling scenarios, or after about 200–500 milliseconds when loading. ### What From 6acfa00c38aec9971fe8ead68a5ebb883058657c Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 25 Sep 2024 14:16:55 +1000 Subject: [PATCH 18/92] Update src/content/design-system/guides/loading --- .../guides/loading/design/loading-options/content.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc index eb5b0a3ce..3d813e306 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc @@ -18,4 +18,4 @@ The most common page loading pattern is a simple, animated spinning icon on a pa #### Spinner vs animation -Depending on the process or the audience, instead of showing a simple spinner, the system can display a more complex and potentially engaging animation. This is usually reserved for customer facing processes. These animations can be visually specific to the actual process, for example showing an animated letter if the system is sending a message. +Depending on the process or the audience, instead of showing a simple spinner, we can take the opportunity to insert a brand moment by using a more complex, branded and potentially engaging animation. These are usually reserved for customer facing processes. These animations can be visually specific to the actual process, for example showing an animated letter if the system is sending a message. From 4fa057d52343b2a946ad37c7b5f601947b5e07f6 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 25 Sep 2024 14:19:01 +1000 Subject: [PATCH 19/92] Update src/content/design-system/guides/loading --- .../guides/loading/design/page-section-loading/content.mdoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/page-section-loading/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/page-section-loading/content.mdoc index 99d7a1b38..6d9d6b237 100644 --- a/apps/site/src/content/design-system/guides/loading/design/page-section-loading/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/page-section-loading/content.mdoc @@ -2,7 +2,7 @@ Sometimes the system is waiting for only a portion of the page to load, when onl ### Why -- Often because of an API call that is feeding content into the page. +- Often because of the time it could take for an API to load. ### When @@ -10,4 +10,4 @@ Display after about 200–500 milliseconds ### What -A Skeleton loader displays a simplified visual placeholder that mimics the layout of the final content. These can often have an animation layer added called a shimmer that creates movement and a bit of visual interest to show that something is happening. As the Skeleton loaders only obscure the areas that are taking a while to appear, it means the user still has access to interact with other areas of the page including navigation. +A Skeleton loader displays a very simplified visual placeholder that mimics the layout of the final content in an abstract and non-literal way. These can often have an animation layer added called a shimmer that creates movement and a bit of visual interest to show that something is happening. As the Skeleton loaders only obscure the areas that are taking a while to appear, it means the user still has access to interact with other areas of the page including navigation. From 05824240fd4de73b07c7fce47e4c3937546c9c4c Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 25 Sep 2024 14:21:36 +1000 Subject: [PATCH 20/92] Update src/content/design-system/guides/loading --- .../guides/loading/design/loading-options/content.mdoc | 8 ++++++++ .../loading/design/loading-within-components/content.mdoc | 8 ++++++++ .../loading/design/page-section-loading/content.mdoc | 8 ++++++++ 3 files changed, 24 insertions(+) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc index 3d813e306..982cb7c50 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc @@ -19,3 +19,11 @@ The most common page loading pattern is a simple, animated spinning icon on a pa #### Spinner vs animation Depending on the process or the audience, instead of showing a simple spinner, we can take the opportunity to insert a brand moment by using a more complex, branded and potentially engaging animation. These are usually reserved for customer facing processes. These animations can be visually specific to the actual process, for example showing an animated letter if the system is sending a message. + +### Pattern + +[Link to page loading overlay pattern?](#) + +### Component + +[Link to spinner component?](#) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc index 4aaed0471..283dab423 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc @@ -14,3 +14,11 @@ Display immediately for disabling scenarios, or after about 200–500 millisecon ### What When indicating loading for very small elements we use an animated icon embedded with the component. + +### Pattern + +[Link to input and button loading pattern?](#) + +[Link to Auto-complete pattern?](#) + +Or embed example in this page instead of linking out to them? diff --git a/apps/site/src/content/design-system/guides/loading/design/page-section-loading/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/page-section-loading/content.mdoc index 6d9d6b237..8490c0250 100644 --- a/apps/site/src/content/design-system/guides/loading/design/page-section-loading/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/page-section-loading/content.mdoc @@ -11,3 +11,11 @@ Display after about 200–500 milliseconds ### What A Skeleton loader displays a very simplified visual placeholder that mimics the layout of the final content in an abstract and non-literal way. These can often have an animation layer added called a shimmer that creates movement and a bit of visual interest to show that something is happening. As the Skeleton loaders only obscure the areas that are taking a while to appear, it means the user still has access to interact with other areas of the page including navigation. + +### Pattern + +[Link to skeleton pattern?](#) + +### Component + +[Link to Skeleton component?](#) From a0728cb8698eee36eede5cbca2baac3a8da8a704 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 25 Sep 2024 14:23:40 +1000 Subject: [PATCH 21/92] Update src/content/design-system/guides/loading --- .../guides/loading/design/loading-options/content.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc index 982cb7c50..9a5e99294 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc @@ -26,4 +26,4 @@ Depending on the process or the audience, instead of showing a simple spinner, w ### Component -[Link to spinner component?](#) +[Progress indicator](/components/progress-indicator) (Spinner) From 95fcfd03f4d2e63d6a0636a8e032714ac2ac149e Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 25 Sep 2024 16:14:29 +1000 Subject: [PATCH 22/92] Update src/content/design-system/components/progress-indicator --- .../design/progress-indicator/content.mdoc | 38 ++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/components/progress-indicator/design/progress-indicator/content.mdoc b/apps/site/src/content/design-system/components/progress-indicator/design/progress-indicator/content.mdoc index 8335bb1c1..9aa908308 100644 --- a/apps/site/src/content/design-system/components/progress-indicator/design/progress-indicator/content.mdoc +++ b/apps/site/src/content/design-system/components/progress-indicator/design/progress-indicator/content.mdoc @@ -1,5 +1,41 @@ +### Default + +Use this progress indicator to show a process is running. + ```tsx () => { - return ; + return ( +
+ +
+ ); +} +``` + +### Sizes + +The indicator comes in various sizes (Xs, Sm, Md, Lg and Xl) suitable for buttons, fields, or full-page loading. + +```tsx +() => { + return ( +
+ {(['xsmall', 'small', 'medium', 'large', 'xlarge'] as const).map(size => ( + + ))} +
+ ); }; ``` + +### Dark backgrounds + +The indicator can appear white for use on dark backgrounds. + +```tsx +() => { + return
+ )} +
; +} +``` From 82d92fe1f6ff4f115680dd75ad76f42f005fd6d7 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 25 Sep 2024 16:16:32 +1000 Subject: [PATCH 23/92] Update src/content/design-system/components/progress-indicator --- .../colour-impairment-demonstration/content.mdoc | 3 --- .../code/development-examples/content.mdoc | 8 ++++---- .../progress-indicator/design/dos-and-donts/content.mdoc | 0 .../design/user-experience/content.mdoc | 1 + .../progress-indicator/design/visual-design/content.mdoc | 1 + .../design/where-is-this-available/content.mdoc | 8 ++++++++ .../components/progress-indicator/index.yaml | 7 ++----- 7 files changed, 16 insertions(+), 12 deletions(-) delete mode 100644 apps/site/src/content/design-system/components/progress-indicator/accessibility/colour-impairment-demonstration/content.mdoc delete mode 100644 apps/site/src/content/design-system/components/progress-indicator/design/dos-and-donts/content.mdoc create mode 100644 apps/site/src/content/design-system/components/progress-indicator/design/where-is-this-available/content.mdoc diff --git a/apps/site/src/content/design-system/components/progress-indicator/accessibility/colour-impairment-demonstration/content.mdoc b/apps/site/src/content/design-system/components/progress-indicator/accessibility/colour-impairment-demonstration/content.mdoc deleted file mode 100644 index 8cbe95006..000000000 --- a/apps/site/src/content/design-system/components/progress-indicator/accessibility/colour-impairment-demonstration/content.mdoc +++ /dev/null @@ -1,3 +0,0 @@ -{% shortCode name="accessibility-colour-impairment" /%} - -{% accessibilityDemo /%} diff --git a/apps/site/src/content/design-system/components/progress-indicator/code/development-examples/content.mdoc b/apps/site/src/content/design-system/components/progress-indicator/code/development-examples/content.mdoc index cb55f6746..8c2e9f2c2 100644 --- a/apps/site/src/content/design-system/components/progress-indicator/code/development-examples/content.mdoc +++ b/apps/site/src/content/design-system/components/progress-indicator/code/development-examples/content.mdoc @@ -1,4 +1,4 @@ -### Progress Indicator +### Progress indicator ```tsx () => { @@ -6,7 +6,7 @@ }; ``` -### Progress Indicator Sizes +### Sizes ```tsx () => { @@ -20,14 +20,14 @@ }; ``` -### Inverted Progress Indicator +### Dark background ```tsx () => { return (
{(['xsmall', 'small', 'medium', 'large', 'xlarge'] as const).map(size => ( - + ))}
); diff --git a/apps/site/src/content/design-system/components/progress-indicator/design/dos-and-donts/content.mdoc b/apps/site/src/content/design-system/components/progress-indicator/design/dos-and-donts/content.mdoc deleted file mode 100644 index e69de29bb..000000000 diff --git a/apps/site/src/content/design-system/components/progress-indicator/design/user-experience/content.mdoc b/apps/site/src/content/design-system/components/progress-indicator/design/user-experience/content.mdoc index e69de29bb..4d3360375 100644 --- a/apps/site/src/content/design-system/components/progress-indicator/design/user-experience/content.mdoc +++ b/apps/site/src/content/design-system/components/progress-indicator/design/user-experience/content.mdoc @@ -0,0 +1 @@ +Use this component within loading patterns. Predominantly the user experience direction is dictated by the pattern that contains it. diff --git a/apps/site/src/content/design-system/components/progress-indicator/design/visual-design/content.mdoc b/apps/site/src/content/design-system/components/progress-indicator/design/visual-design/content.mdoc index e69de29bb..0fd7338e3 100644 --- a/apps/site/src/content/design-system/components/progress-indicator/design/visual-design/content.mdoc +++ b/apps/site/src/content/design-system/components/progress-indicator/design/visual-design/content.mdoc @@ -0,0 +1 @@ +Simplicity is the key design requirement for this component. It has an intentional minimal form and simple animation, just enough to capture the essence of its meaning. This ensures readability and clarity even at small sizes. It also optimises the file size. diff --git a/apps/site/src/content/design-system/components/progress-indicator/design/where-is-this-available/content.mdoc b/apps/site/src/content/design-system/components/progress-indicator/design/where-is-this-available/content.mdoc new file mode 100644 index 000000000..7714c32df --- /dev/null +++ b/apps/site/src/content/design-system/components/progress-indicator/design/where-is-this-available/content.mdoc @@ -0,0 +1,8 @@ +{% shortCode name="where-is-this-available" /%} + +{% availabilityContent + availableGel="available" + availableMesh="available" + availableLegacyWdp="older-version-available" + alternativeMesh="Loader" + alternativeLegacyWdp="Loader" /%} diff --git a/apps/site/src/content/design-system/components/progress-indicator/index.yaml b/apps/site/src/content/design-system/components/progress-indicator/index.yaml index 6ec74ff6a..e66b68644 100644 --- a/apps/site/src/content/design-system/components/progress-indicator/index.yaml +++ b/apps/site/src/content/design-system/components/progress-indicator/index.yaml @@ -20,14 +20,11 @@ design: noTitle: false noDemo: false - title: - name: Dos and don’ts - slug: dos-and-donts + name: Where is this available? + slug: where-is-this-available noTitle: false noDemo: false accessibility: - - title: - name: Colour impairment demonstration - slug: colour-impairment-demonstration - title: name: Accessibility features slug: accessibility-features From c4844309dc8176b0173b4ebc1bd3ee646b876dfc Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 25 Sep 2024 16:27:27 +1000 Subject: [PATCH 24/92] Update src/content/design-system/components/progress-indicator --- .../design-system/components/progress-indicator/index.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/components/progress-indicator/index.yaml b/apps/site/src/content/design-system/components/progress-indicator/index.yaml index e66b68644..9d1247353 100644 --- a/apps/site/src/content/design-system/components/progress-indicator/index.yaml +++ b/apps/site/src/content/design-system/components/progress-indicator/index.yaml @@ -2,7 +2,7 @@ name: Progress indicator description: Progress indicators are used to show a state of loading. namedExport: discriminant: false -excludeFromNavbar: true +excludeFromNavbar: false design: - title: name: Progress indicator From b6e72a39437c8827b10237a5be5db09da059bef8 Mon Sep 17 00:00:00 2001 From: HZ991 Date: Thu, 26 Sep 2024 14:10:18 +1000 Subject: [PATCH 25/92] fix: testing deep-linking feature --- .../table-of-contents.component.tsx | 53 +++++++++++++++---- 1 file changed, 42 insertions(+), 11 deletions(-) diff --git a/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx b/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx index 2fa6df8ff..b078126d4 100644 --- a/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx +++ b/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx @@ -1,7 +1,7 @@ 'use client'; - import { List, ListItem } from '@westpac/ui'; -import { MouseEventHandler, useCallback } from 'react'; +import { usePathname, useRouter } from 'next/navigation'; +import { MouseEventHandler, useCallback, useEffect, useState } from 'react'; import { ArrowDownRightIcon } from '@/components/icons'; @@ -20,7 +20,7 @@ export function TableOfContents({ contents = [] }: TableOfContentsProps) { .join('-'); return ( - {title} + {title} ); })} @@ -37,17 +37,48 @@ const HEADER_HEIGHT = { const BREAKPOINT_MD = 768; function Link({ href, children }: { children?: React.ReactNode; href?: string }) { + const router = useRouter(); + const pathname = usePathname(); + const [scrollToHash, setScrollToHash] = useState(null); + + useEffect(() => { + if (scrollToHash) { + setTimeout(() => { + const viewport = window.innerWidth < BREAKPOINT_MD ? 'sm' : 'lg'; + const bodyRect = document.body.getBoundingClientRect(); + const elemRect = document?.querySelector(`#${scrollToHash}`)?.getBoundingClientRect(); + const offset = (elemRect?.top || 0) - bodyRect.top - HEADER_HEIGHT[viewport]; + + window?.scrollTo({ top: offset, behavior: 'smooth' }); + }, 500); + setScrollToHash(null); + } + }, [scrollToHash, pathname]); + const handleClick: MouseEventHandler = useCallback( - ev => { + async ev => { ev.preventDefault(); - const viewport = window.innerWidth < BREAKPOINT_MD ? 'sm' : 'lg'; - const bodyRect = document.body.getBoundingClientRect(), - elemRect = document?.querySelector(href || '')?.getBoundingClientRect(), - offset = (elemRect?.top || 0) - bodyRect.top - HEADER_HEIGHT[viewport]; + if (!href) return; - window?.scrollTo({ top: offset, behavior: 'smooth' }); + const [path, hash] = href.split('#'); + const currentPath = pathname; + + if (path === currentPath || !path) { + const viewport = window.innerWidth < BREAKPOINT_MD ? 'sm' : 'lg'; + const bodyRect = document.body.getBoundingClientRect(); + const elemRect = document?.querySelector(`#${hash}`)?.getBoundingClientRect(); + const offset = (elemRect?.top || 0) - bodyRect.top - HEADER_HEIGHT[viewport]; + + window?.scrollTo({ top: offset, behavior: 'smooth' }); + window.history.pushState(null, '', `#${hash}`); + } else { + router.prefetch(path); + setScrollToHash(hash); + await router.push(path); + // window.history.pushState(null, '', `#${hash}`); + } }, - [href], + [href, router, pathname], ); return ( @@ -55,4 +86,4 @@ function Link({ href, children }: { children?: React.ReactNode; href?: string }) {children} ); -} +} \ No newline at end of file From 3df78130e5984c013522a276f16caeb524f8540c Mon Sep 17 00:00:00 2001 From: HZ991 Date: Mon, 30 Sep 2024 12:07:27 +1000 Subject: [PATCH 26/92] fix: format --- .../table-of-contents.component.tsx | 40 +++++++++---------- 1 file changed, 18 insertions(+), 22 deletions(-) diff --git a/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx b/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx index b078126d4..15f6bed01 100644 --- a/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx +++ b/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx @@ -20,7 +20,7 @@ export function TableOfContents({ contents = [] }: TableOfContentsProps) { .join('-'); return ( - {title} + {title} ); })} @@ -36,49 +36,45 @@ const HEADER_HEIGHT = { const BREAKPOINT_MD = 768; -function Link({ href, children }: { children?: React.ReactNode; href?: string }) { +function Link({ href, children }: { children?: React.ReactNode; href: string }) { const router = useRouter(); const pathname = usePathname(); const [scrollToHash, setScrollToHash] = useState(null); + const [path, hash] = href.split('#'); + + const scrollToSection = useCallback(() => { + const viewport = window.innerWidth < BREAKPOINT_MD ? 'sm' : 'lg'; + const bodyRect = document.body.getBoundingClientRect(); + const elemRect = document?.querySelector(`#${hash}`)?.getBoundingClientRect(); + const offset = (elemRect?.top || 0) - bodyRect.top - HEADER_HEIGHT[viewport]; + + window?.scrollTo({ top: offset, behavior: 'smooth' }); + window.history.pushState(null, '', `#${hash}`); + }, [hash]); useEffect(() => { if (scrollToHash) { setTimeout(() => { - const viewport = window.innerWidth < BREAKPOINT_MD ? 'sm' : 'lg'; - const bodyRect = document.body.getBoundingClientRect(); - const elemRect = document?.querySelector(`#${scrollToHash}`)?.getBoundingClientRect(); - const offset = (elemRect?.top || 0) - bodyRect.top - HEADER_HEIGHT[viewport]; - - window?.scrollTo({ top: offset, behavior: 'smooth' }); + scrollToSection(); }, 500); setScrollToHash(null); } - }, [scrollToHash, pathname]); + }, [scrollToHash, pathname, scrollToSection]); const handleClick: MouseEventHandler = useCallback( async ev => { ev.preventDefault(); - if (!href) return; - - const [path, hash] = href.split('#'); const currentPath = pathname; if (path === currentPath || !path) { - const viewport = window.innerWidth < BREAKPOINT_MD ? 'sm' : 'lg'; - const bodyRect = document.body.getBoundingClientRect(); - const elemRect = document?.querySelector(`#${hash}`)?.getBoundingClientRect(); - const offset = (elemRect?.top || 0) - bodyRect.top - HEADER_HEIGHT[viewport]; - - window?.scrollTo({ top: offset, behavior: 'smooth' }); - window.history.pushState(null, '', `#${hash}`); + scrollToSection(); } else { router.prefetch(path); setScrollToHash(hash); await router.push(path); - // window.history.pushState(null, '', `#${hash}`); } }, - [href, router, pathname], + [path, hash, router, pathname, scrollToSection], ); return ( @@ -86,4 +82,4 @@ function Link({ href, children }: { children?: React.ReactNode; href?: string }) {children} ); -} \ No newline at end of file +} From 9c87144309da17a6ca084bd03fcecfb8c162511e Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Mon, 30 Sep 2024 15:56:18 +1000 Subject: [PATCH 27/92] Update src/content/design-system/guides/loading --- .../design/loading-options/content.mdoc | 24 +++++++++++++++---- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc index 9a5e99294..9d85dcc35 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc @@ -20,10 +20,24 @@ The most common page loading pattern is a simple, animated spinning icon on a pa Depending on the process or the audience, instead of showing a simple spinner, we can take the opportunity to insert a brand moment by using a more complex, branded and potentially engaging animation. These are usually reserved for customer facing processes. These animations can be visually specific to the actual process, for example showing an animated letter if the system is sending a message. -### Pattern - -[Link to page loading overlay pattern?](#) - -### Component +### Usage example + +Description of what will be displayed + +```jsx +() => { + const state = useOverlayTriggerState({}); + return ( + <> + + + + ); +}; +``` + +#### Components [Progress indicator](/components/progress-indicator) (Spinner) From 45369b1764fa7281a532248170dce50773772335 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Mon, 30 Sep 2024 16:00:32 +1000 Subject: [PATCH 28/92] Update src/content/design-system/guides/loading --- .../design/page-section-loading/content.mdoc | 28 ++++++++++++++----- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/page-section-loading/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/page-section-loading/content.mdoc index 8490c0250..3f976a412 100644 --- a/apps/site/src/content/design-system/guides/loading/design/page-section-loading/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/page-section-loading/content.mdoc @@ -12,10 +12,24 @@ Display after about 200–500 milliseconds A Skeleton loader displays a very simplified visual placeholder that mimics the layout of the final content in an abstract and non-literal way. These can often have an animation layer added called a shimmer that creates movement and a bit of visual interest to show that something is happening. As the Skeleton loaders only obscure the areas that are taking a while to appear, it means the user still has access to interact with other areas of the page including navigation. -### Pattern - -[Link to skeleton pattern?](#) - -### Component - -[Link to Skeleton component?](#) +### Usage example + +Showing examples of skeleton loading. Could we do an animated demo where the skeleton loading transitions to the actual UI? + +```jsx +() => { + const state = useOverlayTriggerState({}); + return ( + <> + + + + ); +}; +``` + +#### Components + +[Skeleton](#) From e1b9c015243e91c198dec298ca3f31cf812dc721 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Mon, 30 Sep 2024 16:02:18 +1000 Subject: [PATCH 29/92] Update src/content/design-system/guides/loading --- .../loading-within-components/content.mdoc | 29 ++++++++++++++----- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc index 283dab423..1caff76a6 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc @@ -15,10 +15,25 @@ Display immediately for disabling scenarios, or after about 200–500 millisecon When indicating loading for very small elements we use an animated icon embedded with the component. -### Pattern - -[Link to input and button loading pattern?](#) - -[Link to Auto-complete pattern?](#) - -Or embed example in this page instead of linking out to them? +### Usage example + +Description of what will be displayed + +```jsx +() => { + return
+ {(['large', 'medium', 'small'] as const).map(size => <> +

{size.charAt(0).toUpperCase() + size.slice(1)}

+
+ {(['primary', 'hero', 'faint'] as const).map(look => )} +
+ )} +
; +} +``` + +#### Components + +[Progress indicator](/components/progress-indicator) (Spinner) From e8d9aa5a0ae06a64622f612def2d276900c98b67 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Mon, 30 Sep 2024 16:04:37 +1000 Subject: [PATCH 30/92] Update src/content/design-system/guides/loading --- .../loading-within-components/content.mdoc | 39 +++++++++++++------ 1 file changed, 27 insertions(+), 12 deletions(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc index 1caff76a6..8d496b005 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc @@ -20,18 +20,33 @@ When indicating loading for very small elements we use an animated icon embedded Description of what will be displayed ```jsx -() => { - return
- {(['large', 'medium', 'small'] as const).map(size => <> -

{size.charAt(0).toUpperCase() + size.slice(1)}

-
- {(['primary', 'hero', 'faint'] as const).map(look => )} -
- )} -
; -} + + + }} after={{ + icon: ProgressIndicator + }}> + setInputValue(value)} value={inputValue} /> + + + + + + + + + ``` #### Components From 0a7454bd4f022d785f66d91f1aa0eb118cea4125 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Mon, 30 Sep 2024 16:05:14 +1000 Subject: [PATCH 31/92] Update src/content/design-system/guides/loading --- .../loading/design/loading-within-components/content.mdoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc index 8d496b005..2417a466b 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc @@ -20,7 +20,7 @@ When indicating loading for very small elements we use an animated icon embedded Description of what will be displayed ```jsx - + @@ -46,7 +46,7 @@ Description of what will be displayed > - + ``` #### Components From 4212fdd08b732e9b1ec77ee706d15ce2f5531253 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Mon, 30 Sep 2024 16:23:06 +1000 Subject: [PATCH 32/92] Update src/content/design-system/guides/loading --- .../loading-within-components/content.mdoc | 50 +++++++++---------- 1 file changed, 24 insertions(+), 26 deletions(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc index 2417a466b..ed537e6eb 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc @@ -20,32 +20,30 @@ When indicating loading for very small elements we use an animated icon embedded Description of what will be displayed ```jsx - - - }} after={{ - icon: ProgressIndicator - }}> - setInputValue(value)} value={inputValue} /> - - - - - - - - +() => { + const [inputValue, setInputValue] = useState(''); + const [validating, setValidating] = useState(false); + const [error, setError] = useState(); + const validate = useCallback(() => { + setValidating(true); + setError(undefined); + setTimeout(() => { + if (inputValue !== '647453') { + setError('Routing number not found'); + } + setValidating(false); + }, 1500); + }, [inputValue]); + return Check} errorMessage={error}> + setInputValue(value)} value={inputValue} /> + ; +} ``` From 0e462d99a476aa03ef9f4a33b6dda065e16c3081 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Mon, 30 Sep 2024 16:25:23 +1000 Subject: [PATCH 33/92] Update src/content/design-system/guides/loading --- .../loading/design/loading-within-components/content.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc index ed537e6eb..13e10acf0 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc @@ -34,7 +34,7 @@ Description of what will be displayed setValidating(false); }, 1500); }, [inputValue]); - return Check} errorMessage={error}> Date: Mon, 30 Sep 2024 16:26:34 +1000 Subject: [PATCH 34/92] Update src/content/design-system/guides/loading --- .../loading/design/loading-within-components/content.mdoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc index 13e10acf0..68e560fd8 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc @@ -34,9 +34,9 @@ Description of what will be displayed setValidating(false); }, 1500); }, [inputValue]); - return Check} errorMessage={error}> + } : } errorMessage={error}> Date: Mon, 30 Sep 2024 16:27:04 +1000 Subject: [PATCH 35/92] Update src/content/design-system/guides/loading --- .../loading/design/loading-within-components/content.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc index 68e560fd8..e39e028d7 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc @@ -35,7 +35,7 @@ Description of what will be displayed }, 1500); }, [inputValue]); return Validate} errorMessage={error}> Date: Mon, 30 Sep 2024 16:29:52 +1000 Subject: [PATCH 36/92] Update src/content/design-system/components/input-group --- .../components/input-group/design/add-ons/content.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/components/input-group/design/add-ons/content.mdoc b/apps/site/src/content/design-system/components/input-group/design/add-ons/content.mdoc index a7913af81..a3f7d2b6b 100644 --- a/apps/site/src/content/design-system/components/input-group/design/add-ons/content.mdoc +++ b/apps/site/src/content/design-system/components/input-group/design/add-ons/content.mdoc @@ -191,7 +191,7 @@ Add-on elements can be used either before or after an input, they can provide cl - Go}> + Go}> From db9f1049b702f08f9f4cb03f68edeb8f64f3f2f5 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Mon, 30 Sep 2024 16:31:26 +1000 Subject: [PATCH 37/92] Update src/content/design-system/guides/loading --- .../loading/design/loading-within-components/content.mdoc | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc index e39e028d7..939d8e21d 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc @@ -44,7 +44,9 @@ Description of what will be displayed }) => setInputValue(value)} value={inputValue} /> ; } - +
+ + ``` #### Components From e3ef022e6e73ef798626521d868c43bea2bf4a18 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Mon, 30 Sep 2024 16:33:07 +1000 Subject: [PATCH 38/92] Update src/content/design-system/guides/loading --- .../loading/design/loading-within-components/content.mdoc | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc index 939d8e21d..1fe060de5 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc @@ -21,6 +21,10 @@ Description of what will be displayed ```jsx () => { + const [value, setValue] = useState(0); + + return ( + const [inputValue, setInputValue] = useState(''); const [validating, setValidating] = useState(false); const [error, setError] = useState(); @@ -47,6 +51,9 @@ Description of what will be displayed
+
+ ); +}; ``` #### Components From 3bcc9c6b941df4326cc10eba89808e0dd8e428ba Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Mon, 30 Sep 2024 16:33:53 +1000 Subject: [PATCH 39/92] Update src/content/design-system/guides/loading --- .../loading/design/loading-within-components/content.mdoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc index 1fe060de5..3fa6ce84b 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc @@ -46,8 +46,8 @@ Description of what will be displayed value } }) => setInputValue(value)} value={inputValue} /> -
; -} + +
From 33768233fbf729b0366f6639eb9d5698ad846398 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Mon, 30 Sep 2024 16:37:24 +1000 Subject: [PATCH 40/92] Update src/content/design-system/guides/loading --- .../loading-within-components/content.mdoc | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc index 3fa6ce84b..eb0113ef3 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc @@ -21,10 +21,6 @@ Description of what will be displayed ```jsx () => { - const [value, setValue] = useState(0); - - return ( - const [inputValue, setInputValue] = useState(''); const [validating, setValidating] = useState(false); const [error, setError] = useState(); @@ -38,7 +34,7 @@ Description of what will be displayed setValidating(false); }, 1500); }, [inputValue]); - return Validate} errorMessage={error}> setInputValue(value)} value={inputValue} /> - - -
- - -
- ); -}; + ; +} ``` #### Components From d87cb93399e1957e2ca680c6946bc7408d108b62 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Mon, 30 Sep 2024 16:40:39 +1000 Subject: [PATCH 41/92] Update src/content/design-system/components/input-group --- .../components/input-group/design/supporting-text/content.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/components/input-group/design/supporting-text/content.mdoc b/apps/site/src/content/design-system/components/input-group/design/supporting-text/content.mdoc index 88bf5ad1c..3049d90cd 100644 --- a/apps/site/src/content/design-system/components/input-group/design/supporting-text/content.mdoc +++ b/apps/site/src/content/design-system/components/input-group/design/supporting-text/content.mdoc @@ -47,7 +47,7 @@ Supporting text sits below the field, it can be a character count, or validated Check} + after={validating ? { icon: ProgressIndicator } : } errorMessage={error} > setInputValue(value)} value={inputValue} /> From 962df0149d6c33819e24af2781876ae4a8cd6371 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Mon, 30 Sep 2024 16:41:27 +1000 Subject: [PATCH 42/92] Update src/content/design-system/guides/loading --- .../loading/design/loading-within-components/content.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc index eb0113ef3..32453d822 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc @@ -34,7 +34,7 @@ Description of what will be displayed setValidating(false); }, 1500); }, [inputValue]); - return Validate} errorMessage={error}> Date: Mon, 30 Sep 2024 16:46:47 +1000 Subject: [PATCH 43/92] Update src/content/design-system/guides/loading --- .../loading/design/loading-within-components/content.mdoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc index 32453d822..b4d91a147 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc @@ -34,7 +34,7 @@ Description of what will be displayed setValidating(false); }, 1500); }, [inputValue]); - return Validate} errorMessage={error}> Date: Mon, 30 Sep 2024 16:47:28 +1000 Subject: [PATCH 44/92] Update src/content/design-system/guides/loading --- .../loading/design/loading-within-components/content.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc index b4d91a147..be0eb864c 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc @@ -34,7 +34,7 @@ Description of what will be displayed setValidating(false); }, 1500); }, [inputValue]); - return Validate} errorMessage={error}> Date: Mon, 30 Sep 2024 16:48:47 +1000 Subject: [PATCH 45/92] Update src/content/design-system/guides/loading --- .../loading/design/loading-within-components/content.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc index be0eb864c..953e26abb 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc @@ -29,7 +29,7 @@ Description of what will be displayed setError(undefined); setTimeout(() => { if (inputValue !== '647453') { - setError('Routing number not found'); + setError('Now you have seen the Progress indicator within a small component.'); } setValidating(false); }, 1500); From d23d2b1f7f85ca08ee0e6fb6316012ebf7e8be31 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Mon, 30 Sep 2024 16:52:42 +1000 Subject: [PATCH 46/92] Update src/content/design-system/guides/loading --- .../loading-within-components/content.mdoc | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc index 953e26abb..0bdbf9122 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc @@ -46,6 +46,23 @@ Description of what will be displayed } ``` +#### Something else + +```jsx +() => { + return
+ {(['large', 'medium', 'small'] as const).map(size => <> +

{size.charAt(0).toUpperCase() + size.slice(1)}

+
+ {(['primary', 'hero', 'faint'] as const).map(look => )} +
+ )} +
; +} +``` + #### Components used [Progress indicator](/components/progress-indicator) (Spinner) From 0ca9187d0bf9b3c875c30b2cb9462a1daa21c962 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Mon, 30 Sep 2024 17:11:55 +1000 Subject: [PATCH 47/92] Update src/content/design-system/guides/loading --- apps/site/src/content/design-system/guides/loading/index.yaml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/guides/loading/index.yaml b/apps/site/src/content/design-system/guides/loading/index.yaml index d494dfd46..8ac59ad70 100644 --- a/apps/site/src/content/design-system/guides/loading/index.yaml +++ b/apps/site/src/content/design-system/guides/loading/index.yaml @@ -24,5 +24,7 @@ design: noTitle: false noDemo: false accessibility: [] -relatedComponents: [] +relatedComponents: + - title: Progress Indicator + slug: /components/progress-indicator code: [] From b789d5c2fd4c108ee2a7e8446584c930351cdf25 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Mon, 30 Sep 2024 17:19:25 +1000 Subject: [PATCH 48/92] Update src/content/design-system/guides/loading --- .../loading-within-components/content.mdoc | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc index 0bdbf9122..2ab0e281c 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc @@ -50,15 +50,13 @@ Description of what will be displayed ```jsx () => { - return
- {(['large', 'medium', 'small'] as const).map(size => <> -

{size.charAt(0).toUpperCase() + size.slice(1)}

-
- {(['primary', 'hero', 'faint'] as const).map(look => )} -
- )} + return
+ +
; } ``` From 9b003f6c8758d997e85ce142ea50290809287ee6 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Mon, 30 Sep 2024 17:20:13 +1000 Subject: [PATCH 49/92] Update src/content/design-system/guides/loading --- .../design/loading-within-components/content.mdoc | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc index 2ab0e281c..35f9651b0 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc @@ -15,9 +15,9 @@ Display immediately for disabling scenarios, or after about 200–500 millisecon When indicating loading for very small elements we use an animated icon embedded with the component. -### Usage example +### Usage examples -Description of what will be displayed +#### In-field ```jsx () => { @@ -46,7 +46,7 @@ Description of what will be displayed } ``` -#### Something else +#### In button ```jsx () => { @@ -60,7 +60,3 @@ Description of what will be displayed
; } ``` - -#### Components used - -[Progress indicator](/components/progress-indicator) (Spinner) From 783a15c51394e675f3a1eaa08995a276055d3100 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Mon, 30 Sep 2024 17:23:23 +1000 Subject: [PATCH 50/92] Update src/content/design-system/guides/loading --- .../guides/loading/design/loading-options/content.mdoc | 6 +----- .../loading/design/page-section-loading/content.mdoc | 8 ++------ 2 files changed, 3 insertions(+), 11 deletions(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc index 9d85dcc35..2a6b8c6b2 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc @@ -14,7 +14,7 @@ Display after about 1-2 seconds ### What -The most common page loading pattern is a simple, animated spinning icon on a page overlay. This approach prevents the user from interacting with the content on the screen by covering the entire page including headers, footers or any other navigation. The loading animation should be accompanied by messaging that explains what is happening and why the user is waiting. The message can change based on how long the system is taking. +The most common page loading pattern is a simple, animated [Progress Indicator](/components/progress-indicator) (or Spinner icon) on a page overlay. This approach prevents the user from interacting with the content on the screen by covering the entire page including headers, footers or any other navigation. The loading animation should be accompanied by messaging that explains what is happening and why the user is waiting. The message can change based on how long the system is taking. #### Spinner vs animation @@ -37,7 +37,3 @@ Description of what will be displayed ); }; ``` - -#### Components - -[Progress indicator](/components/progress-indicator) (Spinner) diff --git a/apps/site/src/content/design-system/guides/loading/design/page-section-loading/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/page-section-loading/content.mdoc index 3f976a412..569f0ad4e 100644 --- a/apps/site/src/content/design-system/guides/loading/design/page-section-loading/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/page-section-loading/content.mdoc @@ -1,4 +1,4 @@ -Sometimes the system is waiting for only a portion of the page to load, when only a part of the page is still loading we use a Skeleton loader +Sometimes the system is waiting for only a portion of the page to load, when only a part of the page is still loading we use a [Skeleton loader.](#) ### Why @@ -10,7 +10,7 @@ Display after about 200–500 milliseconds ### What -A Skeleton loader displays a very simplified visual placeholder that mimics the layout of the final content in an abstract and non-literal way. These can often have an animation layer added called a shimmer that creates movement and a bit of visual interest to show that something is happening. As the Skeleton loaders only obscure the areas that are taking a while to appear, it means the user still has access to interact with other areas of the page including navigation. +A [Skeleton loader](#) displays a very simplified visual placeholder that mimics the layout of the final content in an abstract and non-literal way. These can often have an animation layer added called a shimmer that creates movement and a bit of visual interest to show that something is happening. As the Skeleton loaders only obscure the areas that are taking a while to appear, it means the user still has access to interact with other areas of the page including navigation. ### Usage example @@ -29,7 +29,3 @@ Showing examples of skeleton loading. Could we do an animated demo where the ske ); }; ``` - -#### Components - -[Skeleton](#) From 3cc2a413657ada3d20e5bbcf6aae1a961186fb85 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Mon, 30 Sep 2024 17:24:42 +1000 Subject: [PATCH 51/92] Update src/content/design-system/guides/loading --- .../loading/design/loading-within-components/content.mdoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc index 35f9651b0..dd10591f0 100644 --- a/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc +++ b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc @@ -1,6 +1,6 @@ -There are also scenarios where small, individual components require a loading state. For example if you have a button that initiates an action in the page or that you only want the user to click once, the button can have an animated spinner icon that appears once the button is clicked and disables the button until the action is completed.\ +There are also scenarios where small, individual components require a loading state. For example if you have a button that initiates an action in the page or that you only want the user to click once, the button can have a [Progress Indicator](/components/progress-indicator) (or Spinner icon) that appears once the button is clicked and disables the button until the action is completed.\ \ -Another common pattern is loading within an input field for an auto-complete component. The user starts typing, if there is a lag while the system calls the back-end to retrieve the items the field can display an animated spinner until the action is completed. +Another common pattern is loading within an input field for an auto-complete component. The user starts typing, if there is a lag while the system calls the back-end to retrieve the items the field can display a [Progress Indicator](/components/progress-indicator) (or Spinner icon) until the action is completed. ### Why From 8d37b1b12d5f1803f1da418801f841554c8750a2 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Mon, 30 Sep 2024 17:25:19 +1000 Subject: [PATCH 52/92] Update src/content/design-system/guides/loading --- apps/site/src/content/design-system/guides/loading/index.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/guides/loading/index.yaml b/apps/site/src/content/design-system/guides/loading/index.yaml index 8ac59ad70..682c3c5c2 100644 --- a/apps/site/src/content/design-system/guides/loading/index.yaml +++ b/apps/site/src/content/design-system/guides/loading/index.yaml @@ -22,7 +22,7 @@ design: name: Loading within components slug: loading-within-components noTitle: false - noDemo: false + noDemo: true accessibility: [] relatedComponents: - title: Progress Indicator From d807bdc83f6f0efeb57fa0d58c5a4046d7341574 Mon Sep 17 00:00:00 2001 From: HZ991 Date: Tue, 1 Oct 2024 10:28:40 +1000 Subject: [PATCH 53/92] added guides --- apps/site/src/utils/format.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/site/src/utils/format.ts b/apps/site/src/utils/format.ts index fc3e81c20..53aaf26db 100644 --- a/apps/site/src/utils/format.ts +++ b/apps/site/src/utils/format.ts @@ -40,6 +40,7 @@ export function sortMenu(menuItems: Item[]) { 'get-started', 'foundation', 'components', + 'guides', 'patterns', 'accessibility', 'content', From 080ed7bc50613a0d8924761657200792c23ad721 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Tue, 1 Oct 2024 13:16:53 +1000 Subject: [PATCH 54/92] Update src/content/design-system/guides/loading --- apps/site/src/content/design-system/guides/loading/index.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/guides/loading/index.yaml b/apps/site/src/content/design-system/guides/loading/index.yaml index 682c3c5c2..d207aae85 100644 --- a/apps/site/src/content/design-system/guides/loading/index.yaml +++ b/apps/site/src/content/design-system/guides/loading/index.yaml @@ -6,7 +6,7 @@ description: >- wait times. namedExport: discriminant: false -excludeFromNavbar: false +excludeFromNavbar: true design: - title: name: Page loading From a610e551db35eb6612b592c0f5ce42be429a0d55 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Tue, 1 Oct 2024 13:44:29 +1000 Subject: [PATCH 55/92] Update src/content/design-system/guides/loading --- apps/site/src/content/design-system/guides/loading/index.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/guides/loading/index.yaml b/apps/site/src/content/design-system/guides/loading/index.yaml index d207aae85..682c3c5c2 100644 --- a/apps/site/src/content/design-system/guides/loading/index.yaml +++ b/apps/site/src/content/design-system/guides/loading/index.yaml @@ -6,7 +6,7 @@ description: >- wait times. namedExport: discriminant: false -excludeFromNavbar: true +excludeFromNavbar: false design: - title: name: Page loading From 96ccb0659b4954289f4a998f7192df6b87d36a92 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Tue, 1 Oct 2024 13:47:14 +1000 Subject: [PATCH 56/92] Update src/content/design-system/guides/help-text --- .../{patterns => guides}/help-text/accessibilityDemo.mdoc | 0 .../help-text/design/help-text-in-forms/content.mdoc | 0 .../help-text/design/using-icons-for-help/content.mdoc | 0 .../help-text/design/when-do-we-need-help-text/content.mdoc | 0 .../help-text/design/why-use-help-text/content.mdoc | 0 .../design-system/{patterns => guides}/help-text/index.yaml | 2 +- .../{patterns => guides}/help-text/relatedArticles.mdoc | 0 7 files changed, 1 insertion(+), 1 deletion(-) rename apps/site/src/content/design-system/{patterns => guides}/help-text/accessibilityDemo.mdoc (100%) rename apps/site/src/content/design-system/{patterns => guides}/help-text/design/help-text-in-forms/content.mdoc (100%) rename apps/site/src/content/design-system/{patterns => guides}/help-text/design/using-icons-for-help/content.mdoc (100%) rename apps/site/src/content/design-system/{patterns => guides}/help-text/design/when-do-we-need-help-text/content.mdoc (100%) rename apps/site/src/content/design-system/{patterns => guides}/help-text/design/why-use-help-text/content.mdoc (100%) rename apps/site/src/content/design-system/{patterns => guides}/help-text/index.yaml (98%) rename apps/site/src/content/design-system/{patterns => guides}/help-text/relatedArticles.mdoc (100%) diff --git a/apps/site/src/content/design-system/patterns/help-text/accessibilityDemo.mdoc b/apps/site/src/content/design-system/guides/help-text/accessibilityDemo.mdoc similarity index 100% rename from apps/site/src/content/design-system/patterns/help-text/accessibilityDemo.mdoc rename to apps/site/src/content/design-system/guides/help-text/accessibilityDemo.mdoc diff --git a/apps/site/src/content/design-system/patterns/help-text/design/help-text-in-forms/content.mdoc b/apps/site/src/content/design-system/guides/help-text/design/help-text-in-forms/content.mdoc similarity index 100% rename from apps/site/src/content/design-system/patterns/help-text/design/help-text-in-forms/content.mdoc rename to apps/site/src/content/design-system/guides/help-text/design/help-text-in-forms/content.mdoc diff --git a/apps/site/src/content/design-system/patterns/help-text/design/using-icons-for-help/content.mdoc b/apps/site/src/content/design-system/guides/help-text/design/using-icons-for-help/content.mdoc similarity index 100% rename from apps/site/src/content/design-system/patterns/help-text/design/using-icons-for-help/content.mdoc rename to apps/site/src/content/design-system/guides/help-text/design/using-icons-for-help/content.mdoc diff --git a/apps/site/src/content/design-system/patterns/help-text/design/when-do-we-need-help-text/content.mdoc b/apps/site/src/content/design-system/guides/help-text/design/when-do-we-need-help-text/content.mdoc similarity index 100% rename from apps/site/src/content/design-system/patterns/help-text/design/when-do-we-need-help-text/content.mdoc rename to apps/site/src/content/design-system/guides/help-text/design/when-do-we-need-help-text/content.mdoc diff --git a/apps/site/src/content/design-system/patterns/help-text/design/why-use-help-text/content.mdoc b/apps/site/src/content/design-system/guides/help-text/design/why-use-help-text/content.mdoc similarity index 100% rename from apps/site/src/content/design-system/patterns/help-text/design/why-use-help-text/content.mdoc rename to apps/site/src/content/design-system/guides/help-text/design/why-use-help-text/content.mdoc diff --git a/apps/site/src/content/design-system/patterns/help-text/index.yaml b/apps/site/src/content/design-system/guides/help-text/index.yaml similarity index 98% rename from apps/site/src/content/design-system/patterns/help-text/index.yaml rename to apps/site/src/content/design-system/guides/help-text/index.yaml index 4ee1053fa..facb5a31c 100644 --- a/apps/site/src/content/design-system/patterns/help-text/index.yaml +++ b/apps/site/src/content/design-system/guides/help-text/index.yaml @@ -1,4 +1,4 @@ -name: Help text +name: Help description: >- Clear communication is vital in the jargon and complexity filled industry of financial services. diff --git a/apps/site/src/content/design-system/patterns/help-text/relatedArticles.mdoc b/apps/site/src/content/design-system/guides/help-text/relatedArticles.mdoc similarity index 100% rename from apps/site/src/content/design-system/patterns/help-text/relatedArticles.mdoc rename to apps/site/src/content/design-system/guides/help-text/relatedArticles.mdoc From 7312e7509e569b7bc8f285221a06225c84e4c4e3 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Tue, 1 Oct 2024 13:47:43 +1000 Subject: [PATCH 57/92] Update src/content/design-system/guides/validation-and-error-messaging --- .../validation-and-error-messaging/accessibilityDemo.mdoc | 0 .../design/anatomy-of-an-error/content.mdoc | 0 .../design/error-triggers-and-display/content.mdoc | 0 .../design/writing-error-messages/content.mdoc | 0 .../validation-and-error-messaging/index.yaml | 0 .../validation-and-error-messaging/relatedArticles.mdoc | 0 6 files changed, 0 insertions(+), 0 deletions(-) rename apps/site/src/content/design-system/{patterns => guides}/validation-and-error-messaging/accessibilityDemo.mdoc (100%) rename apps/site/src/content/design-system/{patterns => guides}/validation-and-error-messaging/design/anatomy-of-an-error/content.mdoc (100%) rename apps/site/src/content/design-system/{patterns => guides}/validation-and-error-messaging/design/error-triggers-and-display/content.mdoc (100%) rename apps/site/src/content/design-system/{patterns => guides}/validation-and-error-messaging/design/writing-error-messages/content.mdoc (100%) rename apps/site/src/content/design-system/{patterns => guides}/validation-and-error-messaging/index.yaml (100%) rename apps/site/src/content/design-system/{patterns => guides}/validation-and-error-messaging/relatedArticles.mdoc (100%) diff --git a/apps/site/src/content/design-system/patterns/validation-and-error-messaging/accessibilityDemo.mdoc b/apps/site/src/content/design-system/guides/validation-and-error-messaging/accessibilityDemo.mdoc similarity index 100% rename from apps/site/src/content/design-system/patterns/validation-and-error-messaging/accessibilityDemo.mdoc rename to apps/site/src/content/design-system/guides/validation-and-error-messaging/accessibilityDemo.mdoc diff --git a/apps/site/src/content/design-system/patterns/validation-and-error-messaging/design/anatomy-of-an-error/content.mdoc b/apps/site/src/content/design-system/guides/validation-and-error-messaging/design/anatomy-of-an-error/content.mdoc similarity index 100% rename from apps/site/src/content/design-system/patterns/validation-and-error-messaging/design/anatomy-of-an-error/content.mdoc rename to apps/site/src/content/design-system/guides/validation-and-error-messaging/design/anatomy-of-an-error/content.mdoc diff --git a/apps/site/src/content/design-system/patterns/validation-and-error-messaging/design/error-triggers-and-display/content.mdoc b/apps/site/src/content/design-system/guides/validation-and-error-messaging/design/error-triggers-and-display/content.mdoc similarity index 100% rename from apps/site/src/content/design-system/patterns/validation-and-error-messaging/design/error-triggers-and-display/content.mdoc rename to apps/site/src/content/design-system/guides/validation-and-error-messaging/design/error-triggers-and-display/content.mdoc diff --git a/apps/site/src/content/design-system/patterns/validation-and-error-messaging/design/writing-error-messages/content.mdoc b/apps/site/src/content/design-system/guides/validation-and-error-messaging/design/writing-error-messages/content.mdoc similarity index 100% rename from apps/site/src/content/design-system/patterns/validation-and-error-messaging/design/writing-error-messages/content.mdoc rename to apps/site/src/content/design-system/guides/validation-and-error-messaging/design/writing-error-messages/content.mdoc diff --git a/apps/site/src/content/design-system/patterns/validation-and-error-messaging/index.yaml b/apps/site/src/content/design-system/guides/validation-and-error-messaging/index.yaml similarity index 100% rename from apps/site/src/content/design-system/patterns/validation-and-error-messaging/index.yaml rename to apps/site/src/content/design-system/guides/validation-and-error-messaging/index.yaml diff --git a/apps/site/src/content/design-system/patterns/validation-and-error-messaging/relatedArticles.mdoc b/apps/site/src/content/design-system/guides/validation-and-error-messaging/relatedArticles.mdoc similarity index 100% rename from apps/site/src/content/design-system/patterns/validation-and-error-messaging/relatedArticles.mdoc rename to apps/site/src/content/design-system/guides/validation-and-error-messaging/relatedArticles.mdoc From b1d41afed1edad5c348badadb3baf5c315608a45 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Tue, 1 Oct 2024 14:18:56 +1000 Subject: [PATCH 58/92] Update src/content/design-system/guides/loading --- apps/site/src/content/design-system/guides/loading/index.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/guides/loading/index.yaml b/apps/site/src/content/design-system/guides/loading/index.yaml index 682c3c5c2..d207aae85 100644 --- a/apps/site/src/content/design-system/guides/loading/index.yaml +++ b/apps/site/src/content/design-system/guides/loading/index.yaml @@ -6,7 +6,7 @@ description: >- wait times. namedExport: discriminant: false -excludeFromNavbar: false +excludeFromNavbar: true design: - title: name: Page loading From bc34de9ba1a3b7c4be2ad63fe79924ed63c23564 Mon Sep 17 00:00:00 2001 From: HZ991 Date: Wed, 2 Oct 2024 15:00:55 +1000 Subject: [PATCH 59/92] fix: added variable for DELAY_TIME_TO_SCROLL - removes magic number --- .../table-of-contents/table-of-contents.component.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx b/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx index 15f6bed01..3d8757c41 100644 --- a/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx +++ b/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx @@ -41,6 +41,7 @@ function Link({ href, children }: { children?: React.ReactNode; href: string }) const pathname = usePathname(); const [scrollToHash, setScrollToHash] = useState(null); const [path, hash] = href.split('#'); + const DELAY_TIME_TO_SCROLL = 500; const scrollToSection = useCallback(() => { const viewport = window.innerWidth < BREAKPOINT_MD ? 'sm' : 'lg'; @@ -56,7 +57,7 @@ function Link({ href, children }: { children?: React.ReactNode; href: string }) if (scrollToHash) { setTimeout(() => { scrollToSection(); - }, 500); + }, DELAY_TIME_TO_SCROLL); setScrollToHash(null); } }, [scrollToHash, pathname, scrollToSection]); From ade1b226c3a6ce019852e9b8dd056ed1b2805f1a Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 9 Oct 2024 15:34:23 +1100 Subject: [PATCH 60/92] Update src/content/design-system/components/footer --- .../footer/design/footer/content.mdoc | 32 ++++++++----------- 1 file changed, 13 insertions(+), 19 deletions(-) diff --git a/apps/site/src/content/design-system/components/footer/design/footer/content.mdoc b/apps/site/src/content/design-system/components/footer/design/footer/content.mdoc index 38848453c..dc74cfa7b 100644 --- a/apps/site/src/content/design-system/components/footer/design/footer/content.mdoc +++ b/apps/site/src/content/design-system/components/footer/design/footer/content.mdoc @@ -6,25 +6,19 @@ This is the basic footer component, the content should be project specific. brand="wbc" hideLogo > -
- -

- Our site and your transactions are secure. You can read our{' '} - - security information - - . © 2023 Westpac Banking Corporation ABN 33 007 457 141 AFSL and Australian credit licence 233714. -

+
+
+ +
+
+

+ Footer content goes here. +

+
From 6d9e8f21c48cb417f4262c7b9fb47f84792bfb78 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 9 Oct 2024 15:34:45 +1100 Subject: [PATCH 61/92] Update src/content/design-system/components/footer --- .../code/development-examples/content.mdoc | 25 ++++++++++--------- 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/apps/site/src/content/design-system/components/footer/code/development-examples/content.mdoc b/apps/site/src/content/design-system/components/footer/code/development-examples/content.mdoc index c8a367bdb..c0f6c21ae 100644 --- a/apps/site/src/content/design-system/components/footer/code/development-examples/content.mdoc +++ b/apps/site/src/content/design-system/components/footer/code/development-examples/content.mdoc @@ -6,18 +6,19 @@ brand="wbc" hideLogo > -
- -

- Footer content -

+
+
+ +
+
+

+ Footer content goes here. +

+
From 3de99c4fad817ed329ba7653682fe5c1116bdebe Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 9 Oct 2024 15:35:42 +1100 Subject: [PATCH 62/92] Update src/content/design-system/components/footer --- .../footer/design/where-is-this-available/content.mdoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/src/content/design-system/components/footer/design/where-is-this-available/content.mdoc b/apps/site/src/content/design-system/components/footer/design/where-is-this-available/content.mdoc index f70746aed..ffdea3491 100644 --- a/apps/site/src/content/design-system/components/footer/design/where-is-this-available/content.mdoc +++ b/apps/site/src/content/design-system/components/footer/design/where-is-this-available/content.mdoc @@ -2,5 +2,5 @@ {% availabilityContent availableGel="available" - availableMesh="available" - availableLegacyWdp="available" /%} + availableMesh="older-version-available" + availableLegacyWdp="older-version-available" /%} From 606f8baebb48b52caaf905a09fb5520fbf77ef75 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 9 Oct 2024 15:36:04 +1100 Subject: [PATCH 63/92] Update src/content/design-system/components/footer --- .../site/src/content/design-system/components/footer/index.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/components/footer/index.yaml b/apps/site/src/content/design-system/components/footer/index.yaml index b38169ddd..57c3023fe 100644 --- a/apps/site/src/content/design-system/components/footer/index.yaml +++ b/apps/site/src/content/design-system/components/footer/index.yaml @@ -5,7 +5,7 @@ description: >- they are in. namedExport: discriminant: false -excludeFromNavbar: true +excludeFromNavbar: false design: - title: name: Footer From 4e7b942e47f8328f56ee3755cb1c23785c0bd7ed Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 9 Oct 2024 17:00:14 +1100 Subject: [PATCH 64/92] Update src/content/design-system/foundation/font --- .../src/content/design-system/foundation/font/index.yaml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/site/src/content/design-system/foundation/font/index.yaml b/apps/site/src/content/design-system/foundation/font/index.yaml index 600c39e1a..a55957aad 100644 --- a/apps/site/src/content/design-system/foundation/font/index.yaml +++ b/apps/site/src/content/design-system/foundation/font/index.yaml @@ -15,17 +15,17 @@ design: name: Body font slug: body-font noTitle: false - noDemo: false + noDemo: true - title: name: Typographic scale slug: typographic-scale noTitle: false - noDemo: false + noDemo: true - title: name: Font weights slug: font-weights noTitle: false - noDemo: false + noDemo: true - title: name: Using fonts slug: using-fonts From b7dc4034ad28b572999833b861e35b6eaddf8520 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 9 Oct 2024 17:01:03 +1100 Subject: [PATCH 65/92] Update src/content/design-system/foundation/icon --- .../icon/design/where-is-this-available/content.mdoc | 4 ++-- .../site/src/content/design-system/foundation/icon/index.yaml | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/site/src/content/design-system/foundation/icon/design/where-is-this-available/content.mdoc b/apps/site/src/content/design-system/foundation/icon/design/where-is-this-available/content.mdoc index f70746aed..ffdea3491 100644 --- a/apps/site/src/content/design-system/foundation/icon/design/where-is-this-available/content.mdoc +++ b/apps/site/src/content/design-system/foundation/icon/design/where-is-this-available/content.mdoc @@ -2,5 +2,5 @@ {% availabilityContent availableGel="available" - availableMesh="available" - availableLegacyWdp="available" /%} + availableMesh="older-version-available" + availableLegacyWdp="older-version-available" /%} diff --git a/apps/site/src/content/design-system/foundation/icon/index.yaml b/apps/site/src/content/design-system/foundation/icon/index.yaml index 1313329cd..07d074cb9 100644 --- a/apps/site/src/content/design-system/foundation/icon/index.yaml +++ b/apps/site/src/content/design-system/foundation/icon/index.yaml @@ -16,12 +16,12 @@ design: name: Icon sizing slug: icon-sizing noTitle: false - noDemo: false + noDemo: true - title: name: Icon colours slug: icon-colours noTitle: false - noDemo: false + noDemo: true - title: name: User experience slug: user-experience From 19b422dc9bc59198e972d011492baac1df34c918 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 9 Oct 2024 17:01:57 +1100 Subject: [PATCH 66/92] Update src/content/design-system/foundation/layout/breakpoints --- .../design-system/foundation/layout/breakpoints/index.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/foundation/layout/breakpoints/index.yaml b/apps/site/src/content/design-system/foundation/layout/breakpoints/index.yaml index 8468fa32f..504bf86c0 100644 --- a/apps/site/src/content/design-system/foundation/layout/breakpoints/index.yaml +++ b/apps/site/src/content/design-system/foundation/layout/breakpoints/index.yaml @@ -10,7 +10,7 @@ design: name: Breakpoint tokens slug: breakpoint-tokens noTitle: false - noDemo: false + noDemo: true accessibility: - title: name: Accessibility features From a380e3cb1b5fafb66a22d67e46975023966eaf3c Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 9 Oct 2024 17:04:15 +1100 Subject: [PATCH 67/92] Update src/content/design-system/foundation/text-styling --- .../text-styling/design/visual-design/content.mdoc | 0 .../design-system/foundation/text-styling/index.yaml | 9 ++------- 2 files changed, 2 insertions(+), 7 deletions(-) delete mode 100644 apps/site/src/content/design-system/foundation/text-styling/design/visual-design/content.mdoc diff --git a/apps/site/src/content/design-system/foundation/text-styling/design/visual-design/content.mdoc b/apps/site/src/content/design-system/foundation/text-styling/design/visual-design/content.mdoc deleted file mode 100644 index e69de29bb..000000000 diff --git a/apps/site/src/content/design-system/foundation/text-styling/index.yaml b/apps/site/src/content/design-system/foundation/text-styling/index.yaml index 44dcb5add..77c3dd2ad 100644 --- a/apps/site/src/content/design-system/foundation/text-styling/index.yaml +++ b/apps/site/src/content/design-system/foundation/text-styling/index.yaml @@ -10,22 +10,17 @@ design: name: Editorial text styles slug: editorial-text-styles noTitle: false - noDemo: false + noDemo: true - title: name: Headings slug: headings noTitle: false - noDemo: false + noDemo: true - title: name: User experience slug: user-experience noTitle: false noDemo: false - - title: - name: Visual design - slug: visual-design - noTitle: false - noDemo: false - title: name: Where is this available? slug: where-is-this-available From d5be5b37702b0938bfe83a89b6900ea837d27748 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 9 Oct 2024 17:05:50 +1100 Subject: [PATCH 68/92] Update src/content/design-system/components/autocomplete --- .../design/where-is-this-available/content.mdoc | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/site/src/content/design-system/components/autocomplete/design/where-is-this-available/content.mdoc b/apps/site/src/content/design-system/components/autocomplete/design/where-is-this-available/content.mdoc index e0675fba7..f20bfde16 100644 --- a/apps/site/src/content/design-system/components/autocomplete/design/where-is-this-available/content.mdoc +++ b/apps/site/src/content/design-system/components/autocomplete/design/where-is-this-available/content.mdoc @@ -1,8 +1,8 @@ {% shortCode name="where-is-this-available" /%} {% availabilityContent - availableGel="available" - availableMesh="in-progress" - availableLegacyWdp="older-version-available" - alternativeMesh="Typeahead" - alternativeLegacyWdp="Typeahead" /%} + availableGel="available" + availableMesh="older-version-available" + availableLegacyWdp="older-version-available" + alternativeMesh="Typeahead" + alternativeLegacyWdp="Typeahead" /%} From 6cc8f6b68731cca8907f743c333f82e1d75afd45 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 9 Oct 2024 17:10:52 +1100 Subject: [PATCH 69/92] Update src/content/design-system/components/badge --- .../badge/design/where-is-this-available/content.mdoc | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/site/src/content/design-system/components/badge/design/where-is-this-available/content.mdoc b/apps/site/src/content/design-system/components/badge/design/where-is-this-available/content.mdoc index 903536d1f..ffdea3491 100644 --- a/apps/site/src/content/design-system/components/badge/design/where-is-this-available/content.mdoc +++ b/apps/site/src/content/design-system/components/badge/design/where-is-this-available/content.mdoc @@ -1,6 +1,6 @@ {% shortCode name="where-is-this-available" /%} {% availabilityContent - availableGel="available" - availableMesh="in-progress" - availableLegacyWdp="older-version-available" /%} + availableGel="available" + availableMesh="older-version-available" + availableLegacyWdp="older-version-available" /%} From bb8e393a58fc55b92afd80f133ea34b881f70ac7 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 9 Oct 2024 17:11:22 +1100 Subject: [PATCH 70/92] Update src/content/design-system/components/bottom-sheet --- .../bottom-sheet/design/where-is-this-available/content.mdoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/src/content/design-system/components/bottom-sheet/design/where-is-this-available/content.mdoc b/apps/site/src/content/design-system/components/bottom-sheet/design/where-is-this-available/content.mdoc index de3d593a9..db6184d95 100644 --- a/apps/site/src/content/design-system/components/bottom-sheet/design/where-is-this-available/content.mdoc +++ b/apps/site/src/content/design-system/components/bottom-sheet/design/where-is-this-available/content.mdoc @@ -2,5 +2,5 @@ {% availabilityContent availableGel="available" - availableMesh="in-progress" - availableLegacyWdp="older-version-available" /%} + availableMesh="unavailable" + availableLegacyWdp="unavailable" /%} From 0d7dc26a7ceb468fe1a454adfa68073d16533e51 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 9 Oct 2024 17:13:47 +1100 Subject: [PATCH 71/92] Update src/content/design-system/components/compacta --- .../compacta/design/where-is-this-available/content.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/components/compacta/design/where-is-this-available/content.mdoc b/apps/site/src/content/design-system/components/compacta/design/where-is-this-available/content.mdoc index de3d593a9..ffdea3491 100644 --- a/apps/site/src/content/design-system/components/compacta/design/where-is-this-available/content.mdoc +++ b/apps/site/src/content/design-system/components/compacta/design/where-is-this-available/content.mdoc @@ -2,5 +2,5 @@ {% availabilityContent availableGel="available" - availableMesh="in-progress" + availableMesh="older-version-available" availableLegacyWdp="older-version-available" /%} From 95644641020c4c27e3ef7a7b53422db69cb3a4ea Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 9 Oct 2024 17:15:14 +1100 Subject: [PATCH 72/92] Update src/content/design-system/components/flexi-cell --- .../flexi-cell/design/where-is-this-available/content.mdoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/src/content/design-system/components/flexi-cell/design/where-is-this-available/content.mdoc b/apps/site/src/content/design-system/components/flexi-cell/design/where-is-this-available/content.mdoc index de3d593a9..db6184d95 100644 --- a/apps/site/src/content/design-system/components/flexi-cell/design/where-is-this-available/content.mdoc +++ b/apps/site/src/content/design-system/components/flexi-cell/design/where-is-this-available/content.mdoc @@ -2,5 +2,5 @@ {% availabilityContent availableGel="available" - availableMesh="in-progress" - availableLegacyWdp="older-version-available" /%} + availableMesh="unavailable" + availableLegacyWdp="unavailable" /%} From 1adb7391a8519a7c57be7547e455f99937fe5d7a Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 9 Oct 2024 17:16:30 +1100 Subject: [PATCH 73/92] Update src/content/design-system/components/input-group --- .../input-group/design/where-is-this-available/content.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/components/input-group/design/where-is-this-available/content.mdoc b/apps/site/src/content/design-system/components/input-group/design/where-is-this-available/content.mdoc index de3d593a9..ffdea3491 100644 --- a/apps/site/src/content/design-system/components/input-group/design/where-is-this-available/content.mdoc +++ b/apps/site/src/content/design-system/components/input-group/design/where-is-this-available/content.mdoc @@ -2,5 +2,5 @@ {% availabilityContent availableGel="available" - availableMesh="in-progress" + availableMesh="older-version-available" availableLegacyWdp="older-version-available" /%} From cfcb2a5fbd160e75c6d26079146c4ea13596911f Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 9 Oct 2024 17:17:14 +1100 Subject: [PATCH 74/92] Update src/content/design-system/components/modal --- .../modal/design/where-is-this-available/content.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/components/modal/design/where-is-this-available/content.mdoc b/apps/site/src/content/design-system/components/modal/design/where-is-this-available/content.mdoc index de3d593a9..ffdea3491 100644 --- a/apps/site/src/content/design-system/components/modal/design/where-is-this-available/content.mdoc +++ b/apps/site/src/content/design-system/components/modal/design/where-is-this-available/content.mdoc @@ -2,5 +2,5 @@ {% availabilityContent availableGel="available" - availableMesh="in-progress" + availableMesh="older-version-available" availableLegacyWdp="older-version-available" /%} From dcfbc6a6caec3f8463bd9b57036aad9d4df5d3de Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 9 Oct 2024 17:18:32 +1100 Subject: [PATCH 75/92] Update src/content/design-system/components/repeater --- .../repeater/design/where-is-this-available/content.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/components/repeater/design/where-is-this-available/content.mdoc b/apps/site/src/content/design-system/components/repeater/design/where-is-this-available/content.mdoc index de3d593a9..ffdea3491 100644 --- a/apps/site/src/content/design-system/components/repeater/design/where-is-this-available/content.mdoc +++ b/apps/site/src/content/design-system/components/repeater/design/where-is-this-available/content.mdoc @@ -2,5 +2,5 @@ {% availabilityContent availableGel="available" - availableMesh="in-progress" + availableMesh="older-version-available" availableLegacyWdp="older-version-available" /%} From 8a123eccdce838cac469d2ed543fa0b2df7c2792 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 9 Oct 2024 17:20:41 +1100 Subject: [PATCH 76/92] Update src/content/design-system/guides/help-text --- .../src/content/design-system/guides/help-text/index.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/src/content/design-system/guides/help-text/index.yaml b/apps/site/src/content/design-system/guides/help-text/index.yaml index facb5a31c..82da49a2a 100644 --- a/apps/site/src/content/design-system/guides/help-text/index.yaml +++ b/apps/site/src/content/design-system/guides/help-text/index.yaml @@ -15,12 +15,12 @@ design: name: Help text in forms slug: help-text-in-forms noTitle: false - noDemo: false + noDemo: true - title: name: Using icons for help slug: using-icons-for-help noTitle: false - noDemo: false + noDemo: true - title: name: Why use help text slug: why-use-help-text From fa29d7ca2f8d7b000035751a7bc8dfccae74c56c Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 9 Oct 2024 17:26:29 +1100 Subject: [PATCH 77/92] Update src/content/design-system/content/guidelines/people-diversity --- .../people-diversity/design/people-diversity/content.mdoc | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/site/src/content/design-system/content/guidelines/people-diversity/design/people-diversity/content.mdoc b/apps/site/src/content/design-system/content/guidelines/people-diversity/design/people-diversity/content.mdoc index 862c4c2df..ff048ca56 100644 --- a/apps/site/src/content/design-system/content/guidelines/people-diversity/design/people-diversity/content.mdoc +++ b/apps/site/src/content/design-system/content/guidelines/people-diversity/design/people-diversity/content.mdoc @@ -41,8 +41,6 @@ Avoid defining people by their disability and aim for positive language. Try to keep holidays agnostic where possible. -For example: - ```jsx

For example:

From b388a7dafee4fbbd55b6b8f0541eb7b0c28c3419 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 9 Oct 2024 17:27:33 +1100 Subject: [PATCH 78/92] Update src/content/design-system/content/guidelines/punctuation-symbol --- .../punctuation-symbol/design/full-stops/content.mdoc | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/full-stops/content.mdoc b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/full-stops/content.mdoc index 5796f96a6..87a09d8f3 100644 --- a/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/full-stops/content.mdoc +++ b/apps/site/src/content/design-system/content/guidelines/punctuation-symbol/design/full-stops/content.mdoc @@ -12,8 +12,6 @@ Use full stops for sub-copy and body copy. *Note: You can use a full stop to break up a headline, but no full stop on the end.* -For example: - ```jsx

For example:

From fb23740ddd6c353b70a5b7acf4949accacfc1e40 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 9 Oct 2024 17:28:37 +1100 Subject: [PATCH 79/92] Update src/content/design-system/design-tokens --- .../design-system/design-tokens/accessibilityDemo.mdoc | 0 .../src/content/design-system/design-tokens/index.yaml | 9 ++++++++- .../design-system/design-tokens/relatedArticles.mdoc | 0 3 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 apps/site/src/content/design-system/design-tokens/accessibilityDemo.mdoc create mode 100644 apps/site/src/content/design-system/design-tokens/relatedArticles.mdoc diff --git a/apps/site/src/content/design-system/design-tokens/accessibilityDemo.mdoc b/apps/site/src/content/design-system/design-tokens/accessibilityDemo.mdoc new file mode 100644 index 000000000..e69de29bb diff --git a/apps/site/src/content/design-system/design-tokens/index.yaml b/apps/site/src/content/design-system/design-tokens/index.yaml index f65c2f60e..e9b58be15 100644 --- a/apps/site/src/content/design-system/design-tokens/index.yaml +++ b/apps/site/src/content/design-system/design-tokens/index.yaml @@ -1,9 +1,16 @@ name: Design tokens -description: Design tokens support us to share basic brand styling at the simplest level with any interface on any platform across the Bank. +description: >- + Design tokens support us to share basic brand styling at the simplest level + with any interface on any platform across the Bank. +namedExport: + discriminant: false +excludeFromNavbar: true design: - title: name: Main slug: main noTitle: true + noDemo: false accessibility: [] relatedComponents: [] +code: [] diff --git a/apps/site/src/content/design-system/design-tokens/relatedArticles.mdoc b/apps/site/src/content/design-system/design-tokens/relatedArticles.mdoc new file mode 100644 index 000000000..e69de29bb From b9404c2343b2448397b888dd2791fb253af07ad4 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 9 Oct 2024 17:32:18 +1100 Subject: [PATCH 80/92] Update src/content/design-system/content/guidelines/headings-subheading --- .../design/headings-subheadings/content.mdoc | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/apps/site/src/content/design-system/content/guidelines/headings-subheading/design/headings-subheadings/content.mdoc b/apps/site/src/content/design-system/content/guidelines/headings-subheading/design/headings-subheadings/content.mdoc index b49a151f9..234b44513 100644 --- a/apps/site/src/content/design-system/content/guidelines/headings-subheading/design/headings-subheadings/content.mdoc +++ b/apps/site/src/content/design-system/content/guidelines/headings-subheading/design/headings-subheadings/content.mdoc @@ -1,5 +1,25 @@ No full stops at the end of any headings but fine to use a full stop or comma to break up a headline. +```jsx +
+

For example:

+

OUR DREAM RATE JUST GOT DREAMIER

+

LIFE IS EVENTFUL. THAT’S WHY WE HELP

+

MEET RED, YOUR VIRTUAL ASSISTANT

+
+``` + +Question marks and exclamation marks can help keep headings short and engaging. + +```jsx +
+

For example:

+

WANT $3K CASHBACK?

+

LIFE IS EVENTFUL. THAT’S WHY WE HELP

+

Note: Only use exclamation marks when appropriate, e.g. Now that’s a great rate!

+
+``` + For example: > OUR DREAM RATE JUST GOT DREAMIER From 0aa90234f0ae9de7d46a0369dd9cac505285a3be Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 9 Oct 2024 17:33:58 +1100 Subject: [PATCH 81/92] Update src/content/design-system/content/guidelines/headings-subheading --- .../design/headings-subheadings/content.mdoc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/src/content/design-system/content/guidelines/headings-subheading/design/headings-subheadings/content.mdoc b/apps/site/src/content/design-system/content/guidelines/headings-subheading/design/headings-subheadings/content.mdoc index 234b44513..314b07629 100644 --- a/apps/site/src/content/design-system/content/guidelines/headings-subheading/design/headings-subheadings/content.mdoc +++ b/apps/site/src/content/design-system/content/guidelines/headings-subheading/design/headings-subheadings/content.mdoc @@ -4,7 +4,7 @@ No full stops at the end of any headings but fine to use a full stop or comma to

For example:

OUR DREAM RATE JUST GOT DREAMIER

-

LIFE IS EVENTFUL. THAT’S WHY WE HELP

+

LIFE IS EVENTFUL. THAT’S WHY WE HELP

MEET RED, YOUR VIRTUAL ASSISTANT

``` @@ -16,7 +16,7 @@ Question marks and exclamation marks can help keep headings short and engaging.

For example:

WANT $3K CASHBACK?

LIFE IS EVENTFUL. THAT’S WHY WE HELP

-

Note: Only use exclamation marks when appropriate, e.g. Now that’s a great rate!

+

Note: Only use exclamation marks when appropriate, e.g. Now that’s a great rate!

``` From 564af3c3fe7cb93745683d6c7499a637029873b3 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 9 Oct 2024 17:34:20 +1100 Subject: [PATCH 82/92] Update src/content/design-system/content/guidelines/headings-subheading --- .../design/headings-subheadings/content.mdoc | 18 +----------------- 1 file changed, 1 insertion(+), 17 deletions(-) diff --git a/apps/site/src/content/design-system/content/guidelines/headings-subheading/design/headings-subheadings/content.mdoc b/apps/site/src/content/design-system/content/guidelines/headings-subheading/design/headings-subheadings/content.mdoc index 314b07629..46b630261 100644 --- a/apps/site/src/content/design-system/content/guidelines/headings-subheading/design/headings-subheadings/content.mdoc +++ b/apps/site/src/content/design-system/content/guidelines/headings-subheading/design/headings-subheadings/content.mdoc @@ -20,20 +20,4 @@ Question marks and exclamation marks can help keep headings short and engaging.
``` -For example: - -> OUR DREAM RATE JUST GOT DREAMIER -> -> LIFE IS EVENTFUL. THAT’S WHY WE HELP -> -> MEET RED, YOUR VIRTUAL ASSISTANT - ---- - -Question marks and exclamation marks can help keep headings short and engaging. - -For example: - -> WANT $3K CASHBACK? - -*Note: Only use exclamation marks when appropriate, e.g. Now that’s a great rate!* +\** From 0b6254bd7c7252726ea04026a7e0a45690d2f1fb Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 9 Oct 2024 17:34:38 +1100 Subject: [PATCH 83/92] Update src/content/design-system/content/guidelines/headings-subheading --- .../design/headings-subheadings/content.mdoc | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/site/src/content/design-system/content/guidelines/headings-subheading/design/headings-subheadings/content.mdoc b/apps/site/src/content/design-system/content/guidelines/headings-subheading/design/headings-subheadings/content.mdoc index 46b630261..1364e43db 100644 --- a/apps/site/src/content/design-system/content/guidelines/headings-subheading/design/headings-subheadings/content.mdoc +++ b/apps/site/src/content/design-system/content/guidelines/headings-subheading/design/headings-subheadings/content.mdoc @@ -19,5 +19,3 @@ Question marks and exclamation marks can help keep headings short and engaging.

Note: Only use exclamation marks when appropriate, e.g. Now that’s a great rate!

``` - -\** From 5d0e73a1b8f4f7a14eead7d216228b64c74b7b37 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Wed, 9 Oct 2024 17:34:58 +1100 Subject: [PATCH 84/92] Update src/content/design-system/content/guidelines/headings-subheading --- .../design/headings-subheadings/content.mdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/content/design-system/content/guidelines/headings-subheading/design/headings-subheadings/content.mdoc b/apps/site/src/content/design-system/content/guidelines/headings-subheading/design/headings-subheadings/content.mdoc index 1364e43db..95e841a32 100644 --- a/apps/site/src/content/design-system/content/guidelines/headings-subheading/design/headings-subheadings/content.mdoc +++ b/apps/site/src/content/design-system/content/guidelines/headings-subheading/design/headings-subheadings/content.mdoc @@ -5,7 +5,7 @@ No full stops at the end of any headings but fine to use a full stop or comma to

For example:

OUR DREAM RATE JUST GOT DREAMIER

LIFE IS EVENTFUL. THAT’S WHY WE HELP

-

MEET RED, YOUR VIRTUAL ASSISTANT

+

MEET RED, YOUR VIRTUAL ASSISTANT

``` From 6e866f11c537095a33e7f66c9152405fffa33587 Mon Sep 17 00:00:00 2001 From: HZ991 Date: Thu, 17 Oct 2024 14:52:12 +1100 Subject: [PATCH 85/92] navigation using scrollTo and NextJS Link --- .../table-of-contents.component.tsx | 57 ++++++------------- 1 file changed, 16 insertions(+), 41 deletions(-) diff --git a/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx b/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx index 3d8757c41..dc2f5e992 100644 --- a/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx +++ b/apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx @@ -1,5 +1,6 @@ 'use client'; import { List, ListItem } from '@westpac/ui'; +import Link from 'next/link'; import { usePathname, useRouter } from 'next/navigation'; import { MouseEventHandler, useCallback, useEffect, useState } from 'react'; @@ -20,7 +21,7 @@ export function TableOfContents({ contents = [] }: TableOfContentsProps) { .join('-'); return ( - {title} + {title} ); })} @@ -36,51 +37,25 @@ const HEADER_HEIGHT = { const BREAKPOINT_MD = 768; -function Link({ href, children }: { children?: React.ReactNode; href: string }) { - const router = useRouter(); - const pathname = usePathname(); - const [scrollToHash, setScrollToHash] = useState(null); +function NavLink({ href, children }: { children?: React.ReactNode; href: string }) { const [path, hash] = href.split('#'); - const DELAY_TIME_TO_SCROLL = 500; + const DELAY_TIME_TO_SCROLL = 100; - const scrollToSection = useCallback(() => { - const viewport = window.innerWidth < BREAKPOINT_MD ? 'sm' : 'lg'; - const bodyRect = document.body.getBoundingClientRect(); - const elemRect = document?.querySelector(`#${hash}`)?.getBoundingClientRect(); - const offset = (elemRect?.top || 0) - bodyRect.top - HEADER_HEIGHT[viewport]; + const handleClick: MouseEventHandler = () => { + setTimeout(() => { + const viewport = window.innerWidth < BREAKPOINT_MD ? 'sm' : 'lg'; + const bodyRect = document.body.getBoundingClientRect(); + const elemRect = document?.querySelector(`#${hash}`)?.getBoundingClientRect(); + const offset = (elemRect?.top || 0) - bodyRect.top - HEADER_HEIGHT[viewport]; - window?.scrollTo({ top: offset, behavior: 'smooth' }); - window.history.pushState(null, '', `#${hash}`); - }, [hash]); - - useEffect(() => { - if (scrollToHash) { - setTimeout(() => { - scrollToSection(); - }, DELAY_TIME_TO_SCROLL); - setScrollToHash(null); - } - }, [scrollToHash, pathname, scrollToSection]); - - const handleClick: MouseEventHandler = useCallback( - async ev => { - ev.preventDefault(); - const currentPath = pathname; - - if (path === currentPath || !path) { - scrollToSection(); - } else { - router.prefetch(path); - setScrollToHash(hash); - await router.push(path); - } - }, - [path, hash, router, pathname, scrollToSection], - ); + window?.scrollTo({ top: offset, behavior: 'smooth' }); + window.history.pushState(null, '', `#${hash}`); + }, DELAY_TIME_TO_SCROLL); + }; return ( - + {children} - + ); } From 2f1b69acb0c3443446df89f149ea8eb4dea32812 Mon Sep 17 00:00:00 2001 From: KateMacdonald Date: Thu, 17 Oct 2024 16:04:19 +1100 Subject: [PATCH 86/92] Update src/content/design-system/content/before-you-start --- .../accessibilityDemo.mdoc | 0 .../design/principles/content.mdoc | 0 .../design/why-our-words-matter/content.mdoc | 0 .../design/writing-tips/content.mdoc | 0 .../{digital-writing-approach => before-you-start}/index.yaml | 2 +- .../relatedArticles.mdoc | 0 6 files changed, 1 insertion(+), 1 deletion(-) rename apps/site/src/content/design-system/content/{digital-writing-approach => before-you-start}/accessibilityDemo.mdoc (100%) rename apps/site/src/content/design-system/content/{digital-writing-approach => before-you-start}/design/principles/content.mdoc (100%) rename apps/site/src/content/design-system/content/{digital-writing-approach => before-you-start}/design/why-our-words-matter/content.mdoc (100%) rename apps/site/src/content/design-system/content/{digital-writing-approach => before-you-start}/design/writing-tips/content.mdoc (100%) rename apps/site/src/content/design-system/content/{digital-writing-approach => before-you-start}/index.yaml (95%) rename apps/site/src/content/design-system/content/{digital-writing-approach => before-you-start}/relatedArticles.mdoc (100%) diff --git a/apps/site/src/content/design-system/content/digital-writing-approach/accessibilityDemo.mdoc b/apps/site/src/content/design-system/content/before-you-start/accessibilityDemo.mdoc similarity index 100% rename from apps/site/src/content/design-system/content/digital-writing-approach/accessibilityDemo.mdoc rename to apps/site/src/content/design-system/content/before-you-start/accessibilityDemo.mdoc diff --git a/apps/site/src/content/design-system/content/digital-writing-approach/design/principles/content.mdoc b/apps/site/src/content/design-system/content/before-you-start/design/principles/content.mdoc similarity index 100% rename from apps/site/src/content/design-system/content/digital-writing-approach/design/principles/content.mdoc rename to apps/site/src/content/design-system/content/before-you-start/design/principles/content.mdoc diff --git a/apps/site/src/content/design-system/content/digital-writing-approach/design/why-our-words-matter/content.mdoc b/apps/site/src/content/design-system/content/before-you-start/design/why-our-words-matter/content.mdoc similarity index 100% rename from apps/site/src/content/design-system/content/digital-writing-approach/design/why-our-words-matter/content.mdoc rename to apps/site/src/content/design-system/content/before-you-start/design/why-our-words-matter/content.mdoc diff --git a/apps/site/src/content/design-system/content/digital-writing-approach/design/writing-tips/content.mdoc b/apps/site/src/content/design-system/content/before-you-start/design/writing-tips/content.mdoc similarity index 100% rename from apps/site/src/content/design-system/content/digital-writing-approach/design/writing-tips/content.mdoc rename to apps/site/src/content/design-system/content/before-you-start/design/writing-tips/content.mdoc diff --git a/apps/site/src/content/design-system/content/digital-writing-approach/index.yaml b/apps/site/src/content/design-system/content/before-you-start/index.yaml similarity index 95% rename from apps/site/src/content/design-system/content/digital-writing-approach/index.yaml rename to apps/site/src/content/design-system/content/before-you-start/index.yaml index 7ec09a2f0..4bded91a1 100644 --- a/apps/site/src/content/design-system/content/digital-writing-approach/index.yaml +++ b/apps/site/src/content/design-system/content/before-you-start/index.yaml @@ -1,4 +1,4 @@ -name: Digital writing approach +name: Before you start description: >- When writing for digital, we want our customers to easily understand our messaging and successfully complete their task online in the quickest and diff --git a/apps/site/src/content/design-system/content/digital-writing-approach/relatedArticles.mdoc b/apps/site/src/content/design-system/content/before-you-start/relatedArticles.mdoc similarity index 100% rename from apps/site/src/content/design-system/content/digital-writing-approach/relatedArticles.mdoc rename to apps/site/src/content/design-system/content/before-you-start/relatedArticles.mdoc From 3e6318911a74dc4bc85d857cfaa2578a0c3c2aad Mon Sep 17 00:00:00 2001 From: HZ991 Date: Thu, 31 Oct 2024 14:35:19 +1100 Subject: [PATCH 87/92] fix: header className mismatch bug for site --- .../components/header/header.component.tsx | 25 ++++++------------- 1 file changed, 7 insertions(+), 18 deletions(-) diff --git a/apps/site/src/app/design-system/[brand]/[...component]/components/header/header.component.tsx b/apps/site/src/app/design-system/[brand]/[...component]/components/header/header.component.tsx index eb0636bc3..ba0c18b99 100644 --- a/apps/site/src/app/design-system/[brand]/[...component]/components/header/header.component.tsx +++ b/apps/site/src/app/design-system/[brand]/[...component]/components/header/header.component.tsx @@ -11,7 +11,7 @@ import { styles as headerStyles } from './header.styles'; const FIXED_HEADER = 162; // 228 - 66 = height to stick export function Header({ className, title, brand }: { brand: string; className?: string; title?: string }) { - const [fixed, setFixed] = useState(typeof window !== 'undefined' ? window.scrollY >= FIXED_HEADER : false); + const [fixed, setFixed] = useState(false); const styles = headerStyles({ brand: brand.toLowerCase() as BrandKey, fixed, className }); const headerRef = useRef(null); const { setOpen } = useSidebar(); @@ -20,32 +20,21 @@ export function Header({ className, title, brand }: { brand: string; className?: if (typeof window !== 'undefined') { const handleScroll = () => { const isFixed = window.scrollY >= FIXED_HEADER; + console.log('window position:' + window.scrollY); + console.log('header position:' + FIXED_HEADER); + console.log('isFixed:' + isFixed); setFixed(isFixed); }; + handleScroll(); window.addEventListener('scroll', handleScroll); + window.addEventListener('load', handleScroll); + return () => window.removeEventListener('scroll', handleScroll); } }, []); return (
-
- Active breakpoint: - SM - MD - LG - -
{/* The tab order on the original site was the grid button before wrapper when coming from the browser bar */} diff --git a/apps/site/src/components/document-renderer/heading/heading.style.ts b/apps/site/src/components/document-renderer/heading/heading.style.ts index f47f4e68b..87e099ce4 100644 --- a/apps/site/src/components/document-renderer/heading/heading.style.ts +++ b/apps/site/src/components/document-renderer/heading/heading.style.ts @@ -1,7 +1,8 @@ import { tv } from 'tailwind-variants'; +// scroll margin top = header height + 24px export const styles = tv({ - base: 'mt-5 font-bold first:mt-0', + base: 'mt-5 scroll-mt-[9.125rem] font-bold first:mt-0 md:scroll-mt-[11.25rem]', variants: { textAlign: { left: 'text-left', @@ -10,7 +11,7 @@ export const styles = tv({ }, level: { 1: 'typography-body-5 mb-3', - 2: 'typography-body-7 mb-4 sm:typography-body-6 sm:mb-7', + 2: 'typography-body-7 sm:typography-body-6 mb-4 sm:mb-7', 3: 'typography-body-8 mb-2', 4: 'typography-body-10 mb-2 uppercase', 5: 'typography-body-9 mb-2',