From 5ef68dc95d1449312a0bfa3fc8e90915504fae40 Mon Sep 17 00:00:00 2001 From: Kenji Shiroma Date: Fri, 24 Nov 2023 10:05:06 +1000 Subject: [PATCH] fix case sensitive --- .../accordion/design/accordion/content.mdoc | 39 ++++++++ .../design/breadcrumbs/content.mdoc | 23 +++++ .../collapsible/design/examples/content.mdoc | 87 +++++++++++++++++ .../compacta/design/default/content.mdoc | 56 +++++++++++ .../date-picker/design/sizes/content.mdoc | 13 +++ .../input/design/selects/content.mdoc | 25 +++++ .../link/design/inline/content.mdoc | 38 ++++++++ .../link/design/standalone/content.mdoc | 13 +++ .../pagination/design/pagination/content.mdoc | 17 ++++ .../popover/design/popover/content.mdoc | 23 +++++ .../repeater/design/default/content.mdoc | 11 +++ .../switch/design/switches/content.mdoc | 31 ++++++ .../tabs/design/tabset/content.mdoc | 97 +++++++++++++++++++ .../components/well/design/well/content.mdoc | 23 +++++ .../design/capitalisation/content.mdoc | 65 +++++++++++++ .../design/countries/content.mdoc | 19 ++++ .../design/headings/content.mdoc | 9 ++ .../design/lower-case/content.mdoc | 21 ++++ .../design/sentence-case/content.mdoc | 41 ++++++++ .../design/principles/content.mdoc | 13 +++ .../design/pre-requisites/content.mdoc | 7 ++ .../get-started/design/resources/content.mdoc | 5 + .../guides/brand/design/usebrand/content.mdoc | 13 +++ .../email/design/email/content.mdoc | 11 +++ .../employment/design/employment/content.mdoc | 11 +++ 25 files changed, 711 insertions(+) create mode 100644 apps/site/src/content/design-system/components/accordion/design/accordion/content.mdoc create mode 100644 apps/site/src/content/design-system/components/breadcrumb/design/breadcrumbs/content.mdoc create mode 100644 apps/site/src/content/design-system/components/collapsible/design/examples/content.mdoc create mode 100644 apps/site/src/content/design-system/components/compacta/design/default/content.mdoc create mode 100644 apps/site/src/content/design-system/components/date-picker/design/sizes/content.mdoc create mode 100644 apps/site/src/content/design-system/components/input/design/selects/content.mdoc create mode 100644 apps/site/src/content/design-system/components/link/design/inline/content.mdoc create mode 100644 apps/site/src/content/design-system/components/link/design/standalone/content.mdoc create mode 100644 apps/site/src/content/design-system/components/pagination/design/pagination/content.mdoc create mode 100644 apps/site/src/content/design-system/components/popover/design/popover/content.mdoc create mode 100644 apps/site/src/content/design-system/components/repeater/design/default/content.mdoc create mode 100644 apps/site/src/content/design-system/components/switch/design/switches/content.mdoc create mode 100644 apps/site/src/content/design-system/components/tabs/design/tabset/content.mdoc create mode 100644 apps/site/src/content/design-system/components/well/design/well/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/capital-letter/design/capitalisation/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/capital-letter/design/countries/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/capital-letter/design/headings/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/capital-letter/design/lower-case/content.mdoc create mode 100644 apps/site/src/content/design-system/content/guidelines/capital-letter/design/sentence-case/content.mdoc create mode 100644 apps/site/src/content/design-system/content/writing-for-digital/design/principles/content.mdoc create mode 100644 apps/site/src/content/design-system/development/get-started/design/pre-requisites/content.mdoc create mode 100644 apps/site/src/content/design-system/development/get-started/design/resources/content.mdoc create mode 100644 apps/site/src/content/design-system/development/guides/brand/design/usebrand/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/personal-details/email/design/email/content.mdoc create mode 100644 apps/site/src/content/design-system/patterns/personal-details/employment/design/employment/content.mdoc diff --git a/apps/site/src/content/design-system/components/accordion/design/accordion/content.mdoc b/apps/site/src/content/design-system/components/accordion/design/accordion/content.mdoc new file mode 100644 index 000000000..2b1f0a987 --- /dev/null +++ b/apps/site/src/content/design-system/components/accordion/design/accordion/content.mdoc @@ -0,0 +1,39 @@ +**Default accordion:** See Visual design for the usage recommendations for the default style. + +```jsx + + {[ + { key: 'files', title: 'Your files' }, + { key: 'shared', title: 'Shared with you' }, + { key: 'last', title: 'Last item' }, + ].map(({ key, title }) => ( + +

{title}

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat in, nobis itaque iste sequi, pariatur, nam + reiciendis quasi illum nulla aliquid mollitia corrupti nostrum incidunt? At minima error nobis ullam! +

+ + ))} + +``` + +**Lego accordion:** See Visual design for the usage recommendations for the lego style. + +```jsx + + {[ + { key: 'files', title: 'Your files' }, + { key: 'shared', title: 'Shared with you' }, + { key: 'last', title: 'Last item' }, + ].map(({ key, title }) => ( + +

{title}

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat in, nobis itaque iste sequi, pariatur, nam + reiciendis quasi illum nulla aliquid mollitia corrupti nostrum incidunt? At minima error nobis ullam! +

+ + ))} + +``` diff --git a/apps/site/src/content/design-system/components/breadcrumb/design/breadcrumbs/content.mdoc b/apps/site/src/content/design-system/components/breadcrumb/design/breadcrumbs/content.mdoc new file mode 100644 index 000000000..ea461ece0 --- /dev/null +++ b/apps/site/src/content/design-system/components/breadcrumb/design/breadcrumbs/content.mdoc @@ -0,0 +1,23 @@ +Breadcrumbs come in one style for navigational consistency across all touch-points. + +```jsx +// Using the Link component (as NextLink) from 'next/LinkLink' + + + Anchor item + + + Another anchor item + + + + Disabled item + + + + + Last item + + + +``` diff --git a/apps/site/src/content/design-system/components/collapsible/design/examples/content.mdoc b/apps/site/src/content/design-system/components/collapsible/design/examples/content.mdoc new file mode 100644 index 000000000..5d3ed535d --- /dev/null +++ b/apps/site/src/content/design-system/components/collapsible/design/examples/content.mdoc @@ -0,0 +1,87 @@ +### Basic + +Used much in the same way as an [accordion or tabcordion](/design-system/components/tabcordions), a Collapsible toggles to open and reveal more content below. + +```jsx + +

