feat: Add AlertDialog & Button

src/components/AlertDialog/AlertDialog.module.scss

@@ -0,0 +1,85 @@
+/*
+ * Implements the following theme:
+ * animation-duration: var(--ease-duration-short, 150ms);
+ * animation-transition:  var(--ease-1, 0.16, 1, 0.3, 1);
+ * overlay animation: overlayShow
+ * overlay: background-color: var(--c-overlay-bg-color, var(--c-black));
+ * overlay: opacity: var(--c-overlay-opacity);
+ *
+ * content animation: contentShow
+ * content: background-color: var(--c-dialog-content-bg, var(--c-white));
+ * content: border-radius: var(--s-border-radius-xs);
+ * content: box-shadow: var(--sh-dialog-content-shadow, var(--sh-box-xs));
+ * content: padding: var(--s-content-padding, var(--s-2));
+ * content: var(--s-content-border-radius, var(--s-border-radius-xs));
+ *
+ * title: font-size: var(--t-dialog-title);
+ * title: font-weight: var(--fw-dialog-title);
+ */
+
+@keyframes overlayShow {
+  0% {
+    opacity: 0;
+  }
+  90% {
+    opacity: 1;
+  }
+}
+
+@keyframes contentShow {
+  0% {
+    opacity: 0;
+    scale: 0.5;
+  }
+  50% {
+    scale: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: var(--s-content-padding, var(--s-2));
+  animation: contentShow var(--ease-duration-short, 150ms)
+    var(--ease-1, 0.16, 1, 0.3, 1);
+  background-color: var(--c-dialog-content-bg, var(--c-white));
+  border-radius: var(--s-content-border-radius, var(--s-border-radius-xs));
+  box-shadow: var(--sh-dialog-content-shadow, var(--sh-box-xs));
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  // todo, potentially move this variable to global
+  background-color: var(--c-overlay-bg-color, var(--c-black));
+  opacity: var(--c-overlay-opacity);
+  animation: overlayShow var(--ease-duration-short, 150ms)
+    var(--ease-1, 0.16, 1, 0.3, 1);
+}
+
+.title {
+  font-size: var(--t-dialog-title, var(--t-heading-m));
+  font-weight: var(--fw-dialog-title, var(--fw-medium));
+}
+
+.description {
+  position: relative;
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}

src/components/AlertDialog/AlertDialog.spec.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { AlertDialog, AlertDialogFooter, AlertDialogTrigger } from "./index";
+
+describe("AlertDialog", () => {
+  it("should render correctly", async () => {
+    const { container } = render(
+      <AlertDialog
+        trigger={
+          <AlertDialogTrigger>
+            <button>Open the dialog</button>
+          </AlertDialogTrigger>
+        }
+        dialogTitle={<>This is important!</>}
+        dialogFooter={
+          <AlertDialogFooter
+            dialogCancel={<button>Cancel</button>}
+            dialogAction={<button>Yes, do it!</button>}
+          />
+        }
+        dialogContent={<p>Are you sure about all of that stuff?</p>}
+      />
+    );
+
+    await userEvent.click(
+      screen.getByRole("button", { name: "Open the dialog" })
+    );
+
+    expect(screen.getByRole("alertdialog", { name: "This is important!" }));
+    expect(screen.getByText("Are you sure about all of that stuff?"));
+
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/AlertDialog/AlertDialog.stories.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { AlertDialog, AlertDialogTrigger, AlertDialogFooter } from "./index";
+
+const Meta: ComponentMeta<typeof AlertDialog> = {
+  title: "Components/AlertDialog",
+  component: AlertDialog,
+  subcomponents: { AlertDialogTrigger, AlertDialogFooter },
+};
+
+export default Meta;
+
+const Template: ComponentStory<typeof AlertDialog> = (args) => (
+  <AlertDialog {...args} />
+);
+export const Default = Template.bind({});
+
+Default.args = {
+  trigger: (
+    <AlertDialogTrigger>
+      <button>Open the dialog</button>
+    </AlertDialogTrigger>
+  ),
+  dialogTitle: <>This is important!</>,
+  dialogContent: <p>Are you sure about all of that stuff?</p>,
+  dialogFooter: (
+    <AlertDialogFooter
+      dialogCancel={<button>Cancel</button>}
+      dialogAction={<button>Yes, do it!</button>}
+    />
+  ),
+};

src/components/AlertDialog/AlertDialog.tsx

@@ -0,0 +1,84 @@
+import React, { ReactElement } from "react";
+import cx from "classnames";
+import * as Dialog from "@radix-ui/react-alert-dialog";
+import styles from "./AlertDialog.module.scss";
+import { DefaultProps } from "../../types/types";
+
+export const AlertDialogTrigger = ({ children }: DefaultProps<"button">) => (
+  <Dialog.Trigger asChild>{children}</Dialog.Trigger>
+);
+
+export interface AlertDialogFooterProps extends DefaultProps<"footer"> {
+  // An element (ideally a button) to cancel the alert dialog
+  dialogCancel?: ReactElement;
+  // An element (ideally a button) to trigger the alert dialog action
+  dialogAction: ReactElement;
+}
+
+export const AlertDialogFooter = ({
+  dialogCancel,
+  dialogAction,
+  ...rest
+}: AlertDialogFooterProps) => (
+  <footer {...rest}>
+    {dialogCancel ? (
+      <Dialog.Cancel asChild>{dialogCancel}</Dialog.Cancel>
+    ) : null}
+    <Dialog.Action asChild>{dialogAction}</Dialog.Action>
+  </footer>
+);
+
+const elementIsReactElement = (element: any): element is ReactElement => {
+  return "props" in element;
+};
+
+export interface AlertDialogProps extends DefaultProps<"div"> {
+  // The trigger should be an `AlertDialogTrigger`
+  trigger: ReactElement;
+  // `dialogTitle` is an object of the title and whether to hide the title (this defaults to true). NOTE: This is placed in an `<h2>`.
+  dialogTitle: ReactElement | { title: ReactElement; hideTitle?: boolean };
+  // The body content of the alert. NOTE: This will take the form of the element that you pass in.
+  dialogContent: ReactElement;
+  // An element that displays in the dialog footer that contains an action and an optional cancel button
+  dialogFooter: ReactElement;
+}
+/**
+ * The AlertDialog interrupts a user's workflow to communicate an important message that requires a response. *NOTE:* This is different from the Dialog component
+ */
+export const AlertDialog = ({
+  className,
+  trigger,
+  dialogTitle,
+  dialogFooter,
+  dialogContent,
+}: AlertDialogProps) => {
+  return (
+    <Dialog.Root>
+      {trigger}
+      <Dialog.Portal>
+        <div className={className}>
+          <Dialog.Overlay className={styles.overlay} />
+          <Dialog.Content className={cx(styles.content)}>
+            {elementIsReactElement(dialogTitle) ? (
+              <Dialog.Title className={cx(styles.title)}>
+                {dialogTitle}
+              </Dialog.Title>
+            ) : (
+              <Dialog.Title
+                className={cx(styles.title, {
+                  [styles.visuallyHidden]: dialogTitle.hideTitle === false,
+                })}
+              >
+                {dialogTitle.title}
+              </Dialog.Title>
+            )}
+            <Dialog.Description className={styles.description} asChild>
+              {dialogContent}
+            </Dialog.Description>
+            {dialogFooter}
+          </Dialog.Content>
+        </div>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};

src/components/AlertDialog/__snapshots__/AlertDialog.spec.tsx.snap

@@ -0,0 +1,18 @@
+// Vitest Snapshot v1
+
+exports[`AlertDialog > should render correctly 1`] = `
+<div
+  aria-hidden="true"
+  data-aria-hidden="true"
+>
+  <button
+    aria-controls="radix-:r0:"
+    aria-expanded="true"
+    aria-haspopup="dialog"
+    data-state="open"
+    type="button"
+  >
+    Open the dialog
+  </button>
+</div>
+`;

src/components/AlertDialog/index.ts

@@ -0,0 +1,3 @@
+import { AlertDialog, AlertDialogTrigger, AlertDialogFooter } from "./AlertDialog";
+
+export { AlertDialog, AlertDialogTrigger, AlertDialogFooter };

src/components/Button/Button.module.scss

@@ -0,0 +1,135 @@
+/*
+  Implements the globally available theme::after// Button
+  --c-button: var(--c-cobalt);
+  --c-button-bg: var(--c-white);
+  --c-button-border: var(--c-cobalt);
+  --c-button-hover: var(--c-luminous-vivid-amber);
+  --c-button-hover-bg: var(--c-white);
+  --c-button-hover-border: var(--c-luminous-vivid-amber);
+  --c-button-disabled: var(--c-gray-600);
+  --c-button-disabled-bg: var(--c-gray-200);
+  // Primary
+  --c-button-primary: var(--c-cobalt);
+  --c-button-primary-bg: var(--c-vivid-green-cyan);
+  --c-button-primary-border: var(--c-cobalt);
+  --c-button-primary-hover: var(--c-cobalt);
+  --c-button-primary-hover-bg: var(--c-luminous-vivid-amber);
+  --c-button-primary-hover-border: var(--c-cobalt);
+  --c-button-primary-disabled: var(--c-gray-600);
+  --c-button-primary-disabled-bg: var(--c-gray-200);
+  // Important/negative
+  --c-button-important: var(--c-white);
+  --c-button-important-bg: var(--c-negative);
+  --c-button-important-border: var(--c-negative);
+  --c-button-important-hover: var(--c-cobalt);
+  --c-button-important-hover-bg: var(--c-luminous-vivid-amber);
+  --c-button-important-hover-border: var(--c-cobalt);
+  --c-button-important-disabled: var(--c-gray-600);
+  --c-button-important-disabled-bg: var(--c-gray-200);
+  // (buttons that look like links)
+  --c-button-tertiary: var(--c-link);
+  --c-button-tertiary-bg: transparent;
+  --c-button-tertiary-border: transparent;
+  --c-button-tertiary-hover: var(--c-link-hover);
+  --c-button-tertiary-hover-border: transparent;
+  --c-button-tertiary-hover-bg: transparent;
+  --c-button-tertiary-disabled: var(--c-link-disabled);
+  --c-button-tertiary-disabled-bg: transparent;
+  */
+
+.default {
+  all: unset;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--s-button-padding, var(--s-1) var(--s-2));
+  border: 1px solid;
+  background-color: var(--c-button-bg);
+  border-color: var(--c-button);
+  border-radius: var(--s-btn-radius, var(-s-border-radius-s));
+  font-size: var(--t-body-m);
+  color: var(--c-button);
+
+  &:active:enabled,
+  &:focus-visible:enabled,
+  &:hover:enabled {
+    color: var(--c-button-hover);
+    background: var(--c-button-hover-bg);
+    border-color: var(--c-button-hover-border);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--c-button-disabled);
+    border-color: var(--c-button-disabled-border);
+    background-color: var(--c-button-disabled-bg);
+  }
+}
+
+.primary {
+  composes: default;
+  background-color: var(--c-button-primary-bg);
+  border-color: var(--c-button-primary);
+  border-radius: var(--s-btn-radius, var(-s-border-radius-s));
+  font-size: var(--t-body-m);
+  color: var(--c-button-primary);
+
+  &:active:enabled,
+  &:focus-visible:enabled,
+  &:hover:enabled {
+    color: var(--c-button-primary-hover);
+    background: var(--c-button-primary-hover-bg);
+    border-color: var(--c-button-primary-hover-border);
+  }
+
+  &:disabled {
+    color: var(--c-button-primary-disabled);
+    border-color: var(--c-button-primary-disabled-border);
+    background-color: var(--c-button-primary-disabled-bg);
+  }
+}
+
+// looks like link
+.tertiary {
+  composes: default;
+  background-color: var(--c-button-tertiary-bg);
+  color: var(--c-button-tertiary);
+  border: solid 1px var(--c-button-tertiary-border);
+  padding: 0;
+
+  &:focus-visible:enabled,
+  &:hover:enabled,
+  &:active:enabled {
+    color: var(--c-button-tertiary-hover);
+    background-color: var(--c-button-tertiary-bg);
+    border: solid 1px var(--c-button-tertiary-border);
+    text-decoration: underline;
+  }
+
+  &:disabled {
+    color: var(--c-button-tertiary-disabled);
+    border-color: var(--c-button-tertiary-disabled-border);
+    background-color: var(--c-button-tertiary-disabled-bg);
+  }
+}
+
+.important {
+  composes: default;
+  background-color: var(--c-button-important-bg);
+  color: var(--c-button-important);
+  border: 1px solid var(--c-button-important-border);
+
+  &:active:enabled,
+  &:focus-visible:enabled,
+  &:hover:enabled {
+    color: var(--c-button-important-hover);
+    background: var(--c-button-important-hover-bg);
+    border-color: var(--c-button-important-hover-border);
+  }
+
+  &:disabled {
+    color: var(--c-button-important-disabled);
+    border-color: var(--c-button-important-disabled-border);
+    background-color: var(--c-button-important-disabled-bg);
+  }
+}