diff --git a/.github/workflows/build-deploy-staging.yml b/.github/workflows/build-deploy-staging.yml index 10c34f4e5..195471234 100644 --- a/.github/workflows/build-deploy-staging.yml +++ b/.github/workflows/build-deploy-staging.yml @@ -35,7 +35,7 @@ jobs: dist - run: | npm install -g pa11y-ci - pa11y-ci ./dist/{components,patterns,styles,templates}/**/*.html + pa11y-ci ./dist/{components,styles,templates}/**/*.html - name: Visual test uses: percy/snapshot-action@v0.1.2 with: diff --git a/gulpfile.js b/gulpfile.js index df10e7a6e..d13a54742 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -130,10 +130,6 @@ function metalsmithBuild(callback) { pattern: config.metalSmith.collection.components.pattern, sortBy: sortByAlpha, }, - patterns: { - pattern: config.metalSmith.collection.patterns.pattern, - sortBy: sortByAlpha, - }, styles: { pattern: config.metalSmith.collection.styles.pattern, sortBy: sortByAlpha, diff --git a/src/components/accordion/_accordion.hbs b/src/components/accordion/_accordion.hbs index 9215b4f5d..d536e4b07 100644 --- a/src/components/accordion/_accordion.hbs +++ b/src/components/accordion/_accordion.hbs @@ -2,7 +2,9 @@ {{#each accordionitems}}

{{title}}

- {{{content}}} +
+ {{{content}}} +
{{/each}} diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss index f5f64db3b..e53a8d6d6 100644 --- a/src/components/accordion/_accordion.scss +++ b/src/components/accordion/_accordion.scss @@ -1,5 +1,5 @@ .nsw-accordion { - @include nsw-spacing(margin, md none none); + @include component-spacing(); &__title, &__button { diff --git a/src/components/accordion/accordion.json b/src/components/accordion/accordion.json deleted file mode 100644 index 2a187e39b..000000000 --- a/src/components/accordion/accordion.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "accordionitems": [ - { - "title": "New and existing homes", - "content": "

As a first home buyer, you may be eligible for a transfer duty concession or exemption.

" - }, - { - "title": "Vacant land", - "content": "

The FHBAS applies to vacant land on which you plan to build your home.

" - } - ] -} diff --git a/src/components/accordion/index.hbs b/src/components/accordion/index.hbs index 8eda72310..ff28d60c2 100644 --- a/src/components/accordion/index.hbs +++ b/src/components/accordion/index.hbs @@ -1,7 +1,20 @@ --- title: Accordion -model: accordion.json +model: json/accordion.json --- -
- {{>_accordion model}} -
+ +
+
+
+
+
+
+
+ {{>_accordion model}} +
+
+
+
+
+
+
diff --git a/src/components/accordion/json/accordion-2.json b/src/components/accordion/json/accordion-2.json new file mode 100644 index 000000000..501e157d9 --- /dev/null +++ b/src/components/accordion/json/accordion-2.json @@ -0,0 +1,22 @@ +{ + "accordionitems": [ + { + "title": "Sprint cadence or workflow", + "content": "

In your team there may already be a sprint cadence that includes content design. Become familiar with agile practices such as the Kanban wall, daily stand ups and sprint planning. Understand the user journey and their needs. Get involved in usability testing sessions and iteration.

Otherwise, the content workflow may be separate from the product team. At the very least, make sure the team has real content to use, when they’re building a prototype. Also ensure your team uses real content when it does usability testing. Attend playbacks from this testing, to know how your content needs to change.

As well as designing the user experience with product team members, a content designer works to know the facts with subject matter experts.

" + }, + { + "title": "Simplifying complexity", + "content": "

Your aim from the outset is to simplify everything for the user. Your main task will be to set up a clear path for them to achieve their goal.

Start with a user story. You should create one for each piece of content, from user research. If you’re part of a multidisciplinary product team, everyone is likely to be using them as you design and build.

A user story will help you to pinpoint the user need from the outset. It puts the user front-of-mind and gives you a focus when designing and writing the content.

Next, create a structure for your page, based on the user story. Write up meaningful H2 headers to serve as signposts to help the user do what they need to do.

" + }, + { + "title": "Working with subject matter experts", + "content": "

Share your way of working with your subject matter experts – in person if possible.

They're a great way of introducing your approach to a subject matter expert, which may be completely foreign to them. It will show them how you're focusing on the user, and what you're trying to solve. Ask them for feedback. Find out if there’s anything missing and if you’re on the right track.

" + } + ] +} + + + + + + diff --git a/src/components/accordion/json/accordion.json b/src/components/accordion/json/accordion.json new file mode 100644 index 000000000..ac21e4c8c --- /dev/null +++ b/src/components/accordion/json/accordion.json @@ -0,0 +1,16 @@ +{ + "accordionitems": [ + { + "title": "First Home Owner's Grant (New Homes) scheme (FHOG)", + "content": "

Buying or building your first home? You may be eligible for a $10,000 grant under the First Home Owner's Grant (FHOG) scheme.

This grant scheme only applies to buying or building a new home.

You can make a claim if:

" + }, + { + "title": "HomeBuilder program", + "content": "

If you are building a new home, you could also be able to apply for the Australian Government grant of $25,000. To be eligible you must:

HomeBuilder complements the NSW Government’s existing First Home Owner Grant and stamp duty concessions.

" + }, + { + "title": "First Home Buyer Assistance scheme (FHBAS)", + "content": "

The NSW Government recently announced increased thresholds for purchases of new homes and vacant land to build a new home from 1 August 2020. The threshold for existing home purchases remains unchanged.

" + } + ] +} diff --git a/src/components/breadcrumbs/index.hbs b/src/components/breadcrumbs/index.hbs index 9ac7a1524..bc568decf 100644 --- a/src/components/breadcrumbs/index.hbs +++ b/src/components/breadcrumbs/index.hbs @@ -1,7 +1,20 @@ --- title: Breadcrumbs -model: breadcrumbs.json +model: json/breadcrumbs.json ---
- {{>_breadcrumbs model}}
+ +
+
+
+
+
+
+ {{>_breadcrumbs model}} +
+
+
+
+
+
\ No newline at end of file diff --git a/src/components/breadcrumbs/breadcrumbs.json b/src/components/breadcrumbs/json/breadcrumbs.json similarity index 61% rename from src/components/breadcrumbs/breadcrumbs.json rename to src/components/breadcrumbs/json/breadcrumbs.json index 467ceab93..9cd362b92 100644 --- a/src/components/breadcrumbs/breadcrumbs.json +++ b/src/components/breadcrumbs/json/breadcrumbs.json @@ -6,15 +6,15 @@ "url": "#" }, { - "text": "News and Events", + "text": "About DPC", "url": "#" }, { - "text": "News", + "text": "NSW Digital Design System", "url": "#" }, { - "text": "Download the Digital Driver Licence to your phone", + "text": "Content design", "url": "#" } ] diff --git a/src/components/button/index.hbs b/src/components/button/index.hbs index 8ab0ad0ec..f512dfb1a 100644 --- a/src/components/button/index.hbs +++ b/src/components/button/index.hbs @@ -1,51 +1,86 @@ --- title: Buttons --- -
- {{>_button-link url="#" style="primary" text="Link"}} - {{>_button type="button" style="primary" text="Button"}} - {{>_button type="submit" style="primary" text="Submit Button"}} - {{>_button type="reset" style="primary" text="Reset Button"}} - {{>_button-input type="button" style="primary" text="Input Button"}} - {{>_button-input type="submit" style="primary" text="Input Submit Button"}} - {{>_button-input type="reset" style="primary" text="Input Reset Button"}} -
-
- {{>_button-link url="#" style="highlight" text="Link"}} - {{>_button type="button" style="highlight" text="Button"}} - {{>_button type="submit" style="highlight" text="Submit Button"}} - {{>_button type="reset" style="highlight" text="Reset Button"}} - {{>_button-input type="button" style="highlight" text="Input Button"}} - {{>_button-input type="submit" style="highlight" text="Input Submit Button"}} - {{>_button-input type="reset" style="highlight" text="Input Reset Button"}} -
-
- {{>_button-link url="#" style="outline" text="Link"}} - {{>_button type="button" style="outline" text="Button"}} - {{>_button type="submit" style="outline" text="Submit Button"}} - {{>_button type="reset" style="outline" text="Reset Button"}} - {{>_button-input type="button" style="outline" text="Input Button"}} - {{>_button-input type="submit" style="outline" text="Input Submit Button"}} - {{>_button-input type="reset" style="outline" text="Input Reset Button"}} -
-
- {{>_button-link url="#" style="white" text="Link"}} - {{>_button type="button" style="white" text="Button"}} - {{>_button type="submit" style="white" text="Submit Button"}} - {{>_button type="reset" style="white" text="Reset Button"}} - {{>_button-input type="button" style="white" text="Input Button"}} - {{>_button-input type="submit" style="white" text="Input Submit Button"}} - {{>_button-input type="reset" style="white" text="Input Reset Button"}} -
-
- {{>_button type="button" style="primary" text="Button" isDisabled=true}} - {{>_button type="submit" style="primary" text="Submit Button" isDisabled=true}} - {{>_button type="reset" style="primary" text="Reset Button" isDisabled=true}} - {{>_button-input type="button" style="primary" text="Input Button" isDisabled=true}} - {{>_button-input type="submit" style="primary" text="Input Submit Button" isDisabled=true}} - {{>_button-input type="reset" style="primary" text="Input Reset Button" isDisabled=true}} -
-
- Note: Its not possible to disable links, a class of .disable can be applied for the visual look
- but that doesnt prevent click or keyboard events. Suggestion is to not disable links -
+ +
+
+
+
+
+
+
+

Primary

+ {{>_button-link url="#" style="primary" text="Link"}} + {{>_button type="button" style="primary" text="Button"}} + {{>_button type="submit" style="primary" text="Submit Button"}} + {{>_button type="reset" style="primary" text="Reset Button"}} + {{>_button-input type="button" style="primary" text="Input"}} + {{>_button-input type="submit" style="primary" text="Input Submit"}} + {{>_button-input type="reset" style="primary" text="Input Reset"}} +
+
+

Highlight

+ {{>_button-link url="#" style="highlight" text="Link"}} + {{>_button type="button" style="highlight" text="Button"}} + {{>_button type="submit" style="highlight" text="Submit Button"}} + {{>_button type="reset" style="highlight" text="Reset Button"}} + {{>_button-input type="button" style="highlight" text="Input"}} + {{>_button-input type="submit" style="highlight" text="Input Submit"}} + {{>_button-input type="reset" style="highlight" text="Input Reset"}} +
+
+

Outline

+ {{>_button-link url="#" style="outline" text="Link"}} + {{>_button type="button" style="outline" text="Button"}} + {{>_button type="submit" style="outline" text="Submit Button"}} + {{>_button type="reset" style="outline" text="Reset Button"}} + {{>_button-input type="button" style="outline" text="Input"}} + {{>_button-input type="submit" style="outline" text="Input Submit"}} + {{>_button-input type="reset" style="outline" text="Input Reset"}} +
+
+
+
+
+
+
+
+
+
+
+
+

White

+ {{>_button-link url="#" style="white" text="Link"}} + {{>_button type="button" style="white" text="Button"}} + {{>_button type="submit" style="white" text="Submit Button"}} + {{>_button type="reset" style="white" text="Reset Button"}} + {{>_button-input type="button" style="white" text="Input"}} + {{>_button-input type="submit" style="white" text="Input Submit"}} + {{>_button-input type="reset" style="white" text="Input Reset"}} +
+
+
+
+
+
+
+
+
+
+
+
+

Disabled

+

Note: Its not possible to disable links, a class of .disable should only be applied to buttons and inputs

+ {{>_button type="button" style="primary" text="Button" isDisabled=true}} + {{>_button type="submit" style="primary" text="Submit Button" isDisabled=true}} + {{>_button type="reset" style="primary" text="Reset Button" isDisabled=true}} + {{>_button-input type="button" style="primary" text="Input" isDisabled=true}} + {{>_button-input type="submit" style="primary" text="Input Submit" isDisabled=true}} + {{>_button-input type="reset" style="primary" text="Input Reset" isDisabled=true}} +
+
+
+
+
+
+
diff --git a/src/components/button/button.json b/src/components/button/json/button.json similarity index 100% rename from src/components/button/button.json rename to src/components/button/json/button.json diff --git a/src/components/callout/_callout.hbs b/src/components/callout/_callout.hbs index a07ff25ab..06d86275e 100644 --- a/src/components/callout/_callout.hbs +++ b/src/components/callout/_callout.hbs @@ -5,7 +5,7 @@ {{/if}}

{{heading}}

-

{{copy}}

+

{{{copy}}}

{{#if link}}{{link.text}}{{/if}}
diff --git a/src/components/callout/_callout.scss b/src/components/callout/_callout.scss index fc4ff9174..899a20848 100644 --- a/src/components/callout/_callout.scss +++ b/src/components/callout/_callout.scss @@ -1,6 +1,6 @@ .nsw-callout { @include nsw-spacing(padding, md); - @include nsw-spacing(margin-top, md); + @include component-spacing(); background: $light10; position: relative; border-left: solid 6px $nsw-primary-blue; @@ -43,6 +43,10 @@ @include nsw-spacing(margin, sm none none none); } + a { + @include text-link; + } + .nsw-text-link { @include nsw-spacing(margin-top, sm); } diff --git a/src/components/callout/callout-all.json b/src/components/callout/callout-all.json deleted file mode 100644 index c1424d9bd..000000000 --- a/src/components/callout/callout-all.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "heading": "Callout Heading", - "icon": "search", - "copy": "Filium morte multavit si sine causa, nollem me tamen laudandis maioribus meis corrupisti nec voluptas sit, amet, consectetur, adipisci velit.", - "link": { - "text": "Text link", - "href": "#" - } -} diff --git a/src/components/callout/callout.json b/src/components/callout/callout.json deleted file mode 100644 index f843646a2..000000000 --- a/src/components/callout/callout.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "heading": "Callout Heading", - "copy": "Filium morte multavit si sine causa, nollem me tamen laudandis maioribus meis corrupisti nec voluptas sit, amet, consectetur, adipisci velit." -} diff --git a/src/components/callout/index.hbs b/src/components/callout/index.hbs index 71d377938..0714c6bbd 100644 --- a/src/components/callout/index.hbs +++ b/src/components/callout/index.hbs @@ -1,13 +1,28 @@ --- title: Callout model: - default: callout.json - all: callout-all.json + default: json/callout.json + all: json/callout-all.json --- -
- {{>_callout model.default}} -
-
- {{>_callout model.all}} -
+
+
+
+
+
+
+
+
+ {{>_callout model.default}} +
+
+
+ {{>_callout model.all}} +
+
+
+
+
+
+ +
diff --git a/src/components/callout/json/callout-all-2.json b/src/components/callout/json/callout-all-2.json new file mode 100644 index 000000000..37c2c826b --- /dev/null +++ b/src/components/callout/json/callout-all-2.json @@ -0,0 +1,9 @@ +{ + "heading": "Keep up-to date", + "icon": "status-info", + "copy": "Join our community and register for updates to stay up-to-date with all the latest patterns releases.", + "link": { + "text": "Join our community", + "href": "#" + } +} diff --git a/src/components/callout/json/callout-all.json b/src/components/callout/json/callout-all.json new file mode 100644 index 000000000..d0562fdf5 --- /dev/null +++ b/src/components/callout/json/callout-all.json @@ -0,0 +1,9 @@ +{ + "heading": "The Digital Driver's License trial", + "icon": "status-info", + "copy": "Once we launch statewide, the Digital Drivers License will become legal for use across NSW", + "link": { + "text": "Conditions for using the Digital Drivers License", + "href": "#" + } +} diff --git a/src/components/callout/json/callout-icon.json b/src/components/callout/json/callout-icon.json new file mode 100644 index 000000000..5a47fd05f --- /dev/null +++ b/src/components/callout/json/callout-icon.json @@ -0,0 +1,5 @@ +{ + "heading": "Plain language tool", + "icon": "status-info", + "copy": "Learn more about writing clear, concise, organised, and appropriate content for your intended audience using plain language tools." +} diff --git a/src/components/callout/json/callout.json b/src/components/callout/json/callout.json new file mode 100644 index 000000000..02cc9ef23 --- /dev/null +++ b/src/components/callout/json/callout.json @@ -0,0 +1,4 @@ +{ + "heading": "The Digital Driver's License trial", + "copy": "Once we launch statewide, the Digital Drivers License will become legal for use across NSW" +} diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index 71003c4d9..0b4962f8d 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -9,7 +9,6 @@ flex-direction: column; overflow: hidden; height: 100%; - max-width: rem(400px); border: 0; &:hover { diff --git a/src/components/card/card-media.json b/src/components/card/card-media.json deleted file mode 100644 index 3fd10433a..000000000 --- a/src/components/card/card-media.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "heading": "Ut placet inquam tum dicere exorsus est laborum et inter", - "copy": "Sunt autem quibusdam et voluptatem ut ita ruant itaque earum motus et expe", - "img": "https://picsum.photos/id/421/400/200" -} diff --git a/src/components/card/card-news.json b/src/components/card/card-news.json deleted file mode 100644 index 21dd5d92e..000000000 --- a/src/components/card/card-news.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "heading": "Ut placet inquam tum dicere exorsus est laborum et inter", - "copy": "Sunt autem quibusdam et voluptatem ut ita ruant itaque earum motus et expe", - "tag": "Service NSW", - "date": { - "machine": "2019-03-30", - "human": "30 March 2019" - } -} diff --git a/src/components/card/card-simple.json b/src/components/card/card-simple.json deleted file mode 100644 index 4fe5f3ce7..000000000 --- a/src/components/card/card-simple.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "heading": "Ut placet inquam tum dicere exorsus est", - "copy": "Sunt autem quibusdam et voluptatem ut ita" -} diff --git a/src/components/card/card.json b/src/components/card/card.json deleted file mode 100644 index db3e4a98c..000000000 --- a/src/components/card/card.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "theme": "", - "heading": "Ut placet inquam tum dicere exorsus est laborum et inter", - "copy": "Sunt autem quibusdam et voluptatem ut ita ruant itaque earum motus et expexrt" -} diff --git a/src/components/card/index.hbs b/src/components/card/index.hbs index 904bc63ad..8ec94afbf 100644 --- a/src/components/card/index.hbs +++ b/src/components/card/index.hbs @@ -1,55 +1,102 @@ --- title: Card model: - basic: card.json - media: card-media.json - news: card-news.json - headline: card-headline.json + card-headline-1: ../../components/card/json/card-headline-1.json + card-headline-2: ../../components/card/json/card-headline-2.json + card-headline-3: ../../components/card/json/card-headline-3.json + card-simple-1: ../../components/card/json/card-simple-1.json + card-simple-2: ../../components/card/json/card-simple-2.json + card-simple-3: ../../components/card/json/card-simple-3.json + card-media-1: ../../components/card/json/card-media-1.json + card-media-2: ../../components/card/json/card-media-2.json + card-media-3: ../../components/card/json/card-media-3.json + card-news-1: ../../components/card/json/card-news-1.json + card-news-2: ../../components/card/json/card-news-2.json + card-news-3: ../../components/card/json/card-news-3.json --- -
-

Headline only

-
-
- {{>_card model.headline}} -
-
-
-

Headline and Copy

-
-
- {{>_card model.basic}} -
-
-
-

All options

-
-
- {{>_card model.news}} -
-
-
-

With image

-
-
- {{>_card model.media}} -
-
+
+
+
+
+
+

Headline only

+
+
+ {{>_card model.card-headline-1}} +
+
+ {{>_card model.card-headline-2}} +
+
+ {{>_card model.card-headline-3}} +
+
+
+
+
+
-
-
-

Multiple cards in grid

-
-
-
-
- {{>_card model.basic}} +
+
+
+
+

Headline and Copy

+
+
+ {{>_card model.card-simple-1}} +
+
+ {{>_card model.card-simple-2}} +
+
+ {{>_card model.card-simple-3}} +
+
+
+
-
- {{>_card model.basic}} +
+ +
+
+
+
+

With image

+
+
+ {{>_card model.card-media-1}} +
+
+ {{>_card model.card-media-2}} +
+
+ {{>_card model.card-media-3}} +
+
+
+
-
- {{>_card model.basic}} +
+ +
+
+
+
+

All options

+
+
+ {{>_card model.card-news-1}} +
+
+ {{>_card model.card-news-2}} +
+
+ {{>_card model.card-news-3}} +
+
+
+
-
+
diff --git a/src/components/card/json/card-blog-1.json b/src/components/card/json/card-blog-1.json new file mode 100644 index 000000000..4cfd543f2 --- /dev/null +++ b/src/components/card/json/card-blog-1.json @@ -0,0 +1,9 @@ +{ + "heading": "Scaling a design system", + "img": "https://picsum.photos/id/1076/400/200", + "tag": "Design System Team", + "date": { + "machine": "2020-10-16", + "human": "16 Oct 2020" + } +} diff --git a/src/components/card/json/card-blog-2.json b/src/components/card/json/card-blog-2.json new file mode 100644 index 000000000..cce711391 --- /dev/null +++ b/src/components/card/json/card-blog-2.json @@ -0,0 +1,9 @@ +{ + "heading": "The NSW Design Standards re-release - a story of iteration", + "img": "https://picsum.photos/id/20/400/200", + "tag": "Design System Team", + "date": { + "machine": "2020-09-14", + "human": "14 Sep 2020" + } +} diff --git a/src/components/card/json/card-blog-3.json b/src/components/card/json/card-blog-3.json new file mode 100644 index 000000000..b089c39a7 --- /dev/null +++ b/src/components/card/json/card-blog-3.json @@ -0,0 +1,9 @@ +{ + "heading": "Evolving the Standard for Designing Digital Services in NSW", + "img": "https://picsum.photos/id/859/400/200", + "tag": "Design System Team", + "date": { + "machine": "2020-09-02", + "human": "2 Sep 2020" + } +} diff --git a/src/components/card/json/card-headline-1.json b/src/components/card/json/card-headline-1.json new file mode 100644 index 000000000..cfe0c6df3 --- /dev/null +++ b/src/components/card/json/card-headline-1.json @@ -0,0 +1,4 @@ +{ + "theme": "headline", + "heading": "Health and care" +} diff --git a/src/components/card/json/card-headline-2.json b/src/components/card/json/card-headline-2.json new file mode 100644 index 000000000..ea300d97f --- /dev/null +++ b/src/components/card/json/card-headline-2.json @@ -0,0 +1,4 @@ +{ + "theme": "headline", + "heading": "Boating, fishing and outdoors" +} diff --git a/src/components/card/json/card-headline-3.json b/src/components/card/json/card-headline-3.json new file mode 100644 index 000000000..a637229d3 --- /dev/null +++ b/src/components/card/json/card-headline-3.json @@ -0,0 +1,4 @@ +{ + "theme": "headline", + "heading": "Business, industries and employment" +} diff --git a/src/components/card/json/card-headline-4.json b/src/components/card/json/card-headline-4.json new file mode 100644 index 000000000..0e2a47b9f --- /dev/null +++ b/src/components/card/json/card-headline-4.json @@ -0,0 +1,4 @@ +{ + "theme": "headline", + "heading": "Consessions, rebates and assistance" +} diff --git a/src/components/card/json/card-headline-5.json b/src/components/card/json/card-headline-5.json new file mode 100644 index 000000000..be8b5edee --- /dev/null +++ b/src/components/card/json/card-headline-5.json @@ -0,0 +1,4 @@ +{ + "theme": "headline", + "heading": "Driving and transport" +} diff --git a/src/components/card/json/card-headline-6.json b/src/components/card/json/card-headline-6.json new file mode 100644 index 000000000..31cdf3822 --- /dev/null +++ b/src/components/card/json/card-headline-6.json @@ -0,0 +1,4 @@ +{ + "theme": "headline", + "heading": "Housing and property" +} diff --git a/src/components/card/card-headline.json b/src/components/card/json/card-headline.json similarity index 100% rename from src/components/card/card-headline.json rename to src/components/card/json/card-headline.json diff --git a/src/components/card/json/card-media-1.json b/src/components/card/json/card-media-1.json new file mode 100644 index 000000000..48f208f0e --- /dev/null +++ b/src/components/card/json/card-media-1.json @@ -0,0 +1,5 @@ +{ + "heading": "Energy switch", + "copy": "Save money by comparing electricity and gas plans.", + "img": "https://picsum.photos/id/3/400/200" +} diff --git a/src/components/card/json/card-media-2.json b/src/components/card/json/card-media-2.json new file mode 100644 index 000000000..214a1339e --- /dev/null +++ b/src/components/card/json/card-media-2.json @@ -0,0 +1,5 @@ +{ + "heading": "Creative kids", + "copy": "$100 voucher for children's creative and cultural activities.", + "img": "https://picsum.photos/id/531/400/200" +} diff --git a/src/components/card/json/card-media-3.json b/src/components/card/json/card-media-3.json new file mode 100644 index 000000000..7c790b28e --- /dev/null +++ b/src/components/card/json/card-media-3.json @@ -0,0 +1,5 @@ +{ + "heading": "Active kids", + "copy": "$100 voucher for children's sport, fitness and recreation.", + "img": "https://picsum.photos/id/646/400/200" +} diff --git a/src/components/card/json/card-news-1.json b/src/components/card/json/card-news-1.json new file mode 100644 index 000000000..c6d35566d --- /dev/null +++ b/src/components/card/json/card-news-1.json @@ -0,0 +1,10 @@ +{ + "heading": "Nominations open for Green Globe Awards 2019", + "copy": "The annual awards will recognise individuals and organisations for their leadership , commitment and innovation in sustainability across NSW.", + "img": "https://picsum.photos/id/292/400/200", + "tag": "Community", + "date": { + "machine": "2019-03-09", + "human": "09 March 2019" + } +} diff --git a/src/components/card/json/card-news-2.json b/src/components/card/json/card-news-2.json new file mode 100644 index 000000000..5755c817e --- /dev/null +++ b/src/components/card/json/card-news-2.json @@ -0,0 +1,10 @@ +{ + "heading": "Quality green spaces and a million more trees for NSW", + "copy": "The NSW Government will create more quality green spaces and increase ther tree canopy in Sydney bt 2022.", + "img": "https://picsum.photos/id/28/400/200", + "tag": "Environment", + "date": { + "machine": "2019-03-01", + "human": "01 March 2019" + } +} diff --git a/src/components/card/json/card-news-3.json b/src/components/card/json/card-news-3.json new file mode 100644 index 000000000..6ec1cb1c2 --- /dev/null +++ b/src/components/card/json/card-news-3.json @@ -0,0 +1,10 @@ +{ + "heading": "New Premier's Priority to lift literacy and numeracy standards", + "copy": "The NSW Government will redouble its efforts to lift literacy and numeracy standards across NSW public schools to ensure students are given every opportunity to be their best.", + "img": "https://picsum.photos/id/24/400/200", + "tag": "Education", + "date": { + "machine": "2019-02-20", + "human": "20 February 2019" + } +} diff --git a/src/components/card/json/card-simple-1.json b/src/components/card/json/card-simple-1.json new file mode 100644 index 000000000..a83460397 --- /dev/null +++ b/src/components/card/json/card-simple-1.json @@ -0,0 +1,4 @@ +{ + "heading": "Energy save", + "copy": "Helps you compare electricity and gas and switch providers." +} diff --git a/src/components/card/json/card-simple-2.json b/src/components/card/json/card-simple-2.json new file mode 100644 index 000000000..90ec3a0ea --- /dev/null +++ b/src/components/card/json/card-simple-2.json @@ -0,0 +1,4 @@ +{ + "heading": "Family rebate", + "copy": "Helps families with dependants to pay their energy bills. Applications opening late July for the 2019-20 rebate." +} diff --git a/src/components/card/json/card-simple-3.json b/src/components/card/json/card-simple-3.json new file mode 100644 index 000000000..834d9ad2c --- /dev/null +++ b/src/components/card/json/card-simple-3.json @@ -0,0 +1,4 @@ +{ + "heading": "Appliance save", + "copy": "Concession card holders may be able to save on a new fridge or television." +} diff --git a/src/components/card/json/card-simple-4.json b/src/components/card/json/card-simple-4.json new file mode 100644 index 000000000..0318ba50f --- /dev/null +++ b/src/components/card/json/card-simple-4.json @@ -0,0 +1,4 @@ +{ + "heading": "Family rebate", + "copy": "Helps families with dependants to pay their energy bills. Applications opening again late July for the 2019-20 rebate." +} diff --git a/src/components/direction-links/index.hbs b/src/components/direction-links/index.hbs index cec28e692..19a0dbc66 100644 --- a/src/components/direction-links/index.hbs +++ b/src/components/direction-links/index.hbs @@ -1,4 +1,20 @@ --- title: Direction links --- -{{>_direction-links}} + +
+
+
+
+
+
+
+ {{>_direction-links}} +
+
+
+
+
+
+
+ diff --git a/src/components/direction-links/direction-links.json b/src/components/direction-links/json/direction-links.json similarity index 100% rename from src/components/direction-links/direction-links.json rename to src/components/direction-links/json/direction-links.json diff --git a/src/components/feature-tile/_feature-tile.hbs b/src/components/feature-tile/_feature-tile.hbs index 5f1dd2a56..0d5e04637 100644 --- a/src/components/feature-tile/_feature-tile.hbs +++ b/src/components/feature-tile/_feature-tile.hbs @@ -12,13 +12,13 @@ {{/each}}
-
diff --git a/src/components/feature-tile/_feature-tile.scss b/src/components/feature-tile/_feature-tile.scss index deb960805..9c40cc3ee 100644 --- a/src/components/feature-tile/_feature-tile.scss +++ b/src/components/feature-tile/_feature-tile.scss @@ -1,4 +1,5 @@ .nsw-feature-tile { + @include component-spacing(); @include nsw-spacing(padding, md none); border-top: solid 6px $nsw-primary-highlight; max-width: 500px; @@ -147,4 +148,9 @@ @include nsw-spacing(margin-top, xl); text-decoration: underline; } + + &__double-list { + column-count: 2; + column-gap: rem(16); + } } diff --git a/src/components/feature-tile/index.hbs b/src/components/feature-tile/index.hbs index 8930661f7..77371721f 100644 --- a/src/components/feature-tile/index.hbs +++ b/src/components/feature-tile/index.hbs @@ -1,58 +1,70 @@ --- title: Feature tile model: - all: feature-tile.json - cta: feature-tile-cta.json - links: feature-tile-links.json - five-links: feature-tile-five-links.json + all: json/feature-tile.json + cta: json/feature-tile-cta.json + links: json/feature-tile-links.json + five-links: json/feature-tile-five-links.json --- -
-

All tile options

-
-
-
- {{>_feature-tile model.all}} -
-
-
-

CTA and Images

-
-
-
- {{>_feature-tile model.cta}} -
- -
-
-

Single column list of links (less then 6)

-
-
-
- {{>_feature-tile model.five-links}} -
+
+
+
+
+
+
+
+

Links list (less than 6)

+ {{>_feature-tile model.five-links}} +
+
+
+
+
+
-
-
-

Two column list of links (6 or more)

-
-
-
- {{>_feature-tile model.links}} -
+
+
+
+
+
+
+

Links list (more than 6)

+ {{>_feature-tile model.links}} +
+
+
+
+
+
-
-
-

Multiple in grid

-
-
-
-
-
- {{>_feature-tile model.cta}} +
+
+
+
+
+
+

CTA and Images

+ {{>_feature-tile model.cta}} +
+
+
+
-
- {{>_feature-tile model.cta}} +
+ +
+
+
+
+
+
+

All options

+ {{>_feature-tile model.all}} +
+
+
+
-
+
diff --git a/src/components/feature-tile/feature-tile-cta.json b/src/components/feature-tile/json/feature-tile-cta.json similarity index 66% rename from src/components/feature-tile/feature-tile-cta.json rename to src/components/feature-tile/json/feature-tile-cta.json index 517a03b71..33d457cb9 100644 --- a/src/components/feature-tile/feature-tile-cta.json +++ b/src/components/feature-tile/json/feature-tile-cta.json @@ -7,15 +7,15 @@ }, "card-group": [ { - "img": "http://placehold.it/153/97", - "text": "Minimum expectations" + "img": "https://picsum.photos/id/1076/200/200", + "text": "Expectations" }, { - "img": "http://placehold.it/153/97", + "img": "https://picsum.photos/id/20/200/200", "text": "How-top guides" }, { - "img": "http://placehold.it/153/97", + "img": "https://picsum.photos/id/859/200/200", "text": "Project checklist" } ] diff --git a/src/components/feature-tile/feature-tile-five-links.json b/src/components/feature-tile/json/feature-tile-five-links.json similarity index 86% rename from src/components/feature-tile/feature-tile-five-links.json rename to src/components/feature-tile/json/feature-tile-five-links.json index ab70481ad..439f044df 100644 --- a/src/components/feature-tile/feature-tile-five-links.json +++ b/src/components/feature-tile/json/feature-tile-five-links.json @@ -23,12 +23,6 @@ "url": "#", "new": false } - , - { - "text": "Content audit", - "url": "#", - "new": false - } ] } diff --git a/src/components/feature-tile/feature-tile-links.json b/src/components/feature-tile/json/feature-tile-links.json similarity index 97% rename from src/components/feature-tile/feature-tile-links.json rename to src/components/feature-tile/json/feature-tile-links.json index 7f0efdc8a..cb2516cd5 100644 --- a/src/components/feature-tile/feature-tile-links.json +++ b/src/components/feature-tile/json/feature-tile-links.json @@ -2,6 +2,7 @@ "title": "Standards", "copy": "