+ It was all very well to say ‘Drink me,’ but the wise little Alice was not going to do that in a hurry. ‘No, I’ll + look first,’ she said, ‘and see whether it’s marked “poison” or not’; for she had read several nice little histories + about children who had got burnt, and eaten up by wild beasts and other unpleasant things, all because they would + not remember the simple rules their friends had taught them: such as, that a red-hot poker will burn you if you hold + it too long; and that if you cut your finger very deeply with a knife, it usually bleeds; and she had never + forgotten that, if you drink much from a bottle marked ‘poison,’ it is almost certain to disagree with you, sooner + or later. +

+ +``` + +### Sizes + +```jsx +
+
+ Small + + +

+ It was all very well to say ‘Drink me,’ but the wise little Alice was not going to do that in a hurry. ‘No, I’ll + look first,’ she said, ‘and see whether it’s marked “poison” or not’; for she had read several nice little + histories about children who had got burnt, and eaten up by wild beasts and other unpleasant things, all because + they would not remember the simple rules their friends had taught them: such as, that a red-hot poker will burn + you if you hold it too long; and that if you cut your finger very deeply with a knife, it usually bleeds; and + she had never forgotten that, if you drink much from a bottle marked ‘poison,’ it is almost certain to disagree + with you, sooner or later. +

+ +
+
+
+ Medium (default) + + +

