Skip to content

Commit

Permalink
Update hero component
Browse files Browse the repository at this point in the history
  • Loading branch information
ahosgood committed Oct 5, 2023
1 parent 1332a4f commit d6936c3
Show file tree
Hide file tree
Showing 7 changed files with 355 additions and 161 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- `typography.$base-font-size-px` is now `typography.$relative-1rem-px`
- `xl` and `l` headings are Supria Sans and `m` and `s` are Open Sans
- Card heading size defaults to `s`
- Markup and styles altered for hero component

### Deprecated
### Removed
Expand Down
91 changes: 85 additions & 6 deletions src/nationalarchives/components/hero/fixtures.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,93 @@
"name": "minimal",
"options": {
"heading": "Title",
"image": {
"src": "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
"alt": "The National Archives office",
"width": 1996,
"height": 1331
"imageSrc": "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
"imageAlt": "The National Archives office",
"imageWidth": 499,
"imageHeight": 333
},
"html": "<header class=\"tna-hero \"><figure class=\"tna-hero__figure\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" class=\"tna-hero__image\" width=\"499\" height=\"333\"><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading tna-heading--xl tna-hero__heading\">Title</h1></div></div></div></figure></header>",
"hidden": false
},
{
"name": "with body",
"options": {
"heading": "Title",
"body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
"imageSrc": "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
"imageAlt": "The National Archives office",
"imageWidth": 499,
"imageHeight": 333
},
"html": "<header class=\"tna-hero \"><figure class=\"tna-hero__figure\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" class=\"tna-hero__image\" width=\"499\" height=\"333\"><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading tna-heading--xl tna-hero__heading\">Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div></div></figure></header>",
"hidden": false
},
{
"name": "with text",
"options": {
"heading": "Title",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"imageSrc": "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
"imageAlt": "The National Archives office",
"imageWidth": 499,
"imageHeight": 333
},
"html": "<header class=\"tna-hero \"><figure class=\"tna-hero__figure\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" class=\"tna-hero__image\" width=\"499\" height=\"333\"><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading tna-heading--xl tna-hero__heading\">Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div></div></figure></header>",
"hidden": false
},
{
"name": "with caption",
"options": {
"heading": "Title",
"imageSrc": "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
"imageAlt": "The National Archives office",
"imageWidth": 499,
"imageHeight": 333,
"imageCaption": "An interesting photo by a famous photographer ©2023"
},
"html": "<header class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\"><span class=\"tna-hero__details-summary-icon\">I</span>nformation about this image</summary><div class=\"tna-hero__information\"><p>An interesting photo by a famous photographer ©2023</p></div></details></figcaption><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" class=\"tna-hero__image\" width=\"499\" height=\"333\"><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading tna-heading--xl tna-hero__heading\">Title</h1></div></div></div></figure></header>",
"hidden": false
},
{
"name": "image only",
"options": {
"imageSrc": "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
"imageAlt": "The National Archives office",
"imageWidth": 499,
"imageHeight": 333,
"imageCaption": "An interesting photo by a famous photographer ©2023"
},
"html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\"><span class=\"tna-hero__details-summary-icon\">I</span>nformation about this image</summary><div class=\"tna-hero__information\"><p>An interesting photo by a famous photographer ©2023</p></div></details></figcaption><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" class=\"tna-hero__image\" width=\"499\" height=\"333\"></figure></div>",
"hidden": false
},
{
"name": "with classes",
"options": {
"heading": "Title",
"imageSrc": "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
"imageAlt": "The National Archives office",
"imageWidth": 499,
"imageHeight": 333,
"imageCaption": "An interesting photo by a famous photographer ©2023",
"classes": "hero__test-class"
},
"html": "<header class=\"tna-hero hero__test-class\"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\"><span class=\"tna-hero__details-summary-icon\">I</span>nformation about this image</summary><div class=\"tna-hero__information\"><p>An interesting photo by a famous photographer ©2023</p></div></details></figcaption><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" class=\"tna-hero__image\" width=\"499\" height=\"333\"><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading tna-heading--xl tna-hero__heading\">Title</h1></div></div></div></figure></header>",
"hidden": false
},
{
"name": "with attributes",
"options": {
"heading": "Title",
"imageSrc": "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
"imageAlt": "The National Archives office",
"imageWidth": 499,
"imageHeight": 333,
"imageCaption": "An interesting photo by a famous photographer ©2023",
"attributes": {
"data-testattribute": "foobar"
}
},
"html": "<header class=\"tna-hero \"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" class=\"tna-hero__image\" width=\"1996\" height=\"1331\"><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading tna-heading--xl tna-hero__heading\">Title</h1></div></div></div></header>",
"html": "<header class=\"tna-hero \" data-testattribute=\"foobar\"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\"><span class=\"tna-hero__details-summary-icon\">I</span>nformation about this image</summary><div class=\"tna-hero__information\"><p>An interesting photo by a famous photographer ©2023</p></div></details></figcaption><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" class=\"tna-hero__image\" width=\"499\" height=\"333\"><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading tna-heading--xl tna-hero__heading\">Title</h1></div></div></div></figure></header>",
"hidden": false
}
]
Expand Down
184 changes: 121 additions & 63 deletions src/nationalarchives/components/hero/hero.scss
Original file line number Diff line number Diff line change
@@ -1,85 +1,139 @@
@use "../../tools/colour";
@use "../../tools/media";
@use "../../tools/typography";
@use "../../utilities";
@use "../grid";

