-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
15 changed files
with
389 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| @use "pagination"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| { | ||
| "component": "pagination", | ||
| "fixtures": [] | ||
| } |
116 changes: 116 additions & 0 deletions
116
src/nationalarchives/components/pagination/macro-options.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| [ | ||
| { | ||
| "name": "previous", | ||
| "type": "object", | ||
| "required": false, | ||
| "description": "", | ||
| "params": [ | ||
| { | ||
| "name": "text", | ||
| "type": "string", | ||
| "required": false, | ||
| "description": "" | ||
| }, | ||
| { | ||
| "name": "href", | ||
| "type": "string", | ||
| "required": true, | ||
| "description": "" | ||
| }, | ||
| { | ||
| "name": "attributes", | ||
| "type": "object", | ||
| "required": false, | ||
| "description": "" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "name": "items", | ||
| "type": "array", | ||
| "required": false, | ||
| "description": "", | ||
| "params": [ | ||
| { | ||
| "name": "number", | ||
| "type": "string", | ||
| "required": true, | ||
| "description": "" | ||
| }, | ||
| { | ||
| "name": "label", | ||
| "type": "string", | ||
| "required": false, | ||
| "description": "" | ||
| }, | ||
| { | ||
| "name": "href", | ||
| "type": "string", | ||
| "required": true, | ||
| "description": "" | ||
| }, | ||
| { | ||
| "name": "current", | ||
| "type": "boolean", | ||
| "required": false, | ||
| "description": "" | ||
| }, | ||
| { | ||
| "name": "ellipsis", | ||
| "type": "boolean", | ||
| "required": false, | ||
| "description": "Use this option if you want to specify an ellipsis at a given point between numbers. If you set this option as `true`, any other options for the item are ignored." | ||
| }, | ||
| { | ||
| "name": "attributes", | ||
| "type": "object", | ||
| "required": false, | ||
| "description": "" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "name": "next", | ||
| "type": "object", | ||
| "required": false, | ||
| "description": "", | ||
| "params": [ | ||
| { | ||
| "name": "text", | ||
| "type": "string", | ||
| "required": false, | ||
| "description": "" | ||
| }, | ||
| { | ||
| "name": "href", | ||
| "type": "string", | ||
| "required": true, | ||
| "description": "" | ||
| }, | ||
| { | ||
| "name": "attributes", | ||
| "type": "object", | ||
| "required": false, | ||
| "description": "" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "name": "landmarkLabel", | ||
| "type": "string", | ||
| "required": false, | ||
| "description": "" | ||
| }, | ||
| { | ||
| "name": "classes", | ||
| "type": "string", | ||
| "required": false, | ||
| "description": "Classes to add to the pagination." | ||
| }, | ||
| { | ||
| "name": "attributes", | ||
| "type": "object", | ||
| "required": false, | ||
| "description": "HTML attributes (for example data attributes) to add to the pagination." | ||
| } | ||
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| {% macro tnaPagination(params) %} | ||
| {%- include "nationalarchives/components/pagination/template.njk" -%} | ||
| {% endmacro %} |
85 changes: 85 additions & 0 deletions
85
src/nationalarchives/components/pagination/pagination.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| @use "../../tools/colour"; | ||
| @use "../../tools/typography"; | ||
| @use "../../utilities"; | ||
|
|
||
| .tna-pagination { | ||
| display: flex; | ||
| gap: 1rem; | ||
| align-items: center; | ||
| justify-content: center; | ||
| flex-wrap: wrap; | ||
|
|
||
| &__prev { | ||
| } | ||
|
|
||
| &__next { | ||
| } | ||
|
|
||
| &__link { | ||
| min-width: 2rem; | ||
| padding: 0.5rem; | ||
|
|
||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
|
|
||
| position: relative; | ||
| } | ||
|
|
||
| &__icon { | ||
| display: inline-block; | ||
|
|
||
| &--prev { | ||
| margin-right: 0.5rem; | ||
| } | ||
|
|
||
| &--next { | ||
| margin-left: 0.5rem; | ||
| } | ||
| } | ||
|
|
||
| &__link-title { | ||
| @include typography.main-font-weight-bold; | ||
| } | ||
|
|
||
| &__list { | ||
| margin: 0; | ||
| padding: 0; | ||
|
|
||
| display: flex; | ||
| align-items: center; | ||
|
|
||
| list-style: none; | ||
| } | ||
|
|
||
| &__item { | ||
| &--ellipses { | ||
| min-width: 2rem; | ||
| padding: 0.5rem; | ||
|
|
||
| text-align: center; | ||
| } | ||
|
|
||
| &--current { | ||
| @include colour.accent; | ||
| } | ||
| } | ||
|
|
||
| &__prev &__link, | ||
| &__next &__link, | ||
| &__item:not(&__item--current) &__link { | ||
| &:hover { | ||
| @include colour.tint-background; | ||
| } | ||
| } | ||
|
|
||
| @include colour.on-high-contrast { | ||
| &__link { | ||
| @include colour.colour-border("keyline-dark", 1px); | ||
| } | ||
|
|
||
| &__list { | ||
| gap: 0.25rem; | ||
| } | ||
| } | ||
| } |
72 changes: 72 additions & 0 deletions
72
src/nationalarchives/components/pagination/pagination.stories.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import Pagination from "./template.njk"; | ||
| import macroOptions from "./macro-options.json"; | ||
|
|
||
| const argTypes = { | ||
| previous: { control: "object" }, | ||
| items: { control: "object" }, | ||
| next: { control: "object" }, | ||
| classes: { control: "text" }, | ||
| attributes: { control: "object" }, | ||
| }; | ||
|
|
||
| Object.keys(argTypes).forEach((argType) => { | ||
| argTypes[argType].description = macroOptions.find( | ||
| (option) => option.name === argType, | ||
| )?.description; | ||
| }); | ||
|
|
||
| export default { | ||
| title: "Components/Pagination", | ||
| argTypes, | ||
| }; | ||
|
|
||
| const Template = ({ previous, items, next, classes, attributes }) => | ||
| Pagination({ | ||
| params: { | ||
| previous, | ||
| items, | ||
| next, | ||
| classes, | ||
| attributes, | ||
| }, | ||
| }); | ||
|
|
||
| export const Standard = Template.bind({}); | ||
| Standard.args = { | ||
| previous: { | ||
| href: "#", | ||
| }, | ||
| items: [ | ||
| { | ||
| number: 1, | ||
| href: "#", | ||
| }, | ||
| { | ||
| ellipsis: true, | ||
| }, | ||
| { | ||
| number: 6, | ||
| href: "#", | ||
| }, | ||
| { | ||
| number: 7, | ||
| current: true, | ||
| href: "#", | ||
| }, | ||
| { | ||
| number: 8, | ||
| href: "#", | ||
| }, | ||
| { | ||
| ellipsis: true, | ||
| }, | ||
| { | ||
| number: 42, | ||
| href: "#", | ||
| }, | ||
| ], | ||
| next: { | ||
| href: "#", | ||
| }, | ||
| classes: "tna-pagination--demo", | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| {%- set containerClasses = [params.classes] if params.classes else [] -%} | ||
| <nav class="tna-pagination {{ containerClasses | join(' ') }}" role="navigation" aria-label="{{ params.landmarkLabel if params.landmarkLabel else 'Results' }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}> | ||
| {% if params.previous -%} | ||
| <div class="tna-pagination__prev"> | ||
| <a class="tna-pagination__link" href="{{ params.previous.href }}" rel="prev"> | ||
| <svg class="tna-pagination__icon tna-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13"> | ||
| <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path> | ||
| </svg> | ||
| <span class="tna-pagination__link-title"> | ||
| {{ params.previous.text if params.previous.text else 'Previous' }} | ||
| </span> | ||
| </a> | ||
| </div> | ||
| {% endif -%} | ||
| <ul class="tna-pagination__list"> | ||
| {% for item in params.items -%} | ||
| {% if item.ellipsis -%} | ||
| <li class="tna-pagination__item tna-pagination__item--ellipses">⋯</li> | ||
| {% else -%} | ||
| <li class="tna-pagination__item{{ ' tna-pagination__item--current' if item.current }}"> | ||
| <a class="tna-pagination__link" href="{{ item.href }}" aria-label="{{ item.label }}"> | ||
| {{ item.number }} | ||
| </a> | ||
| </li> | ||
| {% endif -%} | ||
| {% endfor -%} | ||
| </ul> | ||
| {% if params.next -%} | ||
| <div class="tna-pagination__next"> | ||
| <a class="tna-pagination__link" href="{{ params.next.href }}" rel="next"> | ||
| <span class="tna-pagination__link-title">{{ params.next.text if params.next.text else 'Next' }}</span> | ||
| <svg class="tna-pagination__icon tna-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13"> | ||
| <path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path> | ||
| </svg> | ||
| </a> | ||
| </div> | ||
| {% endif -%} | ||
| </nav> |
Oops, something went wrong.