Skip to content

Commit

Permalink
Don't always collapse global menu on medium
Browse files Browse the repository at this point in the history
  • Loading branch information
@ahosgood
ahosgood committed Feb 12, 2024
1 parent 3d6f10e commit b9348ee
Show file tree
Hide file tree
Showing 5 changed files with 112 additions and 30 deletions.
18 changes: 9 additions & 9 deletions src/nationalarchives/components/filters/filters.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,6 @@
&__item {
}

&__item--selected #{&}__link {
&,
&:link,
&:visited,
&:hover {
@include colour.accent;
}
}

&__link {
padding: 0.125rem 0.75rem;

Expand All @@ -40,4 +31,13 @@
@include colour.accent-light;
}
}

&__item--selected &__link {
&,
&:link,
&:visited,
&:hover {
@include colour.accent;
}
}
}
2 changes: 1 addition & 1 deletion src/nationalarchives/components/global-header/fixtures.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
}
]
},
"html": "<header class=\"tna-global-header \" data-module=\"tna-global-header\"><div class=\"tna-container tna-global-header__main\"><div class=\"tna-column tna-column--flex-1 tna-column--order-2\"><span class=\"tna-global-header__logo-wrapper\"><a href=\"#/\" class=\"tna-global-header__logo\" title=\"The National Archives - Beta\"><svg xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" class=\"tna-logo\" style=\"enable-background:new 0 0 160 160\" viewBox=\"0 0 160 160\" width=\"96\" height=\"96\"><title>The National Archives</title><path fill=\"transparent\" d=\"M0 0h160v160H0z\" class=\"tna-logo__background\" /><g class=\"tna-logo__foreground\" fill=\"currentColor\"><path d=\"M1.9 107.2h156.3V158H1.9v-50.8zm0-52.7h156.3v50.8H1.9V54.5zm0-52.6h77.2v50.8H1.9V1.9zm79 0h77.2v50.8H80.9V1.9zm0-1.9H0v160h160V0H80.9z\" /><path d=\"M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z\" /></g></svg></a></span></div><div class=\"tna-column tna-column--order-2 tna-global-header__navigation-button-wrapper\"><!-- BUTTON ADDED BY JAVASCRIPT --></div><nav class=\"tna-column tna-column--full-medium tna-column--full-small tna-column--full-tiny tna-column--order-3 tna-global-header__navigation-wrapper\" aria-label=\"Main site navigation\"><ul class=\"tna-global-header__navigation\"><li class=\"tna-global-header__navigation-item\"><a href=\"#/alpha\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Alpha</a></li><li class=\"tna-global-header__navigation-item\"><a href=\"#/beta\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Beta</a></li><li class=\"tna-global-header__navigation-item\"><a href=\"#/gamma\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Gamma</a></li></ul></nav><nav class=\"tna-column tna-column--full tna-column--order-1 tna-column--flex-1-medium tna-column--order-2-medium tna-column--order-4-small tna-column--order-4-tiny tna-global-header__top-navigation-wrapper\" aria-label=\"Secondary site navigation\"><ul class=\"tna-global-header__top-navigation\"><li class=\"tna-global-header__top-navigation-item\"><a href=\"#/top-1\" class=\"tna-global-header__top-navigation-link\" tabindex=\"0\">Top item 1</a></li><li class=\"tna-global-header__top-navigation-item\"><a href=\"#/top-2\" class=\"tna-global-header__top-navigation-link\" tabindex=\"0\"><i class=\"fa-solid fa-phone\"></i>Top item 2</a></li><li class=\"tna-global-header__top-navigation-item\"><a href=\"#/top-3\" class=\"tna-global-header__top-navigation-link\" tabindex=\"0\"><i class=\"fa-brands fa-github\"></i>Top item 3</a></li></ul></nav></div></header>",
"html": "<header class=\"tna-global-header \" data-module=\"tna-global-header\"><div class=\"tna-container tna-global-header__main\"><div class=\"tna-column tna-column--flex-1 tna-column--order-2\"><span class=\"tna-global-header__logo-wrapper\"><a href=\"#/\" class=\"tna-global-header__logo\" title=\"The National Archives - Beta\"><svg xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" class=\"tna-logo\" style=\"enable-background:new 0 0 160 160\" viewBox=\"0 0 160 160\" width=\"96\" height=\"96\"><title>The National Archives</title><path fill=\"transparent\" d=\"M0 0h160v160H0z\" class=\"tna-logo__background\" /><g class=\"tna-logo__foreground\" fill=\"currentColor\"><path d=\"M1.9 107.2h156.3V158H1.9v-50.8zm0-52.7h156.3v50.8H1.9V54.5zm0-52.6h77.2v50.8H1.9V1.9zm79 0h77.2v50.8H80.9V1.9zm0-1.9H0v160h160V0H80.9z\" /><path d=\"M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z\" /></g></svg></a></span></div><div class=\"tna-column tna-column--order-2 tna-global-header__navigation-button-wrapper\"><!-- BUTTON ADDED BY JAVASCRIPT --></div><nav class=\"tna-column tna-column--full-small tna-column--full-tiny tna-column--order-3 tna-global-header__navigation-wrapper\" aria-label=\"Main site navigation\"><ul class=\"tna-global-header__navigation\"><li class=\"tna-global-header__navigation-item\"><a href=\"#/alpha\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Alpha</a></li><li class=\"tna-global-header__navigation-item\"><a href=\"#/beta\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Beta</a></li><li class=\"tna-global-header__navigation-item\"><a href=\"#/gamma\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Gamma</a></li></ul></nav><nav class=\"tna-column tna-column--full tna-column--order-1 tna-column--order-4-small tna-column--order-4-tiny tna-global-header__top-navigation-wrapper\" aria-label=\"Secondary site navigation\"><ul class=\"tna-global-header__top-navigation\"><li class=\"tna-global-header__top-navigation-item\"><a href=\"#/top-1\" class=\"tna-global-header__top-navigation-link\" tabindex=\"0\">Top item 1</a></li><li class=\"tna-global-header__top-navigation-item\"><a href=\"#/top-2\" class=\"tna-global-header__top-navigation-link\" tabindex=\"0\"><i class=\"fa-solid fa-phone\"></i>Top item 2</a></li><li class=\"tna-global-header__top-navigation-item\"><a href=\"#/top-3\" class=\"tna-global-header__top-navigation-link\" tabindex=\"0\"><i class=\"fa-brands fa-github\"></i>Top item 3</a></li></ul></nav></div></header>",
"hidden": false
}
]
Expand Down
43 changes: 26 additions & 17 deletions src/nationalarchives/components/global-header/global-header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -279,8 +283,13 @@
align-items: center;
}

