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" /%} 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" /%} 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" /%} 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" /%} 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" /%} 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. +

+
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. +

+
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" /%} 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 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}> 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} /> 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" /%} 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" /%} 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/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
+ )} +
; +} +``` 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..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 @@ -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 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" /%} 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 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..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 @@ -1,19 +1,21 @@ No full stops at the end of any headings but fine to use a full stop or comma to break up a headline. -For example: - -> OUR DREAM RATE JUST GOT DREAMIER -> -> LIFE IS EVENTFUL. THAT’S WHY WE HELP -> -> MEET RED, YOUR VIRTUAL ASSISTANT - ---- +```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. -For example: - -> WANT $3K CASHBACK? - -*Note: Only use exclamation marks when appropriate, e.g. Now that’s a great rate!* +```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!

+
+``` 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:

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:

diff --git a/apps/site/src/content/design-system/patterns/help-text/accessibilityDemo.mdoc b/apps/site/src/content/design-system/design-tokens/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/design-tokens/accessibilityDemo.mdoc 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/patterns/help-text/relatedArticles.mdoc b/apps/site/src/content/design-system/design-tokens/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/design-tokens/relatedArticles.mdoc 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 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 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 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 diff --git a/apps/site/src/content/design-system/patterns/validation-and-error-messaging/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/validation-and-error-messaging/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 93% 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..82da49a2a 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. @@ -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 diff --git a/apps/site/src/content/design-system/patterns/validation-and-error-messaging/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/validation-and-error-messaging/relatedArticles.mdoc rename to apps/site/src/content/design-system/guides/help-text/relatedArticles.mdoc 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/guides/loading/accessibilityDemo.mdoc similarity index 100% rename from apps/site/src/content/design-system/components/progress-indicator/design/dos-and-donts/content.mdoc rename to apps/site/src/content/design-system/guides/loading/accessibilityDemo.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 new file mode 100644 index 000000000..2a6b8c6b2 --- /dev/null +++ b/apps/site/src/content/design-system/guides/loading/design/loading-options/content.mdoc @@ -0,0 +1,39 @@ +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. + +### Why + +- The process is transitioning to a new application +- 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, using an overlay can achieve this. + +### When + +Display after about 1-2 seconds + +### What + +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 + +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. + +### Usage example + +Description of what will be displayed + +```jsx +() => { + const state = useOverlayTriggerState({}); + return ( + <> + + + + ); +}; +``` 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..dd10591f0 --- /dev/null +++ b/apps/site/src/content/design-system/guides/loading/design/loading-within-components/content.mdoc @@ -0,0 +1,62 @@ +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 a [Progress Indicator](/components/progress-indicator) (or Spinner icon) 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 for disabling scenarios, or after about 200–500 milliseconds when loading. + +### What + +When indicating loading for very small elements we use an animated icon embedded with the component. + +### Usage examples + +#### In-field + +```jsx +() => { + 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('Now you have seen the Progress indicator within a small component.'); + } + setValidating(false); + }, 1500); + }, [inputValue]); + return Validate} errorMessage={error}> + setInputValue(value)} value={inputValue} /> + ; +} +``` + +#### In button + +```jsx +() => { + return
+ + +
; +} +``` 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 new file mode 100644 index 000000000..569f0ad4e --- /dev/null +++ b/apps/site/src/content/design-system/guides/loading/design/page-section-loading/content.mdoc @@ -0,0 +1,31 @@ +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 + +- Often because of the time it could take for an API to load. + +### When + +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. + +### 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 ( + <> + + + + ); +}; +``` 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..d207aae85 --- /dev/null +++ b/apps/site/src/content/design-system/guides/loading/index.yaml @@ -0,0 +1,30 @@ +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: true +design: + - title: + name: Page loading + slug: loading-options + noTitle: false + noDemo: false + - title: + name: Page section loading + slug: page-section-loading + noTitle: false + noDemo: false + - title: + name: Loading within components + slug: loading-within-components + noTitle: false + noDemo: true +accessibility: [] +relatedComponents: + - title: Progress Indicator + slug: /components/progress-indicator +code: [] diff --git a/apps/site/src/content/design-system/foundation/text-styling/design/visual-design/content.mdoc b/apps/site/src/content/design-system/guides/loading/relatedArticles.mdoc similarity index 100% rename from apps/site/src/content/design-system/foundation/text-styling/design/visual-design/content.mdoc rename to apps/site/src/content/design-system/guides/loading/relatedArticles.mdoc diff --git a/apps/site/src/content/design-system/guides/validation-and-error-messaging/accessibilityDemo.mdoc b/apps/site/src/content/design-system/guides/validation-and-error-messaging/accessibilityDemo.mdoc new file mode 100644 index 000000000..e69de29bb 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/guides/validation-and-error-messaging/relatedArticles.mdoc b/apps/site/src/content/design-system/guides/validation-and-error-messaging/relatedArticles.mdoc new file mode 100644 index 000000000..e69de29bb diff --git a/apps/site/src/utils/format.ts b/apps/site/src/utils/format.ts index af24be440..297345ce2 100644 --- a/apps/site/src/utils/format.ts +++ b/apps/site/src/utils/format.ts @@ -52,6 +52,7 @@ export function sortMenu(menuItems: Item[]) { 'get-started', 'foundation', 'components', + 'guides', 'patterns', 'accessibility', 'content', diff --git a/packages/ui/src/components/symbol/components/logos/bt-logo.tsx b/packages/ui/src/components/symbol/components/logos/bt-logo.tsx new file mode 100644 index 000000000..637092e13 --- /dev/null +++ b/packages/ui/src/components/symbol/components/logos/bt-logo.tsx @@ -0,0 +1,35 @@ +import { clsx } from 'clsx'; +import React from 'react'; + +import { Symbol } from '../../symbol.component.js'; +import { type SymbolProps } from '../../symbol.types.js'; + +export function BTLogo({ + 'aria-label': ariaLabel = 'BT', + copyrightYear = '2025', + viewBoxWidth = 105, + viewBoxHeight = 43, + className, + ...props +}: SymbolProps) { + return ( + + + + + + ); +} diff --git a/packages/ui/src/components/symbol/components/logos/bt-multibrand-large-logo.tsx b/packages/ui/src/components/symbol/components/logos/bt-multibrand-large-logo.tsx new file mode 100644 index 000000000..92045a462 --- /dev/null +++ b/packages/ui/src/components/symbol/components/logos/bt-multibrand-large-logo.tsx @@ -0,0 +1,42 @@ +import { clsx } from 'clsx'; +import React from 'react'; + +import { Symbol } from '../../symbol.component.js'; +import { type SymbolProps } from '../../symbol.types.js'; + +export function BTMultibrandLargeLogo({ + 'aria-label': ariaLabel = 'BT', + copyrightYear = '2024', + viewBoxWidth = 180, + viewBoxHeight = 65, + align = 'left', + offset = [null, 52.59, 105.18], + className, + ...props +}: SymbolProps) { + return ( + + + + + + ); +} diff --git a/packages/ui/src/components/symbol/components/logos/bt-multibrand-small-logo.tsx b/packages/ui/src/components/symbol/components/logos/bt-multibrand-small-logo.tsx new file mode 100644 index 000000000..df834b2c8 --- /dev/null +++ b/packages/ui/src/components/symbol/components/logos/bt-multibrand-small-logo.tsx @@ -0,0 +1,49 @@ +import { clsx } from 'clsx'; +import React from 'react'; + +import { Symbol } from '../../symbol.component.js'; +import { type SymbolProps } from '../../symbol.types.js'; + +export function BTMultibrandSmallLogo({ + 'aria-label': ariaLabel = 'BT', + copyrightYear = '2025', + viewBoxWidth = 122, + viewBoxHeight = 44, + align = 'left', + offset = [null, 36.865, 73.73], + className, + ...props +}: SymbolProps) { + return ( + + + + + + + + + + + + + ); +} diff --git a/packages/ui/src/components/symbol/components/logos/bt-panorama-logo.tsx b/packages/ui/src/components/symbol/components/logos/bt-panorama-logo.tsx new file mode 100644 index 000000000..89cda414d --- /dev/null +++ b/packages/ui/src/components/symbol/components/logos/bt-panorama-logo.tsx @@ -0,0 +1,76 @@ +import { clsx } from 'clsx'; +import React from 'react'; + +import { Symbol } from '../../symbol.component.js'; +import { type SymbolProps } from '../../symbol.types.js'; + +export function BTPanoramaLogo({ + 'aria-label': ariaLabel = 'BT Panorama', + copyrightYear = '2025', + viewBoxWidth = 180, + viewBoxHeight = 22, + className, + ...props +}: SymbolProps) { + return ( + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/packages/ui/src/components/symbol/components/logos/bt-panorama-multibrand-large-logo.tsx b/packages/ui/src/components/symbol/components/logos/bt-panorama-multibrand-large-logo.tsx new file mode 100644 index 000000000..d83d31b8d --- /dev/null +++ b/packages/ui/src/components/symbol/components/logos/bt-panorama-multibrand-large-logo.tsx @@ -0,0 +1,80 @@ +import { clsx } from 'clsx'; +import React from 'react'; + +import { Symbol } from '../../symbol.component.js'; +import { type SymbolProps } from '../../symbol.types.js'; + +export function BTPanoramaMultibrandLargeLogo({ + 'aria-label': ariaLabel = 'BT Panorama', + copyrightYear = '2025', + viewBoxWidth = 180, + viewBoxHeight = 65, + align = 'left', + offset = [null, 4.09, 8.18], + className, + ...props +}: SymbolProps) { + return ( + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/packages/ui/src/components/symbol/components/logos/bt-panorama-multibrand-small-logo.tsx b/packages/ui/src/components/symbol/components/logos/bt-panorama-multibrand-small-logo.tsx new file mode 100644 index 000000000..f3a4941d0 --- /dev/null +++ b/packages/ui/src/components/symbol/components/logos/bt-panorama-multibrand-small-logo.tsx @@ -0,0 +1,80 @@ +import { clsx } from 'clsx'; +import React from 'react'; + +import { Symbol } from '../../symbol.component.js'; +import { type SymbolProps } from '../../symbol.types.js'; + +export function BTPanoramaMultibrandSmallLogo({ + 'aria-label': ariaLabel = 'BT Panorama', + copyrightYear = '2025', + viewBoxWidth = 122, + viewBoxHeight = 44, + align = 'left', + offset = [null, 3.725, 7.45], + className, + ...props +}: SymbolProps) { + return ( + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/packages/ui/src/components/symbol/components/logos/bt-panorama-reversed-logo.tsx b/packages/ui/src/components/symbol/components/logos/bt-panorama-reversed-logo.tsx new file mode 100644 index 000000000..672f46883 --- /dev/null +++ b/packages/ui/src/components/symbol/components/logos/bt-panorama-reversed-logo.tsx @@ -0,0 +1,76 @@ +import { clsx } from 'clsx'; +import React from 'react'; + +import { Symbol } from '../../symbol.component.js'; +import { type SymbolProps } from '../../symbol.types.js'; + +export function BTPanoramaReversedLogo({ + 'aria-label': ariaLabel = 'BT Panorama', + copyrightYear = '2025', + viewBoxWidth = 180, + viewBoxHeight = 22, + className, + ...props +}: SymbolProps) { + return ( + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/packages/ui/src/components/symbol/components/logos/bt-reversed-logo.tsx b/packages/ui/src/components/symbol/components/logos/bt-reversed-logo.tsx new file mode 100644 index 000000000..1c92c9800 --- /dev/null +++ b/packages/ui/src/components/symbol/components/logos/bt-reversed-logo.tsx @@ -0,0 +1,35 @@ +import { clsx } from 'clsx'; +import React from 'react'; + +import { Symbol } from '../../symbol.component.js'; +import { type SymbolProps } from '../../symbol.types.js'; + +export function BTReversedLogo({ + 'aria-label': ariaLabel = 'BT', + copyrightYear = '2025', + viewBoxWidth = 105, + viewBoxHeight = 43, + className, + ...props +}: SymbolProps) { + return ( + + + + + + ); +} diff --git a/packages/ui/src/components/symbol/index.ts b/packages/ui/src/components/symbol/index.ts index 801f14eb6..ad142f0e7 100644 --- a/packages/ui/src/components/symbol/index.ts +++ b/packages/ui/src/components/symbol/index.ts @@ -4,6 +4,14 @@ export { AppleStoreSymbol } from './components/symbols/apple-store-symbol.js'; export { BOMLogo } from './components/logos/bom-logo.js'; export { BOMMultibrandLargeLogo } from './components/logos/bom-multibrand-large-logo.js'; export { BOMMultibrandSmallLogo } from './components/logos/bom-multibrand-small-logo.js'; +export { BTReversedLogo } from './components/logos/bt-reversed-logo.js'; +export { BTPanoramaReversedLogo } from './components/logos/bt-panorama-reversed-logo.js'; +export { BTLogo } from './components/logos/bt-logo.js'; +export { BTPanoramaLogo } from './components/logos/bt-panorama-logo.js'; +export { BTMultibrandSmallLogo } from './components/logos/bt-multibrand-small-logo.js'; +export { BTMultibrandLargeLogo } from './components/logos/bt-multibrand-large-logo.js'; +export { BTPanoramaMultibrandSmallLogo } from './components/logos/bt-panorama-multibrand-small-logo.js'; +export { BTPanoramaMultibrandLargeLogo } from './components/logos/bt-panorama-multibrand-large-logo.js'; export { BOMShieldLogo } from './components/logos/bom-shield-logo.js'; export { BPayLandSymbol } from './components/symbols/bpay-land-symbol.js'; export { BPayPortSymbol } from './components/symbols/bpay-port-symbol.js'; diff --git a/packages/ui/src/components/symbol/symbol.stories.tsx b/packages/ui/src/components/symbol/symbol.stories.tsx index b932cf13f..2f85ca468 100644 --- a/packages/ui/src/components/symbol/symbol.stories.tsx +++ b/packages/ui/src/components/symbol/symbol.stories.tsx @@ -27,15 +27,15 @@ export const Default: Story = { export const Offset = () => (

Left

- +

Center

- +

Right

- +
); @@ -97,12 +97,12 @@ export const AllLogos = () => { {Object.entries(multibrandLargeLogos).map(([key, Logo]) => ( <>
- +

{`<${key} />`}

{align.map(align => (
- +

{`<${key} align=${align} />`}

))} @@ -114,12 +114,12 @@ export const AllLogos = () => { {Object.entries(multibrandSmallLogos).map(([key, Logo]) => ( <>
- +

{`<${key} />`}

{align.map(align => (
- +

{`<${key} align=${align} />`}

))} diff --git a/packages/ui/src/stories/foundation/colours.stories.tsx b/packages/ui/src/stories/foundation/colours.stories.tsx index 1f34937a4..85e0ba130 100644 --- a/packages/ui/src/stories/foundation/colours.stories.tsx +++ b/packages/ui/src/stories/foundation/colours.stories.tsx @@ -290,6 +290,7 @@ export const BrandColors: Story = { 'pop', 'primary', 'text', + 'focus', ]; const TINTS = ['DEFAULT', 90, 80, 70, 60, 50, 40, 30, 20, 10, 5]; // NOTE: Below is ignored as we need global theme value from render @@ -316,7 +317,7 @@ export const BrandColors: Story = { {/* NOTE: Below disable tailwind classname warning for string interpolation */} {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
-
+
{color}
{`Tailwind eg: bg-${color}${tintString}`}
{/* Below comments to get rid of type nightmare when trying to get hex value */} @@ -360,7 +361,7 @@ export const ReservedColors = () => { {/* NOTE: Below disable tailwind classname warning for string interpolation */} {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
-
+
{color}
{`Tailwind eg: bg-${color}${tintString}`}
{/* Below comments to get rid of type nightmare when trying to get hex value */} @@ -382,15 +383,15 @@ export const ReservedWithNoTints = () => (
-
+
black
{`Tailwind eg: bg-black`}
#000
-
-
+
+
white
{`Tailwind eg: bg-white`}
#FFF
@@ -431,7 +432,7 @@ export const DataVisualisationColors: Story = { {/* NOTE: Below disable tailwind classname warning for string interpolation */} {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
-
+
{color}
{`Tailwind eg: bg-${color}`}
{/* Below comments to get rid of type nightmare when trying to get hex value */} @@ -448,7 +449,7 @@ export const DataVisualisationColors: Story = { {/* NOTE: Below disable tailwind classname warning for string interpolation */} {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
-
+
{color}
{`Tailwind eg: bg-${color}`}
{/* Below comments to get rid of type nightmare when trying to get hex value */} @@ -465,7 +466,7 @@ export const DataVisualisationColors: Story = { {/* NOTE: Below disable tailwind classname warning for string interpolation */} {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
-
+
{`${color}/30`}
{`Tailwind eg: bg-${color}/30`}
{/* Below comments to get rid of type nightmare when trying to get hex value */} diff --git a/packages/ui/src/tailwind/themes/btpl.ts b/packages/ui/src/tailwind/themes/btpl.ts new file mode 100644 index 000000000..2c4060297 --- /dev/null +++ b/packages/ui/src/tailwind/themes/btpl.ts @@ -0,0 +1,32 @@ +import { type BrandConfig } from '../index.js'; +import { generateColorTints } from '../utils/generate-color-tints.js'; + +export const theme: BrandConfig = { + code: 'BTPL', + colors: { + ...generateColorTints({ + background: '#F5F5F5', + border: '#D9D9D9', + heading: '#171717', + hero: '#00345A', + light: '#F9F9F9', + link: '#006DBC', + muted: '#666666', + neutral: '#2A2E42', + pop: '#672993', + primary: '#006DBC', + text: '#171717', + borderDark: '#949494', + focus: '#B470D7', + }), + pictogram: { + dark: '#00345A', + duo: { + highlight: '#006DBC', + outline: '#00345A', + }, + }, + }, + brandFont: '', + name: 'BT Panorama', +};