From f21f0b645e177adf9def33b54834948420ebdfbe Mon Sep 17 00:00:00 2001
From: Taylor Bantle <taylor@dolthub.com>
Date: Tue, 5 Mar 2024 12:21:33 -0800
Subject: [PATCH 01/10] components: Preflight

---
 packages/components/rollup.config.js   |   9 +
 packages/components/src/main.css       |   3 +
 packages/components/src/preflight.css  | 409 +++++++++++++++++++++++++
 packages/components/tailwind.config.ts |   3 +
 4 files changed, 424 insertions(+)
 create mode 100644 packages/components/src/preflight.css

diff --git a/packages/components/rollup.config.js b/packages/components/rollup.config.js
index 3e081870..244a8095 100644
--- a/packages/components/rollup.config.js
+++ b/packages/components/rollup.config.js
@@ -41,6 +41,15 @@ export default [
           insertAt: "top",
         },
       }),
+      postcss({
+        config: {
+          path: "./postcss.config.js",
+        },
+        include: "./main.css",
+        extract: "main.css",
+        minimize: true,
+        sourceMap: true,
+      }),
       terser(),
     ],
   },
diff --git a/packages/components/src/main.css b/packages/components/src/main.css
index f2e73947..54fde74c 100644
--- a/packages/components/src/main.css
+++ b/packages/components/src/main.css
@@ -1,6 +1,9 @@
 /* Fonts import should come first */
 @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,600i,700,700i|Space+Mono:400,400i,700,700i&display=swap");
 
+/* Replaces tailwind preflight to fix button transparency in local development */
+@import "./preflight.css";
+
 @tailwind base;
 
 html,
