updates based on feedback

NYPL · Oct 10, 2023 · 594edf8 · 594edf8
1 parent aa6750c
commit 594edf8
Show file tree

Hide file tree

Showing 9 changed files with 134 additions and 104 deletions.
diff --git a/src/components/DatePicker/DatePicker.mdx b/src/components/DatePicker/DatePicker.mdx
@@ -1,9 +1,10 @@
 import { ArgTypes, Canvas, Description, Meta, Source } from "@storybook/blocks";
 
+import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
 import * as DatePickerStories from "./DatePicker.stories";
+import { changelogData } from "./datePickerChangelogData";
 import Link from "../Link/Link";
 import Table from "../Table/Table";
-import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
 
 <Meta of={DatePickerStories} />
 
@@ -258,26 +259,4 @@ const onSubmit = () => {
 
 ## Changelog
 
-export const changelogData = [
-  {
-    date: "???",
-    version: "Prerelease",
-    type: "Update",
-    affects: "Accessibility",
-    notes: [
-      "Updates to pass a secondaryHelperTextId to its TextInput if needed so that the aria-describedby value can be associated with all relevant helperTexts.",
-      "Updates so that focus remains on input after value is changed.",
-    ],
-  },
-  {
-    date: "2023-9-28",
-    version: "2.0.0",
-    type: "Update",
-    affects: "Styles",
-    notes: [
-      "Applied Typo2023 styles, including font size, font color, and text link patterns.",
-    ],
-  },
-];
-
 <ComponentChangelogTable changelogData={changelogData} />
diff --git a/src/components/DatePicker/datePickerChangelogData.ts b/src/components/DatePicker/datePickerChangelogData.ts
@@ -0,0 +1,29 @@
+/** 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: "Accessibility" | "Documentation" | "Functionality" | "Styles";
+ * notes: array (will render as a bulleted list, add one array element for each list element)
+ */
+export const changelogData = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: "Accessibility",
+    notes: [
+      "Updates to pass a secondaryHelperTextId to its TextInput if needed so that the aria-describedby value can be associated with all relevant helperTexts.",
+      "Updates so that focus remains on input after value is changed.",
+    ],
+  },
+  {
+    date: "2023-9-28",
+    version: "2.0.0",
+    type: "Update",
+    affects: "Styles",
+    notes: [
+      "Applied Typo2023 styles, including font size, font color, and text link patterns.",
+    ],
+  },
+];
diff --git a/src/components/FeedbackBox/FeedbackBox.mdx b/src/components/FeedbackBox/FeedbackBox.mdx
@@ -1,8 +1,9 @@
 import { ArgTypes, Canvas, Description, Meta, Source } from "@storybook/blocks";
 
+import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
 import * as FeedbackBoxStories from "./FeedbackBox.stories";
+import { changelogData } from "./feedbackBoxChangelogData";
 import Link from "../Link/Link";
-import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
 
 <Meta of={FeedbackBoxStories} />
 
@@ -388,25 +389,4 @@ const MyComponent = () => {
 
 ## Changelog
 
-export const changelogData = [
-  {
-    date: "???",
-    version: "Prerelease",
-    type: "Update",
-    affects: "Accessibility, Styles",
-    notes: [
-      "Remove the underline on the component's `Privacy Policy` link.",
-    ],
-  },
-  {
-    date: "2023-9-28",
-    version: "2.0.0",
-    type: "Update",
-    affects: "Styles",
-    notes: [
-      "Applied Typo2023 styles, including font size, font color, and text link patterns.",
-    ],
-  },
-];
-
 <ComponentChangelogTable changelogData={changelogData} />
diff --git a/src/components/FeedbackBox/feedbackBoxChangelogData.ts b/src/components/FeedbackBox/feedbackBoxChangelogData.ts
@@ -0,0 +1,26 @@
+/** 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: "Accessibility" | "Documentation" | "Functionality" | "Styles";
+ * notes: array (will render as a bulleted list, add one array element for each list element)
+ */
+export const changelogData = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: "Accessibility, Styles",
+    notes: ["Remove the underline on the component's `Privacy Policy` link."],
+  },
+  {
+    date: "2023-9-28",
+    version: "2.0.0",
+    type: "Update",
+    affects: "Styles",
+    notes: [
+      "Applied Typo2023 styles, including font size, font color, and text link patterns.",
+    ],
+  },
+];
diff --git a/src/components/Hero/Hero.mdx b/src/components/Hero/Hero.mdx
@@ -1,8 +1,9 @@
 import { ArgTypes, Canvas, Description, Meta, Source } from "@storybook/blocks";
 
+import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
 import * as HeroStories from "./Hero.stories";
+import { changelogData } from "./heroChangelogData";
 import Link from "../Link/Link";
-import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
 
 <Meta of={HeroStories} />
 
@@ -202,25 +203,4 @@ and `"secondaryWhatsOn"`.
 
 ## Changelog
 