.tna-hero {
min-height: min(35vw, 480px);
// margin-bottom: 2rem;
padding-top: 5rem;
padding-bottom: 3rem;
@include colour.invert-on-mobile;

display: flex;
align-items: flex-end;
&__figure {
min-height: min(35vw, 480px);
margin: 0;
padding-top: 8rem;
padding-bottom: 4rem;

position: relative;
display: flex;
align-items: flex-end;

@include colour.invert-on-mobile;
position: relative;
}

&__image {
&__caption {
width: 100%;
height: 100%;

position: absolute;
inset: 0;
z-index: 1;
right: 0;
bottom: 0;
z-index: 3;

object-fit: cover;
overflow: visible;
}

picture#{&}__image img {
&__details {
width: 100%;
height: 100%;

object-fit: cover;
overflow: visible;
}

&__image-details {
position: absolute;
right: 1.25rem;
bottom: 1.25rem;
z-index: 3;

@include colour.colour-font("font-base");
}
&__details-summary {
width: 1.5rem;
height: 1.5rem;

&__image-details-summary {
width: 2rem;
height: 2rem;

position: relative;
position: absolute;
right: 0.5rem;
bottom: 0.5rem;
z-index: 2;

font-size: 0;
text-align: center;
line-height: 2rem;
line-height: 1.5rem;
list-style: none;

background-color: #fc0;
@include colour.accent;

border-radius: 1rem;
@include colour.colour-border("background", 0.25rem);
border-radius: 100%;

cursor: pointer;

&:hover {
@include colour.colour-font("background");

@include colour.colour-background("font-base");
}
}

&__image-details-summary-icon {
&__details-summary-icon {
font-size: 1.25rem;
font-style: normal;
font-weight: 700;
text-transform: lowercase;
}

&__image-information {
width: 20rem;
max-width: 45vw;
padding: 0.5rem 1rem;
&__information {
width: 50rem;
max-width: 50vw;
padding: 0.5rem 3.25rem 0.5rem 1rem;

position: absolute;
right: 0;
bottom: 2.5rem;
bottom: 0;
z-index: 1;

background-color: #fc0;
@include colour.invert;

// @include typography.relative-font-size(16);
}

&__image {
width: 100%;
height: 100%;

position: absolute;
inset: 0;
z-index: 1;

object-fit: cover;
}

&__details[open] &__details-summary {
@include colour.invert;

&::before,
&::after {
width: 1.5rem;
height: 0.125rem;

display: block;

position: absolute;
top: 50%;
left: 50%;

@include colour.colour-background("font-dark");

content: "";
}

&::before {
transform: translate(-50%, -50%) rotate(45deg);
}

&::after {
transform: translate(-50%, -50%) rotate(-45deg);
}

&:hover {
&::before,
&::after {
height: 0.25rem;
}
}

&-icon {
font-size: 0;
}
}

&__inner {
Expand All @@ -91,47 +145,56 @@
}

&__content-inner {
padding: 2.5rem 1.5rem;
padding: 1.5rem;

@include colour.colour-background("page-background");
}

&__heading {
margin-bottom: 0;
// margin-bottom: 0;
}

&__body {
margin-top: 1.5rem;
}
// &__body {
// margin-top: 1.5rem;
// }

@include media.on-mobile {
padding: 0;
&__figure {
padding: 0;

display: block;
// display: block;
flex-direction: column;
}

&__image {
height: 320px;
&__caption {
position: relative;
order: 2;
}

position: static;
&__details {
}

&__image-details {
bottom: auto;
top: 1.25rem;
&__details-summary {
}

&__image-details-summary {
&__details-summary-icon {
}

&__image-details-summary-icon {
&__information {
width: auto;
max-width: none;

left: 0;
}

&__image-information {
top: 2.5rem;
bottom: auto;
&__image {
position: static;

order: 1;
}

&__inner {
order: 3;
}

&__content {
Expand All @@ -151,13 +214,8 @@
}
}

@include media.on-tiny {
&__image {
height: 240px;
}
}

@include colour.on-high-contrast {
&__information,
&__content-inner {
@include colour.colour-border("keyline-dark", 1px);

Expand Down
Loading

0 comments on commit d6936c3

Please sign in to comment.