diff --git a/packages/components/src/preflight.css b/packages/components/src/preflight.css
new file mode 100644
index 00000000..b4c5f5a6
--- /dev/null
+++ b/packages/components/src/preflight.css
@@ -0,0 +1,409 @@
+/* stylelint-disable function-no-unknown */
+
+/*
+Copied from https://github.com/tailwindlabs/tailwindcss/blob/master/src/css/preflight.css
+Preflight is set to false and this css file is imported in global.css instead.
+Need this until this transparent button issue is fixed https://github.com/tailwindlabs/tailwindcss/discussions/5969
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: theme("borderColor.DEFAULT", currentColor); /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: "";
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+*/
+
+html {
+  line-height: 1.5; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -moz-tab-size: 4; /* 3 */
+  tab-size: 4; /* 3 */
+  font-family: theme(
+    "fontFamily.sans",
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    "Noto Sans",
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji"
+  ); /* 4 */
+  font-feature-settings: theme(
+    "fontFamily.sans[1].fontFeatureSettings",
+    normal
+  ); /* 5 */
+  font-variation-settings: theme(
+    "fontFamily.sans[1].fontVariationSettings",
+    normal
+  ); /* 6 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0; /* 1 */
+  line-height: inherit; /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  /* font-size: inherit;
+   font-weight: inherit; */
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: theme(
+    "fontFamily.mono",
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    "Liberation Mono",
+    "Courier New",
+    monospace
+  ); /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  font-weight: inherit; /* 1 */
+  line-height: inherit; /* 1 */
+  color: inherit; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 1 */
+  /* background-color: transparent; 2 */
+  /* background-image: none;    2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1; /* 1 */
+  color: theme("colors.gray.400", #9ca3af); /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+[hidden] {
+  display: none;
+}
diff --git a/packages/components/tailwind.config.ts b/packages/components/tailwind.config.ts
index c3a89f86..26b22478 100644
--- a/packages/components/tailwind.config.ts
+++ b/packages/components/tailwind.config.ts
@@ -1,6 +1,9 @@
 import { mergeConfig } from "./src/tailwind/mergeConfig";
 
 const config = mergeConfig({
+  corePlugins: {
+    preflight: false,
+  },
   content: ["./src/**/*.tsx", "./src/**/*.css"],
   theme: {
     extend: {

From c8db2a07172f48d31af305f94461010aec83ebc7 Mon Sep 17 00:00:00 2001
From: Taylor Bantle <taylor@dolthub.com>
Date: Tue, 5 Mar 2024 15:52:22 -0800
Subject: [PATCH 02/10] components: Fixes

---
 packages/components/.storybook/preview.tsx               | 2 +-
 packages/components/rollup.config.js                     | 9 ---------
 packages/components/src/Markdown/index.tsx               | 2 --
 packages/components/src/__stories__/Markdown.stories.tsx | 7 -------
 packages/components/src/{main.css => styles/global.css}  | 0
 packages/components/src/{ => styles}/preflight.css       | 0
 6 files changed, 1 insertion(+), 19 deletions(-)
 rename packages/components/src/{main.css => styles/global.css} (100%)
 rename packages/components/src/{ => styles}/preflight.css (100%)

diff --git a/packages/components/.storybook/preview.tsx b/packages/components/.storybook/preview.tsx
index baf21e15..973c10b3 100644
--- a/packages/components/.storybook/preview.tsx
+++ b/packages/components/.storybook/preview.tsx
@@ -1,6 +1,6 @@
 import { Preview } from "@storybook/react";
 import React from "react";
-import "../src/main.css";
+import "../src/styles/global.css";
 import ThemeProvider from "../src/tailwind/context";
 
 const preview: Preview = {
diff --git a/packages/components/rollup.config.js b/packages/components/rollup.config.js
index 244a8095..3e081870 100644
--- a/packages/components/rollup.config.js
+++ b/packages/components/rollup.config.js
@@ -41,15 +41,6 @@ export default [
           insertAt: "top",
         },
       }),
-      postcss({
-        config: {
-          path: "./postcss.config.js",
-        },
-        include: "./main.css",
-        extract: "main.css",
-        minimize: true,
-        sourceMap: true,
-      }),
       terser(),
     ],
   },
diff --git a/packages/components/src/Markdown/index.tsx b/packages/components/src/Markdown/index.tsx
index fa8ced74..68a63e9d 100644
--- a/packages/components/src/Markdown/index.tsx
+++ b/packages/components/src/Markdown/index.tsx
@@ -11,7 +11,6 @@ type Props = {
   ["data-cy"]?: string;
   forModal?: boolean;
   baseTextSize?: boolean;
-  isDoc?: boolean;
 };
 
 export default function Markdown({
@@ -26,7 +25,6 @@ export default function Markdown({
           "markdown-body",
           css.preview,
           {
-            "markdown-doc": props.isDoc,
             [css.forModal]: forModal,
             [css.baseText]: baseTextSize,
           },
diff --git a/packages/components/src/__stories__/Markdown.stories.tsx b/packages/components/src/__stories__/Markdown.stories.tsx
index 748ddddc..6b46f384 100644
--- a/packages/components/src/__stories__/Markdown.stories.tsx
+++ b/packages/components/src/__stories__/Markdown.stories.tsx
@@ -45,10 +45,3 @@ export const BaseText: Story = {
     baseTextSize: true,
   },
 };
-
-export const ForDoc: Story = {
-  args: {
-    value: markdown,
-    isDoc: true,
-  },
-};
diff --git a/packages/components/src/main.css b/packages/components/src/styles/global.css
similarity index 100%
rename from packages/components/src/main.css
rename to packages/components/src/styles/global.css
diff --git a/packages/components/src/preflight.css b/packages/components/src/styles/preflight.css
similarity index 100%
rename from packages/components/src/preflight.css
rename to packages/components/src/styles/preflight.css

From 8d6bd3ec228b5dd88e13fe50b4e348314b66a910 Mon Sep 17 00:00:00 2001
From: Taylor Bantle <taylor@dolthub.com>
Date: Tue, 5 Mar 2024 16:29:04 -0800
Subject: [PATCH 03/10] components: Add ButtonWithPopup

---
 .../src/ButtonWithPopup/index.module.css      |  19 ++
 .../components/src/ButtonWithPopup/index.tsx  |  72 ++++++
 .../src/__stories__/Button.stories.tsx        |   3 +
 .../__stories__/ButtonWithPopup.stories.tsx   |  29 +++
 .../src/__stories__/Popup.stories.tsx         |  13 +-
 .../src/__tests__/ButtonWithPopup.test.tsx    | 229 ++++++++++++++++++
 packages/components/src/index.ts              |   1 +
 7 files changed, 364 insertions(+), 2 deletions(-)
 create mode 100644 packages/components/src/ButtonWithPopup/index.module.css
 create mode 100644 packages/components/src/ButtonWithPopup/index.tsx
 create mode 100644 packages/components/src/__stories__/ButtonWithPopup.stories.tsx
 create mode 100644 packages/components/src/__tests__/ButtonWithPopup.test.tsx

diff --git a/packages/components/src/ButtonWithPopup/index.module.css b/packages/components/src/ButtonWithPopup/index.module.css
new file mode 100644
index 00000000..3102e1d7
--- /dev/null
+++ b/packages/components/src/ButtonWithPopup/index.module.css
@@ -0,0 +1,19 @@
+.triggerButton {
+  @apply rounded px-3 py-1 text-sm font-semibold border border-primary whitespace-nowrap bg-transparent flex items-center justify-center;
+
+  &:focus {
+    @apply outline-none widget-shadow-lightblue;
+  }
+}
+
+.withoutText {
+  @apply border-0 p-0 rounded-none inline-block;
+}
+
+.caret {
+  @apply pl-2 text-lg;
+}
+
+.caretWithoutText {
+  @apply pl-0 inline-block;
+}
diff --git a/packages/components/src/ButtonWithPopup/index.tsx b/packages/components/src/ButtonWithPopup/index.tsx
new file mode 100644
index 00000000..43ba786f
--- /dev/null
+++ b/packages/components/src/ButtonWithPopup/index.tsx
@@ -0,0 +1,72 @@
+import { FaCaretDown } from "@react-icons/all-files/fa/FaCaretDown";
+import { FaCaretUp } from "@react-icons/all-files/fa/FaCaretUp";
+import cx from "classnames";
+import React, { ReactNode } from "react";
+import Popup, { PopupProps } from "../Popup";
+import css from "./index.module.css";
+
+type Props = Partial<PopupProps> & {
+  children: ReactNode;
+  isOpen?: boolean;
+  setIsOpen?: (o: boolean) => void;
+  triggerText?: string;
+  buttonClassName?: string;
+  ["data-cy"]?: string;
+};
+
+export default function ButtonWithPopup({
+  children,
+  isOpen,
+  setIsOpen,
+  triggerText,
+  ...props
+}: Props) {
+  const openProps: Partial<PopupProps> =
+    isOpen !== undefined && setIsOpen !== undefined
+      ? {
+          open: isOpen,
+          onOpen: () => setIsOpen(true),
+          onClose: () => setIsOpen(false),
+        }
+      : {};
+  return (
+    <Popup
+      {...openProps}
+      position="bottom right"
+      on="click"
+      offsetX={triggerText ? 32 : 0}
+      contentStyle={{ width: "10rem" }}
+      closeOnDocumentClick
+      trigger={open => (
+        <button
+          type="button"
+          className={cx(
+            css.triggerButton,
+            { [css.withoutText]: !triggerText },
+            props.buttonClassName,
+          )}
+          data-cy={props["data-cy"]}
+        >
+          {triggerText}
+          {open ? (
+            <FaCaretUp
+              className={cx(css.caret, {
+                [css.caretWithoutText]: !triggerText,
+              })}
+            />
+          ) : (
+            <FaCaretDown
+              className={cx(css.caret, {
+                [css.caretWithoutText]: !triggerText,
+              })}
+            />
+          )}
+        </button>
+      )}
+      // props must come last to override default props above
+      {...props}
+    >
+      {children}
+    </Popup>
+  );
+}
diff --git a/packages/components/src/__stories__/Button.stories.tsx b/packages/components/src/__stories__/Button.stories.tsx
index 942603db..b312cab4 100644
--- a/packages/components/src/__stories__/Button.stories.tsx
+++ b/packages/components/src/__stories__/Button.stories.tsx
@@ -47,6 +47,9 @@ export const White: Story = {
     white: true,
     pill: true,
   },
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
 };
 
 export const Gradient: Story = {
diff --git a/packages/components/src/__stories__/ButtonWithPopup.stories.tsx b/packages/components/src/__stories__/ButtonWithPopup.stories.tsx
new file mode 100644
index 00000000..ab709063
--- /dev/null
+++ b/packages/components/src/__stories__/ButtonWithPopup.stories.tsx
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import ButtonWithPopup from "../ButtonWithPopup";
+
+const meta: Meta<typeof ButtonWithPopup> = {
+  title: "ButtonWithPopup",
+  component: ButtonWithPopup,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ButtonWithPopup>;
+
+export const Basic: Story = {
+  args: {
+    children: <div>Items</div>,
+    triggerText: "Action",
+  },
+};
+
+export const NoText: Story = {
+  args: {
+    children: <div>Items</div>,
+  },
+};
diff --git a/packages/components/src/__stories__/Popup.stories.tsx b/packages/components/src/__stories__/Popup.stories.tsx
index c4c64be2..1a3eadbc 100644
--- a/packages/components/src/__stories__/Popup.stories.tsx
+++ b/packages/components/src/__stories__/Popup.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
+import Button from "../Button";
 import Popup from "../Popup";
 
 const meta: Meta<typeof Popup> = {
@@ -18,14 +19,22 @@ type Story = StoryObj<typeof Popup>;
 export const Basic: Story = {
   args: {
     children: <span>Show me on click</span>,
-    trigger: <button type="button">Click me</button>,
+    trigger: (
+      <div>
+        <Button.Link>Click me</Button.Link>
+      </div>
+    ),
   },
 };
 
 export const Hover: Story = {
   args: {
     children: <span>Show me on hover</span>,
-    trigger: <button type="button">Hover over me</button>,
+    trigger: (
+      <div>
+        <Button.Link>Hover over me</Button.Link>
+      </div>
+    ),
     on: "hover",
   },
 };
diff --git a/packages/components/src/__tests__/ButtonWithPopup.test.tsx b/packages/components/src/__tests__/ButtonWithPopup.test.tsx
new file mode 100644
index 00000000..5f6001ac
--- /dev/null
+++ b/packages/components/src/__tests__/ButtonWithPopup.test.tsx
@@ -0,0 +1,229 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import React from "react";
+import ButtonWithPopup from "../ButtonWithPopup";
+import { PopupProps } from "../Popup";
+
+// Taken from https://github.com/yjose/reactjs-popup/blob/master/__test__/index.test.tsx
+
+const SimplePopup = ({ ...props }: Partial<PopupProps>) => (
+  <ButtonWithPopup triggerText="trigger" {...props}>
+    <span> popup Content </span>
+  </ButtonWithPopup>
+);
+const popupContentShouldntExist = () => {
+  expect(screen.queryByText(/popup Content/)).toBeNull();
+};
+const popupContentShouldExist = () => {
+  expect(screen.getByText(/popup Content/)).toBeInTheDocument();
+};
+
+describe("Popup Component Render ", () => {
+  test("should render trigger correctly", () => {
+    render(<SimplePopup />);
+    expect(screen.getByText(/trigger/)).toBeInTheDocument();
+  });
+
+  test("should be a tooltip by default", () => {
+    render(<SimplePopup />);
+    fireEvent.click(screen.getByText("trigger"));
+    expect(screen.getByRole("tooltip")).toBeInTheDocument();
+  });
+
+  test("no Arrow for modal", () => {
+    render(<SimplePopup modal />);
+    fireEvent.click(screen.getByText("trigger"));
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    expect(screen.queryByTestId("arrow")).toBeNull();
+  });
+
+  test("no Arrow on arrow= false", () => {
+    render(<SimplePopup arrow={false} />);
+    fireEvent.click(screen.getByText("trigger"));
+    expect(screen.getByRole("tooltip")).toBeInTheDocument();
+    expect(screen.queryByTestId("arrow")).toBeNull();
+  });
+
+  test("should render a Modal on modal=true", () => {
+    render(<SimplePopup modal />);
+    fireEvent.click(screen.getByText("trigger"));
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+  });
+
+  test("it should be closed  on disabled = true  ", () => {
+    render(<SimplePopup disabled />);
+    popupContentShouldntExist();
+    fireEvent.click(screen.getByText("trigger"));
+    popupContentShouldntExist();
+    fireEvent.click(screen.getByText("trigger"));
+    popupContentShouldntExist();
+  });
+  test("should be open by default on defaultOpen= true  ", () => {
+    render(<SimplePopup defaultOpen />);
+    popupContentShouldExist();
+  });
+
+  test("should call onOpen & onClose functions ", async () => {
+    const onOpen = jest.fn();
+    const onClose = jest.fn();
+    render(<SimplePopup onOpen={onOpen} onClose={onClose} />);
+
+    fireEvent.click(screen.getByText("trigger"));
+    await waitFor(() => {
+      expect(onOpen).toHaveBeenCalled();
+      const [event] = onOpen.mock.calls[0];
+      expect("target" in event).toBe(true);
+    });
+    fireEvent.click(screen.getByText("trigger"));
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalled();
+      const [event] = onClose.mock.calls[0];
+      expect("target" in event).toBe(true);
+    });
+    // expect(screen.getByRole('tooltip')).toBeInTheDocument();
+  });
+
+  test("should be closed on Escape", async () => {
+    render(<SimplePopup />);
+    fireEvent.click(screen.getByText("trigger"));
+    popupContentShouldExist();
+    fireEvent.keyUp(document, { key: "Escape", code: "Escape" });
+    popupContentShouldntExist();
+  });
+  test("shouldnt close on Escape if closeOnEscape=false", async () => {
+    render(<SimplePopup closeOnEscape={false} />);
+    fireEvent.click(screen.getByText("trigger"));
+    popupContentShouldExist();
+    fireEvent.keyUp(document, { key: "Escape", code: "Escape" });
+    popupContentShouldExist();
+  });
+
+  test("should be closed on ClickOutside ", async () => {
+    render(<SimplePopup />);
+    fireEvent.click(screen.getByText("trigger"));
+    popupContentShouldExist();
+    fireEvent.mouseDown(document);
+    popupContentShouldntExist();
+  });
+  test("shouldnt close on ClickOutside if closeOnDocumentClick=false", async () => {
+    render(<SimplePopup closeOnDocumentClick={false} />);
+    fireEvent.click(screen.getByText("trigger"));
+    popupContentShouldExist();
+    fireEvent.mouseDown(document);
+    popupContentShouldExist();
+  });
+
+  test("should lock Document Scroll on lockScroll=true", async () => {
+    render(<SimplePopup lockScroll={true} modal />);
+    fireEvent.click(screen.getByText("trigger"));
+    popupContentShouldExist();
+    expect(document.body).toHaveStyle(`overflow: hidden`);
+    fireEvent.click(screen.getByText("trigger"));
+    popupContentShouldntExist();
+    expect(document.body).toHaveStyle(`overflow: auto`);
+  });
+});
+
+// test for "on" props status
+describe('Popup Component with "on" Prop ', () => {
+  test("it should be opened only on Click as default value  ", () => {
+    render(<SimplePopup />);
+    popupContentShouldntExist();
+    fireEvent.click(screen.getByText("trigger"));
+    popupContentShouldExist();
+    fireEvent.click(screen.getByText("trigger"));
+    popupContentShouldntExist();
+  });
+
+  test('it should be opened only on Click where on="click" ', () => {
+    render(<SimplePopup on="click" />);
+    popupContentShouldntExist();
+    fireEvent.click(screen.getByText("trigger"));
+    popupContentShouldExist();
+    fireEvent.click(screen.getByText("trigger"));
+    popupContentShouldntExist();
+  });
+  test('it should be opened only on Right-Click where on="right-click" ', () => {
+    render(<SimplePopup on="right-click" />);
+    popupContentShouldntExist();
+    fireEvent.contextMenu(screen.getByText("trigger"));
+    popupContentShouldExist();
+    fireEvent.contextMenu(screen.getByText("trigger"));
+    popupContentShouldntExist();
+  });
+  test('it should be opened only on Hover where on="hover" ', async () => {
+    render(<SimplePopup on="hover" />);
+    popupContentShouldntExist();
+    fireEvent.mouseOver(screen.getByText("trigger"));
+    await waitFor(
+      () => popupContentShouldExist(),
+      { timeout: 120 }, // default delay = "100"
+    );
+    fireEvent.mouseLeave(screen.getByText("trigger"));
+
+    await waitFor(
+      () => expect(screen.queryByText(/popup Content/)).toBeNull(),
+      { timeout: 120 },
+    );
+    // should not show on click
+    fireEvent.click(screen.getByText("trigger"));
+    popupContentShouldntExist();
+  });
+  test('it should be opened only on Focus where on="focus" ', async () => {
+    render(<SimplePopup on="focus" />);
+    popupContentShouldntExist();
+    fireEvent.focus(screen.getByText("trigger"));
+    await waitFor(
+      () => popupContentShouldExist(),
+      { timeout: 120 }, // default delay = "100"
+    );
+    fireEvent.blur(screen.getByText("trigger"));
+    await waitFor(() => popupContentShouldntExist(), { timeout: 120 });
+    // should not show content on click
+    fireEvent.click(screen.getByText("trigger"));
+    popupContentShouldntExist();
+  });
+  test('it should be opened  on Focus & click & focus where on=["focus","click","hover"] ', async () => {
+    render(<SimplePopup on={["focus", "click", "hover"]} />);
+    popupContentShouldntExist();
+    // on focus
+    fireEvent.focus(screen.getByText("trigger"));
+    await waitFor(
+      () => popupContentShouldExist(),
+      { timeout: 120 }, // default delay = "100"
+    );
+    fireEvent.blur(screen.getByText("trigger"));
+    await waitFor(() => popupContentShouldntExist(), { timeout: 120 });
+    // on click
+    fireEvent.click(screen.getByText("trigger"));
+    popupContentShouldExist();
+    fireEvent.click(screen.getByText("trigger"));
+    popupContentShouldntExist();
+
+    // on Hover
+    fireEvent.mouseOver(screen.getByText("trigger"));
+    await waitFor(
+      () => popupContentShouldExist(),
+      { timeout: 120 }, // default delay = "100"
+    );
+    fireEvent.mouseLeave(screen.getByText("trigger"));
+
+    await waitFor(
+      () => expect(screen.queryByText(/popup Content/)).toBeNull(),
+      { timeout: 120 },
+    );
+  });
+
+  test("should respect mouseEnterDelay  mouseLeaveDelay on Hover  ", async () => {
+    render(
+      <SimplePopup on="hover" mouseEnterDelay={800} mouseLeaveDelay={800} />,
+    );
+    popupContentShouldntExist();
+    fireEvent.mouseOver(screen.getByText("trigger"));
+    await waitFor(() => popupContentShouldntExist(), { timeout: 120 });
+    await waitFor(() => popupContentShouldExist(), { timeout: 1000 });
+    fireEvent.mouseLeave(screen.getByText("trigger"));
+
+    await waitFor(() => popupContentShouldExist(), { timeout: 120 });
+    await waitFor(() => popupContentShouldntExist(), { timeout: 1000 });
+  });
+});
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 5b86ab5a..0e8e39a4 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -1,5 +1,6 @@
 export { default as Btn } from "./Btn";
 export { default as Button } from "./Button";
+export { default as ButtonWithPopup } from "./ButtonWithPopup";
 export { default as CharCount } from "./CharCount";
 export { default as Checkbox } from "./Checkbox";
 export { default as ExternalLink } from "./ExternalLink";

From 052c40ffeca5f054b940b689a8c3be6eeb0dff6a Mon Sep 17 00:00:00 2001
From: Taylor Bantle <taylor@dolthub.com>
Date: Wed, 6 Mar 2024 12:28:08 -0800
Subject: [PATCH 04/10] components: Add CellDropdown

---
 packages/components/package.json              |   3 +-
 .../src/CellDropdown/index.module.css         |  39 +++++
 .../components/src/CellDropdown/index.tsx     |  61 +++++++
 .../src/__stories__/CellDropdown.stories.tsx  | 154 ++++++++++++++++++
 .../src/__tests__/CellDropdown.test.tsx       |  83 ++++++++++
 packages/components/tsconfig.json             |   6 +-
 packages/contexts/package.json                |   2 +-
 yarn.lock                                     |   5 +-
 8 files changed, 348 insertions(+), 5 deletions(-)
 create mode 100644 packages/components/src/CellDropdown/index.module.css
 create mode 100644 packages/components/src/CellDropdown/index.tsx
 create mode 100644 packages/components/src/__stories__/CellDropdown.stories.tsx
 create mode 100644 packages/components/src/__tests__/CellDropdown.test.tsx

diff --git a/packages/components/package.json b/packages/components/package.json
index 3d0645d9..fd0eba9b 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -30,13 +30,14 @@
     "yalc:push": "yarn dbuild && yalc push",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "clean": "rm -rf dist && rm -rf .rollup.cache && rm -rf types && rm -rf tsconfig.tsbuildinfo"
+    "clean": "rm -rf dist && rm -rf .rollup.cache && rm -rf types && rm -rf tsconfig.tsbuildinfo && rm -rf .eslintcache"
   },
   "peerDependencies": {
     "react": "^18",
     "react-dom": "^18"
   },
   "dependencies": {
+    "@dolthub/react-hooks": "^0.1.7",
     "@dolthub/web-utils": "^0.1.3",
     "@react-icons/all-files": "^4.1.0",
     "classnames": "^2.5.1",
diff --git a/packages/components/src/CellDropdown/index.module.css b/packages/components/src/CellDropdown/index.module.css
new file mode 100644
index 00000000..709262a5
--- /dev/null
+++ b/packages/components/src/CellDropdown/index.module.css
@@ -0,0 +1,39 @@
+.cellDropdown {
+  @apply hidden;
+
+  @screen md {
+    @apply block;
+  }
+}
+
+.cellDropdownForRow {
+  @apply relative;
+}
+
+.button {
+  @apply bg-white rounded-full;
+}
+
+.rowButton {
+  @apply bg-ld-lightgrey;
+}
+
+.icon {
+  @apply p-1 w-5 h-5 text-ld-darkgrey;
+
+  &:hover {
+    @apply text-primary;
+  }
+}
+
+.dropdown {
+  @apply absolute bg-white widget-shadow-hover z-100 rounded-b top-[1.95rem] px-3 py-1 border-b border-x border-ld-lightgrey max-w-[9rem] right-0 flex flex-col;
+}
+
+.padding {
+  @apply -right-[0.85rem];
+}
+
+.rowDropdown {
+  @apply -right-20;
+}
diff --git a/packages/components/src/CellDropdown/index.tsx b/packages/components/src/CellDropdown/index.tsx
new file mode 100644
index 00000000..636a7a63
--- /dev/null
+++ b/packages/components/src/CellDropdown/index.tsx
@@ -0,0 +1,61 @@
+import { useOnClickOutside } from "@dolthub/react-hooks";
+import { RiMenu5Line } from "@react-icons/all-files/ri/RiMenu5Line";
+import cx from "classnames";
+import React, { ReactNode, useRef } from "react";
+import Btn from "../Btn";
+import css from "./index.module.css";
+
+type Props = {
+  children: ReactNode;
+  showDropdown: boolean;
+  setShowDropdown: (s: boolean) => void;
+  buttonClassName: string;
+  padding?: boolean;
+  forRow?: boolean;
+  ["data-cy"]?: string;
+};
+
+export default function CellDropdown({
+  setShowDropdown,
+  forRow = false,
+  padding = false,
+  ...props
+}: Props) {
+  const toggle = () => setShowDropdown(!props.showDropdown);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  useOnClickOutside(dropdownRef, () => setShowDropdown(false));
+
+  return (
+    <div
+      ref={dropdownRef}
+      className={cx(css.cellDropdown, {
+        [css.cellDropdownForRow]: forRow,
+      })}
+    >
+      <Btn
+        onClick={toggle}
+        className={cx(
+          css.button,
+          { [css.rowButton]: forRow },
+          props.buttonClassName,
+        )}
+        data-cy={props["data-cy"]}
+        // data-cy={`${props.isMobile ? "mobile-" : "desktop-"}${
+        //   forRow ? "row-dropdown-button" : props.dataCySuffix
+        // }`}
+      >
+        <RiMenu5Line className={css.icon} />
+      </Btn>
+      {props.showDropdown && (
+        <div
+          className={cx(css.dropdown, {
+            [css.rowDropdown]: forRow,
+            [css.padding]: padding,
+          })}
+        >
+          {props.children}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/components/src/__stories__/CellDropdown.stories.tsx b/packages/components/src/__stories__/CellDropdown.stories.tsx
new file mode 100644
index 00000000..e7cb7700
--- /dev/null
+++ b/packages/components/src/__stories__/CellDropdown.stories.tsx
@@ -0,0 +1,154 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import cx from "classnames";
+import React from "react";
+import CellDropdown from "../CellDropdown";
+
+const meta: Meta<typeof CellDropdown> = {
+  title: "CellDropdown",
+  component: CellDropdown,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CellDropdown>;
+
+const cellClassName =
+  "align-top relative min-w-[130px] pr-10 pl-2 border-b border-ld-lightgrey  text-primary font-mono leading-8 text-sm";
+const buttonClassName = "absolute bg-white right-2 top-[0.35rem]";
+
+const Cell = (props: { children: React.ReactNode; className?: string }) => (
+  <td className={cx(cellClassName, props.className)}>{props.children}</td>
+);
+
+const HeadCell = (props: { children: React.ReactNode; className?: string }) => (
+  <th className={cx(cellClassName, props.className)}>{props.children}</th>
+);
+
+const CellWrapper = ({ children }: { children: React.ReactNode }) => (
+  <table>
+    <thead>
+      <tr>
+        <HeadCell>Header 1</HeadCell>
+        <HeadCell>Header 2</HeadCell>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <Cell className={"bg-ld-lightgrey"}>
+          <span>Cell 1</span>
+          {children}
+        </Cell>
+        <Cell>Cell 2</Cell>
+      </tr>
+      <tr>
+        <Cell>Cell 1</Cell>
+        <Cell>Cell 2</Cell>
+      </tr>
+    </tbody>
+  </table>
+);
+
+const HeadCellWrapper = ({ children }: { children: React.ReactNode }) => (
+  <table>
+    <thead>
+      <tr>
+        <HeadCell className={"bg-ld-lightgrey"}>Header 1{children}</HeadCell>
+        <HeadCell>Header 2</HeadCell>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <Cell>Cell 1</Cell>
+        <Cell>Cell 2</Cell>
+      </tr>
+      <tr>
+        <Cell>Cell 1</Cell>
+        <Cell>Cell 2</Cell>
+      </tr>
+    </tbody>
+  </table>
+);
+
+const RowWrapper = ({ children }: { children: React.ReactNode }) => (
+  <table>
+    <thead>
+      <tr>
+        <th />
+        <HeadCell>Header 1</HeadCell>
+        <HeadCell>Header 2</HeadCell>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>{children}</td>
+        <Cell>Cell 1</Cell>
+        <Cell>Cell 2</Cell>
+      </tr>
+      <tr>
+        <td />
+        <Cell>Cell 1</Cell>
+        <Cell>Cell 2</Cell>
+      </tr>
+    </tbody>
+  </table>
+);
+
+const children = (
+  <ul>
+    <li>First item</li>
+    <li>Second item</li>
+  </ul>
+);
+
+export const NoShow: Story = {
+  args: {
+    children,
+    showDropdown: false,
+    setShowDropdown: () => {},
+    buttonClassName,
+  },
+  decorators: [story => <CellWrapper>{story()}</CellWrapper>],
+};
+
+export const ShowCell: Story = {
+  args: {
+    children,
+    showDropdown: true,
+    setShowDropdown: () => {},
+    buttonClassName,
+  },
+  decorators: [story => <CellWrapper>{story()}</CellWrapper>],
+};
+
+export const ShowHeadCell: Story = {
+  args: {
+    children,
+    showDropdown: true,
+    setShowDropdown: () => {},
+    buttonClassName,
+  },
+  decorators: [story => <HeadCellWrapper>{story()}</HeadCellWrapper>],
+};
+
+export const ShowPadding: Story = {
+  args: {
+    children,
+    showDropdown: true,
+    setShowDropdown: () => {},
+    padding: true,
+    buttonClassName,
+  },
+  decorators: [story => <CellWrapper>{story()}</CellWrapper>],
+};
+
+export const ShowRow: Story = {
+  args: {
+    children,
+    showDropdown: true,
+    setShowDropdown: () => {},
+    forRow: true,
+    buttonClassName: "text-ld-darkergrey mx-2 text-xl flex",
+  },
+  decorators: [story => <RowWrapper>{story()}</RowWrapper>],
+};
diff --git a/packages/components/src/__tests__/CellDropdown.test.tsx b/packages/components/src/__tests__/CellDropdown.test.tsx
new file mode 100644
index 00000000..7fb7f77b
--- /dev/null
+++ b/packages/components/src/__tests__/CellDropdown.test.tsx
@@ -0,0 +1,83 @@
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import CellDropdown from "../CellDropdown";
+
+describe("test CellDropdown", () => {
+  it("renders without crashing", () => {
+    render(
+      <CellDropdown
+        showDropdown={false}
+        setShowDropdown={() => {}}
+        buttonClassName=""
+      >
+        <div>Dropdown Content</div>
+      </CellDropdown>,
+    );
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+
+  // it("toggles dropdown visibility on button click", async () => {
+  //   const setShowDropdown = jest.fn();
+  //   render(
+  //     <CellDropdown
+  //       showDropdown={false}
+  //       setShowDropdown={setShowDropdown}
+  //       buttonClassName=""
+  //     >
+  //       <div>Dropdown Content</div>
+  //     </CellDropdown>,
+  //   );
+
+  //   const button = screen.getByRole("button");
+  //   await userEvent.click(button);
+  //   expect(setShowDropdown).toHaveBeenCalledWith(true);
+  // });
+
+  // it("closes dropdown when clicking outside", async () => {
+  //   const setShowDropdown = jest.fn();
+  //   render(
+  //     <div>
+  //       <CellDropdown
+  //         showDropdown={true}
+  //         setShowDropdown={setShowDropdown}
+  //         buttonClassName=""
+  //       >
+  //         <div>Dropdown Content</div>
+  //       </CellDropdown>
+  //       <div data-testid="outside">Outside Area</div>
+  //     </div>,
+  //   );
+
+  //   const outsideArea = screen.getByTestId("outside");
+  //   await userEvent.click(outsideArea);
+  //   expect(setShowDropdown).toHaveBeenCalledWith(false);
+  // });
+
+  // it("applies correct class based on `forRow` prop", () => {
+  //   const { rerender } = render(
+  //     <CellDropdown
+  //       showDropdown={false}
+  //       setShowDropdown={() => {}}
+  //       buttonClassName=""
+  //       forRow={false}
+  //     >
+  //       <div>Dropdown Content</div>
+  //     </CellDropdown>,
+  //   );
+
+  //   expect(screen.getByRole("button")).not.toHaveClass("rowButton"); // Adapt class names as necessary
+
+  //   rerender(
+  //     <CellDropdown
+  //       showDropdown={false}
+  //       setShowDropdown={() => {}}
+  //       buttonClassName=""
+  //       forRow={true}
+  //     >
+  //       <div>Dropdown Content</div>
+  //     </CellDropdown>,
+  //   );
+
+  //   expect(screen.getByRole("button")).toHaveClass("rowButton"); // Adapt class names as necessary
+  // });
+});
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index 12ba1c2b..5c1b4f6c 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -20,5 +20,9 @@
     "composite": true,
     "noImplicitAny": true,
     "types": ["node", "jsdom", "@testing-library/jest-dom"]
-  }
+  },
+  "references": [
+    { "path": "../hooks"},
+    { "path": "../utils" }
+  ]
 }
\ No newline at end of file
diff --git a/packages/contexts/package.json b/packages/contexts/package.json
index 73a77e2e..5e92b0df 100644
--- a/packages/contexts/package.json
+++ b/packages/contexts/package.json
@@ -34,7 +34,7 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@dolthub/react-hooks": "^0.1.6"
+    "@dolthub/react-hooks": "^0.1.7"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
diff --git a/yarn.lock b/yarn.lock
index 7ba578f1..42cd9582 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2231,6 +2231,7 @@ __metadata:
     "@babel/preset-env": "npm:^7.24.0"
     "@babel/preset-react": "npm:^7.23.3"
     "@babel/preset-typescript": "npm:^7.23.3"
+    "@dolthub/react-hooks": "npm:^0.1.7"
     "@dolthub/web-utils": "npm:^0.1.3"
     "@react-icons/all-files": "npm:^4.1.0"
     "@rollup/plugin-commonjs": "npm:^25.0.7"
@@ -2307,7 +2308,7 @@ __metadata:
     "@babel/preset-env": "npm:^7.24.0"
     "@babel/preset-react": "npm:^7.23.3"
     "@babel/preset-typescript": "npm:^7.23.3"
-    "@dolthub/react-hooks": "npm:^0.1.6"
+    "@dolthub/react-hooks": "npm:^0.1.7"
     "@rollup/plugin-commonjs": "npm:^25.0.7"
     "@rollup/plugin-node-resolve": "npm:^15.2.3"
     "@rollup/plugin-typescript": "npm:^11.1.5"
@@ -2343,7 +2344,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@dolthub/react-hooks@npm:^0.1.6, @dolthub/react-hooks@workspace:packages/hooks":
+"@dolthub/react-hooks@npm:^0.1.7, @dolthub/react-hooks@workspace:packages/hooks":
   version: 0.0.0-use.local
   resolution: "@dolthub/react-hooks@workspace:packages/hooks"
   dependencies:

From 47d91cdf3601b1ce0d96a4a4d05c6da6a1b0dfde Mon Sep 17 00:00:00 2001
From: Taylor Bantle <taylor@dolthub.com>
Date: Wed, 6 Mar 2024 12:40:52 -0800
Subject: [PATCH 05/10] components: Fixes

---
 package.json                                  |   2 +-
 .../src/__tests__/CellDropdown.test.tsx       | 115 +++++++++---------
 2 files changed, 59 insertions(+), 58 deletions(-)

diff --git a/package.json b/package.json
index 0a6346bb..7e0c02a5 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
     "packages/*"
   ],
   "scripts": {
-    "ci": "yarn prettier && yarn lint && yarn sbuild && yarn dbuild && yarn test",
+    "ci": "yarn prettier && yarn lint && yarn dbuild && yarn sbuild && yarn test",
     "clean": "rimraf node_modules -g 'packages/*/.eslintcache' 'packages/*/*.tsbuildinfo' 'packages/*/dist' 'packages/*/.rollup.cache' 'packages/*/types' 'packages/*/coverage'",
     "dbuild": "npm-run-all 'dbuild:*'",
     "dbuild:utils": "yarn workspace @dolthub/web-utils dbuild",
diff --git a/packages/components/src/__tests__/CellDropdown.test.tsx b/packages/components/src/__tests__/CellDropdown.test.tsx
index 7fb7f77b..8bb687f5 100644
--- a/packages/components/src/__tests__/CellDropdown.test.tsx
+++ b/packages/components/src/__tests__/CellDropdown.test.tsx
@@ -1,6 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import React from "react";
 import CellDropdown from "../CellDropdown";
+import { setup } from "./testUtils.test";
 
 describe("test CellDropdown", () => {
   it("renders without crashing", () => {
@@ -16,68 +17,68 @@ describe("test CellDropdown", () => {
     expect(screen.getByRole("button")).toBeInTheDocument();
   });
 
-  // it("toggles dropdown visibility on button click", async () => {
-  //   const setShowDropdown = jest.fn();
-  //   render(
-  //     <CellDropdown
-  //       showDropdown={false}
-  //       setShowDropdown={setShowDropdown}
-  //       buttonClassName=""
-  //     >
-  //       <div>Dropdown Content</div>
-  //     </CellDropdown>,
-  //   );
+  it("toggles dropdown visibility on button click", async () => {
+    const setShowDropdown = jest.fn();
+    const { user } = setup(
+      <CellDropdown
+        showDropdown={false}
+        setShowDropdown={setShowDropdown}
+        buttonClassName=""
+      >
+        <div>Dropdown Content</div>
+      </CellDropdown>,
+    );
 
-  //   const button = screen.getByRole("button");
-  //   await userEvent.click(button);
-  //   expect(setShowDropdown).toHaveBeenCalledWith(true);
-  // });
+    const button = screen.getByRole("button");
+    await user.click(button);
+    expect(setShowDropdown).toHaveBeenCalledWith(true);
+  });
 
-  // it("closes dropdown when clicking outside", async () => {
-  //   const setShowDropdown = jest.fn();
-  //   render(
-  //     <div>
-  //       <CellDropdown
-  //         showDropdown={true}
-  //         setShowDropdown={setShowDropdown}
-  //         buttonClassName=""
-  //       >
-  //         <div>Dropdown Content</div>
-  //       </CellDropdown>
-  //       <div data-testid="outside">Outside Area</div>
-  //     </div>,
-  //   );
+  it("closes dropdown when clicking outside", async () => {
+    const setShowDropdown = jest.fn();
+    const { user } = setup(
+      <div>
+        <CellDropdown
+          showDropdown={true}
+          setShowDropdown={setShowDropdown}
+          buttonClassName=""
+        >
+          <div>Dropdown Content</div>
+        </CellDropdown>
+        <div data-testid="outside">Outside Area</div>
+      </div>,
+    );
 
-  //   const outsideArea = screen.getByTestId("outside");
-  //   await userEvent.click(outsideArea);
-  //   expect(setShowDropdown).toHaveBeenCalledWith(false);
-  // });
+    const outsideArea = screen.getByTestId("outside");
+    await user.click(outsideArea);
+    expect(setShowDropdown).toHaveBeenCalledWith(false);
+  });
 
-  // it("applies correct class based on `forRow` prop", () => {
-  //   const { rerender } = render(
-  //     <CellDropdown
-  //       showDropdown={false}
-  //       setShowDropdown={() => {}}
-  //       buttonClassName=""
-  //       forRow={false}
-  //     >
-  //       <div>Dropdown Content</div>
-  //     </CellDropdown>,
-  //   );
+  it("applies correct class based on `forRow` prop", () => {
+    const { rerender } = render(
+      <CellDropdown
+        showDropdown={false}
+        setShowDropdown={() => {}}
+        buttonClassName=""
+        forRow={false}
+      >
+        <div>Dropdown Content</div>
+      </CellDropdown>,
+    );
 
-  //   expect(screen.getByRole("button")).not.toHaveClass("rowButton"); // Adapt class names as necessary
+    expect(screen.getByRole("button")).not.toHaveClass(/rowButton/);
 
-  //   rerender(
-  //     <CellDropdown
-  //       showDropdown={false}
-  //       setShowDropdown={() => {}}
-  //       buttonClassName=""
-  //       forRow={true}
-  //     >
-  //       <div>Dropdown Content</div>
-  //     </CellDropdown>,
-  //   );
+    rerender(
+      <CellDropdown
+        showDropdown={false}
+        setShowDropdown={() => {}}
+        buttonClassName=""
+        forRow
+      >
+        <div>Dropdown Content</div>
+      </CellDropdown>,
+    );
 
-  //   expect(screen.getByRole("button")).toHaveClass("rowButton"); // Adapt class names as necessary
-  // });
+    expect(screen.getByRole("button")).toHaveClass(/rowButton/);
+  });
 });

From 94f0c942063497fa0625a6c5771cb6da003fc33f Mon Sep 17 00:00:00 2001
From: Taylor Bantle <taylor@dolthub.com>
Date: Wed, 6 Mar 2024 13:12:09 -0800
Subject: [PATCH 06/10] components: Improve test coverage

---
 .../components/src/ButtonWithPopup/index.tsx  |  2 +-
 .../components/src/__tests__/Button.test.tsx  |  9 ++++++
 .../src/__tests__/ButtonWithPopup.test.tsx    | 21 +++++++++++---
 .../src/__tests__/Checkbox.test.tsx           |  7 ++++-
 .../src/__tests__/FormInput.test.tsx          | 29 +++++++++++++++++--
 .../components/src/__tests__/Radio.test.tsx   |  9 +++++-
 .../src/__tests__/Textarea.test.tsx           | 26 +++++++++++++++--
 7 files changed, 91 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/ButtonWithPopup/index.tsx b/packages/components/src/ButtonWithPopup/index.tsx
index 43ba786f..c17eee65 100644
--- a/packages/components/src/ButtonWithPopup/index.tsx
+++ b/packages/components/src/ButtonWithPopup/index.tsx
@@ -5,7 +5,7 @@ import React, { ReactNode } from "react";
 import Popup, { PopupProps } from "../Popup";
 import css from "./index.module.css";
 
-type Props = Partial<PopupProps> & {
+export type Props = Partial<PopupProps> & {
   children: ReactNode;
   isOpen?: boolean;
   setIsOpen?: (o: boolean) => void;
diff --git a/packages/components/src/__tests__/Button.test.tsx b/packages/components/src/__tests__/Button.test.tsx
index b19b537c..f3538677 100644
--- a/packages/components/src/__tests__/Button.test.tsx
+++ b/packages/components/src/__tests__/Button.test.tsx
@@ -116,6 +116,15 @@ describe("test Button", () => {
     expect(button).toHaveClass(/underlined/);
   });
 
+  it("renders an outlined button", () => {
+    render(<Button.Outlined>Button Name</Button.Outlined>);
+
+    const button = screen.getByText("Button Name");
+    expect(button).toHaveTextContent("Button Name");
+    expect(button).toHaveAttribute("type", "button");
+    expect(button).toHaveClass(/outlined/);
+  });
+
   it("renders a Button Group", () => {
     render(
       <Button.Group className="class-name">
diff --git a/packages/components/src/__tests__/ButtonWithPopup.test.tsx b/packages/components/src/__tests__/ButtonWithPopup.test.tsx
index 5f6001ac..18bba0ac 100644
--- a/packages/components/src/__tests__/ButtonWithPopup.test.tsx
+++ b/packages/components/src/__tests__/ButtonWithPopup.test.tsx
@@ -1,11 +1,10 @@
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import React from "react";
-import ButtonWithPopup from "../ButtonWithPopup";
-import { PopupProps } from "../Popup";
+import ButtonWithPopup, { Props } from "../ButtonWithPopup";
 
 // Taken from https://github.com/yjose/reactjs-popup/blob/master/__test__/index.test.tsx
 
-const SimplePopup = ({ ...props }: Partial<PopupProps>) => (
+const SimplePopup = ({ ...props }: Partial<Props>) => (
   <ButtonWithPopup triggerText="trigger" {...props}>
     <span> popup Content </span>
   </ButtonWithPopup>
@@ -17,7 +16,7 @@ const popupContentShouldExist = () => {
   expect(screen.getByText(/popup Content/)).toBeInTheDocument();
 };
 
-describe("Popup Component Render ", () => {
+describe("test ButtonWithPopup ", () => {
   test("should render trigger correctly", () => {
     render(<SimplePopup />);
     expect(screen.getByText(/trigger/)).toBeInTheDocument();
@@ -29,6 +28,20 @@ describe("Popup Component Render ", () => {
     expect(screen.getByRole("tooltip")).toBeInTheDocument();
   });
 
+  test("should use open props to open", async () => {
+    const setIsOpen = jest.fn();
+    render(<SimplePopup isOpen={false} setIsOpen={setIsOpen} />);
+    fireEvent.click(screen.getByText("trigger"));
+    await waitFor(() => expect(setIsOpen).toHaveBeenCalledWith(true));
+  });
+
+  test("should use open props to close", async () => {
+    const setIsOpen = jest.fn();
+    render(<SimplePopup isOpen setIsOpen={setIsOpen} />);
+    fireEvent.click(screen.getByText("trigger"));
+    await waitFor(() => expect(setIsOpen).toHaveBeenCalledWith(false));
+  });
+
   test("no Arrow for modal", () => {
     render(<SimplePopup modal />);
     fireEvent.click(screen.getByText("trigger"));
diff --git a/packages/components/src/__tests__/Checkbox.test.tsx b/packages/components/src/__tests__/Checkbox.test.tsx
index c0e2e131..50a8bb2c 100644
--- a/packages/components/src/__tests__/Checkbox.test.tsx
+++ b/packages/components/src/__tests__/Checkbox.test.tsx
@@ -7,7 +7,7 @@ describe("test Checkbox", () => {
   const mocks = [
     { name: "one", label: "one-label" },
     { name: "two", label: "two-label" },
-    { name: "three", label: "three-label" },
+    { name: "three", label: "three-label", description: "description" },
   ];
 
   mocks.forEach((mock, ind) => {
@@ -23,6 +23,7 @@ describe("test Checkbox", () => {
           checked={checked}
           className="classname"
           label={mock.label}
+          description={mock.description}
         />,
       );
 
@@ -36,6 +37,10 @@ describe("test Checkbox", () => {
         expect(input).not.toBeChecked();
       }
 
+      if (mock.description) {
+        expect(screen.getByText(mock.description)).toBeVisible();
+      }
+
       await user.click(screen.getByLabelText(mock.label));
       expect(onChangeValue).toHaveBeenCalled();
     });
diff --git a/packages/components/src/__tests__/FormInput.test.tsx b/packages/components/src/__tests__/FormInput.test.tsx
index 1c81817d..200be40d 100644
--- a/packages/components/src/__tests__/FormInput.test.tsx
+++ b/packages/components/src/__tests__/FormInput.test.tsx
@@ -29,20 +29,43 @@ describe("test FormInput", () => {
     expect(input).toHaveValue("new name");
   });
 
-  it("renders form input with value", () => {
-    render(
+  it("renders form input with onChangeString", async () => {
+    const onChangeString = jest.fn();
+    const { user } = setup(
       <FormInput
         label="Name"
         className="class-name"
         placeholder="Placeholder text"
+        onChangeString={onChangeString}
+      />,
+    );
+
+    const input = screen.getByPlaceholderText("Placeholder text");
+    expect(input).toBeVisible();
+    expect(input).toHaveAttribute("type", "text");
+
+    await user.type(input, "new name");
+    expect(onChangeString).toHaveBeenCalledWith("new name");
+    expect(input).toHaveValue("new name");
+  });
+
+  it("renders form input with value and description", () => {
+    render(
+      <FormInput
+        label="Name"
+        className="class-name"
         value="email@email.com"
         type="email"
+        description="description"
       />,
     );
 
-    const input = screen.getByPlaceholderText("Placeholder text");
+    const input = screen.getByRole("textbox");
     expect(input).toBeVisible();
     expect(input).toHaveAttribute("type", "email");
     expect(input).toHaveValue("email@email.com");
+    expect(input).toHaveAttribute("placeholder", "");
+
+    expect(screen.getByText("description")).toBeVisible();
   });
 });
diff --git a/packages/components/src/__tests__/Radio.test.tsx b/packages/components/src/__tests__/Radio.test.tsx
index b76c7f9f..e7116253 100644
--- a/packages/components/src/__tests__/Radio.test.tsx
+++ b/packages/components/src/__tests__/Radio.test.tsx
@@ -7,7 +7,7 @@ describe("test Radio", () => {
   const mocks = [
     { name: "one", label: "one-label" },
     { name: "two", label: "two-label" },
-    { name: "three", label: "three-label" },
+    { name: "three", label: "three-label", description: "description" },
   ];
 
   mocks.forEach((mock, ind) => {
@@ -23,10 +23,17 @@ describe("test Radio", () => {
           checked={checked}
           className="classname"
           disabled={disabled}
+          description={mock.description}
         />,
       );
+
       const content = screen.getByLabelText(mock.label);
       expect(content).toBeVisible();
+
+      if (mock.description) {
+        expect(screen.getByText(mock.description)).toBeVisible();
+      }
+
       if (!disabled) {
         const input = screen.getByRole("radio");
         if (checked) {
diff --git a/packages/components/src/__tests__/Textarea.test.tsx b/packages/components/src/__tests__/Textarea.test.tsx
index 5e0ee46c..fcb82537 100644
--- a/packages/components/src/__tests__/Textarea.test.tsx
+++ b/packages/components/src/__tests__/Textarea.test.tsx
@@ -29,20 +29,42 @@ describe("test Textarea", () => {
     expect(input).toHaveValue("new name");
   });
 
+  it("renders textarea with onChangeString", async () => {
+    const onChangeString = jest.fn();
+    const { user } = setup(
+      <Textarea
+        rows={4}
+        label="Name"
+        className="class-name"
+        placeholder="Placeholder text"
+        onChangeString={onChangeString}
+      />,
+    );
+
+    const input = screen.getByPlaceholderText("Placeholder text");
+    expect(input).toBeVisible();
+
+    await user.type(input, "new name");
+    expect(onChangeString).toHaveBeenCalledWith("new name");
+    expect(input).toHaveValue("new name");
+  });
+
   it("renders textarea with value", () => {
     render(
       <Textarea
         rows={4}
         label="Name"
         className="class-name"
-        placeholder="Placeholder text"
         value="This is my text"
         onChange={jest.fn()}
+        description="description"
       />,
     );
 
-    const input = screen.getByPlaceholderText("Placeholder text");
+    const input = screen.getByRole("textbox");
     expect(input).toBeVisible();
     expect(input).toHaveValue("This is my text");
+    expect(input).toHaveAttribute("placeholder", "");
+    expect(screen.getByText("description")).toBeVisible();
   });
 });

From b11a4ee832fbcade47de4b4c2ad7ca556ce5ea14 Mon Sep 17 00:00:00 2001
From: Taylor Bantle <taylor@dolthub.com>
Date: Wed, 6 Mar 2024 14:35:19 -0800
Subject: [PATCH 07/10] components: CellDropdown fixes

---
 .../src/CellDropdown/index.module.css         | 32 +++++++++----------
 .../components/src/CellDropdown/index.tsx     | 32 ++++++++-----------
 .../src/__stories__/CellDropdown.stories.tsx  | 13 +-------
 packages/components/src/index.ts              |  1 +
 4 files changed, 31 insertions(+), 47 deletions(-)

diff --git a/packages/components/src/CellDropdown/index.module.css b/packages/components/src/CellDropdown/index.module.css
index 709262a5..7991218a 100644
--- a/packages/components/src/CellDropdown/index.module.css
+++ b/packages/components/src/CellDropdown/index.module.css
@@ -6,34 +6,34 @@
   }
 }
 
-.cellDropdownForRow {
-  @apply relative;
-}
-
 .button {
   @apply bg-white rounded-full;
+
+  &:focus {
+    @apply outline-none widget-shadow-lightblue;
+  }
+
+  svg {
+    @apply p-1 w-5 h-5 text-ld-darkgrey;
+
+    &:hover {
+      @apply text-primary;
+    }
+  }
 }
 
 .rowButton {
   @apply bg-ld-lightgrey;
-}
-
-.icon {
-  @apply p-1 w-5 h-5 text-ld-darkgrey;
 
-  &:hover {
-    @apply text-primary;
+  svg {
+    @apply text-ld-darkergrey;
   }
 }
 
 .dropdown {
-  @apply absolute bg-white widget-shadow-hover z-100 rounded-b top-[1.95rem] px-3 py-1 border-b border-x border-ld-lightgrey max-w-[9rem] right-0 flex flex-col;
-}
-
-.padding {
-  @apply -right-[0.85rem];
+  @apply absolute bg-white widget-shadow-hover z-100 rounded-b top-8 px-3 py-1 border-b border-x border-ld-lightgrey max-w-36 right-0 flex flex-col;
 }
 
 .rowDropdown {
-  @apply -right-20;
+  @apply -right-20 top-9;
 }
diff --git a/packages/components/src/CellDropdown/index.tsx b/packages/components/src/CellDropdown/index.tsx
index 636a7a63..21ea3dce 100644
--- a/packages/components/src/CellDropdown/index.tsx
+++ b/packages/components/src/CellDropdown/index.tsx
@@ -2,7 +2,6 @@ import { useOnClickOutside } from "@dolthub/react-hooks";
 import { RiMenu5Line } from "@react-icons/all-files/ri/RiMenu5Line";
 import cx from "classnames";
 import React, { ReactNode, useRef } from "react";
-import Btn from "../Btn";
 import css from "./index.module.css";
 
 type Props = {
@@ -10,7 +9,7 @@ type Props = {
   showDropdown: boolean;
   setShowDropdown: (s: boolean) => void;
   buttonClassName: string;
-  padding?: boolean;
+  dropdownClassName?: string;
   forRow?: boolean;
   ["data-cy"]?: string;
 };
@@ -18,7 +17,6 @@ type Props = {
 export default function CellDropdown({
   setShowDropdown,
   forRow = false,
-  padding = false,
   ...props
 }: Props) {
   const toggle = () => setShowDropdown(!props.showDropdown);
@@ -26,13 +24,9 @@ export default function CellDropdown({
   useOnClickOutside(dropdownRef, () => setShowDropdown(false));
 
   return (
-    <div
-      ref={dropdownRef}
-      className={cx(css.cellDropdown, {
-        [css.cellDropdownForRow]: forRow,
-      })}
-    >
-      <Btn
+    <div ref={dropdownRef} className={css.cellDropdown}>
+      <button
+        type="button"
         onClick={toggle}
         className={cx(
           css.button,
@@ -40,18 +34,18 @@ export default function CellDropdown({
           props.buttonClassName,
         )}
         data-cy={props["data-cy"]}
-        // data-cy={`${props.isMobile ? "mobile-" : "desktop-"}${
-        //   forRow ? "row-dropdown-button" : props.dataCySuffix
-        // }`}
       >
-        <RiMenu5Line className={css.icon} />
-      </Btn>
+        <RiMenu5Line />
+      </button>
       {props.showDropdown && (
         <div
-          className={cx(css.dropdown, {
-            [css.rowDropdown]: forRow,
-            [css.padding]: padding,
-          })}
+          className={cx(
+            css.dropdown,
+            {
+              [css.rowDropdown]: forRow,
+            },
+            props.dropdownClassName,
+          )}
         >
           {props.children}
         </div>
diff --git a/packages/components/src/__stories__/CellDropdown.stories.tsx b/packages/components/src/__stories__/CellDropdown.stories.tsx
index e7cb7700..b88bc20a 100644
--- a/packages/components/src/__stories__/CellDropdown.stories.tsx
+++ b/packages/components/src/__stories__/CellDropdown.stories.tsx
@@ -81,7 +81,7 @@ const RowWrapper = ({ children }: { children: React.ReactNode }) => (
     </thead>
     <tbody>
       <tr>
-        <td>{children}</td>
+        <td className="relative">{children}</td>
         <Cell>Cell 1</Cell>
         <Cell>Cell 2</Cell>
       </tr>
@@ -131,17 +131,6 @@ export const ShowHeadCell: Story = {
   decorators: [story => <HeadCellWrapper>{story()}</HeadCellWrapper>],
 };
 
-export const ShowPadding: Story = {
-  args: {
-    children,
-    showDropdown: true,
-    setShowDropdown: () => {},
-    padding: true,
-    buttonClassName,
-  },
-  decorators: [story => <CellWrapper>{story()}</CellWrapper>],
-};
-
 export const ShowRow: Story = {
   args: {
     children,
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 0e8e39a4..86be24f1 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -1,6 +1,7 @@
 export { default as Btn } from "./Btn";
 export { default as Button } from "./Button";
 export { default as ButtonWithPopup } from "./ButtonWithPopup";
+export { default as CellDropdown } from "./CellDropdown";
 export { default as CharCount } from "./CharCount";
 export { default as Checkbox } from "./Checkbox";
 export { default as ExternalLink } from "./ExternalLink";

From 072ad9456023cf0dc357a349f4abcb500c8ffb7c Mon Sep 17 00:00:00 2001
From: Taylor Bantle <taylor@dolthub.com>
Date: Wed, 6 Mar 2024 15:49:28 -0800
Subject: [PATCH 08/10] components: Add CodeBlock

---
 packages/components/package.json              |  4 +-
 .../components/src/CodeBlock/index.module.css | 51 ++++++++++++
 packages/components/src/CodeBlock/index.tsx   | 77 +++++++++++++++++++
 packages/components/src/SmallLoader/index.tsx | 36 ++++-----
 .../src/__stories__/CodeBlock.stories.tsx     | 64 +++++++++++++++
 .../CodeBlockWithCopyButton.stories.tsx       | 68 ++++++++++++++++
 .../src/__stories__/SmallLoader.stories.tsx   | 53 +++++++++++++
 .../SmallLoaderWithText.stories.tsx           | 58 ++++++++++++++
 .../src/__tests__/CodeBlock.test.tsx          | 20 +++++
 packages/components/src/index.ts              |  1 +
 yarn.lock                                     | 39 ++++++++++
 11 files changed, 451 insertions(+), 20 deletions(-)
 create mode 100644 packages/components/src/CodeBlock/index.module.css
 create mode 100644 packages/components/src/CodeBlock/index.tsx
 create mode 100644 packages/components/src/__stories__/CodeBlock.stories.tsx
 create mode 100644 packages/components/src/__stories__/CodeBlockWithCopyButton.stories.tsx
 create mode 100644 packages/components/src/__stories__/SmallLoader.stories.tsx
 create mode 100644 packages/components/src/__stories__/SmallLoaderWithText.stories.tsx
 create mode 100644 packages/components/src/__tests__/CodeBlock.test.tsx

diff --git a/packages/components/package.json b/packages/components/package.json
index fd0eba9b..9cfcad5c 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -2,7 +2,7 @@
   "name": "@dolthub/react-components",
   "author": "DoltHub",
   "description": "A collection of React components for common tasks",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
@@ -43,6 +43,7 @@
     "classnames": "^2.5.1",
     "deepmerge": "^4.3.1",
     "github-markdown-css": "^5.5.1",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-loader": "^2.4.7",
     "react-markdown": "^9.0.1",
     "reactjs-popup": "^2.0.6",
@@ -76,6 +77,7 @@
     "@types/jest": "^29.5.11",
     "@types/prop-types": "^15",
     "@types/react": "^18",
+    "@types/react-copy-to-clipboard": "^5",
     "@types/react-dom": "^18",
     "@types/react-loader": "^2",
     "@types/rollup-plugin-peer-deps-external": "^2",
diff --git a/packages/components/src/CodeBlock/index.module.css b/packages/components/src/CodeBlock/index.module.css
new file mode 100644
index 00000000..f51f617b
--- /dev/null
+++ b/packages/components/src/CodeBlock/index.module.css
@@ -0,0 +1,51 @@
+.code {
+  @apply text-left p-6 mb-4 rounded-lg bg-primary;
+
+  code {
+    @apply text-white text-sm leading-loose;
+  }
+}
+
+.dark {
+  @apply bg-ld-darkerblue;
+}
+
+.disabled {
+  @apply bg-ld-darkgrey;
+}
+
+.clipboard {
+  @apply p-2 mx-2 rounded h-10 min-w-[37px] text-white;
+
+  svg {
+    @apply ml-1;
+  }
+
+  &:hover {
+    @apply bg-ld-darkgrey;
+  }
+}
+
+.withCopy {
+  @apply py-1 pr-0 mt-3;
+
+  > div {
+    @apply flex justify-between items-center;
+  }
+
+  pre {
+    @apply overflow-x-auto mt-[0.4rem] mb-[0.3rem];
+    /* Hide scrollbar for IE, Edge, and Firefox */
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  pre::-webkit-scrollbar {
+    @apply hidden;
+  }
+}
+
+.smallCopy {
+  @apply py-0 pl-4;
+}
diff --git a/packages/components/src/CodeBlock/index.tsx b/packages/components/src/CodeBlock/index.tsx
new file mode 100644
index 00000000..602f639b
--- /dev/null
+++ b/packages/components/src/CodeBlock/index.tsx
@@ -0,0 +1,77 @@
+import { useDelay } from "@dolthub/react-hooks";
+import { FaRegClone } from "@react-icons/all-files/fa/FaRegClone";
+import cx from "classnames";
+import React, { ReactNode } from "react";
+import CopyToClipboard from "react-copy-to-clipboard";
+import Btn from "../Btn";
+import css from "./index.module.css";
+
+type Props = {
+  children: ReactNode;
+  className?: string;
+  disabled?: boolean;
+  dark?: boolean;
+};
+
+const CodeBlock = ({
+  children,
+  className,
+  disabled = false,
+  dark = false,
+}: Props) => (
+  <div
+    className={cx(
+      css.code,
+      { [css.dark]: dark, [css.disabled]: disabled },
+      className,
+    )}
+  >
+    {children}
+  </div>
+);
+
+type CopyProps = {
+  textToCopy: string;
+  children?: ReactNode;
+  className?: string;
+  ["data-cy"]?: string;
+  disabled?: boolean;
+  small?: boolean;
+  dark?: boolean;
+};
+
+const WithCopyButton = (props: CopyProps) => {
+  const copySuccess = useDelay();
+  return (
+    <CodeBlock
+      disabled={props.disabled}
+      dark={props.dark}
+      className={cx(
+        css.withCopy,
+        { [css.smallCopy]: props.small },
+        props.className,
+      )}
+    >
+      <div data-cy={props["data-cy"]}>
+        <pre>
+          <code>
+            {copySuccess.active
+              ? "Copied to clipboard"
+              : props.children ?? props.textToCopy}
+          </code>
+        </pre>
+        {!props.disabled && (
+          <CopyToClipboard text={props.textToCopy} onCopy={copySuccess.start}>
+            <Btn className={css.clipboard}>
+              <FaRegClone />
+            </Btn>
+          </CopyToClipboard>
+        )}
+      </div>
+    </CodeBlock>
+  );
+};
+
+CodeBlock.WithCopyButton = WithCopyButton;
+
+export default CodeBlock;
diff --git a/packages/components/src/SmallLoader/index.tsx b/packages/components/src/SmallLoader/index.tsx
index a4b80d05..610928da 100644
--- a/packages/components/src/SmallLoader/index.tsx
+++ b/packages/components/src/SmallLoader/index.tsx
@@ -32,30 +32,28 @@ type Props = {
   children?: ReactNode;
 };
 
-export default function SmallLoader(props: Props) {
-  return (
-    <div className={props.className}>
-      <ReactLoader
-        {...props}
-        // uses default options, but overrides fields provided as props
-        options={{ ...smallLoaderDefaultOptions, ...props.options }}
-      />
-    </div>
-  );
-}
+const SmallLoader = (props: Props) => (
+  <div className={props.className}>
+    <ReactLoader
+      {...props}
+      // uses default options, but overrides fields provided as props
+      options={{ ...smallLoaderDefaultOptions, ...props.options }}
+    />
+  </div>
+);
 
 type WithTextProps = {
   text: string;
   outerClassName?: string;
 } & Props;
 
-function WithText(props: WithTextProps) {
-  return (
-    <div className={cx(css.loading, props.outerClassName)}>
-      <SmallLoader {...props} />
-      {!props.loaded && <span>{props.text}</span>}
-    </div>
-  );
-}
+const WithText = (props: WithTextProps) => (
+  <div className={cx(css.loading, props.outerClassName)}>
+    <SmallLoader {...props} />
+    {!props.loaded && <span>{props.text}</span>}
+  </div>
+);
 
 SmallLoader.WithText = WithText;
+
+export default SmallLoader;
diff --git a/packages/components/src/__stories__/CodeBlock.stories.tsx b/packages/components/src/__stories__/CodeBlock.stories.tsx
new file mode 100644
index 00000000..df7e2926
--- /dev/null
+++ b/packages/components/src/__stories__/CodeBlock.stories.tsx
@@ -0,0 +1,64 @@
+import { nTimesWithIndex } from "@dolthub/web-utils";
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import CodeBlock from "../CodeBlock";
+
+const meta: Meta<typeof CodeBlock> = {
+  title: "CodeBlock",
+  component: CodeBlock,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CodeBlock>;
+
+export const Default: Story = {
+  args: {
+    children: <code>const a = 1 + b;</code>,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    children: <code>const a = 1 + b;</code>,
+    disabled: true,
+  },
+};
+
+export const Dark: Story = {
+  args: {
+    children: <code>const a = 1 + b;</code>,
+    dark: true,
+  },
+};
+
+export const DisabledDark: Story = {
+  args: {
+    children: <code>const a = 1 + b;</code>,
+    disabled: true,
+    dark: true,
+  },
+};
+
+export const MultiLine: Story = {
+  args: {
+    children: (
+      <code>
+        const a = 1 + b;
+        <br />
+        const c = 2 + d;
+      </code>
+    ),
+  },
+};
+
+export const Long: Story = {
+  args: {
+    children: (
+      <code>
+        {nTimesWithIndex(10, i => `const a${i} = ${i} + b;`).join(" ")}
+      </code>
+    ),
+  },
+};
diff --git a/packages/components/src/__stories__/CodeBlockWithCopyButton.stories.tsx b/packages/components/src/__stories__/CodeBlockWithCopyButton.stories.tsx
new file mode 100644
index 00000000..0e6b9922
--- /dev/null
+++ b/packages/components/src/__stories__/CodeBlockWithCopyButton.stories.tsx
@@ -0,0 +1,68 @@
+import { nTimesWithIndex } from "@dolthub/web-utils";
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import CodeBlock from "../CodeBlock";
+
+const meta: Meta<typeof CodeBlock.WithCopyButton> = {
+  title: "CodeBlock.WithCopyButton",
+  component: CodeBlock.WithCopyButton,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CodeBlock.WithCopyButton>;
+
+export const Default: Story = {
+  args: {
+    textToCopy: "const a = 1 + b;",
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    children: <span>const a = 1 + b;</span>,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    textToCopy: "const a = 1 + b;",
+    disabled: true,
+  },
+};
+
+export const Dark: Story = {
+  args: {
+    textToCopy: "const a = 1 + b;",
+    dark: true,
+  },
+};
+
+export const DisabledDark: Story = {
+  args: {
+    textToCopy: "const a = 1 + b;",
+    disabled: true,
+    dark: true,
+  },
+};
+
+export const MultiLine: Story = {
+  args: {
+    textToCopy: `const a = 1 + b;
+const b = 1 + a;`,
+  },
+};
+
+export const Long: Story = {
+  args: {
+    textToCopy: nTimesWithIndex(10, i => `const a${i} = ${i} + b;`).join(" "),
+  },
+};
+
+export const Small: Story = {
+  args: {
+    textToCopy: "const a = 1 + b;",
+    small: true,
+  },
+};
diff --git a/packages/components/src/__stories__/SmallLoader.stories.tsx b/packages/components/src/__stories__/SmallLoader.stories.tsx
new file mode 100644
index 00000000..6d6fcbb0
--- /dev/null
+++ b/packages/components/src/__stories__/SmallLoader.stories.tsx
@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import SmallLoader from "../SmallLoader";
+
+const meta: Meta<typeof SmallLoader> = {
+  title: "SmallLoader",
+  component: SmallLoader,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SmallLoader>;
+
+export const NotLoadedNoChild: Story = {
+  args: {
+    loaded: false,
+  },
+};
+
+export const NotLoadedWithChild: Story = {
+  args: {
+    loaded: false,
+    children: <span>Loaded</span>,
+  },
+};
+
+export const LoadedWithChild: Story = {
+  args: {
+    loaded: true,
+    children: <span>Loaded</span>,
+  },
+};
+
+export const LoadedNoChild: Story = {
+  args: {
+    loaded: true,
+  },
+};
+
+export const NotLoadedWithStyles: Story = {
+  args: {
+    loaded: false,
+    options: {
+      color: "red",
+      lines: 4,
+      radius: 4,
+      shadow: true,
+      speed: 0.5,
+      opacity: 0.2,
+    },
+  },
+};
diff --git a/packages/components/src/__stories__/SmallLoaderWithText.stories.tsx b/packages/components/src/__stories__/SmallLoaderWithText.stories.tsx
new file mode 100644
index 00000000..13cb33cc
--- /dev/null
+++ b/packages/components/src/__stories__/SmallLoaderWithText.stories.tsx
@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import SmallLoader from "../SmallLoader";
+
+const meta: Meta<typeof SmallLoader.WithText> = {
+  title: "SmallLoader.WithText",
+  component: SmallLoader.WithText,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SmallLoader.WithText>;
+
+export const NotLoadedNoChild: Story = {
+  args: {
+    loaded: false,
+    text: "Loading...",
+  },
+};
+
+export const NotLoadedWithChild: Story = {
+  args: {
+    loaded: false,
+    children: <span>Loaded</span>,
+    text: "Loading...",
+  },
+};
+
+export const LoadedWithChild: Story = {
+  args: {
+    loaded: true,
+    children: <span>Loaded</span>,
+    text: "Loading...",
+  },
+};
+
+export const LoadedNoChild: Story = {
+  args: {
+    loaded: true,
+    text: "Loading...",
+  },
+};
+
+export const NotLoadedWithStyles: Story = {
+  args: {
+    loaded: false,
+    text: "Loading...",
+    options: {
+      color: "red",
+      lines: 4,
+      radius: 4,
+      shadow: true,
+      speed: 0.5,
+      opacity: 0.2,
+    },
+  },
+};
diff --git a/packages/components/src/__tests__/CodeBlock.test.tsx b/packages/components/src/__tests__/CodeBlock.test.tsx
new file mode 100644
index 00000000..1cc75fcb
--- /dev/null
+++ b/packages/components/src/__tests__/CodeBlock.test.tsx
@@ -0,0 +1,20 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import CodeBlock from "../CodeBlock";
+
+describe("test CodeBlock", () => {
+  it("displays the provided children", () => {
+    render(
+      <CodeBlock>
+        <code data-testid="code-test">Some test code</code>
+      </CodeBlock>,
+    );
+    expect(screen.getByTestId("code-test")).toHaveTextContent("Some test code");
+  });
+
+  it("shows Copied to clipboard after clicking on the copy button", async () => {
+    render(<CodeBlock.WithCopyButton textToCopy="code" />);
+    fireEvent.click(screen.getByRole("button"));
+    await screen.findByText("Copied to clipboard");
+  });
+});
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 86be24f1..9920224e 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -4,6 +4,7 @@ export { default as ButtonWithPopup } from "./ButtonWithPopup";
 export { default as CellDropdown } from "./CellDropdown";
 export { default as CharCount } from "./CharCount";
 export { default as Checkbox } from "./Checkbox";
+export { default as CodeBlock } from "./CodeBlock";
 export { default as ExternalLink } from "./ExternalLink";
 export { default as FormInput } from "./FormInput";
 export { default as Loader } from "./Loader";
diff --git a/yarn.lock b/yarn.lock
index 42cd9582..8e579055 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2256,6 +2256,7 @@ __metadata:
     "@types/jest": "npm:^29.5.11"
     "@types/prop-types": "npm:^15"
     "@types/react": "npm:^18"
+    "@types/react-copy-to-clipboard": "npm:^5"
     "@types/react-dom": "npm:^18"
     "@types/react-loader": "npm:^2"
     "@types/rollup-plugin-peer-deps-external": "npm:^2"
@@ -2279,6 +2280,7 @@ __metadata:
     prettier: "npm:^3.2.4"
     prop-types: "npm:^15.8.1"
     react: "npm:^18.2.0"
+    react-copy-to-clipboard: "npm:^5.1.0"
     react-dom: "npm:^18.2.0"
     react-loader: "npm:^2.4.7"
     react-markdown: "npm:^9.0.1"
@@ -5504,6 +5506,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-copy-to-clipboard@npm:^5":
+  version: 5.0.7
+  resolution: "@types/react-copy-to-clipboard@npm:5.0.7"
+  dependencies:
+    "@types/react": "npm:*"
+  checksum: 33bea4549fa263b597d0dedb3807f99286d8ccf59adb370e3d82d1c9075195925a343982abd73c63cc47854a7240ddae79873a5cb3590c9b33c1b65bf9d07689
+  languageName: node
+  linkType: hard
+
 "@types/react-dom@npm:^18, @types/react-dom@npm:^18.0.0":
   version: 18.2.19
   resolution: "@types/react-dom@npm:18.2.19"
@@ -7574,6 +7585,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"copy-to-clipboard@npm:^3.3.1":
+  version: 3.3.3
+  resolution: "copy-to-clipboard@npm:3.3.3"
+  dependencies:
+    toggle-selection: "npm:^1.0.6"
+  checksum: 3ebf5e8ee00601f8c440b83ec08d838e8eabb068c1fae94a9cda6b42f288f7e1b552f3463635f419af44bf7675afc8d0390d30876cf5c2d5d35f86d9c56a3e5f
+  languageName: node
+  linkType: hard
+
 "core-js-compat@npm:^3.31.0, core-js-compat@npm:^3.34.0":
   version: 3.36.0
   resolution: "core-js-compat@npm:3.36.0"
@@ -15562,6 +15582,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-copy-to-clipboard@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "react-copy-to-clipboard@npm:5.1.0"
+  dependencies:
+    copy-to-clipboard: "npm:^3.3.1"
+    prop-types: "npm:^15.8.1"
+  peerDependencies:
+    react: ^15.3.0 || 16 || 17 || 18
+  checksum: de70d9f9c2d17cee207888ed791d4a042c300e5ca732503434d49e6745cff56c0d5ebcc82ab86237e9c2248e636d1d031b9f9cf9913ecec61d82a0e5ebc93881
+  languageName: node
+  linkType: hard
+
 "react-docgen-typescript@npm:^2.2.2":
   version: 2.2.2
   resolution: "react-docgen-typescript@npm:2.2.2"
@@ -17540,6 +17572,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"toggle-selection@npm:^1.0.6":
+  version: 1.0.6
+  resolution: "toggle-selection@npm:1.0.6"
+  checksum: f2cf1f2c70f374fd87b0cdc8007453ba9e981c4305a8bf4eac10a30e62ecdfd28bca7d18f8f15b15a506bf8a7bfb20dbe3539f0fcf2a2c8396c1a78d53e1f179
+  languageName: node
+  linkType: hard
+
 "toidentifier@npm:1.0.1":
   version: 1.0.1
   resolution: "toidentifier@npm:1.0.1"

From 1c6d5eaecf5c52835849a83249cc779933cfe6e5 Mon Sep 17 00:00:00 2001
From: Taylor Bantle <taylor@dolthub.com>
Date: Wed, 6 Mar 2024 16:14:12 -0800
Subject: [PATCH 09/10] components: Add stylelint

---
 packages/components/.eslintignore             |   1 +
 packages/components/.stylelintrc.json         |  13 +
 packages/components/package.json              |   6 +-
 .../components/src/Button/index.module.css    |   8 +-
 .../src/CellDropdown/index.module.css         |  20 +-
 .../components/src/CellDropdown/index.tsx     |   2 +-
 .../components/src/Radio/index.module.css     |   5 +-
 yarn.lock                                     | 257 +++++++++++++++++-
 8 files changed, 281 insertions(+), 31 deletions(-)
 create mode 100644 packages/components/.stylelintrc.json

diff --git a/packages/components/.eslintignore b/packages/components/.eslintignore
index 40100c3a..37757305 100644
--- a/packages/components/.eslintignore
+++ b/packages/components/.eslintignore
@@ -3,3 +3,4 @@ node_modules
 .eslintrc.js
 ./*.js
 storybook-static
+coverage
diff --git a/packages/components/.stylelintrc.json b/packages/components/.stylelintrc.json
new file mode 100644
index 00000000..06bb7e28
--- /dev/null
+++ b/packages/components/.stylelintrc.json
@@ -0,0 +1,13 @@
+{
+  "extends": "stylelint-config-recommended",
+  "ignoreFiles": "coverage/**",
+  "rules": {
+    "at-rule-no-unknown": [true, { "ignoreAtRules": ["tailwind", "screen"] }],
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": ["global"]
+      }
+    ]
+  }
+}
diff --git a/packages/components/package.json b/packages/components/package.json
index 9cfcad5c..8d97a978 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -21,7 +21,9 @@
     "compile": "tsc -b",
     "build": "rollup -c --bundleConfigAsCjs",
     "dbuild": "yarn compile && yarn build",
-    "lint": "eslint --cache --ext .ts,.js,.tsx,.jsx src",
+    "lint": "yarn lint-js-errors && yarn lint-css",
+    "lint-js-errors": "eslint --cache --ext .ts,.js,.tsx,.jsx src",
+    "lint-css": "stylelint \"**/*.css\"",
     "prettier": "prettier --check 'src/**/*.{js,ts,tsx}'",
     "prettier-fix": "prettier --write 'src/**/*.{js,ts,tsx}'",
     "npm:publish": "yarn dbuild && npm publish",
@@ -105,6 +107,8 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
     "storybook": "^7.6.17",
+    "stylelint": "^16.2.1",
+    "stylelint-config-recommended": "^14.0.0",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
     "yalc": "^1.0.0-pre.53"
diff --git a/packages/components/src/Button/index.module.css b/packages/components/src/Button/index.module.css
index b96dfcc9..0da81453 100644
--- a/packages/components/src/Button/index.module.css
+++ b/packages/components/src/Button/index.module.css
@@ -45,6 +45,10 @@
     @apply text-link-2;
   }
 
+  &:focus {
+    @apply outline-none widget-shadow-lightblue;
+  }
+
   &:disabled {
     @apply text-ld-darkgrey;
 
@@ -52,10 +56,6 @@
       @apply text-ld-darkgrey;
     }
   }
-
-  &:focus {
-    @apply outline-none widget-shadow-lightblue;
-  }
 }
 
 .dark {
diff --git a/packages/components/src/CellDropdown/index.module.css b/packages/components/src/CellDropdown/index.module.css
index 7991218a..c286c627 100644
--- a/packages/components/src/CellDropdown/index.module.css
+++ b/packages/components/src/CellDropdown/index.module.css
@@ -12,24 +12,24 @@
   &:focus {
     @apply outline-none widget-shadow-lightblue;
   }
-
-  svg {
-    @apply p-1 w-5 h-5 text-ld-darkgrey;
-
-    &:hover {
-      @apply text-primary;
-    }
-  }
 }
 
 .rowButton {
   @apply bg-ld-lightgrey;
+}
 
-  svg {
-    @apply text-ld-darkergrey;
+.icon {
+  @apply p-1 w-5 h-5 text-ld-darkgrey;
+
+  &:hover {
+    @apply text-primary;
   }
 }
 
+.rowIcon {
+  @apply text-ld-darkergrey;
+}
+
 .dropdown {
   @apply absolute bg-white widget-shadow-hover z-100 rounded-b top-8 px-3 py-1 border-b border-x border-ld-lightgrey max-w-36 right-0 flex flex-col;
 }
diff --git a/packages/components/src/CellDropdown/index.tsx b/packages/components/src/CellDropdown/index.tsx
index 21ea3dce..f720399a 100644
--- a/packages/components/src/CellDropdown/index.tsx
+++ b/packages/components/src/CellDropdown/index.tsx
@@ -35,7 +35,7 @@ export default function CellDropdown({
         )}
         data-cy={props["data-cy"]}
       >
-        <RiMenu5Line />
+        <RiMenu5Line className={cx(css.icon, { [css.rowIcon]: forRow })} />
       </button>
       {props.showDropdown && (
         <div
diff --git a/packages/components/src/Radio/index.module.css b/packages/components/src/Radio/index.module.css
index c8e9bef0..4e4db13d 100644
--- a/packages/components/src/Radio/index.module.css
+++ b/packages/components/src/Radio/index.module.css
@@ -19,12 +19,9 @@
 }
 
 .container input:checked ~ .radio {
-  @apply border-button-2;
+  @apply border-button-2 bg-white;
 }
 
-.container input:checked ~ .radio {
-  @apply bg-white;
-}
 .container input:focus ~ .radio {
   @apply widget-shadow-lightblue;
 }
diff --git a/yarn.lock b/yarn.lock
index 8e579055..e26eefcf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1785,7 +1785,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@csstools/css-parser-algorithms@npm:^2.6.0":
+"@csstools/css-parser-algorithms@npm:^2.5.0, @csstools/css-parser-algorithms@npm:^2.6.0":
   version: 2.6.0
   resolution: "@csstools/css-parser-algorithms@npm:2.6.0"
   peerDependencies:
@@ -1801,7 +1801,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@csstools/media-query-list-parser@npm:^2.1.8":
+"@csstools/media-query-list-parser@npm:^2.1.7, @csstools/media-query-list-parser@npm:^2.1.8":
   version: 2.1.8
   resolution: "@csstools/media-query-list-parser@npm:2.1.8"
   peerDependencies:
@@ -2168,7 +2168,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@csstools/selector-specificity@npm:^3.0.2":
+"@csstools/selector-specificity@npm:^3.0.1, @csstools/selector-specificity@npm:^3.0.2":
   version: 3.0.2
   resolution: "@csstools/selector-specificity@npm:3.0.2"
   peerDependencies:
@@ -2292,6 +2292,8 @@ __metadata:
     rollup-plugin-postcss: "npm:^4.0.2"
     rollup-plugin-terser: "npm:^7.0.2"
     storybook: "npm:^7.6.17"
+    stylelint: "npm:^16.2.1"
+    stylelint-config-recommended: "npm:^14.0.0"
     tailwindcss: "npm:^3.4.1"
     tslib: "npm:^2.6.2"
     typescript: "npm:^5.3.3"
@@ -6300,7 +6302,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv@npm:^8.0.0, ajv@npm:^8.9.0":
+"ajv@npm:^8.0.0, ajv@npm:^8.0.1, ajv@npm:^8.9.0":
   version: 8.12.0
   resolution: "ajv@npm:8.12.0"
   dependencies:
@@ -6595,6 +6597,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"astral-regex@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "astral-regex@npm:2.0.0"
+  checksum: f63d439cc383db1b9c5c6080d1e240bd14dae745f15d11ec5da863e182bbeca70df6c8191cffef5deba0b566ef98834610a68be79ac6379c95eeb26e1b310e25
+  languageName: node
+  linkType: hard
+
 "async-limiter@npm:~1.0.0":
   version: 1.0.1
   resolution: "async-limiter@npm:1.0.1"
@@ -6805,6 +6814,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"balanced-match@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "balanced-match@npm:2.0.0"
+  checksum: 60a54e0b75a61674e16a7a336b805f06c72d6f8fc457639c24efc512ba2bf9cb5744b9f6f5225afcefb99da39714440c83c737208cc65c5d9ecd1f3093331ca3
+  languageName: node
+  linkType: hard
+
 "base64-js@npm:^1.3.1":
   version: 1.5.1
   resolution: "base64-js@npm:1.5.1"
@@ -7734,6 +7750,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css-functions-list@npm:^3.2.1":
+  version: 3.2.1
+  resolution: "css-functions-list@npm:3.2.1"
+  checksum: e6e2d9580437ad6df9f2cf18cff3f941691ec5cbbaebd4cb17a5da40d8d5dac50004807ddd05c00a121d2f21a224e2c5d339fe8e13614af21c00181d7d1c22b9
+  languageName: node
+  linkType: hard
+
 "css-has-pseudo@npm:^6.0.2":
   version: 6.0.2
   resolution: "css-has-pseudo@npm:6.0.2"
@@ -9450,7 +9473,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0":
+"fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.2":
   version: 3.3.2
   resolution: "fast-glob@npm:3.3.2"
   dependencies:
@@ -9484,6 +9507,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fastest-levenshtein@npm:^1.0.16":
+  version: 1.0.16
+  resolution: "fastest-levenshtein@npm:1.0.16"
+  checksum: 7e3d8ae812a7f4fdf8cad18e9cde436a39addf266a5986f653ea0d81e0de0900f50c0f27c6d5aff3f686bcb48acbd45be115ae2216f36a6a13a7dbbf5cad878b
+  languageName: node
+  linkType: hard
+
 "fastq@npm:^1.6.0":
   version: 1.17.1
   resolution: "fastq@npm:1.17.1"
@@ -9527,6 +9557,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"file-entry-cache@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "file-entry-cache@npm:8.0.0"
+  dependencies:
+    flat-cache: "npm:^4.0.0"
+  checksum: 9e2b5938b1cd9b6d7e3612bdc533afd4ac17b2fc646569e9a8abbf2eb48e5eb8e316bc38815a3ef6a1b456f4107f0d0f055a614ca613e75db6bf9ff4d72c1638
+  languageName: node
+  linkType: hard
+
 "file-system-cache@npm:2.3.0":
   version: 2.3.0
   resolution: "file-system-cache@npm:2.3.0"
@@ -9652,6 +9691,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"flat-cache@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "flat-cache@npm:4.0.1"
+  dependencies:
+    flatted: "npm:^3.2.9"
+    keyv: "npm:^4.5.4"
+  checksum: 2c59d93e9faa2523e4fda6b4ada749bed432cfa28c8e251f33b25795e426a1c6dbada777afb1f74fcfff33934fdbdea921ee738fcc33e71adc9d6eca984a1cfc
+  languageName: node
+  linkType: hard
+
 "flatted@npm:^3.2.9":
   version: 3.2.9
   resolution: "flatted@npm:3.2.9"
@@ -10063,6 +10112,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"global-modules@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "global-modules@npm:2.0.0"
+  dependencies:
+    global-prefix: "npm:^3.0.0"
+  checksum: 43b770fe24aa6028f4b9770ea583a47f39750be15cf6e2578f851e4ccc9e4fa674b8541928c0b09c21461ca0763f0d36e4068cec86c914b07fd6e388e66ba5b9
+  languageName: node
+  linkType: hard
+
+"global-prefix@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "global-prefix@npm:3.0.0"
+  dependencies:
+    ini: "npm:^1.3.5"
+    kind-of: "npm:^6.0.2"
+    which: "npm:^1.3.1"
+  checksum: 510f489fb68d1cc7060f276541709a0ee6d41356ef852de48f7906c648ac223082a1cc8fce86725ca6c0e032bcdc1189ae77b4744a624b29c34a9d0ece498269
+  languageName: node
+  linkType: hard
+
 "globals@npm:^11.1.0":
   version: 11.12.0
   resolution: "globals@npm:11.12.0"
@@ -10102,6 +10171,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globjoin@npm:^0.1.4":
+  version: 0.1.4
+  resolution: "globjoin@npm:0.1.4"
+  checksum: 236e991b48f1a9869fe2aa7bb5141fb1f32973940567a3c012f8ccb58c3c85ab78ce594d374fa819410fff3b48cfd24584d7ef726939f8a3c3772890e62ea16b
+  languageName: node
+  linkType: hard
+
 "gopd@npm:^1.0.1":
   version: 1.0.1
   resolution: "gopd@npm:1.0.1"
@@ -10316,7 +10392,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"html-tags@npm:^3.1.0":
+"html-tags@npm:^3.1.0, html-tags@npm:^3.3.1":
   version: 3.3.1
   resolution: "html-tags@npm:3.3.1"
   checksum: 680165e12baa51bad7397452d247dbcc5a5c29dac0e6754b1187eee3bf26f514bc1907a431dd2f7eb56207611ae595ee76a0acc8eaa0d931e72c791dd6463d79
@@ -10507,7 +10583,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ignore@npm:^5.0.4, ignore@npm:^5.2.0, ignore@npm:^5.2.4":
+"ignore@npm:^5.0.4, ignore@npm:^5.2.0, ignore@npm:^5.2.4, ignore@npm:^5.3.0":
   version: 5.3.1
   resolution: "ignore@npm:5.3.1"
   checksum: 703f7f45ffb2a27fb2c5a8db0c32e7dee66b33a225d28e8db4e1be6474795f606686a6e3bcc50e1aa12f2042db4c9d4a7d60af3250511de74620fbed052ea4cd
@@ -10585,6 +10661,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ini@npm:^1.3.5":
+  version: 1.3.8
+  resolution: "ini@npm:1.3.8"
+  checksum: ec93838d2328b619532e4f1ff05df7909760b6f66d9c9e2ded11e5c1897d6f2f9980c54dd638f88654b00919ce31e827040631eab0a3969e4d1abefa0719516a
+  languageName: node
+  linkType: hard
+
 "ini@npm:^2.0.0":
   version: 2.0.0
   resolution: "ini@npm:2.0.0"
@@ -10932,7 +11015,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-plain-object@npm:5.0.0":
+"is-plain-object@npm:5.0.0, is-plain-object@npm:^5.0.0":
   version: 5.0.0
   resolution: "is-plain-object@npm:5.0.0"
   checksum: 893e42bad832aae3511c71fd61c0bf61aa3a6d853061c62a307261842727d0d25f761ce9379f7ba7226d6179db2a3157efa918e7fe26360f3bf0842d9f28942c
@@ -11949,7 +12032,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"keyv@npm:^4.5.3":
+"keyv@npm:^4.5.3, keyv@npm:^4.5.4":
   version: 4.5.4
   resolution: "keyv@npm:4.5.4"
   dependencies:
@@ -11972,6 +12055,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"known-css-properties@npm:^0.29.0":
+  version: 0.29.0
+  resolution: "known-css-properties@npm:0.29.0"
+  checksum: f66e9992097b8f54e97dbe729943d4a11b8d3ba15f68dbb3deb8bb0122cb89c22c90c9221ecb1e3f2e236838fe3c0faae319b43908c81b6e254ac43cafde2906
+  languageName: node
+  linkType: hard
+
 "lazy-universal-dotenv@npm:^4.0.0":
   version: 4.0.0
   resolution: "lazy-universal-dotenv@npm:4.0.0"
@@ -12130,6 +12220,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.truncate@npm:^4.4.2":
+  version: 4.4.2
+  resolution: "lodash.truncate@npm:4.4.2"
+  checksum: 4e870d54e8a6c86c8687e057cec4069d2e941446ccab7f40b4d9555fa5872d917d0b6aa73bece7765500a3123f1723bcdba9ae881b679ef120bba9e1a0b0ed70
+  languageName: node
+  linkType: hard
+
 "lodash.uniq@npm:^4.5.0":
   version: 4.5.0
   resolution: "lodash.uniq@npm:4.5.0"
@@ -12312,6 +12409,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mathml-tag-names@npm:^2.1.3":
+  version: 2.1.3
+  resolution: "mathml-tag-names@npm:2.1.3"
+  checksum: e2b094658a2618433efd2678a5a3e551645e09ba17c7c777783cd8dfa0178b0195fda0a5c46a6be5e778923662cf8dde891c894c869ff14fbb4ea3208c31bc4d
+  languageName: node
+  linkType: hard
+
 "mdast-util-definitions@npm:^4.0.0":
   version: 4.0.0
   resolution: "mdast-util-definitions@npm:4.0.0"
@@ -12591,6 +12695,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"meow@npm:^13.1.0":
+  version: 13.2.0
+  resolution: "meow@npm:13.2.0"
+  checksum: d5b339ae314715bcd0b619dd2f8a266891928e21526b4800d49b4fba1cc3fff7e2c1ff5edd3344149fac841bc2306157f858e8c4d5eaee4d52ce52ad925664ce
+  languageName: node
+  linkType: hard
+
 "merge-descriptors@npm:1.0.1":
   version: 1.0.1
   resolution: "merge-descriptors@npm:1.0.1"
@@ -15173,6 +15284,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-resolve-nested-selector@npm:^0.1.1":
+  version: 0.1.1
+  resolution: "postcss-resolve-nested-selector@npm:0.1.1"
+  checksum: e86412064c5d805fbee20f4e851395304102addd7d583b6a991adaa5616e8d5f45549864eb6292d4cf15075cd261c289f069acdf6a2556689fc44fe72bcb306e
+  languageName: node
+  linkType: hard
+
+"postcss-safe-parser@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "postcss-safe-parser@npm:7.0.0"
+  peerDependencies:
+    postcss: ^8.4.31
+  checksum: 4217afd8ce2809e959dc365e4675f499303cc6b91f94db06c8164422822db2d3b3124df701ee2234db4127ad05619b016bfb9c2bccae9bf9cf898a396f1632c9
+  languageName: node
+  linkType: hard
+
 "postcss-selector-not@npm:^7.0.2":
   version: 7.0.2
   resolution: "postcss-selector-not@npm:7.0.2"
@@ -16726,6 +16853,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"slice-ansi@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "slice-ansi@npm:4.0.0"
+  dependencies:
+    ansi-styles: "npm:^4.0.0"
+    astral-regex: "npm:^2.0.0"
+    is-fullwidth-code-point: "npm:^3.0.0"
+  checksum: 6c25678db1270d4793e0327620f1e0f9f5bea4630123f51e9e399191bc52c87d6e6de53ed33538609e5eacbd1fab769fae00f3705d08d029f02102a540648918
+  languageName: node
+  linkType: hard
+
 "smart-buffer@npm:^4.2.0":
   version: 4.2.0
   resolution: "smart-buffer@npm:4.2.0"
@@ -17075,7 +17213,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strip-ansi@npm:^7.0.1":
+"strip-ansi@npm:^7.0.1, strip-ansi@npm:^7.1.0":
   version: 7.1.0
   resolution: "strip-ansi@npm:7.1.0"
   dependencies:
@@ -17186,6 +17324,63 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stylelint-config-recommended@npm:^14.0.0":
+  version: 14.0.0
+  resolution: "stylelint-config-recommended@npm:14.0.0"
+  peerDependencies:
+    stylelint: ^16.0.0
+  checksum: 4ad15c36e8c03291aa7bbe4b672ebfb0f46ab698e7580a0da8d29644046d102d7f31dbf00a2a6eab94b565c390c6fb0d5d528737b83ac3acf6dc2ef085a90b11
+  languageName: node
+  linkType: hard
+
+"stylelint@npm:^16.2.1":
+  version: 16.2.1
+  resolution: "stylelint@npm:16.2.1"
+  dependencies:
+    "@csstools/css-parser-algorithms": "npm:^2.5.0"
+    "@csstools/css-tokenizer": "npm:^2.2.3"
+    "@csstools/media-query-list-parser": "npm:^2.1.7"
+    "@csstools/selector-specificity": "npm:^3.0.1"
+    balanced-match: "npm:^2.0.0"
+    colord: "npm:^2.9.3"
+    cosmiconfig: "npm:^9.0.0"
+    css-functions-list: "npm:^3.2.1"
+    css-tree: "npm:^2.3.1"
+    debug: "npm:^4.3.4"
+    fast-glob: "npm:^3.3.2"
+    fastest-levenshtein: "npm:^1.0.16"
+    file-entry-cache: "npm:^8.0.0"
+    global-modules: "npm:^2.0.0"
+    globby: "npm:^11.1.0"
+    globjoin: "npm:^0.1.4"
+    html-tags: "npm:^3.3.1"
+    ignore: "npm:^5.3.0"
+    imurmurhash: "npm:^0.1.4"
+    is-plain-object: "npm:^5.0.0"
+    known-css-properties: "npm:^0.29.0"
+    mathml-tag-names: "npm:^2.1.3"
+    meow: "npm:^13.1.0"
+    micromatch: "npm:^4.0.5"
+    normalize-path: "npm:^3.0.0"
+    picocolors: "npm:^1.0.0"
+    postcss: "npm:^8.4.33"
+    postcss-resolve-nested-selector: "npm:^0.1.1"
+    postcss-safe-parser: "npm:^7.0.0"
+    postcss-selector-parser: "npm:^6.0.15"
+    postcss-value-parser: "npm:^4.2.0"
+    resolve-from: "npm:^5.0.0"
+    string-width: "npm:^4.2.3"
+    strip-ansi: "npm:^7.1.0"
+    supports-hyperlinks: "npm:^3.0.0"
+    svg-tags: "npm:^1.0.0"
+    table: "npm:^6.8.1"
+    write-file-atomic: "npm:^5.0.1"
+  bin:
+    stylelint: bin/stylelint.mjs
+  checksum: eeaba06885e542c832e5cffc07b2d0dabdc5a72e6ad4d6cb3d01dcc260c29a712b0b935cbd40e059abd68a100e0563fbc617fc4c9bef3b14ecaf6eea651d9d9d
+  languageName: node
+  linkType: hard
+
 "sucrase@npm:^3.32.0":
   version: 3.35.0
   resolution: "sucrase@npm:3.35.0"
@@ -17231,6 +17426,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"supports-hyperlinks@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "supports-hyperlinks@npm:3.0.0"
+  dependencies:
+    has-flag: "npm:^4.0.0"
+    supports-color: "npm:^7.0.0"
+  checksum: 36aaa55e67645dded8e0f846fd81d7dd05ce82ea81e62347f58d86213577eb627b2b45298656ce7a70e7155e39f071d0d3f83be91e112aed801ebaa8db1ef1d0
+  languageName: node
+  linkType: hard
+
 "supports-preserve-symlinks-flag@npm:^1.0.0":
   version: 1.0.0
   resolution: "supports-preserve-symlinks-flag@npm:1.0.0"
@@ -17238,6 +17443,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"svg-tags@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "svg-tags@npm:1.0.0"
+  checksum: 5867e29e8f431bf7aecf5a244d1af5725f80a1086187dbc78f26d8433b5e96b8fe9361aeb10d1699ff483b9afec785a10916b9312fe9d734d1a7afd48226c954
+  languageName: node
+  linkType: hard
+
 "svgo@npm:^2.7.0":
   version: 2.8.0
   resolution: "svgo@npm:2.8.0"
@@ -17308,6 +17520,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"table@npm:^6.8.1":
+  version: 6.8.1
+  resolution: "table@npm:6.8.1"
+  dependencies:
+    ajv: "npm:^8.0.1"
+    lodash.truncate: "npm:^4.4.2"
+    slice-ansi: "npm:^4.0.0"
+    string-width: "npm:^4.2.3"
+    strip-ansi: "npm:^6.0.1"
+  checksum: 591ed84b2438b01c9bc02248e2238e21e8bfb73654bc5acca0d469053eb39be3db2f57d600dcf08ac983b6f50f80842c44612c03877567c2afee3aec4a033e5f
+  languageName: node
+  linkType: hard
+
 "tailwindcss@npm:^3.4.1":
   version: 3.4.1
   resolution: "tailwindcss@npm:3.4.1"
@@ -18481,7 +18706,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which@npm:^1.2.9":
+"which@npm:^1.2.9, which@npm:^1.3.1":
   version: 1.3.1
   resolution: "which@npm:1.3.1"
   dependencies:
@@ -18571,6 +18796,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"write-file-atomic@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "write-file-atomic@npm:5.0.1"
+  dependencies:
+    imurmurhash: "npm:^0.1.4"
+    signal-exit: "npm:^4.0.1"
+  checksum: e8c850a8e3e74eeadadb8ad23c9d9d63e4e792bd10f4836ed74189ef6e996763959f1249c5650e232f3c77c11169d239cbfc8342fc70f3fe401407d23810505d
+  languageName: node
+  linkType: hard
+
 "ws@npm:^6.1.0":
   version: 6.2.2
   resolution: "ws@npm:6.2.2"

From b0b0aa5b40bdccf2099913e4d5265f7b3abe4d52 Mon Sep 17 00:00:00 2001
From: Taylor Bantle <taylor@dolthub.com>
Date: Wed, 6 Mar 2024 16:53:27 -0800
Subject: [PATCH 10/10] components: CodeBlock fixes

---
 .../components/src/CodeBlock/index.module.css | 18 ++++++---------
 packages/components/src/CodeBlock/index.tsx   | 18 ++-------------
 .../src/__stories__/CodeBlock.stories.tsx     | 15 -------------
 .../CodeBlockWithCopyButton.stories.tsx       | 15 -------------
 .../src/tailwind/context/applyTheme.ts        |  1 +
 .../src/tailwind/theme/base/colors.ts         | 22 ++++++++++---------
 .../src/tailwind/theme/hosted/colors.ts       |  1 +
 .../src/tailwind/theme/workbench/colors.ts    |  1 +
 packages/components/src/tailwind/types.ts     |  3 +++
 9 files changed, 27 insertions(+), 67 deletions(-)

diff --git a/packages/components/src/CodeBlock/index.module.css b/packages/components/src/CodeBlock/index.module.css
index f51f617b..48ff5f87 100644
--- a/packages/components/src/CodeBlock/index.module.css
+++ b/packages/components/src/CodeBlock/index.module.css
@@ -1,25 +1,17 @@
 .code {
-  @apply text-left p-6 mb-4 rounded-lg bg-primary;
+  @apply text-left p-6 mb-4 rounded-lg bg-code-background;
 
   code {
     @apply text-white text-sm leading-loose;
   }
 }
 
-.dark {
-  @apply bg-ld-darkerblue;
-}
-
 .disabled {
   @apply bg-ld-darkgrey;
 }
 
 .clipboard {
-  @apply p-2 mx-2 rounded h-10 min-w-[37px] text-white;
-
-  svg {
-    @apply ml-1;
-  }
+  @apply p-2 mx-2 rounded h-10 min-w-[37px] text-white flex items-center justify-center;
 
   &:hover {
     @apply bg-ld-darkgrey;
@@ -47,5 +39,9 @@
 }
 
 .smallCopy {
-  @apply py-0 pl-4;
+  @apply py-0.5 pl-4;
+
+  .clipboard {
+    @apply p-1 h-7 min-w-[28px];
+  }
 }
diff --git a/packages/components/src/CodeBlock/index.tsx b/packages/components/src/CodeBlock/index.tsx
index 602f639b..ab4e8c67 100644
--- a/packages/components/src/CodeBlock/index.tsx
+++ b/packages/components/src/CodeBlock/index.tsx
@@ -10,22 +10,10 @@ type Props = {
   children: ReactNode;
   className?: string;
   disabled?: boolean;
-  dark?: boolean;
 };
 
-const CodeBlock = ({
-  children,
-  className,
-  disabled = false,
-  dark = false,
-}: Props) => (
-  <div
-    className={cx(
-      css.code,
-      { [css.dark]: dark, [css.disabled]: disabled },
-      className,
-    )}
-  >
+const CodeBlock = ({ children, className, disabled = false }: Props) => (
+  <div className={cx(css.code, { [css.disabled]: disabled }, className)}>
     {children}
   </div>
 );
@@ -37,7 +25,6 @@ type CopyProps = {
   ["data-cy"]?: string;
   disabled?: boolean;
   small?: boolean;
-  dark?: boolean;
 };
 
 const WithCopyButton = (props: CopyProps) => {
@@ -45,7 +32,6 @@ const WithCopyButton = (props: CopyProps) => {
   return (
     <CodeBlock
       disabled={props.disabled}
-      dark={props.dark}
       className={cx(
         css.withCopy,
         { [css.smallCopy]: props.small },
diff --git a/packages/components/src/__stories__/CodeBlock.stories.tsx b/packages/components/src/__stories__/CodeBlock.stories.tsx
index df7e2926..6a8c5abc 100644
--- a/packages/components/src/__stories__/CodeBlock.stories.tsx
+++ b/packages/components/src/__stories__/CodeBlock.stories.tsx
@@ -26,21 +26,6 @@ export const Disabled: Story = {
   },
 };
 
-export const Dark: Story = {
-  args: {
-    children: <code>const a = 1 + b;</code>,
-    dark: true,
-  },
-};
-
-export const DisabledDark: Story = {
-  args: {
-    children: <code>const a = 1 + b;</code>,
-    disabled: true,
-    dark: true,
-  },
-};
-
 export const MultiLine: Story = {
   args: {
     children: (
diff --git a/packages/components/src/__stories__/CodeBlockWithCopyButton.stories.tsx b/packages/components/src/__stories__/CodeBlockWithCopyButton.stories.tsx
index 0e6b9922..9617d9ad 100644
--- a/packages/components/src/__stories__/CodeBlockWithCopyButton.stories.tsx
+++ b/packages/components/src/__stories__/CodeBlockWithCopyButton.stories.tsx
@@ -32,21 +32,6 @@ export const Disabled: Story = {
   },
 };
 
-export const Dark: Story = {
-  args: {
-    textToCopy: "const a = 1 + b;",
-    dark: true,
-  },
-};
-
-export const DisabledDark: Story = {
-  args: {
-    textToCopy: "const a = 1 + b;",
-    disabled: true,
-    dark: true,
-  },
-};
-
 export const MultiLine: Story = {
   args: {
     textToCopy: `const a = 1 + b;
diff --git a/packages/components/src/tailwind/context/applyTheme.ts b/packages/components/src/tailwind/context/applyTheme.ts
index f1412598..61f7de07 100644
--- a/packages/components/src/tailwind/context/applyTheme.ts
+++ b/packages/components/src/tailwind/context/applyTheme.ts
@@ -28,6 +28,7 @@ function mapTheme(rgb: IThemeRGB): IThemeVariables {
     "--color-button-2": rgb["rgb-button-2"] ?? "",
     "--color-link-2": rgb["rgb-link-2"] ?? "",
     "--color-link-light": rgb["rgb-link-light"] ?? "",
+    "--color-code-background": rgb["rgb-code-background"] ?? "",
   };
 }
 
diff --git a/packages/components/src/tailwind/theme/base/colors.ts b/packages/components/src/tailwind/theme/base/colors.ts
index 5e26ca9c..9374cd14 100644
--- a/packages/components/src/tailwind/theme/base/colors.ts
+++ b/packages/components/src/tailwind/theme/base/colors.ts
@@ -1,4 +1,4 @@
-import { IThemeColors, IThemeRGB } from "../../types";
+import { IThemeColors, IThemeRGB, IThemeVariables } from "../../types";
 
 // TODO: Improve these names
 const staticColors = {
@@ -43,6 +43,7 @@ const configurableColors: IThemeColors = {
   "link-2": withOpacity("--color-link-2"),
   "link-light": withOpacity("--color-link-light"),
   "background-light": `rgba(var(--color-link-1), 0.08)`,
+  "code-background": withOpacity("--color-code-background"),
 };
 
 const colors = { ...staticColors, ...configurableColors };
@@ -52,19 +53,20 @@ export default colors;
 // Can override these values by passing this object with different values to
 // `applyTheme`
 export const baseColorVariableValues: IThemeRGB = {
-  "rgb-primary": "1, 10, 64",
-  "rgb-acc-1": "252, 66, 201",
-  "rgb-background-acc-1": "24, 33, 52",
+  "rgb-primary": "1, 10, 64", // ld-darkblue
+  "rgb-acc-1": "252, 66, 201", // ld-pink
+  "rgb-background-acc-1": "24, 33, 52", // ld-darkestblue
   "rgb-background-acc-start": "31, 41, 66",
-  "rgb-button-1": "61, 145, 240",
-  "rgb-link-1": "31, 109, 198",
-  "rgb-button-2": "31, 109, 198",
-  "rgb-link-2": "61, 145, 240",
-  "rgb-link-light": "109, 176, 252",
+  "rgb-button-1": "61, 145, 240", // acc-hoverlinkblue
+  "rgb-link-1": "31, 109, 198", // acc-linkblue
+  "rgb-button-2": "31, 109, 198", // acc-linkblue
+  "rgb-link-2": "61, 145, 240", // acc-hoverlinkblue
+  "rgb-link-light": "109, 176, 252", // ld-blue
+  "rgb-code-background": "30, 40, 66", // ld-darkerblue
 };
 
 // Reference for using CSS variables in Tailwind:
 // https://tailwindcss.com/docs/customizing-colors#using-css-variables
-function withOpacity(variableName: string): string {
+function withOpacity(variableName: keyof IThemeVariables): string {
   return `rgba(var(${variableName}), <alpha-value>)`;
 }
diff --git a/packages/components/src/tailwind/theme/hosted/colors.ts b/packages/components/src/tailwind/theme/hosted/colors.ts
index 47e1aa32..b5d9de84 100644
--- a/packages/components/src/tailwind/theme/hosted/colors.ts
+++ b/packages/components/src/tailwind/theme/hosted/colors.ts
@@ -18,4 +18,5 @@ export const tailwindColorTheme: IThemeRGB = {
   "rgb-button-2": "31, 109, 198", // acc-linkblue
   "rgb-link-2": "31, 109, 198", // acc-linkblue
   "rgb-link-light": "109, 176, 252", // ld-blue
+  "rgb-code-background": "24, 51, 98",
 };
diff --git a/packages/components/src/tailwind/theme/workbench/colors.ts b/packages/components/src/tailwind/theme/workbench/colors.ts
index 0e6e6b26..39146bc1 100644
--- a/packages/components/src/tailwind/theme/workbench/colors.ts
+++ b/packages/components/src/tailwind/theme/workbench/colors.ts
@@ -23,4 +23,5 @@ export const tailwindColorTheme: IThemeRGB = {
   "rgb-button-2": "61, 145, 240", // acc-linkblue
   "rgb-link-2": "31, 109, 198", // acc-hoverlinkblue
   "rgb-link-light": "109, 176, 252", // ld-blue
+  "rgb-code-background": "24, 51, 98", // ld-darkblue
 };
diff --git a/packages/components/src/tailwind/types.ts b/packages/components/src/tailwind/types.ts
index e7eb4d36..4c851a90 100644
--- a/packages/components/src/tailwind/types.ts
+++ b/packages/components/src/tailwind/types.ts
@@ -10,6 +10,7 @@ export interface IThemeRGB {
   "rgb-button-2"?: string;
   "rgb-link-2"?: string;
   "rgb-link-light"?: string;
+  "rgb-code-background"?: string;
 }
 
 export interface IThemeVariables {
@@ -22,6 +23,7 @@ export interface IThemeVariables {
   "--color-button-2": string;
   "--color-link-2": string;
   "--color-link-light": string;
+  "--color-code-background": string;
 }
 
 export interface IThemeColors {
@@ -35,4 +37,5 @@ export interface IThemeColors {
   "link-2"?: string;
   "link-light"?: string;
   "background-light"?: string;
+  "code-background"?: string;
 }