@databiosphere/findable-ui 32.1.1 → 34.0.0

package/src/tests/utils.ts

@@ -32,6 +32,15 @@ export function getStartsWithRegex(text: string): RegExp {
   return new RegExp(`^${escapeRegExp(text)}`);
 }
 
+/**
+ * Retrieves an element by its role.
+ * @param role - The role of the element.
+ * @returns The element.
+ */
+export function getRole<T extends HTMLElement = HTMLElement>(role: string): T {
+  return screen.getByRole(role);
+}
+
 /**
  * Retrieves an element by its text content.
  * @param text - The text content of the element.

package/src/theme/common/components.ts

@@ -3,6 +3,7 @@ import { DropDownIcon } from "../../components/common/Form/components/Select/com
 import { COLOR_MIXES } from "../../styles/common/constants/colorMixes";
 import { PALETTE } from "../../styles/common/constants/palette";
 import { SHADOWS } from "../../styles/common/constants/shadows";
+import { BUTTON_PROPS } from "../../styles/common/mui/button";
 import { CHIP_PROPS } from "../../styles/common/mui/chip";
 import { desktopUp, mobileUp, tabletUp } from "./breakpoints";
 import {
@@ -200,6 +201,22 @@ export const MuiButton = (theme: Theme): Components["MuiButton"] => {
       },
       endIcon: {
         margin: 0,
+        variants: [
+          {
+            props: { size: BUTTON_PROPS.SIZE.MEDIUM },
+            style: {
+              marginLeft: -6,
+              marginRight: -6,
+            },
+          },
+          {
+            props: { size: BUTTON_PROPS.SIZE.SMALL },
+            style: {
+              marginLeft: -6,
+              marginRight: -6,
+            },
+          },
+        ],
       },
       outlinedSecondary: {
         backgroundColor: "transparent",
@@ -317,38 +334,6 @@ export const MuiButtonBase = (theme: Theme): Components["MuiButtonBase"] => {
   };
 };
 
-/**
- * MuiButtonGroup Component
- * @param theme - Theme.
- * @returns MuiButtonGroup component theme styles.
- */
-export const MuiButtonGroup = (theme: Theme): Components["MuiButtonGroup"] => {
-  return {
-    defaultProps: {
-      disableElevation: true,
-      disableRipple: true,
-    },
-    styleOverrides: {
-      grouped: {
-        minWidth: 0,
-        padding: "6px 8px",
-      },
-      groupedContainedPrimary: {
-        borderColor: theme.palette.primary.dark,
-        boxShadow: `0 1px 0 0 ${theme.palette.primary.dark}`,
-        // eslint-disable-next-line sort-keys -- disabling key order for readability
-        "&:hover": {
-          boxShadow: `0 1px 0 0 ${theme.palette.primary.dark}`,
-        },
-        // eslint-disable-next-line sort-keys -- disabling key order for readability
-        "&:active": {
-          boxShadow: "none",
-        },
-      },
-    },
-  };
-};
-
 /**
  * MuiCard Component
  */

package/src/theme/components/index.ts

@@ -1,3 +1,4 @@
 export { MuiAlert } from "./muiAlert";
 export { MuiAlertTitle } from "./muiAlertTitle";
+export { MuiButtonGroup } from "./muiButtonGroup";
 export { MuiTableCell } from "./muiTableCell";

package/src/theme/components/muiButtonGroup.ts

