Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(accordion): change buttonWidth prop type to string (FE-5709) #5914

Merged
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/components/accordion/accordion-test.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -363,7 +363,7 @@ export const AccordionOpeningButton = () => {
borders="none"
iconAlign="left"
buttonHeading
buttonWidth={200}
buttonWidth="200px"
error="hello"
>
<div>Content</div>
Expand All @@ -378,7 +378,7 @@ export const AccordionOpeningButton = () => {
borders="none"
iconAlign="right"
buttonHeading
buttonWidth={200}
buttonWidth="200px"
>
<div>Content</div>
<div>Content</div>
Expand All @@ -394,7 +394,7 @@ export const AccordionOpeningButton = () => {
headerSpacing={{
px: 0,
}}
buttonWidth={96}
buttonWidth="96px"
>
<div>Content</div>
<div>Content</div>
Expand All @@ -408,7 +408,7 @@ export const AccordionOpeningButton = () => {
openTitle="Less info"
iconAlign="left"
buttonHeading
buttonWidth={120}
buttonWidth="120px"
headerSpacing={{
px: 1,
}}
Expand Down
4 changes: 2 additions & 2 deletions src/components/accordion/accordion.component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -95,7 +95,7 @@ export const Accordion = React.forwardRef<
warning,
info,
buttonHeading,
buttonWidth = 150,
buttonWidth = "150px",
openTitle,
...rest
}: AccordionProps & AccordionInternalProps,
Expand Down
38 changes: 31 additions & 7 deletions src/components/accordion/accordion.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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", () => {
Expand Down
8 changes: 4 additions & 4 deletions src/components/accordion/accordion.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -287,7 +287,7 @@ export const OpeningButton: ComponentStory<typeof Accordion> = () => {
borders="none"
iconAlign="left"
buttonHeading
buttonWidth={200}
buttonWidth="200px"
error="hello"
>
<div>Content</div>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
6 changes: 4 additions & 2 deletions src/components/accordion/accordion.style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -195,7 +195,9 @@ const StyledAccordionTitleContainer = styled.div<StyledAccordionTitleContainerPr

${buttonWidth &&
css`
width: ${buttonWidth}px;
width: ${typeof buttonWidth === "number"
? `${buttonWidth}px`
: buttonWidth};
`}
`}
`}
Expand Down
4 changes: 2 additions & 2 deletions src/components/accordion/accordion.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -670,7 +670,7 @@ export const WithHideableHeaderChildren = () => {
borders="none"
disableContentPadding
buttonHeading
buttonWidth={120}
buttonWidth="120px"
ml="-13px"
>
<Box py="16px" pl="14px">
Expand Down