Fix icon-only buttons in small button groups (#101)

nationalarchives · Mar 11, 2024 · 2df84f4 · 2df84f4
1 parent e850bcc
commit 2df84f4
Show file tree

Hide file tree

Showing 4 changed files with 164 additions and 44 deletions.
diff --git 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
@@ -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 }) =>
+  `<div class="tna-button-group">
+    ${buttons.map((button) => Template(button)).join("")}
+</div>`;
+
+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 }) =>
+  `<div class="tna-button-group">
+    ${buttons.map((button) => Template({ ...button, text: `Small ${button.text}`, small: true })).join("")}
+</div>`;
+
+export const GroupOfSmall = GroupOfSmallTemplate.bind({});
+GroupOfSmall.args = Group.args;
+
+const SmallGroupTemplate = ({ buttons }) =>
+  `<div class="tna-button-group tna-button-group--small">
+    ${buttons.map((button) => Template({ ...button, text: `Small ${button.text}` })).join("")}
+</div>`;
+
+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
@@ -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
@@ -65,13 +65,19 @@ const Template = ({
   });
 
 export const Standard = Template.bind({});
+Standard.parameters = {
+  chromatic: { disableSnapshot: true },
+};
 Standard.args = {
   text: "Button",
   href: "#",
   classes: "tna-button--demo",
 };
 
 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 }) =>
-  `<div class="tna-button-group">
-    ${buttons.map((button) => Template(button)).join("")}
-</div>`;
-
-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",
-    },
-  ],
-};