Skip to content

Commit

Permalink
feat(button-toggle): add minor child
Browse files Browse the repository at this point in the history
  • Loading branch information
@DobroTora
DobroTora committed Aug 25, 2023
1 parent 0183a35 commit eaa88d0
Show file tree
Hide file tree
Showing 11 changed files with 713 additions and 35 deletions.
21 changes: 20 additions & 1 deletion cypress/components/button-toggle/button-toggle.cy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@ import {
ButtonToggle,
ButtonToggleProps,
} from "../../../src/components/button-toggle";
import { ButtonToggleComponent } from "../../../src/components/button-toggle/button-toggle-test.stories";
import {
ButtonToggleComponent,
ButtonToggleGroupComponent,
} from "../../../src/components/button-toggle/button-toggle-test.stories";
import * as stories from "../../../src/components/button-toggle/button-toggle-group/button-toggle-group-test.stories";
import {
buttonTogglePreview,
Expand Down Expand Up @@ -323,6 +326,22 @@ context("Testing Button-Toggle component", () => {
});
});

describe("should render Button Toggle with variant prop", () => {
const variants = ["default", "minor"];

it.each(variants)(
"renders with variant prop, which is set to %s",
(variantType) => {
CypressMountWithProviders(
<ButtonToggleGroupComponent
id="button-toggle-group-id"
variant={variantType}
/>
);
}
);
});

