From 2a7fd4469b80b4e092202240730420ce8e6b3056 Mon Sep 17 00:00:00 2001 From: bigfishdesign13 Date: Fri, 6 Oct 2023 11:50:11 -0400 Subject: [PATCH 1/5] added ComponentChangelogTable component and then added it to some story pages --- CHANGELOG.md | 3 + src/components/DatePicker/DatePicker.mdx | 29 +++++++ src/components/FeedbackBox/FeedbackBox.mdx | 27 ++++++ src/components/Hero/Hero.mdx | 27 ++++++ src/components/Slider/Slider.mdx | 25 ++++++ src/utils/ComponentChangelogTable.tsx | 99 ++++++++++++++++++++++ 6 files changed, 210 insertions(+) create mode 100644 src/utils/ComponentChangelogTable.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 82e30fe5ea..b11167ddb1 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/src/components/DatePicker/DatePicker.mdx b/src/components/DatePicker/DatePicker.mdx index d7ac2ec907..9085c4cc57 100644 --- a/src/components/DatePicker/DatePicker.mdx +++ b/src/components/DatePicker/DatePicker.mdx @@ -2,6 +2,8 @@ import { ArgTypes, Canvas, Description, Meta, Source } from "@storybook/blocks"; import * as DatePickerStories from "./DatePicker.stories"; import Link from "../Link/Link"; +import Table from "../Table/Table"; +import ComponentChangelogTable from "../../utils/ComponentChangelogTable"; @@ -22,6 +24,7 @@ import Link from "../Link/Link"; - {Other States} - {Date Inputs and Output} - {Getting Date Input Values} +- {Changelog} ## Overview @@ -252,3 +255,29 @@ const onSubmit = () => { `} language="jsx" /> + +## 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/FeedbackBox/FeedbackBox.mdx b/src/components/FeedbackBox/FeedbackBox.mdx index b6cc7b4900..533c81b0db 100644 --- a/src/components/FeedbackBox/FeedbackBox.mdx +++ b/src/components/FeedbackBox/FeedbackBox.mdx @@ -2,6 +2,7 @@ import { ArgTypes, Canvas, Description, Meta, Source } from "@storybook/blocks"; import * as FeedbackBoxStories from "./FeedbackBox.stories"; import Link from "../Link/Link"; +import ComponentChangelogTable from "../../utils/ComponentChangelogTable"; @@ -22,6 +23,7 @@ import Link from "../Link/Link"; - {FeedbackBox Screens} - {Form Submission Data} - {Programmatically Open} +- {Changelog} ## Overview @@ -383,3 +385,28 @@ const MyComponent = () => { }; `} language="jsx" /> + +## 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/Hero/Hero.mdx b/src/components/Hero/Hero.mdx index ac71df6995..c9f810b224 100644 --- a/src/components/Hero/Hero.mdx +++ b/src/components/Hero/Hero.mdx @@ -2,6 +2,7 @@ import { ArgTypes, Canvas, Description, Meta, Source } from "@storybook/blocks"; import * as HeroStories from "./Hero.stories"; import Link from "../Link/Link"; +import ComponentChangelogTable from "../../utils/ComponentChangelogTable"; @@ -19,6 +20,7 @@ import Link from "../Link/Link"; - {Accessibility} - {All Variations} - {Color Variations for Secondary Hero} +- {Changelog} ## Overview @@ -197,3 +199,28 @@ 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/Slider/Slider.mdx b/src/components/Slider/Slider.mdx index fcce211db5..6ed084a466 100644 --- a/src/components/Slider/Slider.mdx +++ b/src/components/Slider/Slider.mdx @@ -2,6 +2,7 @@ import { ArgTypes, Canvas, Description, Meta, Source } from "@storybook/blocks"; import * as SliderStories from "./Slider.stories"; import Link from "../Link/Link"; +import ComponentChangelogTable from "../../utils/ComponentChangelogTable"; @@ -21,6 +22,7 @@ import Link from "../Link/Link"; - {Examples} - {Get Input Values} - {Programmatically Update} +- {Changelog} ## Overview @@ -330,3 +332,26 @@ 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/utils/ComponentChangelogTable.tsx b/src/utils/ComponentChangelogTable.tsx new file mode 100644 index 0000000000..54e7b89ef9 --- /dev/null +++ b/src/utils/ComponentChangelogTable.tsx @@ -0,0 +1,99 @@ +import { PropsWithChildren } from "react"; + +import List from "../components/List/List"; +import Table from "../components/Table/Table"; + +export interface ComponentChangelogTableProps { + changelogData: any[]; +} +export interface TableRowProps { + date: string; + version: string; + type: "Bug Fix" | "New Feature" | "Update"; + affects: "Accessibility" | "Documentation" | "Functionality" | "Styles"; + notes: any[]; +} + +export const ComponentChangelogTable = ( + props: PropsWithChildren +) => { + const { changelogData } = props; + const tableData = []; + + changelogData.forEach((tableRow: PropsWithChildren) => { + const { date, version, type, affects, notes } = tableRow; + const dateFormatted = 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); + }); + + 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 ( + + ); +}; + +export default ComponentChangelogTable; From aa6750c2944d32feaa590463225773f7b44f1cb5 Mon Sep 17 00:00:00 2001 From: bigfishdesign13 Date: Fri, 6 Oct 2023 11:51:03 -0400 Subject: [PATCH 2/5] code formatting cleanup --- src/utils/ComponentChangelogTable.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utils/ComponentChangelogTable.tsx b/src/utils/ComponentChangelogTable.tsx index 54e7b89ef9..44d3374bd3 100644 --- a/src/utils/ComponentChangelogTable.tsx +++ b/src/utils/ComponentChangelogTable.tsx @@ -52,7 +52,7 @@ export const ComponentChangelogTable = ( fontSize: "desktop.caption", _last: { borderColor: borderColor, - } + }, }, td: { borderColor: borderColor, @@ -61,7 +61,7 @@ export const ComponentChangelogTable = ( // pt: "xs", _last: { borderColor: borderColor, - } + }, }, "th:nth-child(1)": { width: { base: "auto", md: narrowTdWidth }, From 594edf89324f4026c2a04d95c8b3bffee947b5f3 Mon Sep 17 00:00:00 2001 From: bigfishdesign13 Date: Tue, 10 Oct 2023 12:01:13 -0400 Subject: [PATCH 3/5] 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"]; From ba232ff2fccf33a576563868e2ab530922d8aa91 Mon Sep 17 00:00:00 2001 From: bigfishdesign13 Date: Wed, 11 Oct 2023 11:47:20 -0400 Subject: [PATCH 4/5] adding better typing and better docs --- .../DatePicker/datePickerChangelogData.ts | 10 ++++++---- .../FeedbackBox/feedbackBoxChangelogData.ts | 10 ++++++---- src/components/Hero/heroChangelogData.ts | 12 +++++++----- src/components/Slider/sliderChangelogData.ts | 10 ++++++---- src/utils/ComponentChangelogTable.tsx | 18 ++++++++++++++++-- 5 files changed, 41 insertions(+), 19 deletions(-) diff --git a/src/components/DatePicker/datePickerChangelogData.ts b/src/components/DatePicker/datePickerChangelogData.ts index 71d444c1b5..24255bd305 100644 --- a/src/components/DatePicker/datePickerChangelogData.ts +++ b/src/components/DatePicker/datePickerChangelogData.ts @@ -3,15 +3,17 @@ * 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"; + * affects: array["Accessibility" | "Documentation" | "Functionality" | "Styles"]; * notes: array (will render as a bulleted list, add one array element for each list element) */ -export const changelogData = [ +import { ChangelogData } from "../../utils/ComponentChangelogTable"; + +export const changelogData: ChangelogData[] = [ { date: "Prerelease", version: "Prerelease", type: "Update", - affects: "Accessibility", + 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.", @@ -21,7 +23,7 @@ export const changelogData = [ date: "2023-9-28", version: "2.0.0", type: "Update", - affects: "Styles", + 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 index 8829d4f8d7..73fde699d2 100644 --- a/src/components/FeedbackBox/feedbackBoxChangelogData.ts +++ b/src/components/FeedbackBox/feedbackBoxChangelogData.ts @@ -3,22 +3,24 @@ * 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"; + * affects: array["Accessibility" | "Documentation" | "Functionality" | "Styles"]; * notes: array (will render as a bulleted list, add one array element for each list element) */ -export const changelogData = [ +import { ChangelogData } from "../../utils/ComponentChangelogTable"; + +export const changelogData: ChangelogData[] = [ { date: "Prerelease", version: "Prerelease", type: "Update", - affects: "Accessibility, Styles", + 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", + 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 index be6fe11490..015269b12c 100644 --- a/src/components/Hero/heroChangelogData.ts +++ b/src/components/Hero/heroChangelogData.ts @@ -3,15 +3,17 @@ * 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"; + * affects: array["Accessibility" | "Documentation" | "Functionality" | "Styles"]; * notes: array (will render as a bulleted list, add one array element for each list element) */ -export const changelogData = [ +import { ChangelogData } from "../../utils/ComponentChangelogTable"; + +export const changelogData: ChangelogData[] = [ { date: "Prerelease", version: "Prerelease", type: "Bug Fix", - affects: "Functionality", + affects: ["Functionality"], notes: [ "Fixes an issue with `backgroundColor` and `foregroundColor` props not prioritizing the passed design token values for the `Hero` component.", ], @@ -20,9 +22,9 @@ export const changelogData = [ date: "2023-9-28", version: "2.0.0", type: "Update", - affects: "Styles", + affects: ["Styles"], notes: [ "Applied Typo2023 styles, including font size, font color, and text link patterns.", ], }, -] as const; +]; diff --git a/src/components/Slider/sliderChangelogData.ts b/src/components/Slider/sliderChangelogData.ts index eb3210254a..3d86179518 100644 --- a/src/components/Slider/sliderChangelogData.ts +++ b/src/components/Slider/sliderChangelogData.ts @@ -3,15 +3,17 @@ * 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"; + * affects: array["Accessibility" | "Documentation" | "Functionality" | "Styles"]; * notes: array (will render as a bulleted list, add one array element for each list element) */ -export const changelogData = [ +import { ChangelogData } from "../../utils/ComponentChangelogTable"; + +export const changelogData: ChangelogData[] = [ { date: "Prerelease", version: "Prerelease", type: "Bug Fix", - affects: "Functionality", + affects: ["Accessibility", "Functionality"], notes: [ "Updated to use appropriate aria-label values for the slider thumbs and text input fields.", ], @@ -20,7 +22,7 @@ export const changelogData = [ date: "2023-9-28", version: "2.0.0", type: "Update", - affects: "Styles", + 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 c69a2c56fc..1a84d9f3b3 100644 --- a/src/utils/ComponentChangelogTable.tsx +++ b/src/utils/ComponentChangelogTable.tsx @@ -1,11 +1,24 @@ 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"; - affects: "Accessibility" | "Documentation" | "Functionality" | "Styles"; + /** The scope of the update */ + affects: AffectTypes[]; + /** Details about the update; this array will be rendered as a bulleted list */ notes: string[]; } @@ -27,9 +40,10 @@ export const ComponentChangelogTable = ( month: "short", day: "numeric", }); + const affectsFormatted = affects.sort().join(", "); const notesItems = notes.map((item, i) =>
  • {item}
    • ); const notesList = {notesItems}; - const rowData = [dateFormatted, version, type, affects, notesList]; + const rowData = [dateFormatted, version, type, affectsFormatted, notesList]; return rowData; }); From 48019ef8dc9ff75af2954a3e9913247272cd10d4 Mon Sep 17 00:00:00 2001 From: bigfishdesign13 Date: Wed, 11 Oct 2023 16:25:32 -0400 Subject: [PATCH 5/5] removing errant comments --- src/utils/ComponentChangelogTable.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/utils/ComponentChangelogTable.tsx b/src/utils/ComponentChangelogTable.tsx index 1a84d9f3b3..94f9b62344 100644 --- a/src/utils/ComponentChangelogTable.tsx +++ b/src/utils/ComponentChangelogTable.tsx @@ -71,8 +71,6 @@ export const ComponentChangelogTable = ( td: { borderColor: borderColor, fontSize: "desktop.caption", - // pb: "xs", - // pt: "xs", _last: { borderColor: borderColor, },