TODO: KitchenSink
;
}
diff --git a/build.washingtonpost.com/pages/playroom.js b/build.washingtonpost.com/pages/playroom.js
index 639be5091..4fea0b545 100644
--- a/build.washingtonpost.com/pages/playroom.js
+++ b/build.washingtonpost.com/pages/playroom.js
@@ -257,15 +257,17 @@ export default function Playroom({
Drawer Sub-Component
@@ -88,7 +88,7 @@ describe("DrawerRoot", () => { }); const App = ({ handleChange }) => { - const [open] = React.useState(false); + const [open] = useState(false); return (
;
+} as Meta;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template: ComponentStory = (args) => {
- const [open, setOpen] = React.useState(false);
+const Template: StoryFn = (args) => {
+ const [open, setOpen] = useState(false);
const handleChange = (val) => {
setOpen(val);
@@ -46,13 +46,16 @@ const Template: ComponentStory = (args) => {
);
};
-export const Drawer = Template.bind({});
-Drawer.parameters = {
- chromatic: { disableSnapshot: true },
+export const Drawer = {
+ render: Template,
+
+ parameters: {
+ chromatic: { disableSnapshot: true },
+ },
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const FocusTemplate: ComponentStory = ({ loopFocus, ...args }) => (
+const FocusTemplate: StoryFn = ({ loopFocus, ...args }) => (
Trigger Drawer
@@ -80,16 +83,20 @@ const FocusTemplate: ComponentStory = ({ loopFocus, ...args }) => (
);
-export const Focus = FocusTemplate.bind({});
-Focus.args = {
- loopFocus: true,
-};
-Focus.parameters = {
- chromatic: { disableSnapshot: true },
+export const Focus = {
+ render: FocusTemplate,
+
+ args: {
+ loopFocus: true,
+ },
+
+ parameters: {
+ chromatic: { disableSnapshot: true },
+ },
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const PositionTemplate: ComponentStory = () => (
+const PositionTemplate: StoryFn = () => (
<>
Top
@@ -130,13 +137,16 @@ const PositionTemplate: ComponentStory = () => (
);
-export const Position = PositionTemplate.bind({});
-Position.parameters = {
- chromatic: { disableSnapshot: true },
+export const Position = {
+ render: PositionTemplate,
+
+ parameters: {
+ chromatic: { disableSnapshot: true },
+ },
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const AutoSizeTemplate: ComponentStory = () => {
+const AutoSizeTemplate: StoryFn = () => {
const text = [
`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Vestibulum
@@ -195,7 +205,7 @@ fringilla phasellus faucibus scelerisque eleifend donec. Aliquet
porttitor lacus luctus accumsan. Orci ac auctor augue mauris augue
neque gravida in fermentum.`,
];
- const [textLength, setTextLength] = React.useState(5);
+ const [textLength, setTextLength] = useState(5);
return (
@@ -231,13 +241,16 @@ neque gravida in fermentum.`,
);
};
-export const AutoSize = AutoSizeTemplate.bind({});
-AutoSize.parameters = {
- chromatic: { disableSnapshot: true },
+export const AutoSize = {
+ render: AutoSizeTemplate,
+
+ parameters: {
+ chromatic: { disableSnapshot: true },
+ },
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const ChromaticTemplate: ComponentStory = () => (
+const ChromaticTemplate: StoryFn = () => (
<>
@@ -273,13 +286,16 @@ const ChromaticTemplate: ComponentStory = () => (
);
-export const Chromatic = ChromaticTemplate.bind({});
-Chromatic.parameters = {
- docs: { disable: true },
+export const Chromatic = {
+ render: ChromaticTemplate,
+
+ parameters: {
+ docs: { disable: true },
+ },
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const InteractionsTemplate: ComponentStory = () => (
+const InteractionsTemplate: StoryFn = () => (
Trigger
@@ -290,24 +306,27 @@ const InteractionsTemplate: ComponentStory = () => (
);
-export const Interactions = InteractionsTemplate.bind({});
-Interactions.parameters = {
- chromatic: { disableSnapshot: true },
+export const Interactions = {
+ render: InteractionsTemplate,
+
+ parameters: {
+ chromatic: { disableSnapshot: true },
+ },
+
+ play: async () => {
+ const trigger = screen.getAllByText("Trigger")[0];
+ await userEvent.click(trigger);
+ await sleep(300);
+ const content = screen.getAllByText("Drawer Content")[0];
+ await expect(content).toBeVisible();
+ const close = screen.getByLabelText("Close Drawer");
+ await userEvent.click(close);
+ await sleep(300);
+ await expect(content).not.toBeInTheDocument();
+ },
};
// Function to emulate pausing between interactions
function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
-
-Interactions.play = async () => {
- const trigger = screen.getAllByText("Trigger")[0];
- await userEvent.click(trigger);
- await sleep(300);
- const content = screen.getAllByText("Drawer Content")[0];
- await expect(content).toBeVisible();
- const close = screen.getByLabelText("Close Drawer");
- await userEvent.click(close);
- await sleep(300);
- await expect(content).not.toBeInTheDocument();
-};
diff --git a/ui/error-message/src/ErrorMessage.tsx b/packages/kit/src/error-message/ErrorMessage.tsx
similarity index 90%
rename from ui/error-message/src/ErrorMessage.tsx
rename to packages/kit/src/error-message/ErrorMessage.tsx
index f07dca5fc..0093acb04 100644
--- a/ui/error-message/src/ErrorMessage.tsx
+++ b/packages/kit/src/error-message/ErrorMessage.tsx
@@ -1,5 +1,5 @@
-import * as React from "react";
-import { theme, css } from "@washingtonpost/wpds-theme";
+import React from "react";
+import { theme, css } from "../theme";
const NAME = "ErrorMessage";
diff --git a/ui/error-message/src/index.ts b/packages/kit/src/error-message/index.ts
similarity index 100%
rename from ui/error-message/src/index.ts
rename to packages/kit/src/error-message/index.ts
diff --git a/packages/kit/src/error-message/play.stories.tsx b/packages/kit/src/error-message/play.stories.tsx
new file mode 100644
index 000000000..692aa0e82
--- /dev/null
+++ b/packages/kit/src/error-message/play.stories.tsx
@@ -0,0 +1,15 @@
+import { ErrorMessage as Component } from "./";
+
+import type { Meta, StoryFn } from "@storybook/react";
+
+export default {
+ title: "ErrorMessage",
+ component: Component,
+} as Meta;
+
+export const ErrorMessage = {
+ args: {
+ children: "Error Message",
+ id: "my-error-message",
+ },
+};
diff --git a/ui/fieldset/src/Fieldset.tsx b/packages/kit/src/fieldset/Fieldset.tsx
similarity index 90%
rename from ui/fieldset/src/Fieldset.tsx
rename to packages/kit/src/fieldset/Fieldset.tsx
index 5c6ff7de1..e32a5a020 100644
--- a/ui/fieldset/src/Fieldset.tsx
+++ b/packages/kit/src/fieldset/Fieldset.tsx
@@ -1,6 +1,6 @@
-import * as React from "react";
-import * as Theme from "@washingtonpost/wpds-theme";
-import type * as WPDS from "@washingtonpost/wpds-theme";
+import React from "react";
+import * as Theme from "../theme";
+import type * as WPDS from "../theme";
const NAME = "Fieldset";
diff --git a/ui/fieldset/src/index.ts b/packages/kit/src/fieldset/index.ts
similarity index 100%
rename from ui/fieldset/src/index.ts
rename to packages/kit/src/fieldset/index.ts
diff --git a/packages/kit/src/fieldset/play.stories.tsx b/packages/kit/src/fieldset/play.stories.tsx
new file mode 100644
index 000000000..5a27a481b
--- /dev/null
+++ b/packages/kit/src/fieldset/play.stories.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { Fieldset as Component } from "./";
+
+import type { Meta, StoryFn } from "@storybook/react";
+
+export default {
+ title: "Fieldset",
+ component: Component,
+} as Meta;
+
+const Template: StoryFn = (args) => (
+ Content
+);
+
+export const Fieldset = {
+ render: Template,
+
+ args: {
+ legend: "Fieldset",
+ },
+};
diff --git a/ui/helper-text/src/HelperText.tsx b/packages/kit/src/helper-text/HelperText.tsx
similarity index 90%
rename from ui/helper-text/src/HelperText.tsx
rename to packages/kit/src/helper-text/HelperText.tsx
index 12cb2c95e..c73c5e84b 100644
--- a/ui/helper-text/src/HelperText.tsx
+++ b/packages/kit/src/helper-text/HelperText.tsx
@@ -1,5 +1,5 @@
-import * as React from "react";
-import { theme, css } from "@washingtonpost/wpds-theme";
+import React from "react";
+import { theme, css } from "../theme";
const NAME = "HelperText";
diff --git a/ui/helper-text/src/index.ts b/packages/kit/src/helper-text/index.ts
similarity index 100%
rename from ui/helper-text/src/index.ts
rename to packages/kit/src/helper-text/index.ts
diff --git a/packages/kit/src/helper-text/play.stories.tsx b/packages/kit/src/helper-text/play.stories.tsx
new file mode 100644
index 000000000..3c7345a84
--- /dev/null
+++ b/packages/kit/src/helper-text/play.stories.tsx
@@ -0,0 +1,15 @@
+import { HelperText as Component } from "./";
+
+import type { Meta, StoryFn } from "@storybook/react";
+
+export default {
+ title: "HelperText",
+ component: Component,
+} as Meta;
+
+export const HelperText = {
+ args: {
+ children: "Helper Text",
+ id: "my-helper-text",
+ },
+};
diff --git a/packages/kit/src/icon/icon.tsx b/packages/kit/src/icon/icon.tsx
index c50f18171..84c945087 100644
--- a/packages/kit/src/icon/icon.tsx
+++ b/packages/kit/src/icon/icon.tsx
@@ -1,4 +1,4 @@
-import { Children, cloneElement, forwardRef } from "react";
+import React, { Children, cloneElement, forwardRef } from "react";
import { VisuallyHidden } from "../visually-hidden";
import { css, theme } from "../theme";
diff --git a/packages/kit/src/icon/play.stories.tsx b/packages/kit/src/icon/play.stories.tsx
index 8e521ea7c..7603c65c1 100644
--- a/packages/kit/src/icon/play.stories.tsx
+++ b/packages/kit/src/icon/play.stories.tsx
@@ -1,3 +1,4 @@
+import React from "react";
import { within } from "@storybook/testing-library";
import { expect } from "@storybook/jest";
import { theme } from "../theme";
diff --git a/packages/kit/src/index.ts b/packages/kit/src/index.ts
index 1988e19b6..15d5540d4 100644
--- a/packages/kit/src/index.ts
+++ b/packages/kit/src/index.ts
@@ -1,3 +1,30 @@
+export * from "./dialog";
+export * from "./tooltip";
+export * from "./tabs";
+export * from "./select";
+export * from "./scrim";
+export * from "./radio-group";
+export * from "./popover";
+export * from "./pagination-dots";
+export * from "./input-textarea";
+export * from "./input-text";
+export * from "./input-shared";
+export * from "./input-search";
+export * from "./input-password";
+export * from "./input-label";
+export * from "./helper-text";
+export * from "./fieldset";
+export * from "./error-message";
+export * from "./drawer";
+export * from "./divider";
+export * from "./container";
+export * from "./checkbox";
+export * from "./carousel";
+export * from "./box";
+export * from "./avatar";
+export * from "./app-bar";
+export * from "./alert-banner";
+export * from "./action-menu";
export * from "./accordion";
export * from "./button";
export * from "./card";
@@ -5,3 +32,4 @@ export * from "./icon";
export * from "./switch";
export * from "./theme";
export * from "./visually-hidden";
+export * from "./navigation-menu";
diff --git a/ui/input-label/src/InputLabel.tsx b/packages/kit/src/input-label/InputLabel.tsx
similarity index 84%
rename from ui/input-label/src/InputLabel.tsx
rename to packages/kit/src/input-label/InputLabel.tsx
index c6292d9e1..2329e898f 100644
--- a/ui/input-label/src/InputLabel.tsx
+++ b/packages/kit/src/input-label/InputLabel.tsx
@@ -1,9 +1,9 @@
-import * as React from "react";
-import { styled, theme } from "@washingtonpost/wpds-theme";
-import type * as WPDS from "@washingtonpost/wpds-theme";
+import React from "react";
+import { styled, theme } from "../theme";
+import type * as WPDS from "../theme";
import * as Label from "@radix-ui/react-label";
import type { LabelProps } from "@radix-ui/react-label";
-import { RequiredIndicatorCSS } from "@washingtonpost/wpds-input-shared";
+import { RequiredIndicatorCSS } from "../input-shared";
const NAME = "InputLabel";
diff --git a/ui/input-label/src/index.ts b/packages/kit/src/input-label/index.ts
similarity index 100%
rename from ui/input-label/src/index.ts
rename to packages/kit/src/input-label/index.ts
diff --git a/packages/kit/src/input-label/play.stories.tsx b/packages/kit/src/input-label/play.stories.tsx
new file mode 100644
index 000000000..a5ee241d2
--- /dev/null
+++ b/packages/kit/src/input-label/play.stories.tsx
@@ -0,0 +1,13 @@
+import { InputLabel as Component } from "./";
+import type { StoryObj, Meta, StoryFn } from "@storybook/react";
+
+export default {
+ title: "InputLabel",
+ component: Component,
+} as Meta;
+
+export const InputLabel: StoryObj = {
+ args: {
+ children: "Label",
+ },
+};
diff --git a/ui/input-password/src/InputPassword.tsx b/packages/kit/src/input-password/InputPassword.tsx
similarity index 80%
rename from ui/input-password/src/InputPassword.tsx
rename to packages/kit/src/input-password/InputPassword.tsx
index b22a1a25a..a9ae39d56 100644
--- a/ui/input-password/src/InputPassword.tsx
+++ b/packages/kit/src/input-password/InputPassword.tsx
@@ -1,9 +1,9 @@
-import * as React from "react";
-import { InputText } from "@washingtonpost/wpds-input-text";
-import { Icon } from "@washingtonpost/wpds-icon";
+import React, { forwardRef, useState } from "react";
+import { InputText } from "../input-text";
+import { Icon } from "../icon";
import { Hide, Show } from "@washingtonpost/wpds-assets";
-import type { InputTextProps } from "@washingtonpost/wpds-input-text";
+import type { InputTextProps } from "../input-text";
const NAME = "InputPassword";
@@ -39,10 +39,7 @@ interface InputPasswordProps
*
* @extends InputText
*/
-export const InputPassword = React.forwardRef<
- HTMLInputElement,
- InputPasswordProps
->(
+export const InputPassword = forwardRef(
(
{
label = "Password",
@@ -52,7 +49,7 @@ export const InputPassword = React.forwardRef<
},
ref
) => {
- const [isHidden, setIsHidden] = React.useState(true);
+ const [isHidden, setIsHidden] = useState(true);
function handleButtonIconClick() {
setIsHidden((prevHidden) => !prevHidden);
diff --git a/ui/input-password/src/index.ts b/packages/kit/src/input-password/index.ts
similarity index 100%
rename from ui/input-password/src/index.ts
rename to packages/kit/src/input-password/index.ts
diff --git a/ui/input-password/src/play.stories.tsx b/packages/kit/src/input-password/play.stories.tsx
similarity index 57%
rename from ui/input-password/src/play.stories.tsx
rename to packages/kit/src/input-password/play.stories.tsx
index 155948709..98db6430e 100644
--- a/ui/input-password/src/play.stories.tsx
+++ b/packages/kit/src/input-password/play.stories.tsx
@@ -1,23 +1,19 @@
-import * as React from "react";
+import React from "react";
import { screen, userEvent } from "@storybook/testing-library";
import { expect } from "@storybook/jest";
import { InputPassword as Component } from "./";
-import { styled, theme } from "@washingtonpost/wpds-theme";
-import type { ComponentMeta, ComponentStory } from "@storybook/react";
+import { styled, theme } from "../theme";
+import type { Meta, StoryFn } from "@storybook/react";
export default {
title: "InputPassword",
component: Component,
-} as ComponentMeta;
+} as Meta;
-const Template: ComponentStory = (args) => (
- = () => (
+const InteractionsTemplate: StoryFn = () => (
= (args) => {
- const [term, setTerm] = React.useState("");
+const Template: StoryFn = (args) => {
+ const [term, setTerm] = useState("");
const results: { city: string; state: string }[] | null = useCityMatch(term);
@@ -74,14 +74,14 @@ const Template: ComponentStory = (args) => {
);
};
-export const Play = Template.bind({});
+export const Play = {
+ render: Template,
+ args: {},
+ name: "InputSearch",
-Play.args = {};
-
-Play.storyName = "InputSearch";
-
-Play.parameters = {
- chromatic: { disableSnapshot: true },
+ parameters: {
+ chromatic: { disableSnapshot: true },
+ },
};
const fetchCities = (value) => {
@@ -99,13 +99,13 @@ const fetchCities = (value) => {
);
};
-const AsyncTemplate: ComponentStory = (args) => {
- const [searchTerm, setSearchTerm] = React.useState("");
- const [results, setResults] = React.useState<
+const AsyncTemplate: StoryFn = (args) => {
+ const [searchTerm, setSearchTerm] = useState("");
+ const [results, setResults] = useState<
{ city: string; state: string }[] | undefined
>();
- React.useEffect(() => {
+ useEffect(() => {
if (searchTerm === "") {
setResults(undefined);
} else {
@@ -149,15 +149,16 @@ const AsyncTemplate: ComponentStory = (args) => {
);
};
-export const Async = AsyncTemplate.bind({});
+export const Async = {
+ render: AsyncTemplate,
+ args: {},
-Async.args = {};
-
-Async.parameters = {
- chromatic: { disableSnapshot: true },
+ parameters: {
+ chromatic: { disableSnapshot: true },
+ },
};
-const GroupingTemplate: ComponentStory = (args) => {
+const GroupingTemplate: StoryFn = (args) => {
return (
@@ -180,15 +181,16 @@ const GroupingTemplate: ComponentStory = (args) => {
);
};
-export const Grouping = GroupingTemplate.bind({});
+export const Grouping = {
+ render: GroupingTemplate,
+ args: {},
-Grouping.args = {};
-
-Grouping.parameters = {
- chromatic: { disableSnapshot: true },
+ parameters: {
+ chromatic: { disableSnapshot: true },
+ },
};
-const ScrollTemplate: ComponentStory = (args) => {
+const ScrollTemplate: StoryFn = (args) => {
return (
@@ -207,15 +209,16 @@ const ScrollTemplate: ComponentStory = (args) => {
);
};
-export const Scroll = ScrollTemplate.bind({});
-
-Scroll.args = {};
+export const Scroll = {
+ render: ScrollTemplate,
+ args: {},
-Scroll.parameters = {
- chromatic: { disableSnapshot: true },
+ parameters: {
+ chromatic: { disableSnapshot: true },
+ },
};
-const InteractionsTemplate: ComponentStory = () => (
+const InteractionsTemplate: StoryFn = () => (
= () => (
);
-export const Interactions = InteractionsTemplate.bind({});
+export const Interactions = {
+ render: InteractionsTemplate,
-Interactions.play = async () => {
- const input = await screen.findByLabelText("Search");
- await userEvent.type(input, "app", {
- delay: 100,
- });
- await userEvent.keyboard("[ArrowDown]");
- await expect(input).toHaveDisplayValue("Apple");
+ play: async () => {
+ const input = await screen.findByLabelText("Search");
+ await userEvent.type(input, "app", {
+ delay: 100,
+ });
+ await userEvent.keyboard("[ArrowDown]");
+ await expect(input).toHaveDisplayValue("Apple");
+ },
};
diff --git a/ui/input-shared/src/InputShared.tsx b/packages/kit/src/input-shared/InputShared.tsx
similarity index 98%
rename from ui/input-shared/src/InputShared.tsx
rename to packages/kit/src/input-shared/InputShared.tsx
index db680cb65..0e6632faa 100644
--- a/ui/input-shared/src/InputShared.tsx
+++ b/packages/kit/src/input-shared/InputShared.tsx
@@ -1,5 +1,5 @@
import * as React from "react";
-import { css, theme, globalCss } from "@washingtonpost/wpds-theme";
+import { css, theme, globalCss } from "../theme";
export const FloatingLabelStyles = {
fontSize: theme.fontSizes["075"],
diff --git a/ui/input-shared/src/index.ts b/packages/kit/src/input-shared/index.ts
similarity index 100%
rename from ui/input-shared/src/index.ts
rename to packages/kit/src/input-shared/index.ts
diff --git a/ui/input-text/src/InputText.tsx b/packages/kit/src/input-text/InputText.tsx
similarity index 94%
rename from ui/input-text/src/InputText.tsx
rename to packages/kit/src/input-text/InputText.tsx
index 8c661732d..e9fcbda03 100644
--- a/ui/input-text/src/InputText.tsx
+++ b/packages/kit/src/input-text/InputText.tsx
@@ -1,17 +1,16 @@
-import * as React from "react";
-import { useEffect, useState } from "react";
-import { theme, styled } from "@washingtonpost/wpds-theme";
-import { Button } from "@washingtonpost/wpds-button";
-import { Divider } from "@washingtonpost/wpds-divider";
-import { Icon } from "@washingtonpost/wpds-icon";
+import React, { useEffect, useState } from "react";
+import { theme, styled } from "../theme";
+import { Button } from "../button";
+import { Divider } from "../divider";
+import { Icon } from "../icon";
import {
useFloating,
unstyledInputStyles,
globalInputAutoFillTriggerAnimations,
-} from "@washingtonpost/wpds-input-shared";
-import { ErrorMessage } from "@washingtonpost/wpds-error-message";
-import { HelperText } from "@washingtonpost/wpds-helper-text";
-import { VisuallyHidden } from "@washingtonpost/wpds-visually-hidden";
+} from "../input-shared";
+import { ErrorMessage } from "../error-message";
+import { HelperText } from "../helper-text";
+import { VisuallyHidden } from "../visually-hidden";
import {
Search,
Globe,
@@ -21,7 +20,7 @@ import {
} from "@washingtonpost/wpds-assets";
import { TextInputLabel } from "./TextInputLabel";
import { StyledContainer } from "./StyledContainer";
-import type * as WPDS from "@washingtonpost/wpds-theme";
+import type * as WPDS from "../theme";
const NAME = "InputText";
diff --git a/ui/input-text/src/StyledContainer.tsx b/packages/kit/src/input-text/StyledContainer.tsx
similarity index 87%
rename from ui/input-text/src/StyledContainer.tsx
rename to packages/kit/src/input-text/StyledContainer.tsx
index 6a978adf9..7f4c90ff4 100644
--- a/ui/input-text/src/StyledContainer.tsx
+++ b/packages/kit/src/input-text/StyledContainer.tsx
@@ -1,12 +1,12 @@
-import * as React from "react";
-import { theme, styled } from "@washingtonpost/wpds-theme";
-import type * as WPDS from "@washingtonpost/wpds-theme";
+import React from "react";
+import { theme, styled } from "../theme";
+import type * as WPDS from "../theme";
import {
sharedInputStyles,
sharedInputVariants,
FloatingLabelStyles,
-} from "@washingtonpost/wpds-input-shared";
+} from "../input-shared";
import { TextInputLabel } from "./TextInputLabel";
diff --git a/ui/input-text/src/TextInputLabel.tsx b/packages/kit/src/input-text/TextInputLabel.tsx
similarity index 65%
rename from ui/input-text/src/TextInputLabel.tsx
rename to packages/kit/src/input-text/TextInputLabel.tsx
index ffe7ba9ff..b186d08e7 100644
--- a/ui/input-text/src/TextInputLabel.tsx
+++ b/packages/kit/src/input-text/TextInputLabel.tsx
@@ -1,6 +1,6 @@
-import { styled, theme } from "@washingtonpost/wpds-theme";
-import { InputLabel } from "@washingtonpost/wpds-input-label";
-import { FloatingLabelStyles } from "@washingtonpost/wpds-input-shared";
+import { styled, theme } from "../theme";
+import { InputLabel } from "../input-label";
+import { FloatingLabelStyles } from "../input-shared";
export const TextInputLabel = styled(InputLabel, {
insetBlockStart: "0",
diff --git a/ui/input-text/src/index.ts b/packages/kit/src/input-text/index.ts
similarity index 100%
rename from ui/input-text/src/index.ts
rename to packages/kit/src/input-text/index.ts
diff --git a/ui/input-text/src/play.stories.tsx b/packages/kit/src/input-text/play.stories.tsx
similarity index 59%
rename from ui/input-text/src/play.stories.tsx
rename to packages/kit/src/input-text/play.stories.tsx
index be2a9805a..c14e4fa47 100644
--- a/ui/input-text/src/play.stories.tsx
+++ b/packages/kit/src/input-text/play.stories.tsx
@@ -1,14 +1,14 @@
-import * as React from "react";
+import React, { useState } from "react";
import { screen, userEvent } from "@storybook/testing-library";
import { expect, jest } from "@storybook/jest";
-import type { ComponentMeta, ComponentStory } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react";
-import { Icon } from "@washingtonpost/wpds-icon";
-import { Button } from "@washingtonpost/wpds-button";
+import { Icon } from "../icon";
+import { Button } from "../button";
import Asset from "@washingtonpost/wpds-assets/asset/settings";
-import { VisuallyHidden } from "@washingtonpost/wpds-visually-hidden";
-import { styled, theme } from "@washingtonpost/wpds-theme";
+import { VisuallyHidden } from "../visually-hidden";
+import { styled, theme } from "../theme";
import { InputText as Component } from "./";
@@ -44,21 +44,18 @@ export default {
icon: "left",
onButtonIconClick: jest.fn(),
},
-} as ComponentMeta;
+} as Meta;
-const Template: ComponentStory = (args) => (
-
@@ -95,9 +92,8 @@ const SynchTemplate = () => {
);
};
-export const InputSynch = SynchTemplate.bind({});
-InputText.parameters = {
- chromatic: { disableSnapshot: true },
+export const InputSynch = {
+ render: SynchTemplate,
};
const Column = styled("div", {
@@ -208,11 +204,13 @@ const ChromaticTemplate = () => (
);
-export const Chromatic = ChromaticTemplate.bind({});
+export const Chromatic = {
+ render: ChromaticTemplate,
+};
-const FormTemplate: ComponentStory = (args) => {
- const [iconClicked, setIconClicked] = React.useState(false);
- const [submitClicked, setSubmitClicked] = React.useState(false);
+const FormTemplate: StoryFn = (args) => {
+ const [iconClicked, setIconClicked] = useState(false);
+ const [submitClicked, setSubmitClicked] = useState(false);
return (
@@ -88,7 +88,7 @@ describe("DrawerRoot", () => { }); const App = ({ handleChange }) => { - const [open] = React.useState(false); + const [open] = useState(false); return (
{rootRect && rootRect.top}
;
};
diff --git a/ui/input-search/src/InputSearchRoot.tsx b/packages/kit/src/input-search/InputSearchRoot.tsx
similarity index 96%
rename from ui/input-search/src/InputSearchRoot.tsx
rename to packages/kit/src/input-search/InputSearchRoot.tsx
index 37bb5081c..fb2e9248e 100644
--- a/ui/input-search/src/InputSearchRoot.tsx
+++ b/packages/kit/src/input-search/InputSearchRoot.tsx
@@ -1,6 +1,6 @@
-import * as React from "react";
+import React from "react";
import { Combobox } from "@reach/combobox";
-import { styled, theme } from "@washingtonpost/wpds-theme";
+import { styled, theme } from "../theme";
type InputSearchContextProps = {
term: string;
diff --git a/ui/input-search/src/cities.ts b/packages/kit/src/input-search/cities.ts
similarity index 100%
rename from ui/input-search/src/cities.ts
rename to packages/kit/src/input-search/cities.ts
diff --git a/ui/input-search/src/index.ts b/packages/kit/src/input-search/index.ts
similarity index 100%
rename from ui/input-search/src/index.ts
rename to packages/kit/src/input-search/index.ts
diff --git a/ui/input-search/src/play.stories.tsx b/packages/kit/src/input-search/play.stories.tsx
similarity index 77%
rename from ui/input-search/src/play.stories.tsx
rename to packages/kit/src/input-search/play.stories.tsx
index 0ac801513..2aa3edf82 100644
--- a/ui/input-search/src/play.stories.tsx
+++ b/packages/kit/src/input-search/play.stories.tsx
@@ -1,12 +1,12 @@
-import * as React from "react";
+import React, { useMemo, useState, useEffect } from "react";
import { screen, userEvent } from "@storybook/testing-library";
import { expect } from "@storybook/jest";
-import { Box } from "@washingtonpost/wpds-box";
+import { Box } from "../box";
import { matchSorter } from "match-sorter";
import { InputSearch } from "./";
import { cities } from "./cities";
-import type { ComponentStory } from "@storybook/react";
+import type { StoryFn } from "@storybook/react";
export default {
title: "InputSearch",
@@ -23,7 +23,7 @@ export default {
};
const useCityMatch = (term: string) => {
- return React.useMemo(
+ return useMemo(
() =>
term.trim() === ""
? null
@@ -34,8 +34,8 @@ const useCityMatch = (term: string) => {
);
};
-const Template: ComponentStory
@@ -239,37 +237,39 @@ const FormTemplate: ComponentStory = (args) => {
);
};
-export const SearchTypeInForm = FormTemplate.bind({});
+export const SearchTypeInForm = {
+ render: FormTemplate,
-SearchTypeInForm.args = {
- buttonIconType: "button",
-};
+ args: {
+ buttonIconType: "button",
+ },
-SearchTypeInForm.parameters = {
- chromatic: { disableSnapshot: true },
-};
+ parameters: {
+ chromatic: { disableSnapshot: true },
+ },
-SearchTypeInForm.argTypes = {
- buttonIconText: { table: { disable: true } },
- disabled: { table: { disable: true } },
- error: { table: { disable: true } },
- label: { table: { disable: true } },
- icon: { table: { disable: true } },
- name: { table: { disable: true } },
- id: { table: { disable: true } },
- placeholder: { table: { disable: true } },
- required: { table: { disable: true } },
- success: { table: { disable: true } },
- value: { table: { disable: true } },
- defaultValue: { table: { disable: true } },
- type: { table: { disable: true } },
- css: { table: { disable: true } },
- errorMessage: { table: { disable: true } },
- helperText: { table: { disable: true } },
- children: { table: { disable: true } },
+ argTypes: {
+ buttonIconText: { table: { disable: true } },
+ disabled: { table: { disable: true } },
+ error: { table: { disable: true } },
+ label: { table: { disable: true } },
+ icon: { table: { disable: true } },
+ name: { table: { disable: true } },
+ id: { table: { disable: true } },
+ placeholder: { table: { disable: true } },
+ required: { table: { disable: true } },
+ success: { table: { disable: true } },
+ value: { table: { disable: true } },
+ defaultValue: { table: { disable: true } },
+ type: { table: { disable: true } },
+ css: { table: { disable: true } },
+ errorMessage: { table: { disable: true } },
+ helperText: { table: { disable: true } },
+ children: { table: { disable: true } },
+ },
};
-const InteractionsTemplate: ComponentStory = (args) => (
+const InteractionsTemplate: StoryFn = (args) => (
= (args) => (
);
-export const Interactions = InteractionsTemplate.bind({});
-Interactions.parameters = {
- chromatic: { disableSnapshot: true },
+export const Interactions = {
+ render: InteractionsTemplate,
+
+ parameters: {
+ chromatic: { disableSnapshot: true },
+ },
+
+ play: async ({ args }) => {
+ // radix Label needs a tick to associate labels with inputs
+ await sleep(0);
+ const label1 = screen.getAllByText("Field 1")[0];
+ await expect(label1).toHaveStyle("font-size: 16px");
+ await userEvent.type(screen.getByLabelText("Field 1"), "user text", {
+ delay: 100,
+ });
+ await expect(label1).toHaveStyle("font-size: 12px");
+ await userEvent.tab();
+ await sleep(250);
+ const label2 = screen.getAllByText("Field 2")[0];
+ await expect(label2).toHaveStyle("font-size: 12px");
+ await userEvent.tab();
+ await sleep(250);
+ await expect(label2).toHaveStyle("font-size: 16px");
+ await userEvent.click(screen.getAllByRole("button")[0]);
+ await expect(args.onButtonIconClick).toHaveBeenCalled();
+ },
};
// Function to emulate pausing between interactions
@@ -300,41 +323,25 @@ function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
-Interactions.play = async ({ args }) => {
- // radix Label needs a tick to associate labels with inputs
- await sleep(0);
- const label1 = screen.getAllByText("Field 1")[0];
- await expect(label1).toHaveStyle("font-size: 16px");
- await userEvent.type(screen.getByLabelText("Field 1"), "user text", {
- delay: 100,
- });
- await expect(label1).toHaveStyle("font-size: 12px");
- await userEvent.tab();
- await sleep(250);
- const label2 = screen.getAllByText("Field 2")[0];
- await expect(label2).toHaveStyle("font-size: 12px");
- await userEvent.tab();
- await sleep(250);
- await expect(label2).toHaveStyle("font-size: 16px");
- await userEvent.click(screen.getAllByRole("button")[0]);
- await expect(args.onButtonIconClick).toHaveBeenCalled();
-};
+export const TypeSearch = {
+ args: {
+ type: "search",
+ },
-export const TypeSearch = Template.bind({});
-TypeSearch.args = {
- type: "search",
-};
-TypeSearch.parameters = {
- chromatic: { disableSnapshot: true },
+ parameters: {
+ chromatic: { disableSnapshot: true },
+ },
};
-export const AutoFilledTypeText = Template.bind({});
-AutoFilledTypeText.args = {
- type: "text",
- name: "my-name",
- autoComplete: "given-name",
- id: "my-name",
-};
-AutoFilledTypeText.parameters = {
- chromatic: { disableSnapshot: true },
+export const AutoFilledTypeText = {
+ args: {
+ type: "text",
+ name: "my-name",
+ autoComplete: "given-name",
+ id: "my-name",
+ },
+
+ parameters: {
+ chromatic: { disableSnapshot: true },
+ },
};
diff --git a/ui/input-textarea/src/InputTextarea.tsx b/packages/kit/src/input-textarea/InputTextarea.tsx
similarity index 93%
rename from ui/input-textarea/src/InputTextarea.tsx
rename to packages/kit/src/input-textarea/InputTextarea.tsx
index 1e1e39451..a6852eed8 100644
--- a/ui/input-textarea/src/InputTextarea.tsx
+++ b/packages/kit/src/input-textarea/InputTextarea.tsx
@@ -1,17 +1,16 @@
-import * as React from "react";
-import { useEffect, useState } from "react";
-import { theme, css, styled } from "@washingtonpost/wpds-theme";
-import type * as WPDS from "@washingtonpost/wpds-theme";
+import React, { useEffect, useState } from "react";
+import { theme, css, styled } from "../theme";
+import type * as WPDS from "../theme";
import {
sharedInputStyles,
sharedInputVariants,
useFloating,
globalInputAutoFillTriggerAnimations,
FloatingLabelStyles,
-} from "@washingtonpost/wpds-input-shared";
-import { InputLabel } from "@washingtonpost/wpds-input-label";
-import { ErrorMessage } from "@washingtonpost/wpds-error-message";
-import { HelperText } from "@washingtonpost/wpds-helper-text";
+} from "../input-shared";
+import { InputLabel } from "../input-label";
+import { ErrorMessage } from "../error-message";
+import { HelperText } from "../helper-text";
const NAME = "InputTextarea";
diff --git a/ui/input-textarea/src/index.ts b/packages/kit/src/input-textarea/index.ts
similarity index 100%
rename from ui/input-textarea/src/index.ts
rename to packages/kit/src/input-textarea/index.ts
diff --git a/packages/kit/src/input-textarea/play.stories.tsx b/packages/kit/src/input-textarea/play.stories.tsx
new file mode 100644
index 000000000..a111ed423
--- /dev/null
+++ b/packages/kit/src/input-textarea/play.stories.tsx
@@ -0,0 +1,33 @@
+import { InputTextarea as Component } from "./";
+import type { Meta, StoryFn } from "@storybook/react";
+
+export default {
+ title: "InputTextarea",
+ component: Component,
+} as Meta;
+
+export const Play = {
+ name: "InputTextarea",
+
+ args: {
+ canResize: false,
+ name: "text-area-1",
+ id: "text-area-1",
+ label: "Label",
+ },
+
+ argTypes: {
+ helperText: { control: "text" },
+ },
+};
+
+export const Error = {
+ args: {
+ canResize: false,
+ name: "text-area-2",
+ id: "text-area-2",
+ label: "Label",
+ error: true,
+ errorMessage: "Error message",
+ },
+};
diff --git a/ui/navigation-menu/src/NavigationMenu.tsx b/packages/kit/src/navigation-menu/NavigationMenu.tsx
similarity index 100%
rename from ui/navigation-menu/src/NavigationMenu.tsx
rename to packages/kit/src/navigation-menu/NavigationMenu.tsx
diff --git a/ui/navigation-menu/src/NavigationMenuContent.test.tsx b/packages/kit/src/navigation-menu/NavigationMenuContent.test.tsx
similarity index 99%
rename from ui/navigation-menu/src/NavigationMenuContent.test.tsx
rename to packages/kit/src/navigation-menu/NavigationMenuContent.test.tsx
index bd6f23cf6..43eef47c9 100644
--- a/ui/navigation-menu/src/NavigationMenuContent.test.tsx
+++ b/packages/kit/src/navigation-menu/NavigationMenuContent.test.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { NavigationMenuRoot } from "./NavigationMenuRoot";
diff --git a/ui/navigation-menu/src/NavigationMenuContent.tsx b/packages/kit/src/navigation-menu/NavigationMenuContent.tsx
similarity index 97%
rename from ui/navigation-menu/src/NavigationMenuContent.tsx
rename to packages/kit/src/navigation-menu/NavigationMenuContent.tsx
index 38da3b042..582b37724 100644
--- a/ui/navigation-menu/src/NavigationMenuContent.tsx
+++ b/packages/kit/src/navigation-menu/NavigationMenuContent.tsx
@@ -1,12 +1,12 @@
-import * as React from "react";
+import React from "react";
import { createPortal } from "react-dom";
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
import { CSSTransition } from "react-transition-group";
import { usePopper } from "react-popper";
import maxSize from "popper-max-size-modifier";
-import { styled, theme } from "@washingtonpost/wpds-theme";
+import { styled, theme } from "../theme";
-import type * as WPDS from "@washingtonpost/wpds-theme";
+import type * as WPDS from "../theme";
import type { Modifier } from "@popperjs/core";
const NAME = "NavigationMenuContent";
diff --git a/ui/navigation-menu/src/NavigationMenuItem.test.tsx b/packages/kit/src/navigation-menu/NavigationMenuItem.test.tsx
similarity index 97%
rename from ui/navigation-menu/src/NavigationMenuItem.test.tsx
rename to packages/kit/src/navigation-menu/NavigationMenuItem.test.tsx
index 11a2dc70b..f599c6626 100644
--- a/ui/navigation-menu/src/NavigationMenuItem.test.tsx
+++ b/packages/kit/src/navigation-menu/NavigationMenuItem.test.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
import { render, screen } from "@testing-library/react";
import { NavigationMenuRoot } from "./NavigationMenuRoot";
import { NavigationMenuList } from "./NavigationMenuList";
diff --git a/ui/navigation-menu/src/NavigationMenuItem.tsx b/packages/kit/src/navigation-menu/NavigationMenuItem.tsx
similarity index 93%
rename from ui/navigation-menu/src/NavigationMenuItem.tsx
rename to packages/kit/src/navigation-menu/NavigationMenuItem.tsx
index 4b0a89dfc..a12f5f79d 100644
--- a/ui/navigation-menu/src/NavigationMenuItem.tsx
+++ b/packages/kit/src/navigation-menu/NavigationMenuItem.tsx
@@ -1,9 +1,9 @@
-import * as React from "react";
+import React from "react";
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
import { NavigationMenuTrigger } from "./NavigationMenuTrigger";
import { NavigationMenuContent } from "./NavigationMenuContent";
-import type * as WPDS from "@washingtonpost/wpds-theme";
+import type * as WPDS from "../theme";
const NAME = "NavigationMenuItem";
diff --git a/ui/navigation-menu/src/NavigationMenuLink.test.tsx b/packages/kit/src/navigation-menu/NavigationMenuLink.test.tsx
similarity index 97%
rename from ui/navigation-menu/src/NavigationMenuLink.test.tsx
rename to packages/kit/src/navigation-menu/NavigationMenuLink.test.tsx
index ea2d1fe3b..20e6cde36 100644
--- a/ui/navigation-menu/src/NavigationMenuLink.test.tsx
+++ b/packages/kit/src/navigation-menu/NavigationMenuLink.test.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
import { render, screen } from "@testing-library/react";
import { NavigationMenuRoot } from "./NavigationMenuRoot";
import { NavigationMenuList } from "./NavigationMenuList";
diff --git a/ui/navigation-menu/src/NavigationMenuLink.tsx b/packages/kit/src/navigation-menu/NavigationMenuLink.tsx
similarity index 90%
rename from ui/navigation-menu/src/NavigationMenuLink.tsx
rename to packages/kit/src/navigation-menu/NavigationMenuLink.tsx
index 1ae5b54b1..8d4dbd817 100644
--- a/ui/navigation-menu/src/NavigationMenuLink.tsx
+++ b/packages/kit/src/navigation-menu/NavigationMenuLink.tsx
@@ -1,8 +1,8 @@
-import * as React from "react";
+import React from "react";
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-import { styled, theme } from "@washingtonpost/wpds-theme";
+import { styled, theme } from "../theme";
-import type * as WPDS from "@washingtonpost/wpds-theme";
+import type * as WPDS from "../theme";
const NAME = "NavigationMenuLink";
diff --git a/ui/navigation-menu/src/NavigationMenuList.test.tsx b/packages/kit/src/navigation-menu/NavigationMenuList.test.tsx
similarity index 93%
rename from ui/navigation-menu/src/NavigationMenuList.test.tsx
rename to packages/kit/src/navigation-menu/NavigationMenuList.test.tsx
index e4bb8bcef..ff51c57f4 100644
--- a/ui/navigation-menu/src/NavigationMenuList.test.tsx
+++ b/packages/kit/src/navigation-menu/NavigationMenuList.test.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
import { render, screen } from "@testing-library/react";
import { NavigationMenuRoot } from "./NavigationMenuRoot";
import { NavigationMenuList } from "./NavigationMenuList";
diff --git a/ui/navigation-menu/src/NavigationMenuList.tsx b/packages/kit/src/navigation-menu/NavigationMenuList.tsx
similarity index 86%
rename from ui/navigation-menu/src/NavigationMenuList.tsx
rename to packages/kit/src/navigation-menu/NavigationMenuList.tsx
index 4ba122f3e..8e9003fa1 100644
--- a/ui/navigation-menu/src/NavigationMenuList.tsx
+++ b/packages/kit/src/navigation-menu/NavigationMenuList.tsx
@@ -1,8 +1,8 @@
-import * as React from "react";
+import React from "react";
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-import { styled } from "@washingtonpost/wpds-theme";
+import { styled } from "../theme";
-import type * as WPDS from "@washingtonpost/wpds-theme";
+import type * as WPDS from "../theme";
const NAME = "NavigationMenuList";
diff --git a/ui/navigation-menu/src/NavigationMenuRoot.test.tsx b/packages/kit/src/navigation-menu/NavigationMenuRoot.test.tsx
similarity index 92%
rename from ui/navigation-menu/src/NavigationMenuRoot.test.tsx
rename to packages/kit/src/navigation-menu/NavigationMenuRoot.test.tsx
index 4bed7bb69..d514dd100 100644
--- a/ui/navigation-menu/src/NavigationMenuRoot.test.tsx
+++ b/packages/kit/src/navigation-menu/NavigationMenuRoot.test.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
import { render, screen } from "@testing-library/react";
import { NavigationMenuRoot } from "./NavigationMenuRoot";
diff --git a/ui/navigation-menu/src/NavigationMenuRoot.tsx b/packages/kit/src/navigation-menu/NavigationMenuRoot.tsx
similarity index 88%
rename from ui/navigation-menu/src/NavigationMenuRoot.tsx
rename to packages/kit/src/navigation-menu/NavigationMenuRoot.tsx
index 674b0a836..26bfeca00 100644
--- a/ui/navigation-menu/src/NavigationMenuRoot.tsx
+++ b/packages/kit/src/navigation-menu/NavigationMenuRoot.tsx
@@ -1,6 +1,6 @@
-import * as React from "react";
+import React from "react";
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-import type * as WPDS from "@washingtonpost/wpds-theme";
+import type * as WPDS from "../theme";
const NAME = "NavigationMenuRoot";
diff --git a/ui/navigation-menu/src/NavigationMenuSub.test.tsx b/packages/kit/src/navigation-menu/NavigationMenuSub.test.tsx
similarity index 95%
rename from ui/navigation-menu/src/NavigationMenuSub.test.tsx
rename to packages/kit/src/navigation-menu/NavigationMenuSub.test.tsx
index c6295cb57..49b210867 100644
--- a/ui/navigation-menu/src/NavigationMenuSub.test.tsx
+++ b/packages/kit/src/navigation-menu/NavigationMenuSub.test.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
import { render, screen } from "@testing-library/react";
import { NavigationMenuRoot } from "./NavigationMenuRoot";
import { NavigationMenuList } from "./NavigationMenuList";
diff --git a/ui/navigation-menu/src/NavigationMenuSub.tsx b/packages/kit/src/navigation-menu/NavigationMenuSub.tsx
similarity index 88%
rename from ui/navigation-menu/src/NavigationMenuSub.tsx
rename to packages/kit/src/navigation-menu/NavigationMenuSub.tsx
index 7ed763e00..388addf99 100644
--- a/ui/navigation-menu/src/NavigationMenuSub.tsx
+++ b/packages/kit/src/navigation-menu/NavigationMenuSub.tsx
@@ -1,6 +1,6 @@
-import * as React from "react";
+import React from "react";
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-import type * as WPDS from "@washingtonpost/wpds-theme";
+import type * as WPDS from "../theme";
const NAME = "NavigationMenuSub";
diff --git a/ui/navigation-menu/src/NavigationMenuTrigger.test.tsx b/packages/kit/src/navigation-menu/NavigationMenuTrigger.test.tsx
similarity index 97%
rename from ui/navigation-menu/src/NavigationMenuTrigger.test.tsx
rename to packages/kit/src/navigation-menu/NavigationMenuTrigger.test.tsx
index d3c6c6368..5951a7ced 100644
--- a/ui/navigation-menu/src/NavigationMenuTrigger.test.tsx
+++ b/packages/kit/src/navigation-menu/NavigationMenuTrigger.test.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
import { render, screen } from "@testing-library/react";
import { NavigationMenuRoot } from "./NavigationMenuRoot";
import { NavigationMenuList } from "./NavigationMenuList";
diff --git a/ui/navigation-menu/src/NavigationMenuTrigger.tsx b/packages/kit/src/navigation-menu/NavigationMenuTrigger.tsx
similarity index 89%
rename from ui/navigation-menu/src/NavigationMenuTrigger.tsx
rename to packages/kit/src/navigation-menu/NavigationMenuTrigger.tsx
index 1713d662e..a63568dee 100644
--- a/ui/navigation-menu/src/NavigationMenuTrigger.tsx
+++ b/packages/kit/src/navigation-menu/NavigationMenuTrigger.tsx
@@ -1,8 +1,8 @@
-import * as React from "react";
+import React from "react";
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-import { styled, theme } from "@washingtonpost/wpds-theme";
+import { styled, theme } from "../theme";
-import type * as WPDS from "@washingtonpost/wpds-theme";
+import type * as WPDS from "../theme";
const NAME = "NavigationMenuTrigger";
diff --git a/ui/navigation-menu/src/index.ts b/packages/kit/src/navigation-menu/index.ts
similarity index 100%
rename from ui/navigation-menu/src/index.ts
rename to packages/kit/src/navigation-menu/index.ts
diff --git a/ui/navigation-menu/src/play.stories.tsx b/packages/kit/src/navigation-menu/play.stories.tsx
similarity index 83%
rename from ui/navigation-menu/src/play.stories.tsx
rename to packages/kit/src/navigation-menu/play.stories.tsx
index a38206d29..5d69eeaca 100644
--- a/ui/navigation-menu/src/play.stories.tsx
+++ b/packages/kit/src/navigation-menu/play.stories.tsx
@@ -1,14 +1,14 @@
-import * as React from "react";
+import React from "react";
import { userEvent, screen } from "@storybook/testing-library";
import { expect } from "@storybook/jest";
-import { NavigationMenu } from "./";
-import { Button } from "@washingtonpost/wpds-button";
-import { Icon } from "@washingtonpost/wpds-icon";
-import { theme } from "@washingtonpost/wpds-theme";
+import { NavigationMenu } from ".";
+import { Button } from "../button";
+import { Icon } from "../icon";
+import { theme } from "../theme";
import { ChevronRight, ChevronDown, Menu } from "@washingtonpost/wpds-assets";
import NextLink from "next/link";
-import type { ComponentMeta, ComponentStory } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react";
import states from "./states.json";
@@ -23,9 +23,9 @@ export default {
Content: NavigationMenu.Content,
Sub: NavigationMenu.Sub,
},
-} as ComponentMeta;
+} as Meta;
-const Template: ComponentStory = (args) => {
+const Template: StoryFn = (args) => {
console.log(args);
return (
@@ -65,11 +65,11 @@ const Template: ComponentStory = (args) => {
);
};
-export const Default = Template.bind({});
+export const Default = {
+ render: Template,
+};
-const UseNextLinkTemplate: ComponentStory = (
- args
-) => {
+const UseNextLinkTemplate: StoryFn = (args) => {
console.log(args);
return (
@@ -84,10 +84,12 @@ const UseNextLinkTemplate: ComponentStory = (
);
};
-export const UseNextLink = UseNextLinkTemplate.bind({});
+export const UseNextLink = {
+ render: UseNextLinkTemplate,
+};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const SideAlignTemplate: ComponentStory = (args) => {
+const SideAlignTemplate: StoryFn = (args) => {
console.log("args", args);
return (
@@ -125,27 +127,27 @@ const SideAlignTemplate: ComponentStory = (args) => {
);
};
-export const SideAlign = SideAlignTemplate.bind({});
+export const SideAlign = {
+ render: SideAlignTemplate,
-SideAlign.argTypes = {
- side: {
- options: ["top", "bottom", "left", "right"],
- control: { type: "select" },
- },
- align: {
- options: ["start", "center", "end"],
- control: { type: "select" },
+ argTypes: {
+ side: {
+ options: ["top", "bottom", "left", "right"],
+ control: { type: "select" },
+ },
+ align: {
+ options: ["start", "center", "end"],
+ control: { type: "select" },
+ },
},
-};
-SideAlign.args = {
- side: "bottom",
- align: "start",
+ args: {
+ side: "bottom",
+ align: "start",
+ },
};
-const HorizontalTemplate: ComponentStory = (
- args
-) => {
+const HorizontalTemplate: StoryFn = (args) => {
return (
@@ -202,9 +204,11 @@ const HorizontalTemplate: ComponentStory = (
);
};
-export const Horizontal = HorizontalTemplate.bind({});
+export const Horizontal = {
+ render: HorizontalTemplate,
+};
-const VerticalTemplate: ComponentStory = (args) => {
+const VerticalTemplate: StoryFn = (args) => {
const subsections = [
{
text: "The Post's View",
@@ -264,10 +268,12 @@ const VerticalTemplate: ComponentStory = (args) => {
);
};
-export const Vertical = VerticalTemplate.bind({});
+export const Vertical = {
+ render: VerticalTemplate,
+};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const InteractionsTemplate: ComponentStory = () => (
+const InteractionsTemplate: StoryFn = () => (
@@ -302,23 +308,26 @@ const InteractionsTemplate: ComponentStory = () => (
);
-export const Interactions = InteractionsTemplate.bind({});
-Interactions.parameters = {
- chromatic: { disableSnapshot: true },
+export const Interactions = {
+ render: InteractionsTemplate,
+
+ parameters: {
+ chromatic: { disableSnapshot: true },
+ },
+
+ play: async () => {
+ userEvent.tab();
+ userEvent.keyboard("{Enter}");
+ await sleep(350);
+ const content = screen.getByText("Apples");
+ await expect(content).toBeVisible();
+ userEvent.keyboard("{Escape}");
+ await sleep(350);
+ await expect(content).not.toBeVisible();
+ },
};
// Function to emulate pausing between interactions
function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
-
-Interactions.play = async () => {
- userEvent.tab();
- userEvent.keyboard("{Enter}");
- await sleep(350);
- const content = screen.getByText("Apples");
- await expect(content).toBeVisible();
- userEvent.keyboard("{Escape}");
- await sleep(350);
- await expect(content).not.toBeVisible();
-};
diff --git a/ui/navigation-menu/src/states.json b/packages/kit/src/navigation-menu/states.json
similarity index 100%
rename from ui/navigation-menu/src/states.json
rename to packages/kit/src/navigation-menu/states.json
diff --git a/ui/pagination-dots/src/PaginationDots.tsx b/packages/kit/src/pagination-dots/PaginationDots.tsx
similarity index 97%
rename from ui/pagination-dots/src/PaginationDots.tsx
rename to packages/kit/src/pagination-dots/PaginationDots.tsx
index 5819e1539..b59d43832 100644
--- a/ui/pagination-dots/src/PaginationDots.tsx
+++ b/packages/kit/src/pagination-dots/PaginationDots.tsx
@@ -1,6 +1,6 @@
-import * as React from "react";
-import type * as WPDS from "@washingtonpost/wpds-theme";
-import { theme, styled } from "@washingtonpost/wpds-theme";
+import React from "react";
+import type * as WPDS from "../theme";
+import { theme, styled } from "../theme";
const NAME = "PaginationDots";
const ACTIVECOLOR = "primary";
diff --git a/ui/pagination-dots/src/index.ts b/packages/kit/src/pagination-dots/index.ts
similarity index 100%
rename from ui/pagination-dots/src/index.ts
rename to packages/kit/src/pagination-dots/index.ts
diff --git a/ui/pagination-dots/src/play.stories.tsx b/packages/kit/src/pagination-dots/play.stories.tsx
similarity index 56%
rename from ui/pagination-dots/src/play.stories.tsx
rename to packages/kit/src/pagination-dots/play.stories.tsx
index fa032c005..ddae48940 100644
--- a/ui/pagination-dots/src/play.stories.tsx
+++ b/packages/kit/src/pagination-dots/play.stories.tsx
@@ -1,12 +1,12 @@
-import * as React from "react";
+import React, { useMemo, useState, useEffect } from "react";
import { PaginationDots as Component } from "./";
-import { theme, styled } from "@washingtonpost/wpds-theme";
-import { Button } from "@washingtonpost/wpds-button";
-import { InputText } from "@washingtonpost/wpds-ui-kit";
+import { theme, styled } from "../theme";
+import { Button } from "../button";
+import { InputText } from "../input-text";
import { within, userEvent } from "@storybook/testing-library";
import { expect } from "@storybook/jest";
-import type { ComponentMeta, ComponentStory } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react";
const Stack = styled("section", {
display: "flex",
@@ -26,7 +26,7 @@ const HStack = styled("section", {
export default {
title: "PaginationDots",
component: Component,
-} as ComponentMeta;
+} as Meta;
const DefaultArgs = {
amount: 6,
@@ -40,21 +40,23 @@ const Label = styled("h3", {
textAlign: "center",
});
-export const PaginationDots = (args) => (
-
-
-
-);
+export const PaginationDots = {
+ render: (args) => (
+
+
+
+ ),
-PaginationDots.args = { ...DefaultArgs };
+ args: { ...DefaultArgs },
+};
-const Template: ComponentStory = (args, context) => {
- const id = React.useMemo(() => `${Math.random()}-amount`.slice(2), []);
- const [amount, setAmount] = React.useState("5");
- const [index, setIndex] = React.useState(1);
+const Template: StoryFn = (args, context) => {
+ const id = useMemo(() => `${Math.random()}-amount`.slice(2), []);
+ const [amount, setAmount] = useState("5");
+ const [index, setIndex] = useState(1);
- React.useEffect(() => setAmount(amount), [amount]);
+ useEffect(() => setAmount(amount), [amount]);
return (
@@ -106,54 +108,69 @@ const Template: ComponentStory = (args, context) => {
);
};
-export const WithControls = Template.bind({});
+export const WithControls = {
+ render: Template,
+};
+
// Function to emulate pausing between interactions
const sleep = (ms) => {
return new Promise((resolve) => setTimeout(resolve, ms));
};
-export const Interactions = Template.bind({});
-Interactions.play = async ({ canvasElement }) => {
- const canvas = within(canvasElement);
- const paginationDots = canvas.getByLabelText("light-pagination");
-
- // change amount of dots
- await userEvent.type(canvas.getByTestId("light-input-text"), "{backspace}6");
- await sleep(500);
- // check incrementing index changes ariaValueNow
- await userEvent.click(canvas.getByTestId("light-inc-btn"));
- let ariaValueNow = paginationDots.getAttribute("aria-valuenow");
- await sleep(500);
- expect(ariaValueNow).toBe("2");
- await sleep(500);
-
- // traverse all dots
- for (let i = 0; i < 9; i++) {
- const btn = i < 4 ? "light-inc-btn" : "light-dec-btn";
- await userEvent.click(canvas.getByTestId(btn));
+export const Interactions = {
+ render: Template,
+
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ const paginationDots = canvas.getByLabelText("light-pagination");
+
+ // change amount of dots
+ await userEvent.type(
+ canvas.getByTestId("light-input-text"),
+ "{backspace}6"
+ );
await sleep(500);
- }
-
- // test ariaValueMax change on amount change
- await userEvent.type(canvas.getByTestId("light-input-text"), "{backspace}12");
- await sleep(500);
- let ariaValueMax = paginationDots.getAttribute("aria-valuemax");
- expect(ariaValueMax).toBe("12");
-
- // test dots never go below 0
- await userEvent.type(
- canvas.getByTestId("light-input-text"),
- "{backspace}{backspace}0"
- );
- await sleep(500);
- ariaValueMax = paginationDots.getAttribute("aria-valuemax");
- ariaValueNow = paginationDots.getAttribute("aria-valuenow");
- expect(ariaValueMax).toBe("1");
- // expect(ariaValueNow).toBe("1");
-
- // tests a large number of dots doesn't modify other elements
- await userEvent.type(canvas.getByTestId("light-input-text"), "{backspace}50");
- await sleep(500);
+ // check incrementing index changes ariaValueNow
+ await userEvent.click(canvas.getByTestId("light-inc-btn"));
+ let ariaValueNow = paginationDots.getAttribute("aria-valuenow");
+ await sleep(500);
+ expect(ariaValueNow).toBe("2");
+ await sleep(500);
+
+ // traverse all dots
+ for (let i = 0; i < 9; i++) {
+ const btn = i < 4 ? "light-inc-btn" : "light-dec-btn";
+ await userEvent.click(canvas.getByTestId(btn));
+ await sleep(500);
+ }
+
+ // test ariaValueMax change on amount change
+ await userEvent.type(
+ canvas.getByTestId("light-input-text"),
+ "{backspace}12"
+ );
+ await sleep(500);
+ let ariaValueMax = paginationDots.getAttribute("aria-valuemax");
+ expect(ariaValueMax).toBe("12");
+
+ // test dots never go below 0
+ await userEvent.type(
+ canvas.getByTestId("light-input-text"),
+ "{backspace}{backspace}0"
+ );
+ await sleep(500);
+ ariaValueMax = paginationDots.getAttribute("aria-valuemax");
+ ariaValueNow = paginationDots.getAttribute("aria-valuenow");
+ expect(ariaValueMax).toBe("1");
+ // expect(ariaValueNow).toBe("1");
+
+ // tests a large number of dots doesn't modify other elements
+ await userEvent.type(
+ canvas.getByTestId("light-input-text"),
+ "{backspace}50"
+ );
+ await sleep(500);
+ },
};
export const Chromatic = () => (
diff --git a/ui/popover/src/Popover.tsx b/packages/kit/src/popover/Popover.tsx
similarity index 100%
rename from ui/popover/src/Popover.tsx
rename to packages/kit/src/popover/Popover.tsx
diff --git a/ui/popover/src/PopoverAnchor.test.tsx b/packages/kit/src/popover/PopoverAnchor.test.tsx
similarity index 93%
rename from ui/popover/src/PopoverAnchor.test.tsx
rename to packages/kit/src/popover/PopoverAnchor.test.tsx
index 587b68ee8..418ec8b66 100644
--- a/ui/popover/src/PopoverAnchor.test.tsx
+++ b/packages/kit/src/popover/PopoverAnchor.test.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
import { render, screen } from "@testing-library/react";
import { PopoverRoot } from "./PopoverRoot";
import { PopoverAnchor } from "./PopoverAnchor";
diff --git a/ui/popover/src/PopoverAnchor.tsx b/packages/kit/src/popover/PopoverAnchor.tsx
similarity index 93%
rename from ui/popover/src/PopoverAnchor.tsx
rename to packages/kit/src/popover/PopoverAnchor.tsx
index 6edd2ea88..c4226d838 100644
--- a/ui/popover/src/PopoverAnchor.tsx
+++ b/packages/kit/src/popover/PopoverAnchor.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
import * as PopoverPrimitive from "@radix-ui/react-popover";
import type { PopoverAnchorProps as RadixPopoverAnchorProps } from "@radix-ui/react-popover";
diff --git a/ui/popover/src/PopoverClose.test.tsx b/packages/kit/src/popover/PopoverClose.test.tsx
similarity index 95%
rename from ui/popover/src/PopoverClose.test.tsx
rename to packages/kit/src/popover/PopoverClose.test.tsx
index 97d5f562d..e2a511c3e 100644
--- a/ui/popover/src/PopoverClose.test.tsx
+++ b/packages/kit/src/popover/PopoverClose.test.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
import { render, screen } from "@testing-library/react";
import { PopoverRoot } from "./PopoverRoot";
import { PopoverClose } from "./PopoverClose";
diff --git a/packages/kit/src/popover/PopoverClose.tsx b/packages/kit/src/popover/PopoverClose.tsx
new file mode 100644
index 000000000..a8c5573f7
--- /dev/null
+++ b/packages/kit/src/popover/PopoverClose.tsx
@@ -0,0 +1,43 @@
+import React, { forwardRef } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { styled, theme } from "../theme";
+import { Button } from "../button";
+import { Icon } from "../icon";
+import { Close } from "@washingtonpost/wpds-assets";
+
+import type * as WPDS from "../theme";
+import type { PopoverCloseProps as RadixPopoverCloseProps } from "@radix-ui/react-popover";
+
+const NAME = "PopoverClose";
+
+const StyledButton = styled(Button, {
+ position: "absolute",
+ top: theme.space["025"],
+ right: theme.space["025"],
+ "&&": {
+ border: "none",
+ },
+});
+
+export type PopoverCloseProps = {
+ /** Override CSS */
+ css?: WPDS.CSS;
+} & RadixPopoverCloseProps;
+
+export const PopoverClose = forwardRef(
+ ({ children, asChild, ...props }, ref) => (
+
+ {asChild ? (
+ children
+ ) : (
+
+
+
+
+ )}
+
+ )
+);
+
+PopoverClose.displayName = NAME;
diff --git a/ui/popover/src/PopoverContent.test.tsx b/packages/kit/src/popover/PopoverContent.test.tsx
similarity index 97%
rename from ui/popover/src/PopoverContent.test.tsx
rename to packages/kit/src/popover/PopoverContent.test.tsx
index b18c94d3f..ed091096b 100644
--- a/ui/popover/src/PopoverContent.test.tsx
+++ b/packages/kit/src/popover/PopoverContent.test.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
import { render, screen } from "@testing-library/react";
import { PopoverRoot } from "./PopoverRoot";
import { PopoverContent } from "./PopoverContent";
diff --git a/ui/popover/src/PopoverContent.tsx b/packages/kit/src/popover/PopoverContent.tsx
similarity index 90%
rename from ui/popover/src/PopoverContent.tsx
rename to packages/kit/src/popover/PopoverContent.tsx
index ffe2ddc93..30764e8f7 100644
--- a/ui/popover/src/PopoverContent.tsx
+++ b/packages/kit/src/popover/PopoverContent.tsx
@@ -1,10 +1,10 @@
-import * as React from "react";
-import { styled, theme, keyframes } from "@washingtonpost/wpds-theme";
+import React, { forwardRef } from "react";
+import { styled, theme, keyframes } from "../theme";
import * as PopoverPrimitive from "@radix-ui/react-popover";
import type { Token } from "@stitches/react/types/theme";
-import * as Tokens from "@washingtonpost/wpds-theme/src/tokens";
-import type * as WPDS from "@washingtonpost/wpds-theme";
+import * as Tokens from "../theme/tokens";
+import type * as WPDS from "../theme";
import type { PopoverContentProps as RadixPopoverContentProps } from "@radix-ui/react-popover";
const NAME = "PopoverContent";
@@ -97,10 +97,7 @@ export type PopoverContentProps = {
} & WPDS.VariantProps &
Omit;
-export const PopoverContent = React.forwardRef<
- HTMLDivElement,
- PopoverContentProps
->(
+export const PopoverContent = forwardRef(
(
{
children,
diff --git a/ui/popover/src/PopoverPortal.test.tsx b/packages/kit/src/popover/PopoverPortal.test.tsx
similarity index 94%
rename from ui/popover/src/PopoverPortal.test.tsx
rename to packages/kit/src/popover/PopoverPortal.test.tsx
index 2190a5642..ffa75ecea 100644
--- a/ui/popover/src/PopoverPortal.test.tsx
+++ b/packages/kit/src/popover/PopoverPortal.test.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
import { render, screen } from "@testing-library/react";
import { PopoverRoot } from "./PopoverRoot";
import { PopoverPortal } from "./PopoverPortal";
diff --git a/ui/popover/src/PopoverPortal.tsx b/packages/kit/src/popover/PopoverPortal.tsx
similarity index 93%
rename from ui/popover/src/PopoverPortal.tsx
rename to packages/kit/src/popover/PopoverPortal.tsx
index ff18b2a3c..48c73fdce 100644
--- a/ui/popover/src/PopoverPortal.tsx
+++ b/packages/kit/src/popover/PopoverPortal.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
import * as PopoverPrimitive from "@radix-ui/react-popover";
import type { PopoverPortalProps as RadixPopoverPortalProps } from "@radix-ui/react-popover";
diff --git a/ui/popover/src/PopoverRoot.test.tsx b/packages/kit/src/popover/PopoverRoot.test.tsx
similarity index 90%
rename from ui/popover/src/PopoverRoot.test.tsx
rename to packages/kit/src/popover/PopoverRoot.test.tsx
index e1ac8eb23..caee3af68 100644
--- a/ui/popover/src/PopoverRoot.test.tsx
+++ b/packages/kit/src/popover/PopoverRoot.test.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
import { render, screen } from "@testing-library/react";
import { PopoverRoot } from "./PopoverRoot";
diff --git a/ui/popover/src/PopoverRoot.tsx b/packages/kit/src/popover/PopoverRoot.tsx
similarity index 92%
rename from ui/popover/src/PopoverRoot.tsx
rename to packages/kit/src/popover/PopoverRoot.tsx
index 0ca3f1eaf..fb20f9bb9 100644
--- a/ui/popover/src/PopoverRoot.tsx
+++ b/packages/kit/src/popover/PopoverRoot.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
import * as PopoverPrimitive from "@radix-ui/react-popover";
import type { PopoverProps as RadixPopoverRootProps } from "@radix-ui/react-popover";
diff --git a/ui/popover/src/PopoverTrigger.test.tsx b/packages/kit/src/popover/PopoverTrigger.test.tsx
similarity index 95%
rename from ui/popover/src/PopoverTrigger.test.tsx
rename to packages/kit/src/popover/PopoverTrigger.test.tsx
index 3ada55c71..a5e3f5154 100644
--- a/ui/popover/src/PopoverTrigger.test.tsx
+++ b/packages/kit/src/popover/PopoverTrigger.test.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
import { render, screen } from "@testing-library/react";
import { PopoverRoot } from "./PopoverRoot";
import { PopoverTrigger } from "./PopoverTrigger";
diff --git a/ui/popover/src/PopoverTrigger.tsx b/packages/kit/src/popover/PopoverTrigger.tsx
similarity index 75%
rename from ui/popover/src/PopoverTrigger.tsx
rename to packages/kit/src/popover/PopoverTrigger.tsx
index 04bab1713..38ac98100 100644
--- a/ui/popover/src/PopoverTrigger.tsx
+++ b/packages/kit/src/popover/PopoverTrigger.tsx
@@ -1,8 +1,8 @@
-import * as React from "react";
+import React, { forwardRef } from "react";
import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { Button } from "@washingtonpost/wpds-button";
+import { Button } from "../button";
-import type * as WPDS from "@washingtonpost/wpds-theme";
+import type * as WPDS from "../theme";
import type { PopoverTriggerProps as RadixPopoverTriggerProps } from "@radix-ui/react-popover";
const NAME = "PopoverTrigger";
@@ -12,7 +12,7 @@ export type PopoverTriggerProps = {
css?: WPDS.CSS;
} & RadixPopoverTriggerProps;
-export const PopoverTrigger = React.forwardRef<
+export const PopoverTrigger = forwardRef<
HTMLButtonElement,
PopoverTriggerProps
>(({ children, asChild, ...props }, ref) => {
diff --git a/ui/popover/src/index.ts b/packages/kit/src/popover/index.ts
similarity index 100%
rename from ui/popover/src/index.ts
rename to packages/kit/src/popover/index.ts
diff --git a/ui/popover/src/play.stories.tsx b/packages/kit/src/popover/play.stories.tsx
similarity index 79%
rename from ui/popover/src/play.stories.tsx
rename to packages/kit/src/popover/play.stories.tsx
index 3e9238170..f52510746 100644
--- a/ui/popover/src/play.stories.tsx
+++ b/packages/kit/src/popover/play.stories.tsx
@@ -1,14 +1,14 @@
/* eslint-disable testing-library/no-node-access */
-import * as React from "react";
+import React from "react";
import { userEvent, within } from "@storybook/testing-library";
import { expect } from "@storybook/jest";
-import * as Tokens from "@washingtonpost/wpds-theme/src/tokens";
+import * as Tokens from "../theme/tokens";
import * as PopoverPrimitive from "@radix-ui/react-popover";
import { Popover } from "./";
-import { styled, theme, globalCss } from "@washingtonpost/wpds-theme";
+import { styled, theme, globalCss } from "../theme";
import { ChevronRight } from "@washingtonpost/wpds-assets";
-import type { ComponentMeta, ComponentStory } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react";
export default {
title: "Popover",
@@ -22,10 +22,10 @@ export default {
parameters: {
chromatic: { delay: 300 },
},
-} as ComponentMeta;
+} as Meta;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template: ComponentStory = (args) => {
+const Template: StoryFn = (args) => {
const triggerRef = React.useRef(null);
const [parentElement, setParentElement] = React.useState();
@@ -44,35 +44,37 @@ const Template: ComponentStory = (args) => {
);
};
-export const Default = Template.bind({});
+export const Default = {
+ render: Template,
-Default.args = {
- children:
- "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam non eget consequat pretium.",
- density: "default",
- sideOffset: "050",
- side: "bottom",
- align: "center",
-};
-
-Default.argTypes = {
- density: {
- control: "select",
- options: ["default", "compact"],
+ args: {
+ children:
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diam non eget consequat pretium.",
+ density: "default",
+ sideOffset: "050",
+ side: "bottom",
+ align: "center",
},
- sideOffset: {
- options: Object.keys(Tokens.sizes),
- mapping: theme.sizes,
- control: "select",
+
+ argTypes: {
+ density: {
+ control: "select",
+ options: ["default", "compact"],
+ },
+ sideOffset: {
+ options: Object.keys(Tokens.sizes),
+ mapping: theme.sizes,
+ control: "select",
+ },
},
-};
-Default.parameters = {
- chromatic: { disableSnapshot: true },
+ parameters: {
+ chromatic: { disableSnapshot: true },
+ },
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const AnchorTemplate: ComponentStory = (args) => {
+const AnchorTemplate: StoryFn = (args) => {
const triggerRef = React.useRef(null);
const [parentElement, setParentElement] = React.useState();
React.useEffect(() => {
@@ -100,15 +102,19 @@ const AnchorTemplate: ComponentStory = (args) => {
);
};
-export const Anchor = AnchorTemplate.bind({});
-Anchor.args = {
- children:
- "Anchors allow for Popups to be triggered and positioned independently",
+export const Anchor = {
+ render: AnchorTemplate,
+
+ args: {
+ children:
+ "Anchors allow for Popups to be triggered and positioned independently",
+ },
+
+ parameters: { chromatic: { disableSnapshot: true } },
};
-Anchor.parameters = { chromatic: { disableSnapshot: true } };
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const CloseButtonTemplate: ComponentStory = (args) => {
+const CloseButtonTemplate: StoryFn = (args) => {
const triggerRef = React.useRef(null);
const [parentElement, setParentElement] = React.useState();
React.useEffect(() => {
@@ -135,11 +141,15 @@ const CloseButtonTemplate: ComponentStory = (args) => {
);
};
-export const CloseButton = CloseButtonTemplate.bind({});
-CloseButton.args = {
- children: "An optional close button may be included",
+export const CloseButton = {
+ render: CloseButtonTemplate,
+
+ args: {
+ children: "An optional close button may be included",
+ },
+
+ parameters: { chromatic: { disableSnapshot: true } },
};
-CloseButton.parameters = { chromatic: { disableSnapshot: true } };
const SideMenu = styled("menu", {
backgroundColor: theme.colors.gray40,
@@ -206,7 +216,7 @@ const Arrow = () => {
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const MenuTemplate: ComponentStory = () => {
+const MenuTemplate: StoryFn = () => {
const [menuOpen, setMenuOpen] = React.useState(false);
return (
@@ -264,11 +274,13 @@ const MenuTemplate: ComponentStory = () => {
);
};
-export const Menu = MenuTemplate.bind({});
-Menu.parameters = { chromatic: { disableSnapshot: true } };
+export const Menu = {
+ render: MenuTemplate,
+ parameters: { chromatic: { disableSnapshot: true } },
+};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const FullPopover: ComponentStory = ({ side, align }) => (
+const FullPopover: StoryFn = ({ side, align }) => (
= ({ side, align }) => (
);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const ChromaticTemplate: ComponentStory = () => {
+const ChromaticTemplate: StoryFn = () => {
const side = ["bottom", "top", "right", "left"];
const align = ["start", "center", "end"];
@@ -354,10 +366,13 @@ const ChromaticTemplate: ComponentStory = () => {
);
};
-export const Chromatic = ChromaticTemplate.bind({});
-Chromatic.parameters = {
- docs: { disable: true },
- chromatic: { delay: 1000 },
+export const Chromatic = {
+ render: ChromaticTemplate,
+
+ parameters: {
+ docs: { disable: true },
+ chromatic: { delay: 1000 },
+ },
};
const ecGlobalCss = globalCss({
@@ -370,7 +385,7 @@ const ecGlobalCss = globalCss({
});
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const EdgeAndCornerCasesTemplate: ComponentStory = () => {
+const EdgeAndCornerCasesTemplate: StoryFn = () => {
ecGlobalCss();
return (
= () => {
);
};
-export const EdgeAndCornerCases = EdgeAndCornerCasesTemplate.bind({});
-EdgeAndCornerCases.parameters = {
- docs: { disable: true },
- chromatic: { delay: 3000 },
+export const EdgeAndCornerCases = {
+ render: EdgeAndCornerCasesTemplate,
+
+ parameters: {
+ docs: { disable: true },
+ chromatic: { delay: 3000 },
+ },
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const InteractionsTemplate: ComponentStory = () => (
+const InteractionsTemplate: StoryFn = () => (
Trigger
Popover Content
);
-export const Interactions = InteractionsTemplate.bind({});
-Interactions.parameters = {
- chromatic: { disableSnapshot: true },
+export const Interactions = {
+ render: InteractionsTemplate,
+
+ parameters: {
+ chromatic: { disableSnapshot: true },
+ },
+
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+
+ const trigger = canvas.getByRole("button");
+ await userEvent.click(trigger);
+ await sleep(500);
+ const content = canvas.getByRole("dialog");
+ await expect(content).toBeVisible();
+ await userEvent.click(document.body);
+ await sleep(500);
+ await expect(content).not.toBeInTheDocument();
+ },
};
// Function to emulate pausing between interactions
function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
-
-Interactions.play = async ({ canvasElement }) => {
- const canvas = within(canvasElement);
-
- const trigger = canvas.getByRole("button");
- await userEvent.click(trigger);
- await sleep(500);
- const content = canvas.getByRole("dialog");
- await expect(content).toBeVisible();
- await userEvent.click(document.body);
- await sleep(500);
- await expect(content).not.toBeInTheDocument();
-};
diff --git a/ui/radio-group/src/RadioButton.tsx b/packages/kit/src/radio-group/RadioButton.tsx
similarity index 95%
rename from ui/radio-group/src/RadioButton.tsx
rename to packages/kit/src/radio-group/RadioButton.tsx
index e984ba011..083d6b496 100644
--- a/ui/radio-group/src/RadioButton.tsx
+++ b/packages/kit/src/radio-group/RadioButton.tsx
@@ -1,8 +1,8 @@
-import * as React from "react";
+import React from "react";
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import * as Theme from "@washingtonpost/wpds-theme";
-import type * as WPDS from "@washingtonpost/wpds-theme";
-import { InputLabel } from "@washingtonpost/wpds-input-label";
+import * as Theme from "../theme";
+import type * as WPDS from "../theme";
+import { InputLabel } from "../input-label";
const NAME = "RadioButton";
diff --git a/ui/radio-group/src/RadioGroup.tsx b/packages/kit/src/radio-group/RadioGroup.tsx
similarity index 92%
rename from ui/radio-group/src/RadioGroup.tsx
rename to packages/kit/src/radio-group/RadioGroup.tsx
index d0b98fa5a..9f034beff 100644
--- a/ui/radio-group/src/RadioGroup.tsx
+++ b/packages/kit/src/radio-group/RadioGroup.tsx
@@ -1,10 +1,10 @@
-import * as React from "react";
+import React from "react";
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
import type { RadioGroupProps as RadioGroupRootProps } from "@radix-ui/react-radio-group";
-import * as Theme from "@washingtonpost/wpds-theme";
-import type * as WPDS from "@washingtonpost/wpds-theme";
-import { Fieldset } from "@washingtonpost/wpds-fieldset";
-import { ErrorMessage } from "@washingtonpost/wpds-error-message";
+import * as Theme from "../theme";
+import type * as WPDS from "../theme";
+import { Fieldset } from "../fieldset";
+import { ErrorMessage } from "../error-message";
const NAME = "RadioGroup";
diff --git a/ui/radio-group/src/index.ts b/packages/kit/src/radio-group/index.ts
similarity index 100%
rename from ui/radio-group/src/index.ts
rename to packages/kit/src/radio-group/index.ts
diff --git a/ui/radio-group/src/play.stories.tsx b/packages/kit/src/radio-group/play.stories.tsx
similarity index 73%
rename from ui/radio-group/src/play.stories.tsx
rename to packages/kit/src/radio-group/play.stories.tsx
index a0dff98cf..ef7a31a4d 100644
--- a/ui/radio-group/src/play.stories.tsx
+++ b/packages/kit/src/radio-group/play.stories.tsx
@@ -1,19 +1,19 @@
-import * as React from "react";
+import React, { useState } from "react";
import { screen, userEvent } from "@storybook/testing-library";
import { expect } from "@storybook/jest";
import { RadioGroup as Component, RadioButton } from "./";
-import { styled, css, theme } from "@washingtonpost/wpds-theme";
-import { Box } from "../../box";
+import { styled, css, theme } from "../theme";
+import { Box } from "../box";
-import type { ComponentMeta, ComponentStory } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react";
export default {
title: "RadioGroup",
component: Component,
subcomponents: { RadioButton },
-} as ComponentMeta;
+} as Meta;
-const Template: ComponentStory = (args) => (
+const Template: StoryFn = (args) => (
= (args) => (
);
-export const RadioGroup = Template.bind({});
+export const RadioGroup = {
+ render: Template,
-RadioGroup.args = {
- legend: "Select an option",
- name: "my-value",
-};
+ args: {
+ legend: "Select an option",
+ name: "my-value",
+ },
-RadioGroup.argTypes = {
- errorMessage: {
- control: "text",
+ argTypes: {
+ errorMessage: {
+ control: "text",
+ },
},
-};
-RadioGroup.parameters = {
- chromatic: { disableSnapshot: true },
+ parameters: {
+ chromatic: { disableSnapshot: true },
+ },
};
-const WrapTemplate: ComponentStory = (args) => (
+const WrapTemplate: StoryFn = (args) => (
= (args) => (
);
-export const WrapOptions = WrapTemplate.bind({});
+export const WrapOptions = {
+ render: WrapTemplate,
-WrapOptions.args = {
- legend: "Select an option",
- name: "my-value",
- orientation: "horizontal",
-};
+ args: {
+ legend: "Select an option",
+ name: "my-value",
+ orientation: "horizontal",
+ },
-WrapOptions.parameters = {
- chromatic: { disableSnapshot: true },
+ parameters: {
+ chromatic: { disableSnapshot: true },
+ },
};
-const OverflowTemplate: ComponentStory = () => (
+const OverflowTemplate: StoryFn = () => (
= () => (
);
-export const Overflow = OverflowTemplate.bind({});
-Overflow.parameters = {
- chromatic: { disableSnapshot: true },
+export const Overflow = {
+ render: OverflowTemplate,
+
+ parameters: {
+ chromatic: { disableSnapshot: true },
+ },
};
-const ControlledTemplate: ComponentStory = () => {
- const [value, setValue] = React.useState("opt1");
+const ControlledTemplate: StoryFn = () => {
+ const [value, setValue] = useState("opt1");
function handleValueChange(val) {
setValue(val);
}
@@ -106,9 +113,12 @@ const ControlledTemplate: ComponentStory = () => {
);
};
-export const Controlled = ControlledTemplate.bind({});
-Controlled.parameters = {
- chromatic: { disableSnapshot: true },
+export const Controlled = {
+ render: ControlledTemplate,
+
+ parameters: {
+ chromatic: { disableSnapshot: true },
+ },
};
const Column = styled("div", {
@@ -132,7 +142,7 @@ const Heading = styled("h2", {
marginBlock: 0,
});
-const ChromaticTemplate: ComponentStory = () => (
+const ChromaticTemplate: StoryFn = () => (
Variants
@@ -206,33 +216,38 @@ const ChromaticTemplate: ComponentStory = () => (
);
-export const Chromatic = ChromaticTemplate.bind({});
-Chromatic.args = {};
+export const Chromatic = {
+ render: ChromaticTemplate,
+ args: {},
+};
-const InteractionsTemplate: ComponentStory = () => (
+const InteractionsTemplate: StoryFn = () => (
);
-export const Interactions = InteractionsTemplate.bind({});
-Interactions.parameters = {
- chromatic: { disableSnapshot: true },
+export const Interactions = {
+ render: InteractionsTemplate,
+
+ parameters: {
+ chromatic: { disableSnapshot: true },
+ },
+
+ play: async () => {
+ const input1 = screen.getByLabelText("Option 1");
+ const input2 = screen.getByLabelText("Option 2");
+ await userEvent.click(input1);
+ await expect(input1).toBeChecked();
+ await userEvent.keyboard("[ArrowDown]");
+ await sleep(0);
+ await userEvent.keyboard(" ");
+ await expect(input2).toBeChecked();
+ },
};
// Function to emulate pausing between interactions
function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
-
-Interactions.play = async () => {
- const input1 = screen.getByLabelText("Option 1");
- const input2 = screen.getByLabelText("Option 2");
- await userEvent.click(input1);
- await expect(input1).toBeChecked();
- await userEvent.keyboard("[ArrowDown]");
- await sleep(0);
- await userEvent.keyboard(" ");
- await expect(input2).toBeChecked();
-};
diff --git a/ui/scrim/src/Scrim.test.tsx b/packages/kit/src/scrim/Scrim.test.tsx
similarity index 95%
rename from ui/scrim/src/Scrim.test.tsx
rename to packages/kit/src/scrim/Scrim.test.tsx
index e8782a2d6..59e6933df 100644
--- a/ui/scrim/src/Scrim.test.tsx
+++ b/packages/kit/src/scrim/Scrim.test.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
import { render, screen } from "@testing-library/react";
import { Scrim } from "./Scrim";
diff --git a/ui/scrim/src/Scrim.tsx b/packages/kit/src/scrim/Scrim.tsx
similarity index 93%
rename from ui/scrim/src/Scrim.tsx
rename to packages/kit/src/scrim/Scrim.tsx
index b0f5c8f5c..418bf95de 100644
--- a/ui/scrim/src/Scrim.tsx
+++ b/packages/kit/src/scrim/Scrim.tsx
@@ -1,7 +1,7 @@
-import * as React from "react";
+import React from "react";
import { CSSTransition } from "react-transition-group";
-import { styled, theme, css as wpCSS } from "@washingtonpost/wpds-theme";
-import type * as WPDS from "@washingtonpost/wpds-theme";
+import { styled, theme, css as wpCSS } from "../theme";
+import type * as WPDS from "../theme";
import type { Token } from "@stitches/react/types/theme";
import type { StandardLonghandProperties } from "@stitches/react/types/css";
diff --git a/ui/scrim/src/index.ts b/packages/kit/src/scrim/index.ts
similarity index 100%
rename from ui/scrim/src/index.ts
rename to packages/kit/src/scrim/index.ts
diff --git a/ui/scrim/src/play.stories.tsx b/packages/kit/src/scrim/play.stories.tsx
similarity index 79%
rename from ui/scrim/src/play.stories.tsx
rename to packages/kit/src/scrim/play.stories.tsx
index 3b646903b..b0ccc7361 100644
--- a/ui/scrim/src/play.stories.tsx
+++ b/packages/kit/src/scrim/play.stories.tsx
@@ -1,17 +1,17 @@
-import * as React from "react";
-import { Box } from "@washingtonpost/wpds-box";
-import { theme } from "@washingtonpost/wpds-theme";
+import React, { useState } from "react";
+import { Box } from "../box";
+import { theme } from "../theme";
import { Scrim as Component } from "./";
-import type { ComponentMeta, ComponentStory } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react";
export default {
title: "Scrim",
component: Component,
-} as ComponentMeta;
+} as Meta;
-const Template: ComponentStory = (args) => {
- const [open, setOpen] = React.useState(false);
+const Template: StoryFn = (args) => {
+ const [open, setOpen] = useState(false);
function handleOpenChange(val) {
setOpen(() => val);
}
@@ -72,18 +72,20 @@ const Template: ComponentStory = (args) => {
);
};
-export const Scrim = Template.bind({});
+export const Scrim = {
+ render: Template,
-Scrim.args = {
- zIndex: theme.zIndices.shell,
- lockScroll: true,
-};
+ args: {
+ zIndex: theme.zIndices.shell,
+ lockScroll: true,
+ },
-Scrim.parameters = {
- chromatic: { disableSnapshot: true },
+ parameters: {
+ chromatic: { disableSnapshot: true },
+ },
};
-const ChromaticTemplate: ComponentStory = () => {
+const ChromaticTemplate: StoryFn = () => {
return (
<>
= () => {
);
};
-export const Chromatic = ChromaticTemplate.bind({});
+export const Chromatic = {
+ render: ChromaticTemplate,
+};
diff --git a/ui/select/src/Select.tsx b/packages/kit/src/select/Select.tsx
similarity index 97%
rename from ui/select/src/Select.tsx
rename to packages/kit/src/select/Select.tsx
index 2a6b32a71..8a106467c 100644
--- a/ui/select/src/Select.tsx
+++ b/packages/kit/src/select/Select.tsx
@@ -1,9 +1,9 @@
-import * as React from "react";
+import React from "react";
import * as SelectPrimitive from "@radix-ui/react-select";
import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import type * as WPDS from "@washingtonpost/wpds-theme";
+import type * as WPDS from "../theme";
import { SelectContent } from "./SelectContent";
import { SelectGroup } from "./SelectGroup";
diff --git a/ui/select/src/SelectContent.tsx b/packages/kit/src/select/SelectContent.tsx
similarity index 92%
rename from ui/select/src/SelectContent.tsx
rename to packages/kit/src/select/SelectContent.tsx
index b4e40e3bb..38c7a8019 100644
--- a/ui/select/src/SelectContent.tsx
+++ b/packages/kit/src/select/SelectContent.tsx
@@ -1,12 +1,12 @@
-import * as React from "react";
+import React from "react";
import { SelectContext } from "./Select";
-import { styled, theme } from "@washingtonpost/wpds-theme";
-import { Icon } from "@washingtonpost/wpds-icon";
+import { styled, theme } from "../theme";
+import { Icon } from "../icon";
import { ChevronUp, ChevronDown } from "@washingtonpost/wpds-assets";
import * as SelectPrimitive from "@radix-ui/react-select";
-import type * as WPDS from "@washingtonpost/wpds-theme";
+import type * as WPDS from "../theme";
const StyledContent = styled(SelectPrimitive.Content, {
backgroundColor: theme.colors.secondary,
diff --git a/ui/select/src/SelectGroup.tsx b/packages/kit/src/select/SelectGroup.tsx
similarity index 87%
rename from ui/select/src/SelectGroup.tsx
rename to packages/kit/src/select/SelectGroup.tsx
index 124865c2b..225fd1c54 100644
--- a/ui/select/src/SelectGroup.tsx
+++ b/packages/kit/src/select/SelectGroup.tsx
@@ -1,10 +1,10 @@
-import * as React from "react";
+import React from "react";
-import { styled, theme } from "@washingtonpost/wpds-theme";
-import { Divider } from "@washingtonpost/wpds-divider";
+import { styled, theme } from "../theme";
+import { Divider } from "../divider";
import * as SelectPrimitive from "@radix-ui/react-select";
-import type * as WPDS from "@washingtonpost/wpds-theme";
+import type * as WPDS from "../theme";
const StyledSelectGroup = styled(SelectPrimitive.Group, {});
diff --git a/ui/select/src/SelectItem.tsx b/packages/kit/src/select/SelectItem.tsx
similarity index 92%
rename from ui/select/src/SelectItem.tsx
rename to packages/kit/src/select/SelectItem.tsx
index ee8130418..b81689a29 100644
--- a/ui/select/src/SelectItem.tsx
+++ b/packages/kit/src/select/SelectItem.tsx
@@ -1,10 +1,10 @@
-import * as React from "react";
+import React from "react";
-import { styled, theme } from "@washingtonpost/wpds-theme";
+import { styled, theme } from "../theme";
import { Check } from "@washingtonpost/wpds-assets";
import * as SelectPrimitive from "@radix-ui/react-select";
-import type * as WPDS from "@washingtonpost/wpds-theme";
+import type * as WPDS from "../theme";
const StyledItem = styled(SelectPrimitive.Item, {
all: "unset",
diff --git a/ui/select/src/SelectLabel.tsx b/packages/kit/src/select/SelectLabel.tsx
similarity index 92%
rename from ui/select/src/SelectLabel.tsx
rename to packages/kit/src/select/SelectLabel.tsx
index c52a7bccc..aecf1f2cc 100644
--- a/ui/select/src/SelectLabel.tsx
+++ b/packages/kit/src/select/SelectLabel.tsx
@@ -1,10 +1,10 @@
-import * as React from "react";
+import React from "react";
import { SelectContext } from "./Select";
-import { theme, styled } from "@washingtonpost/wpds-theme";
-import { InputLabel } from "@washingtonpost/wpds-input-label";
+import { theme, styled } from "../theme";
+import { InputLabel } from "../input-label";
-import type * as WPDS from "@washingtonpost/wpds-theme";
+import type * as WPDS from "../theme";
const LabelInputWrapper = styled("div", {
position: "relative",
diff --git a/ui/select/src/SelectTrigger.tsx b/packages/kit/src/select/SelectTrigger.tsx
similarity index 88%
rename from ui/select/src/SelectTrigger.tsx
rename to packages/kit/src/select/SelectTrigger.tsx
index 025c038bb..5ace0badd 100644
--- a/ui/select/src/SelectTrigger.tsx
+++ b/packages/kit/src/select/SelectTrigger.tsx
@@ -1,17 +1,14 @@
-import * as React from "react";
+import React from "react";
-import { theme, styled } from "@washingtonpost/wpds-theme";
+import { theme, styled } from "../theme";
import { ChevronDown } from "@washingtonpost/wpds-assets";
-import { Icon } from "@washingtonpost/wpds-icon";
-import { ErrorMessage } from "@washingtonpost/wpds-error-message";
-import { HelperText } from "@washingtonpost/wpds-helper-text";
-import {
- sharedInputStyles,
- sharedInputVariants,
-} from "@washingtonpost/wpds-input-shared";
+import { Icon } from "../icon";
+import { ErrorMessage } from "../error-message";
+import { HelperText } from "../helper-text";
+import { sharedInputStyles, sharedInputVariants } from "../input-shared";
import * as SelectPrimitive from "@radix-ui/react-select";
-import type * as WPDS from "@washingtonpost/wpds-theme";
+import type * as WPDS from "../theme";
import { SelectTriggerProps as RadixAccordionTriggerProps } from "@radix-ui/react-select";
import { SelectContext } from "./Select";
diff --git a/ui/select/src/SelectValue.tsx b/packages/kit/src/select/SelectValue.tsx
similarity index 88%
rename from ui/select/src/SelectValue.tsx
rename to packages/kit/src/select/SelectValue.tsx
index 71fd7808e..33dcc0087 100644
--- a/ui/select/src/SelectValue.tsx
+++ b/packages/kit/src/select/SelectValue.tsx
@@ -1,11 +1,11 @@
-import * as React from "react";
+import React from "react";
import { SelectContext } from "./Select";
-import { theme, styled } from "@washingtonpost/wpds-theme";
-import { unstyledInputStyles } from "@washingtonpost/wpds-input-shared";
+import { theme, styled } from "../theme";
+import { unstyledInputStyles } from "../input-shared";
import * as SelectPrimitive from "@radix-ui/react-select";
-import type * as WPDS from "@washingtonpost/wpds-theme";
+import type * as WPDS from "../theme";
import { SelectValueProps as RadixSelectValueProps } from "@radix-ui/react-select";
const StyledValue = styled("div", {
diff --git a/ui/select/src/index.ts b/packages/kit/src/select/index.ts
similarity index 100%
rename from ui/select/src/index.ts
rename to packages/kit/src/select/index.ts
diff --git a/ui/select/src/play.stories.tsx b/packages/kit/src/select/play.stories.tsx
similarity index 87%
rename from ui/select/src/play.stories.tsx
rename to packages/kit/src/select/play.stories.tsx
index 40ce8af69..16f8c897b 100644
--- a/ui/select/src/play.stories.tsx
+++ b/packages/kit/src/select/play.stories.tsx
@@ -1,9 +1,9 @@
-import * as React from "react";
+import React, { useState } from "react";
import { Select } from "./";
-import { Button, Icon, Tooltip, theme } from "@washingtonpost/wpds-ui-kit";
+import { Button, Icon, Tooltip, theme } from "../index";
import { Info } from "@washingtonpost/wpds-assets";
-import type { ComponentStory } from "@storybook/react";
+import type { StoryFn } from "@storybook/react";
export default {
title: "Select",
@@ -18,7 +18,7 @@ export default {
},
};
-const Template: ComponentStory = (args) => {
+const Template: StoryFn = (args) => {
return (
<>
@@ -46,24 +46,26 @@ const Template: ComponentStory = (args) => {
);
};
-export const Play = Template.bind({});
+export const Play = {
+ render: Template,
-Play.args = {
- success: false,
- required: false,
- disabled: false,
- error: false,
- errorMessage: "",
- helperText: "",
-};
+ args: {
+ success: false,
+ required: false,
+ disabled: false,
+ error: false,
+ errorMessage: "",
+ helperText: "",
+ },
-Play.storyName = "Select";
+ name: "Select",
-Play.parameters = {
- chromatic: { disableSnapshot: true },
+ parameters: {
+ chromatic: { disableSnapshot: true },
+ },
};
-const UnselectedTemplate: ComponentStory = (args) => {
+const UnselectedTemplate: StoryFn = (args) => {
return (
<>
@@ -91,14 +93,16 @@ const UnselectedTemplate: ComponentStory = (args) => {
);
};
-export const Unselected = UnselectedTemplate.bind({});
+export const Unselected = {
+ render: UnselectedTemplate,
-Unselected.parameters = {
- chromatic: { disableSnapshot: false },
+ parameters: {
+ chromatic: { disableSnapshot: false },
+ },
};
-const ControlledTemplate: ComponentStory = (args) => {
- const [country, setCountry] = React.useState("spain");
+const ControlledTemplate: StoryFn = (args) => {
+ const [country, setCountry] = useState("spain");
const handleValueChange = (value: string) => {
setCountry(value);
};
@@ -121,10 +125,12 @@ const ControlledTemplate: ComponentStory = (args) => {
);
};
-export const Controlled = ControlledTemplate.bind({});
+export const Controlled = {
+ render: ControlledTemplate,
-Controlled.parameters = {
- chromatic: { disableSnapshot: true },
+ parameters: {
+ chromatic: { disableSnapshot: true },
+ },
};
export const SelectsInARow = () => {
@@ -236,7 +242,7 @@ export const SelectsInARow = () => {
);
};
-const LabelOverflowTemplate: ComponentStory = (args) => {
+const LabelOverflowTemplate: StoryFn = (args) => {
return (
@@ -256,4 +262,6 @@ const LabelOverflowTemplate: ComponentStory = (args) => {
);
};
-export const LabelOverflow = LabelOverflowTemplate.bind({});
+export const LabelOverflow = {
+ render: LabelOverflowTemplate,
+};
diff --git a/packages/kit/src/switch/SwitchRoot.tsx b/packages/kit/src/switch/SwitchRoot.tsx
index 0ba4309a8..04ac4a8b3 100644
--- a/packages/kit/src/switch/SwitchRoot.tsx
+++ b/packages/kit/src/switch/SwitchRoot.tsx
@@ -1,6 +1,6 @@
import * as React from "react";
import * as SwitchPrimitive from "@radix-ui/react-switch";
-import { styled, theme } from "@washingtonpost/wpds-theme";
+import { styled, theme } from "../theme";
export const SwitchRoot = styled(SwitchPrimitive.Root, {
// reset button styles
diff --git a/packages/kit/src/switch/SwitchThumb.tsx b/packages/kit/src/switch/SwitchThumb.tsx
index 83cc265cf..d3f23199f 100644
--- a/packages/kit/src/switch/SwitchThumb.tsx
+++ b/packages/kit/src/switch/SwitchThumb.tsx
@@ -1,7 +1,7 @@
// import * as React from "react";
import * as Radix from "@radix-ui/react-switch";
import type { SwitchThumbProps as RadixSwitchThumbProps } from "@radix-ui/react-switch";
-import { styled, theme } from "@washingtonpost/wpds-theme";
+import { styled, theme } from "../theme";
export const SwitchThumb = styled(Radix.Thumb, {
display: "inline-block",
diff --git a/packages/kit/src/switch/play.stories.tsx b/packages/kit/src/switch/play.stories.tsx
index 177587270..31ab50a54 100644
--- a/packages/kit/src/switch/play.stories.tsx
+++ b/packages/kit/src/switch/play.stories.tsx
@@ -1,3 +1,4 @@
+import React from "react";
import { Switch } from ".";
import type { ComponentMeta, ComponentStory } from "@storybook/react";
import { styled } from "@washingtonpost/wpds-theme";
diff --git a/ui/tabs/src/Tabs.tsx b/packages/kit/src/tabs/Tabs.tsx
similarity index 100%
rename from ui/tabs/src/Tabs.tsx
rename to packages/kit/src/tabs/Tabs.tsx
diff --git a/ui/tabs/src/TabsContent.test.tsx b/packages/kit/src/tabs/TabsContent.test.tsx
similarity index 92%
rename from ui/tabs/src/TabsContent.test.tsx
rename to packages/kit/src/tabs/TabsContent.test.tsx
index 2bed56eff..042448426 100644
--- a/ui/tabs/src/TabsContent.test.tsx
+++ b/packages/kit/src/tabs/TabsContent.test.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
import { render, screen } from "@testing-library/react";
import { TabsRoot } from "./TabsRoot";
import { TabsContent } from "./TabsContent";
diff --git a/ui/tabs/src/TabsContent.tsx b/packages/kit/src/tabs/TabsContent.tsx
similarity index 87%
rename from ui/tabs/src/TabsContent.tsx
rename to packages/kit/src/tabs/TabsContent.tsx
index 0bac51d9b..1b6aad56b 100644
--- a/ui/tabs/src/TabsContent.tsx
+++ b/packages/kit/src/tabs/TabsContent.tsx
@@ -1,6 +1,6 @@
-import * as React from "react";
+import React from "react";
-import type * as WPDS from "@washingtonpost/wpds-theme";
+import type * as WPDS from "../theme";
import type { TabsContentProps as RadixTabsContentProps } from "@radix-ui/react-tabs";
import * as RadixTabs from "@radix-ui/react-tabs";
diff --git a/ui/tabs/src/TabsList.test.tsx b/packages/kit/src/tabs/TabsList.test.tsx
similarity index 92%
rename from ui/tabs/src/TabsList.test.tsx
rename to packages/kit/src/tabs/TabsList.test.tsx
index d117a75c8..da6fd34a6 100644
--- a/ui/tabs/src/TabsList.test.tsx
+++ b/packages/kit/src/tabs/TabsList.test.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
import { render, screen } from "@testing-library/react";
import { TabsRoot } from "./TabsRoot";
import { TabsList } from "./TabsList";
diff --git a/ui/tabs/src/TabsList.tsx b/packages/kit/src/tabs/TabsList.tsx
similarity index 91%
rename from ui/tabs/src/TabsList.tsx
rename to packages/kit/src/tabs/TabsList.tsx
index ff907497b..1e12b194a 100644
--- a/ui/tabs/src/TabsList.tsx
+++ b/packages/kit/src/tabs/TabsList.tsx
@@ -1,9 +1,9 @@
-import * as React from "react";
+import React from "react";
import * as TabsPrimitive from "@radix-ui/react-tabs";
-import type * as WPDS from "@washingtonpost/wpds-theme";
+import type * as WPDS from "../theme";
-import { styled, theme } from "@washingtonpost/wpds-theme";
+import { styled, theme } from "../theme";
const StyledTabsList = styled(TabsPrimitive.List, {
flexShrink: 0,
diff --git a/ui/tabs/src/TabsRoot.test.tsx b/packages/kit/src/tabs/TabsRoot.test.tsx
similarity index 97%
rename from ui/tabs/src/TabsRoot.test.tsx
rename to packages/kit/src/tabs/TabsRoot.test.tsx
index 57b2c81e1..add9c42ff 100644
--- a/ui/tabs/src/TabsRoot.test.tsx
+++ b/packages/kit/src/tabs/TabsRoot.test.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { TabsRoot } from "./TabsRoot";
diff --git a/ui/tabs/src/TabsRoot.tsx b/packages/kit/src/tabs/TabsRoot.tsx
similarity index 91%
rename from ui/tabs/src/TabsRoot.tsx
rename to packages/kit/src/tabs/TabsRoot.tsx
index c7c0b66d2..1ee829335 100644
--- a/ui/tabs/src/TabsRoot.tsx
+++ b/packages/kit/src/tabs/TabsRoot.tsx
@@ -1,8 +1,8 @@
-import * as React from "react";
+import React from "react";
import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { styled } from "@washingtonpost/wpds-theme";
+import { styled } from "../theme";
-import type * as WPDS from "@washingtonpost/wpds-theme";
+import type * as WPDS from "../theme";
import { TabsContext } from "./context";
const StyledTabsRoot = styled(TabsPrimitive.Root, {});
diff --git a/ui/tabs/src/TabsTrigger.test.tsx b/packages/kit/src/tabs/TabsTrigger.test.tsx
similarity index 95%
rename from ui/tabs/src/TabsTrigger.test.tsx
rename to packages/kit/src/tabs/TabsTrigger.test.tsx
index 887b94ef9..a5f5a9a67 100644
--- a/ui/tabs/src/TabsTrigger.test.tsx
+++ b/packages/kit/src/tabs/TabsTrigger.test.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import { useContext } from "react";
import { render, screen } from "@testing-library/react";
import { TabsRoot } from "./TabsRoot";
import { TabsList } from "./TabsList";
@@ -44,7 +44,7 @@ describe("TabsTrigger", () => {
test("sets previous rect", () => {
const Note = () => {
- const { previousRect } = React.useContext(TabsContext);
+ const { previousRect } = useContext(TabsContext);
if (previousRect) {
return {previousRect.width};
}
diff --git a/ui/tabs/src/TabsTrigger.tsx b/packages/kit/src/tabs/TabsTrigger.tsx
similarity index 96%
rename from ui/tabs/src/TabsTrigger.tsx
rename to packages/kit/src/tabs/TabsTrigger.tsx
index d10002e9d..addd10bd1 100644
--- a/ui/tabs/src/TabsTrigger.tsx
+++ b/packages/kit/src/tabs/TabsTrigger.tsx
@@ -1,13 +1,13 @@
-import * as React from "react";
+import React from "react";
import { CSSTransition } from "react-transition-group";
import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { styled, theme } from "@washingtonpost/wpds-theme";
+import { styled, theme } from "../theme";
import { TabsTriggerContent } from "./TabsTriggerContent";
import { TabsContext } from "./context";
-import type * as WPDS from "@washingtonpost/wpds-theme";
+import type * as WPDS from "../theme";
const afterConsts = {
content: "",
diff --git a/ui/tabs/src/TabsTriggerContent.test.tsx b/packages/kit/src/tabs/TabsTriggerContent.test.tsx
similarity index 97%
rename from ui/tabs/src/TabsTriggerContent.test.tsx
rename to packages/kit/src/tabs/TabsTriggerContent.test.tsx
index 44011e37e..d63e976e7 100644
--- a/ui/tabs/src/TabsTriggerContent.test.tsx
+++ b/packages/kit/src/tabs/TabsTriggerContent.test.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
import { render, screen } from "@testing-library/react";
import { TabsRoot } from "./TabsRoot";
import { TabsList } from "./TabsList";
diff --git a/ui/tabs/src/TabsTriggerContent.tsx b/packages/kit/src/tabs/TabsTriggerContent.tsx
similarity index 92%
rename from ui/tabs/src/TabsTriggerContent.tsx
rename to packages/kit/src/tabs/TabsTriggerContent.tsx
index 89d3f14dc..8d0f41866 100644
--- a/ui/tabs/src/TabsTriggerContent.tsx
+++ b/packages/kit/src/tabs/TabsTriggerContent.tsx
@@ -1,8 +1,8 @@
-import * as React from "react";
+import React from "react";
-import { styled, theme } from "@washingtonpost/wpds-theme";
-import type * as WPDS from "@washingtonpost/wpds-theme";
-import { Tooltip } from "@washingtonpost/wpds-tooltip";
+import { styled, theme } from "../theme";
+import type * as WPDS from "../theme";
+import { Tooltip } from "../tooltip";
const StyledContainer = styled("div", {
display: "flex",
diff --git a/ui/tabs/src/context.ts b/packages/kit/src/tabs/context.ts
similarity index 73%
rename from ui/tabs/src/context.ts
rename to packages/kit/src/tabs/context.ts
index d91d367ed..c35bd2851 100644
--- a/ui/tabs/src/context.ts
+++ b/packages/kit/src/tabs/context.ts
@@ -1,4 +1,4 @@
-import * as React from "react";
+import { createContext } from "react";
interface TabsContextInterface {
currentValue: string | undefined;
@@ -12,5 +12,4 @@ const defaultState = {
// eslint-disable-next-line @typescript-eslint/no-empty-function
setPreviousRect: () => {},
};
-export const TabsContext =
- React.createContext(defaultState);
+export const TabsContext = createContext(defaultState);
diff --git a/ui/tabs/src/index.ts b/packages/kit/src/tabs/index.ts
similarity index 100%
rename from ui/tabs/src/index.ts
rename to packages/kit/src/tabs/index.ts
diff --git a/ui/tabs/src/play.stories.tsx b/packages/kit/src/tabs/play.stories.tsx
similarity index 80%
rename from ui/tabs/src/play.stories.tsx
rename to packages/kit/src/tabs/play.stories.tsx
index 95c7af369..629de4a02 100644
--- a/ui/tabs/src/play.stories.tsx
+++ b/packages/kit/src/tabs/play.stories.tsx
@@ -1,15 +1,15 @@
-import * as React from "react";
+import React, { useState } from "react";
import { screen, userEvent } from "@storybook/testing-library";
import { expect } from "@storybook/jest";
import { Tabs } from ".";
-import { styled, theme } from "@washingtonpost/wpds-theme";
+import { styled, theme } from "../theme";
import { Info } from "@washingtonpost/wpds-assets";
-import { Icon } from "@washingtonpost/wpds-icon";
+import { Icon } from "../icon";
-import type { ComponentMeta, ComponentStory } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react";
export default {
title: "Tabs",
@@ -33,7 +33,7 @@ export default {
control: "boolean",
},
},
-} as ComponentMeta;
+} as Meta;
const StyledTabs = styled("div", {
backgroundColor: theme.colors.secondary,
@@ -60,7 +60,7 @@ const StyledContent = styled(Tabs.Content, {
});
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template: ComponentStory = (args) => {
+const Template: StoryFn = (args) => {
const { density, align, ...rest } = args;
return (
<>
@@ -113,16 +113,18 @@ const Template: ComponentStory = (args) => {
);
};
-export const Play = Template.bind({});
+export const Play = {
+ render: Template,
-Play.args = {
- density: "default",
-};
+ args: {
+ density: "default",
+ },
-Play.storyName = "Default";
+ name: "Default",
+};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const TemplateShort: ComponentStory = (args) => {
+const TemplateShort: StoryFn = (args) => {
const { density, align, ...rest } = args;
return (
<>
@@ -152,14 +154,17 @@ const TemplateShort: ComponentStory = (args) => {
);
};
-export const Center = TemplateShort.bind({});
-Center.args = {
- align: "center",
- density: "compact",
+export const Center = {
+ render: TemplateShort,
+
+ args: {
+ align: "center",
+ density: "compact",
+ },
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const TemplateDensity: ComponentStory = () => {
+const TemplateDensity: StoryFn = () => {
return (
Outline for viewing alignment purposes only
@@ -194,12 +199,14 @@ const TemplateDensity: ComponentStory = () => {
);
};
-export const Density = TemplateDensity.bind({});
+export const Density = {
+ render: TemplateDensity,
+};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const TemplateControlled: ComponentStory = (args) => {
+const TemplateControlled: StoryFn = (args) => {
const { density, align, ...rest } = args;
- const [value, setValue] = React.useState("tab3");
+ const [value, setValue] = useState("tab3");
return (
<>
Outline for viewing alignment purposes only
@@ -247,10 +254,12 @@ const TemplateControlled: ComponentStory = (args) => {
);
};
-export const ControlledExample = TemplateControlled.bind({});
+export const ControlledExample = {
+ render: TemplateControlled,
+};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const InteractionsTemplate: ComponentStory = (args) => (
+const InteractionsTemplate: StoryFn = (args) => (
@@ -288,42 +297,44 @@ const InteractionsTemplate: ComponentStory = (args) => (
);
-export const Interactions = InteractionsTemplate.bind({});
+export const Interactions = {
+ render: InteractionsTemplate,
+
+ args: {
+ align: "center",
+ density: "compact",
+ },
+
+ parameters: {
+ chromatic: { disableSnapshot: true },
+ },
+
+ play: async () => {
+ const trigger = screen.getAllByRole("tab");
+ // eslint-disable-next-line testing-library/no-node-access
+ const icon = trigger[0].getElementsByTagName("svg")[0];
+ await expect(icon).toBeVisible();
+ await expect(trigger[0]).toHaveAttribute("aria-selected", "true");
+ await expect(trigger[4]).not.toHaveAttribute("aria-selected", "true");
+ await expect(trigger).toHaveLength(8);
+ await expect(trigger[1]).toBeDisabled();
+
+ await expect(trigger[4]).toBeDefined();
+ await userEvent.click(trigger[4]);
+ await expect(trigger[0]).not.toHaveAttribute("aria-selected", "true");
+ await expect(trigger[4]).toHaveAttribute("aria-selected", "true");
-Interactions.args = {
- align: "center",
- density: "compact",
+ //Test that trigger shows up for truncated item
+ const tooltipTrigger = screen.getAllByTestId("tabs-tooltip-trigger");
+ await userEvent.hover(tooltipTrigger[0]);
+ await sleep(300);
+ const tooltipContent = await screen.findAllByTestId("tabs-tooltip-content");
+ await sleep(300);
+ await expect(tooltipContent[0]).toBeInTheDocument();
+ },
};
// Function to emulate pausing between interactions
function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
-
-Interactions.parameters = {
- chromatic: { disableSnapshot: true },
-};
-
-Interactions.play = async () => {
- const trigger = screen.getAllByRole("tab");
- // eslint-disable-next-line testing-library/no-node-access
- const icon = trigger[0].getElementsByTagName("svg")[0];
- await expect(icon).toBeVisible();
- await expect(trigger[0]).toHaveAttribute("aria-selected", "true");
- await expect(trigger[4]).not.toHaveAttribute("aria-selected", "true");
- await expect(trigger).toHaveLength(8);
- await expect(trigger[1]).toBeDisabled();
-
- await expect(trigger[4]).toBeDefined();
- await userEvent.click(trigger[4]);
- await expect(trigger[0]).not.toHaveAttribute("aria-selected", "true");
- await expect(trigger[4]).toHaveAttribute("aria-selected", "true");
-
- //Test that trigger shows up for truncated item
- const tooltipTrigger = screen.getAllByTestId("tabs-tooltip-trigger");
- await userEvent.hover(tooltipTrigger[0]);
- await sleep(300);
- const tooltipContent = await screen.findAllByTestId("tabs-tooltip-content");
- await sleep(300);
- await expect(tooltipContent[0]).toBeInTheDocument();
-};
diff --git a/packages/kit/src/theme/play.stories.tsx b/packages/kit/src/theme/play.stories.tsx
index b7efa8126..d11875a01 100644
--- a/packages/kit/src/theme/play.stories.tsx
+++ b/packages/kit/src/theme/play.stories.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
import { within, waitFor } from "@storybook/testing-library";
import { expect } from "@storybook/jest";
import { theme, styled } from "../theme";
diff --git a/packages/kit/src/theme/useResponsiveScreenSize.stories.tsx b/packages/kit/src/theme/useResponsiveScreenSize.stories.tsx
index ebe9a683b..401d271cb 100644
--- a/packages/kit/src/theme/useResponsiveScreenSize.stories.tsx
+++ b/packages/kit/src/theme/useResponsiveScreenSize.stories.tsx
@@ -1,3 +1,4 @@
+import React from "react";
import { within, waitFor } from "@storybook/testing-library";
import { expect } from "@storybook/jest";
import { useResponsiveScreenSize } from "./useResponsiveScreenSize";
diff --git a/ui/tooltip/src/Tooltip.tsx b/packages/kit/src/tooltip/Tooltip.tsx
similarity index 97%
rename from ui/tooltip/src/Tooltip.tsx
rename to packages/kit/src/tooltip/Tooltip.tsx
index 64e1cebb9..e74f21312 100644
--- a/ui/tooltip/src/Tooltip.tsx
+++ b/packages/kit/src/tooltip/Tooltip.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
import { TooltipContent } from "./TooltipContent";
import { TooltipTrigger } from "./TooltipTrigger";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
diff --git a/ui/tooltip/src/TooltipContent.tsx b/packages/kit/src/tooltip/TooltipContent.tsx
similarity index 94%
rename from ui/tooltip/src/TooltipContent.tsx
rename to packages/kit/src/tooltip/TooltipContent.tsx
index bb081ba48..9db250ba4 100644
--- a/ui/tooltip/src/TooltipContent.tsx
+++ b/packages/kit/src/tooltip/TooltipContent.tsx
@@ -1,7 +1,7 @@
-import * as React from "react";
+import React, { forwardRef } from "react";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { styled, keyframes, theme } from "@washingtonpost/wpds-theme";
-import type * as WPDS from "@washingtonpost/wpds-theme";
+import { styled, keyframes, theme } from "../theme";
+import type * as WPDS from "../theme";
import { TooltipContentProps as RadixTooltipContentProps } from "@radix-ui/react-tooltip";
import { getPixelsFromRem } from "./utils";
@@ -92,7 +92,7 @@ export interface TooltipContentInterface extends ContentCombinedProps {
* @see Source https://github.com/washingtonpost/wpds-ui-kit/tree/main/ui/tooltip
*/
-export const TooltipContent = React.forwardRef<
+export const TooltipContent = forwardRef<
HTMLDivElement,
TooltipContentInterface
>(
diff --git a/ui/tooltip/src/TooltipTrigger.tsx b/packages/kit/src/tooltip/TooltipTrigger.tsx
similarity index 79%
rename from ui/tooltip/src/TooltipTrigger.tsx
rename to packages/kit/src/tooltip/TooltipTrigger.tsx
index 6609335a4..703cdc33c 100644
--- a/ui/tooltip/src/TooltipTrigger.tsx
+++ b/packages/kit/src/tooltip/TooltipTrigger.tsx
@@ -1,8 +1,8 @@
-import * as React from "react";
-import { styled, theme } from "@washingtonpost/wpds-theme";
+import React, { forwardRef } from "react";
+import { styled, theme } from "../theme";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import { TooltipTriggerProps as RadixTooltipTriggerProps } from "@radix-ui/react-tooltip";
-import type * as WPDS from "@washingtonpost/wpds-theme";
+import type * as WPDS from "../theme";
const StyledTrigger = styled(TooltipPrimitive.Trigger, {
color: theme.colors.primary,
@@ -16,7 +16,7 @@ export interface TooltipTriggerInterface extends TriggerCombinedProps {
css?: WPDS.CSS;
}
-export const TooltipTrigger = React.forwardRef<
+export const TooltipTrigger = forwardRef<
HTMLButtonElement,
TooltipTriggerInterface
>((props: TooltipTriggerInterface, ref) => (
diff --git a/ui/tooltip/src/index.ts b/packages/kit/src/tooltip/index.ts
similarity index 100%
rename from ui/tooltip/src/index.ts
rename to packages/kit/src/tooltip/index.ts
diff --git a/ui/tooltip/src/play.stories.tsx b/packages/kit/src/tooltip/play.stories.tsx
similarity index 74%
rename from ui/tooltip/src/play.stories.tsx
rename to packages/kit/src/tooltip/play.stories.tsx
index ebbd31c65..78a9fa01d 100644
--- a/ui/tooltip/src/play.stories.tsx
+++ b/packages/kit/src/tooltip/play.stories.tsx
@@ -1,10 +1,10 @@
-import * as React from "react";
+import React from "react";
import { screen, userEvent } from "@storybook/testing-library";
import { expect } from "@storybook/jest";
-import { theme } from "@washingtonpost/wpds-theme";
+import { theme } from "../theme";
import { Tooltip } from "./";
-import type { ComponentMeta, ComponentStory } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react";
export default {
title: "Tooltip",
@@ -29,10 +29,10 @@ export default {
parameters: {
chromatic: { delay: 300 },
},
-} as ComponentMeta;
+} as Meta;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template: ComponentStory = (args) => (
+const Template: StoryFn = (args) => (
@@ -52,7 +52,7 @@ const Template: ComponentStory = (args) => (
);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const TemplateRight: ComponentStory = (args) => (
+const TemplateRight: StoryFn = (args) => (