From de30ec8db1f342433e25902e08b59c646df6823e Mon Sep 17 00:00:00 2001 From: Andrew Berg Date: Tue, 6 Feb 2024 14:17:09 -0500 Subject: [PATCH 1/7] feat: update Accordion to React 18 --- packages/kit/src/accordion/Accordion.tsx | 66 ++++++++++ .../kit/src/accordion/AccordionContent.tsx | 75 +++++++++++ packages/kit/src/accordion/AccordionItem.tsx | 27 ++++ .../kit/src/accordion/AccordionTrigger.tsx | 117 ++++++++++++++++++ packages/kit/src/accordion/index.ts | 4 + .../kit/src/accordion}/play.stories.tsx | 22 ++-- scripts/transform-wpds-imports.js | 39 ++++++ 7 files changed, 340 insertions(+), 10 deletions(-) create mode 100644 packages/kit/src/accordion/Accordion.tsx create mode 100644 packages/kit/src/accordion/AccordionContent.tsx create mode 100644 packages/kit/src/accordion/AccordionItem.tsx create mode 100644 packages/kit/src/accordion/AccordionTrigger.tsx create mode 100644 packages/kit/src/accordion/index.ts rename {ui/accordion/src => packages/kit/src/accordion}/play.stories.tsx (87%) create mode 100644 scripts/transform-wpds-imports.js diff --git a/packages/kit/src/accordion/Accordion.tsx b/packages/kit/src/accordion/Accordion.tsx new file mode 100644 index 000000000..ffc156424 --- /dev/null +++ b/packages/kit/src/accordion/Accordion.tsx @@ -0,0 +1,66 @@ +import * as React from "react"; +import { theme, styled } from "@washingtonpost/wpds-theme"; +import type * as WPDS from "@washingtonpost/wpds-theme"; +import * as AccordionPrimitive from "@radix-ui/react-accordion"; +import { AccordionTrigger, AccordionHeader } from "./AccordionTrigger"; +import { AccordionItem } from "./AccordionItem"; +import { AccordionContent } from "./AccordionContent"; +import { + AccordionSingleProps as RadixAccordionSingleProps, + AccordionMultipleProps as RadixAccordionMultipleProps, +} from "@radix-ui/react-accordion"; + +export enum ACCORDION_TYPE { + single = "single", + multiple = "multiple", +} + +export enum ACCORDION_DENSITY { + compact = "compact", + loose = "loose", + default = "default", +} + +const StyledAccordion = styled(AccordionPrimitive.Root, { + width: "100%", + variants: { + disabled: { + true: { + cursor: "not-allowed", + [`${AccordionHeader}`]: { + pointerEvents: "none", + color: theme.colors.accessible, + }, + }, + }, + }, +}); + +type AccordionRootVariants = WPDS.VariantProps; + +export type AccordionRootCombined = ( + | RadixAccordionSingleProps + | RadixAccordionMultipleProps +) & + AccordionRootVariants; + +export const AccordionRoot = React.forwardRef< + HTMLDivElement, + AccordionRootCombined +>(({ ...props }: AccordionRootCombined, ref) => ( + +)); + +AccordionRoot.displayName = "AccordionRoot"; + +const Root = AccordionRoot; +const Item = AccordionItem; +const Content = AccordionContent; +const Trigger = AccordionTrigger; + +export const Accordion = { + Root, + Item, + Content, + Trigger, +}; diff --git a/packages/kit/src/accordion/AccordionContent.tsx b/packages/kit/src/accordion/AccordionContent.tsx new file mode 100644 index 000000000..420cddd24 --- /dev/null +++ b/packages/kit/src/accordion/AccordionContent.tsx @@ -0,0 +1,75 @@ +import * as React from "react"; +import { theme, styled, keyframes } from "@washingtonpost/wpds-theme"; +import * as AccordionPrimitive from "@radix-ui/react-accordion"; +import type * as WPDS from "@washingtonpost/wpds-theme"; +import { AccordionContentProps as RadixAccordionContentProps } from "@radix-ui/react-accordion"; + +const slideDown = keyframes({ + from: { height: 0 }, + to: { height: "var(--radix-accordion-content-height)" }, +}); + +const slideUp = keyframes({ + from: { height: "var(--radix-accordion-content-height)" }, + to: { height: 0 }, +}); + +const easeInOutExpo = `cubic-bezier(0.87, 0, 0.13, 1)`; + +const AnimatedContent = styled(AccordionPrimitive.Content, { + overflow: "hidden", + color: theme.colors.primary, + '&[data-state="open"]': { + animation: `${slideDown} ${theme.transitions.normal} ${easeInOutExpo}`, + "@reducedMotion": { + animation: "none", + }, + }, + '&[data-state="closed"]': { + animation: `${slideUp} ${theme.transitions.normal} ${easeInOutExpo}`, + "@reducedMotion": { + animation: "none", + }, + }, +}); + +const ContentContainer = styled("div", { + paddingBottom: theme.space[150], + paddingRight: theme.space[150], + fontSize: theme.fontSizes[100], +}); + +type AccordionContentVariants = WPDS.VariantProps; +type CombinedProps = RadixAccordionContentProps & AccordionContentVariants; + +export interface AccordionContentInterface extends CombinedProps { + css?: WPDS.CSS; +} + +export const AccordionContent = React.forwardRef< + HTMLDivElement, + AccordionContentInterface +>(({ children, ...props }: AccordionContentInterface, ref) => { + const { + padding = "", + paddingTop = "", + paddingBottom = "", + paddingLeft = "", + paddingRight = "", + ...restOfCss + } = props.css ? props.css : {}; + + const otherProps = { ...props, css: { ...restOfCss } }; + + return ( + + + {children} + + + ); +}); + +AccordionContent.displayName = "AccordionContent"; diff --git a/packages/kit/src/accordion/AccordionItem.tsx b/packages/kit/src/accordion/AccordionItem.tsx new file mode 100644 index 000000000..91bfa50ae --- /dev/null +++ b/packages/kit/src/accordion/AccordionItem.tsx @@ -0,0 +1,27 @@ +import * as React from "react"; +import { theme, styled } from "@washingtonpost/wpds-theme"; +import * as AccordionPrimitive from "@radix-ui/react-accordion"; +import type * as WPDS from "@washingtonpost/wpds-theme"; +import { AccordionItemProps as RadixAccordionItemProps } from "@radix-ui/react-accordion"; + +const StyledAccordionItem = styled(AccordionPrimitive.Item, { + borderBottom: `1px solid ${theme.colors.subtle}`, +}); + +type AccordionItemProps = WPDS.VariantProps & + RadixAccordionItemProps; + +export interface AccordionItemInterface extends AccordionItemProps { + css?: WPDS.CSS; +} + +export const AccordionItem = React.forwardRef< + HTMLDivElement, + AccordionItemInterface +>(({ children, ...props }: AccordionItemInterface, ref) => ( + + {children} + +)); + +AccordionItem.displayName = "AccordionItem"; diff --git a/packages/kit/src/accordion/AccordionTrigger.tsx b/packages/kit/src/accordion/AccordionTrigger.tsx new file mode 100644 index 000000000..a4a631ee2 --- /dev/null +++ b/packages/kit/src/accordion/AccordionTrigger.tsx @@ -0,0 +1,117 @@ +import * as React from "react"; +import { ChevronDown } from "@washingtonpost/wpds-assets"; +import { theme, styled } from "@washingtonpost/wpds-theme"; +import { Icon } from "@washingtonpost/wpds-icon"; +import * as AccordionPrimitive from "@radix-ui/react-accordion"; +import type * as WPDS from "@washingtonpost/wpds-theme"; +import { + AccordionTriggerProps as RadixAccordionTriggerProps, + AccordionHeaderProps as RadixAccordionHeaderProps, +} from "@radix-ui/react-accordion"; + +const StyledTrigger = styled(AccordionPrimitive.Trigger, { + all: "unset", + fontFamily: "inherit", + backgroundColor: "transparent", + flex: 1, + display: "flex", + justifyContent: "space-between", + alignItems: "center", + paddingTop: theme.space[150], + paddingBottom: theme.space[150], + "&:hover": { + cursor: "pointer", + }, + "&:focus-visible": { + position: "relative", + zIndex: 1, + boxShadow: `0 0 0 2px ${theme.colors.cta}`, + }, + variants: { + density: { + default: {}, + compact: { + paddingTop: theme.space[100], + paddingBottom: theme.space[100], + }, + loose: { + paddingTop: theme.space[200], + paddingBottom: theme.space[200], + }, + }, + // this class is for the benefit of the docs only + forcefocus: { + true: { + position: "relative", + zIndex: 1, + boxShadow: `0 0 0 2px ${theme.colors.cta}`, + }, + }, + }, +}); + +const StyledIcon = styled(Icon, { + marginLeft: theme.space[150], + minWidth: theme.fontSizes[100], +}); + +const easeInOutExpo = `cubic-bezier(0.87, 0, 0.13, 1)`; + +const StyledChevron = styled(ChevronDown, { + transition: `transform ${theme.transitions.normal} ${easeInOutExpo}`, + "[data-state=open] &": { transform: "rotate(180deg)" }, + "@reducedMotion": { + transition: "none", + }, +}); + +type AccordionTriggerVariants = WPDS.VariantProps; + +type AccordionTriggerCombined = RadixAccordionTriggerProps & + AccordionTriggerVariants & { + css?: WPDS.CSS; + forcefocus?: boolean; + children: React.ReactNode; + }; + +const StyledHeader = styled(AccordionPrimitive.Header, { + all: "unset", + color: theme.colors.primary, + display: "flex", + width: "100%", + fontSize: theme.fontSizes[100], +}); + +type AccordionHeaderVariants = WPDS.VariantProps; +type HeaderCombinedProps = RadixAccordionHeaderProps & AccordionHeaderVariants; + +export interface AccordionHeaderInterface extends HeaderCombinedProps { + css?: WPDS.CSS; +} + +export const AccordionHeader = React.forwardRef< + HTMLDivElement, + AccordionHeaderInterface +>(({ children, ...props }: AccordionHeaderInterface, ref) => ( + + {children} + +)); + +AccordionHeader.displayName = "AccordionHeader"; + +export const AccordionTrigger = React.forwardRef< + HTMLButtonElement, + AccordionTriggerCombined +>((props: AccordionTriggerCombined, ref) => ( + + + {props.children} + + + + + +)); + +AccordionTrigger.displayName = "AccordionTrigger"; diff --git a/packages/kit/src/accordion/index.ts b/packages/kit/src/accordion/index.ts new file mode 100644 index 000000000..479ad20f4 --- /dev/null +++ b/packages/kit/src/accordion/index.ts @@ -0,0 +1,4 @@ +export * from "./Accordion"; +export * from "./AccordionContent"; +export * from "./AccordionItem"; +export * from "./AccordionTrigger"; diff --git a/ui/accordion/src/play.stories.tsx b/packages/kit/src/accordion/play.stories.tsx similarity index 87% rename from ui/accordion/src/play.stories.tsx rename to packages/kit/src/accordion/play.stories.tsx index 763c97a8c..12bfbbab3 100644 --- a/ui/accordion/src/play.stories.tsx +++ b/packages/kit/src/accordion/play.stories.tsx @@ -1,7 +1,7 @@ // /* eslint-disable @next/next/no-img-element */ import * as React from "react"; import { Accordion, ACCORDION_DENSITY, ACCORDION_TYPE } from "."; -import type { ComponentMeta, ComponentStory } from "@storybook/react"; +import type { Meta, StoryFn } from "@storybook/react"; export default { title: "Accordion", @@ -29,10 +29,10 @@ export default { control: "boolean", }, }, -} as ComponentMeta; +} as Meta; // eslint-disable-next-line @typescript-eslint/no-explicit-any -const Template: ComponentStory = (args) => { +const Template: StoryFn = (args) => { const myTriggerRef = React.useRef(null); const myContentRef = React.useRef(null); @@ -70,12 +70,14 @@ const Template: ComponentStory = (args) => { ); }; -export const Play = Template.bind({}); +export const Play = { + render: Template, -Play.args = { - density: ACCORDION_DENSITY.compact, - type: ACCORDION_TYPE.single, - defaultValue: "item-1", -}; + args: { + density: ACCORDION_DENSITY.compact, + type: ACCORDION_TYPE.single, + defaultValue: "item-1", + }, -Play.storyName = "Accordion"; + name: "Accordion", +}; diff --git a/scripts/transform-wpds-imports.js b/scripts/transform-wpds-imports.js new file mode 100644 index 000000000..6192316c7 --- /dev/null +++ b/scripts/transform-wpds-imports.js @@ -0,0 +1,39 @@ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +module.exports = function (file, { jscodeshift: j }, options) { + const source = j(file.source); + + const wpdsImports = source + .find(j.ImportDeclaration) // Find all nodes that match a type of `ImportDeclaration` + .filter( + (path) => + path.node.source.value.includes("@washingtonpost/wpds") && + path.node.source.value !== "@washingtonpost/wpds-assets" + ); // Filter imports by source equal to the target ie "react" + + wpdsImports.forEach( + ( + wpdsImport // Iterate over react imports + ) => { + console.log(j.importDeclaration); + return ( + // Replace the existing node with a new one + j(wpdsImport).replaceWith( + // Build a new import declaration node based on the existing one + j.importDeclaration( + wpdsImport.node.specifiers, // copy over the existing import specificers + j.stringLiteral( + `../${wpdsImport.node.source.value.substring( + wpdsImport.node.source.value.indexOf("wpds-") + 5 + )}` + ), // Replace the source with our new source + wpdsImport.node.importKind // ensure "type" imports are preserved + ) + ) + ); + } + ); + + return source.toSource(); +}; + +module.exports.parser = "tsx"; From bd9286517965c0ab1357aa7bc2f725c23de11847 Mon Sep 17 00:00:00 2001 From: Andrew Berg Date: Tue, 6 Feb 2024 14:23:18 -0500 Subject: [PATCH 2/7] chore: update react imports in accordion --- package-lock.json | 7 +++++++ packages/kit/package.json | 1 + packages/kit/src/accordion/Accordion.tsx | 4 ++-- packages/kit/src/accordion/AccordionContent.tsx | 4 ++-- packages/kit/src/accordion/AccordionItem.tsx | 4 ++-- packages/kit/src/accordion/AccordionTrigger.tsx | 6 +++--- packages/kit/src/accordion/play.stories.tsx | 6 +++--- 7 files changed, 20 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index 35eb1319c..bd6d43232 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39943,12 +39943,17 @@ "version": "2.0.0", "license": "MIT", "dependencies": { + "@radix-ui/react-accordion": "^1.1.2", "@stitches/react": "^1.2.8", "@washingtonpost/wpds-assets": "^1.18.0" }, "devDependencies": { "tsup": "5.11.13", "typescript": "4.5.5" + }, + "peerDependencies": { + "react": "^16.8.6 || ^17.0.2 || ^18", + "react-dom": "^16.8.6 || ^17.0.2 || ^18" } }, "ui/accordion": { @@ -41386,6 +41391,7 @@ "@washingtonpost/wpds-app-bar": "1.17.0", "@washingtonpost/wpds-avatar": "1.17.0", "@washingtonpost/wpds-box": "1.17.0", + "@washingtonpost/wpds-button": "1.17.0", "@washingtonpost/wpds-card": "1.17.0", "@washingtonpost/wpds-carousel": "1.17.0", "@washingtonpost/wpds-checkbox": "1.17.0", @@ -41426,6 +41432,7 @@ "@washingtonpost/wpds-app-bar": "*", "@washingtonpost/wpds-avatar": "*", "@washingtonpost/wpds-box": "*", + "@washingtonpost/wpds-button": "*", "@washingtonpost/wpds-card": "*", "@washingtonpost/wpds-carousel": "*", "@washingtonpost/wpds-checkbox": "*", diff --git a/packages/kit/package.json b/packages/kit/package.json index d138e0ebc..c03985606 100644 --- a/packages/kit/package.json +++ b/packages/kit/package.json @@ -32,6 +32,7 @@ "url": "https://github.com/washingtonpost/wpds-ui-kit/issues" }, "dependencies": { + "@radix-ui/react-accordion": "^1.1.2", "@stitches/react": "^1.2.8", "@washingtonpost/wpds-assets": "^1.18.0" }, diff --git a/packages/kit/src/accordion/Accordion.tsx b/packages/kit/src/accordion/Accordion.tsx index ffc156424..9ee5021ae 100644 --- a/packages/kit/src/accordion/Accordion.tsx +++ b/packages/kit/src/accordion/Accordion.tsx @@ -1,4 +1,4 @@ -import * as React from "react"; +import { forwardRef } from "react"; import { theme, styled } from "@washingtonpost/wpds-theme"; import type * as WPDS from "@washingtonpost/wpds-theme"; import * as AccordionPrimitive from "@radix-ui/react-accordion"; @@ -44,7 +44,7 @@ export type AccordionRootCombined = ( ) & AccordionRootVariants; -export const AccordionRoot = React.forwardRef< +export const AccordionRoot = forwardRef< HTMLDivElement, AccordionRootCombined >(({ ...props }: AccordionRootCombined, ref) => ( diff --git a/packages/kit/src/accordion/AccordionContent.tsx b/packages/kit/src/accordion/AccordionContent.tsx index 420cddd24..7d08acffc 100644 --- a/packages/kit/src/accordion/AccordionContent.tsx +++ b/packages/kit/src/accordion/AccordionContent.tsx @@ -1,4 +1,4 @@ -import * as React from "react"; +import { forwardRef } from "react"; import { theme, styled, keyframes } from "@washingtonpost/wpds-theme"; import * as AccordionPrimitive from "@radix-ui/react-accordion"; import type * as WPDS from "@washingtonpost/wpds-theme"; @@ -46,7 +46,7 @@ export interface AccordionContentInterface extends CombinedProps { css?: WPDS.CSS; } -export const AccordionContent = React.forwardRef< +export const AccordionContent = forwardRef< HTMLDivElement, AccordionContentInterface >(({ children, ...props }: AccordionContentInterface, ref) => { diff --git a/packages/kit/src/accordion/AccordionItem.tsx b/packages/kit/src/accordion/AccordionItem.tsx index 91bfa50ae..a84446e7a 100644 --- a/packages/kit/src/accordion/AccordionItem.tsx +++ b/packages/kit/src/accordion/AccordionItem.tsx @@ -1,4 +1,4 @@ -import * as React from "react"; +import { forwardRef } from "react"; import { theme, styled } from "@washingtonpost/wpds-theme"; import * as AccordionPrimitive from "@radix-ui/react-accordion"; import type * as WPDS from "@washingtonpost/wpds-theme"; @@ -15,7 +15,7 @@ export interface AccordionItemInterface extends AccordionItemProps { css?: WPDS.CSS; } -export const AccordionItem = React.forwardRef< +export const AccordionItem = forwardRef< HTMLDivElement, AccordionItemInterface >(({ children, ...props }: AccordionItemInterface, ref) => ( diff --git a/packages/kit/src/accordion/AccordionTrigger.tsx b/packages/kit/src/accordion/AccordionTrigger.tsx index a4a631ee2..ca4a65695 100644 --- a/packages/kit/src/accordion/AccordionTrigger.tsx +++ b/packages/kit/src/accordion/AccordionTrigger.tsx @@ -1,4 +1,4 @@ -import * as React from "react"; +import { forwardRef } from "react"; import { ChevronDown } from "@washingtonpost/wpds-assets"; import { theme, styled } from "@washingtonpost/wpds-theme"; import { Icon } from "@washingtonpost/wpds-icon"; @@ -89,7 +89,7 @@ export interface AccordionHeaderInterface extends HeaderCombinedProps { css?: WPDS.CSS; } -export const AccordionHeader = React.forwardRef< +export const AccordionHeader = forwardRef< HTMLDivElement, AccordionHeaderInterface >(({ children, ...props }: AccordionHeaderInterface, ref) => ( @@ -100,7 +100,7 @@ export const AccordionHeader = React.forwardRef< AccordionHeader.displayName = "AccordionHeader"; -export const AccordionTrigger = React.forwardRef< +export const AccordionTrigger = forwardRef< HTMLButtonElement, AccordionTriggerCombined >((props: AccordionTriggerCombined, ref) => ( diff --git a/packages/kit/src/accordion/play.stories.tsx b/packages/kit/src/accordion/play.stories.tsx index 12bfbbab3..d99541c23 100644 --- a/packages/kit/src/accordion/play.stories.tsx +++ b/packages/kit/src/accordion/play.stories.tsx @@ -1,5 +1,5 @@ // /* eslint-disable @next/next/no-img-element */ -import * as React from "react"; +import { useRef } from "react"; import { Accordion, ACCORDION_DENSITY, ACCORDION_TYPE } from "."; import type { Meta, StoryFn } from "@storybook/react"; @@ -33,8 +33,8 @@ export default { // eslint-disable-next-line @typescript-eslint/no-explicit-any const Template: StoryFn = (args) => { - const myTriggerRef = React.useRef(null); - const myContentRef = React.useRef(null); + const myTriggerRef = useRef(null); + const myContentRef = useRef(null); return ( From 8058ec4edec6f2bee86e078891ab761f21a81b4a Mon Sep 17 00:00:00 2001 From: Andrew Berg Date: Wed, 7 Feb 2024 10:30:59 -0500 Subject: [PATCH 3/7] chore: finalize Accordion in new package --- packages/kit/src/accordion/Accordion.tsx | 4 +-- .../kit/src/accordion/AccordionContent.tsx | 4 +-- packages/kit/src/accordion/AccordionItem.tsx | 4 +-- .../kit/src/accordion/AccordionTrigger.tsx | 6 ++--- packages/kit/src/accordion/play.stories.tsx | 25 +++++++++++++------ packages/kit/src/index.ts | 1 + 6 files changed, 28 insertions(+), 16 deletions(-) diff --git a/packages/kit/src/accordion/Accordion.tsx b/packages/kit/src/accordion/Accordion.tsx index 9ee5021ae..d93739a06 100644 --- a/packages/kit/src/accordion/Accordion.tsx +++ b/packages/kit/src/accordion/Accordion.tsx @@ -1,6 +1,6 @@ import { forwardRef } from "react"; -import { theme, styled } from "@washingtonpost/wpds-theme"; -import type * as WPDS from "@washingtonpost/wpds-theme"; +import { theme, styled } from "../theme"; +import type * as WPDS from "../theme"; import * as AccordionPrimitive from "@radix-ui/react-accordion"; import { AccordionTrigger, AccordionHeader } from "./AccordionTrigger"; import { AccordionItem } from "./AccordionItem"; diff --git a/packages/kit/src/accordion/AccordionContent.tsx b/packages/kit/src/accordion/AccordionContent.tsx index 7d08acffc..469c78200 100644 --- a/packages/kit/src/accordion/AccordionContent.tsx +++ b/packages/kit/src/accordion/AccordionContent.tsx @@ -1,7 +1,7 @@ import { forwardRef } from "react"; -import { theme, styled, keyframes } from "@washingtonpost/wpds-theme"; +import { theme, styled, keyframes } from "../theme"; import * as AccordionPrimitive from "@radix-ui/react-accordion"; -import type * as WPDS from "@washingtonpost/wpds-theme"; +import type * as WPDS from "../theme"; import { AccordionContentProps as RadixAccordionContentProps } from "@radix-ui/react-accordion"; const slideDown = keyframes({ diff --git a/packages/kit/src/accordion/AccordionItem.tsx b/packages/kit/src/accordion/AccordionItem.tsx index a84446e7a..df3a92d55 100644 --- a/packages/kit/src/accordion/AccordionItem.tsx +++ b/packages/kit/src/accordion/AccordionItem.tsx @@ -1,7 +1,7 @@ import { forwardRef } from "react"; -import { theme, styled } from "@washingtonpost/wpds-theme"; +import { theme, styled } from "../theme"; import * as AccordionPrimitive from "@radix-ui/react-accordion"; -import type * as WPDS from "@washingtonpost/wpds-theme"; +import type * as WPDS from "../theme"; import { AccordionItemProps as RadixAccordionItemProps } from "@radix-ui/react-accordion"; const StyledAccordionItem = styled(AccordionPrimitive.Item, { diff --git a/packages/kit/src/accordion/AccordionTrigger.tsx b/packages/kit/src/accordion/AccordionTrigger.tsx index ca4a65695..da5ea59b5 100644 --- a/packages/kit/src/accordion/AccordionTrigger.tsx +++ b/packages/kit/src/accordion/AccordionTrigger.tsx @@ -1,9 +1,9 @@ import { forwardRef } from "react"; import { ChevronDown } from "@washingtonpost/wpds-assets"; -import { theme, styled } from "@washingtonpost/wpds-theme"; -import { Icon } from "@washingtonpost/wpds-icon"; +import { theme, styled } from "../theme"; +import { Icon } from "../icon"; import * as AccordionPrimitive from "@radix-ui/react-accordion"; -import type * as WPDS from "@washingtonpost/wpds-theme"; +import type * as WPDS from "../theme"; import { AccordionTriggerProps as RadixAccordionTriggerProps, AccordionHeaderProps as RadixAccordionHeaderProps, diff --git a/packages/kit/src/accordion/play.stories.tsx b/packages/kit/src/accordion/play.stories.tsx index d99541c23..3b8b17a19 100644 --- a/packages/kit/src/accordion/play.stories.tsx +++ b/packages/kit/src/accordion/play.stories.tsx @@ -1,16 +1,13 @@ // /* eslint-disable @next/next/no-img-element */ import { useRef } from "react"; import { Accordion, ACCORDION_DENSITY, ACCORDION_TYPE } from "."; +import { userEvent, waitFor, within } from "@storybook/testing-library"; +import { expect } from "@storybook/jest"; import type { Meta, StoryFn } from "@storybook/react"; export default { title: "Accordion", component: Accordion.Root, - subcomponents: { - Item: Accordion.Item, - Trigger: Accordion.Trigger, - Content: Accordion.Content, - }, argTypes: { density: { options: [ @@ -44,7 +41,7 @@ const Template: StoryFn = (args) => { augue in felis pharetra finibus. In sagittis aliquam augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. - +
No! You don't even believe that! Gus has cameras everywhere, please. Listen to yourself! No, he has known everything, all along. @@ -59,7 +56,7 @@ const Template: StoryFn = (args) => { How long will I have to social distance? - + An avatar is an atomic component that represents an individual’s identity through a circular photo. { + const canvas = within(canvasElement); + await userEvent.click(canvas.getAllByRole("button")[0]); + await expect(canvas.getByTestId("content-0")).toBeVisible(); + await userEvent.click(canvas.getAllByRole("button")[1]); + await expect(canvas.getByTestId("content-1")).toBeVisible(); + await waitFor(() => + expect(canvas.getByTestId("content-0")).not.toBeVisible() + ); + }, +}; diff --git a/packages/kit/src/index.ts b/packages/kit/src/index.ts index 8339a0eb9..7dffb896a 100644 --- a/packages/kit/src/index.ts +++ b/packages/kit/src/index.ts @@ -1,3 +1,4 @@ +export * from "./accordion"; export * from "./button"; export * from "./icon"; export * from "./theme"; From f41f48be0a018651ffeaa6fb05497dff12bf291f Mon Sep 17 00:00:00 2001 From: Andrew Berg Date: Wed, 7 Feb 2024 10:46:18 -0500 Subject: [PATCH 4/7] chore: prettier formatting --- packages/kit/src/accordion/Accordion.tsx | 11 +- packages/kit/src/accordion/AccordionItem.tsx | 15 +- packages/kit/src/theme/tokens.ts | 424 ++++++++++++++++++- 3 files changed, 420 insertions(+), 30 deletions(-) diff --git a/packages/kit/src/accordion/Accordion.tsx b/packages/kit/src/accordion/Accordion.tsx index d93739a06..355a968d9 100644 --- a/packages/kit/src/accordion/Accordion.tsx +++ b/packages/kit/src/accordion/Accordion.tsx @@ -44,12 +44,11 @@ export type AccordionRootCombined = ( ) & AccordionRootVariants; -export const AccordionRoot = forwardRef< - HTMLDivElement, - AccordionRootCombined ->(({ ...props }: AccordionRootCombined, ref) => ( - -)); +export const AccordionRoot = forwardRef( + ({ ...props }: AccordionRootCombined, ref) => ( + + ) +); AccordionRoot.displayName = "AccordionRoot"; diff --git a/packages/kit/src/accordion/AccordionItem.tsx b/packages/kit/src/accordion/AccordionItem.tsx index df3a92d55..f0d6041b3 100644 --- a/packages/kit/src/accordion/AccordionItem.tsx +++ b/packages/kit/src/accordion/AccordionItem.tsx @@ -15,13 +15,12 @@ export interface AccordionItemInterface extends AccordionItemProps { css?: WPDS.CSS; } -export const AccordionItem = forwardRef< - HTMLDivElement, - AccordionItemInterface ->(({ children, ...props }: AccordionItemInterface, ref) => ( - - {children} - -)); +export const AccordionItem = forwardRef( + ({ children, ...props }: AccordionItemInterface, ref) => ( + + {children} + + ) +); AccordionItem.displayName = "AccordionItem"; diff --git a/packages/kit/src/theme/tokens.ts b/packages/kit/src/theme/tokens.ts index 7356cf57d..537cc87c2 100644 --- a/packages/kit/src/theme/tokens.ts +++ b/packages/kit/src/theme/tokens.ts @@ -1,16 +1,408 @@ - - export const base="16px" - export const light={"alpha25":"rgba(0,0,0,.05)","alpha50":"rgba(102,102,102,.5)","gray0":"rgba(0,0,0,1)","gray20":"rgba(17,17,17,1)","gray40":"rgba(42,42,42,1)","gray60":"rgba(73,73,73,1)","gray80":"rgba(102,102,102,1)","gray100":"rgba(115,115,115,1)","gray200":"rgba(170,170,170,1)","gray300":"rgba(212,212,212,1)","gray400":"rgba(233,233,233,1)","gray500":"rgba(240,240,240,1)","gray600":"rgba(247,247,247,1)","gray700":"rgba(255,255,255,1)","blue40":"rgba(10,50,88,1)","blue60":"rgba(15,75,132,1)","blue80":"rgba(19,102,179,1)","blue100":"rgba(22,109,252,1)","blue200":"rgba(87,132,197,1)","blue300":"rgba(132,164,214,1)","blue400":"rgba(172,197,231,1)","blue500":"rgba(211,231,250,1)","blue600":"rgba(231,240,254,1)","red40":"rgba(99,16,14,1)","red60":"rgba(142,31,27,1)","red80":"rgba(190,44,37,1)","red100":"rgba(234,0,23,1)","red200":"rgba(211,95,79,1)","red300":"rgba(229,138,124,1)","red400":"rgba(242,180,171,1)","red500":"rgba(249,221,219,1)","red600":"rgba(253,231,231,1)","pink40":"rgba(105,11,44,1)","pink60":"rgba(149,25,64,1)","pink80":"rgba(195,39,85,1)","pink100":"rgba(255,79,131,1)","pink200":"rgba(213,94,119,1)","pink300":"rgba(228,138,155,1)","pink400":"rgba(239,180,191,1)","pink500":"rgba(249,222,231,1)","pink600":"rgba(254,234,240,1)","purple40":"rgba(93,18,84,1)","purple60":"rgba(136,27,121,1)","purple80":"rgba(182,35,161,1)","purple100":"rgba(209,56,191,1)","purple200":"rgba(201,92,182,1)","purple300":"rgba(217,137,201,1)","purple400":"rgba(234,179,223,1)","purple500":"rgba(248,221,244,1)","purple600":"rgba(250,238,249,1)","teal40":"rgba(11,57,64,1)","teal60":"rgba(15,84,95,1)","teal80":"rgba(15,113,128,1)","teal100":"rgba(3,175,202,1)","teal200":"rgba(74,142,155,1)","teal300":"rgba(118,172,182,1)","teal400":"rgba(159,203,211,1)","teal500":"rgba(199,234,239,1)","teal600":"rgba(234,251,254,1)","orange40":"rgba(118,53,1,1)","orange60":"rgba(166,74,0,1)","orange80":"rgba(216,97,0,1)","orange100":"rgba(243,117,14,1)","orange200":"rgba(230,130,61,1)","orange300":"rgba(241,162,106,1)","orange400":"rgba(249,194,150,1)","orange500":"rgba(251,225,195,1)","orange600":"rgba(255,239,224,1)","green40":"rgba(40,81,21,1)","green60":"rgba(56,113,30,1)","green80":"rgba(73,147,39,1)","green100":"rgba(54,167,92,1)","green200":"rgba(110,169,81,1)","green300":"rgba(145,192,120,1)","green400":"rgba(178,214,160,1)","green500":"rgba(213,237,202,1)","green600":"rgba(238,249,234,1)","gold40":"rgba(109,69,8,1)","gold60":"rgba(158,97,5,1)","gold80":"rgba(194,136,47,1)","gold100":"rgba(229,160,55,1)","gold200":"rgba(211,158,76,1)","gold300":"rgba(222,181,126,1)","gold400":"rgba(233,203,164,1)","gold500":"rgba(243,228,205,1)","gold600":"rgba(250,240,226,1)","yellow100":"rgba(255,236,68,1)","yellow600":"rgba(253,249,216,1)","mustard40":"rgba(100,72,1,1)","mustard60":"rgba(145,104,1,1)","mustard80":"rgba(193,139,0,1)","mustard100":"rgba(226,163,31,1)","mustard200":"rgba(217,158,32,1)","mustard300":"rgba(235,179,71,1)","mustard400":"rgba(247,202,111,1)","mustard500":"rgba(254,227,156,1)","mustard600":"rgba(251,241,221,1)"} - export const dark={"alpha25":"rgba(42,42,42,.5)","alpha50":"rgba(255,255,255,.25)","gray0":"rgba(255,255,255,1)","gray20":"rgba(242,242,242,1)","gray40":"rgba(214,214,214,1)","gray60":"rgba(169,169,169,1)","gray80":"rgba(133,133,133,1)","gray100":"rgba(119,119,119,1)","gray200":"rgba(73,73,73,1)","gray300":"rgba(43,43,43,1)","gray400":"rgba(26,26,26,1)","gray500":"rgba(20,20,20,1)","gray600":"rgba(12,12,12,1)","gray700":"rgba(2,2,2,1)","blue40":"rgba(196,205,214,1)","blue60":"rgba(144,172,198,1)","blue80":"rgba(77,140,198,1)","blue100":"rgba(22,108,249,1)","blue200":"rgba(70,106,158,1)","blue300":"rgba(64,79,104,1)","blue400":"rgba(49,56,66,1)","blue500":"rgba(28,31,34,1)","blue600":"rgba(20,20,22,1)","red40":"rgba(219,199,199,1)","red60":"rgba(205,157,155,1)","red80":"rgba(209,104,99,1)","red100":"rgba(235,18,40,1)","red200":"rgba(170,76,63,1)","red300":"rgba(111,67,60,1)","red400":"rgba(69,51,49,1)","red500":"rgba(33,30,29,1)","red600":"rgba(24,22,22,1)","pink40":"rgba(217,193,202,1)","pink60":"rgba(206,148,167,1)","pink80":"rgba(210,93,128,1)","pink100":"rgba(163,50,84,1)","pink200":"rgba(164,73,92,1)","pink300":"rgba(108,65,74,1)","pink400":"rgba(67,50,53,1)","pink500":"rgba(33,30,31,1)","pink600":"rgba(21,20,20,1)","purple40":"rgba(213,194,211,1)","purple60":"rgba(199,148,192,1)","purple80":"rgba(200,90,185,1)","purple100":"rgba(188,50,172,1)","purple200":"rgba(156,71,141,1)","purple300":"rgba(104,65,96,1)","purple400":"rgba(66,50,63,1)","purple500":"rgba(33,29,32,1)","purple600":"rgba(19,18,19,1)","teal40":"rgba(190,202,204,1)","teal60":"rgba(137,171,177,1)","teal80":"rgba(67,143,155,1)","teal100":"rgba(2,89,103,1)","teal200":"rgba(58,111,122,1)","teal300":"rgba(56,82,87,1)","teal400":"rgba(45,57,59,1)","teal500":"rgba(27,32,32,1)","teal600":"rgba(11,12,12,1)","orange40":"rgba(195,166,143,1)","orange60":"rgba(188,118,63,1)","orange80":"rgba(170,76,0,1)","orange100":"rgba(137,66,8,1)","orange200":"rgba(124,70,33,1)","orange300":"rgba(89,59,39,1)","orange400":"rgba(59,46,35,1)","orange500":"rgba(32,29,25,1)","orange600":"rgba(19,18,17,1)","green40":"rgba(159,177,151,1)","green60":"rgba(104,147,85,1)","green80":"rgba(59,119,31,1)","green100":"rgba(33,103,57,1)","green200":"rgba(61,93,45,1)","green300":"rgba(54,71,45,1)","green400":"rgba(43,52,39,1)","green500":"rgba(27,30,25,1)","green600":"rgba(12,12,12,1)","gold40":"rgba(181,161,130,1)","gold60":"rgba(168,113,31,1)","gold80":"rgba(119,84,29,1)","gold100":"rgba(93,65,22,1)","gold200":"rgba(95,71,34,1)","gold300":"rgba(72,58,41,1)","gold400":"rgba(51,45,36,1)","gold500":"rgba(32,30,27,1)","gold600":"rgba(21,20,19,1)","yellow100":"rgba(29,27,8,1)","yellow600":"rgba(8,8,7,1)","mustard40":"rgba(178,164,128,1)","mustard60":"rgba(156,118,24,1)","mustard80":"rgba(117,84,0,1)","mustard100":"rgba(91,65,12,1)","mustard200":"rgba(96,70,14,1)","mustard300":"rgba(75,57,23,1)","mustard400":"rgba(54,44,24,1)","mustard500":"rgba(34,30,21,1)","mustard600":"rgba(19,18,17,1)"} - export const staticColors={"alpha25-static":"rgba(0,0,0,.05)","alpha50-static":"rgba(102,102,102,.5)","gray0-static":"rgba(0,0,0,1)","gray20-static":"rgba(17,17,17,1)","gray40-static":"rgba(42,42,42,1)","gray60-static":"rgba(73,73,73,1)","gray80-static":"rgba(102,102,102,1)","gray100-static":"rgba(115,115,115,1)","gray200-static":"rgba(170,170,170,1)","gray300-static":"rgba(212,212,212,1)","gray400-static":"rgba(233,233,233,1)","gray500-static":"rgba(240,240,240,1)","gray600-static":"rgba(247,247,247,1)","gray700-static":"rgba(255,255,255,1)","blue40-static":"rgba(10,50,88,1)","blue60-static":"rgba(15,75,132,1)","blue80-static":"rgba(19,102,179,1)","blue100-static":"rgba(22,109,252,1)","blue200-static":"rgba(87,132,197,1)","blue300-static":"rgba(132,164,214,1)","blue400-static":"rgba(172,197,231,1)","blue500-static":"rgba(211,231,250,1)","blue600-static":"rgba(231,240,254,1)","red40-static":"rgba(99,16,14,1)","red60-static":"rgba(142,31,27,1)","red80-static":"rgba(190,44,37,1)","red100-static":"rgba(234,0,23,1)","red200-static":"rgba(211,95,79,1)","red300-static":"rgba(229,138,124,1)","red400-static":"rgba(242,180,171,1)","red500-static":"rgba(249,221,219,1)","red600-static":"rgba(253,231,231,1)","pink40-static":"rgba(105,11,44,1)","pink60-static":"rgba(149,25,64,1)","pink80-static":"rgba(195,39,85,1)","pink100-static":"rgba(255,79,131,1)","pink200-static":"rgba(213,94,119,1)","pink300-static":"rgba(228,138,155,1)","pink400-static":"rgba(239,180,191,1)","pink500-static":"rgba(249,222,231,1)","pink600-static":"rgba(254,234,240,1)","purple40-static":"rgba(93,18,84,1)","purple60-static":"rgba(136,27,121,1)","purple80-static":"rgba(182,35,161,1)","purple100-static":"rgba(209,56,191,1)","purple200-static":"rgba(201,92,182,1)","purple300-static":"rgba(217,137,201,1)","purple400-static":"rgba(234,179,223,1)","purple500-static":"rgba(248,221,244,1)","purple600-static":"rgba(250,238,249,1)","teal40-static":"rgba(11,57,64,1)","teal60-static":"rgba(15,84,95,1)","teal80-static":"rgba(15,113,128,1)","teal100-static":"rgba(3,175,202,1)","teal200-static":"rgba(74,142,155,1)","teal300-static":"rgba(118,172,182,1)","teal400-static":"rgba(159,203,211,1)","teal500-static":"rgba(199,234,239,1)","teal600-static":"rgba(234,251,254,1)","orange40-static":"rgba(118,53,1,1)","orange60-static":"rgba(166,74,0,1)","orange80-static":"rgba(216,97,0,1)","orange100-static":"rgba(243,117,14,1)","orange200-static":"rgba(230,130,61,1)","orange300-static":"rgba(241,162,106,1)","orange400-static":"rgba(249,194,150,1)","orange500-static":"rgba(251,225,195,1)","orange600-static":"rgba(255,239,224,1)","green40-static":"rgba(40,81,21,1)","green60-static":"rgba(56,113,30,1)","green80-static":"rgba(73,147,39,1)","green100-static":"rgba(54,167,92,1)","green200-static":"rgba(110,169,81,1)","green300-static":"rgba(145,192,120,1)","green400-static":"rgba(178,214,160,1)","green500-static":"rgba(213,237,202,1)","green600-static":"rgba(238,249,234,1)","gold40-static":"rgba(109,69,8,1)","gold60-static":"rgba(158,97,5,1)","gold80-static":"rgba(194,136,47,1)","gold100-static":"rgba(229,160,55,1)","gold200-static":"rgba(211,158,76,1)","gold300-static":"rgba(222,181,126,1)","gold400-static":"rgba(233,203,164,1)","gold500-static":"rgba(243,228,205,1)","gold600-static":"rgba(250,240,226,1)","yellow100-static":"rgba(255,236,68,1)","yellow600-static":"rgba(253,249,216,1)","mustard40-static":"rgba(100,72,1,1)","mustard60-static":"rgba(145,104,1,1)","mustard80-static":"rgba(193,139,0,1)","mustard100-static":"rgba(226,163,31,1)","mustard200-static":"rgba(217,158,32,1)","mustard300-static":"rgba(235,179,71,1)","mustard400-static":"rgba(247,202,111,1)","mustard500-static":"rgba(254,227,156,1)","mustard600-static":"rgba(251,241,221,1)"} - export const defaultTheme={"primary":"$gray20","secondary":"$gray700","cta":"$blue100","disabled":"$alpha25","accessible":"$gray80","subtle":"$gray300","faint":"$gray400","error":"$red100","success":"$green100","warning":"$orange100","signal":"$blue200","onPrimary":"$gray700","onSecondary":"$gray20","onCta":"$gray700-static","onDisabled":"$alpha50","onMessage":"$gray700-static"} - export const sizes={"100":"1rem","125":"1.25rem","150":"1.5rem","175":"1.75rem","200":"2rem","225":"2.25rem","250":"2.5rem","275":"2.75rem","300":"3rem","350":"3.5rem","400":"4rem","450":"4.5rem","500":"5rem","025":"0.25rem","050":"0.5rem","075":"0.75rem","087":"0.875rem"} - export const spaces={"100":"1rem","125":"1.25rem","150":"1.5rem","175":"1.75rem","200":"2rem","225":"2.25rem","250":"2.5rem","275":"2.75rem","300":"3rem","350":"3.5rem","400":"4rem","450":"4.5rem","500":"5rem","025":"0.25rem","050":"0.5rem","075":"0.75rem"} - export const radii={"100":"1rem","125":"1.25rem","150":"1.5rem","012":"0.125rem","025":"0.25rem","050":"0.5rem","075":"0.75rem","round":"9999px"} - export const fonts={"headline":"Postoni, garamond, serif","subhead":"Franklin, arial, sans-serif","body":"georgia, Times New Roman, serif","meta":"Franklin, arial, sans-serif","magazine":"PostoniDisplayMag, garamond, serif"} - export const fontSizes={"100":"1rem","112":"1.125rem","125":"1.25rem","150":"1.5rem","175":"1.75rem","200":"2rem","225":"2.25rem","250":"2.5rem","275":"2.75rem","300":"3rem","350":"3.5rem","400":"4rem","450":"4.5rem","500":"5rem","075":"0.75rem","087":"0.875rem"} - export const fontWeights={"light":300,"regular":400,"bold":700,"ultra":800} - export const lineHeights={"100":1,"110":1.1,"125":1.25,"150":1.5,"160":1.6,"175":1.75,"200":2,"240":2.4} - export const shadows={"50":"0px 2px 0px 0px #D5D5D5","100":"0px 1px 2px 0px rgba(102, 102, 102, 0.25)","200":"0px 2px 4px 0px rgba(102, 102, 102, 0.25)","300":"0px 4px 8px 0px rgba(102, 102, 102, 0.25)","400":"0px 8px 16px 0px rgba(102, 102, 102, 0.25)","500":"0px 16px 32px 0px rgba(102, 102, 102, 0.25)"} - export const zIndices={"offer":400,"shell":300,"ads":200,"page":100} - \ No newline at end of file +export const base = "16px"; +export const light = { + alpha25: "rgba(0,0,0,.05)", + alpha50: "rgba(102,102,102,.5)", + gray0: "rgba(0,0,0,1)", + gray20: "rgba(17,17,17,1)", + gray40: "rgba(42,42,42,1)", + gray60: "rgba(73,73,73,1)", + gray80: "rgba(102,102,102,1)", + gray100: "rgba(115,115,115,1)", + gray200: "rgba(170,170,170,1)", + gray300: "rgba(212,212,212,1)", + gray400: "rgba(233,233,233,1)", + gray500: "rgba(240,240,240,1)", + gray600: "rgba(247,247,247,1)", + gray700: "rgba(255,255,255,1)", + blue40: "rgba(10,50,88,1)", + blue60: "rgba(15,75,132,1)", + blue80: "rgba(19,102,179,1)", + blue100: "rgba(22,109,252,1)", + blue200: "rgba(87,132,197,1)", + blue300: "rgba(132,164,214,1)", + blue400: "rgba(172,197,231,1)", + blue500: "rgba(211,231,250,1)", + blue600: "rgba(231,240,254,1)", + red40: "rgba(99,16,14,1)", + red60: "rgba(142,31,27,1)", + red80: "rgba(190,44,37,1)", + red100: "rgba(234,0,23,1)", + red200: "rgba(211,95,79,1)", + red300: "rgba(229,138,124,1)", + red400: "rgba(242,180,171,1)", + red500: "rgba(249,221,219,1)", + red600: "rgba(253,231,231,1)", + pink40: "rgba(105,11,44,1)", + pink60: "rgba(149,25,64,1)", + pink80: "rgba(195,39,85,1)", + pink100: "rgba(255,79,131,1)", + pink200: "rgba(213,94,119,1)", + pink300: "rgba(228,138,155,1)", + pink400: "rgba(239,180,191,1)", + pink500: "rgba(249,222,231,1)", + pink600: "rgba(254,234,240,1)", + purple40: "rgba(93,18,84,1)", + purple60: "rgba(136,27,121,1)", + purple80: "rgba(182,35,161,1)", + purple100: "rgba(209,56,191,1)", + purple200: "rgba(201,92,182,1)", + purple300: "rgba(217,137,201,1)", + purple400: "rgba(234,179,223,1)", + purple500: "rgba(248,221,244,1)", + purple600: "rgba(250,238,249,1)", + teal40: "rgba(11,57,64,1)", + teal60: "rgba(15,84,95,1)", + teal80: "rgba(15,113,128,1)", + teal100: "rgba(3,175,202,1)", + teal200: "rgba(74,142,155,1)", + teal300: "rgba(118,172,182,1)", + teal400: "rgba(159,203,211,1)", + teal500: "rgba(199,234,239,1)", + teal600: "rgba(234,251,254,1)", + orange40: "rgba(118,53,1,1)", + orange60: "rgba(166,74,0,1)", + orange80: "rgba(216,97,0,1)", + orange100: "rgba(243,117,14,1)", + orange200: "rgba(230,130,61,1)", + orange300: "rgba(241,162,106,1)", + orange400: "rgba(249,194,150,1)", + orange500: "rgba(251,225,195,1)", + orange600: "rgba(255,239,224,1)", + green40: "rgba(40,81,21,1)", + green60: "rgba(56,113,30,1)", + green80: "rgba(73,147,39,1)", + green100: "rgba(54,167,92,1)", + green200: "rgba(110,169,81,1)", + green300: "rgba(145,192,120,1)", + green400: "rgba(178,214,160,1)", + green500: "rgba(213,237,202,1)", + green600: "rgba(238,249,234,1)", + gold40: "rgba(109,69,8,1)", + gold60: "rgba(158,97,5,1)", + gold80: "rgba(194,136,47,1)", + gold100: "rgba(229,160,55,1)", + gold200: "rgba(211,158,76,1)", + gold300: "rgba(222,181,126,1)", + gold400: "rgba(233,203,164,1)", + gold500: "rgba(243,228,205,1)", + gold600: "rgba(250,240,226,1)", + yellow100: "rgba(255,236,68,1)", + yellow600: "rgba(253,249,216,1)", + mustard40: "rgba(100,72,1,1)", + mustard60: "rgba(145,104,1,1)", + mustard80: "rgba(193,139,0,1)", + mustard100: "rgba(226,163,31,1)", + mustard200: "rgba(217,158,32,1)", + mustard300: "rgba(235,179,71,1)", + mustard400: "rgba(247,202,111,1)", + mustard500: "rgba(254,227,156,1)", + mustard600: "rgba(251,241,221,1)", +}; +export const dark = { + alpha25: "rgba(42,42,42,.5)", + alpha50: "rgba(255,255,255,.25)", + gray0: "rgba(255,255,255,1)", + gray20: "rgba(242,242,242,1)", + gray40: "rgba(214,214,214,1)", + gray60: "rgba(169,169,169,1)", + gray80: "rgba(133,133,133,1)", + gray100: "rgba(119,119,119,1)", + gray200: "rgba(73,73,73,1)", + gray300: "rgba(43,43,43,1)", + gray400: "rgba(26,26,26,1)", + gray500: "rgba(20,20,20,1)", + gray600: "rgba(12,12,12,1)", + gray700: "rgba(2,2,2,1)", + blue40: "rgba(196,205,214,1)", + blue60: "rgba(144,172,198,1)", + blue80: "rgba(77,140,198,1)", + blue100: "rgba(22,108,249,1)", + blue200: "rgba(70,106,158,1)", + blue300: "rgba(64,79,104,1)", + blue400: "rgba(49,56,66,1)", + blue500: "rgba(28,31,34,1)", + blue600: "rgba(20,20,22,1)", + red40: "rgba(219,199,199,1)", + red60: "rgba(205,157,155,1)", + red80: "rgba(209,104,99,1)", + red100: "rgba(235,18,40,1)", + red200: "rgba(170,76,63,1)", + red300: "rgba(111,67,60,1)", + red400: "rgba(69,51,49,1)", + red500: "rgba(33,30,29,1)", + red600: "rgba(24,22,22,1)", + pink40: "rgba(217,193,202,1)", + pink60: "rgba(206,148,167,1)", + pink80: "rgba(210,93,128,1)", + pink100: "rgba(163,50,84,1)", + pink200: "rgba(164,73,92,1)", + pink300: "rgba(108,65,74,1)", + pink400: "rgba(67,50,53,1)", + pink500: "rgba(33,30,31,1)", + pink600: "rgba(21,20,20,1)", + purple40: "rgba(213,194,211,1)", + purple60: "rgba(199,148,192,1)", + purple80: "rgba(200,90,185,1)", + purple100: "rgba(188,50,172,1)", + purple200: "rgba(156,71,141,1)", + purple300: "rgba(104,65,96,1)", + purple400: "rgba(66,50,63,1)", + purple500: "rgba(33,29,32,1)", + purple600: "rgba(19,18,19,1)", + teal40: "rgba(190,202,204,1)", + teal60: "rgba(137,171,177,1)", + teal80: "rgba(67,143,155,1)", + teal100: "rgba(2,89,103,1)", + teal200: "rgba(58,111,122,1)", + teal300: "rgba(56,82,87,1)", + teal400: "rgba(45,57,59,1)", + teal500: "rgba(27,32,32,1)", + teal600: "rgba(11,12,12,1)", + orange40: "rgba(195,166,143,1)", + orange60: "rgba(188,118,63,1)", + orange80: "rgba(170,76,0,1)", + orange100: "rgba(137,66,8,1)", + orange200: "rgba(124,70,33,1)", + orange300: "rgba(89,59,39,1)", + orange400: "rgba(59,46,35,1)", + orange500: "rgba(32,29,25,1)", + orange600: "rgba(19,18,17,1)", + green40: "rgba(159,177,151,1)", + green60: "rgba(104,147,85,1)", + green80: "rgba(59,119,31,1)", + green100: "rgba(33,103,57,1)", + green200: "rgba(61,93,45,1)", + green300: "rgba(54,71,45,1)", + green400: "rgba(43,52,39,1)", + green500: "rgba(27,30,25,1)", + green600: "rgba(12,12,12,1)", + gold40: "rgba(181,161,130,1)", + gold60: "rgba(168,113,31,1)", + gold80: "rgba(119,84,29,1)", + gold100: "rgba(93,65,22,1)", + gold200: "rgba(95,71,34,1)", + gold300: "rgba(72,58,41,1)", + gold400: "rgba(51,45,36,1)", + gold500: "rgba(32,30,27,1)", + gold600: "rgba(21,20,19,1)", + yellow100: "rgba(29,27,8,1)", + yellow600: "rgba(8,8,7,1)", + mustard40: "rgba(178,164,128,1)", + mustard60: "rgba(156,118,24,1)", + mustard80: "rgba(117,84,0,1)", + mustard100: "rgba(91,65,12,1)", + mustard200: "rgba(96,70,14,1)", + mustard300: "rgba(75,57,23,1)", + mustard400: "rgba(54,44,24,1)", + mustard500: "rgba(34,30,21,1)", + mustard600: "rgba(19,18,17,1)", +}; +export const staticColors = { + "alpha25-static": "rgba(0,0,0,.05)", + "alpha50-static": "rgba(102,102,102,.5)", + "gray0-static": "rgba(0,0,0,1)", + "gray20-static": "rgba(17,17,17,1)", + "gray40-static": "rgba(42,42,42,1)", + "gray60-static": "rgba(73,73,73,1)", + "gray80-static": "rgba(102,102,102,1)", + "gray100-static": "rgba(115,115,115,1)", + "gray200-static": "rgba(170,170,170,1)", + "gray300-static": "rgba(212,212,212,1)", + "gray400-static": "rgba(233,233,233,1)", + "gray500-static": "rgba(240,240,240,1)", + "gray600-static": "rgba(247,247,247,1)", + "gray700-static": "rgba(255,255,255,1)", + "blue40-static": "rgba(10,50,88,1)", + "blue60-static": "rgba(15,75,132,1)", + "blue80-static": "rgba(19,102,179,1)", + "blue100-static": "rgba(22,109,252,1)", + "blue200-static": "rgba(87,132,197,1)", + "blue300-static": "rgba(132,164,214,1)", + "blue400-static": "rgba(172,197,231,1)", + "blue500-static": "rgba(211,231,250,1)", + "blue600-static": "rgba(231,240,254,1)", + "red40-static": "rgba(99,16,14,1)", + "red60-static": "rgba(142,31,27,1)", + "red80-static": "rgba(190,44,37,1)", + "red100-static": "rgba(234,0,23,1)", + "red200-static": "rgba(211,95,79,1)", + "red300-static": "rgba(229,138,124,1)", + "red400-static": "rgba(242,180,171,1)", + "red500-static": "rgba(249,221,219,1)", + "red600-static": "rgba(253,231,231,1)", + "pink40-static": "rgba(105,11,44,1)", + "pink60-static": "rgba(149,25,64,1)", + "pink80-static": "rgba(195,39,85,1)", + "pink100-static": "rgba(255,79,131,1)", + "pink200-static": "rgba(213,94,119,1)", + "pink300-static": "rgba(228,138,155,1)", + "pink400-static": "rgba(239,180,191,1)", + "pink500-static": "rgba(249,222,231,1)", + "pink600-static": "rgba(254,234,240,1)", + "purple40-static": "rgba(93,18,84,1)", + "purple60-static": "rgba(136,27,121,1)", + "purple80-static": "rgba(182,35,161,1)", + "purple100-static": "rgba(209,56,191,1)", + "purple200-static": "rgba(201,92,182,1)", + "purple300-static": "rgba(217,137,201,1)", + "purple400-static": "rgba(234,179,223,1)", + "purple500-static": "rgba(248,221,244,1)", + "purple600-static": "rgba(250,238,249,1)", + "teal40-static": "rgba(11,57,64,1)", + "teal60-static": "rgba(15,84,95,1)", + "teal80-static": "rgba(15,113,128,1)", + "teal100-static": "rgba(3,175,202,1)", + "teal200-static": "rgba(74,142,155,1)", + "teal300-static": "rgba(118,172,182,1)", + "teal400-static": "rgba(159,203,211,1)", + "teal500-static": "rgba(199,234,239,1)", + "teal600-static": "rgba(234,251,254,1)", + "orange40-static": "rgba(118,53,1,1)", + "orange60-static": "rgba(166,74,0,1)", + "orange80-static": "rgba(216,97,0,1)", + "orange100-static": "rgba(243,117,14,1)", + "orange200-static": "rgba(230,130,61,1)", + "orange300-static": "rgba(241,162,106,1)", + "orange400-static": "rgba(249,194,150,1)", + "orange500-static": "rgba(251,225,195,1)", + "orange600-static": "rgba(255,239,224,1)", + "green40-static": "rgba(40,81,21,1)", + "green60-static": "rgba(56,113,30,1)", + "green80-static": "rgba(73,147,39,1)", + "green100-static": "rgba(54,167,92,1)", + "green200-static": "rgba(110,169,81,1)", + "green300-static": "rgba(145,192,120,1)", + "green400-static": "rgba(178,214,160,1)", + "green500-static": "rgba(213,237,202,1)", + "green600-static": "rgba(238,249,234,1)", + "gold40-static": "rgba(109,69,8,1)", + "gold60-static": "rgba(158,97,5,1)", + "gold80-static": "rgba(194,136,47,1)", + "gold100-static": "rgba(229,160,55,1)", + "gold200-static": "rgba(211,158,76,1)", + "gold300-static": "rgba(222,181,126,1)", + "gold400-static": "rgba(233,203,164,1)", + "gold500-static": "rgba(243,228,205,1)", + "gold600-static": "rgba(250,240,226,1)", + "yellow100-static": "rgba(255,236,68,1)", + "yellow600-static": "rgba(253,249,216,1)", + "mustard40-static": "rgba(100,72,1,1)", + "mustard60-static": "rgba(145,104,1,1)", + "mustard80-static": "rgba(193,139,0,1)", + "mustard100-static": "rgba(226,163,31,1)", + "mustard200-static": "rgba(217,158,32,1)", + "mustard300-static": "rgba(235,179,71,1)", + "mustard400-static": "rgba(247,202,111,1)", + "mustard500-static": "rgba(254,227,156,1)", + "mustard600-static": "rgba(251,241,221,1)", +}; +export const defaultTheme = { + primary: "$gray20", + secondary: "$gray700", + cta: "$blue100", + disabled: "$alpha25", + accessible: "$gray80", + subtle: "$gray300", + faint: "$gray400", + error: "$red100", + success: "$green100", + warning: "$orange100", + signal: "$blue200", + onPrimary: "$gray700", + onSecondary: "$gray20", + onCta: "$gray700-static", + onDisabled: "$alpha50", + onMessage: "$gray700-static", +}; +export const sizes = { + "100": "1rem", + "125": "1.25rem", + "150": "1.5rem", + "175": "1.75rem", + "200": "2rem", + "225": "2.25rem", + "250": "2.5rem", + "275": "2.75rem", + "300": "3rem", + "350": "3.5rem", + "400": "4rem", + "450": "4.5rem", + "500": "5rem", + "025": "0.25rem", + "050": "0.5rem", + "075": "0.75rem", + "087": "0.875rem", +}; +export const spaces = { + "100": "1rem", + "125": "1.25rem", + "150": "1.5rem", + "175": "1.75rem", + "200": "2rem", + "225": "2.25rem", + "250": "2.5rem", + "275": "2.75rem", + "300": "3rem", + "350": "3.5rem", + "400": "4rem", + "450": "4.5rem", + "500": "5rem", + "025": "0.25rem", + "050": "0.5rem", + "075": "0.75rem", +}; +export const radii = { + "100": "1rem", + "125": "1.25rem", + "150": "1.5rem", + "012": "0.125rem", + "025": "0.25rem", + "050": "0.5rem", + "075": "0.75rem", + round: "9999px", +}; +export const fonts = { + headline: "Postoni, garamond, serif", + subhead: "Franklin, arial, sans-serif", + body: "georgia, Times New Roman, serif", + meta: "Franklin, arial, sans-serif", + magazine: "PostoniDisplayMag, garamond, serif", +}; +export const fontSizes = { + "100": "1rem", + "112": "1.125rem", + "125": "1.25rem", + "150": "1.5rem", + "175": "1.75rem", + "200": "2rem", + "225": "2.25rem", + "250": "2.5rem", + "275": "2.75rem", + "300": "3rem", + "350": "3.5rem", + "400": "4rem", + "450": "4.5rem", + "500": "5rem", + "075": "0.75rem", + "087": "0.875rem", +}; +export const fontWeights = { light: 300, regular: 400, bold: 700, ultra: 800 }; +export const lineHeights = { + "100": 1, + "110": 1.1, + "125": 1.25, + "150": 1.5, + "160": 1.6, + "175": 1.75, + "200": 2, + "240": 2.4, +}; +export const shadows = { + "50": "0px 2px 0px 0px #D5D5D5", + "100": "0px 1px 2px 0px rgba(102, 102, 102, 0.25)", + "200": "0px 2px 4px 0px rgba(102, 102, 102, 0.25)", + "300": "0px 4px 8px 0px rgba(102, 102, 102, 0.25)", + "400": "0px 8px 16px 0px rgba(102, 102, 102, 0.25)", + "500": "0px 16px 32px 0px rgba(102, 102, 102, 0.25)", +}; +export const zIndices = { offer: 400, shell: 300, ads: 200, page: 100 }; From 1434961764c0518461f7c81aec4223fd2a6c2ac5 Mon Sep 17 00:00:00 2001 From: Andrew Berg Date: Wed, 7 Feb 2024 14:18:15 -0500 Subject: [PATCH 5/7] chore: ibteraction test update --- ui/carousel/src/play.stories.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/carousel/src/play.stories.jsx b/ui/carousel/src/play.stories.jsx index 8a3967225..575968ca5 100644 --- a/ui/carousel/src/play.stories.jsx +++ b/ui/carousel/src/play.stories.jsx @@ -709,7 +709,7 @@ InternalFocusInteractions.play = async ({ canvasElement }) => { await userEvent.tab(); await userEvent.tab(); await userEvent.tab(); - await userEvent.keyboard("{ArrowDown}"); + await userEvent.keyboard("[ArrowDown]"); const groups = canvas.getAllByRole("group"); const content = groups[1]; From 0f889fafcfdb94142d583e82fe1ad39aef02710c Mon Sep 17 00:00:00 2001 From: Andrew Berg Date: Thu, 8 Feb 2024 15:36:12 -0500 Subject: [PATCH 6/7] chore: disable failing carousel test temporarily --- ui/carousel/src/play.stories.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/carousel/src/play.stories.jsx b/ui/carousel/src/play.stories.jsx index 575968ca5..dc3b94f6d 100644 --- a/ui/carousel/src/play.stories.jsx +++ b/ui/carousel/src/play.stories.jsx @@ -701,7 +701,7 @@ const InternalFocusTemplate = () => { export const InternalFocusInteractions = InternalFocusTemplate.bind({}); InternalFocusInteractions.parameters = { - chromatic: { viewports: [1024] }, + chromatic: { viewports: [1024], disableSnapshot: true }, }; InternalFocusInteractions.play = async ({ canvasElement }) => { From d02aa5b82163978e8f51c4facd504c27bdab7547 Mon Sep 17 00:00:00 2001 From: Andrew Berg Date: Fri, 9 Feb 2024 15:47:14 -0500 Subject: [PATCH 7/7] chore: add test covergae to Accordion --- jest.config.js | 2 +- packages/kit/src/accordion/Accordion.test.tsx | 10 +++++++ .../src/accordion/AccordionContent.test.tsx | 29 +++++++++++++++++++ .../kit/src/accordion/AccordionItem.test.tsx | 19 ++++++++++++ .../src/accordion/AccordionTrigger.test.tsx | 20 +++++++++++++ tsconfig.test.json | 2 +- 6 files changed, 80 insertions(+), 2 deletions(-) create mode 100644 packages/kit/src/accordion/Accordion.test.tsx create mode 100644 packages/kit/src/accordion/AccordionContent.test.tsx create mode 100644 packages/kit/src/accordion/AccordionItem.test.tsx create mode 100644 packages/kit/src/accordion/AccordionTrigger.test.tsx diff --git a/jest.config.js b/jest.config.js index 9f821f4e8..d0080e805 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,6 +1,6 @@ /** @type {import("jest").Config} */ module.exports = { - roots: ["./ui"], + roots: ["./ui", "./packages"], preset: "ts-jest", testEnvironment: "./custom-env.ts", cacheDirectory: ".jest-cache", diff --git a/packages/kit/src/accordion/Accordion.test.tsx b/packages/kit/src/accordion/Accordion.test.tsx new file mode 100644 index 000000000..e5534aa57 --- /dev/null +++ b/packages/kit/src/accordion/Accordion.test.tsx @@ -0,0 +1,10 @@ +import { render, screen } from "@testing-library/react"; +import { AccordionRoot } from "./Accordion"; + +describe("AccordionRoot", () => { + test("renders visibly into the document", () => { + render(Test); + + expect(screen.getByText("Test")).toBeVisible(); + }); +}); diff --git a/packages/kit/src/accordion/AccordionContent.test.tsx b/packages/kit/src/accordion/AccordionContent.test.tsx new file mode 100644 index 000000000..020e2a56a --- /dev/null +++ b/packages/kit/src/accordion/AccordionContent.test.tsx @@ -0,0 +1,29 @@ +import { render, screen } from "@testing-library/react"; +import { AccordionRoot } from "./Accordion"; +import { AccordionItem } from "./AccordionItem"; +import { AccordionContent } from "./AccordionContent"; + +const customRender = (ui, contextProps = {}) => { + return render( + + {ui} + + ); +}; + +describe("AccordionContent", () => { + test("renders visibly into the document", () => { + customRender(); + + expect(screen.getByRole("region")).toBeVisible(); + }); + + test("applies padding to inner content", () => { + customRender( + Test + ); + + // eslint-disable-next-line jest-dom/prefer-to-have-class + expect(screen.getByText("Test").classList.length).toBe(2); + }); +}); diff --git a/packages/kit/src/accordion/AccordionItem.test.tsx b/packages/kit/src/accordion/AccordionItem.test.tsx new file mode 100644 index 000000000..fce5e4ed7 --- /dev/null +++ b/packages/kit/src/accordion/AccordionItem.test.tsx @@ -0,0 +1,19 @@ +import { render, screen } from "@testing-library/react"; +import { AccordionRoot } from "./Accordion"; +import { AccordionItem } from "./AccordionItem"; + +const customRender = (ui, contextProps = {}) => { + return render( + + {ui} + + ); +}; + +describe("AccordionItem", () => { + test("renders visibly into the document", () => { + customRender(); + + expect(screen.getByTestId("test")).toBeVisible(); + }); +}); diff --git a/packages/kit/src/accordion/AccordionTrigger.test.tsx b/packages/kit/src/accordion/AccordionTrigger.test.tsx new file mode 100644 index 000000000..19dc5ada3 --- /dev/null +++ b/packages/kit/src/accordion/AccordionTrigger.test.tsx @@ -0,0 +1,20 @@ +import { render, screen } from "@testing-library/react"; +import { AccordionRoot } from "./Accordion"; +import { AccordionItem } from "./AccordionItem"; +import { AccordionTrigger } from "./AccordionTrigger"; + +const customRender = (ui, contextProps = {}) => { + return render( + + {ui} + + ); +}; + +describe("AccordionContent", () => { + test("renders visibly into the document", () => { + customRender(Test); + + expect(screen.getByRole("button")).toBeVisible(); + }); +}); diff --git a/tsconfig.test.json b/tsconfig.test.json index b230d5abf..5b858a0e4 100644 --- a/tsconfig.test.json +++ b/tsconfig.test.json @@ -1,7 +1,7 @@ { "compilerOptions": { "esModuleInterop": true, - "jsx": "react", + "jsx": "react-jsx", "types": ["jest"] } }