+ It was all very well to say ‘Drink me,’ but the wise little Alice was not going to do that in a hurry. ‘No, I’ll + look first,’ she said, ‘and see whether it’s marked “poison” or not’; for she had read several nice little + histories about children who had got burnt, and eaten up by wild beasts and other unpleasant things, all because + they would not remember the simple rules their friends had taught them: such as, that a red-hot poker will burn + you if you hold it too long; and that if you cut your finger very deeply with a knife, it usually bleeds; and + she had never forgotten that, if you drink much from a bottle marked ‘poison,’ it is almost certain to disagree + with you, sooner or later. +

+ +
+
+
+ Large + + +

+ It was all very well to say ‘Drink me,’ but the wise little Alice was not going to do that in a hurry. ‘No, I’ll + look first,’ she said, ‘and see whether it’s marked “poison” or not’; for she had read several nice little + histories about children who had got burnt, and eaten up by wild beasts and other unpleasant things, all because + they would not remember the simple rules their friends had taught them: such as, that a red-hot poker will burn + you if you hold it too long; and that if you cut your finger very deeply with a knife, it usually bleeds; and + she had never forgotten that, if you drink much from a bottle marked ‘poison,’ it is almost certain to disagree + with you, sooner or later. +

+ +
+
+
+ XLarge + + +

+ It was all very well to say ‘Drink me,’ but the wise little Alice was not going to do that in a hurry. ‘No, I’ll + look first,’ she said, ‘and see whether it’s marked “poison” or not’; for she had read several nice little + histories about children who had got burnt, and eaten up by wild beasts and other unpleasant things, all because + they would not remember the simple rules their friends had taught them: such as, that a red-hot poker will burn + you if you hold it too long; and that if you cut your finger very deeply with a knife, it usually bleeds; and + she had never forgotten that, if you drink much from a bottle marked ‘poison,’ it is almost certain to disagree + with you, sooner or later. +

+ +
+
+``` diff --git a/apps/site/src/content/design-system/components/compacta/design/default/content.mdoc b/apps/site/src/content/design-system/components/compacta/design/default/content.mdoc new file mode 100644 index 000000000..efa9827d6 --- /dev/null +++ b/apps/site/src/content/design-system/components/compacta/design/default/content.mdoc @@ -0,0 +1,56 @@ +Below is an example of how a Compacta may be used with fields and inputs. Any form related elements can exist inside a Compacta. + +```tsx +() => { + const [inputs, setInputs] = useState({}); + + const handleChange = (e: ChangeEvent) => { + setInputs((prev: object) => ({ ...prev, [e.target.name]: e.target.value })); + }; + + return ( + + {({ id, setPrimaryTitle, setSecondaryTitle, setTertiaryTitle }) => ( +
+ + Primary + Primary title text + { + handleChange(e); + setPrimaryTitle(e.target.value); + }} + /> + + + Secondary + Secondary title text + { + handleChange(e); + setSecondaryTitle(e.target.value); + }} + /> + + + Tertiary + Tertiary title text + { + handleChange(e); + setTertiaryTitle(e.target.value); + }} + /> + +
+ )} + + ); +}; +``` diff --git a/apps/site/src/content/design-system/components/date-picker/design/sizes/content.mdoc b/apps/site/src/content/design-system/components/date-picker/design/sizes/content.mdoc new file mode 100644 index 000000000..0f0690b83 --- /dev/null +++ b/apps/site/src/content/design-system/components/date-picker/design/sizes/content.mdoc @@ -0,0 +1,13 @@ +The date picker can be used in various sizes to match the UI direction. + +```jsx +() => { + const sizes = ['sm', 'md', 'lg', 'xl']; + return sizes.map(size => ( +
+ size {size} + +
+ )); +}; +``` diff --git a/apps/site/src/content/design-system/components/input/design/selects/content.mdoc b/apps/site/src/content/design-system/components/input/design/selects/content.mdoc new file mode 100644 index 000000000..f78c80bbb --- /dev/null +++ b/apps/site/src/content/design-system/components/input/design/selects/content.mdoc @@ -0,0 +1,25 @@ +Selects come in four different sizes (heights) with the default being Medium 36px. Ensure when you are designing forms that you alway use the same size across element types. + +```tsx +() => { + const DEFAULT_OPTIONS = ['small', 'medium', 'large', 'xlarge'] as const; + const SIZES = ['small', 'medium', 'large', 'xlarge'] as const; + return ( +
+ {SIZES.map(size => ( +
+

{size}

+ +
+ ))} +
+ ); +}; +``` diff --git a/apps/site/src/content/design-system/components/link/design/inline/content.mdoc b/apps/site/src/content/design-system/components/link/design/inline/content.mdoc new file mode 100644 index 000000000..abd2914d8 --- /dev/null +++ b/apps/site/src/content/design-system/components/link/design/inline/content.mdoc @@ -0,0 +1,38 @@ +The inline option is mainly used when presenting links within a sentence or paragraph, with or without an icon before or after. It can also be used on its own without surrounding text but only when presented in Primary colour with an underline and no icon. + +```tsx +
+

