@cerebruminc/cerebellum 19.2.0 → 20.0.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # react-component-lib-boilerplate
 
+## [20.0.0](https://github.com/cerebruminc/cerebellum/compare/v19.2.0...v20.0.0) (2026-08-03)
+
+
+### ⚠ BREAKING CHANGES
+
+* **userInformationCard:** The themeOverride prop has been removed. Use the new avatarBackgroundColor prop directly instead of themeOverride.avatarBackgroundColor. The other themeOverride sub-properties (gradientSectionHeight, avatarSize, backgroundGradient, childrenDividerColor) were unused externally and are removed.
+
+### Features
+
+* **pill:** style Mantine Pill to match ClearableTag in mantineTheme.ts ([6460c74](https://github.com/cerebruminc/cerebellum/commit/6460c7467a45f19a3e3bb7e6d12d7315f1e3706c))
+* **scrollArea:** add ScrollArea theming to mantineTheme ([2f857be](https://github.com/cerebruminc/cerebellum/commit/2f857bef91765552bedea28b51ab3d1331a6af75))
+* **userInformationCard:** refactor to Mantine components and CSS modules ([e31191b](https://github.com/cerebruminc/cerebellum/commit/e31191b49da865225509506dfa8a20e9a1eb217d))
+
 ## [19.2.0](https://github.com/cerebruminc/cerebellum/compare/v19.1.1...v19.2.0) (2026-07-30)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerebruminc/cerebellum",
-  "version": "19.2.0",
+  "version": "20.0.0",
   "description": "Cerebrum's React Component Library",
   "type": "module",
   "main": "src/index.ts",

package/src/components/UserInformationCard/UserInformationCard.module.css

@@ -0,0 +1,212 @@
+/* UserInformationCard CSS module */
+
+/* ---- CardBox ---- */
+.cardBox {
+  background-color: var(--mantine-color-white);
+  border-radius: 10px;
+  box-shadow: var(--uic-box-shadow, 0 14px 68.6px 1.4px rgba(0, 0, 0, 0.13));
+  display: block;
+  flex-flow: column nowrap;
+  max-height: var(--uic-max-height, none);
+  max-width: 100%;
+  min-width: 310px;
+  width: var(--uic-width, 100%);
+}
+.cardBox[data-horizontal] {
+  display: flex;
+  flex-flow: row nowrap;
+}
+@media print {
+  .cardBox {
+    flex-flow: row nowrap;
+    print-color-adjust: exact;
+  }
+}
+
+/* ---- AvatarWrapper ---- */
+.avatarWrapper {
+  background: linear-gradient(var(--uic-gradient));
+  border-radius: 10px 10px 0 0;
+  display: block;
+  min-height: var(--uic-gradient-height);
+  padding: 19px 22px;
+  position: relative;
+  z-index: 2;
+}
+.avatarWrapper[data-horizontal] {
+  align-items: center;
+  border-radius: 10px 0 0 10px;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 15px;
+  justify-content: center;
+  min-height: 186px;
+  min-width: 186px;
+}
+@media print {
+  .avatarWrapper {
+    align-items: center;
+    border-radius: 10px 0 0 10px;
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 15px;
+    justify-content: center;
+    min-height: 186px;
+    min-width: 186px;
+    print-color-adjust: exact;
+  }
+}
+
+/* ---- Avatar container (wraps Mantine Avatar + optional badge) ---- */
+/* Vertical mode: center avatar below the gradient */
+.avatarContainer {
+  bottom: 0;
+  display: inline-block;
+  left: 50%;
+  position: absolute;
+  transform: translate(-50%, 35px);
+}
+.avatarWrapper[data-horizontal] .avatarContainer {
+  position: static;
+  bottom: auto;
+  left: auto;
+  transform: none;
+}
+@media print {
+  .avatarContainer {
+    position: relative;
+    bottom: inherit;
+    left: inherit;
+    transform: none;
+  }
+}
+
+.badge {
+  background-repeat: no-repeat;
+  background-size: contain;
+  border-radius: 50%;
+  bottom: 0;
+  height: var(--uic-badge-size);
+  left: 50%;
+  position: absolute;
+  transform: translate(-46%, 40%);
+  width: var(--uic-badge-size);
+  z-index: 10;
+}
+
+/* ---- HorizontalMeasure ---- */
+.horizontalMeasure {
+  width: 100%;
+}
+
+/* ---- DataWrapper ---- */
+.dataWrapper {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 28px;
+  padding: 60px 42px 52px 42px;
+  width: 100%;
+}
+.dataWrapper[data-has-children] {
+  padding-bottom: 34px;
+}
+.dataWrapper[data-horizontal] {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr minmax(100px, 1fr) minmax(100px, 1fr);
+  grid-template-areas:
+    "name name name dob ssn"
+    "address address address address address";
+  padding: 33px 65px 35px 33px;
+}
+.dataWrapper[data-horizontal][data-break-ssn] {
+  grid-template-columns: 1fr 1fr 1fr 1fr minmax(100px, 1fr);
+  grid-template-areas:
+    "name name name name dob"
+    "address address address address ssn";
+}
+.dataWrapper[data-horizontal][data-break-layout] {
+  grid-template-columns: 1fr;
+  grid-template-areas: "name" "address" "dob" "ssn";
+}
+@media print {
+  .dataWrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-areas:
+      "name name name name dob"
+      "address address address address ssn";
+  }
+}
+
+/* ---- Item ---- */
+.item {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 5px;
+  grid-area: var(--uic-grid-area);
+}
+
+/* ---- Label ---- */
+.label {
+  color: var(--mantine-color-gray-8);
+  font-size: 15px;
+  font-weight: 600;
+  width: 100%;
+}
+
+/* ---- OrderTag ---- */
+.orderTag {
+  background-color: #8da7ff; /* BLUE_35 — no exact Mantine shade */
+  border-radius: 6px;
+  color: var(--mantine-color-white);
+  display: inline-block;
+  font-size: 16px;
+  font-weight: 600;
+  max-width: calc(var(--uic-order-tag-max-width, 186px) - 44px);
+  padding: 6px 17px;
+}
+
+/* ---- ChildWrapper ---- */
+.childWrapper {
+  padding: 0 42px 52px 42px;
+}
+
+/* ---- Divider ---- */
+.divider {
+  background-color: var(--mantine-color-gray-4);
+  border: none;
+  height: 1px;
+  margin: 0 -9px 8px;
+}
+
+/* ---- ClearableTagWrapper ---- */
+.clearableTagWrapper {
+  margin-top: -15px;
+  margin-bottom: -10px;
+}
+
+/* Remove the shaded background behind the Pill close button */
+.pillRemove::before {
+  display: none;
+}
+
+.pillIcon {
+  align-items: center;
+  display: inline-flex;
+  flex-shrink: 0;
+  height: 14px;
+  margin-right: 6px;
+  opacity: 0.8;
+  width: 14px;
+}
+
+/* ---- Text styling ---- */
+.titleText {
+  overflow-wrap: anywhere;
+}
+.titleText[data-center] {
+  text-align: center;
+}
+.bodyText {
+  overflow-wrap: anywhere;
+}

package/src/components/UserInformationCard/UserInformationCard.stories.tsx

@@ -1,8 +1,7 @@
+import { Text } from "@mantine/core";
 import { Meta, StoryObj } from "@storybook/react";
 import { Fragment } from "react";
-import { HeadingH2 } from "../../const/text";
-import { IconTile } from "../IconTile/IconTile";
-import { Employee, User, UserRecords } from "../Icons";
+import { User, UserRecords } from "../Icons";
 import { UserInformationCard } from "./UserInformationCard";
 
 /** `UserInformationCard` is a display component that renders a card, which contains a gradient with an Avatar and information about a User.
@@ -66,6 +65,8 @@ export const PictureAvatar: Story = {
   },
 };
 
+/** Demonstrates the loading state, which renders Mantine Skeleton components
+ *  in place of the text fields while data is being fetched. */
 export const LoadingState: Story = {
   args: {
     avatarImageUrl: "https://picsum.photos/200",
@@ -102,10 +103,15 @@ export const Children: Story = {
 
     children: (
       <Fragment>
-        <HeadingH2>Put whatever you want in here</HeadingH2>
-        <IconTile Icon={Employee} label="Employee" onButtonClick={() => console.log("onButtonClick")} />
-        <HeadingH2>Make it look better than this</HeadingH2>
-        <IconTile Icon={Employee} label="Employee" onButtonClick={() => console.log("onButtonClick")} />
+        <Text variant="title-md" component="h2">
+          Put whatever you want in here
+        </Text>
+        <Text variant="body-md" c="gray.7" component="p">
+          Custom content below the card data
+        </Text>
+        <Text variant="title-md" component="h2">
+          Make it look better than this
+        </Text>
       </Fragment>
     ),
   },
@@ -129,7 +135,8 @@ export const AlternateMode: Story = {
   },
 };
 
-export const ThemeOverride: Story = {
+/** Demonstrates the `avatarBackgroundColor` prop, which overrides the default gradient on the Avatar placeholder. */
+export const AvatarBackground: Story = {
   args: {
     orderType: "Nope",
     firstName: "Don't do it",
@@ -139,6 +146,21 @@ export const ThemeOverride: Story = {
     dob: "07-08-xxxx",
     ssn: "xxx-xx-1234",
     width: 310,
-    themeOverride: { gradientSectionHeight: 110, avatarBackgroundColor: "red", avatarSize: 150, backgroundGradient: "blue, green" },
+    avatarBackgroundColor: "red",
+  },
+};
+
+/** Demonstrates a clearable message (Pill) with `isClearable` set to false, rendering the Pill without a remove button. */
+export const NonClearableMessage: Story = {
+  args: {
+    firstName: "Dave",
+    lastName: "Bascom",
+    address1: "P.O. Box 7340",
+    dob: "07-08-xxxx",
+    ssn: "xxx-xx-1234",
+    width: 310,
+    clearableMessage: "Applicant-Added Data",
+    ClearableMessageIcon: UserRecords,
+    isClearable: false,
   },
 };

package/src/components/UserInformationCard/UserInformationCard.test.tsx

@@ -1,9 +1,18 @@
+import { MantineProvider } from "@mantine/core";
 import { render, screen } from "@testing-library/react";
-import { HeadingH3 } from "../../const/text";
-import { withTheme } from "../../hocs/withTheme";
+import userEvent from "@testing-library/user-event";
+import { ComponentType, FC } from "react";
 import { UserInformationCard } from "./UserInformationCard";
 
-const ThemedInformationCard = withTheme(UserInformationCard);
+function withProviders<P extends {}>(Component: ComponentType<P>): FC<P> {
+  return (props: P) => (
+    <MantineProvider>
+      <Component {...props} />
+    </MantineProvider>
+  );
+}
+
+const ThemedInformationCard = withProviders(UserInformationCard);
 
 describe("UserInformationCard", () => {
   test("renders UserInformationCard", () => {
@@ -92,9 +101,29 @@ describe("UserInformationCard", () => {
     const childText = "This is some kind of text, passed to the child component";
     render(
       <ThemedInformationCard firstName="Foo" lastName="Bar">
-        <HeadingH3>{childText}</HeadingH3>
+        <p>{childText}</p>
       </ThemedInformationCard>
     );
     expect(screen.getByText(childText)).toBeInTheDocument();
   });
+
+  test("renders clearableMessage as a Pill", () => {
+    render(<ThemedInformationCard firstName="Foo" lastName="Bar" clearableMessage="Applicant-Added Data" />);
+    expect(screen.getByText("Applicant-Added Data")).toBeInTheDocument();
+  });
+
+  test("clearableMessage remove button hides the Pill when clicked", async () => {
+    const user = userEvent.setup();
+    render(<ThemedInformationCard firstName="Foo" lastName="Bar" clearableMessage="Applicant-Added Data" isClearable />);
+    expect(screen.getByText("Applicant-Added Data")).toBeInTheDocument();
+    const removeButton = screen.getByRole("button", { hidden: true });
+    await user.click(removeButton);
+    expect(screen.queryByText("Applicant-Added Data")).not.toBeInTheDocument();
+  });
+
+  test("clearableMessage without isClearable does not render a remove button", () => {
+    render(<ThemedInformationCard firstName="Foo" lastName="Bar" clearableMessage="Applicant-Added Data" isClearable={false} />);
+    expect(screen.getByText("Applicant-Added Data")).toBeInTheDocument();
+    expect(screen.queryByRole("button", { hidden: true })).not.toBeInTheDocument();
+  });
 });