From 1803e59fd0bf18ec6f3a0739e9948ad558e073cd Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Mon, 23 Oct 2023 16:06:56 +0100 Subject: [PATCH] Allow right/left margins to be added to columns --- CHANGELOG.md | 1 + .../components/grid/grid.stories.js | 21 ++++++++ .../components/grid/macro-options.json | 48 +++++++++++++++++++ .../components/grid/template.njk | 32 +++++++++++-- src/nationalarchives/tools/_grid.scss | 24 +++++----- 5 files changed, 111 insertions(+), 15 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d9607122..9c8c4fae 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - `tna-aside` now has a `--tight` modifier with less padding - Visual regression tests can now be run in the Storyobok UI +- Allow right/left margins to be added to columns ### Changed diff --git a/src/nationalarchives/components/grid/grid.stories.js b/src/nationalarchives/components/grid/grid.stories.js index 271dd975..c65fc112 100644 --- a/src/nationalarchives/components/grid/grid.stories.js +++ b/src/nationalarchives/components/grid/grid.stories.js @@ -244,3 +244,24 @@ Order.args = { }, ], }; + +export const Margin = Template.bind({}); +Margin.args = { + classes: "tna-grid--demo", + columns: [ + { + html: "

A

", + width: "1-4", + }, + { + html: "

B

", + width: "1-4", + marginLeft: "1-12", + }, + { + html: "

C

", + width: "1-4", + marginLeft: "1-6", + }, + ], +}; diff --git a/src/nationalarchives/components/grid/macro-options.json b/src/nationalarchives/components/grid/macro-options.json index 532febd5..95ab17c5 100644 --- a/src/nationalarchives/components/grid/macro-options.json +++ b/src/nationalarchives/components/grid/macro-options.json @@ -59,6 +59,54 @@ "required": false, "description": "" }, + { + "name": "marginLeft", + "type": "number", + "required": false, + "description": "" + }, + { + "name": "marginLeftMedium", + "type": "number", + "required": false, + "description": "" + }, + { + "name": "marginLeftSmall", + "type": "number", + "required": false, + "description": "" + }, + { + "name": "marginLeftTiny", + "type": "number", + "required": false, + "description": "" + }, + { + "name": "marginRight", + "type": "number", + "required": false, + "description": "" + }, + { + "name": "marginRightMedium", + "type": "number", + "required": false, + "description": "" + }, + { + "name": "marginRightSmall", + "type": "number", + "required": false, + "description": "" + }, + { + "name": "marginRightTiny", + "type": "number", + "required": false, + "description": "" + }, { "name": "order", "type": "number", diff --git a/src/nationalarchives/components/grid/template.njk b/src/nationalarchives/components/grid/template.njk index 34e5ed18..0495092b 100644 --- a/src/nationalarchives/components/grid/template.njk +++ b/src/nationalarchives/components/grid/template.njk @@ -10,7 +10,7 @@ {%- set containerClasses = containerClasses.concat('tna-container--no-padding-all') -%} {%- endif -%} <{{ htmlElement }} class="tna-container {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}> -{%- for item in params.columns -%} +{%- for item in params.columns %} {%- set columnHtmlElement = item.htmlElement if item.htmlElement else 'div' -%} {%- set columnClasses = [item.classes] if item.classes else [] -%} @@ -40,6 +40,32 @@ {%- set columnClasses = columnClasses.concat('tna-column--flex-' + item.flexTiny + '-tiny') -%} {%- endif -%} + {%- if item.marginLeft -%} + {%- set columnClasses = columnClasses.concat('tna-column--margin-left-' + item.marginLeft) -%} + {%- endif -%} + {%- if item.marginLeftMedium -%} + {%- set columnClasses = columnClasses.concat('tna-column--margin-left-' + item.marginLeftMedium + '-medium') -%} + {%- endif -%} + {%- if item.marginLeftSmall -%} + {%- set columnClasses = columnClasses.concat('tna-column--margin-left-' + item.marginLeftSmall + '-small') -%} + {%- endif -%} + {%- if item.marginLeftTiny -%} + {%- set columnClasses = columnClasses.concat('tna-column--margin-left-' + item.marginLeftTiny + '-tiny') -%} + {%- endif -%} + + {%- if item.marginRight -%} + {%- set columnClasses = columnClasses.concat('tna-column--margin-right-' + item.marginRight) -%} + {%- endif -%} + {%- if item.marginRightMedium -%} + {%- set columnClasses = columnClasses.concat('tna-column--margin-right-' + item.marginRightMedium + '-medium') -%} + {%- endif -%} + {%- if item.marginRightSmall -%} + {%- set columnClasses = columnClasses.concat('tna-column--margin-right-' + item.marginRightSmall + '-small') -%} + {%- endif -%} + {%- if item.marginRightTiny -%} + {%- set columnClasses = columnClasses.concat('tna-column--margin-right-' + item.marginRightTiny + '-tiny') -%} + {%- endif -%} + {%- if item.order -%} {%- set columnClasses = columnClasses.concat('tna-column--order-' + item.order) -%} {%- endif -%} @@ -55,9 +81,9 @@ {%- if item.noPadding -%} {%- set columnClasses = columnClasses.concat('tna-column--no-padding') -%} - {%- endif -%} + {%- endif %} <{{ columnHtmlElement }} class="tna-column {{ columnClasses | join(' ') }}" {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}> {{ item.html | safe }} -{%- endfor -%} +{%- endfor %} diff --git a/src/nationalarchives/tools/_grid.scss b/src/nationalarchives/tools/_grid.scss index 477d6315..d039097c 100644 --- a/src/nationalarchives/tools/_grid.scss +++ b/src/nationalarchives/tools/_grid.scss @@ -24,13 +24,13 @@ flex: none; } - // .column--margin-right-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} { - // margin-right: math.div(100%, $count) * $i; - // } + &--margin-right-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} { + margin-right: math.div(100%, $count) * $i; + } - // .column--margin-left-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} { - // margin-left: math.div(100%, $count) * $i; - // } + &--margin-left-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} { + margin-left: math.div(100%, $count) * $i; + } $simplest-fraction-found: true; } @@ -42,13 +42,13 @@ flex: none; } - // .column--margin-right-#{$i}-#{$count}#{$suffix} { - // margin-right: math.div(100%, $count) * $i; - // } + &--margin-right-#{$i}-#{$count}#{$suffix} { + margin-right: math.div(100%, $count) * $i; + } - // .column--margin-left-#{$i}-#{$count}#{$suffix} { - // margin-left: math.div(100%, $count) * $i; - // } + &--margin-left-#{$i}-#{$count}#{$suffix} { + margin-left: math.div(100%, $count) * $i; + } } }