Merges in development, updates CHANGELOG

CHANGELOG.md

@@ -8,14 +8,25 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+### Updates
+
+- Updates `Template` component(s) and styles per [TAD](https://docs.google.com/document/d/1vZJX7Y-DnEM44-iWw5qoXGdxqavHEN6prhr-YDTNr0o/edit?pli=1&tab=t.0).
+
+## 3.5.0 (December 5, 2024)
+
 ### Adds
 
-- Adds the `"SubNav"`component.
+- 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.5.0-rc2",
+  "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
 
@@ -139,7 +139,7 @@ count. The format is as follows:
     {
       id: "architecture",
       name: "Architecture",
-      isDisabled: true,,
+      isDisabled: true,
       itemCount: 7
     },
     {
@@ -157,7 +157,7 @@ count. The format is as follows:
           name: 'User Experience'
         },
         {
-          id: 'tecture',
+          id: 'architecture',
           isDisabled: false,
           name: 'Architecture'
         },
@@ -329,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'
         },
@@ -382,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'
         },
@@ -446,9 +446,9 @@ the component to allow users to search the available checkbox items.
 
 ## Show Item Count
 
-The recommended UX patterns 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.
+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={`
@@ -482,7 +482,7 @@ passing the `itemCount` data property to the `items` prop.
               itemCount: 5,
             },
             {
-              id: "tecture",
+              id: "architecture_design",
               name: "Architecture",
               itemCount: 3,
             },

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,
       },
@@ -228,7 +228,7 @@ const withItemCountItems = [
         itemCount: 5,
       },
       {
-        id: "tecture",
+        id: "architecture_design",
         name: "Architecture",
         itemCount: 3,
       },

src/components/MultiSelect/multiSelectChangelogData.ts

@@ -10,8 +10,8 @@ import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
   {
-    date: "Prerelease",
-    version: "Prerelease",
+    date: "2024-12-05",
+    version: "3.5.0",
     type: "Update",
     affects: ["Documentation", "Functionality"],
     notes: [

src/components/SubNav/SubNav.mdx

@@ -12,10 +12,10 @@ import { changelogData } from "./subNavChangelogData";
 
 # SubNav
 
-| Component Version | DS Version   |
-| ----------------- | ------------ |
-| Added             | `Prerelease` |
-| Latest            | `Prerelease` |
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `3.5.0`    |
+| Latest            | `3.5.0`    |
 
 ## Table of Contents
 

src/components/SubNav/SubNav.tsx

@@ -114,20 +114,28 @@ interface SubNavButtonProps extends SubNavItemProps {
 
 export const SubNavButton: React.FC<
   React.PropsWithChildren<SubNavButtonProps>
-> = ({ id, children, isOutlined, isSelected, screenreaderOnlyText = "" }) => {
+> = ({
+  id,
+  children,
+  isOutlined,
+  isSelected,
+  onClick,
+  screenreaderOnlyText = "",
+}) => {
   const childrenStyles = useMultiStyleConfig("SubNavChildren", {
     isOutlined: isOutlined,
   });
 
   return (
     <li>
       <Button
-        id={id}
+        aria-current={isSelected ? "page" : null}
         buttonType="text"
         className={isSelected ? "selectedItem" : ""}
-        sx={childrenStyles.outLine}
-        aria-current={isSelected ? "page" : null}
+        id={id}
+        onClick={onClick}
         screenreaderOnlyText={screenreaderOnlyText}
+        sx={childrenStyles.outLine}
       >
         {children}
       </Button>
@@ -150,14 +158,14 @@ export const SubNavLink: React.FC<React.PropsWithChildren<SubNavLinkProps>> = ({
   return (
     <li>
       <Link
-        key={id}
-        id={id}
-        type="action"
+        aria-current={isSelected ? "page" : null}
+        className={isSelected ? "selectedItem" : ""}
         href={href}
+        id={id}
         isUnderlined={false}
+        key={id}
         screenreaderOnlyText={screenreaderOnlyText}
-        aria-current={isSelected ? "page" : null}
-        className={isSelected ? "selectedItem" : ""}
+        type="action"
         sx={childrenStyles.outLine}
       >
         {children}

src/components/SubNav/subNavChangelogData.ts

@@ -10,8 +10,8 @@ import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
   {
-    date: "Prerelease",
-    version: "Prerelease",
+    date: "2024-12-05",
+    version: "3.5.0",
     type: "New Feature",
     affects: ["Documentation", "Functionality"],
     notes: ["Added the `SubNav` component"],

src/components/Template/templateChangelogData.ts

@@ -18,6 +18,15 @@ export const changelogData: ChangelogData[] = [
       "Major update to component and styles based on the [Template TAD](https://docs.google.com/document/d/1vZJX7Y-DnEM44-iWw5qoXGdxqavHEN6prhr-YDTNr0o/edit?pli=1&tab=t.0).",
     ],
   },
+  {
+    date: "2024-12-05",
+    version: "3.5.0",
+    type: "Bug Fix",
+    affects: ["Styles"],
+    notes: [
+      "Adjusts padding to fix an issue where focus indicators were being cut off in the primary content section.",
+    ],
+  },
   {
     date: "2024-10-02",
     version: "3.4.0",