diff --git a/src/nationalarchives/components/filters/filters.scss b/src/nationalarchives/components/filters/filters.scss index 8ed59635..f0c2c192 100644 --- a/src/nationalarchives/components/filters/filters.scss +++ b/src/nationalarchives/components/filters/filters.scss @@ -12,15 +12,6 @@ &__item { } - &__item--selected #{&}__link { - &, - &:link, - &:visited, - &:hover { - @include colour.accent; - } - } - &__link { padding: 0.125rem 0.75rem; @@ -40,4 +31,13 @@ @include colour.accent-light; } } + + &__item--selected &__link { + &, + &:link, + &:visited, + &:hover { + @include colour.accent; + } + } } diff --git a/src/nationalarchives/components/global-header/fixtures.json b/src/nationalarchives/components/global-header/fixtures.json index cd4891ff..f188bd0e 100644 --- a/src/nationalarchives/components/global-header/fixtures.json +++ b/src/nationalarchives/components/global-header/fixtures.json @@ -39,7 +39,7 @@ } ] }, - "html": "
The National Archives
", + "html": "
The National Archives
", "hidden": false } ] diff --git a/src/nationalarchives/components/global-header/global-header.scss b/src/nationalarchives/components/global-header/global-header.scss index e502d63c..d19f8aaf 100644 --- a/src/nationalarchives/components/global-header/global-header.scss +++ b/src/nationalarchives/components/global-header/global-header.scss @@ -216,47 +216,51 @@ } } - @include media.on-smaller-than-large { - &__navigation, - &__navigation-item, + @include media.on-medium { &__navigation-item-link { - height: auto; + @include typography.relative-font-size(16); } - &__navigation-item-link { - padding-top: 0.375rem; - padding-bottom: 0.375rem; + &--collapse-on-medium &__navigation-wrapper { + width: 100%; + } - line-height: inherit; + &--collapse-on-medium &__top-navigation-wrapper { + flex: 1; + order: 2; } - } - @include media.on-medium { - &__main { + &--collapse-on-medium &__main { padding-bottom: 1rem; } - &__logo { + &--collapse-on-medium &__logo { gap: 0.75rem; } - &__logo-wrapper { + &--collapse-on-medium &__logo-wrapper { margin-top: 0.5rem; margin-bottom: 0.5rem; } - .tna-logo { + &--collapse-on-medium .tna-logo { width: 5rem; height: 5rem; } - // &__logo-strapline { + // &--collapse-on-medium &__logo-strapline { // line-height: math.div(5rem, 3); // } - &__navigation { + &--collapse-on-medium &__navigation { margin-bottom: 0.5rem; } + + &--collapse-on-medium &__navigation, + &--collapse-on-medium &__navigation-item, + &--collapse-on-medium &__navigation-item-link { + height: auto; + } } @include media.on-mobile { @@ -279,8 +283,13 @@ align-items: center; } - &__navigation { + &__navigation, + &__navigation-item, + &__navigation-item-link { height: auto; + } + + &__navigation { margin-top: 0; columns: 1; diff --git a/src/nationalarchives/components/global-header/global-header.stories.js b/src/nationalarchives/components/global-header/global-header.stories.js index 62149500..896437d5 100644 --- a/src/nationalarchives/components/global-header/global-header.stories.js +++ b/src/nationalarchives/components/global-header/global-header.stories.js @@ -7,6 +7,7 @@ const argTypes = { logo: { control: "object" }, topNavigation: { control: "object" }, navigation: { control: "object" }, + collapseOnMedium: { control: "boolean" }, classes: { control: "text" }, attributes: { control: "object" }, }; @@ -25,12 +26,20 @@ export default { }, }; -const Template = ({ logo, topNavigation, navigation, classes, attributes }) => +const Template = ({ + logo, + topNavigation, + navigation, + collapseOnMedium, + classes, + attributes, +}) => Header({ params: { logo, topNavigation, navigation, + collapseOnMedium, classes, attributes, }, @@ -174,6 +183,67 @@ Medium.play = async ({ canvasElement }) => { await expect($navigationToggle).not.toBeVisible(); }; +export const MediumCollapsed = Template.bind({}); +MediumCollapsed.parameters = { + viewport: { + defaultViewport: "medium", + }, + chromatic: { + viewports: [customViewports["medium"].styles.width.replace(/px$/, "")], + }, +}; +MediumCollapsed.args = { + logo: { + strapline: "Design System", + href: "#/", + }, + topNavigation: [ + { + text: "Search", + href: "#/search", + icon: "search", + }, + { + text: "Shop", + href: "#/shop", + icon: "bag-shopping", + }, + { + text: "Sign in", + href: "#/sign-in", + icon: "user", + }, + ], + navigation: [ + { + text: "Visit", + href: "#/visit", + }, + { + text: "What's on", + href: "#/whats-on", + }, + { + text: "Explore the collection", + href: "#/explore-the-collection", + }, + { + text: "Using the archives", + href: "#/using-the-archives", + }, + { + text: "Learn", + href: "#/learn", + }, + { + text: "Professional guidance & services", + href: "#/professional-guidance-and-services", + }, + ], + collapseOnMedium: true, + classes: "tna-global-header--demo", +}; + export const Mobile = Template.bind({}); Mobile.parameters = { viewport: { diff --git a/src/nationalarchives/components/global-header/template.njk b/src/nationalarchives/components/global-header/template.njk index 16052370..0830bb62 100644 --- a/src/nationalarchives/components/global-header/template.njk +++ b/src/nationalarchives/components/global-header/template.njk @@ -1,4 +1,7 @@ {%- set containerClasses = [params.classes] if params.classes else [] -%} +{%- if params.collapseOnMedium -%} + {%- set containerClasses = containerClasses.concat('tna-global-header--collapse-on-medium') -%} +{%- endif -%}
@@ -30,7 +33,7 @@
{%- if params.navigation %} -