reshaped 3.3.11 → 3.3.12

package/dist/components/Button/tests/Button.stories.js

@@ -15,7 +15,7 @@ export default {
     },
 };
 const imgUrl = "https://images.unsplash.com/photo-1632502361954-0dd92ce797db?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1625&q=80";
-export const variant = () => (<Example>
+export const variantAndColor = () => (<Example>
 		<Example.Item title="variant: solid">
 			<View gap={4} direction="row">
 				<Button onClick={() => { }}>Button</Button>
@@ -28,9 +28,6 @@ export const variant = () => (<Example>
 				<Button onClick={() => { }} color="positive">
 					Button
 				</Button>
-				<Button onClick={() => { }} color="media">
-					Button
-				</Button>
 			</View>
 		</Example.Item>
 		<Example.Item title="variant: faded">
@@ -47,9 +44,6 @@ export const variant = () => (<Example>
 				<Button onClick={() => { }} color="positive" variant="faded">
 					Button
 				</Button>
-				<Button onClick={() => { }} color="media" variant="faded">
-					Button
-				</Button>
 				<div style={{ color: "#029CFD" }}>
 					<Button onClick={() => { }} color="inherit" variant="faded">
 						Inherit
@@ -71,6 +65,7 @@ export const variant = () => (<Example>
 				<Button onClick={() => { }} color="positive" variant="outline">
 					Button
 				</Button>
+
 				<div style={{ color: "#029CFD" }}>
 					<Button onClick={() => { }} color="inherit" variant="outline">
 						Inherit
@@ -99,20 +94,32 @@ export const variant = () => (<Example>
 				</div>
 			</View>
 		</Example.Item>
+		<Example.Item title="color: media">
+			<View backgroundColor="primary" borderRadius="medium" padding={4} direction="row" gap={4}>
+				<Button onClick={() => { }} color="media">
+					Button
+				</Button>
+
+				<Button onClick={() => { }} color="media" variant="faded">
+					Button
+				</Button>
+			</View>
+		</Example.Item>
 	</Example>);
 export const icon = () => (<Example>
-		<Example.Item title="icon: start">
+		<Example.Item title="icon">
 			<Button onClick={() => { }} icon={IconZap}>
 				Button
 			</Button>
 		</Example.Item>
-		<Example.Item title="icon: end">
+
+		<Example.Item title="endIcon">
 			<Button onClick={() => { }} endIcon={IconZap}>
 				Button
 			</Button>
 		</Example.Item>
 
-		<Example.Item title="icon: start and end">
+		<Example.Item title="icon, endIcon">
 			<Button onClick={() => { }} icon={IconZap} endIcon={IconZap}>
 				Button
 			</Button>
@@ -122,40 +129,9 @@ export const icon = () => (<Example>
 			<Button onClick={() => { }} icon={IconZap} attributes={{ "aria-label": "Action" }}/>
 		</Example.Item>
 	</Example>);
-export const elevated = () => (<Example>
-		<Example.Item title="color: neutral, elevated, variant: solid and outline">
-			<View gap={3} direction="row">
-				<Button elevated onClick={() => { }}>
-					Button
-				</Button>
-				<Button elevated variant="outline">
-					Button
-				</Button>
-			</View>
-		</Example.Item>
-		<Example.Item title="color: primary, elevated, variant: solid and outline">
-			<View gap={3} direction="row">
-				<Button elevated color="primary">
-					Button
-				</Button>
-				<Button elevated variant="outline" color="primary">
-					Button
-				</Button>
-			</View>
-		</Example.Item>
-
-		<Example.Item title="color: media, elevated, variant: solid">
-			<View gap={3} backgroundColor="primary-faded" padding={2} direction="row">
-				<Button color="media" elevated>
-					Button
-				</Button>
-			</View>
-		</Example.Item>
-	</Example>);
 export const size = () => (<Example>
-		<Example.Item title="size: small, all variants">
-			<View gap={3} direction="row">
-				<Button size="small">Button</Button>
+		<Example.Item title="size: small">
+			<View gap={4} direction="row">
 				<Button size="small" icon={IconZap}>
 					Button
 				</Button>
@@ -168,9 +144,8 @@ export const size = () => (<Example>
 			</View>
 		</Example.Item>
 
-		<Example.Item title="size: medium, all variants">
-			<View gap={3} direction="row">
-				<Button>Button</Button>
+		<Example.Item title="size: medium">
+			<View gap={4} direction="row">
 				<Button icon={IconZap}>Button</Button>
 				<Button variant="outline" icon={IconZap}>
 					Button
@@ -181,9 +156,8 @@ export const size = () => (<Example>
 			</View>
 		</Example.Item>
 
-		<Example.Item title="size: large, all variants">
-			<View gap={3} direction="row">
-				<Button size="large">Button</Button>
+		<Example.Item title="size: large">
+			<View gap={4} direction="row">
 				<Button size="large" icon={IconZap}>
 					Button
 				</Button>
@@ -196,9 +170,8 @@ export const size = () => (<Example>
 			</View>
 		</Example.Item>
 
-		<Example.Item title="size: xlarge, all variants">
-			<View gap={3} direction="row">
-				<Button size="xlarge">Button</Button>
+		<Example.Item title="size: xlarge">
+			<View gap={4} direction="row">
 				<Button size="xlarge" icon={IconZap}>
 					Button
 				</Button>
@@ -211,12 +184,40 @@ export const size = () => (<Example>
 			</View>
 		</Example.Item>
 
-		<Example.Item title={["responsive size", "[s] large", "[m+] medium"]}>
+		<Example.Item title="size: large, [m+] medium">
 			<Button size={{ s: "large", m: "medium" }} icon={IconZap}>
-				Button
+				Responsive
 			</Button>
 		</Example.Item>
 	</Example>);
+export const elevated = () => (<Example>
+		<Example.Item title="elevated, color: neutral">
+			<View direction="row" gap={4}>
+				<Button elevated onClick={() => { }}>
+					Button
+				</Button>
+				<Button elevated variant="outline" onClick={() => { }}>
+					Button
+				</Button>
+			</View>
+		</Example.Item>
+
+		<Example.Item title="elevated, color">
+			<View direction="row" gap={4}>
+				<Button elevated color="primary">
+					Button
+				</Button>
+				<Button elevated variant="outline" color="primary">
+					Button
+				</Button>
+				<View backgroundColor="primary" padding={4} borderRadius="medium">
+					<Button color="media" elevated>
+						Button
+					</Button>
+				</View>
+			</View>
+		</Example.Item>
+	</Example>);
 export const rounded = () => (<Example>
 		<Example.Item title="rounded, size: small, all variants">
 			<View gap={3} direction="row">
@@ -288,46 +289,48 @@ export const fullWidth = () => (<Example>
 export const loading = () => (<Example>
 		<Example.Item title="loading, color: neutral, all variants">
 			<View gap={3} direction="row">
-				<Button loading>Button</Button>
-				<Button loading variant="faded">
+				<Button loading loadingAriaLabel="Loading">
+					Button
+				</Button>
+				<Button loading loadingAriaLabel="Loading" variant="faded">
 					Button
 				</Button>
-				<Button loading variant="outline">
+				<Button loading loadingAriaLabel="Loading" variant="outline">
 					Button
 				</Button>
-				<Button loading variant="ghost">
+				<Button loading loadingAriaLabel="Loading" variant="ghost">
 					Button
 				</Button>
 			</View>
 		</Example.Item>
 		<Example.Item title="loading, color critical, all variants">
 			<View gap={3} direction="row">
-				<Button loading color="critical">
+				<Button loading loadingAriaLabel="Loading" color="critical">
 					Button
 				</Button>
-				<Button loading color="critical" variant="faded">
+				<Button loading loadingAriaLabel="Loading" color="critical" variant="faded">
 					Button
 				</Button>
-				<Button loading color="critical" variant="outline">
+				<Button loading loadingAriaLabel="Loading" color="critical" variant="outline">
 					Button
 				</Button>
-				<Button loading color="critical" variant="ghost">
+				<Button loading loadingAriaLabel="Loading" color="critical" variant="ghost">
 					Button
 				</Button>
 			</View>
 		</Example.Item>
 		<Example.Item title="loading, color positive, all variants">
 			<View gap={3} direction="row">
-				<Button loading color="positive">
+				<Button loading loadingAriaLabel="Loading" color="positive">
 					Button
 				</Button>
-				<Button loading color="positive" variant="faded">
+				<Button loading loadingAriaLabel="Loading" color="positive" variant="faded">
 					Button
 				</Button>
-				<Button loading color="positive" variant="outline">
+				<Button loading loadingAriaLabel="Loading" color="positive" variant="outline">
 					Button
 				</Button>
-				<Button loading color="positive" variant="ghost">
+				<Button loading loadingAriaLabel="Loading" color="positive" variant="ghost">
 					Button
 				</Button>
 			</View>
@@ -339,10 +342,10 @@ export const loading = () => (<Example>
 
 				<div style={{ position: "absolute", top: 16, left: 16 }}>
 					<View gap={3} direction="row">
-						<Button color="media" loading>
+						<Button color="media" loading loadingAriaLabel="Loading">
 							Button
 						</Button>
-						<Button color="media" variant="faded">
+						<Button color="media" variant="faded" loading loadingAriaLabel="Loading">
 							Button
 						</Button>
 					</View>
@@ -351,13 +354,13 @@ export const loading = () => (<Example>
 		</Example.Item>
 
 		<Example.Item title={["loading, long button text", "button size should stay the same"]}>
-			<Button loading color="primary">
+			<Button loading loadingAriaLabel="Loading" color="primary">
 				Long button text
 			</Button>
 		</Example.Item>
 
 		<Example.Item title={["loading, icon only", "button keep square 1/1 ratio"]}>
-			<Button icon={IconZap} rounded loading/>
+			<Button icon={IconZap} rounded loading loadingAriaLabel="Loading"/>
 		</Example.Item>
 	</Example>);
 export const highlighted = () => (<Example>
@@ -486,7 +489,7 @@ export const group = () => (<Example>
 		</Example.Item>
 		<Example.Item title="variant: solid">
 			<View gap={2}>
-				{["neutral", "primary", "critical", "positive", "media"].map((color) => (<Button.Group>
+				{["neutral", "primary", "critical", "positive", "media"].map((color) => (<Button.Group key={color}>
 						<Button color={color}>One</Button>
 						<Button color={color}>Two</Button>
 						<Button color={color}>Three</Button>
@@ -495,7 +498,7 @@ export const group = () => (<Example>
 		</Example.Item>
 		<Example.Item title="variant: outline">
 			<View gap={2}>
-				{["neutral", "primary", "critical", "positive", "media"].map((color) => (<Button.Group>
+				{["neutral", "primary", "critical", "positive", "media"].map((color) => (<Button.Group key={color}>
 						<Button color={color} variant="outline">
 							One
 						</Button>
@@ -510,7 +513,7 @@ export const group = () => (<Example>
 		</Example.Item>
 		<Example.Item title="variant: faded">
 			<View gap={2}>
-				{["neutral", "primary", "critical", "positive", "media"].map((color) => (<Button.Group>
+				{["neutral", "primary", "critical", "positive", "media"].map((color) => (<Button.Group key={color}>
 						<Button color={color} variant="faded">
 							One
 						</Button>
@@ -526,7 +529,7 @@ export const group = () => (<Example>
 
 		<Example.Item title="variant: ghost">
 			<View gap={2}>
-				{["neutral", "primary", "critical", "positive"].map((color) => (<Button.Group>
+				{["neutral", "primary", "critical", "positive"].map((color) => (<Button.Group key={color}>
 						<Button color={color} variant="ghost">
 							One
 						</Button>

package/dist/components/Button/tests/Button.test.stories.d.ts

@@ -0,0 +1,27 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: import("../Button.types").Export;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const children: StoryObj;
+export declare const href: StoryObj;
+export declare const onClick: StoryObj<{
+    handleClick: ReturnType<typeof fn>;
+}>;
+export declare const hrefOnClick: StoryObj<{
+    handleClick: ReturnType<typeof fn>;
+}>;
+export declare const disabled: StoryObj;
+export declare const className: StoryObj;
+export declare const group: StoryObj;
+export declare const groupClassName: StoryObj;

package/dist/components/Button/tests/Button.test.stories.js

@@ -0,0 +1,112 @@
+import { userEvent, expect, fn } from "@storybook/test";
+import Button from "../index.js";
+export default {
+    title: "Components/Button/tests",
+    component: Button,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/button",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const children = {
+    name: "children",
+    render: () => <Button>Trigger</Button>,
+    play: async ({ canvas }) => {
+        const el = canvas.getByText("Trigger");
+        expect(el).toBeInTheDocument();
+        expect(el.tagName).toBe("SPAN");
+    },
+};
+export const href = {
+    name: "href",
+    render: () => <Button href="https://reshaped.so">Trigger</Button>,
+    play: async ({ canvas }) => {
+        const el = canvas.getByRole("link");
+        expect(el).toHaveAttribute("href", "https://reshaped.so");
+    },
+};
+export const onClick = {
+    name: "onClick",
+    args: {
+        handleClick: fn(),
+    },
+    render: (args) => <Button onClick={args.handleClick}>Trigger</Button>,
+    play: async ({ canvas, args }) => {
+        const { handleClick } = args;
+        const el = canvas.getAllByRole("button")[0];
+        await userEvent.click(el);
+        expect(el).toHaveAttribute("type", "button");
+        expect(handleClick).toHaveBeenCalledTimes(1);
+        expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: el }));
+    },
+};
+export const hrefOnClick = {
+    name: "href + onClick",
+    args: {
+        handleClick: fn(),
+    },
+    render: (args) => (<Button onClick={(e) => {
+            e.preventDefault();
+            args.handleClick(e);
+        }} href="https://reshaped.so">
+			Trigger
+		</Button>),
+    play: async ({ canvas, args }) => {
+        const { handleClick } = args;
+        const el = canvas.getByRole("link");
+        await userEvent.click(el);
+        expect(el).toHaveAttribute("href", "https://reshaped.so");
+        expect(handleClick).toHaveBeenCalledTimes(1);
+        expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: el }));
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => (<Button disabled onClick={() => { }}>
+			Trigger
+		</Button>),
+    play: async ({ canvas }) => {
+        const el = canvas.getAllByRole("button")[0];
+        expect(el).toBeDisabled();
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Button className="test-classname" attributes={{ id: "test-id" }}>
+				Trigger
+			</Button>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};
+export const group = {
+    name: "group",
+    render: () => (<Button.Group>
+			<Button>Trigger</Button>
+			<Button>Trigger</Button>
+		</Button.Group>),
+    play: async ({ canvas }) => {
+        const el = canvas.getByRole("group");
+        expect(el).toBeInTheDocument();
+        expect(el.childElementCount).toEqual(2);
+    },
+};
+export const groupClassName = {
+    name: "group className, attributes",
+    render: () => (<div data-testid="root">
+			<Button.Group className="test-classname" attributes={{ id: "test-id" }}>
+				<Button>Trigger</Button>
+			</Button.Group>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/components/Calendar/tests/Calendar.test.stories.d.ts

@@ -0,0 +1,26 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").CalendarProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const base: StoryObj;
+export declare const onChange: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const defaultValue: StoryObj;
+export declare const value: StoryObj;
+export declare const range: StoryObj;
+export declare const minMax: StoryObj;
+export declare const monthSelection: StoryObj;
+export declare const ariaLabels: StoryObj;
+export declare const keyboardNavigation: StoryObj;

package/dist/components/Calendar/tests/Calendar.test.stories.js

@@ -0,0 +1,161 @@
+import { expect, userEvent, fn } from "@storybook/test";
+import Calendar from "../index.js";
+export default {
+    title: "Components/Calendar/tests",
+    component: Calendar,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/calendar",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const base = {
+    name: "base",
+    render: () => <Calendar defaultMonth={new Date(2020, 0, 1)}/>,
+    play: async ({ canvas }) => {
+        const monthTitleEl = canvas.getByText("January 2020");
+        const gridEl = canvas.getByRole("grid");
+        const gridCellEls = canvas.getAllByRole("gridcell");
+        const dateEls = canvas.getAllByRole("checkbox");
+        const buttonEls = canvas.getAllByRole("button");
+        expect(monthTitleEl).toBeInTheDocument();
+        expect(gridEl).toBeInTheDocument();
+        expect(gridCellEls).toHaveLength(31);
+        expect(dateEls).toHaveLength(31);
+        expect(dateEls[0].getAttribute("aria-label")).toBe("Wednesday, January 1");
+        expect(dateEls[0]).toHaveAttribute("tabIndex", "0");
+        expect(dateEls[1]).toHaveAttribute("tabIndex", "-1");
+        // Previous month button
+        expect(buttonEls[0].getAttribute("aria-label")).toBe("Previous month");
+        // Month select button
+        expect(buttonEls[1].innerHTML).toContain("Select a month");
+        // Next month button
+        expect(buttonEls[2].getAttribute("aria-label")).toBe("Next month");
+    },
+};
+export const onChange = {
+    name: "onChange",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => <Calendar defaultMonth={new Date(2020, 0)} onChange={args.handleChange}/>,
+    play: async ({ canvas, args }) => {
+        const dateEls = canvas.getAllByRole("checkbox");
+        await userEvent.click(dateEls[1]);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        // TODO: https://github.com/storybookjs/storybook/issues/30503
+        // expect(args.handleChange).toHaveBeenCalledWith({ value: new Date(2020, 0, 2) });
+    },
+};
+export const defaultValue = {
+    name: "defaultValue",
+    render: () => <Calendar defaultMonth={new Date(2020, 0)} defaultValue={new Date(2020, 0, 5)}/>,
+    play: async ({ canvas }) => {
+        const dateEls = canvas.getAllByRole("checkbox");
+        const selectedDateEl = dateEls[4];
+        expect(selectedDateEl).toBeInTheDocument();
+        expect(selectedDateEl).toHaveAttribute("tabIndex", "0");
+        expect(selectedDateEl).toHaveAttribute("aria-checked", "true");
+        await userEvent.click(dateEls[6], { delay: null });
+        expect(dateEls[6]).toHaveAttribute("aria-checked", "true");
+    },
+};
+export const value = {
+    name: "value",
+    render: () => <Calendar defaultMonth={new Date(2020, 0)} value={new Date(2020, 0, 5)}/>,
+    play: async ({ canvas }) => {
+        const dateEls = canvas.getAllByRole("checkbox");
+        const selectedDateEl = dateEls[4];
+        expect(selectedDateEl).toBeInTheDocument();
+        expect(selectedDateEl).toHaveAttribute("tabIndex", "0");
+        expect(selectedDateEl).toHaveAttribute("aria-checked", "true");
+        await userEvent.click(dateEls[6], { delay: null });
+        expect(dateEls[6]).toHaveAttribute("aria-checked", "false");
+    },
+};
+export const range = {
+    name: "defaultValue, range",
+    render: () => (<Calendar defaultMonth={new Date(2020, 0)} range defaultValue={{ start: new Date(2020, 0, 5), end: new Date(2020, 0, 7) }}/>),
+    play: async ({ canvas }) => {
+        const dateEls = canvas.getAllByRole("checkbox");
+        const startDateEl = dateEls[4];
+        const endDateEl = dateEls[6];
+        expect(startDateEl).toHaveAttribute("tabIndex", "0");
+        expect(startDateEl).toHaveAttribute("aria-checked", "true");
+        expect(endDateEl).toHaveAttribute("tabIndex", "-1");
+        expect(endDateEl).toHaveAttribute("aria-checked", "true");
+        await userEvent.click(dateEls[3], { delay: null });
+        expect(dateEls[3]).toHaveAttribute("aria-checked", "true");
+        expect(dateEls[3]).toHaveAttribute("tabIndex", "0");
+        expect(startDateEl).toHaveAttribute("aria-checked", "false");
+        expect(startDateEl).toHaveAttribute("tabIndex", "-1");
+        expect(endDateEl).toHaveAttribute("aria-checked", "false");
+        expect(endDateEl).toHaveAttribute("tabIndex", "-1");
+        // Click before the start date
+        await userEvent.click(dateEls[2], { delay: null });
+        expect(dateEls[2]).toHaveAttribute("aria-checked", "true");
+        expect(dateEls[2]).toHaveAttribute("tabIndex", "0");
+        expect(dateEls[3]).toHaveAttribute("aria-checked", "false");
+        expect(dateEls[3]).toHaveAttribute("tabIndex", "-1");
+        await userEvent.click(dateEls[4], { delay: null });
+        expect(dateEls[2]).toHaveAttribute("aria-checked", "true");
+        expect(dateEls[2]).toHaveAttribute("tabIndex", "0");
+        expect(dateEls[4]).toHaveAttribute("aria-checked", "true");
+        expect(dateEls[4]).toHaveAttribute("tabIndex", "-1");
+    },
+};
+export const minMax = {
+    name: "min, max",
+    render: () => (<Calendar min={new Date(2020, 0, 5)} max={new Date(2020, 0, 25)} defaultMonth={new Date(2020, 0)}/>),
+    play: async ({ canvas }) => {
+        const dateEls = canvas.getAllByRole("checkbox");
+        expect(dateEls).toHaveLength(21);
+    },
+};
+export const monthSelection = {
+    name: "month selection",
+    render: () => <Calendar defaultMonth={new Date(2020, 0)}/>,
+    play: async ({ canvas }) => {
+        const buttonEls = canvas.getAllByRole("button");
+        await userEvent.click(buttonEls[1], { delay: null });
+        const monthEls = canvas.getAllByRole("button").filter((el) => el.hasAttribute("data-rs-date"));
+        expect(monthEls).toHaveLength(12);
+    },
+};
+export const ariaLabels = {
+    name: "aria labels",
+    render: () => (<Calendar defaultMonth={new Date(2020, 0)} nextYearAriaLabel="Test next year" nextMonthAriaLabel="Test next month" renderDateAriaLabel={() => "Test date"} renderMonthAriaLabel={() => "Test month"} previousYearAriaLabel="Test previous year" previousMonthAriaLabel="Test previous month" monthSelectionAriaLabel="Test month selection"/>),
+    play: async ({ canvas }) => {
+        const buttonEls = canvas.getAllByRole("button");
+        const dateEls = canvas.getAllByRole("checkbox");
+        expect(buttonEls[0]).toHaveAttribute("aria-label", "Test previous month");
+        expect(buttonEls[1]).toHaveTextContent("Test month selection");
+        expect(buttonEls[2]).toHaveAttribute("aria-label", "Test next month");
+        expect(dateEls[0]).toHaveAttribute("aria-label", "Test date");
+        await userEvent.click(buttonEls[1], { delay: null });
+        const yearButtonEls = canvas.getAllByRole("button");
+        expect(yearButtonEls[0]).toHaveAttribute("aria-label", "Test previous year");
+        expect(yearButtonEls[1]).toHaveAttribute("aria-label", "Test next year");
+        expect(yearButtonEls[2]).toHaveAttribute("aria-label", "Test month");
+    },
+};
+export const keyboardNavigation = {
+    name: "keyboard navigation",
+    render: () => <Calendar defaultMonth={new Date(2020, 0)}/>,
+    play: async ({ canvas }) => {
+        const user = userEvent.setup();
+        const dateEls = canvas.getAllByRole("checkbox");
+        dateEls[0].focus();
+        await user.keyboard("{ArrowRight/}");
+        expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-02");
+        await user.keyboard("{ArrowLeft/}");
+        expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-01");
+        await user.keyboard("{ArrowDown/}");
+        expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-08");
+        await user.keyboard("{ArrowUp/}");
+        expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-01");
+        await user.keyboard("{ArrowUp/}");
+        expect(document.activeElement).toHaveAttribute("data-rs-date", "2019-12-25");
+    },
+};

package/dist/components/Card/tests/Card.stories.d.ts

@@ -28,4 +28,3 @@ export declare const selected: () => React.JSX.Element;
 export declare const elevated: () => React.JSX.Element;
 export declare const bleed: () => React.JSX.Element;
 export declare const height: () => React.JSX.Element;
-export declare const testComposition: () => React.JSX.Element;

package/dist/components/Card/tests/Card.stories.js

@@ -1,7 +1,6 @@
 import React from "react";
 import { Example, Placeholder } from "../../../utilities/storybook/index.js";
 import Card from "../index.js";
-import View from "../../View/index.js";
 export default {
     title: "Components/Card",
     component: Card,
@@ -79,13 +78,3 @@ export const height = () => (<Example>
 			<Card height="200px"/>
 		</Example.Item>
 	</Example>);
-export const testComposition = () => (<Example>
-		<Example.Item title="padding: 0, view with padding inside">
-			<Card padding={0}>
-				<Placeholder />
-				<View padding={4}>
-					<Placeholder />
-				</View>
-			</Card>
-		</Example.Item>
-	</Example>);