diff --git a/package-lock.json b/package-lock.json index aac375fb2..6586cdaa1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,9 +8,9 @@ "name": "code-sandbox", "version": "0.0.0", "dependencies": { - "@abgov/react-components": "6.6.1", - "@abgov/ui-components-common": "1.6.0", - "@abgov/web-components": "1.36.1", + "@abgov/react-components": "6.7.0", + "@abgov/ui-components-common": "1.7.0", + "@abgov/web-components": "1.37.0", "@faker-js/faker": "^8.3.1", "highlight.js": "^11.8.0", "js-cookie": "^3.0.5", @@ -68,9 +68,9 @@ } }, "node_modules/@abgov/react-components": { - "version": "6.6.1", - "resolved": "https://registry.npmjs.org/@abgov/react-components/-/react-components-6.6.1.tgz", - "integrity": "sha512-oXAUGv2hV0Oo8RS98I2+0lt8h8otcLj2uGUhdvgmk04lFiIEBnaksWCB/lv0+5VLY63VXDfBOsa6RwTzFdsx8A==", + "version": "6.7.0", + "resolved": "https://registry.npmjs.org/@abgov/react-components/-/react-components-6.7.0.tgz", + "integrity": "sha512-/d1pZqnw9PRApQIj6RGeens9pq2XYJVx3b9cwBy5IVKvs9eLyjBsXGsXRJK2Vnl8wjp+CUKIyzFvweYoT0atFQ==", "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", @@ -78,14 +78,14 @@ } }, "node_modules/@abgov/ui-components-common": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/@abgov/ui-components-common/-/ui-components-common-1.6.0.tgz", - "integrity": "sha512-A9bM4OctY+xlmsH+nYIb8AmBDh59J3RcDj9+nhGSMBJ6IHtofdtoUH8nE/g1u7RRyfdOxMhzXMkktDl1CpiXpQ==" + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@abgov/ui-components-common/-/ui-components-common-1.7.0.tgz", + "integrity": "sha512-dnqLxTJdBxNZFKPDyckaHHrkipjFIwXyU63rlEkcHgKhn4d+KrwlbMuxtsS73FvH4bozyQm2OM+sPu32wyWgNA==" }, "node_modules/@abgov/web-components": { - "version": "1.36.1", - "resolved": "https://registry.npmjs.org/@abgov/web-components/-/web-components-1.36.1.tgz", - "integrity": "sha512-3taoshJkLjGeRS4XAFWn0asup8YYjGTunaJ66NlMbSOqZIeGXnJvSfmUwtSNYnpe0w9ANVx6a7v3+RJDIc06Jw==", + "version": "1.37.0", + "resolved": "https://registry.npmjs.org/@abgov/web-components/-/web-components-1.37.0.tgz", + "integrity": "sha512-GjKoy1G3JlHBc6a4fxS5luYmxCchAXmIrBYecnkq6q3IhdkY1r1McDO8/AB0P2E0gcT1IlOtpGcKKdjDHuxCEw==", "peerDependencies": { "@sveltejs/vite-plugin-svelte": "3.x", "glob": "10.x", diff --git a/package.json b/package.json index c7d089577..9dad8b44f 100644 --- a/package.json +++ b/package.json @@ -12,9 +12,9 @@ "prettier": "npx prettier . --write" }, "dependencies": { - "@abgov/react-components": "6.6.1", - "@abgov/ui-components-common": "1.6.0", - "@abgov/web-components": "1.36.1", + "@abgov/react-components": "6.7.0", + "@abgov/ui-components-common": "1.7.0", + "@abgov/web-components": "1.37.0", "@faker-js/faker": "^8.3.1", "highlight.js": "^11.8.0", "js-cookie": "^3.0.5", diff --git a/src/components/sandbox/AngularReactiveSerializer.ts b/src/components/sandbox/AngularReactiveSerializer.ts index ab3bb5c0c..81314ffbe 100644 --- a/src/components/sandbox/AngularReactiveSerializer.ts +++ b/src/components/sandbox/AngularReactiveSerializer.ts @@ -9,6 +9,7 @@ const ReactiveComponents = [ "goab-checkbox", "goab-radio-group", "goab-date-picker", + "goa-input" ]; export class AngularReactiveSerializer extends BaseSerializer implements Serializer { @@ -153,15 +154,17 @@ export class AngularReactiveSerializer extends BaseSerializer implements Seriali }); } - if (children.startsWith(" children.startsWith(component))) { if (this.version === "old") { if (children.includes("goaChecked") && children.includes("goaValue")) { children = children.replace(/\bgoaValue\b\s?/g, ""); } - if (children.includes("disabled=true")) { + if (children.includes('disabled="true"') || children.includes("disabled=true")) { children = children - .replace(/disabled=true/g, '[attr.disabled]="true"') + .replace(/disabled=(["']?)true\1/g, '[attr.disabled]="true"') .replace(/\bgoaValue\b\s?/g, ""); } } diff --git a/src/components/table-of-contents/TOC.tsx b/src/components/table-of-contents/TOC.tsx index e568ada62..e12de0d2c 100644 --- a/src/components/table-of-contents/TOC.tsx +++ b/src/components/table-of-contents/TOC.tsx @@ -120,8 +120,8 @@ export function TOC(props: TOCProps) { const currentHash = window.location.hash; if (currentHash.includes('#tab-')) { - // If URL contains #tab-, append our ID after it - return `${currentHash}#${id}`; + // If URL contains "#tab-" then append another hash after it + return `#${currentHash.split('#')[1]}#${id}`; } return `#${id}`; diff --git a/src/components/version-language-switcher/HelpButton.tsx b/src/components/version-language-switcher/HelpButton.tsx index 60eb0424a..7fb14e824 100644 --- a/src/components/version-language-switcher/HelpButton.tsx +++ b/src/components/version-language-switcher/HelpButton.tsx @@ -24,9 +24,9 @@ export function HelpButton() { }; return ( - - + { return ( <> - +
openLanguagePopOver(e)}> @@ -119,9 +119,7 @@ export const VersionLanguageSwitcher = () => { } - - openVersionPopOver(e)}> @@ -136,7 +134,7 @@ export const VersionLanguageSwitcher = () => { ))} - +
); } diff --git a/src/components/version-language-switcher/version-language-switcher.css b/src/components/version-language-switcher/version-language-switcher.css index 90615431b..f2594c468 100644 --- a/src/components/version-language-switcher/version-language-switcher.css +++ b/src/components/version-language-switcher/version-language-switcher.css @@ -3,7 +3,6 @@ align-items: center; gap: var(--goa-space-2xs); font-size: var(--goa-font-size-2); - margin-left: var(--goa-space-m); white-space: nowrap; height: 20px; } @@ -30,13 +29,30 @@ align-items: center; /* vertically align content */ } +.version-language-switcher { + height: 20px; + display: flex; + flex-direction: row; + align-items: center; /* vertically align content */ + gap: var(--goa-space-s); + margin-bottom: var(--goa-space-xs); +} + @media (max-width: 623px) { [slot="version"] { display: flex; /* if needed to align items horizontally */ - flex-direction: column; + flex-direction: row; align-items: flex-start; - gap: 2px; + gap: 0; margin-top: 0; + height: auto; + } + .version-language-switcher { + height: auto; + flex-direction: column; + align-items: flex-start; + gap: 0; + margin-bottom: var(--goa-space-3xs); } } \ No newline at end of file diff --git a/src/examples/add-another-item-in-a-modal.tsx b/src/examples/add-another-item-in-a-modal.tsx index e5f0b110e..60d5874e3 100644 --- a/src/examples/add-another-item-in-a-modal.tsx +++ b/src/examples/add-another-item-in-a-modal.tsx @@ -41,7 +41,6 @@ export const AddAnotherItemInAModal = () => { @@ -143,7 +142,7 @@ export const AddAnotherItemInAModal = () => { allowCopy={true} code={` Add another item -

Fill in the information to create a new item

@@ -174,7 +173,7 @@ export const AddAnotherItemInAModal = () => { allowCopy={true} code={` Add another item -

Fill in the information to create a new item

@@ -259,7 +258,6 @@ export const AddAnotherItemInAModal = () => { @@ -297,7 +295,6 @@ export const AddAnotherItemInAModal = () => { diff --git a/src/examples/badge/BadgeExamples.tsx b/src/examples/badge/BadgeExamples.tsx index 1743ff880..b9d7cbd81 100644 --- a/src/examples/badge/BadgeExamples.tsx +++ b/src/examples/badge/BadgeExamples.tsx @@ -1,16 +1,11 @@ -import { - GoabBadge, - GoabBlock, -} from "@abgov/react-components"; -import { Sandbox } from "@components/sandbox"; import { ShowStatusInATable } from "@examples/show-status-in-a-table.tsx"; +import { ShowMultipleTagsTogether } from "@examples/show-multiple-tags-together.tsx"; import { ShowStatusOnACard } from "@examples/show-status-on-a-card.tsx"; import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; export default function BadgeExamples() { return ( <> - @@ -21,13 +16,7 @@ export default function BadgeExamples() { exampleTitle="Show multiple tags together" figmaExample="https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=60735-375622&t=tGwTYaG8Orm4iOm7-4"> - - - - - - - + { + const {version} = useContext(LanguageVersionContext); + const [basicModalOpen, setBasicModalOpen] = useState(); + return ( + + setBasicModalOpen(true)}>Open Basic Modal + setBasicModalOpen(false)} + > +

This modal uses an icon button to close it.

+ + {/*Angular*/} + + + {version === "old" && ( + Open Basic Modal + +

This modal uses an icon button to close it.

+ + `} + /> + )} + + {version === "new" && ( + Open Basic Modal + +

This modal uses an icon button to close it.

+ + `} + /> + )} + + {/*React code*/} + + + {version === "old" && ( + setOpen(true)}>Open Basic Modal + setOpen(false)} + > +

This modal uses an icon button to close it.

+ + `} + /> + )} + + {version === "new" && ( + setOpen(true)}>Open Basic Modal + setOpen(false)} + > +

This modal uses an icon button to close it.

+ + `} + /> + )} + + ) +} + +export default BasicModalWithClose; diff --git a/src/examples/checkbox/CheckboxExamples.tsx b/src/examples/checkbox/CheckboxExamples.tsx index 925016662..6955de48e 100644 --- a/src/examples/checkbox/CheckboxExamples.tsx +++ b/src/examples/checkbox/CheckboxExamples.tsx @@ -3,8 +3,11 @@ import IncludeDescriptionsForItemsInACheckboxList import SelectOneOrMoreFromAListOfOptions from "@examples/select-one-or-more-from-a-list-of-options.tsx"; import { CheckboxRevealSlotExample } from "@examples/checkbox/CheckboxRevealSlotExample.tsx"; import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; +import { useContext } from "react"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; export const CheckboxExamples = () => { + const { version } = useContext(LanguageVersionContext); return <> {/*Checkbox example 1*/} { - {/*Checkbox example 3 - NEW from alpha*/} - - - + {version === "new" && ( + <> + {/*Checkbox example 3 - NEW from alpha*/} + + + + + )} ; } \ No newline at end of file diff --git a/src/examples/checkbox/CheckboxRevealSlotExample.tsx b/src/examples/checkbox/CheckboxRevealSlotExample.tsx index f8b4c1e69..6b6458126 100644 --- a/src/examples/checkbox/CheckboxRevealSlotExample.tsx +++ b/src/examples/checkbox/CheckboxRevealSlotExample.tsx @@ -1,184 +1,104 @@ -import { GoabCheckbox, GoabFormItem, GoabInput, GoabSpacer } from "@abgov/react-components"; +import { GoabCheckbox, GoabFormItem, GoabInput } from "@abgov/react-components"; import { Sandbox } from "@components/sandbox"; -import { useContext } from "react"; -import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; -import { OldComponentBanner } from "@components/old-component-banner/OldComponentBanner.tsx"; export const CheckboxRevealSlotExample = () => { - const { version, language } = useContext(LanguageVersionContext); return ( <> {/*Skip rendering because we use reveal that isn't supported by sandbox*/} {/*Angular*/} - {version === "old" && ( - - -
- - - -
- - -
- - - -
- - -
- - - -
- - - `} - /> - )} - - {version === "old" && ( - - )} - - {/*Angular*/} - {version === "new" && ( - - - - - - - - - - - - - - - - - - - - - - - - `} - /> - )} + + + + + + + + + + + + + + + + + + + + + + + + `} + /> - {version === "new" && ( - - )} + {/*React*/} - {version === "new" && ( - - - {/** do nothing */}} value="" /> - - } - /> - - {/** do nothing */}} value="" /> - - } - /> - - {/** do nothing */}} value="" /> - - } - /> - - `} - /> - )} + + + {/** do nothing */}} value="" /> + + } + /> + + {/** do nothing */}} value="" /> + + } + /> + + {/** do nothing */}} value="" /> + + } + /> + + `} + /> { /> - - {version === "old" && language === "react" && ( - - )} ); }; diff --git a/src/examples/choose-a-date.tsx b/src/examples/choose-a-date.tsx new file mode 100644 index 000000000..7c391ea88 --- /dev/null +++ b/src/examples/choose-a-date.tsx @@ -0,0 +1,231 @@ +import { Sandbox } from "@components/sandbox"; +import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; +import { GoabBlock, GoabButton, GoabDatePicker, GoabFormItem } from "@abgov/react-components"; +import { GoabDatePickerOnChangeDetail } from "@abgov/ui-components-common"; +import { useContext, useState } from "react"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; + +export const TodayDatePickerField = () => { + const {version} = useContext(LanguageVersionContext); + const [date, setDate] = useState(); + + const setNewDate = (value: Date | undefined) => { + setDate(value); + }; + + function setToday() { + const d = new Date(); + d.setDate(d.getDate()); + + setDate(d); + } + + return ( + + {/*React*/} + {version === "old" && (); + + const setNewDate = (value: Date | undefined) => { + setDate(value); + }; + + function setToday() { + const d = new Date(); + d.setDate(d.getDate()); + + setDate(d); + } + `} + />} + + {version === "old" && + + setNewDate(value)} + > + + + Today + + + `} + />} + + {version === "new" && (); + + const setNewDate = (value: Date | undefined) => { + setDate(value); + }; + + function setToday() { + const d = new Date(); + d.setDate(d.getDate()); + + setDate(d); + } + `} + />} + + {version === "new" && + + setNewDate(value)} + > + + + Today + + + `} + />} + + {/*Angular*/} + + {version === "old" && } + + {version === "old" && + + + + + Today + + + `} + />} + + {version === "old" && } + {version === "old" && + + + + + Today + + + `} + />} + + {/*New version*/} + {version === "new" && } + + {version === "new" && + + + + + Today + + + `} + />} + + + setNewDate(e.value as Date)}> + + + Today + + + + + ) +} + +export default TodayDatePickerField; diff --git a/src/examples/confirm-a-change.tsx b/src/examples/confirm-a-change.tsx index 1310df5cc..f25f3b93c 100644 --- a/src/examples/confirm-a-change.tsx +++ b/src/examples/confirm-a-change.tsx @@ -29,7 +29,6 @@ export const ConfirmAChange = () => { @@ -120,7 +119,7 @@ export const ConfirmAChange = () => { allowCopy={true} code={` Save and continue -
@@ -156,7 +155,7 @@ export const ConfirmAChange = () => { allowCopy={true} code={` Save and continue -
@@ -221,7 +220,6 @@ export const ConfirmAChange = () => { setOpen(true)}>Save and continue setOpen(false)} actions={ @@ -262,7 +260,6 @@ export const ConfirmAChange = () => { setOpen(true)}>Save and continue setOpen(false)} actions={ diff --git a/src/examples/confirm-a-destructive-action.tsx b/src/examples/confirm-a-destructive-action.tsx index 1d49f02ef..c8043b412 100644 --- a/src/examples/confirm-a-destructive-action.tsx +++ b/src/examples/confirm-a-destructive-action.tsx @@ -18,7 +18,6 @@ export const ConfirmADestructiveAction = () => { setDestructiveModalOpen(false)}> @@ -57,7 +56,7 @@ export const ConfirmADestructiveAction = () => { allowCopy={true} code={` Delete record - +

This action cannot be undone.

@@ -76,7 +75,7 @@ export const ConfirmADestructiveAction = () => { allowCopy={true} code={` Delete record - +

This action cannot be undone.

@@ -109,7 +108,6 @@ export const ConfirmADestructiveAction = () => { setOpen(false)} actions={ @@ -138,7 +136,6 @@ export const ConfirmADestructiveAction = () => { setOpen(false)} actions={ diff --git a/src/examples/confirm-before-navigating-away.tsx b/src/examples/confirm-before-navigating-away.tsx index 726f1838c..7f99153c7 100644 --- a/src/examples/confirm-before-navigating-away.tsx +++ b/src/examples/confirm-before-navigating-away.tsx @@ -45,7 +45,7 @@ export const ConfirmBeforeNavigatingAway = () => { allowCopy={true} code={` Open - +
Cancel @@ -62,7 +62,7 @@ export const ConfirmBeforeNavigatingAway = () => { allowCopy={true} code={` Open - + Cancel @@ -98,7 +98,6 @@ export const ConfirmBeforeNavigatingAway = () => { setOpen(false)} actions={ @@ -127,7 +126,6 @@ export const ConfirmBeforeNavigatingAway = () => { setOpen(false)} actions={ diff --git a/src/examples/date-picker/DatePickerExamples.tsx b/src/examples/date-picker/DatePickerExamples.tsx index 12e61da93..3829fdfbe 100644 --- a/src/examples/date-picker/DatePickerExamples.tsx +++ b/src/examples/date-picker/DatePickerExamples.tsx @@ -1,9 +1,16 @@ +import { TodayDatePickerField } from "@examples/choose-a-date.tsx"; import { ResetDatePickerField } from "@examples/reset-date-picker-field.tsx"; import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; export const DatePickerExamples = () => { return ( <> + + + < TodayDatePickerField /> + diff --git a/src/examples/display-numbers-in-a-table-so-they-can-be-scanned-easily.tsx b/src/examples/display-numbers-in-a-table-so-they-can-be-scanned-easily.tsx new file mode 100644 index 000000000..ba87d5975 --- /dev/null +++ b/src/examples/display-numbers-in-a-table-so-they-can-be-scanned-easily.tsx @@ -0,0 +1,34 @@ +import { GoabTable } from "@abgov/react-components"; +import { Sandbox } from "@components/sandbox"; + +export const DisplayNumbersInATableSoTheyCanBeScannedEasily = () => { + return ( + <> + + + + + Col 1 + Col 2 + Number Column + + + + + Item 1 + Item 2 + 54 + + + Item 1 + Item 2 + 4567 + + + + + + ); +}; + +export default DisplayNumbersInATableSoTheyCanBeScannedEasily; diff --git a/src/examples/hero-banner-with-actions.tsx b/src/examples/hero-banner-with-actions.tsx new file mode 100644 index 000000000..c72ba661d --- /dev/null +++ b/src/examples/hero-banner-with-actions.tsx @@ -0,0 +1,93 @@ +import { GoabButton, GoabHeroBanner, GoabHeroBannerActions } from "@abgov/react-components"; +import { useContext } from "react"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; +import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; +import { Sandbox } from "@components/sandbox"; + +export const HeroBannerWithActions = () => { + const { version } = useContext(LanguageVersionContext); + + function noop() {} + + return ( + <> + + {version === "old" && ( + + Digital services help to support Albertan citizens receive government services. +
+ Call to action +
+ + `} + /> + )} + + {version === "new" && ( + + Resources are available to help Alberta entrepreneurs and small businesses start, grow and succeed. + + Call to action + + + `} + /> + )} + + {/*React code*/} + {version === "old" && ( + + Resources are available to help Alberta entrepreneurs and small businesses start, grow and succeed. + + Call to action + + + `} + /> + )} + {version === "new" && ( + + Resources are available to help Alberta entrepreneurs and small businesses start, grow and succeed. + + Call to action + + + `} + /> + )} + + + Resources are available to help Alberta entrepreneurs and small businesses start, grow and + succeed. + + + Call to action + + + + + + ); +}; + +export default HeroBannerWithActions; diff --git a/src/examples/hero-banner/HeroBannerExamples.tsx b/src/examples/hero-banner/HeroBannerExamples.tsx new file mode 100644 index 000000000..f7d1f8e22 --- /dev/null +++ b/src/examples/hero-banner/HeroBannerExamples.tsx @@ -0,0 +1,14 @@ +import { HeroBannerWithActions } from "@examples/hero-banner-with-actions.tsx"; +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; + +export const HeroBannerExamples = () => { + return ( + <> + + + + + ); +}; diff --git a/src/examples/icon-button/IconButtonExamples.tsx b/src/examples/icon-button/IconButtonExamples.tsx new file mode 100644 index 000000000..8a62c43a1 --- /dev/null +++ b/src/examples/icon-button/IconButtonExamples.tsx @@ -0,0 +1,21 @@ +import { ShowMultipleActionsInACompactTable } from "@examples/show-multiple-actions-in-a-compact-table.tsx"; +import { BasicModalWithClose } from "@examples/basic-modal-with-close.tsx"; +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; + +export const IconButtonExamples = () => { + return ( + <> + + + + + + + + + ); +}; diff --git a/src/examples/radio/RadioExamples.tsx b/src/examples/radio/RadioExamples.tsx index c766f7b22..d58ad8f93 100644 --- a/src/examples/radio/RadioExamples.tsx +++ b/src/examples/radio/RadioExamples.tsx @@ -4,9 +4,11 @@ import { import { SetAMaxWidthOnALongRadioItem } from "@examples/set-a-max-width-on-a-long-radio-item.tsx"; import { RadioRevealSlotExample } from "@examples/radio/RadioRevealSlotExample.tsx"; import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; +import { useContext } from "react"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; -export default function RadioExamples () { - +export default function RadioExamples() { + const { version } = useContext(LanguageVersionContext); return ( <> - - - + {version === "new" && ( + <> + + + + + )} ); } \ No newline at end of file diff --git a/src/examples/radio/RadioRevealSlotExample.tsx b/src/examples/radio/RadioRevealSlotExample.tsx index 4e0d4847c..2ee2502c6 100644 --- a/src/examples/radio/RadioRevealSlotExample.tsx +++ b/src/examples/radio/RadioRevealSlotExample.tsx @@ -1,163 +1,97 @@ import { Sandbox } from "@components/sandbox"; -import { useContext } from "react"; -import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; -import { GoabFormItem, GoabInput, GoabRadioGroup, GoabRadioItem, GoabSpacer } from "@abgov/react-components"; -import { OldComponentBanner } from "@components/old-component-banner/OldComponentBanner.tsx"; +import { GoabFormItem, GoabInput, GoabRadioGroup, GoabRadioItem } from "@abgov/react-components"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; export const RadioRevealSlotExample = () => { - const { version, language } = useContext(LanguageVersionContext); const noop = () => {} + return ( <> {/*Skip rendering because we use reveal that isn't supported by sandbox*/} {/*Angular*/} - {version === "old" && ( - - - -
- - - -
- - -
- - - -
- - - -
- - - -
- - - - `} - /> - )} - - {version === "old" && ( - - )} - - {/*Angular*/} - {version === "new" && ( - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + - - - - - - - - - - `} - /> - )} + + + + + + + + + + `} + /> - {version === "new" && ( - - )} + {/*React*/} - {version === "new" && ( - - setContactMethod(e.value)}> - - {/** do nothing */}} value="" /> - - } - /> - - {/** do nothing */}} value="" /> - - } - /> - - {/** do nothing */}} value="" /> - - } - /> - - - `} - /> - )} + + setContactMethod(e.value)}> + + {/** do nothing */}} value="" /> + + } + /> + + {/** do nothing */}} value="" /> + + } + /> + + {/** do nothing */}} value="" /> + + } + /> + + + `} + /> @@ -182,14 +116,6 @@ export const RadioRevealSlotExample = () => { - - {version === "old" && language === "react" && ( - - )} ); }; diff --git a/src/examples/require-user-action-before-continuing.tsx b/src/examples/require-user-action-before-continuing.tsx index 08cd949f8..933df5479 100644 --- a/src/examples/require-user-action-before-continuing.tsx +++ b/src/examples/require-user-action-before-continuing.tsx @@ -12,7 +12,6 @@ export const RequireUserActionBeforeContinuing = () => { setBasicModalOpen(true)}>Open Basic Modal setBasicModalOpen(false)} actions={ @@ -101,7 +100,6 @@ export const RequireUserActionBeforeContinuing = () => { setOpen(true)}>Open Basic Modal setOpen(false)} actions={ @@ -130,7 +128,6 @@ export const RequireUserActionBeforeContinuing = () => { setOpen(true)}>Open Basic Modal setOpen(false)} actions={ diff --git a/src/examples/reset-date-picker-field.tsx b/src/examples/reset-date-picker-field.tsx index 009dca0f7..1a33efa00 100644 --- a/src/examples/reset-date-picker-field.tsx +++ b/src/examples/reset-date-picker-field.tsx @@ -24,50 +24,55 @@ export const ResetDatePickerField = () => { setDate(undefined); } return ( - + {/*React*/} {version === "old" && (); + const [date, setDate] = useState(); - const setNewDate = (value: Date | undefined) => { - setDate(value); - }; + const setNewDate = (value: Date | undefined) => { + setDate(value); + }; - function setValue() { - const d = new Date(); - d.setDate(d.getDate() - 7); + function setValue() { + const d = new Date(); + d.setDate(d.getDate() - 7); - setDate(d); - } + setDate(d); + } - function clearValue() { - setDate(undefined); - } + function clearValue() { + setDate(undefined); + } + `} + />} - return ( - <> - - setNewDate(value)} - mb="xl" - > - - - - Set Value - Clear Value - - - ); - } - `} + {version === "old" && + setNewDate(value)} + mb="xl" + > + + + + + Set Value + + + Clear Value + + + `} />} {version === "new" && { lang="typescript" allowCopy={true} code={` - export function Datepicker() { - const [date, setDate] = useState(); + const [date, setDate] = useState(); - const setNewDate = (value: Date | undefined) => { - setDate(value); - }; + const setNewDate = (value: Date | undefined) => { + setDate(value); + }; - function setValue() { - const d = new Date(); - d.setDate(d.getDate() - 7); + function setValue() { + const d = new Date(); + d.setDate(d.getDate() - 7); - setDate(d); - } + setDate(d); + } - function clearValue() { - setDate(undefined); - } + function clearValue() { + setDate(undefined); + } + `} + />} - return ( - <> - - setNewDate(e.value as Date)} - mb="xl"> - - - - - Set Value - - Clear Value - - - ); - } - `} + {version === "new" && + setNewDate(e.value as Date)} + mb="xl"> + + + + + Set Value + + + Clear Value + + + `} />} {/*Angular*/} @@ -146,13 +154,13 @@ export const ResetDatePickerField = () => { tags="angular" allowCopy={true} code={` - + - Set Value - Clear Value + Set Value + Clear Value `} />} @@ -184,13 +192,13 @@ export const ResetDatePickerField = () => { lang="typescript" allowCopy={true} code={` - + - Set Value - Clear Value + Set Value + Clear Value `} />} @@ -223,18 +231,18 @@ export const ResetDatePickerField = () => { tags="angular" allowCopy={true} code={` - + - Set Value - Clear Value + Set Value + Clear Value `} />} - + { - + Set Value - Clear Value + Clear Value ) diff --git a/src/examples/show-multiple-actions-in-a-compact-table.tsx b/src/examples/show-multiple-actions-in-a-compact-table.tsx new file mode 100644 index 000000000..645fb6e5a --- /dev/null +++ b/src/examples/show-multiple-actions-in-a-compact-table.tsx @@ -0,0 +1,115 @@ +import { GoabBadge, GoabBlock, GoabIconButton, GoabTable } from "@abgov/react-components"; +import { Sandbox } from "@components/sandbox"; + +export const ShowMultipleActionsInACompactTable = () => { + return ( + <> + + + + + Status + Name + Id Number + Edit | Flag | Send + + + + + + + + Darlene Robertson + 45904 + + + + + + + + + + + + + + Floyd Miles + 47838 + + + + + + + + + + + + + + Kathryn Murphy + 34343 + + + + + + + + + + + + + + Annette Black + 89897 + + + + + + + + + + + + + + Esther Howard + 12323 + + + + + + + + + + + + + + Jane Cooper + 56565 + + + + + + + + + + + + + + ); +}; + +export default ShowMultipleActionsInACompactTable; diff --git a/src/examples/show-multiple-tags-together.tsx b/src/examples/show-multiple-tags-together.tsx new file mode 100644 index 000000000..324dd9b78 --- /dev/null +++ b/src/examples/show-multiple-tags-together.tsx @@ -0,0 +1,18 @@ +import { GoabBadge, GoabBlock } from "@abgov/react-components"; +import { Sandbox } from "@components/sandbox"; + +export const ShowMultipleTagsTogether = () => { + return ( + <> + + + + + + + + + ); +}; + +export default ShowMultipleTagsTogether; diff --git a/src/examples/sort-data-in-a-table.tsx b/src/examples/sort-data-in-a-table.tsx new file mode 100644 index 000000000..ad7fe3480 --- /dev/null +++ b/src/examples/sort-data-in-a-table.tsx @@ -0,0 +1,409 @@ +import { useContext, useEffect, useState } from "react"; +import { GoabTable, GoabTableSortHeader } from "@abgov/react-components"; +import type { GoabTableOnSortDetail } from "@abgov/ui-components-common"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; +import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; + +interface User { + firstName: string; + lastName: string; + age: number; +} + +export const SortDataInATable = () => { + const { version } = useContext(LanguageVersionContext); + + const [users, setUsers] = useState([]); + useEffect(() => { + const _users: User[] = [ + { + firstName: "Christian", + lastName: "Batz", + age: 18, + }, + { + firstName: "Brain", + lastName: "Wisozk", + age: 19, + }, + { + firstName: "Neha", + lastName: "Jones", + age: 23, + }, + { + firstName: "Tristin", + lastName: "Buckridge", + age: 31, + }, + ]; + setUsers(_users); + }, []); + + function sortData(event: GoabTableOnSortDetail) { + const _users = [...users]; + _users.sort((a: any, b: any) => { + return (a[event.sortBy] > b[event.sortBy] ? 1 : -1) * event.sortDir; + }); + setUsers(_users); + } + + return ( + // NOTE: sort functionality breaks when wrapped in Sandbox component + // + <> + + + + + First name + + + Last name + + + + Age + + + + + + {users.map(user => ( + + {user.firstName} + {user.lastName} + {user.age} + + ))} + + + + {/*React code*/} + {version === "old" && ( + ([]); + +useEffect(() => { + const _users: User[] = [ + { + firstName: "Christian", + lastName: "Batz", + age: 18, + }, + { + firstName: "Brain", + lastName: "Wisozk", + age: 19, + }, + { + firstName: "Neha", + lastName: "Jones", + age: 23, + }, + { + firstName: "Tristin", + lastName: "Buckridge", + age: 31, + }, + ]; + setUsers(_users); +}, []); + +function sortData(sortBy: string, sortDir: number) { + const _users = [...users]; + _users.sort((a: any, b: any) => { + return (a[sortBy] > b[sortBy] ? 1 : -1) * sortDir; + }); + setUsers(_users); +} + +return ( + + + + + First name + + + Last name + + + + Age + + + + + + {users.map((user) => ( + + {user.firstName} + {user.lastName} + {user.age} + + ))} + + +); + `} + /> + )} + + {version === "new" && ( + ([]); + +useEffect(() => { + const _users: User[] = [ + { + firstName: "Christian", + lastName: "Batz", + age: 18, + }, + { + firstName: "Brain", + lastName: "Wisozk", + age: 19, + }, + { + firstName: "Neha", + lastName: "Jones", + age: 23, + }, + { + firstName: "Tristin", + lastName: "Buckridge", + age: 31, + }, + ]; + setUsers(_users); +}, []); + +function sortData(event: GoabTableOnSortDetail) { + const _users = [...users]; + _users.sort((a: any, b: any) => { + return (a[event.sortBy] > b[event.sortBy] ? 1 : -1) * event.sortDir; + }); + setUsers(_users); +} + +return ( + + + + + First name + + + Last name + + + + Age + + + + + + {users.map((user) => ( + + {user.firstName} + {user.lastName} + {user.age} + + ))} + + +); + `} + /> + )} + + {/*Angular code*/} + {version === "old" && ( + (a[sortBy] > b[sortBy] ? 1 : -1) * sortDir + ); + } +} + `} + /> + )} + + {version === "old" && ( + + + + + First name and really long header + + + Last name + + + Age + + + + + + {{ user.firstName }} + {{ user.lastName }} + {{ user.age }} + + + + `} + /> + )} + + {version === "new" && ( + (a[sortBy] > b[sortBy] ? 1 : -1) * sortDir + ); + } +} + `} + /> + )} + + {version === "new" && ( + + + + First name and really long header + Last name + Age + + + + + {{ user.firstName }} + {{ user.lastName }} + {{ user.age }} + + + + `} + /> + )} + + ); +}; + +export default SortDataInATable; diff --git a/src/examples/tables/TablesExamples.tsx b/src/examples/tables/TablesExamples.tsx new file mode 100644 index 000000000..6bdf55899 --- /dev/null +++ b/src/examples/tables/TablesExamples.tsx @@ -0,0 +1,28 @@ +import SortDataInATable from "@examples/sort-data-in-a-table.tsx"; +import DisplayNumbersInATableSoTheyCanBeScannedEasily from "@examples/display-numbers-in-a-table-so-they-can-be-scanned-easily.tsx"; +import FilterDataInATable from "@examples/filter-data-in-a-table.tsx"; +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; + +export const TablesExamples = () => { + return ( + <> + + + + + + + + + + + + + ); +}; diff --git a/src/examples/warn-a-user-of-a-deadline.tsx b/src/examples/warn-a-user-of-a-deadline.tsx index d15c0f066..73374a33c 100644 --- a/src/examples/warn-a-user-of-a-deadline.tsx +++ b/src/examples/warn-a-user-of-a-deadline.tsx @@ -8,19 +8,13 @@ export const WarnAUserOfADeadline = () => { const {version} = useContext(LanguageVersionContext); const [warnCalloutModalOpen, setWarnCalloutModalOpen] = useState(); return ( - + setWarnCalloutModalOpen(true)}> Save for later setWarnCalloutModalOpen(false)} actions={ @@ -58,7 +52,7 @@ export const WarnAUserOfADeadline = () => { allowCopy={true} code={` Save for later -

You’ve selected to adjourn a matter that is required to appear today. This Calgary court location does not accept adjournment requests past 1PM MST. Please submit your adjournment request as soon as possible.

@@ -79,7 +73,7 @@ export const WarnAUserOfADeadline = () => { allowCopy={true} code={` Save for later -

You’ve selected to adjourn a matter that is required to appear today. This Calgary court location does not accept adjournment requests past 1PM MST. Please submit your adjournment request as soon as possible.

@@ -115,7 +109,6 @@ export const WarnAUserOfADeadline = () => { heading="Complete submission prior to 1PM" open={open} calloutVariant="important" - role="alertdialog" onClose={() => setOpen(false)} actions={ @@ -140,7 +133,6 @@ export const WarnAUserOfADeadline = () => { heading="Complete submission prior to 1PM" open={open} calloutVariant="important" - role="alertdialog" onClose={() => setOpen(false)} actions={ diff --git a/src/routes/components/Checkbox.tsx b/src/routes/components/Checkbox.tsx index cd3f22e8b..6aed93c8a 100644 --- a/src/routes/components/Checkbox.tsx +++ b/src/routes/components/Checkbox.tsx @@ -122,19 +122,6 @@ export default function CheckboxPage() { "Defines how the text will be translated for the screen reader. If not specified it will fall back to the name.", lang: "angular", }, - { - name: "reveal", - type: "slot", - lang: "angular", - description: "Additional content shown when the checkbox is checked.", - }, - { - name: "revealariallabel", - type: "string", - lang: "angular", - description: - "Defines how the text will be translated for the screen reader when the checkbox is checked and reveal the reveal slot content.", - }, { name: "onChange", type: "(name: string, checked: boolean, value: string) => void", @@ -365,7 +352,8 @@ export default function CheckboxPage() { heading={ <> Examples - + {version === "new" && } + {version === "old" && } } > diff --git a/src/routes/components/DatePicker.tsx b/src/routes/components/DatePicker.tsx index 694193bd8..921566c93 100644 --- a/src/routes/components/DatePicker.tsx +++ b/src/routes/components/DatePicker.tsx @@ -315,7 +315,7 @@ export default function DatePickerPage() { heading={ <> Examples - + } > diff --git a/src/routes/components/HeroBanner.tsx b/src/routes/components/HeroBanner.tsx index fb723a190..aafe798d2 100644 --- a/src/routes/components/HeroBanner.tsx +++ b/src/routes/components/HeroBanner.tsx @@ -1,35 +1,24 @@ -import { useContext, useState } from "react"; +import { useState } from "react"; import { ComponentBinding, Sandbox } from "@components/sandbox"; import { ComponentProperties, ComponentProperty, } from "@components/component-properties/ComponentProperties.tsx"; import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; -import { - GoabButton, - GoabHeroBanner, - GoabHeroBannerActions, - GoabTab, - GoabTabs, - GoabBadge, -} from "@abgov/react-components"; +import { GoabHeroBanner, GoabTab, GoabTabs, GoabBadge } from "@abgov/react-components"; import { ComponentContent } from "@components/component-content/ComponentContent"; -import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; -import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; -import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; +import { HeroBannerExamples } from "@examples/hero-banner/HeroBannerExamples.tsx"; -const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=622-14412"; +const FIGMA_LINK = + "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=622-14412"; export default function HeroBannerPage() { - const {version} = useContext(LanguageVersionContext); const [heroBannerProps, setHeroBannerProps] = useState({ heading: "Heading", }); - const relatedComponents = [ - { link: "/components/header", name: "Header" }, - ]; + const relatedComponents = [{ link: "/components/header", name: "Header" }]; const [heroBannerBindings, setHeroBannerBindings] = useState([ { label: "Heading", @@ -204,8 +193,6 @@ export default function HeroBannerPage() { setHeroBannerProps(props as { heading: string; [key: string]: unknown }); } - function noop() {} - return ( <> -

Playground

+

+ Playground +

Resources are available to help Alberta entrepreneurs and small businesses start, @@ -239,80 +228,8 @@ export default function HeroBannerPage() { Examples - } - > - - - - - {version === "old" && - Digital services help to support Albertan citizens receive government services. -
- Call to action -
- - `} - />} - - {version === "new" && - Resources are available to help Alberta entrepreneurs and small businesses start, grow and succeed. - - Call to action - - - `} - />} - - {/*React code*/} - {version === "old" && - Resources are available to help Alberta entrepreneurs and small businesses start, grow and succeed. - - Call to action - - - `} - />} - {version === "new" && - Resources are available to help Alberta entrepreneurs and small businesses start, grow and succeed. - - Call to action - - - `} - />} - - - Resources are available to help Alberta entrepreneurs and small businesses start, - grow and succeed. - - - Call to action - - - - + }> + diff --git a/src/routes/components/IconButton.tsx b/src/routes/components/IconButton.tsx index 3e0ce9eeb..fef692cde 100644 --- a/src/routes/components/IconButton.tsx +++ b/src/routes/components/IconButton.tsx @@ -1,10 +1,9 @@ import { GoabBadge, - GoabBlock, - GoabIconButton, GoabIconButtonProps, + GoabIconButton, + GoabIconButtonProps, GoabTab, - GoabTable, - GoabTabs + GoabTabs, } from "@abgov/react-components"; import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; import { @@ -18,7 +17,7 @@ import { ComponentContent } from "@components/component-content/ComponentContent import { GoabIconType } from "@abgov/ui-components-common"; import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; -import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; +import { IconButtonExamples } from "@examples/icon-button/IconButtonExamples.tsx"; type ComponentPropsType = GoabIconButtonProps; type CastingType = { @@ -31,7 +30,8 @@ export default function IconButtonPage() { icon: "refresh" as GoabIconType, ariaLabel: "Refresh icon", }); - const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=27301-302107"; + const FIGMA_LINK = + "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=27301-302107"; const [iconButtonBindings, setIconButtonBindings] = useState([ { label: "Variant", @@ -71,7 +71,7 @@ export default function IconButtonPage() { type: "string", name: "ariaLabel", value: "Refresh icon", - } + }, ]); const oldComponentProperties: ComponentProperty[] = [ @@ -212,143 +212,37 @@ export default function IconButtonPage() { description="An icon-only button for common or repetitive actions." relatedComponents={[ { link: "/components/button", name: "Button" }, - { link: "/components/button-group", name: "Button group" } + { link: "/components/button-group", name: "Button group" }, ]} figmaLink={FIGMA_LINK} githubLink="Icon button" /> - -

Playground

+

+ Playground +

{/*Component properties table*/} - - + Examples - + - } - > - - - - - - - - Status - Name - Id Number - Edit | Flag | Send - - - - - - - - Darlene Robertson - 45904 - - - - - - - - - - - - - - Floyd Miles - 47838 - - - - - - - - - - - - - - Kathryn Murphy - 34343 - - - - - - - - - - - - - - Annette Black - 89897 - - - - - - - - - - - - - - Esther Howard - 12323 - - - - - - - - - - - - - - Jane Cooper - 56565 - - - - - - - - - - - - + }> + diff --git a/src/routes/components/Modal.tsx b/src/routes/components/Modal.tsx index d2a504652..ac241e970 100644 --- a/src/routes/components/Modal.tsx +++ b/src/routes/components/Modal.tsx @@ -44,7 +44,6 @@ export default function ModalPage() { const {language} = useContext(LanguageVersionContext); const [componentProps, setComponentProps] = useState({ heading: "Are you sure you want to exit your application?", - role: "alertdialog", }); useEffect(() => { @@ -88,14 +87,6 @@ export default function ModalPage() { name: "closable", value: false, }, - { - label: "Role", - type: "list", - name: "role", - options: ["", "dialog", "alertdialog"], - value: "alertdialog", - helpText: "Select an ARIA role to determine what is announced by the screen reader.", - }, { label: "Open", type: "boolean", @@ -158,13 +149,6 @@ export default function ModalPage() { defaultValue: "false", lang: "angular", }, - { - name: "role", - type: "dialog | alertdialog", - description: - "'dialog' will announce header and the 1st input element, and requires at least one interactive element. 'alert-dialog' will read the entire contents of the modal. If the modal does not include any interactive elements, use the 'alertdialog' role.", - defaultValue: "dialog", - }, { name: "_close", type: "CustomEvent", @@ -226,13 +210,6 @@ export default function ModalPage() { description: "Show close icon and allow clicking the background to close the modal", defaultValue: "false", }, - { - name: "role", - type: "dialog | alertdialog", - description: - "'dialog' will announce header and the 1st input element, and requires at least one interactive element. 'alert-dialog' will read the entire contents of the modal. If the modal does not include any interactive elements, use the 'alertdialog' role.", - defaultValue: "dialog", - }, TestIdProperty, { name: "onClose", diff --git a/src/routes/components/Radio.tsx b/src/routes/components/Radio.tsx index 9e920aed1..b3879b9ac 100644 --- a/src/routes/components/Radio.tsx +++ b/src/routes/components/Radio.tsx @@ -480,7 +480,8 @@ export default function RadioPage() { heading={ <> Examples - + {version === "new" && } + {version === "old" && } } > diff --git a/src/routes/components/Skeleton.tsx b/src/routes/components/Skeleton.tsx index 78bf91575..bcfc67ac2 100644 --- a/src/routes/components/Skeleton.tsx +++ b/src/routes/components/Skeleton.tsx @@ -9,20 +9,23 @@ import { GoabSkeleton, GoabTab, GoabTabs, - GoabSkeletonProps, GoabBlock, GoabText + GoabSkeletonProps, + GoabBlock, } from "@abgov/react-components"; import { ComponentContent } from "@components/component-content/ComponentContent"; import { GoabSkeletonType } from "@abgov/ui-components-common"; import { LegacyMarginProperty, MarginProperty, - TestIdProperty + TestIdProperty, } from "@components/component-properties/common-properties.ts"; import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; // == Page props == -const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=27301-303445"; +const FIGMA_LINK = + "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=27301-303445"; const componentName = "Skeleton loader"; const description = "Provide visual feedback to users while loading a content heavy page or page element."; @@ -172,7 +175,9 @@ export default function SkeletonPage() { -

Playground

+

+ Playground +

@@ -183,97 +188,85 @@ export default function SkeletonPage() { - - - Card - -

Card

- - - - + + + + + + + - - Image - -

Image

- - - - + + + + + + + - - Text - -

Text

- - - - + + + + + + + - - Small text - -

Small text

- - - - + + + + + + + - - Title - -

Title

- - - - + + + + + + + - - Header - -

Header

- - - - + + + + + + + - - Paragraph - -

Paragraph

- - - - + + + + + + + - - Thumbnail - -

Thumbnail

- - - - + + + + + + + - - Avatar - -

Avatar

- - - - + + + + + + + - - Profile - -

Profile

- - - - - + + + + + + + diff --git a/src/routes/components/Table.tsx b/src/routes/components/Table.tsx index 0fab4f93d..e54a2960b 100644 --- a/src/routes/components/Table.tsx +++ b/src/routes/components/Table.tsx @@ -1,45 +1,29 @@ -import { useContext, useEffect, useState } from "react"; +import { useState } from "react"; import { ComponentBinding, Sandbox } from "@components/sandbox"; import { ComponentProperties, ComponentProperty, } from "@components/component-properties/ComponentProperties"; import { Category, ComponentHeader } from "@components/component-header/ComponentHeader"; -import { - GoabBadge, - GoabButton, - GoabTab, - GoabTable, - GoabTableSortHeader, - GoabTabs, -} from "@abgov/react-components"; -import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; +import { GoabBadge, GoabButton, GoabTab, GoabTable, GoabTabs } from "@abgov/react-components"; import { GoabTableProps } from "@abgov/react-components"; import { ComponentContent } from "@components/component-content/ComponentContent"; import { GoabTableOnSortDetail } from "@abgov/ui-components-common"; -import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; -import { FilterDataInATable } from "@examples/filter-data-in-a-table.tsx"; import { omit } from "lodash"; import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; -import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; - -interface User { - firstName: string; - lastName: string; - age: number; -} +import { TablesExamples } from "@examples/tables/TablesExamples.tsx"; type ComponentPropsType = Omit & { onSort?: (sortBy: string, sortDir: number) => void; }; export default function TablePage() { - const { version } = useContext(LanguageVersionContext); const [tableProps, setTableProps] = useState({ width: "100%", }); - const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=3785-18038"; + const FIGMA_LINK = + "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=3785-18038"; const [tableBindings, setTableBindings] = useState([ { label: "Width", @@ -122,42 +106,6 @@ export default function TablePage() { setTableProps(props as ComponentPropsType); } - // For table demo -- needs to do sort functionality - const [users, setUsers] = useState([]); - useEffect(() => { - const _users: User[] = [ - { - firstName: "Christian", - lastName: "Batz", - age: 18, - }, - { - firstName: "Brain", - lastName: "Wisozk", - age: 19, - }, - { - firstName: "Neha", - lastName: "Jones", - age: 23, - }, - { - firstName: "Tristin", - lastName: "Buckridge", - age: 31, - }, - ]; - setUsers(_users); - }, []); - - function sortData(event: GoabTableOnSortDetail) { - const _users = [...users]; - _users.sort((a: any, b: any) => { - return (a[event.sortBy] > b[event.sortBy] ? 1 : -1) * event.sortDir; - }); - setUsers(_users); - } - return ( <> -

Playground

+

+ Playground +

- + - - Examples - - - } - > - - - - - - - - - - First name - - - Last name - - - - Age - - - - - - {users.map(user => ( - - {user.firstName} - {user.lastName} - {user.age} - - ))} - - - - - {/*React code*/} - {version === "old" && ( - ([]); - - useEffect(() => { - const _users: User[] = [ - { - firstName: "Christian", - lastName: "Batz", - age: 18 - }, - { - firstName: "Brain", - lastName: "Wisozk", - age: 19 - }, - { - firstName: "Neha", - lastName: "Jones", - age: 23 - }, - { - firstName: "Tristin", - lastName: "Buckridge", - age: 31 - } - ]; - setUsers(_users); - }, []); - - function sortData(sortBy: string, sortDir: number) { - const _users = [...users]; - _users.sort((a: any, b: any) => { - return (a[sortBy] > b[sortBy] ? 1 : -1) * sortDir; - }); - setUsers(_users); - } - - return ( - - - - - First name - - - Last name - - - Age - - - - - {users.map(user => - - {user.firstName} - {user.lastName} - {user.age} - - )} - - - ) - `} - /> - )} - - {version === "new" && ( - ([]); - - useEffect(() => { - const _users: User[] = [ - { - firstName: "Christian", - lastName: "Batz", - age: 18 - }, - { - firstName: "Brain", - lastName: "Wisozk", - age: 19 - }, - { - firstName: "Neha", - lastName: "Jones", - age: 23 - }, - { - firstName: "Tristin", - lastName: "Buckridge", - age: 31 - } - ]; - setUsers(_users); - }, []); - - function sortData(event: GoabTableOnSortDetail) { - const _users = [...users]; - _users.sort((a: any, b: any) => { - return (a[event.sortBy] > b[event.sortBy] ? 1 : -1) * event.sortDir; - }); - setUsers(_users); - } - - return ( - - - - - First name - - - Last name - - - Age - - - - - {users.map(user => - - {user.firstName} - {user.lastName} - {user.age} - - )} - - - ) - `} - /> - )} - - {/*Angular code*/} - {version === "old" && ( - (a[sortBy] > b[sortBy] ? 1 : -1) * sortDir - ); - } - } - `} - /> - )} - - {version === "old" && ( - - - - First name and really long header - Last name - Age - - - - - {{ user.firstName }} - {{ user.lastName }} - {{ user.age }} - - - - `} - /> - )} - - {version === "new" && ( - (a[sortBy] > b[sortBy] ? 1 : -1) * sortDir - ); - } - } - `} - /> - )} - - {version === "new" && ( - - - - First name and really long header - Last name - Age - - - - - {{ user.firstName }} - {{ user.lastName }} - {{ user.age }} - - - - `} - /> - )} - - - - - - - - Col 1 - Col 2 - Number Column - - - - - Item 1 - Item 2 - 54 - - - Item 1 - Item 2 - 4567 - - - - - - - - + + Examples + + + }> + @@ -636,7 +211,6 @@ export default function TablePage() { - diff --git a/src/routes/components/TextField.tsx b/src/routes/components/TextField.tsx index b9c407d9e..bb6d03907 100644 --- a/src/routes/components/TextField.tsx +++ b/src/routes/components/TextField.tsx @@ -138,6 +138,12 @@ export default function TextFieldPage() { value: "", name: "ariaLabel", }, + ...(version === "new" ? [{ + label: "Trailing icon ARIA label", + type: "string" as const, + value: "", + name: "trailingIconAriaLabel", + }] : []), { label: "Value", type: "string", @@ -212,6 +218,7 @@ export default function TextFieldPage() { type: "GoAIconType", description: "Icon shown to the right of the text.", }, + { name: "disabled", type: "boolean", @@ -331,7 +338,7 @@ export default function TextFieldPage() { lang: "react", type: "on | off | none | sentences | words | characters", description: - "Controls whether and how text input is automatically capitalized as it is entered/edited by the user.", + "Controls whether and how text input is automatically capitalized as it is entered/edited by the user. This only works on mobile devices.", defaultValue: "off", }, { @@ -339,7 +346,7 @@ export default function TextFieldPage() { lang: "angular", type: "on | off | none | sentences | words | characters", description: - "Controls whether and how text input is automatically capitalized as it is entered/edited by the user.", + "Controls whether and how text input is automatically capitalized as it is entered/edited by the user. This only works on mobile devices.", defaultValue: "off", }, { @@ -477,6 +484,11 @@ export default function TextFieldPage() { type: "GoabIconType", description: "Icon shown to the right of the text.", }, + { + name: "trailingIconAriaLabel", + type: "string", + description: "Aria label for the trailing icon. Use only when the trailing icon is interactive.", + }, { name: "disabled", type: "boolean", @@ -553,7 +565,7 @@ export default function TextFieldPage() { name: "autoCapitalize", type: "GoabInputAutoCapitalize (on | off | none | sentences | words | characters)", description: - "Controls whether and how text input is automatically capitalized as it is entered/edited by the user.", + "Controls whether and how text input is automatically capitalized as it is entered/edited by the user. This only works on mobile devices.", defaultValue: "off", }, {