Merge pull request #1709 from NYPL/development

Release v3.5.0

CHANGELOG.md

@@ -8,6 +8,21 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 3.5.0 (December 5, 2024)
+
+### Adds
+
+- Adds the `SubNav` component.
+- Adds the `useScrollFadeStyles` hook.
+
+### Updates
+
+- Updates the `MultiSelect` component to add `itemCount` as a data property to the `items` prop to render the item count for an option.
+
+### Fixes
+
+- Fixes issue where focus indicator was being cut off in places in the `Template` component.
+
 ## 3.4.4 (November 20, 2024)
 
 ### Adds

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "3.4.4",
+  "version": "3.5.0",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",

src/components/MultiSelect/MultiSelect.mdx

@@ -12,7 +12,7 @@ import { changelogData } from "./multiSelectChangelogData";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `1.4.0`    |
-| Latest            | `3.4.0`    |
+| Latest            | `3.5.0`    |
 
 ## Table of Contents
 
@@ -24,6 +24,7 @@ import { changelogData } from "./multiSelectChangelogData";
 - {<Link href="#nested-list-items" target="_self">Nested List Items</Link>}
 - {<Link href="#disabled-list-items" target="_self">Disabled List Items</Link>}
 - {<Link href="#search-input-field" target="_self">Search Input Field</Link>}
+- {<Link href="#show-item-count" target="_self">Show Item Count</Link>}
 - {<Link href="#block-element-or-float" target="_self">Block Element or Float</Link>}
 - {<Link href="#width" target="_self">Width</Link>}
 - {<Link href="#default-open-state" target="_self">Default Open State</Link>}
@@ -120,7 +121,8 @@ The options rendered in the `MultiSelect` component are passed into the
 component's `items` prop. The expected data structure is an array of objects,
 with each item having an `id` and a `name`. You also have the option to include
 a second level of child items. Both parent and child items can optionally use
