Skip to content

Commit

Permalink
Secondary navigation (#168)
Browse files Browse the repository at this point in the history 
* Initial commit of secondary navigation component

* Fix tests

* Add more options to secondary navigation

* Tweak secondary navigation
  • Loading branch information
@ahosgood
ahosgood authored Jan 15, 2025
1 parent 8bac108 commit fc82f42
Show file tree
Hide file tree
Showing 12 changed files with 539 additions and 2 deletions.
2 changes: 2 additions & 0 deletions .github/actions/prototype-kit-test/action.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ runs:
echo -e "{% from \"nationalarchives/components/quick-filters/macro.njk\" import tnaQuickFilters %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
echo -e "{% from \"nationalarchives/components/radios/macro.njk\" import tnaRadios %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
echo -e "{% from \"nationalarchives/components/search-field/macro.njk\" import tnaSearchField %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
echo -e "{% from \"nationalarchives/components/secondary-navigation/macro.njk\" import tnaSecondaryNavigation %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
echo -e "{% from \"nationalarchives/components/select/macro.njk\" import tnaSelect %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
echo -e "{% from \"nationalarchives/components/sidebar/macro.njk\" import tnaSidebar %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
echo -e "{% from \"nationalarchives/components/skip-link/macro.njk\" import tnaSkipLink %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
Expand Down Expand Up @@ -96,6 +97,7 @@ runs:
echo "{{ tnaQuickFilters({}) }}" >> prototype/app/views/index.html &&
echo "{{ tnaRadios({}) }}" >> prototype/app/views/index.html &&
echo "{{ tnaSearchField({}) }}" >> prototype/app/views/index.html &&
echo "{{ tnaSecondaryNavigation({}) }}" >> prototype/app/views/index.html &&
echo "{{ tnaSelect({}) }}" >> prototype/app/views/index.html &&
echo "{{ tnaSidebar({}) }}" >> prototype/app/views/index.html &&
echo "{{ tnaSkipLink({}) }}" >> prototype/app/views/index.html &&
Expand Down
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.7.2...HEAD)

### Added

- Secondary navigation component

