Merge branch 'development' into DSD-1521/image-sizeBasedOn

NYPL · Nov 21, 2023 · 6cc6455 · 6cc6455
2 parents 7cd5a61 + 8d07fec
commit 6cc6455
Show file tree

Hide file tree

Showing 15 changed files with 310 additions and 163 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,16 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 - Adds the `sizeBasedOn` prop to the `Image` component.
 
+### Updates
+
+- Adds `hasVisitedStyles` prop to `Link` which is used to include or omit the visited state styles. Default value is true.
+- Removes `disabled` variant from `Link` theme file, as it isn't being used.
+- Updates the `font-weight` to `"regular"` for the `subtitle1` and `subtitle2` text styles.
+
+## Fixes
+
+- Adds a z-index on hover to the `SearchBar`'s select icon so it no longer disappears.
+
 ## 2.1.2 (November 9, 2023)
 
 ### Adds

diff --git a/src/components/DevelopmentGuide/DesignTokens.mdx b/src/components/DevelopmentGuide/DesignTokens.mdx
@@ -573,8 +573,8 @@ The following tokens can be used with the `fontWeight` (js) and `font-weight`
 |                 | heading.tertiary      | --nypl-fontWeights-heading-tertiary      | medium   | x          |
 |                 | heading.callout       | --nypl-fontWeights-heading-callout       | medium   | x          |
 |                 |                       |                                          |          |            |
-| **Subtitle**    | subtitle.subtitle1    | --nypl-fontWeights-subtitle-subtitle1    | medium   |            |
-|                 | subtitle.subtitle2    | --nypl-fontWeights-subtitle-subtitle2    | medium   |            |
+| **Subtitle**    | subtitle.subtitle1    | --nypl-fontWeights-subtitle-subtitle1    | regular  |            |
+|                 | subtitle.subtitle2    | --nypl-fontWeights-subtitle-subtitle2    | regular  |            |
 |                 |                       |                                          |          |            |
 | **Overline**    | overline.overline1    | --nypl-fontWeights-overline-overline1    | semibold |            |
 |                 | overline.overline2    | --nypl-fontWeights-overline-overline2    | semibold |            |

diff --git a/src/components/Heading/Heading.mdx b/src/components/Heading/Heading.mdx
@@ -9,10 +9,10 @@ import { changelogData } from "./headingChangelogData";
 
 # Heading
 
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `0.0.4`    |
-| Latest            | `2.1.1`    |
+| Component Version | DS Version   |
+| ----------------- | ------------ |
+| Added             | `0.0.4`      |
+| Latest            | `Prerelease` |
 
 ## Table of Contents
 

diff --git a/src/components/Heading/headingChangelogData.ts b/src/components/Heading/headingChangelogData.ts
@@ -9,6 +9,15 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Styles"],
+    notes: [
+      'Updates the `font-weight` to "regular" for the `subtitle1` and `subtitle2` text styles.',
+    ],
+  },
   {
     date: "2023-10-26",
     version: "2.1.1",
@@ -18,4 +27,11 @@ export const changelogData: ChangelogData[] = [
       'Updated the `aria-roledescription` value to "subtitle" (a more familiar and recognizable term) for the `overline` element.',
     ],
   },
+  {
+    date: "2023-9-28",
+    version: "2.0.0",
+    type: "Update",
+    affects: ["Styles"],
+    notes: ["Applied Typo2023 styles, including font size and font color."],
+  },
 ];
diff --git a/src/components/Link/Link.mdx b/src/components/Link/Link.mdx
@@ -1,7 +1,9 @@
 import { Box } from "@chakra-ui/react";
 import { ArgTypes, Canvas, Description, Meta, Source } from "@storybook/blocks";
 import { cloneElement } from "react";
+import { changelogData } from "./linkChangelogData";
 
+import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
 import Link from "./Link";
 import Icon from "../Icons/Icon";
 import * as LinkStories from "./Link.stories";
@@ -10,10 +12,10 @@ import * as LinkStories from "./Link.stories";
 
 # Link
 
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `0.0.4`    |
-| Latest            | `2.0.0`    |
+| Component Version | DS Version   |
+| ----------------- | ------------ |
+| Added             | `0.0.4`      |
+| Latest            | `Prerelease` |
 
 ## Table of Contents
 
