From 594edf89324f4026c2a04d95c8b3bffee947b5f3 Mon Sep 17 00:00:00 2001 From: bigfishdesign13 Date: Tue, 10 Oct 2023 12:01:13 -0400 Subject: [PATCH] updates based on feedback --- src/components/DatePicker/DatePicker.mdx | 25 ++------------ .../DatePicker/datePickerChangelogData.ts | 29 ++++++++++++++++ src/components/FeedbackBox/FeedbackBox.mdx | 24 ++----------- .../FeedbackBox/feedbackBoxChangelogData.ts | 26 ++++++++++++++ src/components/Hero/Hero.mdx | 24 ++----------- src/components/Hero/heroChangelogData.ts | 28 +++++++++++++++ src/components/Slider/Slider.mdx | 22 ++---------- src/components/Slider/sliderChangelogData.ts | 26 ++++++++++++++ src/utils/ComponentChangelogTable.tsx | 34 +++++++++---------- 9 files changed, 134 insertions(+), 104 deletions(-) create mode 100644 src/components/DatePicker/datePickerChangelogData.ts create mode 100644 src/components/FeedbackBox/feedbackBoxChangelogData.ts create mode 100644 src/components/Hero/heroChangelogData.ts create mode 100644 src/components/Slider/sliderChangelogData.ts diff --git a/src/components/DatePicker/DatePicker.mdx b/src/components/DatePicker/DatePicker.mdx index 9085c4cc57..e94e483373 100644 --- 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"; @@ -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.", - ], - }, -]; - diff --git a/src/components/DatePicker/datePickerChangelogData.ts b/src/components/DatePicker/datePickerChangelogData.ts new file mode 100644 index 0000000000..71d444c1b5 --- /dev/null +++ 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 index 533c81b0db..42dbb2dbf1 100644 --- 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"; @@ -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.", - ], - }, -]; - diff --git a/src/components/FeedbackBox/feedbackBoxChangelogData.ts b/src/components/FeedbackBox/feedbackBoxChangelogData.ts new file mode 100644 index 0000000000..8829d4f8d7 --- /dev/null +++ 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 index c9f810b224..76d3c11e93 100644 --- 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"; @@ -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.", - ], - }, -]; - diff --git a/src/components/Hero/heroChangelogData.ts b/src/components/Hero/heroChangelogData.ts new file mode 100644 index 0000000000..be6fe11490 --- /dev/null +++ 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 index 6ed084a466..b76ce7b047 100644 --- 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"; @@ -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."], - }, -]; - diff --git a/src/components/Slider/sliderChangelogData.ts b/src/components/Slider/sliderChangelogData.ts new file mode 100644 index 0000000000..eb3210254a --- /dev/null +++ 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 index 44d3374bd3..c69a2c56fc 100644 --- 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 + props: ComponentChangelogTableProps ) => { const { changelogData } = props; - const tableData = []; - - changelogData.forEach((tableRow: PropsWithChildren) => { + 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) =>
  • {item}
    • ); const notesList = {notesItems}; const rowData = [dateFormatted, version, type, affects, notesList]; - tableData.push(rowData); + return rowData; }); const headersData = ["Date", "Version", "Type", "Affects", "Notes"];