@nationalarchives/frontend 0.1.18-prerelease → 0.1.20-prerelease

package/nationalarchives/components/button/button.scss

@@ -0,0 +1,103 @@
+@use "sass:math";
+@use "../../tools/colour";
+@use "../../tools/media";
+@use "../../tools/typography";
+@use "../../lib/font-awesome";
+@use "../../utilities";
+@import "button-group";
+
+.tna-button {
+  padding: 0.25rem 1rem;
+
+  display: inline-block;
+
+  @include typography.relative-font-size(18);
+  @include typography.main-font-weight-bold;
+  text-decoration: none;
+  text-align: center;
+  line-height: #{math.div(16, 18) * 2};
+
+  @include colour.colour-background("button-background");
+
+  @include colour.colour-border("button-background", 0.25rem);
+
+  transition:
+    color 200ms,
+    background-color 200ms,
+    border-color 200ms;
+
+  cursor: pointer;
+
+  &,
+  &:link,
+  &:visited {
+    @include colour.colour-font("button-text");
+  }
+
+  &:hover {
+    @include colour.colour-font("button-hover-text");
+    text-decoration: none;
+
+    background: transparent;
+
+    transition:
+      color 50ms,
+      background-color 50ms,
+      border-color 50ms;
+  }
+
+  &--plain {
+    @include typography.main-font-weight;
+
+    background-color: transparent;
+
+    border-color: transparent;
+
+    &,
+    &:link,
+    &:visited {
+      @include colour.colour-font("link");
+    }
+
+    &:hover {
+      @include typography.interacted-text-decoration;
+    }
+  }
+
+  &--small {
+    padding: 0.125rem 0.5rem;
+
+    @include typography.relative-font-size(14);
+  }
+
+  &--accent {
+    @include colour.colour-background("button-accent-background");
+
+    @include colour.colour-border("button-accent-background");
+
+    &,
+    &:link,
+    &:visited {
+      @include colour.colour-font("button-accent-text");
+    }
+
+    &:hover {
+      @include colour.colour-font("font-dark");
+    }
+  }
+
+  &--solid-hover,
+  .tna-background--accent &,
+  .tna-background--accent-light & {
+    &:hover {
+      @include colour.colour-background("page-background");
+    }
+  }
+
+  .fa,
+  .fa-regular,
+  .fa-solid,
+  .fa-brands {
+    margin-right: 0.5rem;
+  }
+}

package/nationalarchives/components/button/button.stories.js

@@ -8,6 +8,9 @@ const argTypes = {
   icon: { control: "text" },
   brandIcon: { control: "text" },
   accent: { control: "boolean" },
+  small: { control: "boolean" },
+  plain: { control: "boolean" },
+  buttonElement: { control: "boolean" },
   classes: { control: "text" },
   attributes: { control: "object" },
 };
@@ -30,6 +33,9 @@ const Template = ({
   icon,
   brandIcon,
   accent,
+  small,
+  plain,
+  buttonElement,
   classes,
   attributes,
 }) =>
