DSD-1603: component changelogs

CHANGELOG.md

@@ -8,6 +8,9 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+- Adds the `ComponentChangelogTable` component.
+- Adds a changelog to the story pages for the `DatePicker`, `FeedbackBox`, `Hero`, and `Slider` components.
+
 ### Updates
 
 - Temporarily renaming `FilterBar`, `MultiSelect`, `MultiSelectGroup`, `useMultiSelect`, and `useFilterBar` Storybook page files so they don't show up in the Storybook sidebar.

src/components/DatePicker/DatePicker.mdx

@@ -1,7 +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";
 
 <Meta of={DatePickerStories} />
 
@@ -22,6 +25,7 @@ import Link from "../Link/Link";
 - {<Link href="#other-states" target="_self">Other States</Link>}
 - {<Link href="#date-inputs-and-output" target="_self">Date Inputs and Output</Link>}
 - {<Link href="#getting-date-input-values" target="_self">Getting Date Input Values</Link>}
+- {<Link href="#changelog" target="_self">Changelog</Link>}
 
 ## Overview
 
@@ -257,3 +261,7 @@ const onSubmit = () => {
 `}
   language="jsx"
 />
+
+## Changelog
+
+<ComponentChangelogTable changelogData={changelogData} />

src/components/DatePicker/datePickerChangelogData.ts

@@ -0,0 +1,31 @@
+/** 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 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.",
+    ],
+  },
+];

src/components/FeedbackBox/FeedbackBox.mdx

@@ -1,6 +1,8 @@
 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";
 
 <Meta of={FeedbackBoxStories} />
@@ -22,6 +24,7 @@ import Link from "../Link/Link";
 - {<Link href="#feedbackbox-screens" target="_self">FeedbackBox Screens</Link>}
 - {<Link href="#form-submission-data" target="_self">Form Submission Data</Link>}
 - {<Link href="#programmatically-open" target="_self">Programmatically Open</Link>}
+- {<Link href="#changelog" target="_self">Changelog</Link>}
 
 ## Overview
 
@@ -383,3 +386,7 @@ const MyComponent = () => {
 }; `}
   language="jsx"
 />
+
+## Changelog
+
+<ComponentChangelogTable changelogData={changelogData} />

src/components/FeedbackBox/feedbackBoxChangelogData.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", "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.",
+    ],
+  },
+];

src/components/Hero/Hero.mdx

@@ -1,6 +1,8 @@
 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";
 
 <Meta of={HeroStories} />
@@ -19,6 +21,7 @@ import Link from "../Link/Link";
 - {<Link href="#accessibility" target="_self">Accessibility</Link>}
 - {<Link href="#all-variations" target="_self">All Variations</Link>}
 - {<Link href="#color-variations-for-secondary-hero" target="_self">Color Variations for Secondary Hero</Link>}
+- {<Link href="#changelog" target="_self">Changelog</Link>}
 
 ## Overview
 
@@ -197,3 +200,7 @@ and `"secondaryWhatsOn"`.
 />
 
 <Canvas of={HeroStories.ColorVariations} />
+
+## Changelog
+
+<ComponentChangelogTable changelogData={changelogData} />

src/components/Hero/heroChangelogData.ts

@@ -0,0 +1,30 @@
+/** 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: ["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.",
+    ],
+  },
+];

src/components/Slider/Slider.mdx

@@ -1,6 +1,8 @@
 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";
 
 <Meta of={SliderStories} />
@@ -21,6 +23,7 @@ import Link from "../Link/Link";
 - {<Link href="#examples" target="_self">Examples</Link>}
 - {<Link href="#get-input-values" target="_self">Get Input Values</Link>}
 - {<Link href="#programmatically-update" target="_self">Programmatically Update</Link>}
+- {<Link href="#changelog" target="_self">Changelog</Link>}
 
 ## Overview
 
@@ -330,3 +333,7 @@ function RangeSliderValuesUpdateExample() {
 />
 
 <Canvas of={SliderStories.ProgrammaticallyUpdate} />
+
+## Changelog
+
+<ComponentChangelogTable changelogData={changelogData} />

src/components/Slider/sliderChangelogData.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: "Bug Fix",
+    affects: ["Accessibility", "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."],
+  },
+];

src/utils/ComponentChangelogTable.tsx

@@ -0,0 +1,113 @@
+import List from "../components/List/List";
+import Table from "../components/Table/Table";
+
+export const affectTypesArray = [
+  "Accessibility",
+  "Documentation",
+  "Functionality",
+  "Styles",
+] as const;
+export type AffectTypes = typeof affectTypesArray[number];
+
+export interface ChangelogData {
+  /** Date of the release; format yyyy-mm-dd; when adding new entry during development, set value as "Prerelease" */
+  date: string;
+  /** Version nunber of the release; when adding new entry during development, set value as "Prerelease" */
+  version: string;
+  /** The type of update  */
+  type: "Bug Fix" | "New Feature" | "Update";
+  /** The scope of the update */
+  affects: AffectTypes[];
+  /** Details about the update; this array will be rendered as a bulleted list */
+  notes: string[];
+}
+
+export interface ComponentChangelogTableProps {
+  changelogData: ChangelogData[];
+}
+
+export const ComponentChangelogTable = (
+  props: ComponentChangelogTableProps
+) => {
+  const { changelogData } = props;
+  const tableData = changelogData.map((tableRow: ChangelogData) => {
+    const { date, version, type, affects, notes } = tableRow;
+    const dateFormatted =
+      date === "Prerelease"
+        ? date
+        : new Date(date).toLocaleDateString("en-us", {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+          });
+    const affectsFormatted = affects.sort().join(", ");
+    const notesItems = notes.map((item, i) => <li key={i}>{item}</li>);
+    const notesList = <List type="ul">{notesItems}</List>;
+    const rowData = [dateFormatted, version, type, affectsFormatted, notesList];
+    return rowData;
+  });
+
+  const headersData = ["Date", "Version", "Type", "Affects", "Notes"];
+  const narrowTdWidth = "9rem";
+  const narrowerTdWidth = "7rem";
+  const borderColor = "ui.gray.semi-medium";
+  const customStyles = {
+    thead: {
+      th: {
+        borderColor: borderColor,
+        fontSize: "desktop.overline.overline2",
+        pb: "xs",
+        pt: "xs",
+        textTransform: "uppercase",
+      },
+    },
+    th: {
+      borderColor: borderColor,
+      fontSize: "desktop.caption",
+      _last: {
+        borderColor: borderColor,
+      },
+    },
+    td: {
+      borderColor: borderColor,
+      fontSize: "desktop.caption",
+      // pb: "xs",
+      // pt: "xs",
+      _last: {
+        borderColor: borderColor,
+      },
+    },
+    "th:nth-child(1)": {
+      width: { base: "auto", md: narrowTdWidth },
+    },
+    "th:nth-child(2)": {
+      width: narrowerTdWidth,
+    },
+    "th:nth-child(3)": {
+      width: narrowerTdWidth,
+    },
+    "th:nth-child(4)": {
+      width: narrowerTdWidth,
+    },
+    ul: {
+      m: "0",
+    },
+    li: {
+      _notFirst: { mt: "xs" },
+    },
+  };
+
+  return (
+    <Table
+      className="sb-unstyled"
+      columnHeaders={headersData}
+      columnHeadersBackgroundColor="ui.bg.default"
+      showRowDividers
+      tableData={tableData}
+      useRowHeaders
+      sx={customStyles}
+    />
+  );
+};
+
+export default ComponentChangelogTable;