### Changed
### Deprecated
### Removed
Expand Down
1 change: 1 addition & 0 deletions src/nationalarchives/components/_presentation.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
@use "phase-banner";
@use "picture";
@use "quick-filters";
@use "secondary-navigation";
@use "sidebar";
@use "skip-link";
@use "tabs";
Expand Down
1 change: 1 addition & 0 deletions src/nationalarchives/components/secondary-navigation/_index.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@use "secondary-navigation";
150 changes: 150 additions & 0 deletions src/nationalarchives/components/secondary-navigation/fixtures.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
{
"component": "secondary navigation",
"fixtures": [
{
"name": "default",
"options": {
"title": "Title",
"headingLevel": 2,
"items": [
{
"name": "Alpha",
"href": "#/alpha"
},
{
"name": "Beta",
"href": "#/beta",
"current": true
},
{
"name": "Gamma",
"href": "#/gamma"
}
]
},
"html": "<nav class=\"tna-secondary-navigation tna-secondary-navigation--unindent\" aria-label=\"Title\"><h2 class=\"tna-secondary-navigation__heading tna-heading-s\">Title</h2><ul class=\"tna-secondary-navigation__items\"><li class=\"tna-secondary-navigation__item\"><a href=\"#/alpha\" class=\"tna-secondary-navigation__link\">Alpha</a></li><li class=\"tna-secondary-navigation__item tna-secondary-navigation__item--current\"><a href=\"#/beta\" class=\"tna-secondary-navigation__link\">Beta</a></li><li class=\"tna-secondary-navigation__item\"><a href=\"#/gamma\" class=\"tna-secondary-navigation__link\">Gamma</a></li></ul></nav>"
},
{
"name": "no bottom border",
"options": {
"title": "Title",
"headingLevel": 2,
"items": [
{
"name": "Alpha",
"href": "#/alpha"
},
{
"name": "Beta",
"href": "#/beta",
"current": true
},
{
"name": "Gamma",
"href": "#/gamma"
}
],
"noBottomBorder": true
},
"html": "<nav class=\"tna-secondary-navigation tna-secondary-navigation--no-bottom-border tna-secondary-navigation--unindent\" aria-label=\"Title\"><h2 class=\"tna-secondary-navigation__heading tna-heading-s\">Title</h2><ul class=\"tna-secondary-navigation__items\"><li class=\"tna-secondary-navigation__item\"><a href=\"#/alpha\" class=\"tna-secondary-navigation__link\">Alpha</a></li><li class=\"tna-secondary-navigation__item tna-secondary-navigation__item--current\"><a href=\"#/beta\" class=\"tna-secondary-navigation__link\">Beta</a></li><li class=\"tna-secondary-navigation__item\"><a href=\"#/gamma\" class=\"tna-secondary-navigation__link\">Gamma</a></li></ul></nav>"
},
{
"name": "overflow",
"options": {
"title": "Title",
"headingLevel": 2,
"items": [
{
"name": "Alpha",
"href": "#/alpha"
},
{
"name": "Beta",
"href": "#/beta",
"current": true
},
{
"name": "Gamma",
"href": "#/gamma"
}
],
"overflow": true
},
"html": "<nav class=\"tna-secondary-navigation tna-secondary-navigation--overflow tna-secondary-navigation--unindent\" aria-label=\"Title\"><h2 class=\"tna-secondary-navigation__heading tna-heading-s\">Title</h2><ul class=\"tna-secondary-navigation__items\"><li class=\"tna-secondary-navigation__item\"><a href=\"#/alpha\" class=\"tna-secondary-navigation__link\">Alpha</a></li><li class=\"tna-secondary-navigation__item tna-secondary-navigation__item--current\"><a href=\"#/beta\" class=\"tna-secondary-navigation__link\">Beta</a></li><li class=\"tna-secondary-navigation__item\"><a href=\"#/gamma\" class=\"tna-secondary-navigation__link\">Gamma</a></li></ul></nav>"
},
{
"name": "no unindentation",
"options": {
"title": "Title",
"headingLevel": 2,
"items": [
{
"name": "Alpha",
"href": "#/alpha"
},
{
"name": "Beta",
"href": "#/beta",
"current": true
},
{
"name": "Gamma",
"href": "#/gamma"
}
],
"noUnindentation": true
},
"html": "<nav class=\"tna-secondary-navigation\" aria-label=\"Title\"><h2 class=\"tna-secondary-navigation__heading tna-heading-s\">Title</h2><ul class=\"tna-secondary-navigation__items\"><li class=\"tna-secondary-navigation__item\"><a href=\"#/alpha\" class=\"tna-secondary-navigation__link\">Alpha</a></li><li class=\"tna-secondary-navigation__item tna-secondary-navigation__item--current\"><a href=\"#/beta\" class=\"tna-secondary-navigation__link\">Beta</a></li><li class=\"tna-secondary-navigation__item\"><a href=\"#/gamma\" class=\"tna-secondary-navigation__link\">Gamma</a></li></ul></nav>"
},
{
"name": "with classes",
"options": {
"title": "Title",
"headingLevel": 2,
"items": [
{
"name": "Alpha",
"href": "#/alpha"
},
{
"name": "Beta",
"href": "#/beta",
"current": true
},
{
"name": "Gamma",
"href": "#/gamma"
}
],
"classes": "secondary-navigation__test-class"
},
"html": "<nav class=\"tna-secondary-navigation secondary-navigation__test-class tna-secondary-navigation--unindent\" aria-label=\"Title\"><h2 class=\"tna-secondary-navigation__heading tna-heading-s\">Title</h2><ul class=\"tna-secondary-navigation__items\"><li class=\"tna-secondary-navigation__item\"><a href=\"#/alpha\" class=\"tna-secondary-navigation__link\">Alpha</a></li><li class=\"tna-secondary-navigation__item tna-secondary-navigation__item--current\"><a href=\"#/beta\" class=\"tna-secondary-navigation__link\">Beta</a></li><li class=\"tna-secondary-navigation__item\"><a href=\"#/gamma\" class=\"tna-secondary-navigation__link\">Gamma</a></li></ul></nav>"
},
{
"name": "with attributes",
"options": {
"title": "Title",
"headingLevel": 2,
"items": [
{
"name": "Alpha",
"href": "#/alpha"
},
{
"name": "Beta",
"href": "#/beta",
"current": true
},
{
"name": "Gamma",
"href": "#/gamma"
}
],
"attributes": {
"data-testattribute": "foobar"
}
},
"html": "<nav class=\"tna-secondary-navigation tna-secondary-navigation--unindent\" aria-label=\"Title\" data-testattribute=\"foobar\"><h2 class=\"tna-secondary-navigation__heading tna-heading-s\">Title</h2><ul class=\"tna-secondary-navigation__items\"><li class=\"tna-secondary-navigation__item\"><a href=\"#/alpha\" class=\"tna-secondary-navigation__link\">Alpha</a></li><li class=\"tna-secondary-navigation__item tna-secondary-navigation__item--current\"><a href=\"#/beta\" class=\"tna-secondary-navigation__link\">Beta</a></li><li class=\"tna-secondary-navigation__item\"><a href=\"#/gamma\" class=\"tna-secondary-navigation__link\">Gamma</a></li></ul></nav>"
}
]
}
70 changes: 70 additions & 0 deletions src/nationalarchives/components/secondary-navigation/macro-options.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
[
{
"name": "title",
"type": "string",
"required": true,
"description": ""
},
{
"name": "headingLevel",
"type": "number",
"required": true,
"description": ""
},
{
"name": "items",
"type": "array",
"required": true,
"description": "",
"params": [
{
"name": "text",
"type": "string",
"required": true,
"description": ""
},
{
"name": "href",
"type": "string",
"required": true,
"description": ""
},
{
"name": "current",
"type": "boolean",
"required": false,
"description": ""
}
]
},
{
"name": "noBottomBorder",
"type": "boolean",
"required": false,
"description": ""
},
{
"name": "overflow",
"type": "boolean",
"required": false,
"description": ""
},
{
"name": "noUnindentation",
"type": "boolean",
"required": false,
"description": ""
},
{
"name": "classes",
"type": "string",
"required": false,
"description": "Classes to add to the secondary navigation."
},
{
"name": "attributes",
"type": "object",
"required": false,
"description": "HTML attributes (for example data attributes) to add to the secondary navigation."
}
]
3 changes: 3 additions & 0 deletions src/nationalarchives/components/secondary-navigation/macro.njk
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{% macro tnaSecondaryNavigation(params) %}
{%- include "nationalarchives/components/secondary-navigation/template.njk" -%}
{% endmacro %}
Loading

0 comments on commit fc82f42

Please # to comment.