Skip to content

Commit

Permalink
Add hero cards option
Browse files Browse the repository at this point in the history
  • Loading branch information
@ahosgood
ahosgood committed Sep 21, 2023
1 parent 70d3cd1 commit 5b26fa3
Show file tree
Hide file tree
Showing 5 changed files with 159 additions and 21 deletions.
94 changes: 88 additions & 6 deletions src/nationalarchives/components/card/card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@
.tna-card {
@include spacing.space-below;

position: relative;
z-index: 1;

&__inner {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -114,11 +117,15 @@
}

&--contrast {
@include colour.invert;
.tna-card__inner {
@include colour.invert;
}
}

&--accent {
@include colour.accent;
.tna-card__inner {
@include colour.accent;
}

.tna-hgroup__supertitle {
@include colour.invert;
Expand All @@ -127,6 +134,18 @@
}
}

&--contrast#{&}--hero {
.tna-card__inner {
@include colour.invert;
}
}

&--accent#{&}--hero {
.tna-card__inner {
@include colour.accent;
}
}

&--horizontal {
position: relative;

Expand Down Expand Up @@ -176,8 +195,73 @@
}
}

&:not(#{&}--horizontal) {
@include colour.on-high-contrast {
&--hero {
padding-left: #{math.div(100%, 3)};

position: relative;

&::before {
width: 100%;
height: 25vw;
max-height: 20rem;

display: block;

content: "";
}

.tna-card__inner {
padding: 2rem;

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

.tna-card__image-container {
height: auto;
margin-bottom: 0;
padding-bottom: 0;

display: block;

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

.tna-card__heading,
.tna-card__body,
.tna-card__actions {
margin-right: 0;
margin-left: 0;
}

@include media.on-small {
padding-left: 25%;
}

@include media.on-tiny {
padding-left: 0;

&::before {
display: none;
}

.tna-card__inner {
padding: 0;
}

.tna-card__image-container {
margin-bottom: 2rem;
padding-bottom: 50%;

position: relative;
z-index: 1;
}
}
}

@include colour.on-high-contrast {
&:not(#{&}--horizontal) {
.tna-card__inner {
padding-bottom: 1rem;
}
Expand All @@ -189,9 +273,7 @@
margin-left: 1rem;
}
}
}

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

&__meta {
Expand Down
42 changes: 34 additions & 8 deletions src/nationalarchives/components/card/card.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const argTypes = {
body: { control: "text" },
text: { control: "text" },
actions: { control: "object" },
horizontal: { control: "boolean" },
layout: { control: "inline-radio", options: ["none", "horizontal", "hero"] },
style: { control: "inline-radio", options: ["none", "boxed", "accent"] },
htmlElement: { control: "text" },
classes: { control: "text" },
Expand Down Expand Up @@ -53,7 +53,7 @@ const Template = ({
body,
text,
actions,
horizontal,
layout,
style,
htmlElement,
classes,
Expand All @@ -76,7 +76,7 @@ const Template = ({
body,
text,
actions,
horizontal,
layout,
style,
htmlElement,
classes,
Expand Down Expand Up @@ -199,7 +199,7 @@ Horizontal.args = {
icon: "calendar",
},
],
horizontal: true,
layout: "horizontal",
htmlElement: "article",
classes: "tna-card--demo",
};
Expand All @@ -225,7 +225,7 @@ HorizontalBoxed.args = {
icon: "calendar",
},
],
horizontal: true,
layout: "horizontal",
style: "boxed",
htmlElement: "article",
classes: "tna-card--demo",
Expand All @@ -252,12 +252,36 @@ HorizontalAccent.args = {
icon: "calendar",
},
],
horizontal: true,
layout: "horizontal",
style: "accent",
htmlElement: "article",
classes: "tna-card--demo",
};

export const Hero = Template.bind({});
Hero.args = {
supertitle: "Card supertitle",
title: "Card title",
headingLevel: 3,
headingSize: "l",
href: "#",
imageSrc:
"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
imageAlt: "The National Archives office",
imageWidth: 1996,
imageHeight: 1331,
label: "New",
meta: [
{ text: "24th September 2023", icon: "calendar" },
{ text: "From £16", icon: "ticket" },
{ text: "Online", icon: "location-dot" },
],
body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
layout: "hero",
htmlElement: "article",
// classes: "tna-card--demo",
};

export const Sources = Template.bind({});
Sources.args = {
supertitle: "Card supertitle",
Expand Down Expand Up @@ -305,7 +329,8 @@ const GridTemplate = ({
body,
text,
actions,
horizontal,
layout,
style,
htmlElement,
classes,
attributes,
Expand All @@ -330,7 +355,8 @@ const GridTemplate = ({
body,
text,
actions,
horizontal,
layout,
style,
htmlElement,
classes,
attributes,
Expand Down
6 changes: 3 additions & 3 deletions src/nationalarchives/components/card/macro-options.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,10 +169,10 @@
]
},
{
"name": "horizontal",
"type": "boolean",
"name": "layout",
"type": "string",
"required": false,
"description": "Change the card to a horizontal layout, placing the image to the left of the content. This layout changes back to vertical on smaller devices."
"description": "Change the card layout to either a horizontal layout, placing the image to the left of the content or a hero layout for use at the top of pages. These layouts could change back to vertical on smaller devices."
},
{
"name": "style",
Expand Down
4 changes: 3 additions & 1 deletion src/nationalarchives/components/card/template.njk
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
{%- set htmlElement = params.htmlElement if params.htmlElement else 'div' -%}
{%- set containerClasses = [params.classes] if params.classes else [] -%}
{%- if params.horizontal -%}
{%- if params.layout == "horizontal" -%}
{%- set containerClasses = containerClasses.concat('tna-card--horizontal') -%}
{%- elseif params.layout == "hero" -%}
{%- set containerClasses = containerClasses.concat('tna-card--hero') -%}
{%- endif -%}
{%- if params.style == "boxed" -%}
{%- set containerClasses = containerClasses.concat('tna-card--contrast') -%}
Expand Down
34 changes: 31 additions & 3 deletions src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -429,7 +429,7 @@ const Template = ({ theme, accent }) => {
${Card({
params: {
...cardDefaultOptions,
horizontal: true,
layout: "horizontal",
classes: "tna-!--margin-bottom-m",
},
})}
Expand All @@ -438,7 +438,7 @@ const Template = ({ theme, accent }) => {
${Card({
params: {
...cardDefaultOptions,
horizontal: true,
layout: "horizontal",
style: "boxed",
classes: "tna-!--margin-bottom-m",
},
Expand All @@ -448,13 +448,41 @@ const Template = ({ theme, accent }) => {
${Card({
params: {
...cardDefaultOptions,
horizontal: true,
layout: "horizontal",
style: "accent",
},
})}
</div>
</div>
<hr>
<div class="tna-container tna-section">
<div class="tna-column tna-column--full">
${Card({
params: {
supertitle: "Card supertitle",
title: "Card title",
headingLevel: 3,
headingSize: "l",
href: "#",
imageSrc:
"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
imageAlt: "The National Archives office",
imageWidth: 1996,
imageHeight: 1331,
label: "New",
meta: [
{ text: "24th September 2023", icon: "calendar" },
{ text: "From £16", icon: "ticket" },
{ text: "Online", icon: "location-dot" },
],
body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
layout: "hero",
htmlElement: "article",
},
})}
</div>
</div>
<hr>
<div class="tna-container tna-section">
<div class="tna-column tna-column--full">
${Tabs({
Expand Down

0 comments on commit 5b26fa3

Please sign in to comment.