diff --git a/x-govuk/components/_all.scss b/x-govuk/components/_all.scss index 93075e8..146349d 100644 --- a/x-govuk/components/_all.scss +++ b/x-govuk/components/_all.scss @@ -2,5 +2,6 @@ @import "masthead/masthead"; @import "related-navigation/related-navigation"; @import "side-navigation/side-navigation"; +@import "sub-navigation/sub-navigation"; @import "summary-card/summary-card"; @import "task-list/task-list"; diff --git a/x-govuk/components/sub-navigation/README.md b/x-govuk/components/sub-navigation/README.md new file mode 100644 index 0000000..a6a809d --- /dev/null +++ b/x-govuk/components/sub-navigation/README.md @@ -0,0 +1,65 @@ +--- +eleventyExcludeFromCollections: true +--- + +# Sub navigation + +Implements the sub navigation component used on the GOV.UK Design System website. + +## Example usage + +```njk +{{ xGovukSubNavigation({ + visuallyHiddenTitle: 'Navigation', + items: [{ + text: "About this project", + href: "/about" + }, { + text: "Contact us", + href: "/contact", + current: true, + parent: true, + children: [{ + text: "By email", + href: "/contact/email", + }, { + text: "By telephone", + href: "/contact/telephone", + }] + }] +}) }} +``` + +## Component options + +Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. + +Some options are required for the macro to work; these are marked as “Required” in the option description. + +If you’re using Nunjucks macros in production with `html` options, or ones ending with `html`, you must sanitise the HTML to protect against [cross-site scripting exploits](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting). + +| Name | Type | Description | +| :--- | :--- | :---------- | +| **items** | array | **Required**. An array of navigation links within the sub navigation. See [items](#options-for-items). | +| **classes** | string | Classes to add to the related navigation. | +| **attributes** | object | HTML attributes (for example data attributes) to add to the related navigation. | +| **visuallyHiddenTitle** | string | A hidden title for the sub navigation. | + +### Options for items + +| Name | Type | Description | +| :--- | :--- | :---------- | +| **text** | string | **Required**. Text of the navigation link. | +| **href** | array | **Required**. The value of the navigation link’s `href` attribute. | +| **current** | boolean | Indicate that the item is the current page. | +| **parent** | boolean | Indicate if the item is a parent. Use when the current item or any of its children are active. | +| **theme** | string | A name to group items by. If several navigation items share the same theme, they will appear together under that name. | +| **children** | string | An array of items as child navigation links. See [children](#options-for-children). | + +### Options for children + +| Name | Type | Description | +| :--- | :--- | :---------- | +| **text** | string | **Required**. Text of the navigation link. | +| **href** | array | **Required**. The value of the navigation link’s `href` attribute. | +| **current** | boolean | Indicate that the item is the current page. | diff --git a/x-govuk/components/sub-navigation/_sub-navigation.scss b/x-govuk/components/sub-navigation/_sub-navigation.scss new file mode 100644 index 0000000..d20189c --- /dev/null +++ b/x-govuk/components/sub-navigation/_sub-navigation.scss @@ -0,0 +1,58 @@ +.x-govuk-sub-navigation { + @include govuk-font(16); +} + +.x-govuk-sub-navigation__section { + list-style-type: none; + margin: 0 0 govuk-spacing(4); + padding: 0; +} + +.x-govuk-sub-navigation__link { + @include govuk-link-common; + @include govuk-link-style-no-visited-state; + @include govuk-link-style-no-underline; + padding-bottom: govuk-spacing(1); + padding-top: govuk-spacing(1); + + &:not(:focus):hover { + color: $govuk-link-colour; + } +} + +.x-govuk-sub-navigation__section-item { + margin-bottom: govuk-spacing(1); + padding-bottom: govuk-spacing(1); + padding-top: govuk-spacing(1); +} + +.x-govuk-sub-navigation__section-item--current { + $_current-indicator-width: 4px; + background-color: govuk-colour("white"); + border-left: $_current-indicator-width solid $govuk-brand-colour; + margin-left: -(govuk-spacing(2) + $_current-indicator-width); + padding-left: govuk-spacing(2); +} + +.x-govuk-sub-navigation__link[aria-current] { + font-weight: bold; +} + +.x-govuk-sub-navigation__section--nested { + margin-bottom: 0; + margin-top: govuk-spacing(2); + padding-left: govuk-spacing(4); +} + +.x-govuk-sub-navigation__section--nested .x-govuk-sub-navigation__section-item:before { + color: govuk-colour("dark-grey"); + content: "—"; + margin-left: -(govuk-spacing(4)); +} + +.x-govuk-sub-navigation__theme { + @include govuk-font(19); + color: govuk-colour("dark-grey"); + margin: 0; + padding: govuk-spacing(2) govuk-spacing(3) govuk-spacing(2) 0; +} diff --git a/x-govuk/components/sub-navigation/macro.njk b/x-govuk/components/sub-navigation/macro.njk new file mode 100644 index 0000000..d35b430 --- /dev/null +++ b/x-govuk/components/sub-navigation/macro.njk @@ -0,0 +1,3 @@ +{% macro xGovukSubNavigation(params) %} + {%- include "./template.njk" -%} +{% endmacro %} diff --git a/x-govuk/components/sub-navigation/template.njk b/x-govuk/components/sub-navigation/template.njk new file mode 100644 index 0000000..ccf9c34 --- /dev/null +++ b/x-govuk/components/sub-navigation/template.njk @@ -0,0 +1,25 @@ +