The standards outline the best practice you need to consider when building a NSW Government product or service

", "icon": "arrow", + "double": true, "linklist": [ { "text": "Content basics", @@ -19,21 +20,19 @@ "new": false }, { - "text": "Content audit", + "text": "Finding a tone of voice", "url": "#", - "new": false + "new": true }, { - "text": "Content structure", + "text": "Content audit", "url": "#", "new": false }, { - "text": "Finding a tone of voice", + "text": "Content structure", "url": "#", - "new": true + "new": false } - ] - } diff --git a/src/components/feature-tile/feature-tile.json b/src/components/feature-tile/json/feature-tile.json similarity index 85% rename from src/components/feature-tile/feature-tile.json rename to src/components/feature-tile/json/feature-tile.json index 5c9094f36..1c728debc 100644 --- a/src/components/feature-tile/feature-tile.json +++ b/src/components/feature-tile/json/feature-tile.json @@ -2,21 +2,22 @@ "title": "Standards", "copy": "

The standards outline the best practice you need to consider when building a NSW Government product or service

", "icon": "arrow", + "double": true, "call-to-action": { "text": "View the pattern library", "url": "#" }, "card-group": [ { - "img": "http://placehold.it/153/97", - "text": "Minimum expectations" + "img": "https://picsum.photos/id/1076/200/200", + "text": "Expectations" }, { - "img": "http://placehold.it/153/97", + "img": "https://picsum.photos/id/20/200/200", "text": "How-top guides" }, { - "img": "http://placehold.it/153/97", + "img": "https://picsum.photos/id/859/200/200", "text": "Project checklist" } ], diff --git a/src/patterns/footer/_footer.hbs b/src/components/footer/_footer.hbs similarity index 100% rename from src/patterns/footer/_footer.hbs rename to src/components/footer/_footer.hbs diff --git a/src/patterns/footer/_footer.scss b/src/components/footer/_footer.scss similarity index 98% rename from src/patterns/footer/_footer.scss rename to src/components/footer/_footer.scss index ca0490416..3e2530907 100644 --- a/src/patterns/footer/_footer.scss +++ b/src/components/footer/_footer.scss @@ -1,6 +1,5 @@ .nsw-footer { @include font-stack; - @include nsw-spacing(margin-top, xxl); border-top: solid 1px $light40; hr { diff --git a/src/patterns/footer/index.hbs b/src/components/footer/index.hbs similarity index 63% rename from src/patterns/footer/index.hbs rename to src/components/footer/index.hbs index 1b47203b5..b5772725d 100644 --- a/src/patterns/footer/index.hbs +++ b/src/components/footer/index.hbs @@ -1,6 +1,6 @@ --- title: Footer -model: footer.json +model: json/footer.json --- {{>_footer model}} diff --git a/src/components/footer/json/footer.json b/src/components/footer/json/footer.json new file mode 100644 index 000000000..4e00ba172 --- /dev/null +++ b/src/components/footer/json/footer.json @@ -0,0 +1,188 @@ +{ + "respectText": "We pay respect to the Traditional Custodians and First Peoples of NSW, and acknowledge their continued connection to their country and culture.", + "copyright": "Copyright © 2019", + "sectionLinks": [ + { + "title": "Popular", + "url": "#", + "links": [ + { + "text": "Contact the Premier", + "url": "#" + }, + { + "text": "Contact a Minister", + "url": "#" + }, + { + "text": "About NSW", + "url": "#" + }, + { + "text": "State flag", + "url": "#" + }, + { + "text": "State Funerals", + "url": "#" + }, + { + "text": "Buy Regional", + "url": "#" + }, + { + "text": "Life events", + "url": "#" + }, + { + "text": "NSW Government directory", + "url": "#" + }, + { + "text": "Service NSW locations", + "url": "#" + } + ] + }, + { + "title": "What's happening", + "url": "#", + "links": [ + { + "text": "News", + "url": "#" + }, + { + "text": "Ministerial media releases", + "url": "#" + }, + { + "text": "Projects and initiatives", + "url": "#" + }, + { + "text": "Have your say", + "url": "#" + }, + { + "text": "NSW school and public holidays", + "url": "#" + }, + { + "text": "Find a job in NSW Government", + "url": "#" + }, + { + "text": "I work for NSW", + "url": "#" + } + ] + }, + { + "title": "Departments", + "url": "#", + "links": [ + { + "text": "Customer Service", + "url": "#" + }, + { + "text": "Communities and Justice", + "url": "#" + }, + { + "text": "Education", + "url": "#" + }, + { + "text": "Health", + "url": "#" + }, + { + "text": "Planning, Industry and Environment", + "url": "#" + }, + { + "text": "Premier and Cabinet", + "url": "#" + }, + { + "text": "Regional NSW", + "url": "#" + }, + { + "text": "Transport", + "url": "#" + }, + { + "text": "Treasury", + "url": "#" + } + ] + }, + { + "title": "NSW Government", + "url": "#", + "links": [ + { + "text": "The Premier", + "url": "#" + }, + { + "text": "NSW Ministers", + "url": "#" + }, + { + "text": "Find your local Member of Parliament", + "url": "#" + }, + { + "text": "Boards and Committees", + "url": "#" + }, + { + "text": "NSW Government communications", + "url": "#" + }, + { + "text": "Unsolicited proposals", + "url": "#" + }, + { + "text": "Premier's Priorities", + "url": "#" + } + ] + } + ], + "footerLinks": [ + { + "text": "Accessibility", + "url": "#" + }, + { + "text": "Copyright", + "url": "#" + }, + { + "text": "Disclaimer", + "url": "#" + }, + { + "text": "Privacy", + "url": "#" + }, + { + "text": "Content sources", + "url": "#" + }, + { + "text": "RSS", + "url": "#" + }, + { + "text": "Contact us", + "url": "#" + } + ] +} diff --git a/src/styles/forms/_checkbox.hbs b/src/components/forms/_checkbox.hbs similarity index 100% rename from src/styles/forms/_checkbox.hbs rename to src/components/forms/_checkbox.hbs diff --git a/src/styles/forms/_forms.scss b/src/components/forms/_forms.scss similarity index 100% rename from src/styles/forms/_forms.scss rename to src/components/forms/_forms.scss diff --git a/src/styles/forms/_radio.hbs b/src/components/forms/_radio.hbs similarity index 100% rename from src/styles/forms/_radio.hbs rename to src/components/forms/_radio.hbs diff --git a/src/styles/forms/_select.hbs b/src/components/forms/_select.hbs similarity index 100% rename from src/styles/forms/_select.hbs rename to src/components/forms/_select.hbs diff --git a/src/styles/forms/_text-input.hbs b/src/components/forms/_text-input.hbs similarity index 100% rename from src/styles/forms/_text-input.hbs rename to src/components/forms/_text-input.hbs diff --git a/src/styles/forms/_textarea.hbs b/src/components/forms/_textarea.hbs similarity index 100% rename from src/styles/forms/_textarea.hbs rename to src/components/forms/_textarea.hbs diff --git a/src/components/forms/index.hbs b/src/components/forms/index.hbs new file mode 100644 index 000000000..39ed142ac --- /dev/null +++ b/src/components/forms/index.hbs @@ -0,0 +1,227 @@ +--- +title: Forms +--- + +
+
+
+
+
+
+
+
+

