-
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.
Add featured records component (#46)
- Loading branch information
Showing
12 changed files
with
276 additions
and
0 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 "featured-records"; |
95 changes: 95 additions & 0 deletions
95
src/nationalarchives/components/featured-records/featured-records.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,95 @@ | ||
| @use "../../tools/colour"; | ||
| @use "../../tools/media"; | ||
| @use "../../tools/spacing"; | ||
| @use "../../tools/typography"; | ||
| @use "../../variables/typography" as typographyVars; | ||
| @use "../../utilities"; | ||
|
|
||
| .tna-featured-records { | ||
| @include spacing.space-above; | ||
| margin-bottom: 0; | ||
| padding: 0; | ||
|
|
||
| list-style: none; | ||
|
|
||
| @include colour.colour-border("accent-background", 0.375rem, solid, top); | ||
|
|
||
| &__item { | ||
| padding: 2rem; | ||
|
|
||
| display: flex; | ||
| gap: 2rem; | ||
| justify-content: flex-start; | ||
| align-items: center; | ||
|
|
||
| @include colour.colour-border("keyline", 1px); | ||
| border-top-width: 0; | ||
| } | ||
|
|
||
| &__image { | ||
| width: 7rem; | ||
| height: auto; | ||
| } | ||
|
|
||
| &__details { | ||
| margin: 0; | ||
|
|
||
| flex: 1; | ||
| } | ||
|
|
||
| &__title-label, | ||
| &__date-label { | ||
| display: none; | ||
| } | ||
|
|
||
| &__collection-description, | ||
| &__title-description, | ||
| &__date-description { | ||
| width: 100%; | ||
| margin: 0; | ||
| } | ||
|
|
||
| &__collection-label, | ||
| &__collection-description { | ||
| display: inline-block; | ||
| } | ||
|
|
||
| &__collection-label { | ||
| &::after { | ||
| content: ":"; | ||
| } | ||
| } | ||
|
|
||
| &__collection-description { | ||
| } | ||
|
|
||
| &__title-label { | ||
| } | ||
|
|
||
| &__title-description { | ||
| padding-bottom: 0.25rem; | ||
|
|
||
| @include typography.detail-font; | ||
| font-weight: 700; | ||
| } | ||
|
|
||
| &__date-label { | ||
| } | ||
|
|
||
| &__date-description { | ||
| @include colour.colour-font("font-light"); | ||
| @include typography.relative-font-size( | ||
| typographyVars.$body-font-size-px * 0.85 | ||
| ); | ||
| } | ||
|
|
||
| @include media.on-tiny { | ||
| &__item { | ||
| padding: 1rem; | ||
|
|
||
| gap: 1rem; | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| } | ||
| } | ||
| } |
51 changes: 51 additions & 0 deletions
51
src/nationalarchives/components/featured-records/featured-records.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,51 @@ | ||
| import FeaturedRecords from "./template.njk"; | ||
| import macroOptions from "./macro-options.json"; | ||
|
|
||
| const argTypes = { | ||
| items: { 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/Featured records", | ||
| argTypes, | ||
| }; | ||
|
|
||
| const Template = ({ items, classes, attributes }) => | ||
| FeaturedRecords({ | ||
| params: { | ||
| items, | ||
| classes, | ||
| attributes, | ||
| }, | ||
| }); | ||
|
|
||
| export const Standard = Template.bind({}); | ||
| Standard.args = { | ||
| items: [ | ||
| { | ||
| imageSrc: | ||
| "https://beta.nationalarchives.gov.uk/media/images/wedderburn-trial.max-832x591.format-webp_i3c9pUH.webp", | ||
| imageWidth: 576, | ||
| imageHeight: 591, | ||
| collection: "TS 11/45/167", | ||
| title: "Court records relating to Robert Wedderburn's trial", | ||
| href: "#", | ||
| date: "1819–1820", | ||
| }, | ||
| { | ||
| collection: "HO 42/191", | ||
| title: "Home office letters", | ||
| href: "#", | ||
| date: "1819", | ||
| }, | ||
| ], | ||
| classes: "tna-featured-records--demo", | ||
| }; |
4 changes: 4 additions & 0 deletions
4
src/nationalarchives/components/featured-records/fixtures.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,4 @@ | ||
| { | ||
| "component": "featured-records", | ||
| "fixtures": [] | ||
| } |
70 changes: 70 additions & 0 deletions
70
src/nationalarchives/components/featured-records/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,70 @@ | ||
| [ | ||
| { | ||
| "name": "items", | ||
| "type": "array", | ||
| "required": true, | ||
| "description": "", | ||
| "params": [ | ||
| { | ||
| "name": "imageSrc", | ||
| "type": "string", | ||
| "required": false, | ||
| "description": "" | ||
| }, | ||
| { | ||
| "name": "imageAlt", | ||
| "type": "string", | ||
| "required": false, | ||
| "description": "" | ||
| }, | ||
| { | ||
| "name": "imageWidth", | ||
| "type": "number", | ||
| "required": false, | ||
| "description": "" | ||
| }, | ||
| { | ||
| "name": "imageHeight", | ||
| "type": "number", | ||
| "required": false, | ||
| "description": "" | ||
| }, | ||
| { | ||
| "name": "collection", | ||
| "type": "string", | ||
| "required": true, | ||
| "description": "" | ||
| }, | ||
| { | ||
| "name": "title", | ||
| "type": "string", | ||
| "required": true, | ||
| "description": "" | ||
| }, | ||
| { | ||
| "name": "href", | ||
| "type": "string", | ||
| "required": true, | ||
| "description": "" | ||
| }, | ||
| { | ||
| "name": "date", | ||
| "type": "string", | ||
| "required": false, | ||
| "description": "" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "name": "classes", | ||
| "type": "string", | ||
| "required": false, | ||
| "description": "Classes to add to the filters." | ||
| }, | ||
| { | ||
| "name": "attributes", | ||
| "type": "object", | ||
| "required": false, | ||
| "description": "HTML attributes (for example data attributes) to add to the filters." | ||
| } | ||
| ] |
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 tnaFeaturedRecords(params) %} | ||
| {%- include "nationalarchives/components/featured-records/template.njk" -%} | ||
| {% endmacro %} |
20 changes: 20 additions & 0 deletions
20
src/nationalarchives/components/featured-records/template.njk
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,20 @@ | ||
| {%- set containerClasses = [params.classes] if params.classes else [] -%} | ||
| <ul class="tna-featured-records {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}> | ||
| {%- for item in params.items %} | ||
| <li class="tna-featured-records__item"> | ||
| {%- if item.imageSrc %} | ||
| <img src="{{ item.imageSrc }}" width="{{ item.imageWidth }}" height="{{ item.imageHeight }}" class="tna-featured-records__image" alt="{{ item.imageAlt }}"> | ||
| {%- endif %} | ||
| <dl class="tna-featured-records__details"> | ||
| <dt class="tna-featured-records__collection-label tna-chip tna-chip--plain">From our collection</dt> | ||
| <dd class="tna-featured-records__collection-description tna-chip tna-chip--plain">{{ item.collection }}</dd> | ||
| <dt class="tna-featured-records__title-label">Title</dt> | ||
| <dd class="tna-featured-records__title-description"> | ||
| <a href="{{ item.href }}">{{ item.title }}</a> | ||
| </dd> | ||
| <dt class="tna-featured-records__date-label">Date</dt> | ||
| <dd class="tna-featured-records__date-description">{{ item.date }}</dd> | ||
| </dl> | ||
| </li> | ||
| {%- endfor %} | ||
| </ul> |
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