diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5ec99644..f5876150 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Optional `data-tnacookiesdomain` and `data-tnacookiespath` attributes on the `` element can be used to define the domain and path for cookies
- Analytics added for breadcrumbs and gallery components
- Allowed the document scope of an `EventTracker` instance to be changed
+- Gallery components are unbounded by default but can have a background with `bounded: true`
### Changed
diff --git a/src/nationalarchives/components/gallery/fixtures.json b/src/nationalarchives/components/gallery/fixtures.json
index 9bfaeec1..b5f36736 100644
--- a/src/nationalarchives/components/gallery/fixtures.json
+++ b/src/nationalarchives/components/gallery/fixtures.json
@@ -31,6 +31,37 @@
},
"html": ""
},
+ {
+ "name": "bounded",
+ "options": {
+ "items": [
+ {
+ "alt": "Photo 1",
+ "width": 600,
+ "height": 400,
+ "src": "https://picsum.photos/id/50/600/400",
+ "description": "This is photo number 1"
+ },
+ {
+ "alt": "Photo 2",
+ "width": 400,
+ "height": 400,
+ "src": "https://picsum.photos/id/51/600/600",
+ "description": "This is photo number 2"
+ },
+ {
+ "alt": "Photo 3",
+ "width": 400,
+ "height": 600,
+ "src": "https://picsum.photos/id/52/400/600",
+ "description": "This is photo number 3"
+ }
+ ],
+ "id": "test-gallery",
+ "bounded": true
+ },
+ "html": ""
+ },
{
"name": "with title and text",
"options": {
diff --git a/src/nationalarchives/components/gallery/gallery.scss b/src/nationalarchives/components/gallery/gallery.scss
index 40233476..8e1b5dc4 100644
--- a/src/nationalarchives/components/gallery/gallery.scss
+++ b/src/nationalarchives/components/gallery/gallery.scss
@@ -1,3 +1,4 @@
+@use "../../variables/a11y" as a11yVariables;
@use "../../tools/a11y";
@use "../../tools/colour";
@use "../../tools/media";
@@ -11,13 +12,9 @@
grid-template: min-content min-content 1fr / 2fr 1fr;
gap: 0 spacing.space(1);
- @include colour.tint;
-
border-radius: 0.1px;
&__header {
- padding: spacing.space(1);
-
grid-column: 1 / 3;
grid-row: 1;
@@ -93,7 +90,7 @@
}
&__item-description {
- margin: 0 spacing.space(1) spacing.space(1);
+ margin-bottom: spacing.space(1);
padding: spacing.space(0.5) spacing.space(1);
align-self: flex-start;
@@ -172,8 +169,8 @@
&__navigation-button-icon {
content: "";
- width: 1rem;
- height: 1rem;
+ width: 0.75rem;
+ height: 0.75rem;
display: block;
flex: none;
@@ -322,6 +319,16 @@
}
}
+ &--bounded,
+ &:fullscreen {
+ @include colour.tint;
+ }
+
+ &--bounded &__header,
+ &:fullscreen &__header {
+ padding: spacing.space(1);
+ }
+
&:fullscreen &__header-inner {
display: none;
}
@@ -338,6 +345,12 @@
}
}
+ &--bounded &__item-description,
+ &:fullscreen &__item-description {
+ margin-right: spacing.space(1);
+ margin-left: spacing.space(1);
+ }
+
&:fullscreen &__item-description {
max-height: 6rem;
@@ -406,8 +419,8 @@
}
&:fullscreen &__navigation {
- padding-top: 0;
- padding-left: 0;
+ // padding-top: 0;
+ // padding-left: 0;
grid-column: 2 / 3;
grid-row: 2 / 4;
diff --git a/src/nationalarchives/components/gallery/gallery.stories.js b/src/nationalarchives/components/gallery/gallery.stories.js
index cafd6ce1..cad373ae 100644
--- a/src/nationalarchives/components/gallery/gallery.stories.js
+++ b/src/nationalarchives/components/gallery/gallery.stories.js
@@ -10,6 +10,7 @@ const argTypes = {
items: { control: "object" },
id: { control: "text" },
showGrid: { control: "boolean" },
+ bounded: { control: "boolean" },
classes: { control: "text" },
attributes: { control: "object" },
};
@@ -34,6 +35,7 @@ const Template = ({
items,
id,
showGrid,
+ bounded,
classes,
attributes,
}) =>
@@ -47,6 +49,7 @@ const Template = ({
items,
id,
showGrid,
+ bounded,
classes,
attributes,
},
@@ -86,6 +89,12 @@ Standard.args = {
classes: "tna-gallery--demo",
};
+export const Bounded = Template.bind({});
+Bounded.args = {
+ ...Standard.args,
+ bounded: true,
+};
+
export const Grid = Template.bind({});
Grid.args = {
...Standard.args,
diff --git a/src/nationalarchives/components/gallery/macro-options.json b/src/nationalarchives/components/gallery/macro-options.json
index d4f422ca..348bf0ab 100644
--- a/src/nationalarchives/components/gallery/macro-options.json
+++ b/src/nationalarchives/components/gallery/macro-options.json
@@ -80,6 +80,12 @@
"required": false,
"description": "If true, don't select the first image when the gallery loads and instead show a grid of images."
},
+ {
+ "name": "bounded",
+ "type": "boolean",
+ "required": false,
+ "description": "If true, add a background to the gallery to separate it from surrounding contnet."
+ },
{
"name": "classes",
"type": "string",
diff --git a/src/nationalarchives/components/gallery/template.njk b/src/nationalarchives/components/gallery/template.njk
index b7675726..73157336 100644
--- a/src/nationalarchives/components/gallery/template.njk
+++ b/src/nationalarchives/components/gallery/template.njk
@@ -1,6 +1,9 @@
{% from "nationalarchives/components/button/macro.njk" import tnaButton %}
{%- set containerClasses = [params.classes] if params.classes else [] -%}
+{%- if params.bounded -%}
+ {%- set containerClasses = containerClasses.concat('tna-gallery--bounded') -%}
+{%- endif -%}
{%- set classes = containerClasses | join(' ') -%}