Forms

+

Default Fields

+
+
+
+ {{>_text-input + id="txt1" + label="Single-line text input:" + }} + + {{>_textarea + id="txta1" + label="Multi-line text input:" + }} + + {{>_select + id="select1" + label="Select dropdown:" + }} + +
+ {{>_checkbox + id="check1" + name="single-checkbox" + label="Single checkbox:" + }} +
+
+ +
+
+ + Multiple Radio + +
+ {{>_radio + id="radio1" + name="defaultradio" + label="Radio Option 1" + }} + {{>_radio + id="radio2" + name="defaultradio" + label="Radio Option 2" + }} +
+
+
+ +
+
+ + Multiple Checkbox + +
+ {{>_checkbox + id="checkbox1a" + name="defaultcheck" + label="Checkbox Option 1" + }} + {{>_checkbox + id="checkbox2a" + name="defaultcheck" + label="Checkbox Option 2" + }} +
+
+
+
+ +

Fields with Helper text

+
+
+
+ {{>_text-input + id="txt2help" + label="Single-line text input field:" + helper-text="This is helper text" + }} + + {{>_textarea + id="txta1help" + label="Multi-line text input:" + helper-text="This is helper text" + }} + + {{>_select + id="select1help" + label="Select dropdown:" + helper-text="This is helper text" + }} +
+
+
+ + Multiple Radio + This is helper text + +
+ {{>_radio + id="radio1helper" + name="radiohelper" + label="Radio Option 1" + }} + {{>_radio + id="radio2helper" + name="radiohelper" + label="Radio Option 2" + }} +
+
+
+
+
+ + Multiple Checkbox + This is helper text + +
+ {{>_checkbox + id="checkbox1helper" + name="checkhelper" + label="Checkbox Option 1" + }} + {{>_checkbox + id="checkbox2helper" + name="checkhelper" + label="Checkbox Option 2" + }} +
+
+
+
+ +

Fields with Errors

+
+
+
+ {{>_text-input + id="txt3error" + label="Single-line text input field:" + error-text="There was an error with the input above" + }} + + {{>_textarea + id="txta1error" + label="Multi-line text input:" + error-text="There was an error with the input above" + }} + + {{>_select + id="select1error" + label="Select dropdown:" + error-text="There was an error with the input above" + }} + +
+ {{>_checkbox + id="check1error" + name="single-checkbox-error" + label="Single checkbox:" + error-text="There was an error with the input above" + }} +
+
+
+
+ + Multiple Radio + Please select at least one option + +
+ {{>_radio + id="radio1error" + name="radiocheck" + label="Radio Option 1" + }} + {{>_radio + id="radio2error" + name="radiocheck" + label="Radio Option 2" + }} +
+
+
+ +
+
+ + Multiple Checkbox + Please select at least one option + +
+ {{>_checkbox + id="checkbox1error" + name="errorcheck" + label="Checkbox Option 1" + }} + {{>_checkbox + id="checkbox2error" + name="errorcheck" + label="Checkbox Option 2" + }} +
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/forms/forms.json b/src/components/forms/json/forms.json similarity index 100% rename from src/styles/forms/forms.json rename to src/components/forms/json/forms.json diff --git a/src/components/header/_header-digital.hbs b/src/components/header/_header-digital.hbs new file mode 100644 index 000000000..bc9db2b0b --- /dev/null +++ b/src/components/header/_header-digital.hbs @@ -0,0 +1,16 @@ +
+
+

A NSW Government website