&__navigation {
&__navigation,
&__navigation-item,
&__navigation-item-link {
height: auto;
}

&__navigation {
margin-top: 0;

columns: 1;
Expand Down
72 changes: 71 additions & 1 deletion src/nationalarchives/components/global-header/global-header.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const argTypes = {
logo: { control: "object" },
topNavigation: { control: "object" },
navigation: { control: "object" },
collapseOnMedium: { control: "boolean" },
classes: { control: "text" },
attributes: { control: "object" },
};
Expand All @@ -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,
},
Expand Down Expand Up @@ -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: {
Expand Down
7 changes: 5 additions & 2 deletions src/nationalarchives/components/global-header/template.njk
View file
Original file line number Diff line number Diff line change
@@ -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 -%}
<header class="tna-global-header {{ containerClasses | join(' ') }}" data-module="tna-global-header"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
<div class="tna-container tna-global-header__main">
<div class="tna-column tna-column--flex-1 tna-column--order-2">
Expand Down Expand Up @@ -30,7 +33,7 @@
<!-- BUTTON ADDED BY JAVASCRIPT -->
</div>
{%- if params.navigation %}
<nav class="tna-column tna-column--full-medium tna-column--full-small tna-column--full-tiny tna-column--order-3 tna-global-header__navigation-wrapper" aria-label="Main site navigation">
<nav class="tna-column tna-column--full-small tna-column--full-tiny tna-column--order-3 tna-global-header__navigation-wrapper" aria-label="Main site navigation">
<ul class="tna-global-header__navigation">
{%- for item in params.navigation %}
<li class="tna-global-header__navigation-item">
Expand All @@ -41,7 +44,7 @@
</nav>
{%- endif %}
{%- if params.topNavigation %}
<nav class="tna-column tna-column--full tna-column--order-1 tna-column--flex-1-medium tna-column--order-2-medium tna-column--order-4-small tna-column--order-4-tiny tna-global-header__top-navigation-wrapper" aria-label="Secondary site navigation">
<nav class="tna-column tna-column--full tna-column--order-1 tna-column--order-4-small tna-column--order-4-tiny tna-global-header__top-navigation-wrapper" aria-label="Secondary site navigation">
<ul class="tna-global-header__top-navigation">
{%- for item in params.topNavigation %}
<li class="tna-global-header__top-navigation-item">
Expand Down

0 comments on commit b9348ee

Please sign in to comment.