From 2585784b13a02d16c2b1790035354588ef1faa79 Mon Sep 17 00:00:00 2001 From: Lauren Hitchon Date: Tue, 16 May 2023 21:09:39 +1000 Subject: [PATCH 01/17] Utility classes docs base structure --- config.json | 3 +- gulpfile.js | 5 + src/docs/content/develop/helpers.hbs | 174 ----------------- src/docs/content/develop/json/helpers.json | 80 -------- src/docs/content/utilities/background.hbs | 40 ++++ src/docs/content/utilities/borders.hbs | 24 +++ src/docs/content/utilities/colors.hbs | 24 +++ src/docs/content/utilities/display.hbs | 24 +++ src/docs/content/utilities/flex.hbs | 24 +++ src/docs/content/utilities/float.hbs | 24 +++ .../content/utilities/json/utilities.json | 184 ++++++++++++++++++ src/docs/content/utilities/object-fit.hbs | 24 +++ src/docs/content/utilities/opacity.hbs | 24 +++ src/docs/content/utilities/overflow.hbs | 24 +++ src/docs/content/utilities/position.hbs | 24 +++ src/docs/content/utilities/shadows.hbs | 24 +++ src/docs/content/utilities/sizing.hbs | 24 +++ src/docs/content/utilities/spacing.hbs | 24 +++ src/docs/content/utilities/text.hbs | 24 +++ src/docs/content/utilities/vertical-align.hbs | 24 +++ src/docs/content/utilities/vertical-rule.hbs | 24 +++ src/docs/content/utilities/visibility.hbs | 24 +++ src/docs/content/utilities/z-index.hbs | 24 +++ .../handlebars/layouts/partials/_docs-nav.hbs | 27 +++ src/global/scss/helpers/_all.scss | 3 - src/global/scss/helpers/_border.scss | 20 -- src/global/scss/helpers/_colour.scss | 86 -------- src/global/scss/helpers/_utilities.scss | 89 +++++---- src/global/scss/settings/_settings.scss | 47 +++-- 29 files changed, 750 insertions(+), 416 deletions(-) delete mode 100644 src/docs/content/develop/helpers.hbs delete mode 100644 src/docs/content/develop/json/helpers.json create mode 100644 src/docs/content/utilities/background.hbs create mode 100644 src/docs/content/utilities/borders.hbs create mode 100644 src/docs/content/utilities/colors.hbs create mode 100644 src/docs/content/utilities/display.hbs create mode 100644 src/docs/content/utilities/flex.hbs create mode 100644 src/docs/content/utilities/float.hbs create mode 100644 src/docs/content/utilities/json/utilities.json create mode 100644 src/docs/content/utilities/object-fit.hbs create mode 100644 src/docs/content/utilities/opacity.hbs create mode 100644 src/docs/content/utilities/overflow.hbs create mode 100644 src/docs/content/utilities/position.hbs create mode 100644 src/docs/content/utilities/shadows.hbs create mode 100644 src/docs/content/utilities/sizing.hbs create mode 100644 src/docs/content/utilities/spacing.hbs create mode 100644 src/docs/content/utilities/text.hbs create mode 100644 src/docs/content/utilities/vertical-align.hbs create mode 100644 src/docs/content/utilities/vertical-rule.hbs create mode 100644 src/docs/content/utilities/visibility.hbs create mode 100644 src/docs/content/utilities/z-index.hbs delete mode 100644 src/global/scss/helpers/_border.scss delete mode 100644 src/global/scss/helpers/_colour.scss diff --git a/config.json b/config.json index 717bebe7..bbf19cc1 100644 --- a/config.json +++ b/config.json @@ -119,7 +119,8 @@ "about": "docs/content/about/*.hbs", "develop": "docs/content/develop/*.hbs", "design": "docs/content/design/*.hbs", - "methods": "docs/content/methods/*.hbs" + "methods": "docs/content/methods/*.hbs", + "utilities": "docs/content/utilities/*.hbs" } }, "inplace": { diff --git a/gulpfile.js b/gulpfile.js index a0c48512..3a4246cb 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -203,6 +203,11 @@ function metalsmithBuild(callback) { refer: false, sortBy: 'order', }, + utilities: { + pattern: config.metalSmith.collection.contentnav.utilities, + refer: false, + sortBy: 'order', + }, methods: { pattern: config.metalSmith.collection.contentnav.methods, refer: false, diff --git a/src/docs/content/develop/helpers.hbs b/src/docs/content/develop/helpers.hbs deleted file mode 100644 index 3b6933c0..00000000 --- a/src/docs/content/develop/helpers.hbs +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: Utility Classes -width: narrow -intro: Single-responsibility classes for re-use and customisation -no-blank: true -order: 4 -model: json/helpers.json -meta-description: Single-responsibility classes for re-use and customisation. -meta-index: true ---- - - - -{{#each model.colours as |value property|}} -

{{capitalize @key}}

-
-
- - - - - - - - {{#each this}} - - - - - - {{/each}} - -
-

Class

- 		-

Hover Class

- 		-

Description

-
-

{{@key}}

- 		-

hover:{{@key}}

- 		-

Applies {{property}} var(--{{this}}) to element

-
-
-
-{{/each}} - -{{#each model.font as |value property|}} -

{{capitalize @key}}

-
-
- - - - - - - {{#each this}} - - - - - {{/each}} - -
-

Class

- 		-

Description

-
-

nsw-{{this}}

- 		-

Applies {{this}} font size to element

-
-
-
-{{/each}} - -{{#each model.border as |value property|}} -

{{capitalize @key}}

-
-
- - - - - - - {{#each this}} - - - - - {{/each}} - -
-

Class

- 		-

Description

-
-

nsw-border--{{@key}}

- 		-

Applies {{this}} Brand Accent border to element

-
-
-
-{{/each}} - - -

Box shadow

-
-
- - - - - - - - - - - -
-
-

Class

-
- 		-
-

Description

-
-
-

nsw-box-shadow

- 		-

Applies box-shadow to element

-
-
-
- -

Viewport Visibility

-

Grid classes give you the option to show or hide elements in certain breakpoints. For example, displaying an image on a large screen when it supports the content, but hiding it on a small screen when it hinders the users access to information.

-

The classes are named using the format nsw-{display}-{breakpoint}

-

Where breakpoint is one of xs, sm, md, lg, xl.

-

Where display is one of:

- - -

Showing

-{{#>_docs-example separated="true"}} -
-

This text is only visible in large breakpoint and up

-
-{{/_docs-example}} - -

Hiding

-{{#>_docs-example separated="true"}} -
-

This text is only visible from large breakpoint and lower

-
-{{/_docs-example}} diff --git a/src/docs/content/develop/json/helpers.json b/src/docs/content/develop/json/helpers.json deleted file mode 100644 index b6d98e70..00000000 --- a/src/docs/content/develop/json/helpers.json +++ /dev/null @@ -1,80 +0,0 @@ -{ - "colours": { - "background colour": { - "nsw-bg--brand-dark": "nsw-brand-dark", - "nsw-bg--brand-light": "nsw-brand-light", - "nsw-bg--brand-supplementary": "nsw-brand-supplementary" - }, - "text colour": { - "nsw-text--dark":"nsw-text-dark", - "nsw-text--light":"nsw-text-light", - "nsw-text--brand-dark":"nsw-brand-dark", - "nsw-text--brand-light":"nsw-brand-light", - "nsw-text--brand-supplementary":"nsw-brand-supplementary" - }, - "border colour": { - "nsw-border--text-dark":"nsw-text-dark", - "nsw-border--text-light":"nsw-text-light", - "nsw-border--brand-dark":"nsw-brand-dark", - "nsw-border--brand-light":"nsw-brand-light", - "nsw-border--brand-supplementary":"nsw-brand-supplementary" - } - }, - "font": { - "font size": [ - "h1", - "h2", - "h3", - "h4", - "h5", - "h6" - ] - }, - "border": { - "border size": { - "2": "2px", - "4": "4px", - "6": "6px", - "left-2": "2px left", - "right-2": "2px right", - "top-2": "2px top", - "bottom-2": "2px bottom", - "left-4": "4px left", - "right-4": "4px right", - "top-4": "4px top", - "bottom-4": "4px bottom", - "left-6": "6px left", - "right-6": "6px right", - "top-6": "6px top", - "bottom-6": "6px bottom" - } - }, - "svg": { - "svg fill": { - "nsw-fill--brand-dark": "nsw-brand-dark", - "nsw-fill--brand-light":"nsw-brand-light", - "nsw-fill--brand-supplementary":"nsw-brand-supplementary", - "nsw-fill--brand-accent":"nsw-brand-accent", - "nsw-fill--black":"nsw-black", - "nsw-fill--white":"nsw-white", - "nsw-fill--off-white":"nsw-off-white", - "nsw-fill--grey-01":"nsw-grey-01", - "nsw-fill--grey-02":"nsw-grey-02", - "nsw-fill--grey-03":"nsw-grey-03", - "nsw-fill--grey-04":"nsw-grey-04" - }, - "svg stroke": { - "nsw-stroke--brand-dark": "nsw-brand-dark", - "nsw-stroke--brand-light":"nsw-brand-light", - "nsw-stroke--brand-supplementary":"nsw-brand-supplementary", - "nsw-stroke--brand-accent":"nsw-brand-accent", - "nsw-stroke--black":"nsw-black", - "nsw-stroke--white":"nsw-white", - "nsw-stroke--off-white":"nsw-off-white", - "nsw-stroke--grey-01":"nsw-grey-01", - "nsw-stroke--grey-02":"nsw-grey-02", - "nsw-stroke--grey-03":"nsw-grey-03", - "nsw-stroke--grey-04":"nsw-grey-04" - } - } -} diff --git a/src/docs/content/utilities/background.hbs b/src/docs/content/utilities/background.hbs new file mode 100644 index 00000000..d7bdd9d9 --- /dev/null +++ b/src/docs/content/utilities/background.hbs @@ -0,0 +1,40 @@ +--- +title: Background +width: narrow +intro: Convey meaning through background-color and add decoration with gradients. +no-blank: true +order: 1 +model: json/utilities.json +meta-description: Convey meaning through background-color and add decoration with gradients. +meta-index: true +--- + +

Background

+ +{{#>_docs-example separated="true"}} + {{#each model.background as |value property|}} +
+
.{{@key}}
+
+ {{/each}} +{{/_docs-example}} + +

Hover

+ +{{#>_docs-example separated="true"}} + {{#each model.background as |value property|}} +
+
.{{this.hover}}
+
+ {{/each}} +{{/_docs-example}} + +

Opacity

+ +{{#>_docs-example separated="true"}} + {{#each model.background-opacity as |value property|}} +
+
.{{this.class}}
+
+ {{/each}} +{{/_docs-example}} diff --git a/src/docs/content/utilities/borders.hbs b/src/docs/content/utilities/borders.hbs new file mode 100644 index 00000000..f1099a23 --- /dev/null +++ b/src/docs/content/utilities/borders.hbs @@ -0,0 +1,24 @@ +--- +title: Borders +width: narrow +intro: +no-blank: true +order: 2 +model: json/utilities.json +meta-description: +meta-index: true +--- + +

+ +{{#>_docs-example}} + {{#each model.colours as |value property|}} + {{#each this}} +
+ +

.{{@key}}

+ +
+ {{/each}} + {{/each}} +{{/_docs-example}} diff --git a/src/docs/content/utilities/colors.hbs b/src/docs/content/utilities/colors.hbs new file mode 100644 index 00000000..ad4d970e --- /dev/null +++ b/src/docs/content/utilities/colors.hbs @@ -0,0 +1,24 @@ +--- +title: Colors +width: narrow +intro: +no-blank: true +order: 3 +model: json/utilities.json +meta-description: +meta-index: true +--- + +

+ +{{#>_docs-example}} + {{#each model.colours as |value property|}} + {{#each this}} +
+ +

.{{@key}}

+ +
+ {{/each}} + {{/each}} +{{/_docs-example}} diff --git a/src/docs/content/utilities/display.hbs b/src/docs/content/utilities/display.hbs new file mode 100644 index 00000000..a44bab78 --- /dev/null +++ b/src/docs/content/utilities/display.hbs @@ -0,0 +1,24 @@ +--- +title: Display +width: narrow +intro: +no-blank: true +order: 4 +model: json/utilities.json +meta-description: +meta-index: true +--- + +

+ +{{#>_docs-example}} + {{#each model.colours as |value property|}} + {{#each this}} +
+ +

.{{@key}}

+ +
+ {{/each}} + {{/each}} +{{/_docs-example}} diff --git a/src/docs/content/utilities/flex.hbs b/src/docs/content/utilities/flex.hbs new file mode 100644 index 00000000..c73a353f --- /dev/null +++ b/src/docs/content/utilities/flex.hbs @@ -0,0 +1,24 @@ +--- +title: Flex +width: narrow +intro: +no-blank: true +order: 5 +model: json/utilities.json +meta-description: +meta-index: true +--- + +

+ +{{#>_docs-example}} + {{#each model.colours as |value property|}} + {{#each this}} +
+ +

.{{@key}}

+ +
+ {{/each}} + {{/each}} +{{/_docs-example}} diff --git a/src/docs/content/utilities/float.hbs b/src/docs/content/utilities/float.hbs new file mode 100644 index 00000000..dd4ae668 --- /dev/null +++ b/src/docs/content/utilities/float.hbs @@ -0,0 +1,24 @@ +--- +title: Float +width: narrow +intro: +no-blank: true +order: 6 +model: json/utilities.json +meta-description: +meta-index: true +--- + +

+ +{{#>_docs-example}} + {{#each model.colours as |value property|}} + {{#each this}} +
+ +

.{{@key}}

+ +
+ {{/each}} + {{/each}} +{{/_docs-example}} diff --git a/src/docs/content/utilities/json/utilities.json b/src/docs/content/utilities/json/utilities.json new file mode 100644 index 00000000..ba806fca --- /dev/null +++ b/src/docs/content/utilities/json/utilities.json @@ -0,0 +1,184 @@ +{ + "background": { + "nsw-bg--brand-dark": { + "hover": "nsw-bg--brand-dark-hover", + "text": "nsw-text--light" + }, + "nsw-bg--brand-light": { + "hover": "nsw-bg--brand-light-hover", + "text": "nsw-text--brand-dark" + }, + "nsw-bg--brand-supplementary": { + "hover": "nsw-bg--brand-supplementary-hover", + "text": "nsw-text--light" + }, + "nsw-bg--brand-accent": { + "hover": "nsw-bg--brand-accent-hover", + "text": "nsw-text--light" + }, + "nsw-bg--black": { + "hover": "nsw-bg--black-hover", + "text": "nsw-text--light" + }, + "nsw-bg--white": { + "hover": "nsw-bg--white-hover", + "text": "nsw-text--dark" + }, + "nsw-bg--off-white": { + "hover": "nsw-bg--off-white-hover", + "text": "nsw-text--dark" + }, + "nsw-bg--grey-01": { + "hover": "nsw-bg--grey-01-hover", + "text": "nsw-text--light" + }, + "nsw-bg--grey-02": { + "hover": "nsw-bg--grey-02-hover", + "text": "nsw-text--light" + }, + "nsw-bg--grey-03": { + "hover": "nsw-bg--grey-03-hover", + "text": "nsw-text--dark" + }, + "nsw-bg--grey-04": { + "hover": "nsw-bg--grey-04-hover", + "text": "nsw-text--dark" + }, + "nsw-bg--transparent": { + "hover": "nsw-bg--transparent-hover", + "text": "nsw-text--dark" + }, + "nsw-bg--info-dark": { + "hover": "nsw-bg--info-dark-hover", + "text": "nsw-text--light" + }, + "nsw-bg--info-light": { + "hover": "nsw-bg--info-light-hover", + "text": "nsw-text--dark" + }, + "nsw-bg-success-dark": { + "hover": "nsw-bg--success-dark-hover", + "text": "nsw-text--light" + }, + "nsw-bg--success-light": { + "hover": "nsw-bg--success-light-hover", + "text": "nsw-text--dark" + }, + "nsw-bg--warning-dark": { + "hover": "nsw-bg--warning-dark-hover", + "text": "nsw-text--light" + }, + "nsw-bg--warning-light": { + "hover": "nsw-bg--warning-light-hover", + "text": "nsw-text--dark" + }, + "nsw-bg--error-dark": { + "hover": "nsw-bg--error-dark-hover", + "text": "nsw-text--light" + }, + "nsw-bg--error-light": { + "hover": "nsw-bg--error-light-hover", + "text": "nsw-text--dark" + } + }, + "background-opacity": { + "0": { + "class": "nsw-bg-opacity--10", + "text": "nsw-text--dark" + }, + "25": { + "class": "nsw-bg-opacity--25", + "text": "nsw-text--dark" + }, + "50": { + "class": "nsw-bg-opacity--50", + "text": "nsw-text--light" + }, + "75": { + "class": "nsw-bg-opacity--75", + "text": "nsw-text--light" + }, + "100": { + "class": "nsw-bg-opacity--100", + "text": "nsw-text--light" + } + }, + "colours": { + "background colour": { + "nsw-bg--brand-dark": "nsw-brand-dark", + "nsw-bg--brand-light": "nsw-brand-light", + "nsw-bg--brand-supplementary": "nsw-brand-supplementary" + }, + "text colour": { + "nsw-text--dark":"nsw-text-dark", + "nsw-text--light":"nsw-text-light", + "nsw-text--brand-dark":"nsw-brand-dark", + "nsw-text--brand-light":"nsw-brand-light", + "nsw-text--brand-supplementary":"nsw-brand-supplementary" + }, + "border colour": { + "nsw-border--text-dark":"nsw-text-dark", + "nsw-border--text-light":"nsw-text-light", + "nsw-border--brand-dark":"nsw-brand-dark", + "nsw-border--brand-light":"nsw-brand-light", + "nsw-border--brand-supplementary":"nsw-brand-supplementary" + } + }, + "font": { + "font size": [ + "h1", + "h2", + "h3", + "h4", + "h5", + "h6" + ] + }, + "border": { + "border size": { + "2": "2px", + "4": "4px", + "6": "6px", + "left-2": "2px left", + "right-2": "2px right", + "top-2": "2px top", + "bottom-2": "2px bottom", + "left-4": "4px left", + "right-4": "4px right", + "top-4": "4px top", + "bottom-4": "4px bottom", + "left-6": "6px left", + "right-6": "6px right", + "top-6": "6px top", + "bottom-6": "6px bottom" + } + }, + "svg": { + "svg fill": { + "nsw-fill--brand-dark": "nsw-brand-dark", + "nsw-fill--brand-light":"nsw-brand-light", + "nsw-fill--brand-supplementary":"nsw-brand-supplementary", + "nsw-fill--brand-accent":"nsw-brand-accent", + "nsw-fill--black":"nsw-black", + "nsw-fill--white":"nsw-white", + "nsw-fill--off-white":"nsw-off-white", + "nsw-fill--grey-01":"nsw-grey-01", + "nsw-fill--grey-02":"nsw-grey-02", + "nsw-fill--grey-03":"nsw-grey-03", + "nsw-fill--grey-04":"nsw-grey-04" + }, + "svg stroke": { + "nsw-stroke--brand-dark": "nsw-brand-dark", + "nsw-stroke--brand-light":"nsw-brand-light", + "nsw-stroke--brand-supplementary":"nsw-brand-supplementary", + "nsw-stroke--brand-accent":"nsw-brand-accent", + "nsw-stroke--black":"nsw-black", + "nsw-stroke--white":"nsw-white", + "nsw-stroke--off-white":"nsw-off-white", + "nsw-stroke--grey-01":"nsw-grey-01", + "nsw-stroke--grey-02":"nsw-grey-02", + "nsw-stroke--grey-03":"nsw-grey-03", + "nsw-stroke--grey-04":"nsw-grey-04" + } + } +} diff --git a/src/docs/content/utilities/object-fit.hbs b/src/docs/content/utilities/object-fit.hbs new file mode 100644 index 00000000..c6880381 --- /dev/null +++ b/src/docs/content/utilities/object-fit.hbs @@ -0,0 +1,24 @@ +--- +title: Object fit +width: narrow +intro: +no-blank: true +order: 7 +model: json/utilities.json +meta-description: +meta-index: true +--- + +

+ +{{#>_docs-example}} + {{#each model.colours as |value property|}} + {{#each this}} +
+ +

.{{@key}}

+ +
+ {{/each}} + {{/each}} +{{/_docs-example}} diff --git a/src/docs/content/utilities/opacity.hbs b/src/docs/content/utilities/opacity.hbs new file mode 100644 index 00000000..ea3629de --- /dev/null +++ b/src/docs/content/utilities/opacity.hbs @@ -0,0 +1,24 @@ +--- +title: Opacity +width: narrow +intro: +no-blank: true +order: 8 +model: json/utilities.json +meta-description: +meta-index: true +--- + +

+ +{{#>_docs-example}} + {{#each model.colours as |value property|}} + {{#each this}} +
+ +

.{{@key}}

+ +
+ {{/each}} + {{/each}} +{{/_docs-example}} diff --git a/src/docs/content/utilities/overflow.hbs b/src/docs/content/utilities/overflow.hbs new file mode 100644 index 00000000..8440f0da --- /dev/null +++ b/src/docs/content/utilities/overflow.hbs @@ -0,0 +1,24 @@ +--- +title: Overflow +width: narrow +intro: +no-blank: true +order: 9 +model: json/utilities.json +meta-description: +meta-index: true +--- + +

+ +{{#>_docs-example}} + {{#each model.colours as |value property|}} + {{#each this}} +
+ +

.{{@key}}

+ +
+ {{/each}} + {{/each}} +{{/_docs-example}} diff --git a/src/docs/content/utilities/position.hbs b/src/docs/content/utilities/position.hbs new file mode 100644 index 00000000..deb31c9c --- /dev/null +++ b/src/docs/content/utilities/position.hbs @@ -0,0 +1,24 @@ +--- +title: Position +width: narrow +intro: +no-blank: true +order: 10 +model: json/utilities.json +meta-description: +meta-index: true +--- + +

+ +{{#>_docs-example}} + {{#each model.colours as |value property|}} + {{#each this}} +
+ +

.{{@key}}

+ +
+ {{/each}} + {{/each}} +{{/_docs-example}} diff --git a/src/docs/content/utilities/shadows.hbs b/src/docs/content/utilities/shadows.hbs new file mode 100644 index 00000000..1606faa1 --- /dev/null +++ b/src/docs/content/utilities/shadows.hbs @@ -0,0 +1,24 @@ +--- +title: Shadows +width: narrow +intro: +no-blank: true +order: 11 +model: json/utilities.json +meta-description: +meta-index: true +--- + +

+ +{{#>_docs-example}} + {{#each model.colours as |value property|}} + {{#each this}} +
+ +

.{{@key}}

+ +
+ {{/each}} + {{/each}} +{{/_docs-example}} diff --git a/src/docs/content/utilities/sizing.hbs b/src/docs/content/utilities/sizing.hbs new file mode 100644 index 00000000..32a59dd1 --- /dev/null +++ b/src/docs/content/utilities/sizing.hbs @@ -0,0 +1,24 @@ +--- +title: Sizing +width: narrow +intro: +no-blank: true +order: 12 +model: json/utilities.json +meta-description: +meta-index: true +--- + +

+ +{{#>_docs-example}} + {{#each model.colours as |value property|}} + {{#each this}} +
+ +

.{{@key}}

+ +
+ {{/each}} + {{/each}} +{{/_docs-example}} diff --git a/src/docs/content/utilities/spacing.hbs b/src/docs/content/utilities/spacing.hbs new file mode 100644 index 00000000..dd439239 --- /dev/null +++ b/src/docs/content/utilities/spacing.hbs @@ -0,0 +1,24 @@ +--- +title: Spacing +width: narrow +intro: +no-blank: true +order: 13 +model: json/utilities.json +meta-description: +meta-index: true +--- + +

+ +{{#>_docs-example}} + {{#each model.colours as |value property|}} + {{#each this}} +
+ +

.{{@key}}

+ +
+ {{/each}} + {{/each}} +{{/_docs-example}} diff --git a/src/docs/content/utilities/text.hbs b/src/docs/content/utilities/text.hbs new file mode 100644 index 00000000..67468045 --- /dev/null +++ b/src/docs/content/utilities/text.hbs @@ -0,0 +1,24 @@ +--- +title: Text +width: narrow +intro: +no-blank: true +order: 14 +model: json/utilities.json +meta-description: +meta-index: true +--- + +

+ +{{#>_docs-example}} + {{#each model.colours as |value property|}} + {{#each this}} +
+ +

.{{@key}}

+ +
+ {{/each}} + {{/each}} +{{/_docs-example}} diff --git a/src/docs/content/utilities/vertical-align.hbs b/src/docs/content/utilities/vertical-align.hbs new file mode 100644 index 00000000..9c7dfd09 --- /dev/null +++ b/src/docs/content/utilities/vertical-align.hbs @@ -0,0 +1,24 @@ +--- +title: Vertical align +width: narrow +intro: +no-blank: true +order: 15 +model: json/utilities.json +meta-description: +meta-index: true +--- + +

+ +{{#>_docs-example}} + {{#each model.colours as |value property|}} + {{#each this}} +
+ +

.{{@key}}

+ +
+ {{/each}} + {{/each}} +{{/_docs-example}} diff --git a/src/docs/content/utilities/vertical-rule.hbs b/src/docs/content/utilities/vertical-rule.hbs new file mode 100644 index 00000000..9c747e6e --- /dev/null +++ b/src/docs/content/utilities/vertical-rule.hbs @@ -0,0 +1,24 @@ +--- +title: Vertical rule +width: narrow +intro: +no-blank: true +order: 16 +model: json/utilities.json +meta-description: +meta-index: true +--- + +

+ +{{#>_docs-example}} + {{#each model.colours as |value property|}} + {{#each this}} +
+ +

.{{@key}}

+ +
+ {{/each}} + {{/each}} +{{/_docs-example}} diff --git a/src/docs/content/utilities/visibility.hbs b/src/docs/content/utilities/visibility.hbs new file mode 100644 index 00000000..00aaae31 --- /dev/null +++ b/src/docs/content/utilities/visibility.hbs @@ -0,0 +1,24 @@ +--- +title: Visibility +width: narrow +intro: +no-blank: true +order: 17 +model: json/utilities.json +meta-description: +meta-index: true +--- + +

+ +{{#>_docs-example}} + {{#each model.colours as |value property|}} + {{#each this}} +
+ +

.{{@key}}

+ +
+ {{/each}} + {{/each}} +{{/_docs-example}} diff --git a/src/docs/content/utilities/z-index.hbs b/src/docs/content/utilities/z-index.hbs new file mode 100644 index 00000000..e3180fa4 --- /dev/null +++ b/src/docs/content/utilities/z-index.hbs @@ -0,0 +1,24 @@ +--- +title: Z-index +width: narrow +intro: +no-blank: true +order: 18 +model: json/utilities.json +meta-description: +meta-index: true +--- + +

+ +{{#>_docs-example}} + {{#each model.colours as |value property|}} + {{#each this}} +
+ +

.{{@key}}

+ +
+ {{/each}} + {{/each}} +{{/_docs-example}} diff --git a/src/global/handlebars/layouts/partials/_docs-nav.hbs b/src/global/handlebars/layouts/partials/_docs-nav.hbs index b555380c..86b0103e 100644 --- a/src/global/handlebars/layouts/partials/_docs-nav.hbs +++ b/src/global/handlebars/layouts/partials/_docs-nav.hbs @@ -141,6 +141,33 @@ +
  • + + +
    +
    + + + +
    + +
      + {{#each collections.utilities}} +
    • {{title}}
      • + {{/each}} +
    +
    +
    • +

  • Digital Drivers License will become legal for use across NSW

    +
    - {{/each}} {{/_docs-example}}

    Opacity

    diff --git a/src/docs/content/utilities/borders.hbs b/src/docs/content/utilities/borders.hbs index f1099a23..cffc4cda 100644 --- a/src/docs/content/utilities/borders.hbs +++ b/src/docs/content/utilities/borders.hbs @@ -1,24 +1,40 @@ --- title: Borders width: narrow -intro: +intro: Utilities for controlling the border radius, width, style and the color of an element's borders. no-blank: true order: 2 model: json/utilities.json -meta-description: +meta-description: Utilities for controlling the border radius, width, style and the color of an element's borders. meta-index: true --- -

    +

    Border Radius

    -{{#>_docs-example}} - {{#each model.colours as |value property|}} - {{#each this}} -
    - -

    .{{@key}}

    - -
    - {{/each}} +{{#>_docs-example separated="true"}} + {{#each model.background-opacity as |value property|}} +
    +
    .{{this.class}}
    +
    + {{/each}} +{{/_docs-example}} + +

    Border Width

    + +{{#>_docs-example separated="true"}} + {{#each model.background-opacity as |value property|}} +
    +
    .{{this.class}}
    +
    + {{/each}} +{{/_docs-example}} + +

    Border Color

    + +{{#>_docs-example separated="true"}} + {{#each model.background-opacity as |value property|}} +
    +
    .{{this.class}}
    +
    {{/each}} {{/_docs-example}} diff --git a/src/docs/content/utilities/colors.hbs b/src/docs/content/utilities/colors.hbs deleted file mode 100644 index ad4d970e..00000000 --- a/src/docs/content/utilities/colors.hbs +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Colors -width: narrow -intro: -no-blank: true -order: 3 -model: json/utilities.json -meta-description: -meta-index: true ---- - -

    - -{{#>_docs-example}} - {{#each model.colours as |value property|}} - {{#each this}} -
    - -

    .{{@key}}

    - -
    - {{/each}} - {{/each}} -{{/_docs-example}} diff --git a/src/docs/content/utilities/display.hbs b/src/docs/content/utilities/display.hbs index a44bab78..c18c795c 100644 --- a/src/docs/content/utilities/display.hbs +++ b/src/docs/content/utilities/display.hbs @@ -1,24 +1,16 @@ --- title: Display width: narrow -intro: +intro: Utilities for controlling the display box type of an element. no-blank: true order: 4 model: json/utilities.json -meta-description: +meta-description: Utilities for controlling the display box type of an element. meta-index: true --- -

    +

    Block & Inline

    {{#>_docs-example}} - {{#each model.colours as |value property|}} - {{#each this}} -
    - -

    .{{@key}}

    - -
    - {{/each}} - {{/each}} + {{/_docs-example}} diff --git a/src/docs/content/utilities/flex.hbs b/src/docs/content/utilities/flex.hbs index c73a353f..4ca0d92c 100644 --- a/src/docs/content/utilities/flex.hbs +++ b/src/docs/content/utilities/flex.hbs @@ -1,11 +1,11 @@ --- title: Flex width: narrow -intro: +intro: Utilities to manage the layout, alignment and sizing of flex items and components with a suite of responsive flexbox utilities. no-blank: true order: 5 model: json/utilities.json -meta-description: +meta-description: Utilities to manage the layout, alignment and sizing of flex items and components with a suite of responsive flexbox utilities. meta-index: true --- diff --git a/src/docs/content/utilities/float.hbs b/src/docs/content/utilities/float.hbs index dd4ae668..af280807 100644 --- a/src/docs/content/utilities/float.hbs +++ b/src/docs/content/utilities/float.hbs @@ -1,11 +1,11 @@ --- title: Float width: narrow -intro: +intro: Utilities for controlling the wrapping of content around an element. no-blank: true order: 6 model: json/utilities.json -meta-description: +meta-description: Utilities for controlling the wrapping of content around an element. meta-index: true --- diff --git a/src/docs/content/utilities/json/utilities.json b/src/docs/content/utilities/json/utilities.json index ba806fca..1f3e9ba9 100644 --- a/src/docs/content/utilities/json/utilities.json +++ b/src/docs/content/utilities/json/utilities.json @@ -56,7 +56,7 @@ "hover": "nsw-bg--info-light-hover", "text": "nsw-text--dark" }, - "nsw-bg-success-dark": { + "nsw-bg--success-dark": { "hover": "nsw-bg--success-dark-hover", "text": "nsw-text--light" }, @@ -103,82 +103,30 @@ "text": "nsw-text--light" } }, - "colours": { - "background colour": { - "nsw-bg--brand-dark": "nsw-brand-dark", - "nsw-bg--brand-light": "nsw-brand-light", - "nsw-bg--brand-supplementary": "nsw-brand-supplementary" - }, - "text colour": { - "nsw-text--dark":"nsw-text-dark", - "nsw-text--light":"nsw-text-light", - "nsw-text--brand-dark":"nsw-brand-dark", - "nsw-text--brand-light":"nsw-brand-light", - "nsw-text--brand-supplementary":"nsw-brand-supplementary" - }, - "border colour": { - "nsw-border--text-dark":"nsw-text-dark", - "nsw-border--text-light":"nsw-text-light", - "nsw-border--brand-dark":"nsw-brand-dark", - "nsw-border--brand-light":"nsw-brand-light", - "nsw-border--brand-supplementary":"nsw-brand-supplementary" - } - }, - "font": { - "font size": [ - "h1", - "h2", - "h3", - "h4", - "h5", - "h6" - ] - }, - "border": { - "border size": { - "2": "2px", - "4": "4px", - "6": "6px", - "left-2": "2px left", - "right-2": "2px right", - "top-2": "2px top", - "bottom-2": "2px bottom", - "left-4": "4px left", - "right-4": "4px right", - "top-4": "4px top", - "bottom-4": "4px bottom", - "left-6": "6px left", - "right-6": "6px right", - "top-6": "6px top", - "bottom-6": "6px bottom" - } - }, - "svg": { - "svg fill": { - "nsw-fill--brand-dark": "nsw-brand-dark", - "nsw-fill--brand-light":"nsw-brand-light", - "nsw-fill--brand-supplementary":"nsw-brand-supplementary", - "nsw-fill--brand-accent":"nsw-brand-accent", - "nsw-fill--black":"nsw-black", - "nsw-fill--white":"nsw-white", - "nsw-fill--off-white":"nsw-off-white", - "nsw-fill--grey-01":"nsw-grey-01", - "nsw-fill--grey-02":"nsw-grey-02", - "nsw-fill--grey-03":"nsw-grey-03", - "nsw-fill--grey-04":"nsw-grey-04" - }, - "svg stroke": { - "nsw-stroke--brand-dark": "nsw-brand-dark", - "nsw-stroke--brand-light":"nsw-brand-light", - "nsw-stroke--brand-supplementary":"nsw-brand-supplementary", - "nsw-stroke--brand-accent":"nsw-brand-accent", - "nsw-stroke--black":"nsw-black", - "nsw-stroke--white":"nsw-white", - "nsw-stroke--off-white":"nsw-off-white", - "nsw-stroke--grey-01":"nsw-grey-01", - "nsw-stroke--grey-02":"nsw-grey-02", - "nsw-stroke--grey-03":"nsw-grey-03", - "nsw-stroke--grey-04":"nsw-grey-04" + "z-index": { + "900": { + "class": "nsw-z-top", + "property": "z-index: 900;" + }, + "300": { + "class": "nsw-z-upper", + "property": "z-index: 300;" + }, + "200": { + "class": "nsw-z-middle", + "property": "z-index: 200;" + }, + "100": { + "class": "nsw-z-base", + "property": "z-index: 100;" + }, + "0": { + "class": "nsw-z-0", + "property": "z-index: 0;" + }, + "-100": { + "class": "nsw-z-below", + "property": "z-index: -100;" } } } diff --git a/src/docs/content/utilities/object-fit.hbs b/src/docs/content/utilities/object-fit.hbs index c6880381..6da47ef4 100644 --- a/src/docs/content/utilities/object-fit.hbs +++ b/src/docs/content/utilities/object-fit.hbs @@ -1,11 +1,11 @@ --- title: Object fit width: narrow -intro: +intro: Utilities for controlling how a replaced element's content should be resized. no-blank: true order: 7 model: json/utilities.json -meta-description: +meta-description: Utilities for controlling how a replaced element's content should be resized. meta-index: true --- diff --git a/src/docs/content/utilities/opacity.hbs b/src/docs/content/utilities/opacity.hbs index ea3629de..acf9c371 100644 --- a/src/docs/content/utilities/opacity.hbs +++ b/src/docs/content/utilities/opacity.hbs @@ -1,11 +1,11 @@ --- title: Opacity width: narrow -intro: +intro: Utilities for controlling the opacity of an element. no-blank: true order: 8 model: json/utilities.json -meta-description: +meta-description: Utilities for controlling the opacity of an element. meta-index: true --- diff --git a/src/docs/content/utilities/overflow.hbs b/src/docs/content/utilities/overflow.hbs index 8440f0da..39ac4400 100644 --- a/src/docs/content/utilities/overflow.hbs +++ b/src/docs/content/utilities/overflow.hbs @@ -1,11 +1,11 @@ --- title: Overflow width: narrow -intro: +intro: Utilities for controlling how an element handles content that is too large for the container. no-blank: true order: 9 model: json/utilities.json -meta-description: +meta-description: Utilities for controlling how an element handles content that is too large for the container. meta-index: true --- diff --git a/src/docs/content/utilities/position.hbs b/src/docs/content/utilities/position.hbs index deb31c9c..83ee27c7 100644 --- a/src/docs/content/utilities/position.hbs +++ b/src/docs/content/utilities/position.hbs @@ -1,11 +1,11 @@ --- title: Position width: narrow -intro: +intro: Utilities for controlling how an element is positioned in the DOM. no-blank: true order: 10 model: json/utilities.json -meta-description: +meta-description: Utilities for controlling how an element is positioned in the DOM. meta-index: true --- diff --git a/src/docs/content/utilities/shadows.hbs b/src/docs/content/utilities/shadows.hbs index 1606faa1..e61c4046 100644 --- a/src/docs/content/utilities/shadows.hbs +++ b/src/docs/content/utilities/shadows.hbs @@ -1,11 +1,11 @@ --- title: Shadows width: narrow -intro: +intro: Utilities for controlling the box shadow of an element. no-blank: true order: 11 model: json/utilities.json -meta-description: +meta-description: Utilities for controlling the box shadow of an element. meta-index: true --- diff --git a/src/docs/content/utilities/sizing.hbs b/src/docs/content/utilities/sizing.hbs index 32a59dd1..266dd58d 100644 --- a/src/docs/content/utilities/sizing.hbs +++ b/src/docs/content/utilities/sizing.hbs @@ -1,11 +1,11 @@ --- title: Sizing width: narrow -intro: +intro: Utilities for setting the width, minimum width, maximum width, height, minimum height and maximum height of an element. no-blank: true order: 12 model: json/utilities.json -meta-description: +meta-description: Utilities for setting the width, minimum width, maximum width, height, minimum height and maximum height of an element. meta-index: true --- diff --git a/src/docs/content/utilities/spacing.hbs b/src/docs/content/utilities/spacing.hbs index dd439239..ac148ec0 100644 --- a/src/docs/content/utilities/spacing.hbs +++ b/src/docs/content/utilities/spacing.hbs @@ -1,11 +1,11 @@ --- title: Spacing width: narrow -intro: +intro: Utilities for controlling an element's margin and padding and the space between child elements. no-blank: true order: 13 model: json/utilities.json -meta-description: +meta-description: Utilities for controlling an element's margin and padding and the space between child elements. meta-index: true --- diff --git a/src/docs/content/utilities/svg.hbs b/src/docs/content/utilities/svg.hbs new file mode 100644 index 00000000..2270069d --- /dev/null +++ b/src/docs/content/utilities/svg.hbs @@ -0,0 +1,27 @@ +--- +title: SVG +width: narrow +intro: Utilities for styling the fill, stroke and stroke width of SVG elements. +no-blank: true +order: 18 +model: json/utilities.json +meta-description: Utilities for styling the fill, stroke and stroke width of SVG elements. +meta-index: true +--- + +

    + +{{#>_docs-example showcode=true separated=true}} +
    + -100 + {{#each model.z-index as |value property|}} + {{@key}} + {{/each}} +
    +{{/_docs-example}} + +{{#>_docs-code open=true}} + {{#each model.z-index as |value property|}} +
    {{@key}}
    + {{/each}} +{{/_docs-code}} \ No newline at end of file diff --git a/src/docs/content/utilities/text.hbs b/src/docs/content/utilities/text.hbs index 67468045..b02ed4e1 100644 --- a/src/docs/content/utilities/text.hbs +++ b/src/docs/content/utilities/text.hbs @@ -1,11 +1,11 @@ --- title: Text width: narrow -intro: +intro: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more. no-blank: true order: 14 model: json/utilities.json -meta-description: +meta-description: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more. meta-index: true --- diff --git a/src/docs/content/utilities/vertical-align.hbs b/src/docs/content/utilities/vertical-align.hbs index 9c7dfd09..ed31e7f5 100644 --- a/src/docs/content/utilities/vertical-align.hbs +++ b/src/docs/content/utilities/vertical-align.hbs @@ -1,11 +1,11 @@ --- title: Vertical align width: narrow -intro: +intro: Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements. no-blank: true order: 15 model: json/utilities.json -meta-description: +meta-description: Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements. meta-index: true --- diff --git a/src/docs/content/utilities/vertical-rule.hbs b/src/docs/content/utilities/vertical-rule.hbs index 9c747e6e..1475f097 100644 --- a/src/docs/content/utilities/vertical-rule.hbs +++ b/src/docs/content/utilities/vertical-rule.hbs @@ -1,11 +1,11 @@ --- title: Vertical rule width: narrow -intro: +intro: Use the custom vertical rule helper to create vertical dividers like the
    element. no-blank: true order: 16 model: json/utilities.json -meta-description: +meta-description: Use the custom vertical rule helper to create vertical dividers like the
    element. meta-index: true --- diff --git a/src/docs/content/utilities/visibility.hbs b/src/docs/content/utilities/visibility.hbs index 00aaae31..c9deb00f 100644 --- a/src/docs/content/utilities/visibility.hbs +++ b/src/docs/content/utilities/visibility.hbs @@ -1,24 +1,25 @@ --- title: Visibility width: narrow -intro: +intro: Control the visibility of elements, without modifying their display, with visibility utilities. no-blank: true order: 17 model: json/utilities.json -meta-description: +meta-description: Control the visibility of elements, without modifying their display, with visibility utilities. meta-index: true ---

    -{{#>_docs-example}} - {{#each model.colours as |value property|}} - {{#each this}} -
    - -

    .{{@key}}

    - -
    - {{/each}} - {{/each}} -{{/_docs-example}} +{{#>_docs-code open=true}} +
    +
    +{{/_docs-code}} + +

    Visually hidden

    +

    Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with .visually-hidden. Use .visually-hidden-focusable to visually hide an element by default, but to display it when it’s focused (e.g. by a keyboard-only user). .visually-hidden-focusable can also be applied to a container–thanks to :focus-within, the container will be displayed when any child element of the container receives focus.

    + +{{#>_docs-code open=true}} +
    +
    +{{/_docs-code}} \ No newline at end of file diff --git a/src/docs/content/utilities/z-index.hbs b/src/docs/content/utilities/z-index.hbs index e3180fa4..ab395014 100644 --- a/src/docs/content/utilities/z-index.hbs +++ b/src/docs/content/utilities/z-index.hbs @@ -1,24 +1,55 @@ --- title: Z-index width: narrow -intro: +intro: Utilities for controlling the stack order of an element. no-blank: true order: 18 model: json/utilities.json -meta-description: +meta-description: Utilities for controlling the stack order of an element. meta-index: true --- -

    +

    Setting the z-index

    +

    Control the stack order (or three-dimensional positioning) of an element, regardless of order it has been displayed, using the z-{index} utilities.

    -{{#>_docs-example}} - {{#each model.colours as |value property|}} - {{#each this}} -
    - -

    .{{@key}}

    - -
    - {{/each}} +
    +
    + + + + + + + {{#each model.z-index as |value property|}} + + + + {{/each}} + +
    +

    Class

    +     		+

    Properties

    +
    +

    {{this.class}}

    +     		+

    {{this.property}}

    +
    +
    +
    + +{{#>_docs-example showcode=true separated=true}} +
    + -100 + {{#each model.z-index as |value property|}} + {{@key}} + {{/each}} +
    {{/_docs-example}} + +{{#>_docs-code open=true}} + {{#each model.z-index as |value property|}} +
    {{@key}}
    + {{/each}} +{{/_docs-code}} \ No newline at end of file diff --git a/src/docs/docs.scss b/src/docs/docs.scss index bde75bac..37b54862 100644 --- a/src/docs/docs.scss +++ b/src/docs/docs.scss @@ -527,7 +527,7 @@ $header-height: 151px; position: relative; display: none; margin-top: rem(24px); - max-width: rem(800px); + max-width: rem(872px); &.active { display: block; @@ -562,7 +562,7 @@ $header-height: 151px; &__wrapper { min-height: rem(68px); - max-width: rem(800px); + max-width: rem(872px); max-height: rem(400px); overflow: auto; background-color: var(--nsw-white); diff --git a/src/global/scss/helpers/_api.scss b/src/global/scss/helpers/_api.scss index 39eeb509..fcbea85a 100644 --- a/src/global/scss/helpers/_api.scss +++ b/src/global/scss/helpers/_api.scss @@ -1,5 +1,6 @@ -// Loop over each breakpoint /* stylelint-disable string-quotes */ + +// Loop over each breakpoint @each $breakpoint in map-keys($nsw-breakpoints) { // Generate media query if needed diff --git a/src/global/scss/helpers/_list.scss b/src/global/scss/helpers/_list.scss index 9ff26f84..8714de84 100644 --- a/src/global/scss/helpers/_list.scss +++ b/src/global/scss/helpers/_list.scss @@ -1,4 +1,4 @@ -$nsw-helper-list-sizes: (8, 16, 32); +$nsw-helper-list-sizes: (-8, -16, -32, 8, 16, 32); .nsw-list { display: flex; diff --git a/src/global/scss/helpers/_utilities.scss b/src/global/scss/helpers/_utilities.scss index e9896971..ec7c89cb 100644 --- a/src/global/scss/helpers/_utilities.scss +++ b/src/global/scss/helpers/_utilities.scss @@ -95,7 +95,7 @@ $utilities: map-merge(( ), "border": ( property: border, - class: nsw-border, + class: nsw-border-, values: $nsw-border-widths, ), "border-top": ( @@ -156,13 +156,8 @@ $utilities: map-merge(( "width": ( property: width, class: nsw-width, - values: ( - 25: 25%, - 50: 50%, - 75: 75%, - 100: 100%, - auto: auto - ) + responsive: true, + values: $sizes ), "max-width": ( property: max-width, diff --git a/src/global/scss/settings/_settings.scss b/src/global/scss/settings/_settings.scss index 145d92d8..2075f5b8 100644 --- a/src/global/scss/settings/_settings.scss +++ b/src/global/scss/settings/_settings.scss @@ -1,3 +1,6 @@ +// Color system + + $prefix: 'nsw-'; $enable-important-utilities: true !default; @@ -34,6 +37,7 @@ $nsw-z-index: ( upper: 300, middle: 200, base: 100, + 0:0, below: -100, ) !default; @@ -108,5 +112,35 @@ $nsw-position-values: ( 100: 100% ) !default; +// width and height + +$sizes: ( + '4xs': '0.25rem', + '3xs': '0.5rem', + '2xs': '0.75rem', + 'xs': '1rem', + 'sm': '1.5rem', + 'md': '2rem', + 'lg': '3rem', + 'xl': '4rem', + '2xl': '6rem', + '3xl': '8rem', + '4xl': '16rem', + 0: '0', + 10: '10%', + 20: '20%', + 25: '25%', + 30: '30%', + 33: '33%', + 40: '40%', + 50: '50%', + 60: '60%', + 70: '70%', + 75: '75%', + 80: '80%', + 90: '90%', + 100: '100%' +) !default; + // Transitions $nsw-transition-duration: 0.15s ease-in-out !default; diff --git a/src/templates/landing/events.hbs b/src/templates/landing/events.hbs index c53dc792..5603e6bf 100644 --- a/src/templates/landing/events.hbs +++ b/src/templates/landing/events.hbs @@ -43,7 +43,7 @@ model:

    There are special occasions on NSW public holidays. Australia Day is January 26. The national day celebrates Australia’s diversity and achievements. The main stage is Sydney Harbour, one of the world’s great natural harbours. A lovely way to enjoy the waterway is on a ferry or harbour cruise.

    -
    +
    {{>_link-list title="Upcoming holidays" list=(split "2023 NSW public holidays;2023 public school holidays") From 304943e57c8f2dfcd1e8f62ee63bbf44f3104950 Mon Sep 17 00:00:00 2001 From: Lauren Hitchon Date: Thu, 18 May 2023 18:59:21 +1000 Subject: [PATCH 03/17] Moved spacing to utilities --- src/core/_all.scss | 1 - src/core/spacing/_guidance.hbs | 81 ---------------- src/core/spacing/index.hbs | 93 ------------------ src/docs/content/utilities/spacing.hbs | 96 ++++++++++++++++--- src/global/scss/helpers/_all.scss | 1 + .../scss/helpers}/_spacing.scss | 31 ------ src/global/scss/settings/_settings.scss | 33 ++++++- 7 files changed, 116 insertions(+), 220 deletions(-) delete mode 100644 src/core/spacing/_guidance.hbs delete mode 100644 src/core/spacing/index.hbs rename src/{core/spacing => global/scss/helpers}/_spacing.scss (83%) diff --git a/src/core/_all.scss b/src/core/_all.scss index d78fd121..4460ca43 100644 --- a/src/core/_all.scss +++ b/src/core/_all.scss @@ -2,5 +2,4 @@ @import 'iconography/icon'; @import 'layout/layout'; @import 'section/section'; -@import 'spacing/spacing'; @import 'typography/typography'; diff --git a/src/core/spacing/_guidance.hbs b/src/core/spacing/_guidance.hbs deleted file mode 100644 index 87464263..00000000 --- a/src/core/spacing/_guidance.hbs +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Spacing -layout: blank-layout.hbs ---- - -

    Responsive spacing

    -

    Spacing is recommended using an 8-pixel grid to create a consistent visual structure. There are also pre-set responsive spacing units that can be used to create consistent spacing relationships across breakpoints.

    - -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Spacing token0 - 767px68px +
    xs4px8px
    sm8px16px
    md16px32px
    lg2px48px
    xl32px64px
    xxl40px80px
    -
    -
    - -

    Spacing helper classes

    -

    Add responsive margin or padding values to entire element or its sides with shorthand classes.

    -

    The classes are named using the format nsw-{property}-{sides}-{size}.

    -

    Where property is one of:

    -
      -
    • m - for classes that set margin
      • -
    • p - for classes that set padding
      • -
    -

    Where sides is one of:

    -
      -
    • top - for classes that set margin-top or padding-top
      • -
    • bottom - for classes that set margin-bottom or padding-bottom
      • -
    • left - for classes that set margin-left or padding-left
      • -
    • right - for classes that set margin-right or padding-right
      • -
    • x - for classes that set margin or padding on both left and right
      • -
    • y - for classes that set margin or padding on both top and bottom
      • -
    • blank - for classes that set a margin or padding on all 4 sides of the element
      • -
    -

    Where size is one of the responsive spacing tokens: xs, sm, md, lg, xl, xxl

    - -{{#>_docs-example simple="true" open="true"}} -
    -
    - Digital - Digital Design System - Transformation -
    -
    -{{/_docs-example}} diff --git a/src/core/spacing/index.hbs b/src/core/spacing/index.hbs deleted file mode 100644 index 06d7efa5..00000000 --- a/src/core/spacing/index.hbs +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Spacing -order: 60 -no-blank: true -directory: spacing -intro: A defined set of spacing units provides good alignment and consistent spacing relationships in components and layout. -meta-description: The NSW Design System defined set of spacing units for alignment and consistent spacing relationships in components and layout. -meta-index: true ---- - -

    Responsive spacing

    -

    Spacing is recommended using an 8-pixel grid with pre-set responsive spacing units that can be used to create consistent spacing relationships across breakpoints.

    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Spacing token0 - 767px768px +
    xs4px8px
    sm8px16px
    md16px32px
    lg24px48px
    xl32px64px
    xxl40px80px
    -
    -
    - -

    Helper classes

    -

    Add responsive margin or padding values to entire element or its sides with shorthand classes.

    -

    The classes are named using the format nsw-{property}-{sides}-{size}.

    -

    Where property is one of:

    -
      -
    • m - for classes that set margin
      • -
    • p - for classes that set padding
      • -
    -

    Where sides is one of:

    -
      -
    • top - for classes that set margin-top or padding-top
      • -
    • bottom - for classes that set margin-bottom or padding-bottom -
      • -
    • left - for classes that set margin-left or padding-left -
      • -
    • right - for classes that set margin-right or padding-right -
      • -
    • x - for classes that set margin or padding on both left and right -
      • -
    • y - for classes that set margin or padding on both top and bottom -
      • -
    • blank - for classes that set a margin or padding on all 4 sides of the element -
      • -
    -

    Where size is one of the responsive spacing tokens: xs, sm, md, lg, xl, xxl.

    -

    Here is a demo of creating a banner component using utility classes alone:

    - -{{#>_docs-example simple="true" separated="true"}} -
    - label -

    This is a heading

    -
    -

    This is a intro text with longer vertical space to the button

    -
    - -
    -{{/_docs-example}} diff --git a/src/docs/content/utilities/spacing.hbs b/src/docs/content/utilities/spacing.hbs index ac148ec0..2a5e5ddf 100644 --- a/src/docs/content/utilities/spacing.hbs +++ b/src/docs/content/utilities/spacing.hbs @@ -1,24 +1,94 @@ --- title: Spacing width: narrow -intro: Utilities for controlling an element's margin and padding and the space between child elements. +intro: A defined set of spacing units provides good alignment and consistent spacing relationships in components and layout. no-blank: true order: 13 model: json/utilities.json -meta-description: Utilities for controlling an element's margin and padding and the space between child elements. +meta-description: The NSW Design System defined set of spacing units for alignment and consistent spacing relationships in components and layout. meta-index: true --- -

    +

    Responsive spacing

    +

    Spacing is recommended using an 8-pixel grid with pre-set responsive spacing units that can be used to create consistent spacing relationships across breakpoints.

    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Spacing token0 - 767px768px +
    xs4px8px
    sm8px16px
    md16px32px
    lg24px48px
    xl32px64px
    xxl40px80px
    +
    +
    -{{#>_docs-example}} - {{#each model.colours as |value property|}} - {{#each this}} -
    - -

    .{{@key}}

    - -
    - {{/each}} - {{/each}} +

    Helper classes

    +

    Add responsive margin or padding values to entire element or its sides with shorthand classes.

    +

    The classes are named using the format nsw-{property}-{sides}-{size}.

    +

    Where property is one of:

    +
      +
    • m - for classes that set margin
      • +
    • p - for classes that set padding
      • +
    +

    Where sides is one of:

    +
      +
    • top - for classes that set margin-top or padding-top
      • +
    • bottom - for classes that set margin-bottom or padding-bottom +
      • +
    • left - for classes that set margin-left or padding-left +
      • +
    • right - for classes that set margin-right or padding-right +
      • +
    • x - for classes that set margin or padding on both left and right +
      • +
    • y - for classes that set margin or padding on both top and bottom +
      • +
    • blank - for classes that set a margin or padding on all 4 sides of the element +
      • +
    +

    Where size is one of the responsive spacing tokens: xs, sm, md, lg, xl, xxl.

    +

    Here is a demo of creating a banner component using utility classes alone:

    + +{{#>_docs-example simple="true" separated="true"}} +
    + label +

    This is a heading

    +
    +

    This is a intro text with longer vertical space to the button

    +
    + +
    {{/_docs-example}} diff --git a/src/global/scss/helpers/_all.scss b/src/global/scss/helpers/_all.scss index 76c72992..d424ba02 100644 --- a/src/global/scss/helpers/_all.scss +++ b/src/global/scss/helpers/_all.scss @@ -1,5 +1,6 @@ @import 'list'; @import 'text'; +@import 'spacing'; @import 'utilities'; @import 'visibility'; @import 'api'; diff --git a/src/core/spacing/_spacing.scss b/src/global/scss/helpers/_spacing.scss similarity index 83% rename from src/core/spacing/_spacing.scss rename to src/global/scss/helpers/_spacing.scss index 2668a5ef..82c96250 100644 --- a/src/core/spacing/_spacing.scss +++ b/src/global/scss/helpers/_spacing.scss @@ -4,37 +4,6 @@ @include component-spacing(); } -$spacers: ( - 0: ( - mobile: 0, - desktop: 0 - ), - xs: ( - mobile: 4px, - desktop: 8px - ), - sm: ( - mobile: 8px, - desktop: 16px - ), - md: ( - mobile: 16px, - desktop: 32px - ), - lg: ( - mobile: 24px, - desktop: 48px - ), - xl: ( - mobile: 32px, - desktop: 64px - ), - xxl: ( - mobile: 40px, - desktop: 80px - ) -); - @each $prop, $abbrev in (margin: nsw-m, padding: nsw-p) { @each $size, $lengths in $spacers { $length-mobile: rem(map-get($lengths, mobile)); diff --git a/src/global/scss/settings/_settings.scss b/src/global/scss/settings/_settings.scss index 2075f5b8..d8ebf218 100644 --- a/src/global/scss/settings/_settings.scss +++ b/src/global/scss/settings/_settings.scss @@ -112,8 +112,39 @@ $nsw-position-values: ( 100: 100% ) !default; -// width and height +// Spaces +$spacers: ( + 0: ( + mobile: 0, + desktop: 0 + ), + xs: ( + mobile: 4px, + desktop: 8px + ), + sm: ( + mobile: 8px, + desktop: 16px + ), + md: ( + mobile: 16px, + desktop: 32px + ), + lg: ( + mobile: 24px, + desktop: 48px + ), + xl: ( + mobile: 32px, + desktop: 64px + ), + xxl: ( + mobile: 40px, + desktop: 80px + ) +); +// Width and height $sizes: ( '4xs': '0.25rem', '3xs': '0.5rem', From b4ce6f9f19789232c894a5ea0dc4c705b2a9be03 Mon Sep 17 00:00:00 2001 From: Lauren Hitchon Date: Fri, 19 May 2023 09:22:12 +1000 Subject: [PATCH 04/17] Display content created --- src/docs/content/utilities/borders.hbs | 72 +++++++-- src/docs/content/utilities/display.hbs | 137 +++++++++++++++++- .../content/utilities/json/utilities.json | 41 ++++++ src/global/scss/helpers/_utilities.scss | 66 ++++----- src/global/scss/settings/_settings.scss | 51 ++++--- 5 files changed, 287 insertions(+), 80 deletions(-) diff --git a/src/docs/content/utilities/borders.hbs b/src/docs/content/utilities/borders.hbs index cffc4cda..645f3658 100644 --- a/src/docs/content/utilities/borders.hbs +++ b/src/docs/content/utilities/borders.hbs @@ -9,32 +9,74 @@ meta-description: Utilities for controlling the border radius, width, style and meta-index: true --- +

    Additive

    +

    Add borders to custom elements:

    + +{{#>_docs-example showcode=true separated="true"}} + {{#each model.border.additive as |value property|}} +
    + {{/each}} +{{/_docs-example}} + +{{#>_docs-code open=true}} + {{#each model.border.additive as |value property|}} +
    + {{/each}} +{{/_docs-code}} + +

    Subtractive

    +

    Or remove borders:

    + +{{#>_docs-example showcode=true separated="true"}} + {{#each model.border.subtractive as |value property|}} +
    + {{/each}} +{{/_docs-example}} + +{{#>_docs-code open=true}} + {{#each model.border.subtractive as |value property|}} +
    + {{/each}} +{{/_docs-code}} +

    Border Radius

    -{{#>_docs-example separated="true"}} - {{#each model.background-opacity as |value property|}} -
    -
    .{{this.class}}
    -
    +{{#>_docs-example showcode=true separated="true"}} + {{#each model.border.radius as |value property|}} +
    {{/each}} {{/_docs-example}} +{{#>_docs-code open=true}} + {{#each model.border.radius as |value property|}} +
    + {{/each}} +{{/_docs-code}} +

    Border Width

    -{{#>_docs-example separated="true"}} - {{#each model.background-opacity as |value property|}} -
    -
    .{{this.class}}
    -
    +{{#>_docs-example showcode=true separated="true"}} + {{#each model.border.width as |value property|}} +
    {{/each}} {{/_docs-example}} +{{#>_docs-code open=true}} + {{#each model.border.width as |value property|}} +
    + {{/each}} +{{/_docs-code}} +

    Border Color

    -{{#>_docs-example separated="true"}} - {{#each model.background-opacity as |value property|}} -
    -
    .{{this.class}}
    -
    +{{#>_docs-example showcode=true separated="true"}} + {{#each model.border.color as |value property|}} +
    {{/each}} {{/_docs-example}} + +{{#>_docs-code open=true}} + {{#each model.border.color as |value property|}} +
    + {{/each}} +{{/_docs-code}} diff --git a/src/docs/content/utilities/display.hbs b/src/docs/content/utilities/display.hbs index c18c795c..7b3ab425 100644 --- a/src/docs/content/utilities/display.hbs +++ b/src/docs/content/utilities/display.hbs @@ -9,8 +9,141 @@ meta-description: Utilities for controlling the display box type of an element. meta-index: true --- -

    Block & Inline

    +

    Change the value of the display property with our responsive display utility classes. Classes can be combined for various effects as you need.

    -{{#>_docs-example}} +

    Notation

    +

    Display utility classes that apply to all breakpoints, from xs to xxl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0; and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

    + +

    As such, the classes are named using the format:

    + +
      +
    • .nsw-display-{value} for xs
      • +
    • .nsw-display-{breakpoint}-{value} for sm, md, lg, xl, and xxl.
      • +
    + +

    Where value is one of:

    + +
      + {{#each model.display as |value property|}} +
    • {{this}}
      • + {{/each}} +
    + +

    Examples

    + +{{#>_docs-example showcode=true separated="true"}} +
    +
    +{{/_docs-example}} + +{{#>_docs-code open=true}} +
    +
    +{{/_docs-code}} + +{{#>_docs-example separated="true"}} +
    +

    When controlling the flow of text, using the CSS property display: inline will cause the text inside the element to wrap normally.

    + +

    While using the property display: inline-block will wrap the element to prevent the text inside from extending beyond its parent.

    + +

    Lastly, using the property display: block will put the element on its own line and fill its parent.

    +
    {{/_docs-example}} + + + +{{#>_docs-example showcode=true separated="true"}} +
    +
    +{{/_docs-example}} + +{{#>_docs-code open=true}} +
    +
    +{{/_docs-code}} + +

    Hiding elements

    + +

    For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.

    + +

    To hide elements simply use the .nsw-display-none class or one of the .nsw-display-{sm,md,lg,xl,xxl}-none classes for any responsive screen variation.

    + +

    To show an element only on a given interval of screen sizes you can combine one .nsw-display-*-none class with a .nsw-display-*-* class, for example .nsw-display-none .nsw-display-md-block .nsw-display-xl-none .nsw-display-xxl-none will hide the element for all screen sizes except on medium and large devices.

    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Screen sizeClass
    Hidden on all.nsw-display-none
    Hidden only on xs.nsw-display-none .nsw-display-sm-block
    Hidden only on sm.nsw-display-sm-none .nsw-display-md-block
    Hidden only on md.nsw-display-md-none .nsw-display-lg-block
    Hidden only on lg.nsw-display-lg-none .nsw-display-xl-block
    Hidden only on xl.nsw-display-xl-none .nsw-display-xxl-block
    Hidden only on xxl.nsw-display-xxl-none
    Visible on all.nsw-display-block
    Visible only on xs.nsw-display-block .nsw-display-sm-none
    Visible only on sm.nsw-display-none .nsw-display-sm-block .nsw-display-md-none
    Visible only on md.nsw-display-none .nsw-display-md-block .nsw-display-lg-none
    Visible only on lg.nsw-display-none .nsw-display-lg-block .nsw-display-xl-none
    Visible only on xl.nsw-display-none .nsw-display-xl-block .nsw-display-xxl-none
    Visible only on xxl.nsw-display-none .nsw-display-xxl-block
    +
    +
    + +{{#>_docs-example open=true separated="true"}} +
    hide on lg and wider screens
    +
    hide on screens smaller than lg
    +{{/_docs-example}} \ No newline at end of file diff --git a/src/docs/content/utilities/json/utilities.json b/src/docs/content/utilities/json/utilities.json index 1f3e9ba9..fcdbb0f6 100644 --- a/src/docs/content/utilities/json/utilities.json +++ b/src/docs/content/utilities/json/utilities.json @@ -103,6 +103,47 @@ "text": "nsw-text--light" } }, + "border": { + "additive": { + "nsw-border": "nsw-border", + "top": "nsw-border--top", + "right": "nsw-border--right", + "bottom": "nsw-border--bottom", + "left": "nsw-border--left" + }, + "subtractive": { + "nsw-border-0": "nsw-border-0", + "top-0": "nsw-border--top-0", + "right-0": "nsw-border--right-0", + "bottom-0": "nsw-border--bottom-0", + "left-0": "nsw-border--left-0" + }, + "radius": { + "class": "nsw-border-radius" + }, + "width": { + "1": "nsw-border--1", + "2": "nsw-border--2", + "3": "nsw-border--3", + "4": "nsw-border--4", + "5": "nsw-border--5", + "6": "nsw-border--6" + }, + "color": { + "brand-dark": "nsw-border--brand-dark", + "brand-light": "nsw-border--brand-light", + "brand-supplementary": "nsw-border--brand-supplementary", + "brand-accent": "nsw-border--brand-accent", + "black": "nsw-border--black", + "white": "nsw-border--white", + "off-white": "nsw-border--off-white", + "grey-01": "nsw-border--grey-01", + "grey-02": "nsw-border--grey-02", + "grey-03": "nsw-border--grey-03", + "grey-04": "nsw-border--grey-04" + } + }, + "display" : [ "inline", "inline-block", "block", "grid", "inline-grid", "table", "table-row", "table-cell", "flex", "inline-flex", "none" ], "z-index": { "900": { "class": "nsw-z-top", diff --git a/src/global/scss/helpers/_utilities.scss b/src/global/scss/helpers/_utilities.scss index ec7c89cb..2ae65f6b 100644 --- a/src/global/scss/helpers/_utilities.scss +++ b/src/global/scss/helpers/_utilities.scss @@ -4,19 +4,19 @@ $utilities: () !default; $utilities: map-merge(( "align": ( property: vertical-align, - class: nsw-align-, + class: nsw-align, values: baseline top middle bottom text-bottom text-top ), "float": ( responsive: true, property: float, - class: nsw-float-, + class: nsw-float, values: left right none ), "object-fit": ( responsive: true, property: object-fit, - class: nsw-object-fit-, + class: nsw-object-fit, values: ( contain: contain, cover: cover, @@ -27,7 +27,7 @@ $utilities: map-merge(( ), "opacity": ( property: opacity, - class: nsw-opacity-, + class: nsw-opacity, state: hover, values: ( 0: 0, @@ -39,49 +39,49 @@ $utilities: map-merge(( ), "overflow": ( property: overflow, - class: nsw-overflow-, + class: nsw-overflow, values: auto hidden visible scroll, ), "overflow-x": ( property: overflow-x, - class: nsw-overflow--x, + class: nsw-overflow-x, values: auto hidden visible scroll, ), "overflow-y": ( property: overflow-y, - class: nsw-overflow--y, + class: nsw-overflow-y, values: auto hidden visible scroll, ), "display": ( responsive: true, print: true, property: display, - class: nsw-display-, + class: nsw-display, values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none ), "position": ( property: position, - class: nsw-position-, + class: nsw-position, values: static relative absolute fixed sticky ), "top": ( property: top, - class: nsw-position--top, + class: nsw-position-top, values: $nsw-position-values ), "bottom": ( property: bottom, - class: nsw-position--bottom, + class: nsw-position-bottom, values: $nsw-position-values ), "left": ( property: left, - class: nsw-position--left, + class: nsw-position-left, values: $nsw-position-values ), "right": ( property: right, - class: nsw-position--right, + class: nsw-position-right, values: $nsw-position-values ), "translate-middle": ( @@ -93,6 +93,14 @@ $utilities: map-merge(( y: translateY(-50%), ) ), + "border-std": ( + property: border, + class: nsw-border, + values: ( + null: $nsw-border, + 0: 0, + ) + ), "border": ( property: border, class: nsw-border-, @@ -177,13 +185,7 @@ $utilities: map-merge(( "height": ( property: height, class: nsw-height, - values: ( - 25: 25%, - 50: 50%, - 75: 75%, - 100: 100%, - auto: auto - ) + values: $sizes ), "max-height": ( property: max-height, @@ -309,7 +311,7 @@ $utilities: map-merge(( ), "font-weight": ( property: font-weight, - class: nsw-font-weight, + class: nsw-text, values: ( lighter: $nsw-font-weight-lighter, light: $nsw-font-weight-light, @@ -329,22 +331,22 @@ $utilities: map-merge(( "text-align": ( responsive: true, property: text-align, - class: nsw-text-, + class: nsw-text, values: left right center ), "text-decoration": ( property: text-decoration, - class: nsw-text-, + class: nsw-text, values: none underline line-through ), "text-transform": ( property: text-transform, - class: nsw-text-, + class: nsw-text, values: lowercase uppercase capitalize ), "white-space": ( property: white-space, - class: nsw-text-, + class: nsw-text, values: ( wrap: normal, nowrap: nowrap, @@ -389,26 +391,16 @@ $utilities: map-merge(( ), "fill": ( property: fill, - class: nsw-fill-, + class: nsw-fill, state: hover, values: $nsw-base-colours, ), "stroke": ( property: stroke, - class: nsw-stroke-, + class: nsw-stroke, state: hover, values: $nsw-base-colours, ), - "user-select": ( - property: user-select, - class: nsw-user-select, - values: all auto none - ), - "pointer-events": ( - property: pointer-events, - class: nsw-pointer, - values: none auto, - ), "visibility": ( property: visibility, class: nsw, diff --git a/src/global/scss/settings/_settings.scss b/src/global/scss/settings/_settings.scss index d8ebf218..fce93407 100644 --- a/src/global/scss/settings/_settings.scss +++ b/src/global/scss/settings/_settings.scss @@ -93,7 +93,6 @@ $nsw-text-colours: map-merge($nsw-base-colours, ( $nsw-border: var(--nsw-border-width) var(--nsw-border-style) var(--nsw-border-color); $nsw-border-widths: ( - 0: 0, 1: var(--nsw-border-width) var(--nsw-border-style) var(--nsw-border-color), 2: 2px var(--nsw-border-style) var(--nsw-border-color), 3: 3px var(--nsw-border-style) var(--nsw-border-color), @@ -146,31 +145,31 @@ $spacers: ( // Width and height $sizes: ( - '4xs': '0.25rem', - '3xs': '0.5rem', - '2xs': '0.75rem', - 'xs': '1rem', - 'sm': '1.5rem', - 'md': '2rem', - 'lg': '3rem', - 'xl': '4rem', - '2xl': '6rem', - '3xl': '8rem', - '4xl': '16rem', - 0: '0', - 10: '10%', - 20: '20%', - 25: '25%', - 30: '30%', - 33: '33%', - 40: '40%', - 50: '50%', - 60: '60%', - 70: '70%', - 75: '75%', - 80: '80%', - 90: '90%', - 100: '100%' + 4xs: 0.25rem, + 3xs: 0.5rem, + 2xs: 0.75rem, + xs: 1rem, + sm: 1.5rem, + md: 2rem, + lg: 3rem, + xl: 4rem, + 2xl: 6rem, + 3xl: 8rem, + 4xl: 16rem, + 0: 0, + 10: 10%, + 20: 20%, + 25: 25%, + 30: 30%, + 33: 33%, + 40: 40%, + 50: 50%, + 60: 60%, + 70: 70%, + 75: 75%, + 80: 80%, + 90: 90%, + 100: 100% ) !default; // Transitions From 63e7c23ca2dd7cd250751903d98bde89a11fed32 Mon Sep 17 00:00:00 2001 From: Lauren Hitchon Date: Fri, 19 May 2023 09:45:45 +1000 Subject: [PATCH 05/17] Update display.hbs --- src/docs/content/utilities/display.hbs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/docs/content/utilities/display.hbs b/src/docs/content/utilities/display.hbs index 7b3ab425..11da848c 100644 --- a/src/docs/content/utilities/display.hbs +++ b/src/docs/content/utilities/display.hbs @@ -66,9 +66,9 @@ meta-index: true

    Hiding elements

    -

    For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.

    +

    To hide an element and remove it from the page layout (compare with .nsw-invisible from the visibility documentation) use the .nsw-display-none class or one of the .nsw-display-{sm,md,lg,xl,xxl}-none classes for any responsive screen variation.

    -

    To hide elements simply use the .nsw-display-none class or one of the .nsw-display-{sm,md,lg,xl,xxl}-none classes for any responsive screen variation.

    +

    For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.

    To show an element only on a given interval of screen sizes you can combine one .nsw-display-*-none class with a .nsw-display-*-* class, for example .nsw-display-none .nsw-display-md-block .nsw-display-xl-none .nsw-display-xxl-none will hide the element for all screen sizes except on medium and large devices.

    From 0185272fae49f7747d48dfeb13a52ffabcb7be93 Mon Sep 17 00:00:00 2001 From: Lauren Hitchon Date: Wed, 24 May 2023 11:25:11 +1000 Subject: [PATCH 06/17] object-fit, float and updated ordering --- src/docs/content/utilities/float.hbs | 47 ++++++++++++++----- src/docs/content/utilities/object-fit.hbs | 43 ++++++++++++----- src/docs/content/utilities/svg.hbs | 23 ++++----- src/docs/content/utilities/text.hbs | 4 +- src/docs/content/utilities/vertical-align.hbs | 2 +- src/docs/content/utilities/vertical-rule.hbs | 2 +- src/docs/content/utilities/visibility.hbs | 2 +- src/docs/content/utilities/z-index.hbs | 2 +- 8 files changed, 81 insertions(+), 44 deletions(-) diff --git a/src/docs/content/utilities/float.hbs b/src/docs/content/utilities/float.hbs index af280807..3056fff8 100644 --- a/src/docs/content/utilities/float.hbs +++ b/src/docs/content/utilities/float.hbs @@ -9,16 +9,41 @@ meta-description: Utilities for controlling the wrapping of content around an el meta-index: true --- -

    +

    Overview

    -{{#>_docs-example}} - {{#each model.colours as |value property|}} - {{#each this}} -
    - -

    .{{@key}}

    - -
    - {{/each}} - {{/each}} +

    These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the CSS float property. !important is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no effect on flex items.

    + +{{#>_docs-example open=true separated=true}} +
    Float left on all viewport sizes

    +
    Float right on all viewport sizes

    +
    Don't float on all viewport sizes
    {{/_docs-example}} + +

    Breakpoints

    +

    Responsive variations also exist for each float value.

    + +{{#>_docs-example open=true separated=true}} +
    Float left on viewports sized SM (small) or wider

    +
    Float left on viewports sized MD (medium) or wider

    +
    Float left on viewports sized LG (large) or wider

    +
    Float left on viewports sized XL (extra-large) or wider

    +{{/_docs-example}} + +

    All the supported classes

    +
      +
    • .nsw-float-left
      • +
    • .nsw-float-right
      • +
    • .nsw-float-none
      • +
    • .nsw-float-sm-left
      • +
    • .nsw-float-sm-right
      • +
    • .nsw-float-sm-none
      • +
    • .nsw-float-md-left
      • +
    • .nsw-float-md-right
      • +
    • .nsw-float-md-none
      • +
    • .nsw-float-lg-left
      • +
    • .nsw-float-lg-right
      • +
    • .nsw-float-lg-none
      • +
    • .nsw-float-xl-left
      • +
    • .nsw-float-xl-right
      • +
    • .nsw-float-xl-none
      • +
    \ No newline at end of file diff --git a/src/docs/content/utilities/object-fit.hbs b/src/docs/content/utilities/object-fit.hbs index 6da47ef4..1bb4ca61 100644 --- a/src/docs/content/utilities/object-fit.hbs +++ b/src/docs/content/utilities/object-fit.hbs @@ -9,16 +9,35 @@ meta-description: Utilities for controlling how a replaced element's content sho meta-index: true --- -

    - -{{#>_docs-example}} - {{#each model.colours as |value property|}} - {{#each this}} -
    - -

    .{{@key}}

    - -
    - {{/each}} - {{/each}} +

    Overview

    + +

    These utility classes control how a replaced element's content should be resized using the CSS object-fit property. !important is included to avoid specificity issues.

    + +

    Classes for the value of object-fit are named using the format .nsw-object-fit-{value}. Choose from the following values:

    +
      +
    • contain
      • +
    • cover
      • +
    • fill
      • +
    • scale (for scale-down)
      • +
    • none
      • +
    + +

    Examples

    + +

    Add the nsw-object-fit-{value} class to the replaced element:

    + +{{#>_docs-example open=true separated=true}} +Placeholder : Object fit contain + +Placeholder : Object fit cover + +Placeholder : Object fit fill + +Placeholder : Object fit scale down + +Placeholder : Object fit none {{/_docs-example}} + + + + diff --git a/src/docs/content/utilities/svg.hbs b/src/docs/content/utilities/svg.hbs index 2270069d..eaf69e13 100644 --- a/src/docs/content/utilities/svg.hbs +++ b/src/docs/content/utilities/svg.hbs @@ -3,7 +3,7 @@ title: SVG width: narrow intro: Utilities for styling the fill, stroke and stroke width of SVG elements. no-blank: true -order: 18 +order: 14 model: json/utilities.json meta-description: Utilities for styling the fill, stroke and stroke width of SVG elements. meta-index: true @@ -11,17 +11,12 @@ meta-index: true

    -{{#>_docs-example showcode=true separated=true}} -
    - -100 - {{#each model.z-index as |value property|}} - {{@key}} +{{#>_docs-example}} + {{#each model.colours as |value property|}} + {{#each this}} +
    +

    .{{@key}}

    +
    + {{/each}} {{/each}} -
    -{{/_docs-example}} - -{{#>_docs-code open=true}} - {{#each model.z-index as |value property|}} -
    {{@key}}
    - {{/each}} -{{/_docs-code}} \ No newline at end of file +{{/_docs-example}} \ No newline at end of file diff --git a/src/docs/content/utilities/text.hbs b/src/docs/content/utilities/text.hbs index b02ed4e1..99b4423d 100644 --- a/src/docs/content/utilities/text.hbs +++ b/src/docs/content/utilities/text.hbs @@ -3,7 +3,7 @@ title: Text width: narrow intro: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more. no-blank: true -order: 14 +order: 15 model: json/utilities.json meta-description: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more. meta-index: true @@ -15,9 +15,7 @@ meta-index: true {{#each model.colours as |value property|}} {{#each this}}
    -

    .{{@key}}

    -
    {{/each}} {{/each}} diff --git a/src/docs/content/utilities/vertical-align.hbs b/src/docs/content/utilities/vertical-align.hbs index ed31e7f5..31451f1a 100644 --- a/src/docs/content/utilities/vertical-align.hbs +++ b/src/docs/content/utilities/vertical-align.hbs @@ -3,7 +3,7 @@ title: Vertical align width: narrow intro: Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements. no-blank: true -order: 15 +order: 16 model: json/utilities.json meta-description: Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements. meta-index: true diff --git a/src/docs/content/utilities/vertical-rule.hbs b/src/docs/content/utilities/vertical-rule.hbs index 1475f097..6f93808d 100644 --- a/src/docs/content/utilities/vertical-rule.hbs +++ b/src/docs/content/utilities/vertical-rule.hbs @@ -3,7 +3,7 @@ title: Vertical rule width: narrow intro: Use the custom vertical rule helper to create vertical dividers like the
    element. no-blank: true -order: 16 +order: 17 model: json/utilities.json meta-description: Use the custom vertical rule helper to create vertical dividers like the
    element. meta-index: true diff --git a/src/docs/content/utilities/visibility.hbs b/src/docs/content/utilities/visibility.hbs index c9deb00f..ce309fb8 100644 --- a/src/docs/content/utilities/visibility.hbs +++ b/src/docs/content/utilities/visibility.hbs @@ -3,7 +3,7 @@ title: Visibility width: narrow intro: Control the visibility of elements, without modifying their display, with visibility utilities. no-blank: true -order: 17 +order: 18 model: json/utilities.json meta-description: Control the visibility of elements, without modifying their display, with visibility utilities. meta-index: true diff --git a/src/docs/content/utilities/z-index.hbs b/src/docs/content/utilities/z-index.hbs index ab395014..673f75dc 100644 --- a/src/docs/content/utilities/z-index.hbs +++ b/src/docs/content/utilities/z-index.hbs @@ -3,7 +3,7 @@ title: Z-index width: narrow intro: Utilities for controlling the stack order of an element. no-blank: true -order: 18 +order: 19 model: json/utilities.json meta-description: Utilities for controlling the stack order of an element. meta-index: true From e0cd4df0d2f7e819dfd20e6132fe325d83f7822d Mon Sep 17 00:00:00 2001 From: Lauren Hitchon Date: Wed, 7 Jun 2023 10:53:13 +1000 Subject: [PATCH 07/17] Update _settings.scss --- src/global/scss/settings/_settings.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/global/scss/settings/_settings.scss b/src/global/scss/settings/_settings.scss index fce93407..c27e44d0 100644 --- a/src/global/scss/settings/_settings.scss +++ b/src/global/scss/settings/_settings.scss @@ -1,6 +1,3 @@ -// Color system - - $prefix: 'nsw-'; $enable-important-utilities: true !default; From 1bab4c02f504fc3196162d6dcfc433f082051ea6 Mon Sep 17 00:00:00 2001 From: Lauren Hitchon Date: Fri, 4 Aug 2023 16:17:11 +1000 Subject: [PATCH 08/17] Utility pages added --- src/docs/content/utilities/box-shadow.hbs | 33 +++++++ src/docs/content/utilities/display.hbs | 2 - .../content/utilities/json/utilities.json | 5 +- src/docs/content/utilities/opacity.hbs | 14 +-- src/docs/content/utilities/overflow.hbs | 96 ++++++++++++++++--- src/docs/content/utilities/shadows.hbs | 24 ----- src/docs/content/utilities/svg.hbs | 36 +++++-- src/docs/content/utilities/vertical-align.hbs | 56 ++++++++--- src/docs/content/utilities/vertical-rule.hbs | 37 ++++--- src/docs/content/utilities/visibility.hbs | 50 ++++++++-- src/global/scss/base/_mixins.scss | 29 +++--- src/global/scss/helpers/_all.scss | 1 + src/global/scss/helpers/_vertical-rule.scss | 8 ++ src/global/scss/helpers/_visibility.scss | 9 +- 14 files changed, 290 insertions(+), 110 deletions(-) create mode 100644 src/docs/content/utilities/box-shadow.hbs delete mode 100644 src/docs/content/utilities/shadows.hbs create mode 100644 src/global/scss/helpers/_vertical-rule.scss diff --git a/src/docs/content/utilities/box-shadow.hbs b/src/docs/content/utilities/box-shadow.hbs new file mode 100644 index 00000000..04beb0a0 --- /dev/null +++ b/src/docs/content/utilities/box-shadow.hbs @@ -0,0 +1,33 @@ +--- +title: Shadows +width: narrow +intro: Utility for adding the NSW box shadow to an element. +no-blank: true +order: 11 +model: json/utilities.json +meta-description: Utility for adding the NSW box shadow to an element. +meta-index: true +--- + +
    +
    + + + + + + + + + + + + + +
    ClassProperties
    .nsw-box-shadowbox-shadow: 0 0.25rem 0.75rem 0 rgba(0 0 0 / 0.15);
    +
    +
    + +{{#>_docs-example open=true separated=true}} +
    +{{/_docs-example}} diff --git a/src/docs/content/utilities/display.hbs b/src/docs/content/utilities/display.hbs index 11da848c..1331d123 100644 --- a/src/docs/content/utilities/display.hbs +++ b/src/docs/content/utilities/display.hbs @@ -52,8 +52,6 @@ meta-index: true
    {{/_docs-example}} - - {{#>_docs-example showcode=true separated="true"}}
    diff --git a/src/docs/content/utilities/json/utilities.json b/src/docs/content/utilities/json/utilities.json index fcdbb0f6..1c573b6f 100644 --- a/src/docs/content/utilities/json/utilities.json +++ b/src/docs/content/utilities/json/utilities.json @@ -169,5 +169,8 @@ "class": "nsw-z-below", "property": "z-index: -100;" } - } + }, + "opacity": [ "0", "25", "50", "75", "100" ], + "fill": [ "nsw-fill-brand-dark", "nsw-fill-brand-light", "nsw-fill-brand-supplementary", "nsw-fill-brand-accent", "nsw-fill-black", "nsw-fill-white", "nsw-fill-off-white", "nsw-fill-grey-01", "nsw-fill-grey-02", "nsw-fill-grey-03", "nsw-fill-grey-04" ], + "stroke": [ "nsw-stroke-brand-dark", "nsw-stroke-brand-light", "nsw-stroke-brand-supplementary", "nsw-stroke-brand-accent", "nsw-stroke-black", "nsw-stroke-white", "nsw-stroke-off-white", "nsw-stroke-grey-01", "nsw-stroke-grey-02", "nsw-stroke-grey-03", "nsw-stroke-grey-04" ] } diff --git a/src/docs/content/utilities/opacity.hbs b/src/docs/content/utilities/opacity.hbs index acf9c371..b5529e91 100644 --- a/src/docs/content/utilities/opacity.hbs +++ b/src/docs/content/utilities/opacity.hbs @@ -9,16 +9,10 @@ meta-description: Utilities for controlling the opacity of an element. meta-index: true --- -

    +

    The opacity property sets the opacity level for an element. The opacity level describes the transparency level, where 100 is not transparent at all, 50 is 50% visible, and 0 is completely transparent.

    -{{#>_docs-example}} - {{#each model.colours as |value property|}} - {{#each this}} -
    - -

    .{{@key}}

    - -
    - {{/each}} +{{#>_docs-example open=true separated="true"}} + {{#each model.opacity as |value property|}} +
    {{/each}} {{/_docs-example}} diff --git a/src/docs/content/utilities/overflow.hbs b/src/docs/content/utilities/overflow.hbs index 39ac4400..3045941c 100644 --- a/src/docs/content/utilities/overflow.hbs +++ b/src/docs/content/utilities/overflow.hbs @@ -9,16 +9,88 @@ meta-description: Utilities for controlling how an element handles content that meta-index: true --- -

    - -{{#>_docs-example}} - {{#each model.colours as |value property|}} - {{#each this}} -
    - -

    .{{@key}}

    - -
    - {{/each}} - {{/each}} +

    Adjust the overflow property on the fly with four default values and classes. These classes are not responsive by default.

    + +{{#>_docs-example showcode=true separated="true"}} +
    +
    + This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll. +
    +
    + This is an example of using .overflow-hidden on an element with set width and height dimensions. +
    +
    + This is an example of using .overflow-visible on an element with set width and height dimensions. +
    +
    + This is an example of using .overflow-scroll on an element with set width and height dimensions. +
    +
    +{{/_docs-example}} + +{{#>_docs-code open=true}} +
    ...
    +
    ...
    +
    ...
    +
    ...
    +{{/_docs-code}} + +

    overflow-x

    + +

    Adjust the overflow-x property to affect the overflow of content horizontally.

    + +{{#>_docs-example showcode=true separated="true"}} +
    +
    +
    .overflow-x-auto example on an element
    +
    with set width and height dimensions.
    +
    +
    +
    .overflow-x-hidden example
    +
    on an element with set width and height dimensions.
    +
    +
    +
    .overflow-x-visible example
    +
    on an element with set width and height dimensions.
    +
    +
    +
    .overflow-x-scroll example on an element
    +
    with set width and height dimensions.
    +
    +
    {{/_docs-example}} + +{{#>_docs-code open=true}} +
    ...
    +
    ...
    +
    ...
    +
    ...
    +{{/_docs-code}} + +

    overflow-y

    + +

    Adjust the overflow-y property to affect the overflow of content vertically.

    + +{{#>_docs-example showcode=true separated="true"}} +
    +
    + .overflow-y-auto example on an element with set width and height dimensions. +
    +
    + .overflow-y-hidden example on an element with set width and height dimensions. +
    +
    + .overflow-y-visible example on an element with set width and height dimensions. +
    +
    + .overflow-y-scroll example on an element with set width and height dimensions. +
    +
    +{{/_docs-example}} + +{{#>_docs-code open=true}} +
    ...
    +
    ...
    +
    ...
    +
    ...
    +{{/_docs-code}} \ No newline at end of file diff --git a/src/docs/content/utilities/shadows.hbs b/src/docs/content/utilities/shadows.hbs deleted file mode 100644 index e61c4046..00000000 --- a/src/docs/content/utilities/shadows.hbs +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Shadows -width: narrow -intro: Utilities for controlling the box shadow of an element. -no-blank: true -order: 11 -model: json/utilities.json -meta-description: Utilities for controlling the box shadow of an element. -meta-index: true ---- - -

    - -{{#>_docs-example}} - {{#each model.colours as |value property|}} - {{#each this}} -
    - -

    .{{@key}}

    - -
    - {{/each}} - {{/each}} -{{/_docs-example}} diff --git a/src/docs/content/utilities/svg.hbs b/src/docs/content/utilities/svg.hbs index eaf69e13..bd79fc83 100644 --- a/src/docs/content/utilities/svg.hbs +++ b/src/docs/content/utilities/svg.hbs @@ -9,14 +9,32 @@ meta-description: Utilities for styling the fill, stroke and stroke width of SVG meta-index: true --- -

    +

    Fill

    -{{#>_docs-example}} - {{#each model.colours as |value property|}} - {{#each this}} -
    -

    .{{@key}}

    -
    - {{/each}} +

    Utilities for styling the fill of SVG elements.

    + +{{#>_docs-example showcode=true separated="true"}} +
    + {{#each model.fill as |value property|}} + {{/each}} -{{/_docs-example}} \ No newline at end of file +
    +{{/_docs-example}} + +{{#>_docs-code open=true}} + +{{/_docs-code}} + +{{#>_docs-example showcode=true separated="true"}} +
    + {{#each model.stroke as |value property|}} + + + {{/each}} +
    +{{/_docs-example}} + +{{#>_docs-code open=true}} + + +{{/_docs-code}} \ No newline at end of file diff --git a/src/docs/content/utilities/vertical-align.hbs b/src/docs/content/utilities/vertical-align.hbs index 31451f1a..d4e10a3a 100644 --- a/src/docs/content/utilities/vertical-align.hbs +++ b/src/docs/content/utilities/vertical-align.hbs @@ -9,16 +9,48 @@ meta-description: Easily change the vertical alignment of inline, inline-block, meta-index: true --- -

    - -{{#>_docs-example}} - {{#each model.colours as |value property|}} - {{#each this}} -
    - -

    .{{@key}}

    - -
    - {{/each}} - {{/each}} +

    Change the alignment of elements with the vertical-alignment utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.

    + +Classes for the value of nsw-align are named using the format .nsw-align-{value}. Choose from the following values: + +
      +
    • baseline
      • +
    • top
      • +
    • middel
      • +
    • bottom
      • +
    • text-bottom
      • +
    • text-top
      • +
    + +

    To vertically center non-inline content (like <div>s and more), use our flex box utilities.

    + +

    With inline elements:

    + +{{#>_docs-example open=true separated=true}} +baseline +top +middle +bottom +text-top +text-bottom {{/_docs-example}} + +

    With table cells:

    + +{{#>_docs-example open=true separated=true}} +
    + + + + + + + + + + + +
    baselinetopmiddlebottomtext-toptext-bottom
    +
    +{{/_docs-example}} + diff --git a/src/docs/content/utilities/vertical-rule.hbs b/src/docs/content/utilities/vertical-rule.hbs index 6f93808d..474f2002 100644 --- a/src/docs/content/utilities/vertical-rule.hbs +++ b/src/docs/content/utilities/vertical-rule.hbs @@ -9,16 +9,29 @@ meta-description: Use the custom vertical rule helper to create vertical divider meta-index: true --- -

    - -{{#>_docs-example}} - {{#each model.colours as |value property|}} - {{#each this}} -
    - -

    .{{@key}}

    - -
    - {{/each}} - {{/each}} +

    How it works

    + +

    Vertical rules are inspired by the hr element, allowing you to create vertical dividers in common layouts. They’re styled just like hr elements.

    + +{{#>_docs-example open=true separated=true}} +
    +{{/_docs-example}} + +

    Vertical rules scale their height in flex layouts

    + +{{#>_docs-example open=true separated=true}} +
    +
    +
    {{/_docs-example}} + +{{#>_docs-example open=true separated=true}} +
    +
    First item
    +
    Second item
    +
    +
    Third item
    +
    +{{/_docs-example}} + + diff --git a/src/docs/content/utilities/visibility.hbs b/src/docs/content/utilities/visibility.hbs index ce309fb8..d7583258 100644 --- a/src/docs/content/utilities/visibility.hbs +++ b/src/docs/content/utilities/visibility.hbs @@ -9,17 +9,49 @@ meta-description: Control the visibility of elements, without modifying their di meta-index: true --- -

    +

    Grid classes give you the option to show or hide elements in certain breakpoints. For example, displaying an image on a large screen when it supports the content, but hiding it on a small screen when it hinders the users access to information.

    +

    The classes are named using the format nsw-{display}-{breakpoint}

    +

    Where breakpoint is one of xs, sm, md, lg, xl.

    +

    Where display is one of:

    +
      +
    • show - displays the elements
      • +
    • hide - hides the elements
      • +
    -{{#>_docs-code open=true}} -
    -
    -{{/_docs-code}} +

    Showing

    +{{#>_docs-example separated="true"}} +
    +

    This text is only visible in large breakpoint and up

    +
    +{{/_docs-example}} + +

    Hiding

    +{{#>_docs-example separated="true"}} +
    +

    This text is only visible from large breakpoint and lower

    +
    +{{/_docs-example}}

    Visually hidden

    -

    Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with .visually-hidden. Use .visually-hidden-focusable to visually hide an element by default, but to display it when it’s focused (e.g. by a keyboard-only user). .visually-hidden-focusable can also be applied to a container–thanks to :focus-within, the container will be displayed when any child element of the container receives focus.

    -{{#>_docs-code open=true}} -
    -
    +

    Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with .sr-only. Use .sr-only-focusable to visually hide an element by default, but to display it when it’s focused (e.g. by a keyboard-only user). .sr-only-focusable can also be applied to a container – thanks to :focus-within, the container will be displayed when any child element of the container receives focus.

    + +{{#>_docs-example open=true separated="true"}} +

    Title for screen readers

    + Skip to main content +
    A container with a focusable element.
    +{{/_docs-example}} + +

    Both .sr-only and .sr-only-focusable can also be used as mixins.

    + +{{#>_docs-code open=true separated=true}} +// Usage as a mixin + +.visually-hidden-title { + @include sr-only; +} + +.skip-navigation { + @include sr-only-focusable; +} {{/_docs-code}} \ No newline at end of file diff --git a/src/global/scss/base/_mixins.scss b/src/global/scss/base/_mixins.scss index 73436444..b56c9293 100644 --- a/src/global/scss/base/_mixins.scss +++ b/src/global/scss/base/_mixins.scss @@ -67,26 +67,27 @@ //Screen reader text /* stylelint-disable declaration-no-important */ -@mixin sr-only { - border: 0 !important; - clip: rect(1px, 1px, 1px, 1px) !important; - clip-path: inset(50%) !important; +@mixin sr-only() { + width: 1px !important; height: 1px !important; - overflow: hidden !important; padding: 0 !important; - position: absolute !important; - width: 1px !important; + margin: -1px !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; + border: 0 !important; + + &:not(caption) { + position: absolute !important; + } } -@mixin sr-only-focus { - clip: auto !important; - clip-path: none !important; - height: auto !important; - overflow: visible !important; - width: auto !important; - white-space: normal !important; +@mixin sr-only-focus() { + &:not(:focus):not(:focus-within) { + @include sr-only(); + } } + /* stylelint-enable declaration-no-important */ //Component spacing diff --git a/src/global/scss/helpers/_all.scss b/src/global/scss/helpers/_all.scss index d424ba02..1d686467 100644 --- a/src/global/scss/helpers/_all.scss +++ b/src/global/scss/helpers/_all.scss @@ -2,5 +2,6 @@ @import 'text'; @import 'spacing'; @import 'utilities'; +@import 'vertical-rule'; @import 'visibility'; @import 'api'; diff --git a/src/global/scss/helpers/_vertical-rule.scss b/src/global/scss/helpers/_vertical-rule.scss new file mode 100644 index 00000000..c83b5df4 --- /dev/null +++ b/src/global/scss/helpers/_vertical-rule.scss @@ -0,0 +1,8 @@ +.nsw-vr { + display: inline-block; + align-self: stretch; + width: var(--nsw-border-width); + min-height: 1em; + background-color: var(--nsw-text-dark); + opacity: 0.5; +} diff --git a/src/global/scss/helpers/_visibility.scss b/src/global/scss/helpers/_visibility.scss index ebd28dd3..c2d23e78 100644 --- a/src/global/scss/helpers/_visibility.scss +++ b/src/global/scss/helpers/_visibility.scss @@ -1,10 +1,9 @@ -.sr-only { - @include sr-only; +.sr-only, +.sr-only-focusable:not(:focus):not(:focus-within) { + @include sr-only(); } -.sr-only-focusable:focus { - @include sr-only-focus; -} + .nsw-show { @each $breakpoint, $breakpoint-size in $nsw-breakpoints { From 1229b4ccca4b1a00ab2a848f62a34542bf303e5e Mon Sep 17 00:00:00 2001 From: Lauren Hitchon Date: Mon, 7 Aug 2023 14:13:20 +1000 Subject: [PATCH 09/17] Add sizing, position, flex and text utility pages --- src/docs/content/utilities/flex.hbs | 441 +++++++++++++++++- .../content/utilities/json/utilities.json | 31 +- src/docs/content/utilities/position.hbs | 118 ++++- src/docs/content/utilities/sizing.hbs | 173 ++++++- src/docs/content/utilities/text.hbs | 166 ++++++- src/global/handlebars/layouts/layout.hbs | 2 +- 6 files changed, 884 insertions(+), 47 deletions(-) diff --git a/src/docs/content/utilities/flex.hbs b/src/docs/content/utilities/flex.hbs index 4ca0d92c..07dac94b 100644 --- a/src/docs/content/utilities/flex.hbs +++ b/src/docs/content/utilities/flex.hbs @@ -9,16 +9,433 @@ meta-description: Utilities to manage the layout, alignment and sizing of flex i meta-index: true --- -

    - -{{#>_docs-example}} - {{#each model.colours as |value property|}} - {{#each this}} -
    - -

    .{{@key}}

    - -
    - {{/each}} - {{/each}} +

    Enable flex behaviors

    + +

    Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.

    + +{{#>_docs-example open=true separated=true}} +
    I'm a flexbox container!
    +{{/_docs-example}} + +{{#>_docs-example open=true separated=true}} +
    I'm an inline flexbox container!
    +{{/_docs-example}} + +

    Direction

    + +

    Set the direction of flex items in a flex container with direction utilities.

    + +{{#>_docs-example showcode=true separated=true}} +
    +
    Flex item 1
    +
    Flex item 2
    +
    Flex item 3
    +
    +
    +
    Flex item 1
    +
    Flex item 2
    +
    Flex item 3
    +
    +
    +
    Flex item 1
    +
    Flex item 2
    +
    Flex item 3
    +
    +
    +
    Flex item 1
    +
    Flex item 2
    +
    Flex item 3
    +
    +{{/_docs-example}} + +{{#>_docs-code open=true separated=true}} +
    +
    Flex item 1
    +
    Flex item 2
    +
    Flex item 3
    +
    +
    +
    Flex item 1
    +
    Flex item 2
    +
    Flex item 3
    +
    +
    +
    Flex item 1
    +
    Flex item 2
    +
    Flex item 3
    +
    +
    +
    Flex item 1
    +
    Flex item 2
    +
    Flex item 3
    +
    +{{/_docs-code}} + +

    Justify content

    + +

    Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis. Choose from start (browser default), end, center, between, around, or evenly. + +

    + +{{#>_docs-example showcode=true separated=true}} +
    +
    Justify
    +
    Content
    +
    Start
    +
    +
    +
    Justify
    +
    Content
    +
    End
    +
    +
    +
    Justify
    +
    Content
    +
    Center
    +
    +
    +
    Justify
    +
    Content
    +
    Between
    +
    +
    +
    Justify
    +
    Content
    +
    Around
    +
    +
    +
    Justify
    +
    Content
    +
    Evenly
    +
    +{{/_docs-example}} + +{{#>_docs-code open=true separated=true}} +
    ...
    +
    ...
    +
    ...
    +
    ...
    +
    ...
    +
    ...
    +{{/_docs-code}} + +

    Align items

    + +

    Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis. Choose from start, end, center, baseline, or stretch (browser default).

    + +{{#>_docs-example showcode=true separated=true}} +
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    +
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    +
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    +
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    +
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    +{{/_docs-example}} + +{{#>_docs-code open=true separated=true}} +
    ...
    +
    ...
    +
    ...
    +
    ...
    +
    ...
    +{{/_docs-code}} + +

    Align self

    + +

    Use align-self utilities on flexbox items to individually change their alignment on the cross axis. Choose from the same options as align-items: start, end, center, baseline, or stretch (browser default).

    + +{{#>_docs-example showcode=true separated=true}} +
    +
    Flex item
    +
    Aligned flex item
    +
    Flex item
    +
    +
    +
    Flex item
    +
    Aligned flex item
    +
    Flex item
    +
    +
    +
    Flex item
    +
    Aligned flex item
    +
    Flex item
    +
    +
    +
    Flex item
    +
    Aligned flex item
    +
    Flex item
    +
    +
    +
    Flex item
    +
    Aligned flex item
    +
    Flex item
    +
    +{{/_docs-example}} + +{{#>_docs-code open=true separated=true}} +
    Aligned flex item
    +
    Aligned flex item
    +
    Aligned flex item
    +
    Aligned flex item
    +
    Aligned flex item
    +{{/_docs-code}} + +

    Fill

    + +{{#>_docs-example showcode=true separated=true}} +
    +
    Flex item with a lot of content
    +
    Flex item
    +
    Flex item
    +
    +{{/_docs-example}} + +{{#>_docs-code open=true separated=true}} +
    +
    Flex item with a lot of content
    +
    Flex item
    +
    Flex item
    +
    +{{/_docs-code}} + +

    Grow and shrink

    + +{{#>_docs-example showcode=true separated=true}} +
    +
    Flex item
    +
    Flex item
    +
    Third flex item
    +
    +
    +
    Flex item
    +
    Flex item
    +
    {{/_docs-example}} + +{{#>_docs-code open=true separated=true}} +
    +
    Flex item
    +
    Flex item
    +
    Third flex item
    +
    + +
    +
    Flex item
    +
    Flex item
    +
    +{{/_docs-code}} + +

    Wrap

    + +{{#>_docs-example showcode=true separated=true}} + +
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    + + +
    +
    Flex item 1
    +
    Flex item 2
    +
    Flex item 3
    +
    Flex item 4
    +
    Flex item 5
    +
    Flex item 6
    +
    Flex item 7
    +
    Flex item 8
    +
    Flex item 9
    +
    Flex item 10
    +
    Flex item 11
    +
    Flex item 12
    +
    Flex item 13
    +
    Flex item 14
    +
    + + +
    +
    Flex item 1
    +
    Flex item 2
    +
    Flex item 3
    +
    Flex item 4
    +
    Flex item 5
    +
    Flex item 6
    +
    Flex item 7
    +
    Flex item 8
    +
    Flex item 9
    +
    Flex item 10
    +
    Flex item 11
    +
    Flex item 12
    +
    Flex item 13
    +
    Flex item 14
    +
    + +{{/_docs-example}} + +{{#>_docs-code open=true separated=true}} +
    ...
    +
    ...
    +
    ...
    +{{/_docs-code}} + +

    Order

    + +{{#>_docs-example showcode=true separated=true}} +
    +
    First flex item
    +
    Second flex item
    +
    Third flex item
    +
    +{{/_docs-example}} + +{{#>_docs-code open=true separated=true}} +
    +
    First flex item
    +
    Second flex item
    +
    Third flex item
    +
    +{{/_docs-code}} + +

    Align content

    + +{{#>_docs-example showcode=true separated=true}} + +
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    + +
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    + +
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    + +
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    + +
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    + +
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    Flex item
    +
    +{{/_docs-example}} + +{{#>_docs-code open=true separated=true}} +
    ...
    +
    ...
    +
    ...
    +
    ...
    +
    ...
    +
    ...
    +{{/_docs-code}} diff --git a/src/docs/content/utilities/json/utilities.json b/src/docs/content/utilities/json/utilities.json index 1c573b6f..18d9a3d0 100644 --- a/src/docs/content/utilities/json/utilities.json +++ b/src/docs/content/utilities/json/utilities.json @@ -172,5 +172,34 @@ }, "opacity": [ "0", "25", "50", "75", "100" ], "fill": [ "nsw-fill-brand-dark", "nsw-fill-brand-light", "nsw-fill-brand-supplementary", "nsw-fill-brand-accent", "nsw-fill-black", "nsw-fill-white", "nsw-fill-off-white", "nsw-fill-grey-01", "nsw-fill-grey-02", "nsw-fill-grey-03", "nsw-fill-grey-04" ], - "stroke": [ "nsw-stroke-brand-dark", "nsw-stroke-brand-light", "nsw-stroke-brand-supplementary", "nsw-stroke-brand-accent", "nsw-stroke-black", "nsw-stroke-white", "nsw-stroke-off-white", "nsw-stroke-grey-01", "nsw-stroke-grey-02", "nsw-stroke-grey-03", "nsw-stroke-grey-04" ] + "stroke": [ "nsw-stroke-brand-dark", "nsw-stroke-brand-light", "nsw-stroke-brand-supplementary", "nsw-stroke-brand-accent", "nsw-stroke-black", "nsw-stroke-white", "nsw-stroke-off-white", "nsw-stroke-grey-01", "nsw-stroke-grey-02", "nsw-stroke-grey-03", "nsw-stroke-grey-04" ], + "textColour": { + "nsw-text--dark":"nsw-text-dark", + "nsw-text--light":"nsw-text-light", + "nsw-text--brand-dark":"nsw-brand-dark", + "nsw-text--brand-light":"nsw-brand-light", + "nsw-text--brand-supplementary":"nsw-brand-supplementary", + "nsw-text--brand-accent":"nsw-brand-accent", + "nsw-text--black":"nsw-black", + "nsw-text--white":"nsw-white", + "nsw-text--off-white":"nsw-off-white", + "nsw-text--grey-01":"nsw-grey-01", + "nsw-text--grey-02":"nsw-grey-02", + "nsw-text--grey-03":"nsw-grey-03", + "nsw-text--grey-04":"nsw-grey-04" + }, + "sizing": { + "4xs": "0.25rem", + "3xs": "0.5rem", + "2xs": "0.75rem", + "xs": "1rem", + "sm": "1.5rem", + "md": "2rem", + "lg": "3rem", + "xl": "4rem", + "2xl": "6rem", + "3xl": "8rem", + "4xl": "16rem", + "0": "0" + } } diff --git a/src/docs/content/utilities/position.hbs b/src/docs/content/utilities/position.hbs index 83ee27c7..6a4fe8f9 100644 --- a/src/docs/content/utilities/position.hbs +++ b/src/docs/content/utilities/position.hbs @@ -11,14 +11,110 @@ meta-index: true

    -{{#>_docs-example}} - {{#each model.colours as |value property|}} - {{#each this}} -
    - -

    .{{@key}}

    - -
    - {{/each}} - {{/each}} -{{/_docs-example}} +{{#>_docs-code open=true}} +
    ...
    +
    ...
    +
    ...
    +
    ...
    +
    ...
    +{{/_docs-code}} + +
    +
    + +
    +
    +
    +
    +
    +
    + +
    +
    + +{{#>_docs-code open=true}} +
    +
    +
    +
    +
    +
    +
    +
    +{{/_docs-code}} + +

    Center elements

    + +

    In addition, you can also center the elements with the transform utility class .nsw-translate-middle.

    + +

    This class applies the transformations translateX(-50%) and translateY(-50%) to the element which, in combination with the edge positioning utilities, allows you to absolute center an element.

    + +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    + +{{#>_docs-code open=true}} +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +{{/_docs-code}} + +

    By adding .nsw-translate-middle-x or .nsw-translate-middle-y classes, elements can be positioned only in horizontal or vertical direction.

    + +
    +
    + +
    +
    +
    + +
    +
    +
    + +
    +
    +
    + +
    +
    + +{{#>_docs-code open=true}} +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +{{/_docs-code}} + +

    Example

    + +{{#>_docs-example open=true separated=true}} + +{{/_docs-example}} \ No newline at end of file diff --git a/src/docs/content/utilities/sizing.hbs b/src/docs/content/utilities/sizing.hbs index 266dd58d..d675a995 100644 --- a/src/docs/content/utilities/sizing.hbs +++ b/src/docs/content/utilities/sizing.hbs @@ -9,16 +9,165 @@ meta-description: Utilities for setting the width, minimum width, maximum width, meta-index: true --- -

    - -{{#>_docs-example}} - {{#each model.colours as |value property|}} - {{#each this}} -
    - -

    .{{@key}}

    - -
    - {{/each}} - {{/each}} +

    Fixed widths

    + +

    Use .nsw-width-{number} to set an element to a fixed width.

    + +
    +
    + + + + + + + {{#each model.sizing as |value property|}} + + + + + {{/each}} + +
    +

    Class

    +     		+

    Properties

    +
    +

    nsw-width-{{@key}}

    +     		+

    width: {{this}}

    +
    +
    +
    + +

    Fixed heights

    + +

    Use .nsw-height-{number} to set an element to a fixed height.

    + +
    +
    + + + + + + + {{#each model.sizing as |value property|}} + + + + + {{/each}} + +
    +

    Class

    +     		+

    Properties

    +
    +

    nsw-height-{{@key}}

    +     		+

    height: {{this}}

    +
    +
    +
    + +

    Relative to the parent

    + +

    Width and height utilities include support for 10%, 20%, 25%, 30%, 33%, 40% 50%, 60%, 70%, 75%, 80%, 90%, 100% and auto by default.

    + +{{#>_docs-example showcode=true separated=true}} +
    Width 10%
    +
    Width 20%
    +
    Width 25%
    +
    Width 30%
    +
    Width 33%
    +
    Width 40%
    +
    Width 50%
    +
    Width 60%
    +
    Width 70%
    +
    Width 75%
    +
    Width 80%
    +
    Width 90%
    +
    Width 100%
    +
    Width auto
    +{{/_docs-example}} + +{{#>_docs-code open=true}} +
    Width 10%
    +
    Width 20%
    +
    Width 25%
    +
    Width 30%
    +
    Width 33%
    +
    Width 40%
    +
    Width 50%
    +
    Width 60%
    +
    Width 70%
    +
    Width 75%
    +
    Width 80%
    +
    Width 90%
    +
    Width 100%
    +
    Width auto
    +{{/_docs-code}} + +{{#>_docs-example showcode=true separated=true}} +
    +
    Height 10%
    +
    Height 20%
    +
    Height 25%
    +
    Height 30%
    +
    Height 33%
    +
    Height 40%
    +
    Height 50%
    +
    Height 60%
    +
    Height 70%
    +
    Height 75%
    +
    Height 80%
    +
    Height 90%
    +
    Height 100%
    +
    Height auto
    +
    +{{/_docs-example}} + +{{#>_docs-code open=true}} +
    +
    Height 10%
    +
    Height 20%
    +
    Height 25%
    +
    Height 30%
    +
    Height 33%
    +
    Height 40%
    +
    Height 50%
    +
    Height 60%
    +
    Height 70%
    +
    Height 75%
    +
    Height 80%
    +
    Height 90%
    +
    Height 100%
    +
    Height auto
    +
    +{{/_docs-code}} + +

    You can also use max-width: 100%; and max-height: 100%; utilities as needed.

    + +{{#>_docs-example open=true separated=true}} +
    +
    Max-width 100%
    +
    {{/_docs-example}} + +{{#>_docs-example open=true separated=true}} +
    +
    Max-height 100%
    +
    +{{/_docs-example}} + +

    Relative to the viewport

    + +

    You can also use utilities to set the width and height relative to the viewport.

    + +{{#>_docs-code open=true separated=true}} +
    Min-width 100vw
    +
    Min-height 100vh
    +
    Width 100vw
    +
    Height 100vh
    +{{/_docs-code}} \ No newline at end of file diff --git a/src/docs/content/utilities/text.hbs b/src/docs/content/utilities/text.hbs index 99b4423d..90f3283b 100644 --- a/src/docs/content/utilities/text.hbs +++ b/src/docs/content/utilities/text.hbs @@ -9,14 +9,160 @@ meta-description: Documentation and examples for common text utilities to contro meta-index: true --- -

    - -{{#>_docs-example}} - {{#each model.colours as |value property|}} - {{#each this}} -
    -

    .{{@key}}

    -
    - {{/each}} - {{/each}} +

    Text alignment

    + +{{#>_docs-example open=true separated=true}} +

    Start aligned text on all viewport sizes.

    +

    Center aligned text on all viewport sizes.

    +

    End aligned text on all viewport sizes.

    +{{/_docs-example}} + +

    Text truncation

    + +

    For longer content, you can add a .nsw-text-truncate class to truncate the text with an ellipsis. Requires display: inline-block or display: block.

    + +{{#>_docs-example open=true separated=true}} + +
    +
    + This text is quite long, and will be truncated once displayed. +
    +
    + + + + This text is quite long, and will be truncated once displayed. + + +{{/_docs-example}} + +

    Text wrapping and overflow

    + +

    Wrap text with a .nsw-text-wrap class.

    + +{{#>_docs-example open=true separated=true}} +This text should wrap. +{{/_docs-example}} + +

    Prevent text from wrapping with a .nsw-text-nowrap class.

    + +{{#>_docs-example open=true separated=true}} +This text should overflow the parent. +{{/_docs-example}} + +

    Word break

    + +

    Prevent long strings of text from breaking your components’ layout by using .nsw-text-break to set word-wrap: break-word and word-break: break-word. We use word-wrap instead of the more common overflow-wrap for wider browser support, and add the deprecated word-break: break-word to avoid issues with flex containers.

    + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + +
    ClassProperties
    nsw-overflow-breakoverflow-wrap: break-word;
    nsw-word-break-normalword-break: normal;
    nsw-word-break-break-allword-break: break-all;
    nsw-word-break-keep-allword-break: keep-all;
    +
    +
    + +{{#>_docs-example open=true separated=true}} +

    mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

    +

    mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

    +

    mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

    +

    mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

    +{{/_docs-example}} + +

    Text transform

    +

    Transform text with text capitalization classes.

    + +{{#>_docs-example open=true separated=true}} +

    Lowercased text.

    +

    Uppercased text.

    +

    CapiTaliZed text.

    +{{/_docs-example}} + + +

    Font weight and italics

    +

    Quickly change the font-weight or font-style of text with these utilities.

    + +{{#>_docs-example open=true separated=true}} +

    Bold text.

    +

    Bolder weight text (relative to the parent element).

    +

    Semibold weight text.

    +

    Medium weight text.

    +

    Normal weight text.

    +

    Light weight text.

    +

    Lighter weight text (relative to the parent element).

    +

    Italic text.

    +

    Text with normal font style

    +{{/_docs-example}} + +

    Text decoration

    + +{{#>_docs-example open=true separated=true}} +

    This text has a line underneath it.

    +

    This text has a line going through it.

    +

    This link has its text decoration removed

    +{{/_docs-example}} + + +

    Text color

    + +
    +
    + + + + + + + + {{#each model.textColour as |value property|}} + + + + + + {{/each}} + +
    +

    Class

    +     		+

    Hover Class

    +     		+

    Description

    +
    +

    {{@key}}

    +     		+

    hover:{{@key}}

    +     		+

    Applies {{property}} var(--{{this}}) to element

    +
    +
    +
    + +{{#>_docs-example open=true separated=true}} +{{#each model.textColour as |value property|}} +

    .{{@key}}

    +{{/each}} {{/_docs-example}} diff --git a/src/global/handlebars/layouts/layout.hbs b/src/global/handlebars/layouts/layout.hbs index e1a7f5d1..04e053b8 100644 --- a/src/global/handlebars/layouts/layout.hbs +++ b/src/global/handlebars/layouts/layout.hbs @@ -13,7 +13,7 @@ - + {{#unless page}} From 42cb482187fc28c87dd3e0610dc777b545fcee6a Mon Sep 17 00:00:00 2001 From: Lauren Hitchon Date: Mon, 7 Aug 2023 14:15:09 +1000 Subject: [PATCH 10/17] Update layout.hbs --- src/global/handlebars/layouts/layout.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/global/handlebars/layouts/layout.hbs b/src/global/handlebars/layouts/layout.hbs index 04e053b8..37ef0422 100644 --- a/src/global/handlebars/layouts/layout.hbs +++ b/src/global/handlebars/layouts/layout.hbs @@ -14,7 +14,7 @@ - + {{#unless page}} From d5fe7941088df1f94f3c47fff5a0d75fd2e49612 Mon Sep 17 00:00:00 2001 From: Lauren Hitchon Date: Wed, 9 Aug 2023 17:16:26 +1000 Subject: [PATCH 11/17] Remove order and update box-shadow --- src/docs/content/utilities/background.hbs | 1 - src/docs/content/utilities/borders.hbs | 1 - src/docs/content/utilities/box-shadow.hbs | 13 ++++++++----- src/docs/content/utilities/display.hbs | 1 - src/docs/content/utilities/flex.hbs | 1 - src/docs/content/utilities/float.hbs | 1 - src/docs/content/utilities/object-fit.hbs | 1 - src/docs/content/utilities/opacity.hbs | 1 - src/docs/content/utilities/overflow.hbs | 1 - src/docs/content/utilities/position.hbs | 1 - src/docs/content/utilities/sizing.hbs | 1 - src/docs/content/utilities/spacing.hbs | 1 - src/docs/content/utilities/svg.hbs | 1 - src/docs/content/utilities/text.hbs | 1 - src/docs/content/utilities/vertical-align.hbs | 1 - src/docs/content/utilities/vertical-rule.hbs | 1 - src/docs/content/utilities/visibility.hbs | 1 - src/docs/content/utilities/z-index.hbs | 1 - 18 files changed, 8 insertions(+), 22 deletions(-) diff --git a/src/docs/content/utilities/background.hbs b/src/docs/content/utilities/background.hbs index 8d7d4203..43128d46 100644 --- a/src/docs/content/utilities/background.hbs +++ b/src/docs/content/utilities/background.hbs @@ -3,7 +3,6 @@ title: Background width: narrow intro: Utilities for controlling an element's background color. no-blank: true -order: 1 model: json/utilities.json meta-description: Utilities for controlling an element's background color. meta-index: true diff --git a/src/docs/content/utilities/borders.hbs b/src/docs/content/utilities/borders.hbs index 645f3658..e91c1933 100644 --- a/src/docs/content/utilities/borders.hbs +++ b/src/docs/content/utilities/borders.hbs @@ -3,7 +3,6 @@ title: Borders width: narrow intro: Utilities for controlling the border radius, width, style and the color of an element's borders. no-blank: true -order: 2 model: json/utilities.json meta-description: Utilities for controlling the border radius, width, style and the color of an element's borders. meta-index: true diff --git a/src/docs/content/utilities/box-shadow.hbs b/src/docs/content/utilities/box-shadow.hbs index 04beb0a0..7b6fc1dd 100644 --- a/src/docs/content/utilities/box-shadow.hbs +++ b/src/docs/content/utilities/box-shadow.hbs @@ -1,11 +1,10 @@ --- -title: Shadows +title: Box Shadow width: narrow -intro: Utility for adding the NSW box shadow to an element. +intro: Utility for adding the NSW box-shadow to an element. no-blank: true -order: 11 model: json/utilities.json -meta-description: Utility for adding the NSW box shadow to an element. +meta-description: Utility for adding the NSW box-shadow to an element. meta-index: true --- @@ -28,6 +27,10 @@ meta-index: true
    -{{#>_docs-example open=true separated=true}} +{{#>_docs-example showcode=true separated=true}}
    {{/_docs-example}} + +{{#>_docs-code open=true}} +
    ...
    +{{/_docs-code}} \ No newline at end of file diff --git a/src/docs/content/utilities/display.hbs b/src/docs/content/utilities/display.hbs index 1331d123..5b925d42 100644 --- a/src/docs/content/utilities/display.hbs +++ b/src/docs/content/utilities/display.hbs @@ -3,7 +3,6 @@ title: Display width: narrow intro: Utilities for controlling the display box type of an element. no-blank: true -order: 4 model: json/utilities.json meta-description: Utilities for controlling the display box type of an element. meta-index: true diff --git a/src/docs/content/utilities/flex.hbs b/src/docs/content/utilities/flex.hbs index 07dac94b..8b3fc481 100644 --- a/src/docs/content/utilities/flex.hbs +++ b/src/docs/content/utilities/flex.hbs @@ -3,7 +3,6 @@ title: Flex width: narrow intro: Utilities to manage the layout, alignment and sizing of flex items and components with a suite of responsive flexbox utilities. no-blank: true -order: 5 model: json/utilities.json meta-description: Utilities to manage the layout, alignment and sizing of flex items and components with a suite of responsive flexbox utilities. meta-index: true diff --git a/src/docs/content/utilities/float.hbs b/src/docs/content/utilities/float.hbs index 3056fff8..00f0f785 100644 --- a/src/docs/content/utilities/float.hbs +++ b/src/docs/content/utilities/float.hbs @@ -3,7 +3,6 @@ title: Float width: narrow intro: Utilities for controlling the wrapping of content around an element. no-blank: true -order: 6 model: json/utilities.json meta-description: Utilities for controlling the wrapping of content around an element. meta-index: true diff --git a/src/docs/content/utilities/object-fit.hbs b/src/docs/content/utilities/object-fit.hbs index 1bb4ca61..f86e1496 100644 --- a/src/docs/content/utilities/object-fit.hbs +++ b/src/docs/content/utilities/object-fit.hbs @@ -3,7 +3,6 @@ title: Object fit width: narrow intro: Utilities for controlling how a replaced element's content should be resized. no-blank: true -order: 7 model: json/utilities.json meta-description: Utilities for controlling how a replaced element's content should be resized. meta-index: true diff --git a/src/docs/content/utilities/opacity.hbs b/src/docs/content/utilities/opacity.hbs index b5529e91..61bcecf8 100644 --- a/src/docs/content/utilities/opacity.hbs +++ b/src/docs/content/utilities/opacity.hbs @@ -3,7 +3,6 @@ title: Opacity width: narrow intro: Utilities for controlling the opacity of an element. no-blank: true -order: 8 model: json/utilities.json meta-description: Utilities for controlling the opacity of an element. meta-index: true diff --git a/src/docs/content/utilities/overflow.hbs b/src/docs/content/utilities/overflow.hbs index 3045941c..07d44b1a 100644 --- a/src/docs/content/utilities/overflow.hbs +++ b/src/docs/content/utilities/overflow.hbs @@ -3,7 +3,6 @@ title: Overflow width: narrow intro: Utilities for controlling how an element handles content that is too large for the container. no-blank: true -order: 9 model: json/utilities.json meta-description: Utilities for controlling how an element handles content that is too large for the container. meta-index: true diff --git a/src/docs/content/utilities/position.hbs b/src/docs/content/utilities/position.hbs index 6a4fe8f9..26c984cc 100644 --- a/src/docs/content/utilities/position.hbs +++ b/src/docs/content/utilities/position.hbs @@ -3,7 +3,6 @@ title: Position width: narrow intro: Utilities for controlling how an element is positioned in the DOM. no-blank: true -order: 10 model: json/utilities.json meta-description: Utilities for controlling how an element is positioned in the DOM. meta-index: true diff --git a/src/docs/content/utilities/sizing.hbs b/src/docs/content/utilities/sizing.hbs index d675a995..64cd265d 100644 --- a/src/docs/content/utilities/sizing.hbs +++ b/src/docs/content/utilities/sizing.hbs @@ -3,7 +3,6 @@ title: Sizing width: narrow intro: Utilities for setting the width, minimum width, maximum width, height, minimum height and maximum height of an element. no-blank: true -order: 12 model: json/utilities.json meta-description: Utilities for setting the width, minimum width, maximum width, height, minimum height and maximum height of an element. meta-index: true diff --git a/src/docs/content/utilities/spacing.hbs b/src/docs/content/utilities/spacing.hbs index 2a5e5ddf..a30bce85 100644 --- a/src/docs/content/utilities/spacing.hbs +++ b/src/docs/content/utilities/spacing.hbs @@ -3,7 +3,6 @@ title: Spacing width: narrow intro: A defined set of spacing units provides good alignment and consistent spacing relationships in components and layout. no-blank: true -order: 13 model: json/utilities.json meta-description: The NSW Design System defined set of spacing units for alignment and consistent spacing relationships in components and layout. meta-index: true diff --git a/src/docs/content/utilities/svg.hbs b/src/docs/content/utilities/svg.hbs index bd79fc83..a64a04a3 100644 --- a/src/docs/content/utilities/svg.hbs +++ b/src/docs/content/utilities/svg.hbs @@ -3,7 +3,6 @@ title: SVG width: narrow intro: Utilities for styling the fill, stroke and stroke width of SVG elements. no-blank: true -order: 14 model: json/utilities.json meta-description: Utilities for styling the fill, stroke and stroke width of SVG elements. meta-index: true diff --git a/src/docs/content/utilities/text.hbs b/src/docs/content/utilities/text.hbs index 90f3283b..d8119ebe 100644 --- a/src/docs/content/utilities/text.hbs +++ b/src/docs/content/utilities/text.hbs @@ -3,7 +3,6 @@ title: Text width: narrow intro: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more. no-blank: true -order: 15 model: json/utilities.json meta-description: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more. meta-index: true diff --git a/src/docs/content/utilities/vertical-align.hbs b/src/docs/content/utilities/vertical-align.hbs index d4e10a3a..3444b751 100644 --- a/src/docs/content/utilities/vertical-align.hbs +++ b/src/docs/content/utilities/vertical-align.hbs @@ -3,7 +3,6 @@ title: Vertical align width: narrow intro: Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements. no-blank: true -order: 16 model: json/utilities.json meta-description: Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements. meta-index: true diff --git a/src/docs/content/utilities/vertical-rule.hbs b/src/docs/content/utilities/vertical-rule.hbs index 474f2002..eb8f3af8 100644 --- a/src/docs/content/utilities/vertical-rule.hbs +++ b/src/docs/content/utilities/vertical-rule.hbs @@ -3,7 +3,6 @@ title: Vertical rule width: narrow intro: Use the custom vertical rule helper to create vertical dividers like the
    element. no-blank: true -order: 17 model: json/utilities.json meta-description: Use the custom vertical rule helper to create vertical dividers like the
    element. meta-index: true diff --git a/src/docs/content/utilities/visibility.hbs b/src/docs/content/utilities/visibility.hbs index d7583258..c319b21f 100644 --- a/src/docs/content/utilities/visibility.hbs +++ b/src/docs/content/utilities/visibility.hbs @@ -3,7 +3,6 @@ title: Visibility width: narrow intro: Control the visibility of elements, without modifying their display, with visibility utilities. no-blank: true -order: 18 model: json/utilities.json meta-description: Control the visibility of elements, without modifying their display, with visibility utilities. meta-index: true diff --git a/src/docs/content/utilities/z-index.hbs b/src/docs/content/utilities/z-index.hbs index 673f75dc..5227b059 100644 --- a/src/docs/content/utilities/z-index.hbs +++ b/src/docs/content/utilities/z-index.hbs @@ -3,7 +3,6 @@ title: Z-index width: narrow intro: Utilities for controlling the stack order of an element. no-blank: true -order: 19 model: json/utilities.json meta-description: Utilities for controlling the stack order of an element. meta-index: true From b2c17280981275b505a8a52707c111fc9c5263b9 Mon Sep 17 00:00:00 2001 From: Lauren Hitchon Date: Mon, 14 Aug 2023 09:54:40 +1000 Subject: [PATCH 12/17] Remove object-fit, opacity, sizing and vertical-rule --- src/core/colour/index.hbs | 2 +- src/core/graphic-elements/index.hbs | 2 +- src/core/pictograms/index.hbs | 19 +- src/docs/content/utilities/object-fit.hbs | 42 ----- src/docs/content/utilities/opacity.hbs | 17 -- src/docs/content/utilities/sizing.hbs | 172 ------------------ src/docs/content/utilities/text.hbs | 36 +--- src/docs/content/utilities/vertical-align.hbs | 2 +- src/docs/content/utilities/vertical-rule.hbs | 36 ---- src/docs/search.json | 76 +++++++- 10 files changed, 80 insertions(+), 324 deletions(-) delete mode 100644 src/docs/content/utilities/object-fit.hbs delete mode 100644 src/docs/content/utilities/opacity.hbs delete mode 100644 src/docs/content/utilities/sizing.hbs delete mode 100644 src/docs/content/utilities/vertical-rule.hbs diff --git a/src/core/colour/index.hbs b/src/core/colour/index.hbs index 144aebf7..7382bb35 100644 --- a/src/core/colour/index.hbs +++ b/src/core/colour/index.hbs @@ -35,7 +35,7 @@ meta-index: true

    You don't need to use hex colours in code

    Use either CSS variables (below) or, if you're creating a one-off layout, you can use our helper classes for dark, light, and supplementary colours.

    -

    By using CSS variables, any branding or theming changes will automatically reflect in your product. See CSS variables below, or see the Utility classes docs.

    +

    By using CSS variables, any branding or theming changes will automatically reflect in your product. See CSS variables below, or see the Utility classes docs.

    diff --git a/src/core/graphic-elements/index.hbs b/src/core/graphic-elements/index.hbs index 0c70ef38..825d313b 100644 --- a/src/core/graphic-elements/index.hbs +++ b/src/core/graphic-elements/index.hbs @@ -153,7 +153,7 @@ meta-index: true Minimum padding from text: 16px

    -

    View Helper classes

    +

    View Helper classes

    diff --git a/src/core/pictograms/index.hbs b/src/core/pictograms/index.hbs index 40b9b04b..d6104faf 100644 --- a/src/core/pictograms/index.hbs +++ b/src/core/pictograms/index.hbs @@ -30,11 +30,10 @@ meta-index: true

    Usage

    Used pictograms to visually support and highlight content, making it quickly identifiable on the page.

    - +

    Use SVG utility classes

    -

    Usability classes are available for developers to apply brand colours to SVGs. Use them so that SVGs can be used across pages using different colour schemes. See Utility classes for names.

    +

    Usability classes are available for developers to apply brand colours to SVGs. Use them so that SVGs can be used across pages using different colour schemes. See Utility classes for names.

    Styling

    @@ -94,15 +93,14 @@ meta-index: true -
    -
    -

    Pictogram Brand Styling

    -

    For full pictograms creation guidance, visit your relevant brand classification guidelines at the NSW Government Visual identity system.

    -
    -
    +
    +
    +

    Pictogram Brand Styling

    +

    For full pictograms creation guidance, visit your relevant brand classification guidelines at the NSW Government Visual identity system.

    +
    +
    - -
    -
    - This text is quite long, and will be truncated once displayed. -
    -
    - - - - This text is quite long, and will be truncated once displayed. - - -{{/_docs-example}} -

    Text wrapping and overflow

    Wrap text with a .nsw-text-wrap class.

    @@ -97,7 +78,7 @@ meta-index: true {{#>_docs-example open=true separated=true}}

    Lowercased text.

    Uppercased text.

    -

    CapiTaliZed text.

    +

    Capitalized text.

    {{/_docs-example}} @@ -106,25 +87,10 @@ meta-index: true {{#>_docs-example open=true separated=true}}

    Bold text.

    -

    Bolder weight text (relative to the parent element).

    -

    Semibold weight text.

    -

    Medium weight text.

    Normal weight text.

    -

    Light weight text.

    -

    Lighter weight text (relative to the parent element).

    Italic text.

    -

    Text with normal font style

    {{/_docs-example}} -

    Text decoration

    - -{{#>_docs-example open=true separated=true}} -

    This text has a line underneath it.

    -

    This text has a line going through it.

    -

    This link has its text decoration removed

    -{{/_docs-example}} - -

    Text color

    diff --git a/src/docs/content/utilities/vertical-align.hbs b/src/docs/content/utilities/vertical-align.hbs index 3444b751..a7a1a70e 100644 --- a/src/docs/content/utilities/vertical-align.hbs +++ b/src/docs/content/utilities/vertical-align.hbs @@ -15,7 +15,7 @@ Classes for the value of nsw-align are named using the format
  • baseline
  • top
    • -
  • middel
    • +
  • middle
  • bottom
  • text-bottom
  • text-top
    • diff --git a/src/docs/content/utilities/vertical-rule.hbs b/src/docs/content/utilities/vertical-rule.hbs deleted file mode 100644 index eb8f3af8..00000000 --- a/src/docs/content/utilities/vertical-rule.hbs +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Vertical rule -width: narrow -intro: Use the custom vertical rule helper to create vertical dividers like the
    element. -no-blank: true -model: json/utilities.json -meta-description: Use the custom vertical rule helper to create vertical dividers like the
    element. -meta-index: true ---- - -

    How it works

    - -

    Vertical rules are inspired by the hr element, allowing you to create vertical dividers in common layouts. They’re styled just like hr elements.

    - -{{#>_docs-example open=true separated=true}} -
    -{{/_docs-example}} - -

    Vertical rules scale their height in flex layouts

    - -{{#>_docs-example open=true separated=true}} -
    -
    -
    -{{/_docs-example}} - -{{#>_docs-example open=true separated=true}} -
    -
    First item
    -
    Second item
    -
    -
    Third item
    -
    -{{/_docs-example}} - - diff --git a/src/docs/search.json b/src/docs/search.json index 92d39381..6f0d4540 100644 --- a/src/docs/search.json +++ b/src/docs/search.json @@ -184,11 +184,6 @@ "keywords": "Flexible, layout, component, content, consistent, vertical, spacing, Usage, style, container, Image, Box, Colour, Inverted, colours, dark background", "url": "/core/section/index.html" }, -{ - "title": "Spacing", - "keywords": "Responsive, units, alignment, consistent, 8-pixel grid, Spacing token, Helper classes, margin, padding, banner", - "url": "/core/spacing/index.html" -}, { "title": "Graphic elements", "keywords": "Logo positioning, details, hierarchy, interactions, digital branding, brand, Border radius, Drop shadow, Application, Line System, Examples, tabs, card, in-page navigation, blue diamond", @@ -275,8 +270,73 @@ "url": "/docs/content/develop/theming.html" }, { - "title": "Utility Classes", - "keywords": "Background colour, Text colour, Border colour, Font size, Border size, Box shadow, Viewport visibility, Hide, Show", - "url": "/docs/content/develop/helpers.html" + "title": "Background Utility Classes", + "keywords": "Background colour, Opacity, Hover state, color", + "url": "/docs/content/utilities/background.html" +}, +{ + "title": "Border Utility Classes", + "keywords": "Border radius, width, style, color, borders", + "url": "/docs/content/utilities/borders.html" +}, +{ + "title": "Box Shadow Utility Class", + "keywords": "Box Shadow, box-shadow, shadow", + "url": "/docs/content/utilities/box-shadow.html" +}, +{ + "title": "Display Utility Classes", + "keywords": "display, inline, inline-block, block, grid, inline-grid, flex, inline-flex, hide, show", + "url": "/docs/content/utilities/displayu.html" +}, +{ + "title": "Flex Utility Classes", + "keywords": "Flex, Direction, Justify content, Align items, Align self, Fill, Grow, shrink, Wrap, Order, content", + "url": "/docs/content/utilities/flex.html" +}, +{ + "title": "Float Utility Classes", + "keywords": "Float, wrapping, ", + "url": "/docs/content/utilities/float.html" +}, +{ + "title": "Overflow Utility Classes", + "keywords": "Overflow, auto, hidden, visible, scroll", + "url": "/docs/content/utilities/overflow.html" +}, +{ + "title": "Position Utility Classes", + "keywords": "Position, static, relative, absolute, fixed, sticky", + "url": "/docs/content/utilities/position.html" +}, +{ + "title": "Spacing", + "keywords": "Responsive, units, alignment, consistent, 8-pixel grid, Spacing token, Helper classes, margin, padding, banner", + "url": "/docs/content/utilities/spacing.html" +}, +{ + "title": "SVG Utility Classes", + "keywords": "SVG, fill, stroke, stroke width, icons, pictograms", + "url": "/docs/content/utilities/svg.html" +}, +{ + "title": "Text Utility Classes", + "keywords": "Text, alignment, wrapping, font, weight, overflow, colour", + "url": "/docs/content/utilities/text.html" +}, +{ + "title": "Vertical alignment Utility Classes", + "keywords": "Vertical align, alignment, inline, inline-block, inline-table, table, baseline, top, middle, bottom, text-bottom, text-top", + "url": "/docs/content/utilities/vertical-align.html" +}, +{ + "title": "Visibility Utility Classes", + "keywords": "Visibility, show, hide", + "url": "/docs/content/utilities/visibility.html" +}, +{ + "title": "Z-index Classes", + "keywords": "Z-index, stack order, three-dimensional, positioning, 3D", + "url": "/docs/content/utilities/z-index.html" } ] \ No newline at end of file From 80f8b48cad54b8409d10ad3d89d7739c50a07043 Mon Sep 17 00:00:00 2001 From: Lauren Hitchon Date: Tue, 15 Aug 2023 13:38:32 +1000 Subject: [PATCH 13/17] Remove and refine elements on the Position, SVG and Text pages --- .../content/utilities/json/utilities.json | 26 ++++- src/docs/content/utilities/position.hbs | 94 ++----------------- src/docs/content/utilities/svg.hbs | 54 +++++++---- src/docs/content/utilities/text.hbs | 18 +++- 4 files changed, 82 insertions(+), 110 deletions(-) diff --git a/src/docs/content/utilities/json/utilities.json b/src/docs/content/utilities/json/utilities.json index 18d9a3d0..b5c3869b 100644 --- a/src/docs/content/utilities/json/utilities.json +++ b/src/docs/content/utilities/json/utilities.json @@ -124,9 +124,7 @@ "width": { "1": "nsw-border--1", "2": "nsw-border--2", - "3": "nsw-border--3", "4": "nsw-border--4", - "5": "nsw-border--5", "6": "nsw-border--6" }, "color": { @@ -171,8 +169,9 @@ } }, "opacity": [ "0", "25", "50", "75", "100" ], - "fill": [ "nsw-fill-brand-dark", "nsw-fill-brand-light", "nsw-fill-brand-supplementary", "nsw-fill-brand-accent", "nsw-fill-black", "nsw-fill-white", "nsw-fill-off-white", "nsw-fill-grey-01", "nsw-fill-grey-02", "nsw-fill-grey-03", "nsw-fill-grey-04" ], - "stroke": [ "nsw-stroke-brand-dark", "nsw-stroke-brand-light", "nsw-stroke-brand-supplementary", "nsw-stroke-brand-accent", "nsw-stroke-black", "nsw-stroke-white", "nsw-stroke-off-white", "nsw-stroke-grey-01", "nsw-stroke-grey-02", "nsw-stroke-grey-03", "nsw-stroke-grey-04" ], + "svgLight": [ "brand-dark", "brand-light", "brand-supplementary", "brand-accent", "black", "grey-01", "grey-02", "grey-03" ], + "svgDark": [ "brand-light", "brand-supplementary", "brand-accent", "white", "off-white", "grey-03", "grey-04" ], + "fill": [ "brand-dark", "brand-light", "brand-supplementary", "brand-accent", "black", "white", "off-white", "grey-01", "grey-02", "grey-03", "grey-04" ], "textColour": { "nsw-text--dark":"nsw-text-dark", "nsw-text--light":"nsw-text-light", @@ -188,6 +187,25 @@ "nsw-text--grey-03":"nsw-grey-03", "nsw-text--grey-04":"nsw-grey-04" }, + "textLight": { + "nsw-text--dark":"nsw-text-dark", + "nsw-text--brand-dark":"nsw-brand-dark", + "nsw-text--brand-supplementary":"nsw-brand-supplementary", + "nsw-text--brand-accent":"nsw-brand-accent", + "nsw-text--black":"nsw-black", + "nsw-text--grey-01":"nsw-grey-01", + "nsw-text--grey-02":"nsw-grey-02" + }, + "textDark": { + "nsw-text--light":"nsw-text-light", + "nsw-text--brand-light":"nsw-brand-light", + "nsw-text--brand-supplementary":"nsw-brand-supplementary", + "nsw-text--brand-accent":"nsw-brand-accent", + "nsw-text--white":"nsw-white", + "nsw-text--off-white":"nsw-off-white", + "nsw-text--grey-03":"nsw-grey-03", + "nsw-text--grey-04":"nsw-grey-04" + }, "sizing": { "4xs": "0.25rem", "3xs": "0.5rem", diff --git a/src/docs/content/utilities/position.hbs b/src/docs/content/utilities/position.hbs index 26c984cc..007ed7ea 100644 --- a/src/docs/content/utilities/position.hbs +++ b/src/docs/content/utilities/position.hbs @@ -8,8 +8,6 @@ meta-description: Utilities for controlling how an element is positioned in the meta-index: true --- -

    - {{#>_docs-code open=true}}
    ...
    ...
    @@ -20,14 +18,12 @@ meta-index: true
    - -
    -
    -
    -
    -
    -
    - +
    +
    +
    +
    +
    +
    @@ -40,80 +36,4 @@ meta-index: true
    -{{/_docs-code}} - -

    Center elements

    - -

    In addition, you can also center the elements with the transform utility class .nsw-translate-middle.

    - -

    This class applies the transformations translateX(-50%) and translateY(-50%) to the element which, in combination with the edge positioning utilities, allows you to absolute center an element.

    - -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    - -{{#>_docs-code open=true}} -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -{{/_docs-code}} - -

    By adding .nsw-translate-middle-x or .nsw-translate-middle-y classes, elements can be positioned only in horizontal or vertical direction.

    - -
    -
    - -
    -
    -
    - -
    -
    -
    - -
    -
    -
    - -
    -
    - -{{#>_docs-code open=true}} -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -{{/_docs-code}} - -

    Example

    - -{{#>_docs-example open=true separated=true}} - -{{/_docs-example}} \ No newline at end of file +{{/_docs-code}} \ No newline at end of file diff --git a/src/docs/content/utilities/svg.hbs b/src/docs/content/utilities/svg.hbs index a64a04a3..a2692afc 100644 --- a/src/docs/content/utilities/svg.hbs +++ b/src/docs/content/utilities/svg.hbs @@ -1,39 +1,59 @@ --- title: SVG width: narrow -intro: Utilities for styling the fill, stroke and stroke width of SVG elements. +intro: Utilities for styling the fill of SVG elements. no-blank: true model: json/utilities.json -meta-description: Utilities for styling the fill, stroke and stroke width of SVG elements. +meta-description: Utilities for styling the fill of SVG elements. meta-index: true --- -

    Fill

    +

    Setting the fill color

    +

    Use the nsw-fill-{color} utilities to change the fill color of an SVG.

    -

    Utilities for styling the fill of SVG elements.

    +
    +
    + + + + + + + {{#each model.fill as |value property|}} + + + + + {{/each}} + +
    +

    Class

    +     		+

    Description

    +
    +

    .nsw-fill-{{this}}

    +     		+

    Applies fill: var(--nsw-{{this}}) to element

    +
    +
    +
    {{#>_docs-example showcode=true separated="true"}}
    - {{#each model.fill as |value property|}} - + {{#each model.svgLight as |value property|}} + {{/each}}
    {{/_docs-example}} -{{#>_docs-code open=true}} - -{{/_docs-code}} - -{{#>_docs-example showcode=true separated="true"}} +{{#>_docs-example showcode=true separated="true" dark=true}}
    - {{#each model.stroke as |value property|}} - - + {{#each model.svgDark as |value property|}} + {{/each}}
    {{/_docs-example}} -{{#>_docs-code open=true}} - - +{{#>_docs-code open=true}} + {{/_docs-code}} \ No newline at end of file diff --git a/src/docs/content/utilities/text.hbs b/src/docs/content/utilities/text.hbs index d28671e7..d1a0cc3f 100644 --- a/src/docs/content/utilities/text.hbs +++ b/src/docs/content/utilities/text.hbs @@ -93,6 +93,8 @@ meta-index: true

    Text color

    +

    Control the text color of an element using the nsw-text--{color} utilities.

    +
    @@ -126,8 +128,20 @@ meta-index: true -{{#>_docs-example open=true separated=true}} -{{#each model.textColour as |value property|}} +{{#>_docs-example showcode=true separated=true}} +{{#each model.textLight as |value property|}} +

    .{{@key}}

    +{{/each}} +{{/_docs-example}} + +{{#>_docs-example showcode=true separated=true dark=true}} +{{#each model.textDark as |value property|}}

    .{{@key}}

    {{/each}} {{/_docs-example}} + +{{#>_docs-code open=true}} +{{#each model.textColour as |value property|}} +

    .{{@key}}

    +{{/each}} +{{/_docs-code}} \ No newline at end of file From eff8cd3ad853dd3174bf7f84363d96c2f62ccf4f Mon Sep 17 00:00:00 2001 From: Lauren Hitchon Date: Tue, 15 Aug 2023 13:57:24 +1000 Subject: [PATCH 14/17] Update float.hbs --- src/docs/content/utilities/float.hbs | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/docs/content/utilities/float.hbs b/src/docs/content/utilities/float.hbs index 00f0f785..31cb7ce5 100644 --- a/src/docs/content/utilities/float.hbs +++ b/src/docs/content/utilities/float.hbs @@ -22,10 +22,10 @@ meta-index: true

    Responsive variations also exist for each float value.

    {{#>_docs-example open=true separated=true}} -
    Float left on viewports sized SM (small) or wider

    -
    Float left on viewports sized MD (medium) or wider

    -
    Float left on viewports sized LG (large) or wider

    -
    Float left on viewports sized XL (extra-large) or wider

    +
    Float right on viewports sized SM (small) or wider

    +
    Float right on viewports sized MD (medium) or wider

    +
    Float right on viewports sized LG (large) or wider

    +
    Float right on viewports sized XL (extra-large) or wider

    {{/_docs-example}}

    All the supported classes

    From ba6605b2e92f4e65e985ac00473e8b70a965b0c5 Mon Sep 17 00:00:00 2001 From: Lauren Hitchon Date: Mon, 21 Aug 2023 10:17:46 +1000 Subject: [PATCH 15/17] Remove brand-light and grey-03 from white background example --- src/docs/content/utilities/json/utilities.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/docs/content/utilities/json/utilities.json b/src/docs/content/utilities/json/utilities.json index b5c3869b..c3635bb8 100644 --- a/src/docs/content/utilities/json/utilities.json +++ b/src/docs/content/utilities/json/utilities.json @@ -169,7 +169,7 @@ } }, "opacity": [ "0", "25", "50", "75", "100" ], - "svgLight": [ "brand-dark", "brand-light", "brand-supplementary", "brand-accent", "black", "grey-01", "grey-02", "grey-03" ], + "svgLight": [ "brand-dark", "brand-supplementary", "brand-accent", "black", "grey-01", "grey-02" ], "svgDark": [ "brand-light", "brand-supplementary", "brand-accent", "white", "off-white", "grey-03", "grey-04" ], "fill": [ "brand-dark", "brand-light", "brand-supplementary", "brand-accent", "black", "white", "off-white", "grey-01", "grey-02", "grey-03", "grey-04" ], "textColour": { From ae4a277dc13d0260ac6d36c886c6104c9252fff5 Mon Sep 17 00:00:00 2001 From: Lauren Hitchon Date: Mon, 21 Aug 2023 13:46:25 +1000 Subject: [PATCH 16/17] Update svg.hbs --- src/docs/content/utilities/svg.hbs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/docs/content/utilities/svg.hbs b/src/docs/content/utilities/svg.hbs index a2692afc..bb881cc1 100644 --- a/src/docs/content/utilities/svg.hbs +++ b/src/docs/content/utilities/svg.hbs @@ -41,7 +41,7 @@ meta-index: true {{#>_docs-example showcode=true separated="true"}}
    {{#each model.svgLight as |value property|}} - + {{/each}}
    {{/_docs-example}} @@ -49,11 +49,11 @@ meta-index: true {{#>_docs-example showcode=true separated="true" dark=true}}
    {{#each model.svgDark as |value property|}} - + {{/each}}
    {{/_docs-example}} {{#>_docs-code open=true}} - + {{/_docs-code}} \ No newline at end of file From 9d59cf1068c10ce7f343b7a13bc802c58168695d Mon Sep 17 00:00:00 2001 From: Lauren Hitchon Date: Tue, 22 Aug 2023 09:48:20 +1000 Subject: [PATCH 17/17] Add Close button --- src/docs/search.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/docs/search.json b/src/docs/search.json index 6f0d4540..67f6794d 100644 --- a/src/docs/search.json +++ b/src/docs/search.json @@ -338,5 +338,10 @@ "title": "Z-index Classes", "keywords": "Z-index, stack order, three-dimensional, positioning, 3D", "url": "/docs/content/utilities/z-index.html" +}, +{ + "title": "Close button", + "keywords": "Dialog, Global Alert, dismiss, icon, button", + "url": "/components/close-button/index.html" } ] \ No newline at end of file