@@ -24,6 +26,7 @@ import * as LinkStories from "./Link.stories";
 - {<Link href="#links-with-icons" target="_self">Links With Icons</Link>}
 - {<Link href="#anchor-element-rendering" target="_self">Anchor Element Rendering</Link>}
 - {<Link href="#link-with-routers" target="_self">Link with Routers</Link>}
+- {<Link href="#changelog" target="_self">Changelog</Link>}
 
 ## Overview
 
@@ -261,3 +264,7 @@ export const NextJsLink = (props) =>
   <Link type="action">Next Page</Link>
 </NextJsLink>
 }
+
+## Changelog
+
+<ComponentChangelogTable changelogData={changelogData} />
diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
@@ -28,6 +28,8 @@ export interface LinkProps {
   children: React.ReactNode;
   /** Additional class name to render in the `Link` component. */
   className?: string;
+  /** Used to include or remove visited state styles. Default is true. */
+  hasVisitedState?: boolean;
   /** The `href` attribute for the anchor element. */
   href?: string;
   /** ID used for accessibility purposes. */
@@ -152,6 +154,7 @@ export const Link = chakra(
     const {
       children,
       className,
+      hasVisitedState = true,
       href,
       id,
       isUnderlined = true,
@@ -204,7 +207,11 @@ export const Link = chakra(
       // }
       variant = type;
     }
-    const styles = useMultiStyleConfig("Link", { variant, finalIsUnderlined });
+    const styles = useMultiStyleConfig("Link", {
+      variant,
+      finalIsUnderlined,
+      hasVisitedState,
+    });
     const rel = type === "external" ? "nofollow noopener noreferrer" : null;
     const internalTarget =
       type === "external" ? "_blank" : target ? target : null;

diff --git a/src/components/Link/linkChangelogData.ts b/src/components/Link/linkChangelogData.ts
@@ -0,0 +1,22 @@
+/** This data is used to populate the ComponentChangelogTable component.
+ *
+ * date: string (when adding new entry during development, set value as "Prerelease")
+ * version: string (when adding new entry during development, set value as "Prerelease")
+ * type: "Bug Fix" | "New Feature" | "Update";
+ * affects: array["Accessibility" | "Documentation" | "Functionality" | "Styles"];
+ * notes: array (will render as a bulleted list, add one array element for each list element)
+ */
+import { ChangelogData } from "../../utils/ComponentChangelogTable";
+
+export const changelogData: ChangelogData[] = [
+  {
+    date: "2023-11-14",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Styles"],
+    notes: [
+      "Added `hasVisitedStyles` prop which is used to include or omit the component's visited state styles. Default value is true.",
+      "Removed `disabled` variant from theme file, as it isn't being used.",
+    ],
+  },
+];
diff --git a/src/components/SearchBar/SearchBar.mdx b/src/components/SearchBar/SearchBar.mdx
@@ -7,10 +7,10 @@ import Link from "../Link/Link";
 
 # SearchBar
 
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `0.0.4`    |
-| Latest            | `2.0.0`    |
+| Component Version | DS Version   |
+| ----------------- | ------------ |
+| Added             | `0.0.4`      |
+| Latest            | `Prerelease` |
 
 ## Table of Contents
 

diff --git a/src/components/SearchBar/searchBarChangelogData.ts b/src/components/SearchBar/searchBarChangelogData.ts
@@ -0,0 +1,21 @@
+/** This data is used to populate the ComponentChangelogTable component.
+ *
+ * date: string (when adding new entry during development, set value as "Prerelease")
+ * version: string (when adding new entry during development, set value as "Prerelease")
+ * type: "Bug Fix" | "New Feature" | "Update";
+ * affects: array["Accessibility" | "Documentation" | "Functionality" | "Styles"];
+ * notes: array (will render as a bulleted list, add one array element for each list element)
+ */
+import { ChangelogData } from "../../utils/ComponentChangelogTable";
+
+export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Bug Fix",
+    affects: ["Styles"],
+    notes: [
+      "Added a z-index on hover to the select icon so it no longer disappears.",
+    ],
+  },
+];
diff --git a/src/components/StyleGuide/Typography.mdx b/src/components/StyleGuide/Typography.mdx
@@ -746,7 +746,7 @@ The `size` prop can be used to render a specific style from the DS default text
 |                 | JS Token                     | CSS Token                                          | Value             |
 | --------------- | :--------------------------- | :------------------------------------------------- | :---------------- |
 | **Font Size**   | `desktop.subtitle.subtitle1` | `var(--nypl-fontSizes-desktop-subtitle-subtitle1)` | `1.125rem` (18px) |
-| **Font Weight** | `subtitle.subtitle1`         | `var(--nypl-fontWeights-subtitle-subtitle1)`       | `500` (medium)    |
+| **Font Weight** | `subtitle.subtitle1`         | `var(--nypl-fontWeights-subtitle-subtitle1)`       | `400` (regular)   |
 | **Line Height** | --                           | --                                                 | `1.25`            |
 
 {
@@ -786,11 +786,11 @@ The `size` prop can be used to render a specific style from the DS default text
 </List>
 }
 
-|                 | JS Token                     | CSS Token                                          | Value          |
-| --------------- | :--------------------------- | :------------------------------------------------- | :------------- |
-| **Font Size**   | `desktop.subtitle.subtitle2` | `var(--nypl-fontSizes-desktop-subtitle-subtitle2)` | `1rem` (16px)  |
-| **Font Weight** | `subtitle.subtitle2`         | `var(--nypl-fontWeights-subtitle-subtitle2)`       | `500` (medium) |
-| **Line Height** | --                           | --                                                 | `1.3`          |
+|                 | JS Token                     | CSS Token                                          | Value           |
+| --------------- | :--------------------------- | :------------------------------------------------- | :-------------- |
+| **Font Size**   | `desktop.subtitle.subtitle2` | `var(--nypl-fontSizes-desktop-subtitle-subtitle2)` | `1rem` (16px)   |
+| **Font Weight** | `subtitle.subtitle2`         | `var(--nypl-fontWeights-subtitle-subtitle2)`       | `400` (regular) |
+| **Line Height** | --                           | --                                                 | `1.3`           |
 
 {
 

diff --git a/src/components/Text/Text.mdx b/src/components/Text/Text.mdx
@@ -1,22 +1,25 @@
 import { ArgTypes, Canvas, Description, Meta } from "@storybook/blocks";
 
+import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
 import * as TextStories from "./Text.stories";
 import Link from "../Link/Link";
+import { changelogData } from "./textChangelogData";
 
 <Meta of={TextStories} />
 
 # Text
 
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `0.25.1`   |
-| Latest            | `2.0.0`    |
+| Component Version | DS Version   |
+| ----------------- | ------------ |
+| Added             | `0.25.1`     |
+| Latest            | `Prerelease` |
 
 ## Table of Contents
 
 - {<Link href="#overview" target="_self">Overview</Link>}
 - {<Link href="#component-props" target="_self">Component Props</Link>}
 - {<Link href="#accessibility" target="_self">Accessibility</Link>}
+- {<Link href="#changelog" target="_self">Changelog</Link>}
 
 ## Overview
 
@@ -61,3 +64,7 @@ Guide](../?path=/docs/style-guide-typography--docs#text-display-sizes).
 `tag`, `mini`
 
 <Canvas of={TextStories.DeprecatedOptions} />
+
+## Changelog
+
+<ComponentChangelogTable changelogData={changelogData} />
diff --git a/src/components/Text/textChangelogData.ts b/src/components/Text/textChangelogData.ts
@@ -0,0 +1,28 @@
+/** This data is used to populate the ComponentChangelogTable component.
+ *
+ * date: string (when adding new entry during development, set value as "Prerelease")
+ * version: string (when adding new entry during development, set value as "Prerelease")
+ * type: "Bug Fix" | "New Feature" | "Update";
+ * affects: array["Accessibility" | "Documentation" | "Functionality" | "Styles"];
+ * notes: array (will render as a bulleted list, add one array element for each list element)
+ */
+import { ChangelogData } from "../../utils/ComponentChangelogTable";
+
+export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Accessibility"],
+    notes: [
+      'Updates the `font-weight` to "regular" for the `subtitle1` and `subtitle2` text styles.',
+    ],
+  },
+  {
+    date: "2023-9-28",
+    version: "2.0.0",
+    type: "Update",
+    affects: ["Styles"],
+    notes: ["Applied Typo2023 styles, including font size and font color."],
+  },
+];