+ Lorem ipsum dolor{' '} + + look, I'm an inline link + {' '} + sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio + doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum? +

+

+ Lorem ipsum dolor{' '} + + look, I'm an inline link with no underline + {' '} + sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio + doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum? +

+

+ Lorem ipsum dolor{' '} + + look, I'm an inline link + {' '} + sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio + doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum? +

+

+ Lorem ipsum dolor{' '} + + look, I'm an inline link + {' '} + sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio + doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum? +

+
+``` diff --git a/apps/site/src/content/design-system/components/link/design/standalone/content.mdoc b/apps/site/src/content/design-system/components/link/design/standalone/content.mdoc new file mode 100644 index 000000000..b10600f7a --- /dev/null +++ b/apps/site/src/content/design-system/components/link/design/standalone/content.mdoc @@ -0,0 +1,13 @@ +The standalone option is to be used by itself, on its own line, and never within a sentence or paragraph. It must always be used with an [icon](/design-system/foundation/icons) before or after. + +```jsx +
+ Look I'm a standalone link + + Look I'm a standalone link + + + Look I'm a standalone link + +
+``` diff --git a/apps/site/src/content/design-system/components/pagination/design/pagination/content.mdoc b/apps/site/src/content/design-system/components/pagination/design/pagination/content.mdoc new file mode 100644 index 000000000..71428a460 --- /dev/null +++ b/apps/site/src/content/design-system/components/pagination/design/pagination/content.mdoc @@ -0,0 +1,17 @@ +Use this pagination component for navigation within both finite (a set number) and infinite (unknown number) of views. + +```tsx +() => { + const [page, setPage] = useState(1); + + return ( + { + setPage(changedPage); + }} + pages={[{ text: '1' }, { text: '2' }, { text: '3' }]} + /> + ); +}; +``` diff --git a/apps/site/src/content/design-system/components/popover/design/popover/content.mdoc b/apps/site/src/content/design-system/components/popover/design/popover/content.mdoc new file mode 100644 index 000000000..6bc14ae40 --- /dev/null +++ b/apps/site/src/content/design-system/components/popover/design/popover/content.mdoc @@ -0,0 +1,23 @@ +These popovers can appear with or without a heading. For accessibility reasons our popovers are designed to only be dismissed using the close button, or by re-selecting the element that triggered them. + +```tsx +
+ } + > + With heading + + } + > + Without heading + +
+``` diff --git a/apps/site/src/content/design-system/components/repeater/design/default/content.mdoc b/apps/site/src/content/design-system/components/repeater/design/default/content.mdoc new file mode 100644 index 000000000..05619983b --- /dev/null +++ b/apps/site/src/content/design-system/components/repeater/design/default/content.mdoc @@ -0,0 +1,11 @@ +Sitting directly under the elements or component it aims to repeat, by selecting the “Add new” button, the item will repeat. + +```jsx + + + Primary + Primary title text + console.log(e)} /> + + +``` diff --git a/apps/site/src/content/design-system/components/switch/design/switches/content.mdoc b/apps/site/src/content/design-system/components/switch/design/switches/content.mdoc new file mode 100644 index 000000000..4f058f25f --- /dev/null +++ b/apps/site/src/content/design-system/components/switch/design/switches/content.mdoc @@ -0,0 +1,31 @@ +**Sizes:** We have one simple switch style that is available in four sizes (heights), with the default being Medium 36px. These four sizes align with other form element sizes. + +```jsx +
+ + + + +
+``` + +**Block switches:** Use Block switches in small break points to align the label and element to either side of the screen. This behaviour can be set up to work responsively, and change depending on breakpoint. + +```jsx +
+ +
+``` + +**Using responsive breakpoint control:** As well as determining if the switch is a Block switch, the switch's size can also change based on breakpoint. + +```jsx +
+ + +
+``` diff --git a/apps/site/src/content/design-system/components/tabs/design/tabset/content.mdoc b/apps/site/src/content/design-system/components/tabs/design/tabset/content.mdoc new file mode 100644 index 000000000..b7d445e6a --- /dev/null +++ b/apps/site/src/content/design-system/components/tabs/design/tabset/content.mdoc @@ -0,0 +1,97 @@ +**Default tabset:** See Visual design for the usage recommendations for the default style. Tabsets can appear both ranged to the right, or justified. + +```jsx + + + ‘It was much pleasanter at home,’ thought poor Alice, ‘when one wasn’t always growing + larger and smaller, and being ordered about by mice and rabbits. I almost wish I hadn’t + gone down that rabbit-hole — and yet — and yet — it’s rather curious, you know, this sort + of life! I do wonder what can have happened to me! When I used to read fairy-tales, I + fancied that kind of thing never happened, and now here I am in the middle of one! There + ought to be a book written about me, that there ought! And when I grow up, I’ll write one. + + + The chief difficulty Alice found at first was in managing her flamingo: she succeeded in + getting its body tucked away, comfortably enough, under her arm, with its legs hanging + down, but generally, just as she had got its neck nicely straightened out, and was going + to give the hedgehog a blow with its head, it would twist itself round and look up in her + face, with such a puzzled expression that she could not help bursting out laughing: and + when she had got its head down, and was going to begin again, it was very provoking to + find that the hedgehog had unrolled itself, and was in the act of crawling away: besides + all this, there was generally a ridge or furrow in the way wherever she wanted to send the + hedgehog to, and, as the doubled-up soldiers were always getting up and walking off to + other parts of the ground, Alice soon came to the conclusion that it was a very difficult + game indeed. + + + The Caterpillar and Alice looked at each other for some time in silence: at last the + Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy + voice. +
+ ‘Who are you?’ said the Caterpillar. +
+ This was not an encouraging opening for a conversation. Alice replied, rather shyly, ‘I — + I hardly know, sir, just at present — at least I know who I was when I got up this + morning, but I think I must have been changed several times since then.’ +
+ ‘What do you mean by that?’ said the Caterpillar sternly. ‘Explain yourself!’ +
+ ‘I can’t explain myself, I’m afraid, sir’ said Alice, ’because I’m not myself, you see.’ +
+ ‘I don’t see,’ said the Caterpillar. +
+ ‘I’m afraid I can’t put it more clearly,’ Alice replied very politely, ‘for I can’t + understand it myself to begin with; and being so many different sizes in a day is very + confusing.’ + + +``` + +**Lego tabset:** See Visual design for the usage recommendations for the lego style. Tabsets can appear both ranged to the right, or justified. + +```jsx + + + ‘It was much pleasanter at home,’ thought poor Alice, ‘when one wasn’t always growing + larger and smaller, and being ordered about by mice and rabbits. I almost wish I hadn’t + gone down that rabbit-hole — and yet — and yet — it’s rather curious, you know, this sort + of life! I do wonder what can have happened to me! When I used to read fairy-tales, I + fancied that kind of thing never happened, and now here I am in the middle of one! There + ought to be a book written about me, that there ought! And when I grow up, I’ll write one. + + + The chief difficulty Alice found at first was in managing her flamingo: she succeeded in + getting its body tucked away, comfortably enough, under her arm, with its legs hanging + down, but generally, just as she had got its neck nicely straightened out, and was going + to give the hedgehog a blow with its head, it would twist itself round and look up in her + face, with such a puzzled expression that she could not help bursting out laughing: and + when she had got its head down, and was going to begin again, it was very provoking to + find that the hedgehog had unrolled itself, and was in the act of crawling away: besides + all this, there was generally a ridge or furrow in the way wherever she wanted to send the + hedgehog to, and, as the doubled-up soldiers were always getting up and walking off to + other parts of the ground, Alice soon came to the conclusion that it was a very difficult + game indeed. + + + The Caterpillar and Alice looked at each other for some time in silence: at last the + Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy + voice. +
+ ‘Who are you?’ said the Caterpillar. +
+ This was not an encouraging opening for a conversation. Alice replied, rather shyly, ‘I — + I hardly know, sir, just at present — at least I know who I was when I got up this + morning, but I think I must have been changed several times since then.’ +
+ ‘What do you mean by that?’ said the Caterpillar sternly. ‘Explain yourself!’ +
+ ‘I can’t explain myself, I’m afraid, sir’ said Alice, ’because I’m not myself, you see.’ +
+ ‘I don’t see,’ said the Caterpillar. +
+ ‘I’m afraid I can’t put it more clearly,’ Alice replied very politely, ‘for I can’t + understand it myself to begin with; and being so many different sizes in a day is very + confusing.’ + + +``` diff --git a/apps/site/src/content/design-system/components/well/design/well/content.mdoc b/apps/site/src/content/design-system/components/well/design/well/content.mdoc new file mode 100644 index 000000000..a23c2208f --- /dev/null +++ b/apps/site/src/content/design-system/components/well/design/well/content.mdoc @@ -0,0 +1,23 @@ +Choose the colour of your well and the background it appears on to help your content either stand out or recede. Contrasting colours will always make an impact. + +```tsx + + It was a bright morning in the early part of summer; the river had resumed its wonted banks and its accustomed pace, + and a hot sun seemed to be pulling everything green and bushy and spiky up out of the earth towards him, as if by + strings. The Mole and the Water Rat had been up since dawn, very busy on matters connected with boats and the opening + of the boating season; painting and varnishing, mending paddles, repairing cushions, hunting for missing boat-hooks, + and so on; and were finishing breakfast in their little parlour and eagerly discussing their plans for the day, when a + heavy knock sounded at the door. + +``` + +```tsx + + It was a bright morning in the early part of summer; the river had resumed its wonted banks and its accustomed pace, + and a hot sun seemed to be pulling everything green and bushy and spiky up out of the earth towards him, as if by + strings. The Mole and the Water Rat had been up since dawn, very busy on matters connected with boats and the opening + of the boating season; painting and varnishing, mending paddles, repairing cushions, hunting for missing boat-hooks, + and so on; and were finishing breakfast in their little parlour and eagerly discussing their plans for the day, when a + heavy knock sounded at the door. + +``` diff --git a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/capitalisation/content.mdoc b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/capitalisation/content.mdoc new file mode 100644 index 000000000..90b8f7b51 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/capitalisation/content.mdoc @@ -0,0 +1,65 @@ +Always use capitalisation for: + +- Branded names (but not generic names of products or services) + +For example: + +> Westpac Life savings account +> +> Altitude Platinum credit card + +- Page meta titles (for SEO) + +For example: + +> Personal | Bank Accounts + +- Guides + +For example: + +> First Home Buyers Guide + +- Holidays - see [People & Diversity](/design-system/content/people-diversity) for more. + +For example: + +> Christmas, Easter, Lunar New Year + +- Days and months + +For example: + +> Monday, Friday +> +> January, December + +- Geographical names + +For example: + +> Sydney, Australia + +- Languages + +For example: + +> English, Cantonese, Vietnamese + +- Government departments + +For example: + +> Australian Taxation Office + +- Job titles (official titles only) + +For example: + +> Get in touch with your Relationship Manager + +- Awards + +For example: + +> Best Business Bank Award 2021 diff --git a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/countries/content.mdoc b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/countries/content.mdoc new file mode 100644 index 000000000..4d10e88b6 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/countries/content.mdoc @@ -0,0 +1,19 @@ +Take note of the way we refer to certain countries. + +China – use China, not PRC + +United Kingdom - use UK or United Kingdom, not England or Great Britain + +United States - use US or United States, not USA, America or United States of America. + +_Note: For H1 headings, US reads as ‘us’, so use U.S._ + +For example: + +> China trade deal +> +> UK stock market recovery +> +> US stocks hit a slump +> +> INVEST IN U.S. STOCKS diff --git a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/headings/content.mdoc b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/headings/content.mdoc new file mode 100644 index 000000000..ba8f15387 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/headings/content.mdoc @@ -0,0 +1,9 @@ +Headings always use sentence-case (not title-case), excluding H1 page headings which are all-caps. + +For example: + +> Do: Get $3k cashback when you refinance to us +> +> Don’t: Get $3K Cashback When You Refinance To Us + +_Note: No full stops on the end of any headings – see_ [_Headings and subheadings_](/design-system/content/headings-subheadings)_._ diff --git a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/lower-case/content.mdoc b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/lower-case/content.mdoc new file mode 100644 index 000000000..7ff153ca0 --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/lower-case/content.mdoc @@ -0,0 +1,21 @@ +Always use lower-case for: + +- Seasons + +For example: + +> spring, summer, autumn, winter + +- Online terms + +For example: + +> email, homepage, internet + +_Note: Capitalisation rules do not apply when a formal name is written in lower or upper case._ + +For example: + +> Maria von Trapp, iPhone, ebay +> +> BPAY, PayID diff --git a/apps/site/src/content/design-system/content/guidelines/capital-letter/design/sentence-case/content.mdoc b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/sentence-case/content.mdoc new file mode 100644 index 000000000..a0f0e7b9b --- /dev/null +++ b/apps/site/src/content/design-system/content/guidelines/capital-letter/design/sentence-case/content.mdoc @@ -0,0 +1,41 @@ +Always use sentence-case for: + +- Navigation menus (unless linking a branded product). + +For example: + +> \> Savings account + +> \> Westpac Life + +- CTA buttons and hyperlinks (no full stops but fine to use question marks) + +For example: + +> Compare accounts +> +> What’s new? + +> \> Calculate my repayments + +> \> How much can I borrow? + +- Validation or error messages + +For example: + +> Enter a valid email address + +- Form fields + +For example: + +> First name, Phone number, Email + +- Numerical amounts + +For example: + +> Do: $10k +> +> Don’t: $10K diff --git a/apps/site/src/content/design-system/content/writing-for-digital/design/principles/content.mdoc b/apps/site/src/content/design-system/content/writing-for-digital/design/principles/content.mdoc new file mode 100644 index 000000000..328757b02 --- /dev/null +++ b/apps/site/src/content/design-system/content/writing-for-digital/design/principles/content.mdoc @@ -0,0 +1,13 @@ +Our writing principles guide the way we solve customer problems and make decisions across the Westpac brands. You should also follow the Westpac Tone of Voice guidelines. + +**Helpful** + +We create content that enables customers to get their banking done efficiently and effectively. + +**Simple** + +We help customers understand our offering and its implications, giving them control over their finances and personal data. + +**Accessible and inclusive** + +We write in a way that promotes empathy, understanding and acceptance of diverse backgrounds so that every customer can interact with ease. diff --git a/apps/site/src/content/design-system/development/get-started/design/pre-requisites/content.mdoc b/apps/site/src/content/design-system/development/get-started/design/pre-requisites/content.mdoc new file mode 100644 index 000000000..e24f2f32a --- /dev/null +++ b/apps/site/src/content/design-system/development/get-started/design/pre-requisites/content.mdoc @@ -0,0 +1,7 @@ +All GEL components have a couple of peer dependencies so please ensure the following are installed: + +npm install react@^17.0.2 @react-spring/web@^9.2.4 + +npm install react@^17.0.2 @react\-spring/web@^9.2.4 + +/\*\* \* Reset the text fill color so that placeholder is visible \*/ .npm\_\_react-simple-code-editor\_\_textarea:empty { -webkit-text-fill-color: inherit !important; } /\*\* \* Hack to apply on some CSS on IE10 and IE11 \*/ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /\*\* \* IE doesn't support '-webkit-text-fill-color' \* So we use 'color: transparent' to make the text transparent on IE \* Unlike other browsers, it doesn't affect caret color in IE \*/ .npm\_\_react-simple-code-editor\_\_textarea { color: transparent !important; } .npm\_\_react-simple-code-editor\_\_textarea::selection { background-color: #accef7 !important; color: transparent !important; } } diff --git a/apps/site/src/content/design-system/development/get-started/design/resources/content.mdoc b/apps/site/src/content/design-system/development/get-started/design/resources/content.mdoc new file mode 100644 index 000000000..da9f79851 --- /dev/null +++ b/apps/site/src/content/design-system/development/get-started/design/resources/content.mdoc @@ -0,0 +1,5 @@ +All our components can be found on [npm](https://www.npmjs.com/search?q=%40westpac) under the @westpac/ prefix. + +Please raise any issues on the [Github](https://github.com/WestpacGEL/GEL) repo. + +We use the css-in-js library emotion to style our components. Visit the [emotion docs](https://emotion.sh/docs/introduction) to learn more about installation and usage. diff --git a/apps/site/src/content/design-system/development/guides/brand/design/usebrand/content.mdoc b/apps/site/src/content/design-system/development/guides/brand/design/usebrand/content.mdoc new file mode 100644 index 000000000..0088f5bd6 --- /dev/null +++ b/apps/site/src/content/design-system/development/guides/brand/design/usebrand/content.mdoc @@ -0,0 +1,13 @@ +To easily access these brand variables within your application, we have created a useBrand() hook. + +\# Example usage import { useBrand } from '@westpac/core'; const { COLORS } = useBrand(); const Component = (props) =>
+ +\# Example usage + +import { useBrand } from '@westpac/core'; + +const { COLORS } \= useBrand(); + +const Component \= (props) \=>
+ +/\*\* \* Reset the text fill color so that placeholder is visible \*/ .npm\_\_react-simple-code-editor\_\_textarea:empty { -webkit-text-fill-color: inherit !important; } /\*\* \* Hack to apply on some CSS on IE10 and IE11 \*/ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /\*\* \* IE doesn't support '-webkit-text-fill-color' \* So we use 'color: transparent' to make the text transparent on IE \* Unlike other browsers, it doesn't affect caret color in IE \*/ .npm\_\_react-simple-code-editor\_\_textarea { color: transparent !important; } .npm\_\_react-simple-code-editor\_\_textarea::selection { background-color: #accef7 !important; color: transparent !important; } } diff --git a/apps/site/src/content/design-system/patterns/personal-details/email/design/email/content.mdoc b/apps/site/src/content/design-system/patterns/personal-details/email/design/email/content.mdoc new file mode 100644 index 000000000..df820f37f --- /dev/null +++ b/apps/site/src/content/design-system/patterns/personal-details/email/design/email/content.mdoc @@ -0,0 +1,11 @@ +### Base pattern + +This is email capture at its simplest with the hint text doing some of the work in order to ensure the user inputs their correct details. This base pattern can be used with additional fields and questions for specific use cases, ie when asking the user to update their details within our secure environment, you may need to allow them to add multiple email addresses. + +Loading... + +### Usage example + +If email communication is critical to the success of the form, requiring the user to confirm their details, may yield better results by managing mistakes - despite the higher level of user effort required to input their email address twice. + +Loading... diff --git a/apps/site/src/content/design-system/patterns/personal-details/employment/design/employment/content.mdoc b/apps/site/src/content/design-system/patterns/personal-details/employment/design/employment/content.mdoc new file mode 100644 index 000000000..357078b8b --- /dev/null +++ b/apps/site/src/content/design-system/patterns/personal-details/employment/design/employment/content.mdoc @@ -0,0 +1,11 @@ +### Base pattern + +This is the pattern in its simplest form, additional fields and questions can be added for specific use cases, ie the details required for completing a credit card application (see usage example below), as opposed updating your information within the secure environment. + +Loading... + +### Usage example + +This example shows the base pattern used with additional questions when further details of employment are required; Employer name and duration. + +Loading...