@nationalarchives/frontend 0.1.18-prerelease → 0.1.19-prerelease

package/nationalarchives/components/footer/footer.scss

@@ -0,0 +1,265 @@
+@use "../../tools/colour";
+@use "../../tools/typography";
+@use "../../tools/media";
+@use "../../utilities";
+@use "../../lib/font-awesome";
+@use "../button";
+@use "../grid";
+
+.tna-footer {
+  @include colour.invert;
+
+  padding-top: 1rem;
+  padding-bottom: 3rem;
+
+  // @include colour.colour-font("font-base");
+
+  // --link: colour.brand-colour("white");
+
+  @include colour.on-high-contrast {
+    @include colour.colour-border("keyline", 1px, solid, top);
+  }
+
+  .tna-logo {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+
+    &__background {
+      fill: transparent;
+    }
+
+    &__foreground {
+      fill: currentColor;
+    }
+  }
+
+  &__title {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  &__address {
+    font-style: normal;
+  }
+
+  &__meta {
+    margin-top: 1rem;
+
+    @include typography.relative-font-size(16);
+  }
+
+  &__social {
+    margin-top: 2rem;
+
+    &-items {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+      align-items: flex-start;
+    }
+
+    &-item {
+      &-link {
+        min-width: calc(2rem + 4px);
+        padding: 4px;
+
+        display: block;
+
+        text-align: center;
+        line-height: 1;
+
+        border: 0 transparent solid;
+        border-width: 4px 0;
+
+        .fa-solid,
+        .fa-brands {
+          font-size: 2rem;
+        }
+
+        &-text {
+        }
+
+        &:has(.fa-solid),
+        &:has(.fa-brands) {
+          &:hover {
+            @include colour.colour-border("link", 4px, solid, bottom);
+          }
+        }
+      }
+    }
+  }
+
+  &__mailing-list {
+    margin-top: 2rem;
+    padding: 1rem;
+
+    @include typography.relative-font-size(16);
+
+    @include colour.colour-border("keyline-dark", 1px, dashed);
+
+    // background: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23fff' stroke-width='2' stroke-dasharray='4%2c 8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e") rgba(colour.brand-colour("white"), 0.1);
+    // background-color: rgba(colour.brand-colour("white"), 0.1);
+    background-color: rgba(#fff, 0.1);
+  }
+
+  &__navigation {
+    &-block {
+      padding-top: 2rem;
+
+      &-heading {
+      }
+
+      &-items {
+      }
+
+      &-item {
+        padding-top: 0.375rem;
+        padding-bottom: 0.375rem;
+
+        @include colour.colour-border("keyline", 1px, solid, bottom);
+
+        &-link {
+          text-decoration: none;
+
+          &:hover {
+            @include typography.interacted-text-decoration;
+          }
+
+          &-icon {
+            width: 0.825rem;
+            height: 0.825rem;
+            margin-right: 0.125rem;
+            margin-left: 0.5rem;
+
+            display: inline-block;
+
+            position: relative;
+
+            vertical-align: middle;
+
+            font-size: 0;
+
+            border: 1px var(--link) solid;
+
+            &::before {
+              position: absolute;
+              top: -0.25rem;
+              right: -0.25rem;
+              z-index: 2;
+
+              border: 0.25rem transparent solid;
+              border-top-color: var(--link);
+              border-right-color: var(--link);
+
+              content: "";
+            }
+
+            &::after {
+              width: 4px;
+              height: 13px;
+
+              position: absolute;
+              top: -0.125rem;
+              right: -0.125rem;
+              z-index: 1;
+
+              background-color: var(--link);
+
+              outline: 3px transparent solid;
+              @include colour.colour-outline("contrast-background");
+
+              transform: rotate(45deg) translateX(50%);
+              transform-origin: 100% 0;
+
+              content: "";
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &__legal {
+    padding-top: 3rem;
+
+    @include typography.relative-font-size(16);
+
+    &-items {
+      margin-bottom: 0;
+
+      text-align: center;
+
+      @include media.on-tiny {
+        text-align: inherit;
+      }
+    }
+
+    &-item {
+      padding: 0.5rem;
+
+      display: inline-block;
+
+      @include media.on-tiny {
+        display: block;
+      }
+
+      &-link {
+      }
+    }
+  }
+
+  hr {
+    margin-top: 1.5rem;
+    margin-bottom: 1rem;
+  }
+
+  &__licence {
+    @include typography.relative-font-size(16);
+
+    &.tna-container {
+      align-items: center;
+    }
+
+    .tna-column {
+      margin-top: 0.5rem;
+    }
+  }
+
+  &__licence-logo {
+    display: block;
+  }
+
+  &__govuk {
+    text-align: center;
+
+    &-link {
+      display: inline-block;
+    }
+
+    &-logotype-crown {
+      margin: 0 auto;
+      display: block;
+    }
+  }
+
+  @include media.on-mobile {
+    padding-top: 0;
+    padding-bottom: 2rem;
+  }
+
+  @include colour.on-high-contrast {
+    &__navigation {
+      &-block {
+        &-items {
+          @include colour.colour-border("keyline-dark", 0.25rem, solid, top);
+        }
+      }
+    }
+
+    &__mailing-list {
+      background-color: transparent;
+
+      @include colour.colour-border("keyline-dark", 1px, solid);
+    }
+  }
+}

package/nationalarchives/components/footer/footer.stories.js

@@ -50,32 +50,32 @@ Standard.args = {
     {
       text: "Twitter",
       href: "#",
-      image: "./images/footer/twitter.svg",
+      brandIcon: "twitter",
     },
     {
       text: "YouTube",
       href: "#",
-      image: "./images/footer/youtube.svg",
+      brandIcon: "youtube",
     },
     {
       text: "Facebook",
       href: "#",
-      image: "./images/footer/facebook.svg",
+      brandIcon: "facebook",
     },
     {
       text: "Flickr",
       href: "#",
-      image: "./images/footer/flickr.svg",
+      brandIcon: "flickr",
     },
     {
       text: "Instagram",
       href: "#",
-      image: "./images/footer/instagram.svg",
+      brandIcon: "instagram",
     },
     {
       text: "RSS",
       href: "#",
-      image: "./images/footer/rss.svg",
+      icon: "rss",
     },
   ],
   navigation: [

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

@@ -24,7 +24,13 @@
         "description": ""
       },
       {
-        "name": "image",
+        "name": "icon",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "brandIcon",
         "type": "string",
         "required": true,
         "description": ""

package/nationalarchives/components/footer/template.njk

@@ -25,8 +25,12 @@
           {%- for item in params.social -%}
             <li class="tna-footer__social-item">
               <a href="{{ item.href }}" class="tna-footer__social-item-link" {%- if item.title %}title="{{ item.title }}"{% endif %}>
-                {%- if item.image -%}
-                <img class="tna-footer__social-item-link-image" src="{{ item.image }}" alt="{{ item.text }} logo" width="32" height="32" />
+                {%- if item.brandIcon or item.icon -%}
+                  {%- if item.brandIcon -%}
+                  <i class="fa-brands fa-{{ item.brandIcon }}"></i>
+                  {%- else -%}
+                  <i class="fa-solid fa-{{ item.icon }}"></i>
+                  {%- endif -%}
                 <span class="tna-footer__social-item-link-text tna-visually-hidden">
                   {{ item.text }}
                 </span>
@@ -54,10 +58,9 @@
           <li class="tna-footer__navigation-block-item">
             <a href="{{ item.href }}" class="tna-footer__navigation-block-item-link"{%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.newTab %} target="_blank"{% endif %}>
               {{ item.text }}
-              {%- if item.newTab -%}
-              <span class="tna-footer__navigation-block-item-link-icon"></span>
-              <span class="tna-visually-hidden">(opens in new tab)</span>
-              {%- endif -%}
+              {%- if item.newTab %}
+              <span class="tna-footer__navigation-block-item-link-icon">(opens in new tab)</span>
+              {% endif -%}
             </a>
           </li>
         {%- endfor -%}
@@ -76,6 +79,7 @@
           Subscribe for regular news, updates and priority booking for events.
         </p>
         <a href="#" class="tna-button tna-button--accent" role="button">
+          <i class="fa-solid fa-envelope"></i>
           Subscribe
         </a>
       </div>

package/nationalarchives/components/gallery/_index.scss

@@ -0,0 +1 @@
+@use "gallery";

package/nationalarchives/components/gallery/fixtures.json

@@ -0,0 +1,4 @@
+{
+  "component": "gallery",
+  "fixtures": []
+}