Card and cookie banner styles (#67)

* Allow plain cookie banner, change boxed for contrast * Update fixture
nationalarchives · Dec 19, 2023 · d47bd3d · d47bd3d
1 parent 8004ae4
commit d47bd3d
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 ### Changed
+
+- The default cookie banner colour is dark on light but can be changed with a `style` attribute or classes such as `tna-cookie-banner--contrast`
+- The card style of `boxed` has been changed to `contrast` in line with other components
+
 ### Deprecated
 ### Removed
 ### Fixed

diff --git a/src/nationalarchives/components/card/card.stories.js b/src/nationalarchives/components/card/card.stories.js
@@ -21,7 +21,7 @@ const argTypes = {
   text: { control: "text" },
   actions: { control: "object" },
   horizontal: { control: "boolean" },
-  style: { control: "inline-radio", options: ["none", "boxed", "accent"] },
+  style: { control: "inline-radio", options: ["none", "contrast", "accent"] },
   plainSupertitle: { control: "boolean" },
   htmlElement: { control: "text" },
   classes: { control: "text" },
@@ -170,8 +170,8 @@ PlainSupertitle.args = {
   classes: "tna-card--demo",
 };
 
-export const Boxed = Template.bind({});
-Boxed.args = {
+export const Contrast = Template.bind({});
+Contrast.args = {
   supertitle: "Card supertitle",
   title: "Card title",
   headingLevel: 3,
@@ -184,7 +184,7 @@ Boxed.args = {
   imageHeight: 333,
   label: "New",
   body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
-  style: "boxed",
+  style: "contrast",
   htmlElement: "article",
   classes: "tna-card--demo",
 };
@@ -234,8 +234,8 @@ Horizontal.args = {
   classes: "tna-card--demo",
 };
 
-export const HorizontalBoxed = Template.bind({});
-HorizontalBoxed.args = {
+export const HorizontalContrast = Template.bind({});
+HorizontalContrast.args = {
   supertitle: "Card supertitle",
   title: "Card title",
   headingLevel: 3,
@@ -256,7 +256,7 @@ HorizontalBoxed.args = {
     },
   ],
   horizontal: true,
-  style: "boxed",
+  style: "contrast",
   htmlElement: "article",
   classes: "tna-card--demo",
 };

diff --git a/src/nationalarchives/components/card/fixtures.json b/src/nationalarchives/components/card/fixtures.json
@@ -166,12 +166,12 @@
       "hidden": false
     },
     {
-      "name": "with a boxed style",
+      "name": "with a contrast style",
       "options": {
         "title": "Card title",
         "headingLevel": 3,
         "body": "<p>Card body</p>",
-        "style": "boxed"
+        "style": "contrast"
       },
       "html": "<div class=\"tna-card tna-card--contrast\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false

diff --git a/src/nationalarchives/components/card/macro-options.json b/src/nationalarchives/components/card/macro-options.json
@@ -208,7 +208,7 @@
     "name": "style",
     "type": "text",
     "required": false,
-    "description": "The style of card to use which can be either `boxed` for an inverted card or `accent` for a card that matches the page's accent colour."
+    "description": "The style of card to use which can be either `contrast` for an inverted card or `accent` for a card that matches the page's accent colour."
   },
   {
     "name": "plainSupertitle",

diff --git a/src/nationalarchives/components/card/template.njk b/src/nationalarchives/components/card/template.njk
@@ -3,7 +3,7 @@
 {%- if params.horizontal -%}
   {%- set containerClasses = containerClasses.concat('tna-card--horizontal') -%}
 {%- endif -%}
-{%- if params.style == "boxed" -%}
+{%- if params.style == "contrast" -%}
   {%- set containerClasses = containerClasses.concat('tna-card--contrast') -%}
 {%- elseif params.style == "accent" -%}
   {%- set containerClasses = containerClasses.concat('tna-card--accent') -%}

diff --git a/src/nationalarchives/components/cookie-banner/cookie-banner.scss b/src/nationalarchives/components/cookie-banner/cookie-banner.scss
@@ -7,11 +7,21 @@
 @use "../grid";
 
 .tna-cookie-banner {
-  @include colour.contrast;
-
   padding-top: 2rem;
   padding-bottom: 2rem;
 
+  &--contrast {
+    @include colour.contrast;
+  }
+
+  &--accent {
+    @include colour.accent;
+  }
+
+  &--tint {
+    @include colour.tint;
+  }
+
   @include media.on-tiny {
     padding-top: 1rem;
     padding-bottom: 1rem;

diff --git a/src/nationalarchives/components/cookie-banner/cookie-banner.stories.js b/src/nationalarchives/components/cookie-banner/cookie-banner.stories.js
@@ -13,6 +13,10 @@ const argTypes = {
   cookiesDomain: { control: "text" },
   cookiesPath: { control: "text" },
   allowInsecure: { control: "boolean" },
+  style: {
+    control: "inline-radio",
+    options: ["none", "contrast", "accent", "tint"],
+  },
   classes: { control: "text" },
   attributes: { control: "object" },
 };
@@ -37,6 +41,7 @@ const Template = ({
   cookiesDomain,
   cookiesPath,
   allowInsecure,
+  style,
   classes,
   attributes,
 }) =>
@@ -50,6 +55,7 @@ const Template = ({
       cookiesDomain,
       cookiesPath,
       allowInsecure,
+      style,
       classes,
       attributes,
     },
@@ -66,6 +72,7 @@ Accept.args = {
   serviceName: "My service",
   cookiesUrl: "#",
   allowInsecure: true,
+  style: "contrast",
   classes: "tna-cookie-banner--demo",
 };
 Accept.play = async ({ canvasElement }) => {
@@ -106,6 +113,7 @@ export const Reject = Template.bind({});
 Reject.args = {
   serviceName: "My service",
   cookiesUrl: "#",
+  style: "contrast",
   classes: "tna-cookie-banner--demo",
 };
 Reject.play = async ({ canvasElement }) => {
@@ -143,6 +151,7 @@ CustomPolicies.args = {
   serviceName: "My service",
   cookiesUrl: "#",
   policies: "custom",
+  style: "contrast",
   classes: "tna-cookie-banner--demo",
 };
 CustomPolicies.parameters = {
@@ -178,6 +187,7 @@ Existing.args = {
   serviceName: "My service",
   cookiesUrl: "#",
   allowInsecure: true,
+  style: "contrast",
   classes: "tna-cookie-banner--demo",
 };
 Existing.decorators = [

diff --git a/src/nationalarchives/components/cookie-banner/macro-options.json b/src/nationalarchives/components/cookie-banner/macro-options.json
@@ -41,6 +41,12 @@
     "required": false,
     "description": ""
   },
+  {
+    "name": "style",
+    "type": "text",
+    "required": false,
+    "description": "The style of banner to use which can be either `contrast` for an inverted style, `accent` for a banner that matches the page's accent colour or `tint` for a subtle, tinted banner."
+  },
   {
     "name": "classes",
     "type": "string",

diff --git a/src/nationalarchives/components/cookie-banner/template.njk b/src/nationalarchives/components/cookie-banner/template.njk
@@ -1,6 +1,13 @@
 {% from "nationalarchives/components/button/macro.njk" import tnaButton %}
 
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
+{%- if params.style == "contrast" -%}
+  {%- set containerClasses = containerClasses.concat('tna-cookie-banner--contrast') -%}
+{%- elseif params.style == "accent" -%}
+  {%- set containerClasses = containerClasses.concat('tna-cookie-banner--accent') -%}
+{%- elseif params.style == "tint" -%}
+  {%- set containerClasses = containerClasses.concat('tna-cookie-banner--tint') -%}
+{%- endif -%}
 <section class="tna-cookie-banner {{ containerClasses | join(' ') }}" data-module="tna-cookie-banner" role="region" data-policies="{{ params.policies if params.policies }}" data-preferenceskey="{{ params.preferencesSetKey if params.preferencesSetKey }}" data-policieskey="{{ params.policiesKey if params.policiesKey }}" data-domain="{{ params.cookiesDomain if params.cookiesDomain }}" data-path="{{ params.cookiesPath if params.cookiesPath }}" data-insecure="{{ true if params.allowInsecure else 'false' }}" aria-label="Cookies on {{ params.serviceName }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} hidden>
   <div class="tna-container">
     <div class="tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt">

diff --git a/src/nationalarchives/components/picture/picture.scss b/src/nationalarchives/components/picture/picture.scss
@@ -74,6 +74,11 @@
       max-height: none;
       height: auto;
     }
+
+    &__caption {
+      margin-right: 0;
+      margin-left: 0;
+    }
   }
 
   @include colour.on-high-contrast-and-forced-colours {

diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js
@@ -472,7 +472,7 @@ const Template = ({ theme, accent }) => {
             ${Card({
               params: {
                 ...cardDefaultOptions,
-                style: "boxed",
+                style: "contrast",
                 classes: "tna-!--margin-bottom-m",
               },
             })}
@@ -505,7 +505,7 @@ const Template = ({ theme, accent }) => {
               params: {
                 ...cardDefaultOptions,
                 horizontal: true,
-                style: "boxed",
+                style: "contrast",
                 classes: "tna-!--margin-bottom-m",
               },
             })}