fix: i don't know how dialog went mising (#579)

ui/dialog/CHANGELOG.md

@@ -0,0 +1,26 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [1.22.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.21.0...v1.22.0) (2024-02-15)
+
+**Note:** Version bump only for package @washingtonpost/wpds-dialog
+
+# [1.21.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.20.0...v1.21.0) (2024-02-07)
+
+**Note:** Version bump only for package @washingtonpost/wpds-dialog
+
+# [1.20.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.19.0...v1.20.0) (2024-01-24)
+
+**Note:** Version bump only for package @washingtonpost/wpds-dialog
+
+# [1.19.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.18.0...v1.19.0) (2024-01-10)
+
+**Note:** Version bump only for package @washingtonpost/wpds-dialog
+
+# [1.18.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.17.0...v1.18.0) (2023-12-13)
+
+### Features
+
+- add Dialog component ([15d6206](https://github.com/washingtonpost/wpds-ui-kit/commit/15d6206d6287bb3eee3c9f0af8ff57a0bf917998))

ui/dialog/README.md

@@ -0,0 +1,9 @@
+# Dialog
+
+```jsx
+import { Dialog } from "@washingtonpost/wpds-ui-kit";
+
+function Component() {
+  return <Dialog />;
+}
+```

ui/dialog/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@washingtonpost/wpds-dialog",
+  "version": "1.22.0",
+  "description": "WPDS Dialog",
+  "author": "WPDS Support <wpds@washpost.com>",
+  "homepage": "https://github.com/washingtonpost/wpds-ui-kit#readme",
+  "license": "MIT",
+  "source": "src/index.ts",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "src"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/washingtonpost/wpds-ui-kit.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1",
+    "build": "tsup src/index.ts --loader .ts=tsx --minify --format esm,cjs --dts --sourcemap --legacy-output --external react",
+    "dev": "tsup src/index.ts --format esm,cjs --watch --dts --legacy-output --external react",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+  },
+  "bugs": {
+    "url": "https://github.com/washingtonpost/wpds-ui-kit/issues"
+  },
+  "devDependencies": {
+    "tsup": "5.11.13",
+    "typescript": "4.5.5"
+  },
+  "peerDependencies": {
+    "@washingtonpost/wpds-theme": "*",
+    "react": "^16.8.6 || ^17.0.2"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-use-controllable-state": "^1.0.1",
+    "@washingtonpost/wpds-assets": "^1.23.1",
+    "@washingtonpost/wpds-button": "1.22.0",
+    "@washingtonpost/wpds-icon": "1.22.0",
+    "@washingtonpost/wpds-theme": "1.22.0",
+    "react-transition-group": "^4.4.5"
+  },
+  "gitHead": "dddd34ee2494be2d91fe5671db3291060097b02a"
+}

ui/dialog/src/Dialog.tsx

@@ -0,0 +1,39 @@
+import { DialogRoot } from "./DialogRoot";
+import { DialogContent } from "./DialogContent";
+import { DialogTrigger } from "./DialogTrigger";
+import { DialogPortal } from "./DialogPortal";
+import { DialogOverlay } from "./DialogOverlay";
+import { DialogTitle } from "./DialogTitle";
+import { DialogDescription } from "./DialogDescription";
+import { DialogClose } from "./DialogClose";
+import { DialogHeader } from "./DialogHeader";
+import { DialogBody } from "./DialogBody";
+import { DialogFooter } from "./DialogFooter";
+
+export type DialogProps = {
+  Root: typeof DialogRoot;
+  Content: typeof DialogContent;
+  Trigger: typeof DialogTrigger;
+  Portal: typeof DialogPortal;
+  Overlay: typeof DialogOverlay;
+  Title: typeof DialogTitle;
+  Description: typeof DialogDescription;
+  Close: typeof DialogClose;
+  Header: typeof DialogHeader;
+  Body: typeof DialogBody;
+  Footer: typeof DialogFooter;
+};
+
+export const Dialog: DialogProps = {
+  Root: DialogRoot,
+  Content: DialogContent,
+  Trigger: DialogTrigger,
+  Portal: DialogPortal,
+  Overlay: DialogOverlay,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Close: DialogClose,
+  Header: DialogHeader,
+  Body: DialogBody,
+  Footer: DialogFooter,
+};

ui/dialog/src/DialogBody.test.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { DialogBody } from "./DialogBody";
+
+const ComponentWrapper = () => {
+  const bodyRef = React.useRef<HTMLDivElement>(null);
+  return <DialogBody ref={bodyRef}>{bodyRef.current && `ref`}</DialogBody>;
+};
+
+describe("DialogBody", () => {
+  test("renders visibly into the document", () => {
+    render(<DialogBody>test</DialogBody>);
+    expect(screen.getByText("test")).toBeVisible();
+  });
+  test("accepts callback ref", () => {
+    const callbackRef = jest.fn();
+    render(<DialogBody ref={callbackRef} />);
+    expect(callbackRef).toHaveBeenCalled();
+  });
+  test("accepts ref", () => {
+    const { rerender } = render(<ComponentWrapper />);
+    rerender(<ComponentWrapper />);
+    expect(screen.getByText("ref")).toBeVisible();
+  });
+});

