feat: AlertDialog, rename with Aer prefix

README.md

@@ -1,17 +1,18 @@
-# Aerian Component Library
+# Aerated - Component Library
 
 ## Installation
 
 ```bash
-npm install --save @aerian-studios/aerian-component-library@0.0.1
+npm install --save @aerian-studios/aerated@0.0.1
 # or
-yarn add @aerian-studios/aerian-component-library@0.0.1
+yarn add @aerian-studios/aerated@0.0.1
 ```
+
 ## Usage
 
 ## Form
 
-The `Form` component is an implimentation of `react-hook-form`. 
+The `Form` component is an implementation of `react-hook-form`. 
 The component has 2 required props `onSubmitFn` and `validationSchema`.
 
 - onSubmitFn:
@@ -29,7 +30,7 @@ import {
     FormInput, 
     FormInputGroup, 
     FormSelect 
-} from 'aerian-component-library';
+} from 'aerated';
 import * as yup from 'yup';
 
 const validationSchema = {
@@ -116,7 +117,7 @@ export default FormComponent;
 ## Form Element
 
 ```tsx
-import { Form } from 'aerian-component-library';
+import { Form } from 'aerated';
 
 const FormComponent = () => {
     return (
@@ -159,7 +160,7 @@ The repository contains storybooks for building and testing new components. To a
 Clone this repository:
 
 ```bash
-https://github.com/matt-hardman/aerian-component-library.git
+https://github.com/matt-hardman/aerated.git
 ```
 
 Install dependencies:
@@ -176,7 +177,7 @@ yarn storybook
 
 Then create a component and relevant story within the `src` folder.
 
-## Linking a local version of aerian-component-library to another project
+## Linking a local version of aerated to another project
 <hr />
 
 Based on: [this article](https://medium.com/@mtfranchetto/the-solution-for-a-working-npm-yarn-link-ddcb4f3c785e)
@@ -193,4 +194,4 @@ yarn global add yalc
 
 Once yalc is installed running `yarn npm-publish:local` will build the library as if it was being published to npm, but store it locally.
 
-Next go to the react project you want to install the local version of `aerian-component-library` and run `yalc add aerian-component-library`.  
+Next go to the react project you want to install the local version of `aerated` and run `yalc add aerated`.  

src/components/AlertDialog/AlertDialog.spec.tsx → src/components/AerAlertDialog/AerAlertDialog.spec.tsx

@@ -2,20 +2,24 @@ 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";
+import {
+  AerAlertDialog,
+  AerAlertDialogFooter,
+  AerAlertDialogTrigger,
+} from "./index";
 
 describe("AlertDialog", () => {
   it("should render correctly", async () => {
     const { container } = render(
-      <AlertDialog
+      <AerAlertDialog
         trigger={
-          <AlertDialogTrigger>
+          <AerAlertDialogTrigger>
             <button>Open the dialog</button>
-          </AlertDialogTrigger>
+          </AerAlertDialogTrigger>
         }
         dialogTitle={<>This is important!</>}
         dialogFooter={
-          <AlertDialogFooter
+          <AerAlertDialogFooter
             dialogCancel={<button>Cancel</button>}
             dialogAction={<button>Yes, do it!</button>}
           />

src/components/AerAlertDialog/AerAlertDialog.stories.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import {
+  AerAlertDialog,
+  AerAlertDialogTrigger,
+  AerAlertDialogFooter,
+} from "./index";
+import { AerButton } from "../AerButton";
+
+const Meta: ComponentMeta<typeof AerAlertDialog> = {
+  title: "Components/AerAlertDialog",
+  component: AerAlertDialog,
+  subcomponents: { AerAlertDialogTrigger, AerAlertDialogFooter },
+};
+
+export default Meta;
+
+const Template: ComponentStory<typeof AerAlertDialog> = (args) => (
+  <AerAlertDialog {...args} />
+);
+export const Default = Template.bind({});
+
+Default.args = {
+  trigger: (
+    <AerAlertDialogTrigger>
+      <AerButton>Open the dialog</AerButton>
+    </AerAlertDialogTrigger>
+  ),
+  dialogTitle: <>This is important!</>,
+  dialogContent: <p>Are you sure about all of that stuff?</p>,
+  dialogFooter: (
+    <AerAlertDialogFooter
+      style={{ justifyContent: "space-between", display: "flex" }}
+      dialogCancel={<AerButton variant="important">Cancel</AerButton>}
+      dialogAction={<AerButton variant="primary">Yes, do it!</AerButton>}
+    />
+  ),
+};

src/components/AlertDialog/AlertDialog.tsx → src/components/AerAlertDialog/AerAlertDialog.tsx

@@ -1,11 +1,11 @@
 import React, { ReactElement } from "react";
 import cx from "classnames";
-import * as Dialog from "@radix-ui/react-alert-dialog";
+import * as AlertDialog 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 const AerAlertDialogTrigger = ({ children }: DefaultProps<"button">) => (
+  <AlertDialog.Trigger asChild>{children}</AlertDialog.Trigger>
 );
 
 export interface AlertDialogFooterProps extends DefaultProps<"footer"> {
@@ -15,24 +15,24 @@ export interface AlertDialogFooterProps extends DefaultProps<"footer"> {
   dialogAction: ReactElement;
 }
 
-export const AlertDialogFooter = ({
+export const AerAlertDialogFooter = ({
   dialogCancel,
   dialogAction,
   ...rest
 }: AlertDialogFooterProps) => (
   <footer {...rest}>
     {dialogCancel ? (
-      <Dialog.Cancel asChild>{dialogCancel}</Dialog.Cancel>
+      <AlertDialog.Cancel asChild>{dialogCancel}</AlertDialog.Cancel>
     ) : null}
-    <Dialog.Action asChild>{dialogAction}</Dialog.Action>
+    <AlertDialog.Action asChild>{dialogAction}</AlertDialog.Action>
   </footer>
 );
 
 const elementIsReactElement = (element: any): element is ReactElement => {
   return "props" in element;
 };
 
-export interface AlertDialogProps extends DefaultProps<"div"> {
+export interface AerAlertDialogProps 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>`.
@@ -45,40 +45,40 @@ export interface AlertDialogProps extends DefaultProps<"div"> {
 /**
  * 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 = ({
+export const AerAlertDialog = ({
   className,
   trigger,
   dialogTitle,
   dialogFooter,
   dialogContent,
-}: AlertDialogProps) => {
+}: AerAlertDialogProps) => {
   return (
-    <Dialog.Root>
+    <AlertDialog.Root>
       {trigger}
-      <Dialog.Portal>
+      <AlertDialog.Portal>
         <div className={className}>
-          <Dialog.Overlay className={styles.overlay} />
-          <Dialog.Content className={cx(styles.content)}>
+          <AlertDialog.Overlay className={styles.overlay} />
+          <AlertDialog.Content className={cx(styles.content)}>
             {elementIsReactElement(dialogTitle) ? (
-              <Dialog.Title className={cx(styles.title)}>
+              <AlertDialog.Title className={cx(styles.title)}>
                 {dialogTitle}
-              </Dialog.Title>
+              </AlertDialog.Title>
             ) : (
-              <Dialog.Title
+              <AlertDialog.Title
                 className={cx(styles.title, {
                   [styles.visuallyHidden]: dialogTitle.hideTitle === false,
                 })}
               >
                 {dialogTitle.title}
-              </Dialog.Title>
+              </AlertDialog.Title>
             )}
-            <Dialog.Description className={styles.description} asChild>
+            <AlertDialog.Description className={styles.description} asChild>
               {dialogContent}
-            </Dialog.Description>
+            </AlertDialog.Description>
             {dialogFooter}
-          </Dialog.Content>
+          </AlertDialog.Content>
         </div>
-      </Dialog.Portal>
-    </Dialog.Root>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
   );
 };

src/components/AerAlertDialog/index.ts

@@ -0,0 +1,3 @@
+import { AerAlertDialog, AerAlertDialogTrigger, AerAlertDialogFooter } from "./AerAlertDialog";
+
+export { AerAlertDialog, AerAlertDialogTrigger, AerAlertDialogFooter };

src/components/AerButton/AerButton.spec.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+
+import { render, screen } from "@testing-library/react";
+
+import { AerButton } from "./index";
+
+describe("AerButton", () => {
+  it("should render correctly", () => {
+    const { container } = render(<AerButton disabled={false} />);
+
+    expect(screen.getByRole(/button/)).toBeInTheDocument();
+    expect(screen.getByRole(/button/)).not.toBeDisabled();
+    expect(container).toMatchSnapshot();
+  });
+
+  it("should be disabled when passed the disabled prop", () => {
+    const { container } = render(<AerButton disabled={true} />);
+
+    expect(screen.getByRole(/button/)).toBeInTheDocument();
+    expect(screen.getByRole(/button/)).toBeDisabled();
+    expect(container).toMatchSnapshot();
+  });
+
+  it("should pass button correct variant classnames", () => {
+    const variants = ["dark", "tertiary", "important"] as const;
+
+    variants.forEach((variant: typeof variants[number]) => {
+      const { container } = render(<AerButton variant={variant} />);
+      expect(screen.getByRole(/button/)).toHaveClass(variant);
+      container.remove();
+    });
+  });
+});

src/components/Button/Button.stories.tsx → src/components/AerButton/AerButton.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import Button from "./Button";
+import Button from "./AerButton";
 
 const Meta: ComponentMeta<typeof Button> = {
   title: "Components/Inputs/Button",

src/components/AerButton/AerButton.tsx

@@ -0,0 +1,79 @@
+import React, { MutableRefObject } from "react";
+
+import cx from "classnames";
+
+import { DefaultProps } from "../../types/types";
+import styles from "./Button.module.scss";
+
+type Props = DefaultProps<"button"> & {
+  variant?: "primary" | "tertiary" | "important" | "default";
+  type?: "button" | "submit" | "reset";
+};
+
+/**
+ * The Button component exposes 3 variants, "dark" (primary), "tertiary", "important" as well as the default. It implements the following CSS variables from the global scope:
+ * ```
+ * --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;
+  ```
+ */
+
+// eslint-disable-next-line react/display-name
+export const AerButton = React.forwardRef(
+  (
+    { disabled, children, className, variant = "default", ...rest }: Props,
+    ref:
+      | MutableRefObject<HTMLButtonElement | null>
+      | ((instance: HTMLButtonElement | null) => void)
+      | null
+  ) => (
+    <button
+      disabled={disabled}
+      className={cx(
+        className,
+        variant && {
+          [styles[variant]]: variant,
+        }
+      )}
+      {...rest}
+      ref={ref}
+    >
+      {children}
+    </button>
+  )
+);
+
+export default AerButton;

src/components/AerButton/index.ts

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