@@ -41,6 +47,9 @@ const Template = ({
       icon,
       brandIcon,
       accent,
+      small,
+      plain,
+      buttonElement,
       classes,
       attributes,
     },
@@ -69,6 +78,15 @@ Icon.args = {
   classes: "tna-button--demo",
 };
 
+export const SmallIcon = Template.bind({});
+SmallIcon.args = {
+  text: "Explore the collection",
+  href: "#",
+  icon: "map-location-dot",
+  small: true,
+  classes: "tna-button--demo",
+};
+
 export const BrandIcon = Template.bind({});
 BrandIcon.args = {
   text: "Twitter",
@@ -77,6 +95,39 @@ BrandIcon.args = {
   classes: "tna-button--demo",
 };
 
+export const Small = Template.bind({});
+Small.args = {
+  text: "Small button",
+  href: "#",
+  small: true,
+  classes: "tna-button--demo",
+};
+
+export const Plain = Template.bind({});
+Plain.args = {
+  text: "Plain button",
+  href: "#",
+  plain: true,
+  classes: "tna-button--demo",
+};
+
+export const SmallPlain = Template.bind({});
+SmallPlain.args = {
+  text: "Plain small button",
+  href: "#",
+  small: true,
+  plain: true,
+  classes: "tna-button--demo",
+};
+
+export const ButtonElement = Template.bind({});
+ButtonElement.args = {
+  text: "Button element",
+  href: "#",
+  buttonElement: true,
+  classes: "tna-button--demo",
+};
+
 const GroupTemplate = ({ buttons }) =>
   `<div class="tna-button-group">
     ${buttons.map((button) => Template(button)).join("")}
@@ -102,5 +153,15 @@ Group.args = {
       icon: "phone",
       classes: "tna-button--demo",
     },
+    {
+      text: "Button",
+      buttonElement: true,
+      classes: "tna-button--demo",
+    },
+    {
+      text: "Plain",
+      plain: true,
+      classes: "tna-button--demo",
+    },
   ],
 };

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

@@ -8,7 +8,7 @@
   {
     "name": "href",
     "type": "string",
-    "required": true,
+    "required": false,
     "description": ""
   },
   {
@@ -35,6 +35,24 @@
     "required": false,
     "description": ""
   },
+  {
+    "name": "small",
+    "type": "boolean",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "plain",
+    "type": "boolean",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "buttonElement",
+    "type": "boolean",
+    "required": false,
+    "description": ""
+  },
   {
     "name": "classes",
     "type": "string",

package/nationalarchives/components/button/template.njk

@@ -2,11 +2,17 @@
 {%- if params.accent -%}
   {%- set buttonClasses = buttonClasses.concat('tna-button--accent') -%}
 {%- endif -%}
-<a href="{{ params.href }}" class="tna-button {{ buttonClasses | join(' ') }}" role="button"{%- if params.title %} title="{{ params.title }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{%- if params.small -%}
+  {%- set buttonClasses = buttonClasses.concat('tna-button--small') -%}
+{%- endif -%}
+{%- if params.plain -%}
+  {%- set buttonClasses = buttonClasses.concat('tna-button--plain') -%}
+{%- endif -%}
+<{{ 'button' if params.buttonElement else 'a' }}{%- if not params.buttonElement %} href="{{ params.href }}"{%- endif %} class="tna-button {{ buttonClasses | join(' ') }}"{%- if not params.buttonElement %} role="button"{%- endif -%}{%- if params.title %} title="{{ params.title }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {%- if params.brandIcon -%}
   <i class="fa-brands fa-{{ params.brandIcon }}"></i>
   {%- elseif params.icon -%}
   <i class="fa-solid fa-{{ params.icon }}"></i>
   {%- endif -%}
   {{ params.text }}
-</a>
+</{{ 'button' if params.buttonElement else 'a' }}>

package/nationalarchives/components/card/_index.scss

@@ -1,183 +1 @@
-@use "sass:math";
-@use "../../tools/colour";
-@use "../../tools/typography";
-@use "../../tools/media";
-
-.tna-card {
-  margin-bottom: 2rem;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  &__inner {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &__heading {
-    order: 2;
-  }
-
-  &__supertitle {
-  }
-
-  &__title {
-    order: 2;
-
-    // @include typography.main-font;
-    // @include typography.main-font-weight-bold;
-  }
-
-  &__title-link {
-    &::after {
-      display: none !important;
-    }
-  }
-
-  &__image-container {
-    height: 0;
-    margin-bottom: 1rem;
-    // padding-bottom: #{math.div(9, 16) * 100%};
-    padding-bottom: #{math.div(2, 3) * 100%};
-
-    position: relative;
-    order: 1;
-  }
-
-  &__image {
-    width: 100%;
-    height: 100%;
-
-    position: absolute;
-    inset: 0;
-
-    object-fit: cover;
-  }
-
-  &__image-label {
-    max-width: calc(100% - 1rem);
-
-    position: absolute;
-    top: 0.5rem;
-    left: 0.5rem;
-  }
-
-  &__body {
-    order: 3;
-  }
-
-  &__actions {
-    margin-top: 2rem;
-
-    order: 4;
-  }
-
-  &__action {
-  }
-
-  &--contrast,
-  &--accent {
-    .tna-card__inner {
-      padding-bottom: 1rem;
-    }
-
-    .tna-card__heading,
-    .tna-card__body,
-    .tna-card__actions {
-      margin-right: 1rem;
-      margin-left: 1rem;
-    }
-  }
-
-  &--contrast {
-    @include colour.invert;
-  }
-
-  &--accent {
-    @include colour.accent;
-  }
-
-  &--accent &__supertitle {
-    @include colour.invert;
-  }
-
-  &--horizontal {
-    position: relative;
-
-    @include media.on-larger-than-mobile {
-      .tna-card__inner {
-        margin-left: 50%;
-        padding: 2rem;
-      }
-
-      .tna-card__image-container {
-        height: auto;
-        margin-bottom: 0;
-        padding-bottom: 0;
-
-        display: block;
-
-        position: absolute;
-        inset: 0 50% 0 0;
-      }
-
-      .tna-card__heading,
-      .tna-card__body,
-      .tna-card__actions {
-        margin-right: 0;
-        margin-left: 0;
-      }
-    }
-  }
-
-  &--horizontal#{&}--contrast,
-  &--horizontal#{&}--accent {
-    @include media.on-mobile {
-      .tna-card__inner {
-        padding: 0 0 2rem;
-      }
-
-      .tna-card__image-container {
-        margin-bottom: 2rem;
-      }
-
-      .tna-card__heading,
-      .tna-card__body,
-      .tna-card__actions {
-        margin-right: 2rem;
-        margin-left: 2rem;
-      }
-    }
-  }
-
-  &:not(#{&}--horizontal) {
-    @include colour.on-high-contrast {
-      .tna-card__inner {
-        padding-bottom: 1rem;
-      }
-
-      .tna-card__heading,
-      .tna-card__body,
-      .tna-card__actions {
-        margin-right: 1rem;
-        margin-left: 1rem;
-      }
-    }
-  }
-
-  @include colour.on-high-contrast {
-    @include colour.colour-border("keyline-dark", 1px);
-
-    .tna-card__inner {
-      // padding-bottom: 1rem;
-    }
-
-    .tna-card__heading,
-    .tna-card__body,
-    .tna-card__actions {
-      // margin-right: 1rem;
-      // margin-left: 1rem;
-    }
-  }
-}
+@use "card";