feat(accordion): allow buttonWidth to accept string values

closes #5897
Sage · Mar 21, 2023 · 34aa10c · 34aa10c
1 parent e01478a
commit 34aa10c
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 22 deletions.
diff --git a/src/components/accordion/accordion-test.stories.tsx b/src/components/accordion/accordion-test.stories.tsx
@@ -363,7 +363,7 @@ export const AccordionOpeningButton = () => {
         borders="none"
         iconAlign="left"
         buttonHeading
-        buttonWidth={200}
+        buttonWidth="200px"
         error="hello"
       >
         <div>Content</div>
@@ -378,7 +378,7 @@ export const AccordionOpeningButton = () => {
         borders="none"
         iconAlign="right"
         buttonHeading
-        buttonWidth={200}
+        buttonWidth="200px"
       >
         <div>Content</div>
         <div>Content</div>
@@ -394,7 +394,7 @@ export const AccordionOpeningButton = () => {
         headerSpacing={{
           px: 0,
         }}
-        buttonWidth={96}
+        buttonWidth="96px"
       >
         <div>Content</div>
         <div>Content</div>
@@ -408,7 +408,7 @@ export const AccordionOpeningButton = () => {
         openTitle="Less info"
         iconAlign="left"
         buttonHeading
-        buttonWidth={120}
+        buttonWidth="120px"
         headerSpacing={{
           px: 1,
         }}

diff --git a/src/components/accordion/accordion.component.tsx b/src/components/accordion/accordion.component.tsx
@@ -21,7 +21,7 @@ export interface AccordionProps
   extends StyledAccordionContainerProps,
     SpaceProps {
   /** Width of the buttonHeading when it's set, defaults to 150px */
-  buttonWidth?: number;
+  buttonWidth?: number | string;
   /** Content of the Accordion component */
   children?: React.ReactNode;
   /** Set the default state of expansion of the Accordion if component is meant to be used as uncontrolled */
@@ -95,7 +95,7 @@ export const Accordion = React.forwardRef<
       warning,
       info,
       buttonHeading,
-      buttonWidth = 150,
+      buttonWidth = "150px",
       openTitle,
       ...rest
     }: AccordionProps & AccordionInternalProps,

diff --git a/src/components/accordion/accordion.spec.tsx b/src/components/accordion/accordion.spec.tsx
@@ -530,21 +530,45 @@ describe("Accordion", () => {
       }
     );
 
-    it.each(Array.from({ length: 10 }).map((_, i) => 100 + i))(
-      "sets the width of the button to the value passed in via the buttonWidth prop",
-      (buttonWidth) => {
+    describe("sets the width of the button to the value passed in via the buttonWidth prop", () => {
+      it.each(["140px", "20%", "0.2"])(
+        "when passed as a %s string",
+        (mockButtonWidth) => {
+          wrapper = mount(
+            <Accordion
+              title="Title"
+              buttonHeading
+              buttonWidth={mockButtonWidth}
+            />
+          ).find(StyledAccordionTitleContainer);
+
+          assertStyleMatch(
+            {
+              width: `${mockButtonWidth}`,
+            },
+            wrapper
+          );
+        }
+      );
+
+      it("when passed as a number", () => {
+        const mockButtonWidth = 140;
         wrapper = mount(
-          <Accordion title="Title" buttonHeading buttonWidth={buttonWidth} />
+          <Accordion
+            title="Title"
+            buttonHeading
+            buttonWidth={mockButtonWidth}
+          />
         ).find(StyledAccordionTitleContainer);
 
         assertStyleMatch(
           {
-            width: `${buttonWidth}px`,
+            width: `${mockButtonWidth}px`,
           },
           wrapper
         );
-      }
-    );
+      });
+    });
 
     describe("when openTitle prop set", () => {
       it("should display the title when closed", () => {

diff --git a/src/components/accordion/accordion.stories.tsx b/src/components/accordion/accordion.stories.tsx
@@ -287,7 +287,7 @@ export const OpeningButton: ComponentStory<typeof Accordion> = () => {
         borders="none"
         iconAlign="left"
         buttonHeading
-        buttonWidth={200}
+        buttonWidth="200px"
         error="hello"
       >
         <div>Content</div>
@@ -302,7 +302,7 @@ export const OpeningButton: ComponentStory<typeof Accordion> = () => {
         borders="none"
         iconAlign="right"
         buttonHeading
-        buttonWidth={200}
+        buttonWidth="200px"
       >
         <div>Content</div>
         <div>Content</div>
@@ -316,7 +316,7 @@ export const OpeningButton: ComponentStory<typeof Accordion> = () => {
         openTitle="Less info"
         buttonHeading
         headerSpacing={{ px: 0 }}
-        buttonWidth={96}
+        buttonWidth="96px"
       >
         <div>Content</div>
         <div>Content</div>
@@ -330,7 +330,7 @@ export const OpeningButton: ComponentStory<typeof Accordion> = () => {
         openTitle="Less info"
         iconAlign="left"
         buttonHeading
-        buttonWidth={120}
+        buttonWidth="120px"
         headerSpacing={{ px: 1 }}
       >
         <div>Content</div>

diff --git a/src/components/accordion/accordion.style.ts b/src/components/accordion/accordion.style.ts
@@ -124,7 +124,7 @@ const StyledAccordionHeadingsContainer = styled.div<StyledAccordionHeadingsConta
 
 interface StyledAccordionTitleContainerProps {
   buttonHeading?: boolean;
-  buttonWidth?: number;
+  buttonWidth?: number | string;
   hasButtonProps?: boolean;
   iconAlign?: "left" | "right";
   size?: "large" | "small";
@@ -195,7 +195,9 @@ const StyledAccordionTitleContainer = styled.div<StyledAccordionTitleContainerPr
 
       ${buttonWidth &&
       css`
-        width: ${buttonWidth}px;
+        width: ${typeof buttonWidth === "number"
+          ? `${buttonWidth}px`
+          : buttonWidth};
       `}
     `}
   `}

diff --git a/src/components/accordion/accordion.test.js b/src/components/accordion/accordion.test.js
@@ -300,8 +300,8 @@ context("Testing Accordion component", () => {
         .and("have.attr", "type", "info");
     });
 
-    it.each([[100], [200], [300]])(
-      "should check accordion heading is a button with width %spx",
+    it.each(["100px", "200px", "300px"])(
+      "should check accordion heading is a button with width %s",
       (widths) => {
         CypressMountWithProviders(
           <AccordionComponent

diff --git a/src/components/dialog-full-screen/dialog-full-screen.stories.tsx b/src/components/dialog-full-screen/dialog-full-screen.stories.tsx
@@ -670,7 +670,7 @@ export const WithHideableHeaderChildren = () => {
       borders="none"
       disableContentPadding
       buttonHeading
-      buttonWidth={120}
+      buttonWidth="120px"
       ml="-13px"
     >
       <Box py="16px" pl="14px">