@nationalarchives/frontend 0.1.64 → 0.2.0

package/nationalarchives/components/gallery/gallery.scss

@@ -1,116 +1,377 @@
+@use "../../tools/a11y";
 @use "../../tools/colour";
 @use "../../tools/media";
 @use "../../tools/spacing";
+@use "../../tools/typography";
 
 .tna-gallery {
-  @include colour.contrast;
+  min-height: 100dvh;
+  max-height: 200dvh;
 
-  padding-bottom: spacing.space(2);
+  display: grid;
+  grid-template: min-content min-content 1fr / 2fr 1fr;
+  gap: 0 spacing.space(1);
+
+  @include colour.tint;
+
+  border-radius: 0.1px;
+
+  &:active {
+    @include a11y.no-active-outline;
+  }
 
   &__header {
-    padding-top: spacing.space(2);
+    padding: spacing.space(1);
+
+    grid-column: 1 / 3;
+    grid-row: 1;
+
+    display: flex;
+    gap: spacing.space(2);
+  }
+
+  &__header-inner {
+    flex: 1;
+  }
+
+  &__options {
+    margin-top: 0;
+
+    align-items: flex-start;
+
+    justify-content: flex-end;
+
+    flex: 1;
+
+    .tna-button {
+      white-space: nowrap;
+    }
+  }
+
+  &__items,
+  &__navigation-buttons {
+    grid-column: 1 / 3;
+    grid-row: 2;
   }
 
   &__items {
-    width: 100%;
+    position: relative;
+    z-index: 1;
 
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: spacing.space(3);
+    border-radius: 0.1px;
 
-    &:focus {
-      outline: none !important;
+    .tna-template--clicked &:focus {
+      outline: none;
     }
   }
 
   &__item {
-    margin: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: center;
+  }
 
-    &-index {
-      padding-bottom: spacing.space(1);
+  &__item-header {
+    padding: spacing.space(1);
 
-      text-align: center;
-    }
+    line-height: 1;
+    text-align: center;
+
+    @include typography.main-font-weight-bold;
+    @include typography.font-size(16);
+  }
+
+  &__item-figure {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: spacing.space(1);
+  }
+
+  &__item-figure-inner {
+    width: 100%;
+    max-height: 50vh;
+
+    position: relative;
+
+    @include colour.contrast;
+  }
+
+  &__item-image {
+    margin: 0 auto;
+  }
+
+  &__item-description {
+    margin: 0 spacing.space(1) spacing.space(1);
+    padding: spacing.space(0.5) spacing.space(1);
+
+    align-self: flex-start;
+
+    @include colour.thick-keyline-dark(left);
+  }
+
+  &__navigation-buttons {
+    width: 100%;
+    max-height: 50vh;
+    aspect-ratio: 3 / 2;
+
+    position: relative;
+    top: 3rem;
+    z-index: 2;
 
-    &-figure {
+    pointer-events: none;
+
+    .tna-template--touched & {
+      display: none;
     }
+  }
+
+  &__navigation-button {
+    width: 25%;
+    padding: 0;
+
+    position: absolute;
+    top: 0;
+    bottom: 0;
+
+    border: none;
+
+    opacity: 0;
 
-    &-image {
-      height: auto;
+    cursor: pointer;
+    pointer-events: auto;
+
+    @include colour.colour-font("base-dark");
+
+    @include colour.tint;
+
+    svg {
+      height: 5vw;
       margin: 0 auto;
+
+      display: block;
+
+      fill: currentColor;
     }
 
-    &-description {
-      margin-top: spacing.space(1);
-      padding: spacing.space(0.5) 0 spacing.space(0.5) spacing.space(1);
+    &:hover,
+    &:focus {
+      opacity: 1;
+    }
+  }
+
+  &__navigation-prev {
+    padding-right: 10%;
+
+    left: 0;
+
+    background: linear-gradient(
+      90deg,
+      var(--background) 15%,
+      rgb(0 0 0 / 0%) 100%
+    );
+  }
+
+  &__navigation-next {
+    padding-left: 10%;
+
+    right: 0;
+
+    background: linear-gradient(
+      270deg,
+      var(--background) 15%,
+      rgb(0 0 0 / 0%) 100%
+    );
+  }
+
+  &__navigation {
+    padding: spacing.space(1);
+
+    grid-column: 1 / 3;
+    grid-row: 3;
+
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-auto-rows: min-content;
+    gap: spacing.space(1);
+
+    overflow: auto;
+  }
+
+  &__navigation-item {
+    min-width: 0;
+    min-height: 0;
+    aspect-ratio: 1;
 
-      @include colour.colour-border("keyline-dark", 4px, solid, left);
+    position: relative;
+
+    border: none;
+
+    cursor: pointer;
+
+    @include colour.contrast;
+
+    &:hover {
+      &::after {
+        content: "";
+
+        position: absolute;
+        inset: 0;
+        z-index: 2;
+
+        @include colour.thick-keyline-accent;
+      }
     }
 
-    &-tabs {
-      @include media.on-smaller-than-large {
-        padding-top: spacing.space(2);
+    &[aria-selected="true"] {
+      @include colour.accent;
+
+      &::after {
+        content: "";
+
+        position: absolute;
+        inset: 0;
+        z-index: 2;
+
+        @include colour.thick-keyline-brand("", "black");
       }
     }
   }
 
-  &__item + &__item {
-    @include colour.colour-border("keyline", 1px, solid, top);
+  &__navigation-item-image {
+    width: 100%;
+    height: 100%;
+
+    position: absolute;
+    inset: 0;
+    object-fit: cover;
   }
 
-  &__toggle-wrapper {
-    text-align: center;
+  &__navigation-item-label {
+    padding: spacing.space(0.25) spacing.space(0.75);
+
+    display: inline-block;
+
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    z-index: 4;
+
+    @include colour.colour-font("font-dark");
+    @include typography.font-size(36);
+    @include typography.main-font-weight-bold;
+    text-transform: capitalize;
+
+    @include colour.colour-background("background");
   }
 
-  &__toggle {
-    margin-top: spacing.space(2);
+  &--js &__item-figure-inner {
+    aspect-ratio: 3 / 2;
   }
 
-  &--touchable {
-    .tna-gallery__items {
-      flex-flow: row nowrap;
+  &--js &__item-image {
+    width: 100%;
+    height: 100%;
 
-      gap: spacing.space(6);
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    object-fit: contain;
+  }
 
-      overflow-x: scroll;
-      scroll-snap-type: x mandatory;
+  @include media.on-medium {
+    &__navigation {
+      grid-template-columns: repeat(4, 1fr);
     }
 
-    .tna-gallery__item {
-      width: 100%;
+    &__navigation-item-label {
+      @include typography.font-size(30);
+    }
+  }
 
-      scroll-snap-align: center;
-      flex: none;
+  @include media.on-mobile {
+    &__navigation {
+      grid-template-columns: repeat(3, 1fr);
     }
+  }
 
-    &.tna-gallery--collapsed {
-      .tna-gallery__items {
-        overflow: auto;
-      }
+  @include media.on-tiny {
+    &__options {
+      align-items: flex-end;
+      justify-content: flex-start;
     }
+
+    &__navigation-item-label {
+      @include typography.font-size(24);
+    }
+  }
+
+  &--fullscreen {
+    max-height: 100dvh;
   }
 
-  &--collapsed &__item + &__item,
-  &--collapsed &__item:first-child &__item-description,
-  &--collapsed &__item:first-child &__item-tabs {
+  &--fullscreen &__header-inner {
     display: none;
   }
 
-  &--collapsed &__item-figure {
-    width: 100%;
+  &--fullscreen &__item-description {
+    max-height: 4.5rem;
+
+    overflow: auto;
   }
 
-  @include colour.on-high-contrast {
-    &__items {
+  // @media (display-mode: fullscreen) and (aspect-ratio >= 1/1), (display-mode: fullscreen) and (orientation: landscape) {
+  @media (aspect-ratio >= 1/1) {
+    &--fullscreen &__header {
+      grid-column: 2 / 3;
+      // padding-bottom: spacing.space(0.5);
     }
 
-    &__item {
-      &-index {
+    &--fullscreen &__options {
+      .tna-button[value="show-index"] {
+        display: none;
       }
+    }
 
-      &-description {
-      }
+    &--fullscreen &__items,
+    &--fullscreen &__navigation-buttons {
+      grid-column: 1 / 2;
+      grid-row: 1 / 4;
+    }
+
+    &--fullscreen &__item {
+      height: 100%;
+    }
+
+    &--fullscreen &__item-header {
+      // padding-top: spacing.space(0.5);
+      // padding-bottom: spacing.space(0.5);
+    }
+
+    &--fullscreen &__item-figure {
+      flex: 1;
+    }
+
+    &--fullscreen &__item-figure-inner,
+    &--fullscreen &__navigation-buttons {
+      max-height: none;
+      flex: 1;
+
+      aspect-ratio: auto;
+    }
+
+    &--fullscreen &__navigation {
+      // padding-top: spacing.space(0.5);
+      padding-top: 0;
+      padding-left: 0;
+
+      grid-column: 2 / 3;
+      grid-row: 2 / 4;
+
+      // grid-template-columns: repeat(3, minmax(8rem, 1fr));
+      grid-template-columns: repeat(3, 1fr);
+      gap: spacing.space(0.5);
     }
   }
 }

package/nationalarchives/components/gallery/macro-options.json

@@ -1,29 +1,34 @@
 [
   {
-    "name": "heading",
-    "type": "object",
+    "name": "title",
+    "type": "string",
     "required": true,
-    "description": "",
-    "params": [
-      {
-        "name": "title",
-        "type": "string",
-        "required": true,
-        "description": ""
-      },
-      {
-        "name": "level",
-        "type": "number",
-        "required": true,
-        "description": ""
-      },
-      {
-        "name": "size",
-        "type": "string",
-        "required": false,
-        "description": ""
-      }
-    ]
+    "description": "The main title of the gallery."
+  },
+  {
+    "name": "headingLevel",
+    "type": "number",
+    "required": true,
+    "description": "The heading level which represents an element from `<h1>` through to `<h6>`."
+  },
+  {
+    "name": "headingSize",
+    "type": "string",
+    "required": false,
+    "default": "m",
+    "description": "The physical size of the gallery title (`xl`, `l`, `m` or `s`)."
+  },
+  {
+    "name": "body",
+    "type": "string",
+    "required": false,
+    "description": "The HTML for the main body of the gallery. Not displayed if `text` is set."
+  },
+  {
+    "name": "text",
+    "type": "string",
+    "required": false,
+    "description": "The text for the gallery which will be inserted into a `<p>` element. Overwrites `body` if it is set."
   },
   {
     "name": "items",
@@ -60,35 +65,15 @@
         "type": "string",
         "required": false,
         "description": ""
-      },
-      {
-        "name": "tabs",
-        "type": "array",
-        "required": true,
-        "description": "",
-        "params": [
-          {
-            "name": "id",
-            "type": "string",
-            "required": true,
-            "description": ""
-          },
-          {
-            "name": "title",
-            "type": "string",
-            "required": true,
-            "description": ""
-          },
-          {
-            "name": "body",
-            "type": "string",
-            "required": true,
-            "description": ""
-          }
-        ]
       }
     ]
   },
+  {
+    "name": "id",
+    "type": "string",
+    "required": true,
+    "description": "A unique ID for the gallery."
+  },
   {
     "name": "classes",
     "type": "string",

package/nationalarchives/components/gallery/template.njk

@@ -1,46 +1,87 @@
-{% from "nationalarchives/components/tabs/macro.njk" import tnaTabs %}
+{% from "nationalarchives/components/button/macro.njk" import tnaButton %}
 
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
 {%- set classes = containerClasses | join(' ') -%}
-<{{ 'section' if params.heading else 'div' }} class="tna-gallery{% if classes %} {{ classes }}{% endif %}" data-module="tna-gallery"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  {%- if params.heading -%}
-  <div class="tna-container">
-    <div class="tna-column tna-column--full tna-gallery__header">
-      <h{{ params.heading.level }} class="tna-heading-{{ params.heading.size or 'l' }}">
-        {{ params.heading.title }}
-      </h{{ params.heading.level }}>
+<section class="tna-gallery{% if classes %} {{ classes }}{% endif %}" data-module="tna-gallery"{% for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
+  <div class="tna-gallery__header">
+    <div class="tna-gallery__header-inner">
+      <h{{ params.headingLevel }} class="tna-heading-{{ params.headingSize or 'm' }}">
+        {{ params.title }}
+      </h{{ params.headingLevel }}>
+      {%- if params.text %}
+        <p>{{ params.text }}</p>
+      {%- else %}
+        {{ params.body | safe }}
+      {%- endif %}
+    </div>
+    <div class="tna-gallery__options tna-button-group tna-button-group--small" hidden>
+      {{ tnaButton({
+        text: "See all images",
+        iconSvg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M128 136c0-22.1-17.9-40-40-40L40 96C17.9 96 0 113.9 0 136l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40l0-48zm0 192c0-22.1-17.9-40-40-40H40c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40H88c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM288 328c0-22.1-17.9-40-40-40H200c-22.1 0-40 17.9-40 40l0 48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328zm32-192v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V136c0-22.1-17.9-40-40-40l-48 0c-22.1 0-40 17.9-40 40zM448 328c0-22.1-17.9-40-40-40H360c-22.1 0-40 17.9-40 40v48c0 22.1 17.9 40 40 40h48c22.1 0 40-17.9 40-40V328z"/></svg>',
+        iconOnlyOnMobile: true,
+        buttonElement: true,
+        attributes: {
+          hidden: "",
+          value: "show-index"
+        }
+      }) | indent(6) }}
+      {{ tnaButton({
+        text: "Full screen",
+        iconSvg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z"/></svg>',
+        iconOnlyOnMobile: true,
+        buttonElement: true,
+        attributes: {
+          hidden: "",
+          value: "enter-fullscreen"
+        }
+      }) | indent(6) }}
+      {{ tnaButton({
+        text: "Exit full screen",
+        iconSvg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z"/></svg>',
+        iconOnlyOnMobile: true,
+        buttonElement: true,
+        attributes: {
+          hidden: "",
+          value: "exit-fullscreen"
+        }
+      }) | indent(6) }}
     </div>
   </div>
-  {%- endif -%}
   <div class="tna-gallery__items">
-    {%- for item in params.items -%}
-    <div class="tna-gallery__item tna-container">
-      <div class="tna-column tna-column--full tna-gallery__header">
-        <p class="tna-gallery__item-index">Image {{ loop.index }} of {{ params.items|length }}</p>
-      </div>
-      <figure class="tna-gallery__item-figure tna-column {{ 'tna-column--width-2-3 tna-column--full-medium tna-column--full-small tna-column--full-tiny' if item.tabs else 'tna-column--full' }}">
-        <img src="{{ item.src }}" class="tna-gallery__item-image" alt="{{ item.alt }}" width="{{ item.width }}" height="{{ item.height }}">
-        {%- if item.description -%}
+    {%- for item in params.items %}
+    <div class="tna-gallery__item" id="{{ params.id }}-item-{{ loop.index }}" aria-labelledby="{{ params.id }}-item-{{ loop.index }}-tab" role="tabpanel">
+      <p class="tna-gallery__item-header">Image {{ loop.index }} of {{ params.items | length }}</p>
+      <figure class="tna-gallery__item-figure">
+        <div class="tna-gallery__item-figure-inner">
+          <img src="{{ item.src }}" class="tna-gallery__item-image" alt="{{ item.alt }}" width="{{ item.width }}" height="{{ item.height }}">
+        </div>
+        {%- if item.description %}
         <figcaption class="tna-gallery__item-description">
           <p>{{ item.description }}</p>
         </figcaption>
-        {%- endif -%}
+        {%- endif %}
       </figure>
-      {%- if item.tabs -%}
-      <div class="tna-gallery__item-tabs tna-column tna-column--width-1-3 tna-column--full-medium tna-column--full-small tna-column--full-tiny">
-        {%- if item.tabs|length > 1 -%}
-        {{ tnaTabs({
-          items: item.tabs
-        }) }}
-        {%- else -%}
-        <h{{ params.heading.level + 1 }} class="tna-heading-m">
-          {{ item.tabs[0].title }}
-        </h{{ params.heading.level + 1 }}>
-        {{ item.tabs[0].body|safe }}
-        {%- endif -%}
-      </div>
-      {%- endif -%}
     </div>
+    {%- endfor %}
+  </div>
+  <div class="tna-gallery__navigation-buttons" hidden>
+    <button type="button" class="tna-gallery__navigation-button tna-gallery__navigation-prev" aria-label="Previous image">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" aria-hidden="true"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>
+      <span class="tna-visually-hidden">Show previous image</span>
+    </button>
+    <button type="button" class="tna-gallery__navigation-button tna-gallery__navigation-next" aria-label="Next image">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" aria-hidden="true"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>
+      <span class="tna-visually-hidden">Show next image</span>
+    </button>
+  </div>
+  <div class="tna-gallery__navigation" role="tablist" hidden>
+    {%- for item in params.items -%}
+    <button type="button" class="tna-gallery__navigation-item" role="tab" id="{{ params.id }}-item-{{ loop.index }}-tab" aria-label="Photo {{ loop.index }} of {{ params.items | length }}" aria-controls="{{ params.id }}-item-{{ loop.index }}">
+      <img src="{{ item.src }}" class="tna-gallery__navigation-item-image" alt="" width="{{ item.width }}" height="{{ item.height }}">
+      <span class="tna-visually-hidden">Image</span>
+      <span class="tna-gallery__navigation-item-label">{{ loop.index }}</span>
+      <span class="tna-visually-hidden"> of {{ params.items | length }}</span>
+    </button>
     {%- endfor -%}
   </div>
-</{{ 'section' if params.heading else 'div' }}>
+</section>