+
+
+
+
+
+
+ + + digital.nsw + +
+
+
diff --git a/src/patterns/header/_header.hbs b/src/components/header/_header.hbs similarity index 100% rename from src/patterns/header/_header.hbs rename to src/components/header/_header.hbs diff --git a/src/patterns/header/_header.scss b/src/components/header/_header.scss similarity index 97% rename from src/patterns/header/_header.scss rename to src/components/header/_header.scss index 76412fa92..e6dc7c239 100644 --- a/src/patterns/header/_header.scss +++ b/src/components/header/_header.scss @@ -57,6 +57,12 @@ border-bottom: 0; } + &--simple { + @include breakpoint('lg') { + border-bottom: solid 1px $light40; + } + } + &__container { @include container; position: relative; diff --git a/src/patterns/header/header.js b/src/components/header/header.js similarity index 100% rename from src/patterns/header/header.js rename to src/components/header/header.js diff --git a/src/components/header/index.hbs b/src/components/header/index.hbs new file mode 100644 index 000000000..24aff2f95 --- /dev/null +++ b/src/components/header/index.hbs @@ -0,0 +1,5 @@ +--- +title: Header +--- + +{{>_header content="#" nav="#"}} diff --git a/src/components/pagination/pagination.json b/src/components/header/json/header.json similarity index 100% rename from src/components/pagination/pagination.json rename to src/components/header/json/header.json diff --git a/src/components/hero-banner/_hero-banner.hbs b/src/components/hero-banner/_hero-banner.hbs index 08215cd23..57d64f987 100644 --- a/src/components/hero-banner/_hero-banner.hbs +++ b/src/components/hero-banner/_hero-banner.hbs @@ -1,7 +1,7 @@
- +
diff --git a/src/components/hero-banner/_hero-banner.scss b/src/components/hero-banner/_hero-banner.scss index 1ce7d9532..7293adc10 100644 --- a/src/components/hero-banner/_hero-banner.scss +++ b/src/components/hero-banner/_hero-banner.scss @@ -55,7 +55,6 @@ background-color: map-get($overlays, light); transform: translateY(-50%); max-width: rem(600px); - left: rem(-16px); } p { diff --git a/src/components/hero-banner/hero-banner.json b/src/components/hero-banner/hero-banner.json deleted file mode 100644 index 6dcd3477e..000000000 --- a/src/components/hero-banner/hero-banner.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "theme": "", - "heading": "Buy Regional this Christmas", - "copy": "NSW is facing one of the worst droughts on record. One of the best ways you can support regional communities in NSW is to Buy Regional this Christmas.", - "img": { - "original": "https://picsum.photos/id/421/2000/1250", - "small": "https://picsum.photos/id/421/768/480", - "medium": "https://picsum.photos/id/421/300/200", - "large": "https://picsum.photos/id/421/2000/1250" - } -} diff --git a/src/components/hero-banner/index.hbs b/src/components/hero-banner/index.hbs index 65fa52b73..eb83bd177 100644 --- a/src/components/hero-banner/index.hbs +++ b/src/components/hero-banner/index.hbs @@ -1,5 +1,5 @@ --- title: Hero banner -model: hero-banner.json +model: json/hero-banner.json --- {{>_hero-banner model}} diff --git a/src/components/hero-banner/json/hero-banner.json b/src/components/hero-banner/json/hero-banner.json new file mode 100644 index 000000000..2d7c706ec --- /dev/null +++ b/src/components/hero-banner/json/hero-banner.json @@ -0,0 +1,6 @@ +{ + "theme": "", + "heading": "Buy Regional this Christmas", + "copy": "NSW is facing one of the worst droughts on record. Buy Regional and support communities in need this Christmas.", + "img": "https://picsum.photos/id/695/2000/1250" +} diff --git a/src/components/hero-search/index.hbs b/src/components/hero-search/index.hbs index e2dd51b1f..f476240f7 100644 --- a/src/components/hero-search/index.hbs +++ b/src/components/hero-search/index.hbs @@ -1,5 +1,8 @@ --- title: Hero search -model: hero-search.json +model: json/hero-search.json --- -{{>_hero-search model}} + +
+ {{>_hero-search model}} +
diff --git a/src/components/hero-search/hero-search.json b/src/components/hero-search/json/hero-search.json similarity index 100% rename from src/components/hero-search/hero-search.json rename to src/components/hero-search/json/hero-search.json diff --git a/src/components/in-page-navigation/_in-page-navigation.hbs b/src/components/in-page-navigation/_in-page-navigation.hbs index 115e1af9c..ba8fea02a 100644 --- a/src/components/in-page-navigation/_in-page-navigation.hbs +++ b/src/components/in-page-navigation/_in-page-navigation.hbs @@ -3,7 +3,7 @@ diff --git a/src/components/in-page-navigation/_in-page-navigation.scss b/src/components/in-page-navigation/_in-page-navigation.scss index 591e20636..3d65d2fae 100644 --- a/src/components/in-page-navigation/_in-page-navigation.scss +++ b/src/components/in-page-navigation/_in-page-navigation.scss @@ -1,4 +1,5 @@ .nsw-page-nav { + @include component-spacing(); @include nsw-spacing(padding, md); border-left: solid 4px $nsw-primary-highlight; @@ -22,5 +23,4 @@ &__link { @include text-link; } - } diff --git a/src/components/in-page-navigation/in-page-navigation.json b/src/components/in-page-navigation/in-page-navigation.json deleted file mode 100644 index c009cb605..000000000 --- a/src/components/in-page-navigation/in-page-navigation.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "title": "On this page", - "pageSections": [ - { - "text": "Section 1", - "anchor": "#id1" - }, - { - "text": "Section 2", - "anchor": "#id2" - }, - { - "text": "Section 3", - "anchor": "#id3" - }, - { - "text": "Section 4", - "anchor": "#id4" - } - ] -} diff --git a/src/components/in-page-navigation/index.hbs b/src/components/in-page-navigation/index.hbs index acd77dcac..c3435668d 100644 --- a/src/components/in-page-navigation/index.hbs +++ b/src/components/in-page-navigation/index.hbs @@ -1,7 +1,20 @@ --- title: In-page navigation -model: in-page-navigation.json +model: json/in-page-navigation.json --- -
- {{>_in-page-navigation model}} -
+ +
+
+
+
+
+
+
+ {{>_in-page-navigation model}} +
+
+
+
+
+
+
diff --git a/src/components/in-page-navigation/json/in-page-navigation-2.json b/src/components/in-page-navigation/json/in-page-navigation-2.json new file mode 100644 index 000000000..9b24c92e2 --- /dev/null +++ b/src/components/in-page-navigation/json/in-page-navigation-2.json @@ -0,0 +1,17 @@ +{ + "title": "On this page", + "pageSections": [ + { + "text": "Ways of working", + "anchor": "#ways-of-working" + }, + { + "text": "Core skills", + "anchor": "#core-skills" + }, + { + "text": "Content design for transactions", + "anchor": "#content-design-for-transactions" + } + ] +} diff --git a/src/components/in-page-navigation/json/in-page-navigation.json b/src/components/in-page-navigation/json/in-page-navigation.json new file mode 100644 index 000000000..7ec85465e --- /dev/null +++ b/src/components/in-page-navigation/json/in-page-navigation.json @@ -0,0 +1,21 @@ +{ + "title": "On this page", + "pageSections": [ + { + "text": "First home buyer grant and assistance", + "anchor": "#" + }, + { + "text": "Buying and selling property", + "anchor": "#" + }, + { + "text": "Building or renovating a home", + "anchor": "#" + }, + { + "text": "Aged care housing, home living assistance and retirement villages", + "anchor": "#" + } + ] +} diff --git a/src/components/link-list/_link-list.hbs b/src/components/link-list/_link-list.hbs index c24a42774..a28b67da1 100644 --- a/src/components/link-list/_link-list.hbs +++ b/src/components/link-list/_link-list.hbs @@ -1,15 +1,16 @@ -
-
- -
-
+
+ {{#if title}} +
{{title}}
+ {{/if}} + +
\ No newline at end of file diff --git a/src/components/link-list/_link-list.scss b/src/components/link-list/_link-list.scss index abbf085e4..0a3fc4005 100644 --- a/src/components/link-list/_link-list.scss +++ b/src/components/link-list/_link-list.scss @@ -1,6 +1,15 @@ .nsw-link-list { @include font-stack('heading'); - @include nsw-spacing(margin-top, md); + @include component-spacing(); + + &__title { + @include font-size('lg'); + @include nsw-spacing(padding-bottom, md); + + @include breakpoint('md') { + @include nsw-spacing(padding-bottom, lg); + } + } &__list { margin: 0; diff --git a/src/components/link-list/index.hbs b/src/components/link-list/index.hbs index 2543d0495..5dcadafb5 100644 --- a/src/components/link-list/index.hbs +++ b/src/components/link-list/index.hbs @@ -1,6 +1,20 @@ --- title: Link list -model: link-list.json +model: json/link-list.json --- -{{>_link-list model}} +
+
+
+
+
+
+
+ {{>_link-list model}} +
+
+
+
+
+
+
diff --git a/src/components/link-list/json/link-list-2.json b/src/components/link-list/json/link-list-2.json new file mode 100644 index 000000000..51f0759ec --- /dev/null +++ b/src/components/link-list/json/link-list-2.json @@ -0,0 +1,17 @@ +{ + "title": "Related guides", + "linkList": [ + { + "text": "User-focused content design process", + "url": "#" + }, + { + "text": "Digital collaboration tools", + "url": "#" + }, + { + "text": "Testing and improving guides", + "url": "#" + } + ] +} diff --git a/src/components/link-list/json/link-list-3.json b/src/components/link-list/json/link-list-3.json new file mode 100644 index 000000000..7e1f5562a --- /dev/null +++ b/src/components/link-list/json/link-list-3.json @@ -0,0 +1,17 @@ +{ + "title": "Related guides", + "linkList": [ + { + "text": "Building a service guide", + "url": "#" + }, + { + "text": "Digital collaboration tools", + "url": "#" + }, + { + "text": "User experience design methods", + "url": "#" + } + ] +} diff --git a/src/components/link-list/json/link-list.json b/src/components/link-list/json/link-list.json new file mode 100644 index 000000000..da8504abc --- /dev/null +++ b/src/components/link-list/json/link-list.json @@ -0,0 +1,20 @@ +{ + "linkList": [ + { + "text": "First home buyer grant and assistance", + "url": "#" + }, + { + "text": "Buying and selling property", + "url": "#" + }, + { + "text": "Building or renovating a home", + "url": "#" + }, + { + "text": "Aged care housing, home living assistance and retirement villages", + "url": "#" + } + ] +} diff --git a/src/components/link-list/link-list.json b/src/components/link-list/link-list.json deleted file mode 100644 index d139d90fb..000000000 --- a/src/components/link-list/link-list.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "label": "Link-list", - "linkList": [ - { - "text": "Link one", - "url": "#" - }, - { - "text": "Link two", - "url": "#" - }, - { - "text": "Link three", - "url": "#" - }, - { - "text": "Last link which supposed to be very long", - "url": "#" - } - ] -} \ No newline at end of file diff --git a/src/components/main-navigation/_main-navigation.scss b/src/components/main-navigation/_main-navigation.scss index c841d820f..926256b59 100644 --- a/src/components/main-navigation/_main-navigation.scss +++ b/src/components/main-navigation/_main-navigation.scss @@ -26,7 +26,7 @@ transform: translateX(-100%); } - @include breakpoint('lg') { + @include breakpoint($desktop-breakpoint) { position: relative; transform: none; background-color: $light10; @@ -64,7 +64,7 @@ width: rem(20px); } - @include breakpoint('lg') { + @include breakpoint($desktop-breakpoint) { display: none; } } @@ -95,7 +95,7 @@ height: rem(16px); } - @include breakpoint('lg') { + @include breakpoint($desktop-breakpoint) { display: none; } } @@ -109,7 +109,7 @@ margin-top: 0; margin-bottom: 0; - @include breakpoint('lg') { + @include breakpoint($desktop-breakpoint) { @include container(0); display: flex; flex-direction: row; @@ -120,7 +120,7 @@ } .nsw-subnavigation__list { - @include breakpoint('lg') { + @include breakpoint($desktop-breakpoint) { @include nsw-spacing(margin-top, xl); display: flex; } @@ -135,7 +135,7 @@ align-items: stretch; flex-wrap: nowrap; - @include breakpoint('lg') { + @include breakpoint($desktop-breakpoint) { border-bottom: 0; } } @@ -144,7 +144,7 @@ .nsw-subnavigation__list-item { @include font-stack; - @include breakpoint('lg') { + @include breakpoint($desktop-breakpoint) { @include font-stack('heading'); border-bottom: 0; } @@ -152,7 +152,7 @@ .nsw-subnavigation__list-item { - @include breakpoint('lg') { + @include breakpoint($desktop-breakpoint) { width: 32%; border-top: solid 1px $light20; @@ -179,7 +179,7 @@ align-items: stretch; flex-wrap: nowrap; - @include breakpoint('lg') { + @include breakpoint($desktop-breakpoint) { @include z-index('middle'); position: relative; } @@ -198,7 +198,7 @@ } .nsw-subnavigation__link { - @include breakpoint('lg') { + @include breakpoint($desktop-breakpoint) { color: $nsw-primary-blue; } } @@ -209,7 +209,7 @@ height: rem(16px); width: rem(16px); - @include breakpoint('lg') { + @include breakpoint($desktop-breakpoint) { display: block; height: rem(12px); width: rem(12px); @@ -240,7 +240,7 @@ visibility: visible; } - @include breakpoint('lg') { + @include breakpoint($desktop-breakpoint) { @include container; padding: rem(48) rem(40); top: 100%; @@ -257,7 +257,7 @@ } } - @include breakpoint('lg') { + @include breakpoint($desktop-breakpoint) { @include nsw-spacing(padding-top, xxl); @include nsw-spacing(padding-bottom, xxl); } @@ -281,7 +281,7 @@ align-self: center; } - @include breakpoint('lg') { + @include breakpoint($desktop-breakpoint) { display: none; } } @@ -314,7 +314,7 @@ align-self: center; } - @include breakpoint('lg') { + @include breakpoint($desktop-breakpoint) { display: none; } } @@ -324,7 +324,7 @@ @include font-size('md'); @include nsw-spacing(margin, none); - @include breakpoint('lg') { + @include breakpoint($desktop-breakpoint) { @include font-size('lg'); display: inline-block; } @@ -335,14 +335,14 @@ top: rem(3); display: none; - @include breakpoint('lg') { + @include breakpoint($desktop-breakpoint) { display: inline; } } } .nsw-subnavigation__title-link { - @include breakpoint('lg') { + @include breakpoint($desktop-breakpoint) { @include nsw-spacing(padding, none); color: $nsw-primary-blue; } @@ -354,7 +354,7 @@ @include font-size('xs'); display: none; - @include breakpoint('lg') { + @include breakpoint($desktop-breakpoint) { display: block; } } @@ -362,7 +362,7 @@ .nsw-subnavigation .nsw-subnavigation, .nsw-subnavigation .nsw-navigation__link-icon { - @include breakpoint('lg') { + @include breakpoint($desktop-breakpoint) { display: none; } diff --git a/src/components/main-navigation/index.hbs b/src/components/main-navigation/index.hbs index 7ca6974be..266fb1ba6 100644 --- a/src/components/main-navigation/index.hbs +++ b/src/components/main-navigation/index.hbs @@ -1,8 +1,8 @@ --- title: Main navigation model: - basic: main-navigation.json - mega: mega-navigation.json + basic: json/main-navigation.json + mega: json/mega-navigation.json --- {{>_header}} {{>_main-navigation model.mega}} diff --git a/src/components/main-navigation/main-navigation.json b/src/components/main-navigation/json/main-navigation.json similarity index 100% rename from src/components/main-navigation/main-navigation.json rename to src/components/main-navigation/json/main-navigation.json diff --git a/src/components/main-navigation/mega-navigation.json b/src/components/main-navigation/json/mega-navigation.json similarity index 100% rename from src/components/main-navigation/mega-navigation.json rename to src/components/main-navigation/json/mega-navigation.json diff --git a/src/components/notification/_notification.scss b/src/components/notification/_notification.scss index 124b96051..a83a5ec9e 100644 --- a/src/components/notification/_notification.scss +++ b/src/components/notification/_notification.scss @@ -1,4 +1,5 @@ .nsw-notification { + @include component-spacing(); @include nsw-spacing(padding, md); background: transparent; position: relative; diff --git a/src/components/notification/index.hbs b/src/components/notification/index.hbs index 88ea72757..b302ff619 100644 --- a/src/components/notification/index.hbs +++ b/src/components/notification/index.hbs @@ -1,21 +1,41 @@ --- title: In-page notification model: - info: notification-info.json - error: notification-error.json - warning: notification-warning.json - success: notification-success.json + info: json/notification-info.json + error: json/notification-error.json + warning: json/notification-warning.json + success: json/notification-success.json --- -
- {{>_notification model.info}} -
-
- {{>_notification model.error}} -
-
- {{>_notification model.warning}} -
-
- {{>_notification model.success}} -
+
+
+
+
+
+
+
+
+ {{>_notification model.info}} +
+
+
+
+ {{>_notification model.error}} +
+
+
+
+ {{>_notification model.warning}} +
+
+
+
+ {{>_notification model.success}} +
+
+
+
+
+
+
+
diff --git a/src/components/notification/json/notification-error.json b/src/components/notification/json/notification-error.json new file mode 100644 index 000000000..65cbadefd --- /dev/null +++ b/src/components/notification/json/notification-error.json @@ -0,0 +1,7 @@ +{ + "type": "error", + "heading": "It looks like there was a problem", + "icon": "status-error", + "copy": "Please contact your service desk for further assistance.", + "isAlert": false +} diff --git a/src/components/notification/notification-info.json b/src/components/notification/json/notification-info.json similarity index 100% rename from src/components/notification/notification-info.json rename to src/components/notification/json/notification-info.json diff --git a/src/components/notification/json/notification-success.json b/src/components/notification/json/notification-success.json new file mode 100644 index 000000000..4e892d379 --- /dev/null +++ b/src/components/notification/json/notification-success.json @@ -0,0 +1,7 @@ +{ + "type": "success", + "heading": "Your application has been received", + "icon": "status-success", + "copy": "Thank you for submitting your interest. We will be in contact within 5 business days.", + "isAlert": false +} diff --git a/src/components/notification/json/notification-warning.json b/src/components/notification/json/notification-warning.json new file mode 100644 index 000000000..4bd7853d7 --- /dev/null +++ b/src/components/notification/json/notification-warning.json @@ -0,0 +1,7 @@ +{ + "type": "warning", + "heading": "Password expiring soon", + "icon": "status-warning", + "copy": "Your password is expiring in 4 days. Please change your password.", + "isAlert": false +} diff --git a/src/components/notification/notification-error.json b/src/components/notification/notification-error.json deleted file mode 100644 index 38bf888b9..000000000 --- a/src/components/notification/notification-error.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "error", - "heading": "Rockdale Service Centre is coming soon", - "icon": "status-error", - "copy": "Rockdale Agency will close on 9 March 2018 and re-open in April. Please visit Kogarah Service Centre during this closure.", - "isAlert": false -} diff --git a/src/components/notification/notification-success.json b/src/components/notification/notification-success.json deleted file mode 100644 index 31f310801..000000000 --- a/src/components/notification/notification-success.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "success", - "heading": "Rockdale Service Centre is coming soon", - "icon": "status-success", - "copy": "Rockdale Agency will close on 9 March 2018 and re-open in April. Please visit Kogarah Service Centre during this closure.", - "isAlert": false -} diff --git a/src/components/notification/notification-warning.json b/src/components/notification/notification-warning.json deleted file mode 100644 index 343faa1c7..000000000 --- a/src/components/notification/notification-warning.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "warning", - "heading": "Rockdale Service Centre is coming soon", - "icon": "status-warning", - "copy": "Rockdale Agency will close on 9 March 2018 and re-open in April. Please visit Kogarah Service Centre during this closure.", - "isAlert": false -} diff --git a/src/components/pagination/_pagination.scss b/src/components/pagination/_pagination.scss index d30c9960c..4a936fae5 100644 --- a/src/components/pagination/_pagination.scss +++ b/src/components/pagination/_pagination.scss @@ -1,6 +1,6 @@ .nsw-pagination { @include font-stack('heading'); - @include nsw-spacing(margin, sm none none none); + @include component-spacing(); @include nsw-spacing(padding-left, none); display: flex; align-items: flex-start; diff --git a/src/components/pagination/index.hbs b/src/components/pagination/index.hbs index f96212cf2..0fc04c508 100644 --- a/src/components/pagination/index.hbs +++ b/src/components/pagination/index.hbs @@ -1,6 +1,19 @@ --- title: Pagination --- -
- {{>_pagination}} -
+ +
+
+
+
+
+
+
+ {{>_pagination}} +
+
+
+
+
+
+
diff --git a/src/components/tags/tags.json b/src/components/pagination/json/pagination.json similarity index 100% rename from src/components/tags/tags.json rename to src/components/pagination/json/pagination.json diff --git a/src/components/side-navigation/index.hbs b/src/components/side-navigation/index.hbs index 6df7729c0..ea322eff3 100644 --- a/src/components/side-navigation/index.hbs +++ b/src/components/side-navigation/index.hbs @@ -1,22 +1,36 @@ --- title: Side navigation model: - singlelevel: side-navigation.json - secondlevel: side-navigation-level2.json - fourthlevel: side-navigation-level4.json + single-level: json/side-navigation.json + two-level: json/side-navigation-level-2.json + four-level: json/side-navigation-level-4.json --- -
-

Level 2 no child pages

- {{>_side-navigation model.singlelevel}} -
- -
-

Level 2 with child pages

- {{>_side-navigation model.secondlevel}} -
- -
-

Level 4 with child pages

- {{>_side-navigation model.fourthlevel}} +
+
+
+
+
+
+

Single level

+
+ {{>_side-navigation model.single-level}} +
+
+
+

Two levels

+
+ {{>_side-navigation model.two-level}} +
+
+
+

Four levels

+
+ {{>_side-navigation model.four-level}} +
+
+
+
+
+
diff --git a/src/components/side-navigation/side-navigation-level2.json b/src/components/side-navigation/json/side-navigation-level-2.json similarity index 55% rename from src/components/side-navigation/side-navigation-level2.json rename to src/components/side-navigation/json/side-navigation-level-2.json index 54cd8079f..0876e4a78 100644 --- a/src/components/side-navigation/side-navigation-level2.json +++ b/src/components/side-navigation/json/side-navigation-level-2.json @@ -1,49 +1,54 @@ { "parent-text": "About DPC", "parent-url": "#", - "parentID": "sksm7kis26ns", + "parentID": "sksm7sss26ns", "navitems": [ { - "text": "Level 2", + "text": "About the Department", "url": "#", "currentPage": false }, { - "text": "Level 2", + "text": "Careers", "url": "#", "currentPage": false }, { - "text": "Level 2", + "text": "Accessing DPC information", "url": "#", - "currentPage": true, + "currentPage": false + }, + { + "text": "Premier and Cabinet cluster", + "url": "#", + "currentPage": false + }, + { + "text": "NSW Digital Design System", + "url": "#", + "currentPage": false, "navitems": [ { - "text": "Level 3", + "text": "Building a service", "url": "#", "currentPage": false }, { - "text": "Level 3", + "text": "Content design", + "url": "#", + "currentPage": true + }, + { + "text": "Using artefacts", "url": "#", "currentPage": false }, { - "text": "Level 3", + "text": "Experimenting", "url": "#", "currentPage": false } ] - }, - { - "text": "Level 2", - "url": "#", - "currentPage": false - }, - { - "text": "Level 2", - "url": "#", - "currentPage": false } ] } diff --git a/src/components/side-navigation/side-navigation-level4.json b/src/components/side-navigation/json/side-navigation-level-4.json similarity index 60% rename from src/components/side-navigation/side-navigation-level4.json rename to src/components/side-navigation/json/side-navigation-level-4.json index bcd8d7302..a9eb4bf3a 100644 --- a/src/components/side-navigation/side-navigation-level4.json +++ b/src/components/side-navigation/json/side-navigation-level-4.json @@ -1,60 +1,65 @@ { - "parent-text": "About DPC", + "parent-text": "Service Design", "parent-url": "#", - "parentID": "sksm7sss26ns", + "parentID": "sksm7sss27ns", "navitems": [ { - "text": "Level 2", + "text": "What is Service Design", "url": "#", "currentPage": false }, { - "text": "Level 2", + "text": "Service Design methodologies", "url": "#", "currentPage": false }, { - "text": "Level 2", + "text": "Agile Ways of working", "url": "#", "currentPage": false, "navitems": [ { - "text": "Level 3", + "text": "Pre-discovery", "url": "#", "currentPage": false }, { - "text": "Level 3", + "text": "Discovery", + "url": "#", + "currentPage": false + }, + { + "text": "Alpha", "url": "#", "currentPage": false, "navitems": [ { - "text": "Level 4", + "text": "What is Alpha?", "url": "#", "currentPage": false }, { - "text": "Level 4", + "text": "Turning Research into design", "url": "#", "currentPage": false }, { - "text": "Level 4", + "text": "Prototyping", "url": "#", "currentPage": true, "navitems": [ { - "text": "Level 5", + "text": "Low fidelity", "url": "#", "currentPage": false }, { - "text": "Level 5", + "text": "High Fidelity", "url": "#", "currentPage": false }, { - "text": "Level 5", + "text": "Prototyping tools", "url": "#", "currentPage": false } @@ -63,19 +68,24 @@ ] }, { - "text": "Level 3", + "text": "Beta", + "url": "#", + "currentPage": false + }, + { + "text": "Live", "url": "#", "currentPage": false } ] }, { - "text": "Level 2", + "text": "Team roles", "url": "#", "currentPage": false }, { - "text": "Level 2", + "text": "Resources", "url": "#", "currentPage": false } diff --git a/src/components/side-navigation/json/side-navigation.json b/src/components/side-navigation/json/side-navigation.json new file mode 100644 index 000000000..8cab0117e --- /dev/null +++ b/src/components/side-navigation/json/side-navigation.json @@ -0,0 +1,32 @@ +{ + "parent-text": "Agile Methodology", + "parent-url": "#", + "parentID": "sksm726ns", + "navitems": [ + { + "text": "Pre-discovery", + "url": "#", + "currentPage": false + }, + { + "text": "Discovery", + "url": "#", + "currentPage": false + }, + { + "text": "Alpha", + "url": "#", + "currentPage": true + }, + { + "text": "Beta", + "url": "#", + "currentPage": false + }, + { + "text": "Live", + "url": "#", + "currentPage": false + } + ] +} diff --git a/src/components/side-navigation/side-navigation.json b/src/components/side-navigation/side-navigation.json deleted file mode 100644 index 4253c29d8..000000000 --- a/src/components/side-navigation/side-navigation.json +++ /dev/null @@ -1,52 +0,0 @@ -{ - "parent-text": "About DPC", - "parent-url": "#", - "parentID": "sksm726ns", - "navitems": [ - { - "text": "Level 2", - "url": "#", - "currentPage": false - }, - { - "text": "Level 2", - "url": "#", - "currentPage": false - }, - { - "text": "Level 2", - "url": "#", - "currentPage": true - }, - { - "text": "Level 2", - "url": "#", - "currentPage": false - }, - { - "text": "Level 2", - "url": "#", - "currentPage": false - }, - { - "text": "Level 2", - "url": "#", - "currentPage": false - }, - { - "text": "Level 2", - "url": "#", - "currentPage": false - }, - { - "text": "Level 2", - "url": "#", - "currentPage": false - }, - { - "text": "Level 2", - "url": "#", - "currentPage": false - } - ] -} diff --git a/src/components/site-wide-message/index.hbs b/src/components/site-wide-message/index.hbs index a60e985c7..bd43191b7 100644 --- a/src/components/site-wide-message/index.hbs +++ b/src/components/site-wide-message/index.hbs @@ -1,6 +1,6 @@ --- title: Global alert -model: site-wide-message.json +model: json/site-wide-message.json --- {{>_site-wide-message model}} diff --git a/src/components/site-wide-message/site-wide-message.json b/src/components/site-wide-message/json/site-wide-message.json similarity index 54% rename from src/components/site-wide-message/site-wide-message.json rename to src/components/site-wide-message/json/site-wide-message.json index 003c40455..08d41c3a9 100644 --- a/src/components/site-wide-message/site-wide-message.json +++ b/src/components/site-wide-message/json/site-wide-message.json @@ -1,6 +1,6 @@ { "title": "State of Emergency for NSW", - "content": "

Catastrophic weather conditions are forecast this week for NSW. Keep up to date with the latest bush fires alerts and warnings in your area.

", + "content": "

Catastrophic weather conditions are forecast this week for north and north west regions of NSW. Keep up to date with the latest bush fires alerts and warnings in your area.

", "ctaText": "More information", "ctaHref": "#" } diff --git a/src/components/social-bar/index.hbs b/src/components/social-bar/index.hbs index 8dbb53f5e..bd576f57e 100644 --- a/src/components/social-bar/index.hbs +++ b/src/components/social-bar/index.hbs @@ -1,7 +1,20 @@ --- title: Social bar -model: social-bar.json +model: json/social-bar.json --- -
- {{>_social-bar model}} -
+ +
+
+
+
+
+
+
+ {{>_social-bar model}} +
+
+
+
+
+
+
diff --git a/src/components/social-bar/social-bar.json b/src/components/social-bar/json/social-bar.json similarity index 100% rename from src/components/social-bar/social-bar.json rename to src/components/social-bar/json/social-bar.json diff --git a/src/components/tab-navigation/_tab-navigation.scss b/src/components/tab-navigation/_tab-navigation.scss index 8aabab0eb..09e7aa328 100644 --- a/src/components/tab-navigation/_tab-navigation.scss +++ b/src/components/tab-navigation/_tab-navigation.scss @@ -1,5 +1,5 @@ .nsw-tabs { - @include nsw-spacing(margin-top, md); + @include component-spacing(); &__list { margin: 0; diff --git a/src/components/tab-navigation/index.hbs b/src/components/tab-navigation/index.hbs index adeefd077..ea3819479 100644 --- a/src/components/tab-navigation/index.hbs +++ b/src/components/tab-navigation/index.hbs @@ -1,7 +1,20 @@ --- title: Tabs -model: tab-navigation.json +model: json/tab-navigation.json --- -
- {{>_tab-navigation model}} -
+ +
+
+
+
+
+
+
+ {{>_tab-navigation model}} +
+
+
+
+
+
+
diff --git a/src/components/tab-navigation/json/tab-navigation-2.json b/src/components/tab-navigation/json/tab-navigation-2.json new file mode 100644 index 000000000..432989ba7 --- /dev/null +++ b/src/components/tab-navigation/json/tab-navigation-2.json @@ -0,0 +1,19 @@ +{ + "tabitems": [ + { + "title": "Explain transaction", + "urlHash": "section1", + "content": "

Explain transaction

The landing page explains the entire transaction to a user. It serves as the front door.

By having a clear guide at the start, users know where they can return to for more information, or to start again.

" + }, + { + "title": "Map transaction", + "urlHash": "section2", + "content": "

Map transaction

The start of the transaction gives the user a map – the steps to take, and what to expect afterwards. The purpose of the landing page is to give the user context. It will display on the agency site that leads to the transaction.

The user arrives at this page when they’re looking to do a transaction. They’re likely to arrive via a Google search or email link. A user should be able to find what they need to know about the transaction, and how to complete it.

" + }, + { + "title": "Signpost steps", + "urlHash": "section3", + "content": "

Signpost steps

The purpose of signposting the steps is to reduce the user’s chance of error. This helps the user move through the transaction with ease. The user can scan what they need to do so they can complete their task.

" + } + ] +} diff --git a/src/components/tab-navigation/tab-navigation.json b/src/components/tab-navigation/json/tab-navigation.json similarity index 100% rename from src/components/tab-navigation/tab-navigation.json rename to src/components/tab-navigation/json/tab-navigation.json diff --git a/src/components/tables/_tables.hbs b/src/components/tables/_tables.hbs new file mode 100644 index 000000000..65b0f63ef --- /dev/null +++ b/src/components/tables/_tables.hbs @@ -0,0 +1,58 @@ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{caption}}
MethodDescriptionPurpose
+

Annotated prototypes

+ 		+

Prototypes that include brief notes or comments that explain the rationale behind features and design choices.

+ 		+

Help give context behind decisions and reminds team members why specific design elements were selected.

+
+

Storyboards

+ 		+

Sequential images showing the main interactions or events that take place throughout a service.

+ 		+

Help team members and stakeholders visualize the intended user experience.

+
+

Service blueprint

+ 		+

A diagram that visualizes a new process or service and how the organization’s internal processes, people, systems and policies will support it.

+ 		+

Helps organizations understand what will be needed for a successful implementation.

+
+

User stories

+ 		+

Short sentences written from the perspective of users, describing their need and the reason behind.

+ 		+

Help document the different needs that a service must address, shifting the focus from creating detailed requirements to discussing user needs within a specific context.

+
+
diff --git a/src/styles/tables/_tables.scss b/src/components/tables/_tables.scss similarity index 92% rename from src/styles/tables/_tables.scss rename to src/components/tables/_tables.scss index 0f20e886e..08e4f1182 100644 --- a/src/styles/tables/_tables.scss +++ b/src/components/tables/_tables.scss @@ -55,6 +55,7 @@ } .nsw-table-responsive { + @include component-spacing(); display: block; width: 100%; overflow-x: auto; @@ -63,4 +64,8 @@ &:focus { @include nsw-focus; } + + .nsw-table { + min-width: rem(600); + } } diff --git a/src/components/tables/index.hbs b/src/components/tables/index.hbs new file mode 100644 index 000000000..92953ee03 --- /dev/null +++ b/src/components/tables/index.hbs @@ -0,0 +1,35 @@ +--- +title: Tables +model: json/tables.json +--- + +
+
+
+
+
+
+
+
+

Responsive Tables (scroll on mobile)

+ {{>_tables model captionid="caption0"}} + +

Striped

+ {{>_tables model striped="true" captionid="caption1"}} + +

Caption Top

+ {{>_tables model captionTop="true" captionid="caption2"}} + +

Bordered

+ {{>_tables model bordered="true" captionid="caption3"}} + +

Stripe and Bordered

+ {{>_tables model striped="true" bordered="true" captionid="caption4"}} +
+
+
+
+
+
+
+
diff --git a/src/styles/tables/tables.json b/src/components/tables/json/tables.json similarity index 100% rename from src/styles/tables/tables.json rename to src/components/tables/json/tables.json diff --git a/src/components/tags/_tags.hbs b/src/components/tags/_tags.hbs index c58ee09e7..3add87b67 100644 --- a/src/components/tags/_tags.hbs +++ b/src/components/tags/_tags.hbs @@ -1,8 +1,18 @@ -{{#if-equals type "link"}}Link{{/if-equals}} -{{#if-equals type "text"}}Text{{/if-equals}} +{{#if-equals type "link"}} + {{#each tagList}} + {{text}} + {{/each}} +{{/if-equals}} +{{#if-equals type "text"}} + {{#each tagList}} + {{text}} + {{/each}} +{{/if-equals}} {{#if-equals type "checkbox"}} -
- - -
+ {{#each tagList}} +
+ + +
+ {{/each}} {{/if-equals}} diff --git a/src/components/tags/index.hbs b/src/components/tags/index.hbs index 6b01efa11..584e34e71 100644 --- a/src/components/tags/index.hbs +++ b/src/components/tags/index.hbs @@ -1,11 +1,38 @@ --- title: Tags +model: + link: json/tags-link.json + text: json/tags-text.json + checkbox: json/tags-checkbox.json --- -
-
- {{>_tags type="link"}} - {{>_tags type="text"}} - {{>_tags type="checkbox"}} +
+
+
+
+
+
+
+
+

Links

+ {{>_tags model.link}} +
+
+
+
+

Text

+ {{>_tags model.text}} +
+
+
+
+

Checkboxes

+ {{>_tags model.checkbox}} +
+
+
+
+
+
-
+ diff --git a/src/components/tags/json/tags-checkbox.json b/src/components/tags/json/tags-checkbox.json new file mode 100644 index 000000000..fe4e56207 --- /dev/null +++ b/src/components/tags/json/tags-checkbox.json @@ -0,0 +1,21 @@ +{ + "type": "checkbox", + "tagList": [ + { + "text": "Accessibility", + "id": "checkbox-1" + }, + { + "text": "Capability", + "id": "checkbox-2" + }, + { + "text": "Policy", + "id": "checkbox-3" + }, + { + "text": "Transformation", + "id": "checkbox-4" + } + ] +} diff --git a/src/components/tags/json/tags-link.json b/src/components/tags/json/tags-link.json new file mode 100644 index 000000000..275472823 --- /dev/null +++ b/src/components/tags/json/tags-link.json @@ -0,0 +1,17 @@ +{ + "type": "link", + "tagList": [ + { + "text": "Digital", + "url": "#" + }, + { + "text": "Digital Design System", + "url": "#" + }, + { + "text": "Transformation", + "url": "#" + } + ] +} diff --git a/src/components/tags/json/tags-text.json b/src/components/tags/json/tags-text.json new file mode 100644 index 000000000..f4400e582 --- /dev/null +++ b/src/components/tags/json/tags-text.json @@ -0,0 +1,20 @@ +{ + "type": "text", + "tagList": [ + { + "text": "Pre-discovery" + }, + { + "text": "Discovery" + }, + { + "text": "Alpha" + }, + { + "text": "Beta" + }, + { + "text": "Live" + } + ] +} diff --git a/src/components/tags/json/tags.json b/src/components/tags/json/tags.json new file mode 100644 index 000000000..275472823 --- /dev/null +++ b/src/components/tags/json/tags.json @@ -0,0 +1,17 @@ +{ + "type": "link", + "tagList": [ + { + "text": "Digital", + "url": "#" + }, + { + "text": "Digital Design System", + "url": "#" + }, + { + "text": "Transformation", + "url": "#" + } + ] +} diff --git a/src/global/scss/helpers/_all.scss b/src/global/scss/helpers/_all.scss index e7c3f0900..e344018a8 100644 --- a/src/global/scss/helpers/_all.scss +++ b/src/global/scss/helpers/_all.scss @@ -1,2 +1,3 @@ @import 'sr-only'; @import 'spacing'; +@import 'bg'; diff --git a/src/global/scss/helpers/_bg.scss b/src/global/scss/helpers/_bg.scss new file mode 100644 index 000000000..0ab242fcc --- /dev/null +++ b/src/global/scss/helpers/_bg.scss @@ -0,0 +1,36 @@ +.nsw-section--white, +.nsw-section--light-10, +.nsw-section--light-20, +.nsw-section--light-40 { + padding: rem($grid-gutters*2) 0; + + @include breakpoint('md') { + padding: rem($grid-gutters*4) 0; + } +} + +.nsw-section--image { + background-size: cover; + background-position: center; + background-repeat: no-repeat; + + @include breakpoint('md') { + padding: rem($grid-gutters*4) 0; + } +} + +.nsw-section--white { + background-color: $white; +} + +.nsw-section--light-10 { + background-color: $light10; +} + +.nsw-section--light-20 { + background-color: $light20; +} + +.nsw-section--light-40 { + background-color: $light40; +} diff --git a/src/global/scss/helpers/_spacing.scss b/src/global/scss/helpers/_spacing.scss index 36912c532..23c328b6c 100644 --- a/src/global/scss/helpers/_spacing.scss +++ b/src/global/scss/helpers/_spacing.scss @@ -2,6 +2,10 @@ @include helper-classes(margin-top, $spacing-sizes); } +.nsw-block { + @include component-spacing(); +} + @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 6b3240e08..762136af9 100644 --- a/src/global/scss/settings/_settings.scss +++ b/src/global/scss/settings/_settings.scss @@ -95,6 +95,12 @@ $spacers: ( ) ); +//Spacing in between components +$components-spacing: ( + mobile: 24px, + desktop: 32px +); + // Predefined Colours and their names // Brand $nsw-primary-blue: #002664 !default; @@ -151,6 +157,9 @@ $breakpoints: ( xl: 1200px, ) !default; +//Breakpoint to switch to desktop view (Layout and Navigation) +$desktop-breakpoint: lg; + // z-index $z-index: ( top: 900, @@ -188,6 +197,8 @@ $grid-col-sizes: ( ) ); +$grid-columns: 12; + // Notification variations $notification: ( info: ( diff --git a/src/global/scss/style/_base.scss b/src/global/scss/style/_base.scss index ea892b9bb..79ffe6feb 100644 --- a/src/global/scss/style/_base.scss +++ b/src/global/scss/style/_base.scss @@ -15,12 +15,32 @@ body { margin: 0; } +.nsw-ds-example { + p { + margin: 0; + } + + table { + td { + vertical-align: middle; + } + } +} + +.nsw-code { + background-color: $light10; + font-family: monospace; + white-space: pre-wrap; + padding: rem(16); + margin: rem(16) 0; +} + .nsw-ds-example-box { - background: $light40; + background-color: $light40; min-height: rem(56); } .nsw-ds-example-container { - background: $light10; - width: 100%; + background-color: $light40; + min-height: rem(150); } diff --git a/src/global/scss/style/_grid.scss b/src/global/scss/style/_grid.scss index ae4cfb071..4da43f745 100644 --- a/src/global/scss/style/_grid.scss +++ b/src/global/scss/style/_grid.scss @@ -8,23 +8,10 @@ } .nsw-grid { - display: flex; - flex-wrap: wrap; - margin-left: rem(-$grid-gutters); - margin-right: rem(-$grid-gutters); - align-items: stretch; - - @include breakpoint('md') { - margin-left: rem(-$grid-gutters*2); - margin-right: rem(-$grid-gutters*2); - } + @include create-grid(); > .nsw-col { - padding: rem($grid-gutters); - - @include breakpoint('md') { - padding: rem($grid-gutters*2); - } + @include grid-column; } &--no-gutters { @@ -36,9 +23,87 @@ margin-right: 0; } } + + &-overlay { + .nsw-container { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + } + + .nsw-grid { + height: 100%; + + > .nsw-col { + padding-top: 0; + padding-bottom: 0; + } + } + + .nsw-ds-example-box { + height: 100%; + background-color: $nsw-primary-highlight; + opacity: 0.1; + } + } +} + +.nsw-row { + @include create-row(); + + > .nsw-col { + @include grid-column; + } } @include grid-columns; +@include grid-columns-generator; + + +.nsw-page-layout { + @include create-grid(); + + &__main { + @include create-column-default(); + + &:not(:first-child) { + @include create-column(8, $desktop-breakpoint); + } + + &:not(:last-child) { + @include create-column(8, $desktop-breakpoint); + } + } + + &__sidebar { + @include create-column-default(); + @include create-column(4, $desktop-breakpoint); + + &:first-child { + @include breakpoint('lg') { + padding-right: rem($grid-gutters*2 + $layout-gap); + } + } + + &:last-child { + @include breakpoint($desktop-breakpoint) { + padding-left: rem($grid-gutters*2 + $layout-gap); + } + } + + &--desktop { + display: none; + + @include breakpoint($desktop-breakpoint) { + display: block; + } + } + } +} .nsw-layout { display: block; diff --git a/src/global/scss/tools/_grid.scss b/src/global/scss/tools/_grid.scss index c660eb28c..26a865f63 100644 --- a/src/global/scss/tools/_grid.scss +++ b/src/global/scss/tools/_grid.scss @@ -1,3 +1,11 @@ +@mixin grid-column() { + padding: rem($grid-gutters); + + @include breakpoint('md') { + padding: rem($grid-gutters*2); + } +} + @mixin grid-columns() { .nsw-col { flex: 0 0 100%; @@ -16,6 +24,88 @@ } } +@mixin grid-columns-generator() { + @for $i from 1 through $grid-columns { + .nsw-col-#{$i} { + flex: 0 0 percentage($i / $grid-columns); + max-width: percentage($i / $grid-columns); + } + + .nsw-offset-#{$i} { + margin-left: percentage($i / $grid-columns); + } + } + + @each $breakpoint, $breakpoint-size in $breakpoints { + @include breakpoint($breakpoint) { + @for $i from 1 through $grid-columns { + .nsw-col-#{$breakpoint}-#{$i} { + flex: 0 0 percentage($i / $grid-columns); + max-width: percentage($i / $grid-columns); + } + + .nsw-offset-#{$breakpoint}-#{$i} { + margin-left: percentage($i / $grid-columns); + } + } + } + } + + @each $breakpoint, $breakpoint-size in $breakpoints { + .nsw-show-#{$breakpoint} { + display: none; + } + + @include breakpoint($breakpoint) { + .nsw-show-#{$breakpoint} { + display: block; + } + + .nsw-hide-#{$breakpoint} { + display: none; + } + } + } +} + +@mixin create-row() { + width: 100%; + display: flex; + flex-wrap: wrap; + align-items: stretch; +} + +@mixin create-grid() { + display: flex; + flex-wrap: wrap; + margin-left: rem(-$grid-gutters); + margin-right: rem(-$grid-gutters); + align-items: stretch; + + @include breakpoint('md') { + margin-left: rem(-$grid-gutters*2); + margin-right: rem(-$grid-gutters*2); + } +} + +@mixin create-column-default() { + @include grid-column(); + flex: 0 0 100%; + max-width: 100%; +} + +@mixin create-column($size, $breakpoint: null) { + @if ($breakpoint) { + @include breakpoint($breakpoint) { + flex: 0 0 percentage($size / $grid-columns); + max-width: percentage($size / $grid-columns); + } + } @else { + flex: 0 0 percentage($size / $grid-columns); + max-width: percentage($size / $grid-columns); + } +} + @mixin container($offset: $container-offset) { max-width: rem($container-max-width); padding-left: rem($offset); diff --git a/src/global/scss/tools/_spacing.scss b/src/global/scss/tools/_spacing.scss index b4912bf8a..0584cf3d1 100644 --- a/src/global/scss/tools/_spacing.scss +++ b/src/global/scss/tools/_spacing.scss @@ -22,3 +22,16 @@ } } } + +@mixin component-spacing() { + margin-top: rem(map-get($components-spacing, mobile)); + + &:first-child { + margin-top: 0; + } + + @include breakpoint('md') { + margin-top: rem(map-get($components-spacing, desktop)); + } +} + diff --git a/src/index.hbs b/src/index.hbs index 14bcd549b..02d215500 100644 --- a/src/index.hbs +++ b/src/index.hbs @@ -3,16 +3,50 @@ title: Styleguide layout: layout.hbs --- -
-
-

Styleguide

- {{#each collections as |child|}} -

{{capitalize @key}}

-
    - {{#each child}} -
  • {{title}}
    • - {{/each}} -
- {{/each}} -
-
+{{>_header-digital}} + +
+
+
+
+
+
+
+
+
+

NSW Digital Design System

+
+
+ +
+
+

Components

+
    + {{#each collections.components}} +
  • {{title}}
    • + {{/each}} +
+
+
+

Styles

+
    + {{#each collections.styles}} +
  • {{title}}
    • + {{/each}} +
+ +

Demo pages

+
    + {{#each collections.templates}} +
  • {{title}}
    • + {{/each}} +
+
+
+
+
+
+
+
+
+
diff --git a/src/main.js b/src/main.js index 26fbc2b9f..5c05a70f4 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,4 @@ -import SiteSearch from './patterns/header/header' +import SiteSearch from './components/header/header' import Navigation from './components/main-navigation/main-navigation' import Accordion from './components/accordion/accordion' import ShareThis from './components/social-bar/social-bar' diff --git a/src/main.scss b/src/main.scss index 765f72001..a7c8b0f00 100644 --- a/src/main.scss +++ b/src/main.scss @@ -3,10 +3,8 @@ @import 'global/scss/helpers/_all'; @import 'global/scss/style/_all'; -@import 'styles/forms/forms'; @import 'styles/grid/grid'; @import 'styles/iconography/iconography'; -@import 'styles/tables/tables'; @import 'styles/typography/typography'; @import 'components/accordion/accordion'; @@ -16,6 +14,9 @@ @import 'components/card/card'; @import 'components/direction-links/direction-links'; @import 'components/feature-tile/feature-tile'; +@import 'components/forms/forms'; +@import 'components/footer/footer'; +@import 'components/header/header'; @import 'components/hero-banner/hero-banner'; @import 'components/hero-search/hero-search'; @import 'components/in-page-navigation/in-page-navigation'; @@ -27,7 +28,5 @@ @import 'components/site-wide-message/site-wide-message'; @import 'components/social-bar/social-bar'; @import 'components/tab-navigation/tab-navigation'; +@import 'components/tables/tables'; @import 'components/tags/tags'; - -@import 'patterns/header/header'; -@import 'patterns/footer/footer'; diff --git a/src/patterns/footer/footer.json b/src/patterns/footer/footer.json deleted file mode 100644 index cbf2f6cda..000000000 --- a/src/patterns/footer/footer.json +++ /dev/null @@ -1,128 +0,0 @@ -{ - "respectText": "We pay respect to the Traditional Custodians and First Peoples of NSW, and acknowledge their continued connection to their country and culture.", - "copyright": "Copyright © 2019", - "sectionLinks": [ - { - "title": "Section Link", - "url": "#", - "links": [ - { - "text": "Highlight link", - "url": "#" - }, - { - "text": "Highlight link", - "url": "#" - }, - { - "text": "Highlight link", - "url": "#" - }, - { - "text": "Highlight link", - "url": "#" - }, - { - "text": "Highlight link", - "url": "#" - } - ] - }, - { - "title": "Section Link", - "url": "#", - "links": [ - { - "text": "Highlight link", - "url": "#" - }, - { - "text": "Highlight link", - "url": "#" - }, - { - "text": "Highlight link", - "url": "#" - }, - { - "text": "Highlight link", - "url": "#" - }, - { - "text": "Highlight link", - "url": "#" - } - ] - }, - { - "title": "Section Link", - "url": "#", - "links": [ - { - "text": "Highlight link", - "url": "#" - }, - { - "text": "Highlight link", - "url": "#" - }, - { - "text": "Highlight link", - "url": "#" - }, - { - "text": "Highlight link", - "url": "#" - }, - { - "text": "Highlight link", - "url": "#" - } - ] - }, - { - "title": "Section Link", - "url": "#", - "links": [ - { - "text": "Highlight link", - "url": "#" - }, - { - "text": "Highlight link", - "url": "#" - }, - { - "text": "Highlight link", - "url": "#" - }, - { - "text": "Highlight link", - "url": "#" - }, - { - "text": "Highlight link", - "url": "#" - } - ] - } - ], - "footerLinks": [ - { - "text": "Tertiary", - "url": "#" - }, - { - "text": "Tertiary", - "url": "#" - }, - { - "text": "Tertiary", - "url": "#" - }, - { - "text": "Tertiary", - "url": "#" - } - ] -} diff --git a/src/patterns/header/index.hbs b/src/patterns/header/index.hbs deleted file mode 100644 index 683d97984..000000000 --- a/src/patterns/header/index.hbs +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Header ---- - -{{>_header}} diff --git a/src/patterns/header/model.json b/src/patterns/header/model.json deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/styles/forms/index.hbs b/src/styles/forms/index.hbs deleted file mode 100644 index c2751289d..000000000 --- a/src/styles/forms/index.hbs +++ /dev/null @@ -1,212 +0,0 @@ ---- -title: Forms ---- - -
-
-

Forms

-

Default Fields

-
-
- {{>_text-input - id="txt1" - label="Single-line text input:" - }} - - {{>_textarea - id="txta1" - label="Multi-line text input:" - }} - - {{>_select - id="select1" - label="Select dropdown:" - }} - -
- {{>_checkbox - id="check1" - name="single-checkbox" - label="Single checkbox:" - }} -
-
- -
-
- - Multiple Radio - -
- {{>_radio - id="radio1" - name="defaultradio" - label="Radio Option 1" - }} - {{>_radio - id="radio2" - name="defaultradio" - label="Radio Option 2" - }} -
-
-
- -
-
- - Multiple Checkbox - -
- {{>_checkbox - id="checkbox1a" - name="defaultcheck" - label="Checkbox Option 1" - }} - {{>_checkbox - id="checkbox2a" - name="defaultcheck" - label="Checkbox Option 2" - }} -
-
-
-
- -

Fields with Helper text

-
-
- {{>_text-input - id="txt2help" - label="Single-line text input field:" - helper-text="This is helper text" - }} - - {{>_textarea - id="txta1help" - label="Multi-line text input:" - helper-text="This is helper text" - }} - - {{>_select - id="select1help" - label="Select dropdown:" - helper-text="This is helper text" - }} -
-
-
- - Multiple Radio - This is helper text - -
- {{>_radio - id="radio1helper" - name="radiohelper" - label="Radio Option 1" - }} - {{>_radio - id="radio2helper" - name="radiohelper" - label="Radio Option 2" - }} -
-
-
-
-
- - Multiple Checkbox - This is helper text - -
- {{>_checkbox - id="checkbox1helper" - name="checkhelper" - label="Checkbox Option 1" - }} - {{>_checkbox - id="checkbox2helper" - name="checkhelper" - label="Checkbox Option 2" - }} -
-
-
-
- -

Fields with Errors

-
-
- {{>_text-input - id="txt3error" - label="Single-line text input field:" - error-text="There was an error with the input above" - }} - - {{>_textarea - id="txta1error" - label="Multi-line text input:" - error-text="There was an error with the input above" - }} - - {{>_select - id="select1error" - label="Select dropdown:" - error-text="There was an error with the input above" - }} - -
- {{>_checkbox - id="check1error" - name="single-checkbox-error" - label="Single checkbox:" - error-text="There was an error with the input above" - }} -
-
-
-
- - Multiple Radio - Please select at least one option - -
- {{>_radio - id="radio1error" - name="radiocheck" - label="Radio Option 1" - }} - {{>_radio - id="radio2error" - name="radiocheck" - label="Radio Option 2" - }} -
-
-
- -
-
- - Multiple Checkbox - Please select at least one option - -
- {{>_checkbox - id="checkbox1error" - name="errorcheck" - label="Checkbox Option 1" - }} - {{>_checkbox - id="checkbox2error" - name="errorcheck" - label="Checkbox Option 2" - }} -
-
-
-
-
-
diff --git a/src/styles/grid/_grid-basic.hbs b/src/styles/grid/_grid-basic.hbs new file mode 100644 index 000000000..b68735a6e --- /dev/null +++ b/src/styles/grid/_grid-basic.hbs @@ -0,0 +1,43 @@ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/grid/_grid-overlay.hbs b/src/styles/grid/_grid-overlay.hbs new file mode 100644 index 000000000..8cb4d7c03 --- /dev/null +++ b/src/styles/grid/_grid-overlay.hbs @@ -0,0 +1,42 @@ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/grid/_grid.hbs b/src/styles/grid/_grid.hbs index 9d56a0218..b902f9602 100644 --- a/src/styles/grid/_grid.hbs +++ b/src/styles/grid/_grid.hbs @@ -1,51 +1,70 @@
-
-

Whole

-
+
+
+

Whole

+
+
-
-
-
-

Half

-
+
+
+

Half

+
+
+
+

Half

+
+
-
-

Half

-
-
-
-
-
-

Third

-
-
-
-

Third

-
-
-
-

Third

-
+
+
+

Third

+
+
+
+

Third

+
+
+
+

Third

+
+
-
-
-
-

Quarter

-
-
-
-

Quarter

-
-
-
-

Quarter

-
+
+
+

Quarter

+
+
+
+

Quarter

+
+
+
+

Quarter

+
+
+
+

Quarter

+
+
-
-

Quarter

-
+ +
+
+

Quarter [desktop only]

+
+
+ +
+

Third [offset]

+
+
+ +
+

Quarter [offset, desktop only]

+
+
diff --git a/src/styles/grid/index.hbs b/src/styles/grid/index.hbs index 6d5d9d4da..ca29d7060 100644 --- a/src/styles/grid/index.hbs +++ b/src/styles/grid/index.hbs @@ -3,9 +3,16 @@ title: Grid example: true --- -
-
-

Grid

- {{>_grid}} -
-
+
+
+
+
+
+

Grid

+ {{>_grid}} + {{>_grid-overlay}} +
+
+
+
+
\ No newline at end of file diff --git a/src/styles/iconography/_iconography.hbs b/src/styles/iconography/_iconography.hbs index f746c3dcc..2fd6f7b3f 100644 --- a/src/styles/iconography/_iconography.hbs +++ b/src/styles/iconography/_iconography.hbs @@ -1,134 +1,187 @@

Iconography

NSW Design System icons use svg sprite to render the icons.

-

Available Icon ID's

-

-
-
- - + +
<svg class="nsw-icon" focusable="false" aria-hidden="true"> + <use xlink:href="[icon-id]"></use> +</svg>
+ +

Available icon ID's:

+
+
+ - + + - - + - - + - - + - - + - - + - - + - - + - - + - - + + +
ID Icon
#arrow + #arrow +
#arrow + #close +
#close + #menu +
#menu + #search +
#search + #status-error +
#status-error + #status-info +
#status-info + #status-success +
#status-success + #status-warning +
#status-warning + #tick +
+
+ +

Icon colour

+

By default all nsw icons are distinctly NSW blue, there are some preset colours availible:

+ +
+ + + + + + + + - - + -
ClassIcon
#tick + .nsw-icon--error +
-
-
- -

- - 
<svg class="nsw-icon" focusable="false" aria-hidden="true">
-  <use xlink:href="[icon-id]"></use>
-</svg>
-

Icon nsw-colors

-

By default all nsw icons are distinctly nsw blue, there are some preset nsw-colors defined for icons though:

- -
- - - - + + .nsw-icon--success + + + + + + .nsw-icon--info + + + + + + .nsw-icon--warning + + + + + +
-
.nsw-icon--error
-.nsw-icon--success
-.nsw-icon--info
-.nsw-icon--warning

Icon rotation

-

By default nsw icon if directional will all point right, if another direction is needed helper classes can be applied to change the direction

-
- - - - +

By default nsw icon if directional will all point right, if another direction is needed helper classes can be applied to change the direction:

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
ClassIcon
default + +
.nsw-icon--rotate-90 + +
.nsw-icon--rotate-180 + +
.nsw-icon--rotate-270 + +
- -
.nsw-icon--rotate-90
-.nsw-icon--rotate--180
-.nsw-icon--rotate--270
diff --git a/src/styles/iconography/index.hbs b/src/styles/iconography/index.hbs index 00579eb04..c861b898a 100644 --- a/src/styles/iconography/index.hbs +++ b/src/styles/iconography/index.hbs @@ -1,9 +1,22 @@ --- title: Iconography +example: true --- -
-
- {{>_iconography}} -
-
\ No newline at end of file +
+
+
+
+
+
+
+
+{{>_iconography}} +
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/src/styles/layout/_layout.hbs b/src/styles/layout/_layout.hbs index 94a9be5c4..6cb89b280 100644 --- a/src/styles/layout/_layout.hbs +++ b/src/styles/layout/_layout.hbs @@ -1,40 +1,28 @@ -
-
-
-

Full width - Main content area

- {{>_grid}} -
+
+
+

Full width - Main content area

+
-
-
-
-

Side nav area

-

Whole

-
-
+
+
+

Side nav area

+
-
-
-

Two column - Main content area

- {{>_grid}} -
+
+

Two column - Main content area

+
-
-
-
-

Two column - Main content area

- {{>_grid}} -
+
+
+

Two column - Main content area

+
-
-
-

Sidebar area

-

Whole

-
-
+
+

Sidebar area

+
\ No newline at end of file diff --git a/src/styles/layout/index.hbs b/src/styles/layout/index.hbs index 2ec493df7..420c3405f 100644 --- a/src/styles/layout/index.hbs +++ b/src/styles/layout/index.hbs @@ -3,10 +3,16 @@ title: Layout example: true --- -
-
-

Layout

-
-
- -{{>_layout}} +
+
+
+
+
+

Layout

+
+
+ {{>_layout}} + {{>_grid-overlay}} +
+
+
diff --git a/src/styles/tables/_tables-stacked.hbs b/src/styles/tables/_tables-stacked.hbs deleted file mode 100644 index 1b34e61a1..000000000 --- a/src/styles/tables/_tables-stacked.hbs +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Example html table caption
OneTwoThree
Donec velit neque, auctor sit amet aliquamVestibulum ante ipsum primisPraesent sapien massa
Vestibulum ante ipsum primis in faucibus orciconvallis a pellentesque necegestas non nisi
Quisque velit nisi, pretium ut laciniaelementum id enimDonec velit neque, auctor sit amet aliquam
Vestibulum ante ipsum primisPraesent sapien massaVestibulum ante ipsum primis
diff --git a/src/styles/tables/_tables.hbs b/src/styles/tables/_tables.hbs deleted file mode 100644 index f1843fc74..000000000 --- a/src/styles/tables/_tables.hbs +++ /dev/null @@ -1,34 +0,0 @@ -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{{caption}}
OneTwoThree
Donec velit neque, auctor sit amet aliquamVestibulum ante ipsum primisPraesent sapien massa
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curaeconvallis a pellentesque necegestas non nisi
Quisque velit nisi, pretium ut laciniaelementum id enimDonec velit neque, auctor sit amet aliquam
Vestibulum ante ipsum primisPraesent sapien massaVestibulum ante ipsum primis
-
diff --git a/src/styles/tables/index.hbs b/src/styles/tables/index.hbs deleted file mode 100644 index 32b72a21e..000000000 --- a/src/styles/tables/index.hbs +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Tables -model: - basic: tables.json ---- - -
-
-

Tables

- -

Responsive Tables (scroll on mobile)

- {{>_tables model.basic}} - -

Striped

- {{>_tables model.basic striped="true" captionid="caption1"}} - -

Caption Top

- {{>_tables model.basic captionTop="true" captionid="caption2"}} - -

Bordered

- {{>_tables model.basic bordered="true" captionid="caption3"}} - -

Stripe and Bordered

- {{>_tables model.basic striped="true" bordered="true" captionid="caption4"}} -
-
diff --git a/src/styles/typography/_typography.hbs b/src/styles/typography/_typography.hbs index b4e8018dc..d3f6ce15b 100644 --- a/src/styles/typography/_typography.hbs +++ b/src/styles/typography/_typography.hbs @@ -1,4 +1,4 @@ -

Testing display of HTML elements

+

This is 1st level heading

This is an intro test paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This is 2nd level heading

diff --git a/src/styles/typography/_typography.scss b/src/styles/typography/_typography.scss index a167c686c..3bfadc62f 100644 --- a/src/styles/typography/_typography.scss +++ b/src/styles/typography/_typography.scss @@ -85,6 +85,13 @@ cite::before { content: '— '; } + + hr { + border: 0; + height: 1px; + background-color: $light20; + margin: rem(16) 0; + } } .nsw-wysiwyg-content { @@ -151,3 +158,42 @@ .nsw-text-link { @include text-link; } + +h1, +h2, +h3, +h4 { + &.nsw-section-title { + @include font-stack('heading'); + margin: 0; + padding-top: rem($grid-gutters); + + @include breakpoint('md') { + padding-top: rem($grid-gutters*2); + } + } +} + +h1 { + &.nsw-section-title { + @include font-size('xxxl'); + } +} + +h2 { + &.nsw-section-title { + @include font-size('xxl'); + } +} + +h3 { + &.nsw-section-title { + @include font-size('lg'); + } +} + +h4 { + &.nsw-section-title { + @include font-size('md'); + } +} diff --git a/src/styles/typography/index.hbs b/src/styles/typography/index.hbs index 2e0623931..630be10c5 100644 --- a/src/styles/typography/index.hbs +++ b/src/styles/typography/index.hbs @@ -2,8 +2,20 @@ title: Typography --- -
-
- {{>_typography}} -
-
+
+
+
+
+
+
+
+
+ {{>_typography}} +
+
+
+
+
+
+
+
diff --git a/src/templates/full-width-hero-banner/index.hbs b/src/templates/full-width-hero-banner/index.hbs index 4bd7918db..8667f1544 100644 --- a/src/templates/full-width-hero-banner/index.hbs +++ b/src/templates/full-width-hero-banner/index.hbs @@ -1,12 +1,21 @@ --- title: Full width - Hero banner model: - nav-basic: ../../components/main-navigation/main-navigation.json - nav-mega: ../../components/main-navigation/mega-navigation.json - hero-banner: ../../components/hero-banner/hero-banner.json - breadcrumbs: ../../components/breadcrumbs/breadcrumbs.json - card-media: ../../components/card/card-media.json - footer: ../../patterns/footer/footer.json + nav-basic: ../../components/main-navigation/json/main-navigation.json + nav-mega: ../../components/main-navigation/json/mega-navigation.json + hero-banner: ../../components/hero-banner/json/hero-banner.json + breadcrumbs: ../../components/breadcrumbs/json/breadcrumbs.json + card-media-1: ../../components/card/json/card-media-1.json + card-media-2: ../../components/card/json/card-media-2.json + card-media-3: ../../components/card/json/card-media-3.json + card-simple-1: ../../components/card/json/card-simple-1.json + card-simple-2: ../../components/card/json/card-simple-2.json + card-simple-3: ../../components/card/json/card-simple-3.json + card-simple-4: ../../components/card/json/card-simple-4.json + card-news-1: ../../components/card/json/card-news-1.json + card-news-2: ../../components/card/json/card-news-2.json + card-news-3: ../../components/card/json/card-news-3.json + footer: ../../components/footer/json/footer.json --- {{>_header content="#content" nav="#main-navigation"}} @@ -14,33 +23,71 @@ model: {{>_hero-banner model.hero-banner}} -
-
-
-
-

Lorem Ipsum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pharetra consequat massa, nec ullamcorper dolor tincidunt laoreet. Quisque at dolor vel eros vulputate mollis. Nunc massa nisi, mattis ac posuere a, efficitur quis libero. Ut ornare mauris vel diam accumsan dapibus. Curabitur congue porta dignissim. Nulla aliquet augue nec posuere viverra. Mauris gravida augue sit amet sapien imperdiet, at fermentum felis fermentum. Curabitur interdum elit sit amet blandit iaculis. Mauris vulputate auctor leo et lobortis. Curabitur id neque vel ex efficitur pretium eget non odio.

-
- -
-
{{>_card model.card-media}}
-
{{>_card model.card-media}}
-
{{>_card model.card-media}}
+
+
+
+
+
+
+
+ {{>_card model.card-media-1}} +
+
+ {{>_card model.card-media-2}} +
+
+ {{>_card model.card-media-3}} +
+
+
+
+
-
-

Curabitur congue porta dignissim.

-

Nunc massa nisi, mattis ac posuere a, efficitur quis libero. Ut ornare mauris vel diam accumsan dapibus. Curabitur congue porta dignissim. Nulla aliquet augue nec posuere viverra. Mauris gravida augue sit amet sapien imperdiet, at fermentum felis fermentum. Curabitur interdum elit sit amet blandit iaculis. Mauris vulputate auctor leo et lobortis. Curabitur id neque vel ex efficitur pretium eget non odio.

+
+
+
+
+

Energy and utilities

+
+
+ {{>_card model.card-simple-1}} +
+
+ {{>_card model.card-simple-2}} +
+
+ {{>_card model.card-simple-3}} +
+
+ {{>_card model.card-simple-4}} +
+
+
+
+
-
-
-

Callout Heading

-

Filium morte multavit si sine causa, nollem me tamen laudandis maioribus meis corrupisti nec voluptas sit, amet, consectetur, adipisci velit.

+
+
+
+
+

Latest updates

+
+
+ {{>_card model.card-news-1}} +
+
+ {{>_card model.card-news-2}} +
+
+ {{>_card model.card-news-3}} +
+
-
+
{{>_footer model.footer}} diff --git a/src/templates/full-width-hero-search/index.hbs b/src/templates/full-width-hero-search/index.hbs index cfe707df8..b3da14f28 100644 --- a/src/templates/full-width-hero-search/index.hbs +++ b/src/templates/full-width-hero-search/index.hbs @@ -1,41 +1,91 @@ --- title: Full width - Hero search model: - nav-basic: ../../components/main-navigation/main-navigation.json - nav-mega: ../../components/main-navigation/mega-navigation.json - hero-search: ../../components/hero-search/hero-search.json - breadcrumbs: ../../components/breadcrumbs/breadcrumbs.json - card-media: ../../components/card/card-media.json - footer: ../../patterns/footer/footer.json + nav-basic: ../../components/main-navigation/json/main-navigation.json + nav-mega: ../../components/main-navigation/json/mega-navigation.json + hero-search: ../../components/hero-search/json/hero-search.json + breadcrumbs: ../../components/breadcrumbs/json/breadcrumbs.json + card-headline-1: ../../components/card/json/card-headline-1.json + card-headline-2: ../../components/card/json/card-headline-2.json + card-headline-3: ../../components/card/json/card-headline-3.json + card-headline-4: ../../components/card/json/card-headline-4.json + card-headline-5: ../../components/card/json/card-headline-5.json + card-headline-6: ../../components/card/json/card-headline-6.json + card-simple-1: ../../components/card/json/card-simple-1.json + card-simple-2: ../../components/card/json/card-simple-2.json + card-simple-3: ../../components/card/json/card-simple-3.json + card-news-1: ../../components/card/json/card-news-1.json + card-news-2: ../../components/card/json/card-news-2.json + card-news-3: ../../components/card/json/card-news-3.json + footer: ../../components/footer/json/footer.json --- {{>_header content="#content" nav="#main-navigation"}} {{>_main-navigation model.nav-mega}} -{{>_hero-search model.hero-search}} -
-
-
-
-

Lorem Ipsum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pharetra consequat massa, nec ullamcorper dolor tincidunt laoreet. Quisque at dolor vel eros vulputate mollis. Nunc massa nisi, mattis ac posuere a, efficitur quis libero. Ut ornare mauris vel diam accumsan dapibus. Curabitur congue porta dignissim. Nulla aliquet augue nec posuere viverra. Mauris gravida augue sit amet sapien imperdiet, at fermentum felis fermentum. Curabitur interdum elit sit amet blandit iaculis. Mauris vulputate auctor leo et lobortis. Curabitur id neque vel ex efficitur pretium eget non odio.

-
+
+ {{>_hero-search model.hero-search}} +
-
-
{{>_card model.card-media}}
-
{{>_card model.card-media}}
-
{{>_card model.card-media}}
-
+
+
+
+
+
+
+
+ {{>_card model.card-headline-1}} +
+
+ {{>_card model.card-headline-2}} +
+
+ {{>_card model.card-headline-3}} +
+
+ {{>_card model.card-headline-4}} +
+
+ {{>_card model.card-headline-5}} +
+
+ {{>_card model.card-headline-6}} +
+
-
-

Curabitur congue porta dignissim.

-

Nunc massa nisi, mattis ac posuere a, efficitur quis libero. Ut ornare mauris vel diam accumsan dapibus. Curabitur congue porta dignissim. Nulla aliquet augue nec posuere viverra. Mauris gravida augue sit amet sapien imperdiet, at fermentum felis fermentum. Curabitur interdum elit sit amet blandit iaculis. Mauris vulputate auctor leo et lobortis. Curabitur id neque vel ex efficitur pretium eget non odio.

+

Energy and utilities

+
+
+ {{>_card model.card-simple-1}} +
+
+ {{>_card model.card-simple-2}} +
+
+ {{>_card model.card-simple-3}} +
+
+
+
+
-
-
-

Callout Heading

-

Filium morte multavit si sine causa, nollem me tamen laudandis maioribus meis corrupisti nec voluptas sit, amet, consectetur, adipisci velit.

+
+
+
+
+

Latest updates

+
+
+ {{>_card model.card-news-1}} +
+
+ {{>_card model.card-news-2}} +
+
+ {{>_card model.card-news-3}} +
+
diff --git a/src/templates/nav-sidebar-left/index.hbs b/src/templates/nav-sidebar-left/index.hbs index 190b8ee41..de1455855 100644 --- a/src/templates/nav-sidebar-left/index.hbs +++ b/src/templates/nav-sidebar-left/index.hbs @@ -1,48 +1,74 @@ --- title: Two column - Side navigation left align (nav hides on mobile) model: - nav-basic: ../../components/main-navigation/main-navigation.json - nav-mega: ../../components/main-navigation/mega-navigation.json - breadcrumbs: ../../components/breadcrumbs/breadcrumbs.json - side-navigation: ../../components/side-navigation/side-navigation.json - card-media: ../../components/card/card-simple.json - footer: ../../patterns/footer/footer.json + nav-basic: ../../components/main-navigation/json/main-navigation.json + breadcrumbs: ../../components/breadcrumbs/json/breadcrumbs.json + side-navigation: ../../components/side-navigation/json/side-navigation-level-2.json + in-page-navigation: ../../components/in-page-navigation/json/in-page-navigation-2.json + accordion: ../../components/accordion/json/accordion-2.json + callout: ../../components/callout/json/callout-icon.json + tab-navigation: ../../components/tab-navigation/json/tab-navigation-2.json + link-list: ../../components/link-list/json/link-list-2.json + footer: ../../components/footer/json/footer.json --- {{>_header content="#content" nav="#main-navigation"}} {{>_main-navigation model.nav-basic}} -
+
{{>_breadcrumbs model.breadcrumbs}}
-
-
- {{>_side-navigation model.side-navigation}} -
-
-
-

Lorem Ipsum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pharetra consequat massa, nec ullamcorper dolor tincidunt laoreet. Quisque at dolor vel eros vulputate mollis. Nunc massa nisi, mattis ac posuere a, efficitur quis libero. Ut ornare mauris vel diam accumsan dapibus. Curabitur congue porta dignissim. Nulla aliquet augue nec posuere viverra. Mauris gravida augue sit amet sapien imperdiet, at fermentum felis fermentum. Curabitur interdum elit sit amet blandit iaculis. Mauris vulputate auctor leo et lobortis. Curabitur id neque vel ex efficitur pretium eget non odio.

+
+
+
+ {{>_side-navigation model.side-navigation}}
+
+
+

Content design

+

Content designers create patterns of content to guide the user and help them achieve their goal.

+
-
-
{{>_card model.card-media}}
-
{{>_card model.card-media}}
-
{{>_card model.card-media}}
-
+ {{>_in-page-navigation model.in-page-navigation}} -
-

Curabitur congue porta dignissim.

-

Nunc massa nisi, mattis ac posuere a, efficitur quis libero. Ut ornare mauris vel diam accumsan dapibus. Curabitur congue porta dignissim. Nulla aliquet augue nec posuere viverra. Mauris gravida augue sit amet sapien imperdiet, at fermentum felis fermentum. Curabitur interdum elit sit amet blandit iaculis. Mauris vulputate auctor leo et lobortis. Curabitur id neque vel ex efficitur pretium eget non odio.

-
+
+

Ways of working

+

Content design is not copy writing. It may not even be about writing a lot of words. It’s a way of working that starts with the problem you need to resolve for users.

-
-
-

Callout Heading

-

Filium morte multavit si sine causa, nollem me tamen laudandis maioribus meis corrupisti nec voluptas sit, amet, consectetur, adipisci velit.

+

Building relationships

+

Work with others to understand the problem you need to address on behalf of the user. Other people in your team may already be doing that.

+

A content person comes in many guises and you may not be a part of the multidisciplinary product team. While you're gathering evidence about the user, try to build relationships across that product team.

-
-
+ + {{>_accordion model.accordion}} + +
+

Core skills

+

You may have come to content design from a variety of backgrounds – such as communications, marketing, web editing, copywriting, technical writing, journalism.

+ +

Plain language

+

Content designers need to know the basics of good readability. They’re aware how readers scan content. There’s a skill involved in improving content for ease of use. They will know how to create signposts for users, mix up the length of sentences and use active language. They work hard to make the meaning succinct and clear.

+
+ + {{>_callout model.callout}} + +
+

Content design for transactions

+

As a content designer, your task is to get the user from A to B in the transaction.

+

When designing content for transactions:

+
    +
  • minimise the user’s chance of error
    • +
  • maximise collaborative teamwork
    • +
  • balance business and user needs.
    • +
+

In this guide we’ve used Service NSW examples.

+
+ + {{>_tab-navigation model.tab-navigation}} + + {{>_link-list model.link-list}} +
+
{{>_footer model.footer}} diff --git a/src/templates/sidebar-right/index.hbs b/src/templates/sidebar-right/index.hbs index 65623f90b..2f0fa0b16 100644 --- a/src/templates/sidebar-right/index.hbs +++ b/src/templates/sidebar-right/index.hbs @@ -1,46 +1,82 @@ --- title: Two column - Sidebar right align model: - nav-basic: ../../components/main-navigation/main-navigation.json - nav-mega: ../../components/main-navigation/mega-navigation.json - breadcrumbs: ../../components/breadcrumbs/breadcrumbs.json - card-media: ../../components/card/card-simple.json - link-list: ../../components/link-list/link-list.json - footer: ../../patterns/footer/footer.json + nav-basic: ../../components/main-navigation/json/main-navigation.json + nav-mega: ../../components/main-navigation/json/mega-navigation.json + breadcrumbs: ../../components/breadcrumbs/json/breadcrumbs.json + tags: ../../components/tags/json/tags-link.json + callout: ../../components/callout/json/callout-all-2.json + link-list: ../../components/link-list/json/link-list-3.json + card-blog-1: ../../components/card/json/card-blog-1.json + card-blog-2: ../../components/card/json/card-blog-2.json + card-blog-3: ../../components/card/json/card-blog-3.json + footer: ../../components/footer/json/footer.json --- {{>_header content="#content" nav="#main-navigation"}} {{>_main-navigation model.nav-basic}} -
+
{{>_breadcrumbs model.breadcrumbs}}
-
-
-
-

Lorem Ipsum.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pharetra consequat massa, nec ullamcorper dolor tincidunt laoreet. Quisque at dolor vel eros vulputate mollis. Nunc massa nisi, mattis ac posuere a, efficitur quis libero. Ut ornare mauris vel diam accumsan dapibus. Curabitur congue porta dignissim. Nulla aliquet augue nec posuere viverra. Mauris gravida augue sit amet sapien imperdiet, at fermentum felis fermentum. Curabitur interdum elit sit amet blandit iaculis. Mauris vulputate auctor leo et lobortis. Curabitur id neque vel ex efficitur pretium eget non odio.

-
-
-
{{>_card model.card-media}}
-
{{>_card model.card-media}}
-
{{>_card model.card-media}}
-
+
+
+
+
+

Scaling a design system

+

+ 16 Sep 2020
+ Design System Team +

+
+
+ {{>_tags model.tags}} +
+ +

When we launched the public beta of the NSW Design System in December 2018, we had no idea that what we delivered as a test-and-learn product would become one of the most talked about whole of government projects in NSW.

+

Our upcoming plans for scaling the NSW Design System are addressing the following friction points our users are facing when delivering digital products and services.

+ +
    +
  1. Teams with less digital experience within government that are thirsty for knowledge, guidance and a community to help support them delivering digital things.
    2. +
  2. High digital capability teams who wanted to share what they’ve learned, collaborate and contribute back to reduce design and development time and cost as teams build the same components over and over.
    3. +
  3. External service providers delivering products and services for government agencies needing direction and approval on style, brand, templates, patterns and reusable components.
    4. +
+ +
+ Our upcoming plans for scaling the NSW Design System are addressing the following friction points our users are facing when delivering digital products and services. Watch this space, there’s more to come. + The Design System Team +
-
-

Curabitur congue porta dignissim.

-

Nunc massa nisi, mattis ac posuere a, efficitur quis libero. Ut ornare mauris vel diam accumsan dapibus. Curabitur congue porta dignissim. Nulla aliquet augue nec posuere viverra. Mauris gravida augue sit amet sapien imperdiet, at fermentum felis fermentum. Curabitur interdum elit sit amet blandit iaculis. Mauris vulputate auctor leo et lobortis. Curabitur id neque vel ex efficitur pretium eget non odio.

+

Our research has shown what is possible in the delivery of digital products and services across whole of government. We’re excited to take these learnings to the next stage of service delivery. Watch this space!

+
+ + {{>_callout model.callout}} + +
+
+ {{>_link-list model.link-list}}
+
+
-
-
-

Callout Heading

-

Filium morte multavit si sine causa, nollem me tamen laudandis maioribus meis corrupisti nec voluptas sit, amet, consectetur, adipisci velit.

+
+
+
+
+

Similar blog posts

+
+
+ {{>_card model.card-blog-1}} +
+
+ {{>_card model.card-blog-2}} +
+
+ {{>_card model.card-blog-3}} +
+
-
-
- {{>_link-list model.link-list}}