-export const changelogData = [
-  {
-    date: "???",
-    version: "Prerelease",
-    type: "Bug Fix",
-    affects: "Functionality",
-    notes: [
-      "Fixes an issue with `backgroundColor` and `foregroundColor` props not prioritizing the passed design token values for the `Hero` component.",
-    ],
-  },
-  {
-    date: "2023-9-28",
-    version: "2.0.0",
-    type: "Update",
-    affects: "Styles",
-    notes: [
-      "Applied Typo2023 styles, including font size, font color, and text link patterns.",
-    ],
-  },
-];
-
 <ComponentChangelogTable changelogData={changelogData} />
diff --git a/src/components/Hero/heroChangelogData.ts b/src/components/Hero/heroChangelogData.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: "Accessibility" | "Documentation" | "Functionality" | "Styles";
+ * notes: array (will render as a bulleted list, add one array element for each list element)
+ */
+export const changelogData = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Bug Fix",
+    affects: "Functionality",
+    notes: [
+      "Fixes an issue with `backgroundColor` and `foregroundColor` props not prioritizing the passed design token values for the `Hero` component.",
+    ],
+  },
+  {
+    date: "2023-9-28",
+    version: "2.0.0",
+    type: "Update",
+    affects: "Styles",
+    notes: [
+      "Applied Typo2023 styles, including font size, font color, and text link patterns.",
+    ],
+  },
+] as const;
diff --git a/src/components/Slider/Slider.mdx b/src/components/Slider/Slider.mdx
@@ -1,8 +1,9 @@
 import { ArgTypes, Canvas, Description, Meta, Source } from "@storybook/blocks";
 
+import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
 import * as SliderStories from "./Slider.stories";
+import { changelogData } from "./sliderChangelogData";
 import Link from "../Link/Link";
-import ComponentChangelogTable from "../../utils/ComponentChangelogTable";
 
 <Meta of={SliderStories} />
 
@@ -335,23 +336,4 @@ function RangeSliderValuesUpdateExample() {
 
 ## Changelog
 
-export const changelogData = [
-  {
-    date: "???",
-    version: "Prerelease",
-    type: "Bug Fix",
-    affects: "Functionality",
-    notes: [
-      "Updated to use appropriate aria-label values for the slider thumbs and text input fields.",
-    ],
-  },
-  {
-    date: "2023-9-28",
-    version: "2.0.0",
-    type: "Update",
-    affects: "Styles",
-    notes: ["Applied Typo2023 styles, including font size and font color."],
-  },
-];
-
 <ComponentChangelogTable changelogData={changelogData} />
diff --git a/src/components/Slider/sliderChangelogData.ts b/src/components/Slider/sliderChangelogData.ts
@@ -0,0 +1,26 @@
+/** 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: "Accessibility" | "Documentation" | "Functionality" | "Styles";
+ * notes: array (will render as a bulleted list, add one array element for each list element)
+ */
+export const changelogData = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Bug Fix",
+    affects: "Functionality",
+    notes: [
+      "Updated to use appropriate aria-label values for the slider thumbs and text input fields.",
+    ],
+  },
+  {
+    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/utils/ComponentChangelogTable.tsx b/src/utils/ComponentChangelogTable.tsx
@@ -1,36 +1,36 @@
-import { PropsWithChildren } from "react";
-
 import List from "../components/List/List";
 import Table from "../components/Table/Table";
 
-export interface ComponentChangelogTableProps {
-  changelogData: any[];
-}
-export interface TableRowProps {
+export interface ChangelogData {
   date: string;
   version: string;
   type: "Bug Fix" | "New Feature" | "Update";
   affects: "Accessibility" | "Documentation" | "Functionality" | "Styles";
-  notes: any[];
+  notes: string[];
+}
+
+export interface ComponentChangelogTableProps {
+  changelogData: ChangelogData[];
 }
 
 export const ComponentChangelogTable = (
-  props: PropsWithChildren<ComponentChangelogTableProps>
+  props: ComponentChangelogTableProps
 ) => {
   const { changelogData } = props;
-  const tableData = [];
-
-  changelogData.forEach((tableRow: PropsWithChildren<TableRowProps>) => {
+  const tableData = changelogData.map((tableRow: ChangelogData) => {
     const { date, version, type, affects, notes } = tableRow;
-    const dateFormatted = new Date(date).toLocaleDateString("en-us", {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-    });
+    const dateFormatted =
+      date === "Prerelease"
+        ? date
+        : new Date(date).toLocaleDateString("en-us", {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+          });
     const notesItems = notes.map((item, i) => <li key={i}>{item}</li>);
     const notesList = <List type="ul">{notesItems}</List>;
     const rowData = [dateFormatted, version, type, affects, notesList];
-    tableData.push(rowData);
+    return rowData;
   });
 
   const headersData = ["Date", "Version", "Type", "Affects", "Notes"];