@nationalarchives/frontend 0.1.17-prerelease → 0.1.19-prerelease

package/nationalarchives/components/header/header.scss

@@ -0,0 +1,594 @@
+@use "sass:math";
+@use "../../variables/colour" as colourVars; // TODO
+@use "../../variables/grid" as gridVars;
+@use "../../tools/colour";
+@use "../../tools/typography";
+@use "../../tools/media";
+@use "../../utilities";
+@use "../grid";
+
+// TODO: Only for the header component at the moment - remove on redesign
+@mixin uninvert {
+  @include colour.colour-css-vars;
+
+  .tna-template--system-theme & {
+    @include colour.colour-css-vars;
+
+    @media (prefers-color-scheme: dark) {
+      @include colour.colour-css-vars-dark;
+    }
+
+    @media (prefers-contrast: more) {
+      @include colour.colour-css-vars-high-contrast;
+    }
+
+    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
+      @include colour.colour-css-vars-high-contrast-dark;
+    }
+  }
+
+  .tna-template--light-theme & {
+    @include colour.colour-css-vars;
+  }
+
+  .tna-template--dark-theme & {
+    @include colour.colour-css-vars-dark;
+  }
+
+  .tna-template--high-contrast-theme & {
+    @include colour.colour-css-vars-high-contrast;
+  }
+
+  .tna-template--high-contrast-theme.tna-template--dark-theme & {
+    @include colour.colour-css-vars-high-contrast-dark;
+  }
+}
+
+.tna-header {
+  @include colour.invert;
+
+  color: colour.brand-colour("white");
+
+  background-color: colour.brand-colour("black");
+
+  &__exit {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+
+    text-align: right;
+
+    background-color: colourVars.$dark-grey;
+  }
+
+  &__exit-link {
+    text-decoration: none;
+    @include typography.relative-font-size(16);
+
+    &,
+    &:link,
+    &:visited {
+      color: #fff;
+    }
+
+    &:hover {
+      text-decoration: underline;
+
+      // .tna-header__exit-link-icon {
+      //   border-color: colour.$tna-yellow;
+
+      //   &::before {
+      //     border-top-color: colour.$tna-yellow;
+      //     border-right-color: colour.$tna-yellow;
+      //   }
+
+      //   &::after {
+      //     background-color: colour.$tna-yellow;
+      //   }
+      // }
+    }
+  }
+
+  &__exit-link-icon {
+    width: 0.825rem;
+    height: 0.825rem;
+    margin-right: 0.125rem;
+    margin-left: 0.5rem;
+
+    display: inline-block;
+
+    position: relative;
+
+    vertical-align: middle;
+
+    border: 0.125rem #fff solid;
+
+    &::before {
+      position: absolute;
+      top: -0.25rem;
+      right: -0.25rem;
+      z-index: 2;
+
+      border: 0.25rem transparent solid;
+      border-top-color: #fff;
+      border-right-color: #fff;
+
+      content: "";
+    }
+
+    &::after {
+      width: 0.25rem;
+      height: 0.825rem;
+
+      position: absolute;
+      top: -0.125rem;
+      right: -0.125rem;
+      z-index: 1;
+
+      background-color: #fff;
+
+      outline: 0.2rem colourVars.$dark-grey solid;
+
+      transform: rotate(45deg) translateX(50%);
+      transform-origin: 100% 0;
+
+      content: "";
+    }
+  }
+
+  &__contents {
+    &.tna-container {
+      justify-content: space-between;
+    }
+  }
+
+  &__logo {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+
+  &__logo-link {
+    display: flex;
+    align-items: flex-end;
+
+    color: inherit;
+    text-decoration: none;
+
+    &,
+    &:link,
+    &:visited {
+      color: inherit;
+    }
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    // &--href {
+    //   &:hover {
+    //       outline: 0.375rem #fff solid;
+    //       outline-offset: 1px;
+
+    //     // .tna-logo__background {
+    //     //   fill: #fff;
+    //     // }
+
+    //     // .tna-logo__foreground {
+    //     //   fill: #000;
+    //     // }
+    //   }
+    // }
+  }
+
+  .tna-logo {
+    width: 6rem;
+    height: 6rem;
+
+    display: inline-block;
+  }
+
+  &__logo-link--href:hover .tna-logo {
+    outline: 0.375rem #fff solid;
+    outline-offset: 1px;
+  }
+
+  &__logo-link--href:active .tna-logo,
+  &__logo-link--href:focus .tna-logo {
+    outline: none;
+  }
+
+  .tna-logo__foreground {
+    fill: #fff;
+  }
+
+  .tna-logo__background {
+    fill: none;
+  }
+
+  &__logo-strapline {
+    margin: 0 0.75rem;
+
+    display: inline-block;
+
+    line-height: 2.125;
+    text-transform: uppercase;
+  }
+
+  &__navigation-toggle {
+    align-self: center;
+  }
+
+  &__hamburger {
+    width: 2rem;
+    height: 0.25rem;
+
+    display: block;
+
+    background-color: #fff;
+
+    transition: height 1ms 200ms;
+
+    &::before,
+    &::after {
+      height: 0.25rem;
+
+      display: block;
+
+      position: absolute;
+      right: 0;
+      left: 0;
+
+      background-color: inherit;
+
+      transition:
+        top 200ms 200ms,
+        bottom 200ms 200ms,
+        transform 200ms;
+
+      content: "";
+    }
+
+    &::before {
+      top: 0;
+    }
+
+    &::after {
+      bottom: 0;
+    }
+  }
+
+  &__navigation-toggle-button {
+    height: 2rem;
+    padding: 0;
+
+    display: block;
+
+    position: relative;
+
+    appearance: none;
+
+    font-size: 0;
+
+    background: none;
+
+    border: 0 transparent solid;
+    border-width: 0.25rem 0;
+
+    cursor: pointer;
+
+    &--opened {
+      .tna-header__hamburger {
+        height: 0;
+
+        &::before,
+        &::after {
+          transition:
+            top 200ms,
+            bottom 200ms,
+            transform 200ms 200ms;
+        }
+
+        &::before {
+          top: 0.625rem;
+
+          transform: rotate(-135deg);
+        }
+
+        &::after {
+          bottom: 0.625rem;
+
+          transform: rotate(135deg);
+        }
+      }
+    }
+  }
+
+  &--yellow,
+  &--pink,
+  &--orange,
+  &--green,
+  &--blue {
+    color: colour.brand-colour("black");
+
+    .tna-header__logo-link {
+      &:hover {
+        .tna-logo {
+          outline-color: #000;
+        }
+      }
+    }
+
+    .tna-logo__foreground {
+      fill: #000;
+    }
+
+    .tna-header__hamburger {
+      background-color: colour.brand-colour("black");
+    }
+  }
+
+  &--yellow {
+    background-color: colour.brand-colour("yellow");
+  }
+
+  &--pink {
+    background-color: colour.brand-colour("pink");
+  }
+
+  &--orange {
+    background-color: colour.brand-colour("orange");
+  }
+
+  &--green {
+    background-color: colour.brand-colour("green");
+  }
+
+  &--blue {
+    background-color: colour.brand-colour("blue");
+  }
+
+  &__navigation {
+    display: flex;
+    flex-direction: column-reverse;
+    justify-content: space-between;
+    align-items: flex-end;
+  }
+
+  &__top-navigation-items {
+    margin: 0;
+    padding: 1.25rem 0;
+
+    // order: 1;
+
+    list-style: none;
+
+    line-height: 1;
+  }
+
+  &__top-navigation-item {
+    margin-left: 1.5rem;
+
+    display: inline-block;
+  }
+
+  &__top-navigation-item-link {
+    display: inline-block;
+
+    text-decoration: none;
+    @include typography.relative-font-size(16);
+
+    &,
+    &:link,
+    &:visited {
+      color: inherit;
+    }
+
+    &:hover,
+    &--selected {
+      &,
+      &:link,
+      &:visited {
+        @include typography.interacted-text-decoration;
+      }
+    }
+  }
+
+  &__navigation-items {
+    margin: 0;
+    padding: 0;
+
+    // order: 2;
+
+    list-style: none;
+
+    white-space: nowrap;
+  }
+
+  &__navigation-item {
+    margin-left: 0.75rem;
+
+    display: inline-block;
+  }
+
+  &__navigation-item-link {
+    padding: 0.5rem 1rem;
+
+    display: inline-block;
+
+    @include typography.heading-font;
+    text-decoration: none;
+    line-height: 2;
+
+    // transition:
+    //   color 200ms,
+    //   background-color 200ms;
+
+    &,
+    &:link,
+    &:visited {
+      color: inherit;
+    }
+
+    &:hover,
+    &--selected {
+      text-decoration: none;
+
+      &,
+      &:link,
+      &:visited {
+        @include uninvert;
+        @include colour.colour-font("font-dark");
+        @include colour.colour-background("page-background");
+      }
+      // transition:
+      //   color 50ms,
+      //   background-color 50ms;
+    }
+  }
+
+  @include media.on-larger-than-mobile {
+    .tna-header__navigation-toggle {
+      display: none;
+    }
+  }
+
+  @include media.on-mobile {
+    &__contents {
+      &.tna-container {
+        padding-right: 0;
+        padding-left: 0;
+      }
+    }
+
+    &__logo {
+      padding-top: 1rem;
+      padding-bottom: 1rem;
+
+      &.tna-column {
+        padding-right: gridVars.$gutter-width-mobile;
+        padding-left: gridVars.$gutter-width-mobile;
+      }
+    }
+
+    .tna-logo {
+      width: 4.5rem;
+      height: 4.5rem;
+    }
+
+    &__logo-strapline {
+      line-height: 1.55;
+    }
+
+    &__navigation-toggle {
+      &.tna-column {
+        padding-right: gridVars.$gutter-width-mobile;
+        padding-left: 0;
+      }
+    }
+
+    &__navigation {
+      @include uninvert;
+      @include colour.colour-font("font-base");
+      @include typography.relative-font-size(20);
+
+      align-items: stretch;
+      flex-direction: column;
+
+      &.tna-column {
+        padding-right: 0;
+        padding-left: 0;
+      }
+
+      .tna-template--js-enabled & {
+        display: none;
+
+        &--open {
+          display: flex;
+        }
+      }
+    }
+
+    &__top-navigation-items {
+      padding: 0.5rem 1rem;
+
+      // text-align: center;
+
+      @include colour.colour-background("page-background");
+
+      @include colour.colour-border("keyline", 1px, solid, bottom);
+    }
+
+    &__top-navigation-item {
+      margin: 0;
+      padding: 0.5rem;
+    }
+
+    &__top-navigation-item-link {
+    }
+
+    &__navigation-items {
+      width: 100%;
+
+      @include colour.colour-background("page-background");
+    }
+
+    &__navigation-item {
+      margin: 0;
+
+      display: block;
+
+      @include colour.colour-border("keyline", 1px, solid, bottom);
+    }
+
+    &__navigation-item-link {
+      padding-right: gridVars.$gutter-width-mobile;
+      padding-left: gridVars.$gutter-width-mobile + 1rem;
+
+      display: block;
+
+      position: relative;
+
+      line-height: #{math.div(1, 1.125) * 2};
+
+      &::after {
+        width: 0;
+
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+
+        @include colour.colour-background("font-dark");
+
+        // transition: width 200ms;
+
+        content: "";
+      }
+
+      &:hover {
+        &::after {
+          width: 0.25rem;
+
+          // transition: width 50ms;
+        }
+      }
+
+      &--selected {
+        &::after,
+        &:hover::after {
+          width: 0.5rem;
+        }
+      }
+    }
+  }
+
+  @include media.on-tiny {
+    .tna-logo {
+      width: 3.5rem;
+      height: 3.5rem;
+    }
+
+    &__logo-strapline {
+      line-height: 1.25;
+    }
+  }
+}

package/nationalarchives/components/header/header.stories.js

@@ -2,7 +2,7 @@ import Header from "./template.njk";
 import macroOptions from "./macro-options.json";
 import { expect } from "@storybook/jest";
 import { within, userEvent } from "@storybook/testing-library";
-import { MINIMAL_VIEWPORTS } from "@storybook/addon-viewport";
+import { customViewports } from "../../../../.storybook/viewports";
 
 const argTypes = {
   logo: { control: "object" },
@@ -99,10 +99,10 @@ Standard.args = {
 export const Desktop = Template.bind({});
 Desktop.parameters = {
   viewport: {
-    defaultViewport: "tablet",
+    defaultViewport: "medium",
   },
   chromatic: {
-    viewports: [MINIMAL_VIEWPORTS["tablet"].styles.width.replace(/px$/, "")],
+    viewports: [customViewports["medium"].styles.width.replace(/px$/, "")],
   },
 };
 Desktop.args = {
@@ -140,10 +140,10 @@ Desktop.play = async ({ canvasElement }) => {
 export const Mobile = Template.bind({});
 Mobile.parameters = {
   viewport: {
-    defaultViewport: "mobile2",
+    defaultViewport: "small",
   },
   chromatic: {
-    viewports: [MINIMAL_VIEWPORTS["mobile2"].styles.width.replace(/px$/, "")],
+    viewports: [customViewports["small"].styles.width.replace(/px$/, "")],
   },
 };
 Mobile.args = {