Remove profile component, tidy fixtures/stories

.github/actions/prototype-kit-test/action.yml

@@ -50,7 +50,6 @@ runs:
         echo -e "{% from \"nationalarchives/components/pagination/macro.njk\" import tnaPagination %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/phase-banner/macro.njk\" import tnaPhaseBanner %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/picture/macro.njk\" import tnaPicture %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
-        echo -e "{% from \"nationalarchives/components/profile/macro.njk\" import tnaProfile %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/sensitive-image/macro.njk\" import tnaSensitiveImage %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/skip-link/macro.njk\" import tnaSkipLink %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/tabs/macro.njk\" import tnaTabs %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html
@@ -73,7 +72,6 @@ runs:
         echo "{{ tnaPagination({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaPhaseBanner({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaPicture({}) }}" >> prototype/app/views/index.html &&
-        echo "{{ tnaProfile({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaSensitiveImage({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaSkipLink({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaTabs({}) }}" >> prototype/app/views/index.html &&

src/nationalarchives/components/_index.scss

@@ -13,7 +13,6 @@
 @use "pagination";
 @use "phase-banner";
 @use "picture";
-@use "profile";
 @use "sensitive-image";
 @use "skip-link";
 @use "tabs";

src/nationalarchives/components/footer/template.njk

@@ -56,7 +56,7 @@
         <ul class="tna-footer__navigation-block-items tna-ul tna-ul--plain">
         {%- for item in group.items -%}
           <li class="tna-footer__navigation-block-item">
-            <a href="{{ item.href }}" class="tna-footer__navigation-block-item-link"{%- if item.title or item.newTab %} title="{{ item.title if item.title else item.text }}{%- if item.newTab %} (opens in new tab){% endif %}"{% endif %}{%- if item.newTab %} target="_blank"{% endif %}>
+            <a href="{{ item.href }}" class="tna-footer__navigation-block-item-link"{%- if item.title or item.newTab %} title="{{ item.title if item.title else item.text }}{%- if item.newTab %} (opens in new tab){% endif %}"{% endif %}{%- if item.newTab %} target="_blank" rel="noreferrer noopener"{% endif %}>
               {{ item.text }}
               {%- if item.newTab -%}
               <i class="fa-solid fa-arrow-up-right-from-square"></i>

src/nationalarchives/components/header/header.stories.js