-the `isDisabled` flag. The format is as follows:
+the `isDisabled` flag and include the `itemCount` prop to render their associated
+count. The format is as follows:
 
 <Source
   code={`
@@ -132,11 +134,13 @@ the `isDisabled` flag. The format is as follows:
     {
       id: "art",
       name: "Art",
+      itemCount: 5
     },
     {
       id: "architecture",
       name: "Architecture",
       isDisabled: true,
+      itemCount: 7
     },
     {
       id: 'design',
@@ -153,7 +157,7 @@ the `isDisabled` flag. The format is as follows:
           name: 'User Experience'
         },
         {
-          id: 'tecture',
+          id: 'architecture',
           isDisabled: false,
           name: 'Architecture'
         },
@@ -325,7 +329,7 @@ child checkbox will not be clickable and its state will not change.
           name: 'User Experience'
         },
         {
-          id: 'tecture',
+          id: 'architecture_design',
           isDisabled: false,
           name: 'Architecture'
         },
@@ -378,7 +382,7 @@ child checkbox will not be clickable and its state will not change.
           name: 'User Experience'
         },
         {
-          id: 'tecture',
+          id: 'architecture_design',
           isDisabled: true,
           name: 'Architecture'
         },
@@ -440,6 +444,72 @@ the component to allow users to search the available checkbox items.
   language="jsx"
 />
 
+## Show Item Count
+
+The recommended UX pattern for filtering is to include an item count associated
+with each option in a `MultiSelect` component. The item counts can be rendered
+by passing the `itemCount` data property to the `items` prop.
+
+<Source
+  code={`
+<MultiSelect
+  buttonText="MultiSelect"
+  id="multi-select-id"
+  isBlockElement
+  items={[
+        {
+          id: "art",
+          name: "Art",
+          itemCount: 7,
+        },
+        {
+          id: "architecture",
+          name: "Architecture",
+          itemCount: 20,
+        },
+        {
+          id: "design",
+          name: "Design",
+          children: [
+            {
+              id: "fashion",
+              name: "Fashion",
+              itemCount: 2,
+            },
+            {
+              id: "ux",
+              name: "User Experience",
+              itemCount: 5,
+            },
+            {
+              id: "architecture_design",
+              name: "Architecture",
+              itemCount: 3,
+            },
+            {
+              id: "home",
+              name: "Home",
+              itemCount: 1,
+            },
+          ],
+          itemCount: 11,
+        },
+        {
+          id: "business",
+          name: "Business",
+          itemCount: 2,
+        },
+        ...
+      ],
+    },
+  ]}
+/>
+`}
+  language="jsx"
+/>
+
+<Canvas of={MultiSelectStories.itemCountListItems} />
+
 ## Block Element or Float
 
 Using the `isBlockElement` prop, the `MultiSelect` component can be configured

src/components/MultiSelect/MultiSelect.stories.tsx

@@ -87,7 +87,7 @@ const withChildrenItems = [
         name: "User Experience",
       },
       {
-        id: "tecture",
+        id: "architecture_design",
         name: "Architecture",
       },
       {
@@ -139,7 +139,7 @@ const withDisabledItems = [
         isDisabled: true,
       },
       {
-        id: "tecture",
+        id: "architecture_design",
         name: "Architecture",
         isDisabled: false,
       },
@@ -185,7 +185,7 @@ const withDisabledAllChildrenItems = [
         isDisabled: true,
       },
       {
-        id: "tecture",
+        id: "architecture_design",
         name: "Architecture",
         isDisabled: true,
       },
@@ -202,6 +202,61 @@ const withDisabledAllChildrenItems = [
   },
 ];
 
+const withItemCountItems = [
+  {
+    id: "art",
+    name: "Art",
+    itemCount: 7,
+  },
+  {
+    id: "architecture",
+    name: "Architecture",
+    itemCount: 20,
+  },
+  {
+    id: "design",
+    name: "Design",
+    children: [
+      {
+        id: "fashion",
+        name: "Fashion",
+        itemCount: 2,
+      },
+      {
+        id: "ux",
+        name: "User Experience",
+        itemCount: 5,
+      },
+      {
+        id: "architecture_design",
+        name: "Architecture",
+        itemCount: 3,
+      },
+      {
+        id: "home",
+        name: "Home",
+        itemCount: 1,
+      },
+    ],
+    itemCount: 11,
+  },
+  {
+    id: "business",
+    name: "Business",
+    itemCount: 2,
+  },
+  {
+    id: "education",
+    name: "Education",
+    itemCount: 15,
+  },
+  {
+    id: "games",
+    name: "Games",
+    itemCount: 6,
+  },
+];
+
 const meta: Meta<typeof MultiSelect> = {
   title: "Components/Form Elements/MultiSelect",
   component: MultiSelect,
@@ -396,6 +451,18 @@ export const searchInputField: Story = {
   ),
 };
 
+export const itemCountListItems: Story = {
+  render: () => (
+    <MultiSelectStory
+      id="multi-select-id-8"
+      isBlockElement
+      isDefaultOpen={false}
+      isSearchable={false}
+      items={withItemCountItems}
+    />
+  ),
+};
+
 export const isBlockElement: Story = {
   name: "isBlockElement",
   render: () => (
@@ -406,13 +473,13 @@ export const isBlockElement: Story = {
           <Stack align="left" spacing="s">
             <Stack align="left">
               <MultiSelectStory
-                id="multi-select-id-8"
+                id="multi-select-id-9"
                 isBlockElement
                 items={withItems}
                 listOverflow="expand"
               />
               <MultiSelectStory
-                id="multi-select-id-9"
+                id="multi-select-id-10"
                 isBlockElement
                 items={withItems}
                 listOverflow="expand"
@@ -434,9 +501,9 @@ export const isBlockElement: Story = {
           />
           <Stack align="left" spacing="s">
             <Stack direction="row" width="100%" alignContent="stretch">
-              <MultiSelectStory id="multi-select-id-10" items={withItems} />
               <MultiSelectStory id="multi-select-id-11" items={withItems} />
               <MultiSelectStory id="multi-select-id-12" items={withItems} />
+              <MultiSelectStory id="multi-select-id-13" items={withItems} />
             </Stack>
             <Text>
               Maecenas sed diam eget risus varius blandit sit amet non magna.
@@ -474,15 +541,15 @@ export const width: Story = {
             text="full (default configuration)"
           />
           <MultiSelectStory
-            id="multi-select-id-13"
+            id="multi-select-id-14"
             isBlockElement
             items={withItems}
           />
         </div>
         <div>
           <Heading level="h3" size="heading6" text="fitContent" />
           <MultiSelectStory
-            id="multi-select-id-14"
+            id="multi-select-id-15"
             isBlockElement
             items={withItems}
             width="fitContent"
@@ -496,7 +563,7 @@ export const width: Story = {
 export const defaultOpenState: Story = {
   render: () => (
     <MultiSelectStory
-      id="multi-select-id-15"
+      id="multi-select-id-16"
       isBlockElement
       isDefaultOpen={true}
       items={withChildrenItems}
@@ -507,7 +574,7 @@ export const defaultOpenState: Story = {
 export const closeOnBlurState: Story = {
   render: () => (
     <MultiSelectStory
-      id="multi-select-id-15"
+      id="multi-select-id-17"
       closeOnBlur={true}
       isBlockElement
       items={withChildrenItems}

src/components/MultiSelect/MultiSelect.test.tsx

@@ -40,6 +40,23 @@ const disabledItems = [
   { id: "furniture", name: "Furniture", isDisabled: false },
 ];
 
+const itemsWithCount = [
+  { id: "dogs", name: "Dogs", itemCount: 5 },
+  { id: "cats", name: "Cats", itemCount: 11 },
+  { id: "cars", name: "Cars", itemCount: 7 },
+  {
+    id: "colors",
+    name: "Colors",
+    itemCount: 9,
+    children: [
+      { id: "red", name: "Red", itemCount: 8 },
+      { id: "blue", name: "Blue", itemCount: 1 },
+    ],
+  },
+  { id: "plants", name: "Plants", itemCount: 4 },
+  { id: "furniture", name: "Furniture", itemCount: 6 },
+];
+
 const defaultItemsVisible = 5;
 
 const MultiSelectTestComponent = ({
@@ -218,6 +235,31 @@ describe("MultiSelect", () => {
     expect(screen.getByLabelText("Blue")).toBeDisabled();
   });
 
+  it("should initially render with open menu and items with item count", () => {
+    render(
+      <MultiSelect
+        id="multiselect-test-id"
+        buttonText="Multiselect button text"
+        isDefaultOpen={true}
+        isSearchable={false}
+        isBlockElement={false}
+        defaultItemsVisible={defaultItemsVisible}
+        items={itemsWithCount}
+        selectedItems={selectedTestItems}
+        onChange={() => null}
+        onClear={() => null}
+      />
+    );
+    expect(screen.getByRole("button").getAttribute("aria-expanded")).toEqual(
+      "true"
+    );
+    expect(screen.getAllByRole("checkbox")).toHaveLength(8);
+    expect(screen.getByLabelText("Dogs5")).toBeInTheDocument();
+    expect(screen.getByLabelText("Cats11")).toBeInTheDocument();
+    expect(screen.getByLabelText("Cars7")).toBeInTheDocument();
+    expect(screen.getByLabelText("Red8")).toBeInTheDocument();
+  });
+
   it("should initially render with open menu if isDefaultOpen prop is true", () => {
     render(
       <MultiSelect