@@ -0,0 +1,79 @@
+import { Components } from "@mui/material";
+import { COLOR_MIXES } from "../../styles/common/constants/colorMixes";
+import { PALETTE } from "../../styles/common/constants/palette";
+import { BUTTON_GROUP_PROPS } from "../../styles/common/mui/buttonGroup";
+
+const SELECTORS = {
+  GROUPED: `.${BUTTON_GROUP_PROPS.CLASSES.GROUPED}`,
+};
+
+export const MuiButtonGroup: Components["MuiButtonGroup"] = {
+  defaultProps: {
+    disableElevation: true,
+    disableRipple: true,
+  },
+  styleOverrides: {
+    root: {
+      variants: [
+        /* PRIMARY CONTAINED */
+        {
+          props: {
+            color: BUTTON_GROUP_PROPS.COLOR.PRIMARY,
+            variant: BUTTON_GROUP_PROPS.VARIANT.CONTAINED,
+          },
+          style: {
+            [SELECTORS.GROUPED]: {
+              borderColor: PALETTE.PRIMARY_DARK,
+              boxShadow: `0 1px 0 0 ${PALETTE.PRIMARY_DARK}`,
+              minWidth: 0,
+              // eslint-disable-next-line sort-keys -- disabling key order for readability
+              "&:hover": {
+                boxShadow: `0 1px 0 0 ${PALETTE.PRIMARY_DARK}`,
+              },
+              // eslint-disable-next-line sort-keys -- disabling key order for readability
+              "&:active": {
+                boxShadow: "none",
+              },
+            },
+          },
+        },
+        /* SECONDARY OUTLINED */
+        {
+          props: {
+            color: BUTTON_GROUP_PROPS.COLOR.SECONDARY,
+            variant: BUTTON_GROUP_PROPS.VARIANT.OUTLINED,
+          },
+          style: {
+            [SELECTORS.GROUPED]: {
+              backgroundColor: PALETTE.COMMON_WHITE,
+              boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_08}`,
+              color: PALETTE.INK_MAIN,
+              minWidth: 0,
+              // eslint-disable-next-line sort-keys -- disabling key order for readability
+              "&:hover": {
+                backgroundColor: PALETTE.SMOKE_LIGHTEST,
+                boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_08}`,
+              },
+              // eslint-disable-next-line sort-keys -- disabling key order for readability
+              "&:active": {
+                backgroundColor: PALETTE.SMOKE_LIGHTEST,
+                boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}`,
+              },
+            },
+          },
+        },
+        /* SMALL */
+        {
+          props: {
+            size: BUTTON_GROUP_PROPS.SIZE.SMALL,
+          },
+          style: {
+            [SELECTORS.GROUPED]: {
+              padding: "6px 8px",
+            },
+          },
+        },
+      ],
+    },
+  },
+};

package/src/theme/theme.ts

@@ -80,7 +80,7 @@ export function createAppTheme(customOptions: ThemeOptions = {}): Theme {
     MuiBreadcrumbs: C.MuiBreadcrumbs(theme),
     MuiButton: C.MuiButton(theme),
     MuiButtonBase: C.MuiButtonBase(theme),
-    MuiButtonGroup: C.MuiButtonGroup(theme),
+    MuiButtonGroup: M.MuiButtonGroup,
     MuiCard: C.MuiCard,
     MuiCheckbox: C.MuiCheckbox(theme),
     MuiChip: C.MuiChip(theme),

package/tests/dataDictionaryColumnFilters.test.tsx

@@ -0,0 +1,101 @@
+import { matchers } from "@emotion/jest";
+import { jest } from "@jest/globals";
+import { composeStories } from "@storybook/react";
+import { waitFor } from "@storybook/test";
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import React from "react";
+import * as stories from "../src/components/DataDictionary/components/Filters/stories/filters.stories";
+import { MUI_CLASSES } from "../src/tests/mui/constants";
+import {
+  getButton,
+  getRole,
+  getStartsWithRegex,
+  getText,
+} from "../src/tests/utils";
+
+expect.extend(matchers);
+
+const { Default } = composeStories(stories);
+
+describe("DataDictionaryColumnFilters", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    render(<Default />);
+  });
+
+  it("renders correctly", async () => {
+    expect(await screen.findByText("Required")).toBeInTheDocument();
+  });
+
+  it("renders all filterable column headers", async () => {
+    expect(await screen.findByText("Required")).toBeInTheDocument();
+    expect(await screen.findByText("BioNetwork")).toBeInTheDocument();
+    expect(screen.queryByText("Example")).not.toBeInTheDocument();
+  });
+
+  it("renders BioNetwork filter options", async () => {
+    const buttonEl = getButton("BioNetwork");
+    fireEvent.click(buttonEl);
+    // Wait for menu to open.
+    await waitFor(() => expect(getRole("menu")).toBeInTheDocument());
+    expect(getText("Brain")).toBeInTheDocument();
+    expect(getText("Lung")).toBeInTheDocument();
+    expect(getText("Nervous System")).toBeInTheDocument();
+  });
+
+  it("renders BioNetwork filter options in alphabetical order", async () => {
+    const buttonEl = getButton("BioNetwork");
+    fireEvent.click(buttonEl);
+    // Wait for menu to open.
+    await waitFor(() => expect(getRole("menu")).toBeInTheDocument());
+    const optionEls = within(getRole("menu")).getAllByRole("button");
+    ["Brain", "Lung", "Nervous System", "Clear All"].forEach((expected, i) => {
+      expect(optionEls[i].textContent).toMatch(getStartsWithRegex(expected));
+    });
+  });
+
+  it("can select and deselect a filter option", async () => {
+    const buttonEl = getButton("BioNetwork");
+    fireEvent.click(buttonEl);
+    // Wait for menu to open.
+    await waitFor(() => expect(getRole("menu")).toBeInTheDocument());
+    // Select first option.
+    const optionEls = within(getRole("menu")).getAllByRole("button");
+    const optionEl = optionEls[0];
+    fireEvent.click(optionEl);
+    await waitFor(() => expect(optionEl).toHaveClass(MUI_CLASSES.SELECTED));
+    // Deselect first option.
+    fireEvent.click(optionEl);
+    await waitFor(() => expect(optionEl).not.toHaveClass(MUI_CLASSES.SELECTED));
+  });
+
+  it("clears all filters", async () => {
+    const buttonEl = getButton("BioNetwork");
+    fireEvent.click(buttonEl);
+    // Wait for menu to open.
+    await waitFor(() => expect(getRole("menu")).toBeInTheDocument());
+    // Select all options.
+    const optionEls = within(getRole("menu")).getAllByRole("button");
+    optionEls.forEach(async (el) => {
+      fireEvent.click(el);
+      await waitFor(() => expect(el).toHaveClass(MUI_CLASSES.SELECTED));
+    });
+    // Select "Clear All" button.
+    const clearEl = getButton("Clear All");
+    fireEvent.click(clearEl);
+    // Wait for options to be deselected.
+    await waitFor(() =>
+      optionEls.forEach((el) =>
+        expect(el).not.toHaveClass(MUI_CLASSES.SELECTED)
+      )
+    );
+  });
+
+  it("disables Clear All when nothing selected", async () => {
+    const buttonEl = getButton("BioNetwork");
+    fireEvent.click(buttonEl);
+    await waitFor(() => expect(getRole("menu")).toBeInTheDocument());
+    expect(getButton("Clear All")).toHaveClass(MUI_CLASSES.DISABLED);
+  });
+});