@@ -8,9 +8,8 @@ const argTypes = {
   logo: { control: "object" },
   topNavigation: { control: "object" },
   navigation: { control: "object" },
-  colour: {
-    control: "radio",
-    options: ["black", "yellow", "pink", "orange", "green", "blue"],
+  accent: {
+    control: "boolean",
   },
   exit: { control: "object" },
   classes: { control: "text" },
@@ -35,7 +34,7 @@ const Template = ({
   logo,
   topNavigation,
   navigation,
-  colour,
+  accent,
   exit,
   classes,
   attributes,
@@ -45,7 +44,7 @@ const Template = ({
       logo,
       topNavigation,
       navigation,
-      colour,
+      accent,
       exit,
       classes,
       attributes,
@@ -89,7 +88,6 @@ Standard.args = {
       href: "#/gamma",
     },
   ],
-  colour: "yellow",
   exit: {
     text: "Go to the current National Archives website",
     href: "#",

src/nationalarchives/components/header/macro-options.json

@@ -96,8 +96,8 @@
     ]
   },
   {
-    "name": "colour",
-    "type": "string",
+    "name": "accent",
+    "type": "boolean",
     "required": false,
     "description": ""
   },

src/nationalarchives/components/header/template.njk

@@ -1,6 +1,6 @@
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
-{%- if params.colour -%}
-  {%- set containerClasses = containerClasses.concat('tna-header--' + params.colour) -%}
+{%- if params.accent -%}
+  {%- set containerClasses = containerClasses.concat('tna-header--accent') -%}
 {%- endif -%}
 <header class="tna-header {{ containerClasses | join(' ') }}" data-module="tna-header" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {%- if params.exit -%}

src/nationalarchives/components/phase-banner/macro-options.json

@@ -11,6 +11,12 @@
     "required": true,
     "description": ""
   },
+  {
+    "name": "accent",
+    "type": "boolean",
+    "required": false,
+    "description": ""
+  },
   {
     "name": "classes",
     "type": "string",

src/nationalarchives/components/phase-banner/phase-banner.stories.js

@@ -3,10 +3,10 @@ import macroOptions from "./macro-options.json";
 
 const argTypes = {
   phase: {
-    control: "radio",
-    options: ["discovery", "alpha", "beta", "live"],
+    control: "text",
   },
   message: { control: "text" },
+  accent: { control: "boolean" },
   classes: { control: "text" },
   attributes: { control: "object" },
 };
@@ -32,32 +32,8 @@ const Template = ({ phase, message, classes, attributes }) =>
     },
   });
 
-export const Discovery = Template.bind({});
-Discovery.args = {
-  phase: "discovery",
-  message: `This is a new service – <a href="#">give us your feedback</a> to help improve it.`,
-};
-
-export const Alpha = Template.bind({});
-Alpha.args = {
-  phase: "alpha",
-  message: `This is a new service – <a href="#">give us your feedback</a> to help improve it.`,
-};
-
-export const Beta = Template.bind({});
-Beta.args = {
+export const Standard = Template.bind({});
+Standard.args = {
   phase: "beta",
   message: `This is a new service – <a href="#">give us your feedback</a> to help improve it.`,
 };
-
-export const Live = Template.bind({});
-Live.args = {
-  phase: "live",
-  message: `This is a new service – <a href="#">give us your feedback</a> to help improve it.`,
-};
-
-export const Unknown = Template.bind({});
-Unknown.args = {
-  phase: "unknown",
-  message: `This is a new service – <a href="#">give us your feedback</a> to help improve it.`,
-};

src/nationalarchives/components/phase-banner/template.njk

@@ -1,5 +1,7 @@
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
-{%- set containerClasses = containerClasses.concat('tna-phase-banner--' + params.phase | lower) -%}
+{%- if params.accent -%}
+  {%- set containerClasses = containerClasses.concat('tna-phase-banner--accent') -%}
+{%- endif -%}
 <div class="tna-phase-banner {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <div class="tna-container">
     <div class="tna-column tna-column--full-tiny">

src/nationalarchives/components/tabs/tabs.mjs

@@ -150,7 +150,6 @@ export class Tabs {
   }
 
   setSelectedToNextTab(targetItem) {
-    console.log("setSelectedToNextTab", targetItem);
     const currentIndex = [...this.$tabListItemLinks].findIndex(
       ($tabListItemLink) =>
         $tabListItemLink.getAttribute("id") === targetItem.getAttribute("id"),
@@ -161,14 +160,12 @@ export class Tabs {
     } else {
       newIndex = 0;
     }
-    console.log(currentIndex, newIndex);
     this.switchTab(
       this.$tabListItemLinks[newIndex].getAttribute("aria-controls"),
     );
   }
 
   setSelectedToPreviousTab(targetItem) {
-    console.log("setSelectedToPreviousTab", targetItem);
     const currentIndex = [...this.$tabListItemLinks].findIndex(
       ($tabListItemLink) =>
         $tabListItemLink.getAttribute("id") === targetItem.getAttribute("id"),
@@ -179,7 +176,6 @@ export class Tabs {
     } else {
       newIndex = this.$tabListItemLinks.length - 1;
     }
-    console.log(currentIndex, newIndex);
     this.switchTab(
       this.$tabListItemLinks[newIndex].getAttribute("aria-controls"),
     );

src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js

@@ -104,7 +104,7 @@ const Template = ({ theme, accent }) => {
         phase: "beta",
         message:
           'This is a new service - <a href="#">give us your feedback</a> to help improve it.',
-        classes: "tna-phase-banner--accent",
+        accent: true,
       },
     })}
     ${Header({

tasks/test-package.js

@@ -67,7 +67,6 @@ const checkExists = [
   ...componentFiles("pagination"),
   ...componentFiles("phase-banner"),
   ...componentFiles("picture", "Picture"),
-  ...componentFiles("profile"),
   ...componentFiles("sensitive-image", "SensitiveImage"),
   ...componentFiles("skip-link", "SkipLink"),
   ...componentFiles("tabs", "Tabs"),