diff --git a/CHANGELOG.md b/CHANGELOG.md index 9283afe898..b99ad6e93c 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 c8ef513e04..236ab94db0 100644 --- a/src/components/DatePicker/DatePicker.mdx +++ b/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"; @@ -22,6 +25,7 @@ import Link from "../Link/Link"; - {Other States} - {Date Inputs and Output} - {Getting Date Input Values} +- {Changelog} ## Overview @@ -257,3 +261,7 @@ const onSubmit = () => { `} language="jsx" /> + +## Changelog + + diff --git a/src/components/DatePicker/datePickerChangelogData.ts b/src/components/DatePicker/datePickerChangelogData.ts new file mode 100644 index 0000000000..24255bd305 --- /dev/null +++ b/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.", + ], + }, +]; diff --git a/src/components/FeedbackBox/FeedbackBox.mdx b/src/components/FeedbackBox/FeedbackBox.mdx index b6cc7b4900..42dbb2dbf1 100644 --- a/src/components/FeedbackBox/FeedbackBox.mdx +++ b/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"; @@ -22,6 +24,7 @@ import Link from "../Link/Link"; - {FeedbackBox Screens} - {Form Submission Data} - {Programmatically Open} +- {Changelog} ## Overview @@ -383,3 +386,7 @@ const MyComponent = () => { }; `} language="jsx" /> + +## Changelog + + diff --git a/src/components/FeedbackBox/feedbackBoxChangelogData.ts b/src/components/FeedbackBox/feedbackBoxChangelogData.ts new file mode 100644 index 0000000000..73fde699d2 --- /dev/null +++ b/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.", + ], + }, +]; diff --git a/src/components/Hero/Hero.mdx b/src/components/Hero/Hero.mdx index ac71df6995..76d3c11e93 100644 --- a/src/components/Hero/Hero.mdx +++ b/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"; @@ -19,6 +21,7 @@ import Link from "../Link/Link"; - {Accessibility} - {All Variations} - {Color Variations for Secondary Hero} +- {Changelog} ## Overview @@ -197,3 +200,7 @@ and `"secondaryWhatsOn"`. /> + +## Changelog + + diff --git a/src/components/Hero/heroChangelogData.ts b/src/components/Hero/heroChangelogData.ts new file mode 100644 index 0000000000..015269b12c --- /dev/null +++ b/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.", + ], + }, +]; diff --git a/src/components/Slider/Slider.mdx b/src/components/Slider/Slider.mdx index fcce211db5..b76ce7b047 100644 --- a/src/components/Slider/Slider.mdx +++ b/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"; @@ -21,6 +23,7 @@ import Link from "../Link/Link"; - {Examples} - {Get Input Values} - {Programmatically Update} +- {Changelog} ## Overview @@ -330,3 +333,7 @@ function RangeSliderValuesUpdateExample() { /> + +## Changelog + + diff --git a/src/components/Slider/sliderChangelogData.ts b/src/components/Slider/sliderChangelogData.ts new file mode 100644 index 0000000000..3d86179518 --- /dev/null +++ b/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."], + }, +]; diff --git a/src/utils/ComponentChangelogTable.tsx b/src/utils/ComponentChangelogTable.tsx new file mode 100644 index 0000000000..94f9b62344 --- /dev/null +++ b/src/utils/ComponentChangelogTable.tsx @@ -0,0 +1,111 @@ +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) =>
  • {item}
    • ); + const notesList = {notesItems}; + 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", + _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;