describe("Accessibility tests for Button-Toggle component", () => {
it("should pass accessibility tests for Button-Toggle default story", () => {
CypressMountWithProviders(<ButtonToggleComponent />);
Expand Down
10 changes: 5 additions & 5 deletions src/components/button-toggle/__snapshots__/button-toggle.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ exports[`ButtonToggle General styling renders correctly when grouped 1`] = `
}
.c3.c3.c3.c3 .c1 {
border-radius: var(--borderRadius400);
border-radius: var(--borderRadius050);
}
.c0 {
Expand All @@ -66,13 +66,13 @@ exports[`ButtonToggle General styling renders correctly when grouped 1`] = `
}
.c0.c0.c0.c0:first-of-type .c1 {
border-top-left-radius: var(--borderRadius400);
border-bottom-left-radius: var(--borderRadius400);
border-top-left-radius: var(--borderRadius050);
border-bottom-left-radius: var(--borderRadius050);
}
.c0.c0.c0.c0:last-of-type .c1 {
border-top-right-radius: var(--borderRadius400);
border-bottom-right-radius: var(--borderRadius400);
border-top-right-radius: var(--borderRadius050);
border-bottom-right-radius: var(--borderRadius050);
}
.c0:not(:first-of-type) {
Expand Down
4 changes: 4 additions & 0 deletions src/components/button-toggle/button-toggle-group/button-toggle-group.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ export interface ButtonToggleGroupProps extends MarginProps, TagProps {
helpAriaLabel?: string;
/** set this to true to allow the buttons within the group to be deselected when already selected, leaving no selected button */
allowDeselect?: boolean;
variant?: "default" | "minor";
}

type ButtonToggleGroupContextType = {
Expand All @@ -79,6 +80,7 @@ type ButtonToggleGroupContextType = {
isInGroup: boolean;
firstButton?: HTMLButtonElement;
childButtonCallbackRef?: (button: HTMLButtonElement | null) => void;
variant?: "default" | "minor";
};

let deprecateNameWarnTriggered = false;
Expand Down Expand Up @@ -111,6 +113,7 @@ const ButtonToggleGroup = ({
name,
onChange,
value,
variant = "default",
"data-component": dataComponent = "button-toggle-group",
"data-element": dataElement,
"data-role": dataRole,
Expand Down Expand Up @@ -237,6 +240,7 @@ const ButtonToggleGroup = ({
isInGroup: true,
firstButton,
childButtonCallbackRef,
variant,
}}
>
<StyledButtonToggleGroupWrapper
Expand Down
22 changes: 22 additions & 0 deletions src/components/button-toggle/button-toggle-group/button-toggle-group.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -331,6 +331,28 @@ describe("ButtonToggleGroup", () => {
});
});

describe("renders with variant prop", () => {
it("renders with variant prop, which is set to default", () => {
const wrapper = mount(
<ButtonToggleGroup variant="default" id="button-toggle-group-id">
<ButtonToggle>Foo</ButtonToggle>
</ButtonToggleGroup>
);
expect(wrapper.find(StyledButtonToggle).prop("variant")).toEqual(
"default"
);
});

it("renders with variant prop, which is set to minor", () => {
const wrapper = mount(
<ButtonToggleGroup variant="minor" id="button-toggle-group-id">
<ButtonToggle>Foo</ButtonToggle>
</ButtonToggleGroup>
);
expect(wrapper.find(StyledButtonToggle).prop("variant")).toEqual("minor");
});
});

describe("keyboard navigation", () => {
let wrapper: ReactWrapper;
let container: HTMLElement | null;
Expand Down
159 changes: 159 additions & 0 deletions src/components/button-toggle/button-toggle-group/button-toggle-group.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,32 @@ export const Controlled: ComponentStory<typeof ButtonToggleGroup> = () => {
);
};

export const ControlledMinor: ComponentStory<typeof ButtonToggleGroup> = () => {
const [value, setValue] = useState("bar");
function onChangeHandler(
event: React.MouseEvent<HTMLButtonElement>,
selectedValue?: string
) {
setValue(selectedValue as string);
}
return (
<ButtonToggleGroup
id="button-toggle-group-controlled-id"
label="Controlled example"
labelHelp="help message"
helpAriaLabel="Help"
fieldHelp="field help mesage"
onChange={onChangeHandler}
value={value}
variant="minor"
>
<ButtonToggle value="foo">Foo</ButtonToggle>
<ButtonToggle value="bar">Bar</ButtonToggle>
<ButtonToggle value="baz">Baz</ButtonToggle>
</ButtonToggleGroup>
);
};

export const Grouped: ComponentStory<typeof ButtonToggleGroup> = () => (
<ButtonToggleGroup
id="button-toggle-group-grouped-id"
Expand All @@ -64,6 +90,28 @@ export const Grouped: ComponentStory<typeof ButtonToggleGroup> = () => (
</ButtonToggleGroup>
);

export const GroupedMinor: ComponentStory<typeof ButtonToggleGroup> = () => (
<ButtonToggleGroup
id="button-toggle-group-grouped-id"
label="Grouped example"
labelHelp="help message"
helpAriaLabel="Help"
fieldHelp="field help mesage"
onChange={() => {}}
variant="minor"
>
<ButtonToggle value="foo" grouped>
Foo
</ButtonToggle>
<ButtonToggle value="bar" grouped>
Bar
</ButtonToggle>
<ButtonToggle value="baz" grouped>
Baz
</ButtonToggle>
</ButtonToggleGroup>
);

export const FullWidth: ComponentStory<typeof ButtonToggleGroup> = () => (
<ButtonToggleGroup
id="button-toggle-group-fullWidth-id"
Expand All @@ -86,6 +134,29 @@ export const FullWidth: ComponentStory<typeof ButtonToggleGroup> = () => (
</ButtonToggleGroup>
);

export const FullWidthMinor: ComponentStory<typeof ButtonToggleGroup> = () => (
<ButtonToggleGroup
id="button-toggle-group-fullWidth-id"
fullWidth
label="fullWidth example"
labelHelp="help message"
helpAriaLabel="Help"
fieldHelp="field help mesage"
onChange={() => {}}
variant="minor"
>
<ButtonToggle value="foo" grouped>
Foo
</ButtonToggle>
<ButtonToggle value="bar" grouped>
Bar
</ButtonToggle>
<ButtonToggle value="baz" grouped>
Baz
</ButtonToggle>
</ButtonToggleGroup>
);

export const FieldHelp: ComponentStory<typeof ButtonToggleGroup> = () => (
<ButtonToggleGroup
id="button-toggle-group-help-inline-id"
Expand All @@ -102,6 +173,23 @@ export const FieldHelp: ComponentStory<typeof ButtonToggleGroup> = () => (
</ButtonToggleGroup>
);

export const FieldHelpMinor: ComponentStory<typeof ButtonToggleGroup> = () => (
<ButtonToggleGroup
id="button-toggle-group-help-inline-id"
label="FieldHelp inline example"
labelHelp="help message"
helpAriaLabel="Help"
fieldHelp="field help mesage"
fieldHelpInline
onChange={() => {}}
variant="minor"
>
<ButtonToggle value="foo">Foo</ButtonToggle>
<ButtonToggle value="bar">Bar</ButtonToggle>
<ButtonToggle value="baz">Baz</ButtonToggle>
</ButtonToggleGroup>
);

export const LabelInline: ComponentStory<typeof ButtonToggleGroup> = () => (
<ButtonToggleGroup
id="button-toggle-group-label-inline-id"
Expand All @@ -118,6 +206,25 @@ export const LabelInline: ComponentStory<typeof ButtonToggleGroup> = () => (
</ButtonToggleGroup>
);

export const LabelInlineMinor: ComponentStory<
typeof ButtonToggleGroup
> = () => (
<ButtonToggleGroup
id="button-toggle-group-label-inline-id"
label="Label inline example"
labelHelp="help message"
helpAriaLabel="Help"
fieldHelp="field help mesage"
labelInline
onChange={() => {}}
variant="minor"
>
<ButtonToggle value="foo">Foo</ButtonToggle>
<ButtonToggle value="bar">Bar</ButtonToggle>
<ButtonToggle value="baz">Baz</ButtonToggle>
</ButtonToggleGroup>
);

export const AllowDeselection: ComponentStory<
typeof ButtonToggleGroup
> = () => {
Expand Down Expand Up @@ -145,6 +252,34 @@ export const AllowDeselection: ComponentStory<
);
};

export const AllowDeselectionMinor: ComponentStory<
typeof ButtonToggleGroup
> = () => {
const [value, setValue] = useState("bar");
function onChangeHandler(
event: React.MouseEvent<HTMLButtonElement>,
selectedValue?: string
) {
setValue(selectedValue as string);
}
return (
<ButtonToggleGroup
id="button-toggle-group-allowDeselect-id"
label="deselection example"
onChange={onChangeHandler}
value={value}
allowDeselect
fieldHelp="Select an option, you can clear a selected option by selecting it again"
fieldHelpInline
variant="minor"
>
<ButtonToggle value="foo">Foo</ButtonToggle>
<ButtonToggle value="bar">Bar</ButtonToggle>
<ButtonToggle value="baz">Baz</ButtonToggle>
</ButtonToggleGroup>
);
};

export const AriaLabel: ComponentStory<typeof ButtonToggleGroup> = () => {
const [value, setValue] = useState("bar");
function onChangeHandler(
Expand All @@ -167,3 +302,27 @@ export const AriaLabel: ComponentStory<typeof ButtonToggleGroup> = () => {
</ButtonToggleGroup>
);
};

export const AriaLabelMinor: ComponentStory<typeof ButtonToggleGroup> = () => {
const [value, setValue] = useState("bar");
function onChangeHandler(
event: React.MouseEvent<HTMLButtonElement>,
selectedValue?: string
) {
setValue(selectedValue as string);
}
return (
<ButtonToggleGroup
id="button-toggle-group-ariaLabel-id"
aria-label="an accessible name"
onChange={onChangeHandler}
value={value}
allowDeselect
variant="minor"
>
<ButtonToggle value="foo">Foo</ButtonToggle>
<ButtonToggle value="bar">Bar</ButtonToggle>
<ButtonToggle value="baz">Baz</ButtonToggle>
</ButtonToggleGroup>
);
};
28 changes: 28 additions & 0 deletions src/components/button-toggle/button-toggle-test.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,34 @@ export const DefaultStory = () => {
);
};

export const ButtonToggleGroupMinorStory = () => {
const [value, setValue] = useState<string | undefined>("bar");
function onChangeHandler(
event: React.MouseEvent<HTMLButtonElement>,
selectedButtonValue?: string
) {
setValue(selectedButtonValue);
action("value set")(selectedButtonValue);
}
return (
<ButtonToggleGroup
id="button-toggle-group"
name="button-toggle-group"
label="Button Toggle Group test"
labelHelp="help message"
helpAriaLabel="Help"
fieldHelp="field help mesage"
onChange={onChangeHandler}
value={value}
variant="minor"
>
<ButtonToggle value="foo">Foo</ButtonToggle>
<ButtonToggle value="bar">Bar</ButtonToggle>
<ButtonToggle value="baz">Baz</ButtonToggle>
</ButtonToggleGroup>
);
};

export const WithoutGroup = (args: Partial<ButtonToggleProps>) => (
<div>
<ButtonToggle
Expand Down
4 changes: 3 additions & 1 deletion src/components/button-toggle/button-toggle.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,8 +107,8 @@ export const ButtonToggle = ({
isInGroup,
firstButton,
childButtonCallbackRef,
variant,
} = useContext(ButtonToggleGroupContext);

const callbackRef = (element: HTMLButtonElement | null) => {
buttonRef.current = element;
if (childButtonCallbackRef) {
Expand Down Expand Up @@ -186,6 +186,7 @@ export const ButtonToggle = ({
data-element={dataElement}
data-role={dataRole}
grouped={grouped}
variant={variant}
>
<StyledButtonToggle
aria-label={ariaLabel}
Expand All @@ -194,6 +195,7 @@ export const ButtonToggle = ({
buttonIcon={buttonIcon}
buttonIconSize={buttonIconSize}
data-element="button-toggle-button"
variant={variant}
disabled={disabled}
id={inputGuid.current}
onMouseEnter={onMouseEnter}
Expand Down
Loading

0 comments on commit eaa88d0

Please sign in to comment.