From 34aa10c46af31aea3d9d81d081362d18e2127833 Mon Sep 17 00:00:00 2001
From: grabkowski <jakub.grabkowski@sage.com>
Date: Fri, 10 Mar 2023 17:19:18 +0100
Subject: [PATCH] feat(accordion): allow buttonWidth to accept string values

closes #5897
---
 .../accordion/accordion-test.stories.tsx      |  8 ++--
 .../accordion/accordion.component.tsx         |  4 +-
 src/components/accordion/accordion.spec.tsx   | 38 +++++++++++++++----
 .../accordion/accordion.stories.tsx           |  8 ++--
 src/components/accordion/accordion.style.ts   |  6 ++-
 src/components/accordion/accordion.test.js    |  4 +-
 .../dialog-full-screen.stories.tsx            |  2 +-
 7 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/src/components/accordion/accordion-test.stories.tsx b/src/components/accordion/accordion-test.stories.tsx
index 7588fe7273..f61171a244 100644
--- 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
index ba8c386c0e..047f64c436 100644
--- 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
index d3384839ad..70b0b97a7f 100644
--- 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
index 22071283c1..76a9b794c0 100644
--- 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
index 146b4fb37f..0cd1f8291a 100644
--- 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
index 5e74a91541..8ea2afaa38 100644
--- 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
index 85dccf6d8f..0aa9b0fc19 100644
--- 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">