From 2df84f4e1d79c2c1c4dcf72bb0ab759ffbd43ef9 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Mon, 11 Mar 2024 10:34:59 +0000 Subject: [PATCH] Fix icon-only buttons in small button groups (#101) --- CHANGELOG.md | 3 + .../components/button/button-group.stories.js | 122 ++++++++++++++++++ .../components/button/button.scss | 9 +- .../components/button/button.stories.js | 74 ++++++----- 4 files changed, 164 insertions(+), 44 deletions(-) create mode 100644 src/nationalarchives/components/button/button-group.stories.js diff --git a/CHANGELOG.md b/CHANGELOG.md index df14cbd6..9ff633e8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Deprecated ### Removed ### Fixed + +- Fixed style of icon-only buttons in a small button group + ### Security ## [0.1.42](https://github.com/nationalarchives/tna-frontend/compare/v0.1.41...v0.1.42) - 2024-03-01 diff --git a/src/nationalarchives/components/button/button-group.stories.js b/src/nationalarchives/components/button/button-group.stories.js new file mode 100644 index 00000000..a99cff9d --- /dev/null +++ b/src/nationalarchives/components/button/button-group.stories.js @@ -0,0 +1,122 @@ +import Button from "./template.njk"; + +export default { + title: "Components/Button group", +}; + +const Template = ({ + text, + href, + title, + icon, + accent, + small, + plain, + iconOnly, + iconOnlyOnMobile, + rightAlignIcon, + buttonElement, + buttonType, + classes, + attributes, +}) => + Button({ + params: { + text, + href, + title, + icon, + accent, + small, + plain, + iconOnly, + iconOnlyOnMobile, + rightAlignIcon, + buttonElement, + buttonType, + classes, + attributes, + }, + }); + +const GroupTemplate = ({ buttons }) => + `
+ ${buttons.map((button) => Template(button)).join("")} +
`; + +export const Group = GroupTemplate.bind({}); +Group.args = { + buttons: [ + { + text: "Standard", + href: "#", + classes: "tna-button--demo", + }, + { + text: "Accent", + href: "#", + accent: true, + classes: "tna-button--demo", + }, + { + text: "Icon", + href: "#", + icon: "phone", + classes: "tna-button--demo", + }, + { + text: "Right Aligned Icon", + href: "#", + icon: "chevron-right", + rightAlignIcon: true, + classes: "tna-button--demo", + }, + { + text: "Icon Only", + href: "#", + icon: "list", + iconOnly: true, + classes: "tna-button--demo", + }, + { + text: "Icon Only On Mobile", + href: "#", + icon: "list", + iconOnlyOnMobile: true, + classes: "tna-button--demo", + }, + { + text: "Plain", + plain: true, + classes: "tna-button--demo", + }, + { + text: "Plain With Icon", + href: "#", + icon: "map-location-dot", + plain: true, + classes: "tna-button--demo", + }, + { + text: "Button", + buttonElement: true, + classes: "tna-button--demo", + }, + ], +}; + +const GroupOfSmallTemplate = ({ buttons }) => + `
+ ${buttons.map((button) => Template({ ...button, text: `Small ${button.text}`, small: true })).join("")} +
`; + +export const GroupOfSmall = GroupOfSmallTemplate.bind({}); +GroupOfSmall.args = Group.args; + +const SmallGroupTemplate = ({ buttons }) => + `
+ ${buttons.map((button) => Template({ ...button, text: `Small ${button.text}` })).join("")} +
`; + +export const SmallGroup = SmallGroupTemplate.bind({}); +SmallGroup.args = Group.args; diff --git a/src/nationalarchives/components/button/button.scss b/src/nationalarchives/components/button/button.scss index fad367d4..0f1d8637 100644 --- a/src/nationalarchives/components/button/button.scss +++ b/src/nationalarchives/components/button/button.scss @@ -89,10 +89,6 @@ @include typography.relative-font-size(14); line-height: 1.5rem; - - .fa-solid { - line-height: 2rem; - } } @mixin icon-only { @@ -101,8 +97,8 @@ gap: 0; - font-size: 0; - line-height: 0; + font-size: 0 !important; + line-height: 0 !important; .fa-solid { width: 2.5rem; @@ -119,6 +115,7 @@ width: 2rem; @include typography.relative-font-size(18 * 0.9); + line-height: 2rem; } } diff --git a/src/nationalarchives/components/button/button.stories.js b/src/nationalarchives/components/button/button.stories.js index c2af318d..d58f5022 100644 --- a/src/nationalarchives/components/button/button.stories.js +++ b/src/nationalarchives/components/button/button.stories.js @@ -65,6 +65,9 @@ const Template = ({ }); export const Standard = Template.bind({}); +Standard.parameters = { + chromatic: { disableSnapshot: true }, +}; Standard.args = { text: "Button", href: "#", @@ -72,6 +75,9 @@ Standard.args = { }; export const Accent = Template.bind({}); +Accent.parameters = { + chromatic: { disableSnapshot: true }, +}; Accent.args = { text: "Button", href: "#", @@ -80,6 +86,9 @@ Accent.args = { }; export const Icon = Template.bind({}); +Icon.parameters = { + chromatic: { disableSnapshot: true }, +}; Icon.args = { text: "Explore the collection", href: "#", @@ -88,6 +97,9 @@ Icon.args = { }; export const RightAlignedIcon = Template.bind({}); +RightAlignedIcon.parameters = { + chromatic: { disableSnapshot: true }, +}; RightAlignedIcon.args = { text: "Search", href: "#", @@ -97,6 +109,9 @@ RightAlignedIcon.args = { }; export const IconOnly = Template.bind({}); +IconOnly.parameters = { + chromatic: { disableSnapshot: true }, +}; IconOnly.args = { text: "Show as a list", href: "#", @@ -106,6 +121,9 @@ IconOnly.args = { }; export const Small = Template.bind({}); +Small.parameters = { + chromatic: { disableSnapshot: true }, +}; Small.args = { text: "Small button", href: "#", @@ -114,6 +132,9 @@ Small.args = { }; export const SmallWithIcon = Template.bind({}); +SmallWithIcon.parameters = { + chromatic: { disableSnapshot: true }, +}; SmallWithIcon.args = { text: "Explore the collection", href: "#", @@ -123,6 +144,9 @@ SmallWithIcon.args = { }; export const SmallIconOnly = Template.bind({}); +SmallIconOnly.parameters = { + chromatic: { disableSnapshot: true }, +}; SmallIconOnly.args = { text: "Explore the collection", href: "#", @@ -133,6 +157,9 @@ SmallIconOnly.args = { }; export const Plain = Template.bind({}); +Plain.parameters = { + chromatic: { disableSnapshot: true }, +}; Plain.args = { text: "Plain button", href: "#", @@ -141,6 +168,9 @@ Plain.args = { }; export const SmallPlain = Template.bind({}); +SmallPlain.parameters = { + chromatic: { disableSnapshot: true }, +}; SmallPlain.args = { text: "Plain small button", href: "#", @@ -150,6 +180,9 @@ SmallPlain.args = { }; export const SmallPlainIcon = Template.bind({}); +SmallPlainIcon.parameters = { + chromatic: { disableSnapshot: true }, +}; SmallPlainIcon.args = { text: "Plain small button", href: "#", @@ -160,47 +193,12 @@ SmallPlainIcon.args = { }; export const ButtonElement = Template.bind({}); +ButtonElement.parameters = { + chromatic: { disableSnapshot: true }, +}; ButtonElement.args = { text: "Button element", href: "#", buttonElement: true, classes: "tna-button--demo", }; - -const GroupTemplate = ({ buttons }) => - `
- ${buttons.map((button) => Template(button)).join("")} -
`; - -export const Group = GroupTemplate.bind({}); -Group.args = { - buttons: [ - { - text: "Button 1", - href: "#", - classes: "tna-button--demo", - }, - { - text: "Button 2", - href: "#", - accent: true, - classes: "tna-button--demo", - }, - { - text: "Call us", - href: "#", - icon: "phone", - classes: "tna-button--demo", - }, - { - text: "Button", - buttonElement: true, - classes: "tna-button--demo", - }, - { - text: "Plain", - plain: true, - classes: "tna-button--demo", - }, - ], -};