Merge pull request #1707 from NYPL/development

Hotfix Release 3.4.4

CHANGELOG.md

@@ -8,6 +8,12 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 3.4.4 (November 20, 2024)
+
+### Adds
+
+- Fixes a styling issue in the `Header`'s list to make it stricter.
+
 ## 3.4.3 (November 18, 2024)
 
 ### Adds

package.json

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

src/components/Header/Header.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import Header from "./Header";
+import Pagination from "../Pagination/Pagination";
 
 const meta: Meta<typeof Header> = {
   title: "Components/Temp/Header",
@@ -14,5 +15,11 @@ type Story = StoryObj<typeof Header>;
 export const WithControls: Story = {
   args: {},
   parameters: {},
-  render: () => <Header />,
+  render: () => (
+    <>
+      <Header />
+      <Pagination pageCount={10} />
+      <h1>test </h1>
+    </>
+  ),
 };

src/theme/components/headerLowerNav.ts

@@ -13,15 +13,15 @@ const linkFocusHoverStyles = {
 const HeaderLowerNav = {
   baseStyle: {
     ul: {
-      alignItems: "center",
-      marginBottom: "0",
-      marginLeft: "auto",
-      whiteSpace: "nowrap",
-    },
-    li: {
-      marginEnd: { mh: "s", xl: "m" },
-      _last: {
-        marginRight: "0",
+      alignItems: "center !important",
+      marginBottom: "0 !important",
+      marginLeft: "auto !important",
+      whiteSpace: "nowrap !important",
+      li: {
+        marginEnd: { mh: "s !important", xl: "m !important" },
+        _last: {
+          marginRight: "0 !important",
+        },
       },
     },
     "li > a": {

src/theme/components/headerUpperNav.ts

@@ -5,17 +5,17 @@ const HeaderUpperNav = {
   baseStyle: {
     height: "37px",
     ul: {
-      alignItems: "center",
-      display: "flex",
-      margin: "0",
-      whiteSpace: "nowrap",
-    },
-    li: {
-      fontSize: "var(--nypl-fontSizes-desktop-body-body2) !important",
-      fontWeight: "medium",
-      marginRight: "s",
-      _last: {
-        marginRight: "0",
+      alignItems: "center !important",
+      display: "flex !important",
+      margin: "0 !important",
+      whiteSpace: "nowrap !important",
+      li: {
+        fontSize: "var(--nypl-fontSizes-desktop-body-body2) !important",
+        fontWeight: "medium !important",
+        marginRight: "s !important",
+        _last: {
+          marginRight: "0 !important",
+        },
       },
     },
     a: {