ui/dialog/src/DialogBody.tsx

@@ -0,0 +1,61 @@
+import * as React from "react";
+import { styled, theme } from "@washingtonpost/wpds-theme";
+
+import type * as WPDS from "@washingtonpost/wpds-theme";
+
+const NAME = "DialogBody";
+
+const StyledBody = styled("div", {
+  color: theme.colors.primary,
+  fontFamily: theme.fonts.meta,
+  fontSize: theme.fontSizes["100"],
+  fontWeight: theme.fontWeights.light,
+  lineHeight: theme.lineHeights["125"],
+  gridArea: "body",
+  maxHeight: "100%",
+  overflowY: "auto",
+  variants: {
+    isOverflow: {
+      true: {
+        marginInlineEnd: `calc(-1 * ${theme.space["150"]})`,
+        paddingInlineEnd: theme.space["125"],
+      },
+    },
+  },
+});
+
+export type DialogBodyProps = {
+  /** Any React node may be used as a child */
+  children?: React.ReactNode;
+  /** Override CSS */
+  css?: WPDS.CSS;
+} & React.ComponentPropsWithRef<typeof StyledBody>;
+
+export const DialogBody = React.forwardRef<HTMLDivElement, DialogBodyProps>(
+  ({ children, ...props }: DialogBodyProps, ref) => {
+    const internalRef = React.useRef<HTMLDivElement>(null);
+
+    React.useEffect(() => {
+      if (!ref) return;
+      typeof ref === "function"
+        ? ref(internalRef.current)
+        : (ref.current = internalRef.current);
+    }, [ref, internalRef]);
+
+    const [isOverflow, setIsOverflow] = React.useState(false);
+
+    React.useEffect(() => {
+      if (!internalRef.current) return;
+      const element = internalRef.current;
+      setIsOverflow(element.scrollHeight > element.clientHeight);
+    }, [children, setIsOverflow]);
+
+    return (
+      <StyledBody {...props} ref={internalRef} isOverflow={isOverflow}>
+        {children}
+      </StyledBody>
+    );
+  }
+);
+
+DialogBody.displayName = NAME;

ui/dialog/src/DialogClose.test.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { DialogRoot } from "./DialogRoot";
+import { DialogClose } from "./DialogClose";
+
+const customRender = (component) => {
+  return render(<DialogRoot>{component}</DialogRoot>);
+};
+
+describe("DialogClose", () => {
+  test("renders visibly into the document", () => {
+    customRender(<DialogClose />);
+    expect(screen.getByRole("button")).toBeVisible();
+  });
+  test("honors asChild prop", () => {
+    customRender(
+      <DialogClose asChild>
+        <button>Cancel</button>
+      </DialogClose>
+    );
+    expect(screen.getByText("Cancel")).toBeVisible();
+  });
+});

ui/dialog/src/DialogClose.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { styled, theme } from "@washingtonpost/wpds-theme";
+import { Button } from "@washingtonpost/wpds-button";
+import { Icon } from "@washingtonpost/wpds-icon";
+import { Close } from "@washingtonpost/wpds-assets";
+
+import type * as WPDS from "@washingtonpost/wpds-theme";
+
+const NAME = "DialogClose";
+
+const StyledClose = styled(DialogPrimitive.Close, {
+  variants: {
+    main: {
+      true: {
+        position: "absolute",
+        insetBlockStart: theme.space["100"],
+        insetInlineEnd: theme.space["100"],
+      },
+    },
+  },
+});
+
+export type DialogCloseProps = {
+  /** Any React node may be used as a child */
+  children?: React.ReactNode;
+  /** Override CSS */
+  css?: WPDS.CSS;
+} & React.ComponentPropsWithRef<typeof DialogPrimitive.Close>;
+
+export const DialogClose = React.forwardRef<
+  HTMLButtonElement,
+  DialogCloseProps
+>(({ ...props }, ref) => {
+  if (props.asChild) {
+    return <StyledClose {...props} ref={ref} />;
+  } else {
+    return (
+      <StyledClose {...props} ref={ref} asChild main>
+        <Button
+          variant="primary"
+          isOutline
+          density="compact"
+          icon="center"
+          css={{ border: "none" }}
+        >
+          <Icon label="Close">
+            <Close />
+          </Icon>
+        </Button>
+      </StyledClose>
+    );
+  }
+});
+
+DialogClose.displayName = NAME;

ui/dialog/src/DialogContent.test.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { DialogRoot } from "./DialogRoot";
+import { DialogContent } from "./DialogContent";
+
+const customRender = (component, rootProps = {}) => {
+  return render(<DialogRoot {...rootProps}>{component}</DialogRoot>);
+};
+
+describe("DialogContent", () => {
+  test("renders visibly into the document", () => {
+    customRender(<DialogContent />, { defaultOpen: true });
+    expect(screen.getByRole("dialog")).toBeVisible();
+  });
+});