diff --git a/package-lock.json b/package-lock.json index e72f7a76b..881db2086 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.10.0-dev.8", - "@abgov/ui-components-common": "1.10.0-dev.2", - "@abgov/web-components": "1.40.0-dev.17", + "@abgov/react-components": "6.10.0-next.1", + "@abgov/ui-components-common": "1.10.0-next.1", + "@abgov/web-components": "1.40.0-next.1", "@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.10.0-dev.8", - "resolved": "https://registry.npmjs.org/@abgov/react-components/-/react-components-6.10.0-dev.8.tgz", - "integrity": "sha512-2acGDt2Hzw9QBYYgcdofL4k8b4WbFebj/DfPFTRP7nMpiTaAGaapw391c6qBHVm17WBpZAPAibOscoLvbnYSwA==", + "version": "6.10.0-next.1", + "resolved": "https://registry.npmjs.org/@abgov/react-components/-/react-components-6.10.0-next.1.tgz", + "integrity": "sha512-82N8l6CQ/wI/CIyQQaYb4YvJ8pbvGAn4d9phnVAKcaJW7UBdsBjxYd97GDceGh4d+QKqxgLxREG2v+1Wslc1Qw==", "license": "Apache-2.0", "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", @@ -79,15 +79,15 @@ } }, "node_modules/@abgov/ui-components-common": { - "version": "1.10.0-dev.2", - "resolved": "https://registry.npmjs.org/@abgov/ui-components-common/-/ui-components-common-1.10.0-dev.2.tgz", - "integrity": "sha512-hta2YqaQfUD5PYg0lumsndI94NtQea7D8wtPYg52Pjf/StZEhT0qWST3LaK9KFNp3libhJ0lDb9j1/t5L+z0ug==", + "version": "1.10.0-next.1", + "resolved": "https://registry.npmjs.org/@abgov/ui-components-common/-/ui-components-common-1.10.0-next.1.tgz", + "integrity": "sha512-mrm9oTGwNmlBj2c6q+MATSu9DOhVpIIVK24YKi+9oFbR4XNZyc5YNGm2BIjN0h3+POVY0BeevAAr47A0K/ht3g==", "license": "Apache-2.0" }, "node_modules/@abgov/web-components": { - "version": "1.40.0-dev.17", - "resolved": "https://registry.npmjs.org/@abgov/web-components/-/web-components-1.40.0-dev.17.tgz", - "integrity": "sha512-wbxPI/yBmUw9BuTdYJTrsU41OXU3FFvEXMr8+KCQmX+KIEztUpQqWCcZ1FEyhfSXUmcAK+MIAfkj2B/CGrmO+w==", + "version": "1.40.0-next.1", + "resolved": "https://registry.npmjs.org/@abgov/web-components/-/web-components-1.40.0-next.1.tgz", + "integrity": "sha512-BF6N3K+XF9AKjq7CBKl91nMb+uTzn1Yz91fCD5jVmMXW8BIPr7LgPW/vllhB338bEcGnEbXx2m0G/4iVxqc79A==", "license": "Apache-2.0" }, "node_modules/@esbuild/aix-ppc64": { @@ -700,7 +700,6 @@ "version": "6.1.2", "resolved": "https://registry.npmjs.org/@octokit/core/-/core-6.1.2.tgz", "integrity": "sha512-hEb7Ma4cGJGEUNOAVmyfdB/3WirWMg5hDuNFVejGEDFqupeOysLc2sG6HJxY2etBp5YQu5Wtxwi020jS9xlUwg==", - "peer": true, "dependencies": { "@octokit/auth-token": "^5.0.0", "@octokit/graphql": "^8.0.0", @@ -1419,7 +1418,6 @@ "version": "18.2.67", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.67.tgz", "integrity": "sha512-vkIE2vTIMHQ/xL0rgmuoECBCkZFZeHr49HeWSc24AptMbNRo7pwSBvj73rlJJs9fGKj0koS+V7kQB1jHS0uCgw==", - "peer": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -1506,7 +1504,6 @@ "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz", "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==", "dev": true, - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "5.62.0", "@typescript-eslint/types": "5.62.0", @@ -1679,7 +1676,6 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz", "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==", "dev": true, - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -1959,7 +1955,6 @@ "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz", "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==", "dev": true, - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", @@ -2878,7 +2873,6 @@ "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", - "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -2890,7 +2884,6 @@ "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", - "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" @@ -3221,7 +3214,6 @@ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.3.tgz", "integrity": "sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==", "dev": true, - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -3266,7 +3258,6 @@ "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.21.3", "postcss": "^8.4.43", diff --git a/package.json b/package.json index 0370f34f3..d9a76784e 100644 --- a/package.json +++ b/package.json @@ -12,9 +12,9 @@ "prettier": "npx prettier . --write" }, "dependencies": { - "@abgov/react-components": "6.10.0-dev.8", - "@abgov/ui-components-common": "1.10.0-dev.2", - "@abgov/web-components": "1.40.0-dev.17", + "@abgov/react-components": "6.10.0-next.1", + "@abgov/ui-components-common": "1.10.0-next.1", + "@abgov/web-components": "1.40.0-next.1", "@faker-js/faker": "^8.3.1", "highlight.js": "^11.8.0", "js-cookie": "^3.0.5", diff --git a/src/components/sandbox/Sandbox.tsx b/src/components/sandbox/Sandbox.tsx index f7a89edda..6341c049e 100644 --- a/src/components/sandbox/Sandbox.tsx +++ b/src/components/sandbox/Sandbox.tsx @@ -21,12 +21,12 @@ type Flag = "reactive" | "template-driven" | "event"; type ComponentType = "goa" | "codesnippet"; type Serializer = (el: any, properties: ComponentBinding[]) => string; -interface SandboxProps { +interface SandboxProps> { properties?: ComponentBinding[]; formItemProperties?: ComponentBinding[]; note?: string | { type?: GoabCalloutType; heading?: string; content: string }; fullWidth?: boolean; - onChange?: (bindings: ComponentBinding[], props: Record) => void; + onChange?: (bindings: ComponentBinding[], props: T) => void; onChangeFormItemBindings?: (bindings: ComponentBinding[], props: Record) => void; flags?: Flag[]; skipRender?: boolean; // prevent rendering the snippet, to allow custom code to be shown @@ -41,11 +41,11 @@ interface SandboxProps { type SandboxViewProps = { fullWidth?: boolean; - sandboxProps: SandboxProps; + sandboxProps: SandboxProps; background?: string; }; -export const Sandbox = (props: SandboxProps) => { +export const Sandbox = ,>(props: SandboxProps) => { const {language: lang, version} = useContext(LanguageVersionContext); const [formatLang, setFormatLang] = useState(""); @@ -92,10 +92,20 @@ export const Sandbox = (props: SandboxProps) => { } function onChangeFormItemBindings(bindings: ComponentBinding[]) { - props.onChangeFormItemBindings?.(bindings, toKeyValue(bindings)); + props.onChangeFormItemBindings?.(bindings, toFormItemKeyValue(bindings)); } - function toKeyValue(bindings: ComponentBinding[]) { + function toKeyValue(bindings: ComponentBinding[]): T { + return bindings.reduce((acc: Record, prop: ComponentBinding) => { + if (typeof prop.value === "string" && prop.value === "") { + return acc; + } + acc[prop.name] = prop.value; + return acc; + }, {}) as unknown as T; + } + + function toFormItemKeyValue(bindings: ComponentBinding[]): Record { return bindings.reduce((acc: Record, prop: ComponentBinding) => { if (typeof prop.value === "string" && prop.value === "") { return acc; @@ -117,7 +127,7 @@ export const Sandbox = (props: SandboxProps) => { return ( <> - {props.skipRenderDom ? null : } + {props.skipRenderDom ? null : } background={props.background} />} {/* Only render the GoAAccordion if props.properties is provided */} {props.properties && props.properties.length > 0 && ( @@ -141,7 +151,7 @@ export const Sandbox = (props: SandboxProps) => { /> )} - + } formatLang={formatLang} lang={lang} serializers={serializers} version={version} /> {props.note && (typeof props.note === "string" ? (

{props.note}

@@ -162,7 +172,7 @@ export const Sandbox = (props: SandboxProps) => { }; type SandboxCodeProps = { - props: SandboxProps & { children: ReactNode }; + props: SandboxProps & { children: ReactNode }; lang: string; formatLang: string; serializers: Record; @@ -246,7 +256,7 @@ function SandboxCode(p: SandboxCodeProps) { // to be displayed, while hiding the non-reactive ones type AdditionalCodeSnippetsProps = { tags: string[]; - sandboxProps: SandboxProps; + sandboxProps: SandboxProps; } function AdditionalCodeSnippets(props: AdditionalCodeSnippetsProps) { const matches = (list: string[]): boolean => { @@ -269,7 +279,7 @@ function AdditionalCodeSnippets(props: AdditionalCodeSnippetsProps) { // Filters components from within the Sandbox children // i.e. Get all the components type ComponentListProps = { - sandboxProps: SandboxProps; + sandboxProps: SandboxProps; type: ComponentType; } function ComponentList(props: ComponentListProps): ReactElement[] { @@ -289,7 +299,7 @@ function ComponentList(props: ComponentListProps): ReactElement[] { type ComponentOutputProps = { formatLang: string; type: "angular" | "angular-reactive" | "angular-template-driven" | "react"; - sandboxProps: SandboxProps; + sandboxProps: SandboxProps; serializer: Serializer; } diff --git a/src/examples/show-links-to-navigation-items.tsx b/src/examples/show-links-to-navigation-items.tsx index 9234e49e3..1b024fa00 100644 --- a/src/examples/show-links-to-navigation-items.tsx +++ b/src/examples/show-links-to-navigation-items.tsx @@ -12,10 +12,6 @@ import { propsToString } from "@components/sandbox/BaseSerializer.ts"; type FooterNavPropsType = GoabFooterNavSectionProps; type FooterPropsType = GoabAppFooterProps; -type CastingType = { - // add any required props here - [key: string]: unknown; -}; export const ShowLinksToNavigationItems = () => { const {version} = useContext(LanguageVersionContext); @@ -55,8 +51,8 @@ export const ShowLinksToNavigationItems = () => { maxColumnCount: props.maxColumnCount || 1 }; - setFooterProps(footerProps as CastingType); - setFooterNavSectionProps(footerNavSectionProps as CastingType); + setFooterProps(footerProps as FooterPropsType); + setFooterNavSectionProps(footerNavSectionProps as FooterNavPropsType); setAppFooterNavBindings(bindings); } diff --git a/src/hooks/useSandboxFormItem.tsx b/src/hooks/useSandboxFormItem.tsx index 8c5c96dff..c9c09038c 100644 --- a/src/hooks/useSandboxFormItem.tsx +++ b/src/hooks/useSandboxFormItem.tsx @@ -43,7 +43,7 @@ export const useSandboxFormItem = (initialProps: GoabFormItemProps) => { function onFormItemChange(bindings: ComponentBinding[], props: Record) { setFormItemBindings(bindings); - setFormItemProps(props); + setFormItemProps(props as GoabFormItemProps); } return { formItemBindings, formItemProps, onFormItemChange }; diff --git a/src/routes/components/Accordion.tsx b/src/routes/components/Accordion.tsx index 6390402b5..dbefe481f 100644 --- a/src/routes/components/Accordion.tsx +++ b/src/routes/components/Accordion.tsx @@ -14,7 +14,6 @@ import { Category, ComponentHeader } from "@components/component-header/Componen import { useState } from "react"; import AccordionExamples from "@examples/accordion/AccordionExamples.tsx"; import { ComponentContent } from "@components/component-content/ComponentContent"; -import { GoabAccordionHeadingSize } from "@abgov/ui-components-common"; import { LegacyMarginProperty, LegacyTestIdProperties, @@ -35,12 +34,6 @@ const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%9 type ComponentPropsType = GoabAccordionProps; -type CastingType = { - heading: string; - headingSize: GoabAccordionHeadingSize; - children: React.ReactNode; - [key: string]: unknown; -}; export default function AccordionPage() { @@ -215,9 +208,9 @@ export default function AccordionPage() { MarginProperty, ]; - function onSandboxChange(bindings: ComponentBinding[], props: Record) { + function onSandboxChange(bindings: ComponentBinding[], props: ComponentPropsType) { setAccordionBindings(bindings); - setAccordionProps(props as CastingType); + setAccordionProps(props); } return ( @@ -237,7 +230,7 @@ export default function AccordionPage() {

Playground

- + properties={accordionBindings} onChange={onSandboxChange} fullWidth> This is the content in an accordion item. This content can be anything that you want including rich text, components, and more. diff --git a/src/routes/components/AppFooter.tsx b/src/routes/components/AppFooter.tsx index 2c71b9c19..a8b735df7 100644 --- a/src/routes/components/AppFooter.tsx +++ b/src/routes/components/AppFooter.tsx @@ -30,11 +30,6 @@ const relatedComponents = [ ]; type ComponentPropsType = GoabAppFooterProps; -type CastingType = { - // add any required props here - [key: string]: unknown; -}; - export default function AppFooterPage() { const {language} = useContext(LanguageVersionContext); @@ -88,8 +83,8 @@ export default function AppFooterPage() { }, ]; - function onSandbox1Change(bindings: ComponentBinding[], props: Record) { - setSandbox1Props(props as CastingType); + function onSandbox1Change(bindings: ComponentBinding[], props: ComponentPropsType) { + setSandbox1Props(props); setAppFooterBindings(bindings); } @@ -110,7 +105,7 @@ export default function AppFooterPage() { Playground

Basic Footer

- + properties={appFooterBindings} onChange={onSandbox1Change} fullWidth> diff --git a/src/routes/components/AppHeader.tsx b/src/routes/components/AppHeader.tsx index 0818fb92d..923ec9df3 100644 --- a/src/routes/components/AppHeader.tsx +++ b/src/routes/components/AppHeader.tsx @@ -29,10 +29,6 @@ const relatedComponents = [ { link: "/components/microsite-header", name: "Microsite header" } ]; type ComponentPropsType = GoabAppHeaderProps; -type CastingType = { - // add any required props here - [key: string]: unknown; -}; export default function AppHeaderPage() { const [appHeaderProps, setAppHeaderProps] = useState({ url: "www.alberta.ca", @@ -185,8 +181,8 @@ export default function AppHeaderPage() { ]; - function onSandboxChange(bindings: ComponentBinding[], props: Record) { - setAppHeaderProps(props as CastingType); + function onSandboxChange(bindings: ComponentBinding[], props: ComponentPropsType) { + setAppHeaderProps(props); setAppHeaderBindings(bindings); } @@ -207,7 +203,7 @@ export default function AppHeaderPage() {

Playground

- + properties={appHeaderBindings} onChange={onSandboxChange} fullWidth> diff --git a/src/routes/components/Badge.tsx b/src/routes/components/Badge.tsx index c333ec495..611c974a8 100644 --- a/src/routes/components/Badge.tsx +++ b/src/routes/components/Badge.tsx @@ -8,7 +8,6 @@ import { } from "@components/component-properties/ComponentProperties.tsx"; import { ComponentContent } from "@components/component-content/ComponentContent"; import BadgeExamples from "@examples/badge/BadgeExamples.tsx"; -import { GoabBadgeType } 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 ICONS from "@routes/components/icons.json"; @@ -37,12 +36,6 @@ const relatedComponents = [ ]; type ComponentPropsType = GoabBadgeProps; -type CastingType = { - // add any required props here - type: GoabBadgeType; - content: string; - [key: string]: unknown; -}; export default function BadgePage() { const [badgeProps, setBadgeProps] = useState({ @@ -203,9 +196,9 @@ export default function BadgePage() { }, ]; - function onSandboxChange(badgeBindings: ComponentBinding[], props: Record) { + function onSandboxChange(badgeBindings: ComponentBinding[], props: ComponentPropsType) { setBadgeBindings(badgeBindings); - setBadgeProps(props as CastingType); + setBadgeProps(props); } return ( @@ -224,7 +217,7 @@ export default function BadgePage() {

Playground

- + properties={badgeBindings} onChange={onSandboxChange}> ({ @@ -163,9 +158,9 @@ export default function CalloutPage() { MarginProperty, ]; - function onSandboxChange(bindings: ComponentBinding[], props: Record) { + function onSandboxChange(bindings: ComponentBinding[], props: ComponentPropsType) { setComponentBindings(bindings); - setComponentProps(props as CastingType); + setComponentProps(props); } return ( @@ -185,7 +180,7 @@ export default function CalloutPage() {

Playground

- + properties={componentBindings} onChange={onSandboxChange}> Callout important information for the user. diff --git a/src/routes/components/Checkbox.tsx b/src/routes/components/Checkbox.tsx index 113fe77b2..ac6e5cabf 100644 --- a/src/routes/components/Checkbox.tsx +++ b/src/routes/components/Checkbox.tsx @@ -30,11 +30,6 @@ const relatedComponents = [ ]; const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=183-219"; type ComponentPropsType = GoabCheckboxProps; -type CastingType = { - name: string; - checked: boolean; - [key: string]: unknown; -}; export default function CheckboxPage() { const {version} = useContext(LanguageVersionContext); const [checkboxProps, setCheckboxProps] = useState({ @@ -241,7 +236,7 @@ export default function CheckboxPage() { const noop = () => {}; - function onChange(bindings: ComponentBinding[], props: Record) { + function onChange(bindings: ComponentBinding[], props: ComponentPropsType) { const missingProps = { name: "item", checked: false, @@ -250,7 +245,7 @@ export default function CheckboxPage() { const updatedProps = { ...missingProps, ...props }; setCheckboxBindings(bindings); - setCheckboxProps(updatedProps as CastingType); + setCheckboxProps(updatedProps); } return ( @@ -268,7 +263,7 @@ export default function CheckboxPage() {

Playground

- properties={checkboxBindings} formItemProperties={formItemBindings} onChange={onChange} diff --git a/src/routes/components/Container.tsx b/src/routes/components/Container.tsx index 1a1c9e493..820966d8e 100644 --- a/src/routes/components/Container.tsx +++ b/src/routes/components/Container.tsx @@ -27,9 +27,6 @@ const relatedComponents = [ { link: "/components/divider", name: "Divider" } ]; type ComponentPropsType = GoabContainerProps; -type CastingType = { - [key: string]: unknown; -}; export default function ContainerPage() { const [containerProps, setContainerProps] = useState({}); @@ -213,9 +210,9 @@ export default function ContainerPage() { }, ]; - function onSandboxChange(bindings: ComponentBinding[], props: Record) { + function onSandboxChange(bindings: ComponentBinding[], props: ComponentPropsType) { setContainerBindings(bindings); - setContainerProps(props as CastingType); + setContainerProps(props); } return ( @@ -234,7 +231,7 @@ export default function ContainerPage() {

Playground

- + properties={containerBindings} onChange={onSandboxChange} fullWidth>

Detach to use

Add things inside me

diff --git a/src/routes/components/DatePicker.tsx b/src/routes/components/DatePicker.tsx index e7fa0f57d..284db843f 100644 --- a/src/routes/components/DatePicker.tsx +++ b/src/routes/components/DatePicker.tsx @@ -17,7 +17,6 @@ import { import { useSandboxFormItem } from "@hooks/useSandboxFormItem.tsx"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { ComponentContent } from "@components/component-content/ComponentContent"; -import { GoabDatePickerOnChangeDetail } from "@abgov/ui-components-common"; import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; import { LegacyMarginProperty, @@ -40,10 +39,6 @@ const relatedComponents = [ const description = "Lets users select a date through a calendar without the need to manually type it in a field."; type ComponentPropsType = GoabDatePickerProps; -type CastingType = { - [key: string]: unknown; - onChange: (event: GoabDatePickerOnChangeDetail) => void; -}; export default function DatePickerPage() { const { version } = useContext(LanguageVersionContext); @@ -217,9 +212,9 @@ export default function DatePickerPage() { }, ]; - function onSandboxChange(bindings: ComponentBinding[], props: Record) { + function onSandboxChange(bindings: ComponentBinding[], props: ComponentPropsType) { setComponentBindings(bindings); - setComponentProps(props as CastingType); + setComponentProps(props); } const noop = () => {}; @@ -241,7 +236,7 @@ export default function DatePickerPage() {

Playground

- properties={componentBindings} formItemProperties={formItemBindings} onChange={onSandboxChange} diff --git a/src/routes/components/Dropdown.tsx b/src/routes/components/Dropdown.tsx index da729e00e..acbb213d7 100644 --- a/src/routes/components/Dropdown.tsx +++ b/src/routes/components/Dropdown.tsx @@ -41,12 +41,6 @@ const relatedComponents = [ { link: "/components/radio", name: "Radio" }, ]; type ComponentPropsType = GoabDropdownProps; -type CastingType = { - name: string; - value: string; - [key: string]: unknown; - onChange: (event: GoabDropdownOnChangeDetail) => void; -}; export default function DropdownPage() { const { version } = useContext(LanguageVersionContext); @@ -397,9 +391,9 @@ export default function DropdownPage() { }, ]; - function onSandboxChange(bindings: ComponentBinding[], props: Record) { + function onSandboxChange(bindings: ComponentBinding[], props: ComponentPropsType) { setDropdownBindings(bindings); - setDropdownProps(props as CastingType); + setDropdownProps(props); } // Demo @@ -407,7 +401,7 @@ export default function DropdownPage() { function onChange(event: GoabDropdownOnChangeDetail) { setColor(event.value || ""); - setDropdownProps({ ...dropdownProps, value: event.value || "" } as CastingType); + setDropdownProps({ ...dropdownProps, value: event.value || "" }); } return ( @@ -426,7 +420,7 @@ export default function DropdownPage() {

Playground

- properties={dropdownBindings} formItemProperties={formItemBindings} onChange={onSandboxChange} diff --git a/src/routes/components/FileUploader.tsx b/src/routes/components/FileUploader.tsx index 22f5ce6c2..e823ec64c 100644 --- a/src/routes/components/FileUploader.tsx +++ b/src/routes/components/FileUploader.tsx @@ -74,10 +74,6 @@ const relatedComponents = [ const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=804-5767"; type ComponentPropsType = Omit; -type CastingType = { - maxFileSize: string; - [key: string]: unknown; -}; export default function FileUploaderPage() { const { version } = useContext(LanguageVersionContext); @@ -272,9 +268,10 @@ export default function FileUploaderPage() { }, ]; - function onSandboxChange(bindings: ComponentBinding[], props: Record) { + + function onSandboxChange(bindings: ComponentBinding[], props: ComponentPropsType) { setFileUploaderBindings(bindings); - setFileUploaderProps(props as CastingType); + setFileUploaderProps(props); } // For file uploader demo @@ -321,14 +318,9 @@ export default function FileUploaderPage() { -

- Playground -

- +

Playground

+ properties={fileUploaderBindings} onChange={onSandboxChange} fullWidth skipRender> + {/* ******* */} {/* Angular */} {/* ******* */} @@ -414,11 +406,7 @@ export default function FileUploaderPage() { allowCopy={true} code={` - + , "angular", version)}> @for (upload of uploads; track $index) { - + , "react", version)} /> {uploads.map(upload => ( - uploadFile(event.file)} ${propsToString( - fileUploaderProps, - "react", - version - )} /> + uploadFile(event.file)} ${propsToString(fileUploaderProps as Record, "react", version)} /> {uploads.map(upload => ( ({ content: "Chip text", @@ -108,9 +103,9 @@ export default function FilterChipPage() { MarginProperty, ]; - function onSandboxChange(bindings: ComponentBinding[], props: Record) { + function onSandboxChange(bindings: ComponentBinding[], props: ComponentPropsType) { setComponentBindings(bindings); - setComponentProps(props as CastingType); + setComponentProps(props); } return ( @@ -127,7 +122,7 @@ export default function FilterChipPage() {

Playground

- + properties={componentBindings} onChange={onSandboxChange}> ({ icon: "refresh" as GoabIconType, @@ -200,8 +195,8 @@ export default function IconButtonPage() { }, ]; - function onSandboxChange(bindings: ComponentBinding[], props: Record) { - setIconButtonProps(props as CastingType); + function onSandboxChange(bindings: ComponentBinding[], props: ComponentPropsType) { + setIconButtonProps(props); setIconButtonBindings(bindings); } return ( @@ -224,7 +219,7 @@ export default function IconButtonPage() {

Playground

- + properties={iconButtonBindings} onChange={onSandboxChange}> diff --git a/src/routes/components/MenuButton.tsx b/src/routes/components/MenuButton.tsx index 70218b81e..13950a418 100644 --- a/src/routes/components/MenuButton.tsx +++ b/src/routes/components/MenuButton.tsx @@ -21,7 +21,6 @@ import { ExamplesEmpty } from "@components/empty-states/examples-empty/ExamplesE import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; import { ComponentBinding, Sandbox } from "@components/sandbox"; -import { GoabButtonType } from "@abgov/ui-components-common"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet"; const FIGMA_LINK = @@ -37,11 +36,6 @@ const relatedComponents = [ ]; type ComponentPropsType = GoabMenuButtonProps; -type CastingType = { - text: string, - type: GoabButtonType, - [key: string]: unknown; -}; export default function MenuButtonPage() { const { version, language } = useContext(LanguageVersionContext); @@ -114,9 +108,9 @@ export default function MenuButtonPage() { }, ]; - function onSandboxChange(bindings: ComponentBinding[], props: Record) { + function onSandboxChange(bindings: ComponentBinding[], props: ComponentPropsType) { setMenuButtonBindings(bindings); - setMenuButtonProps(props as CastingType); + setMenuButtonProps(props); } function handleAction(detail: GoabMenuButtonOnActionDetail) { @@ -143,7 +137,7 @@ export default function MenuButtonPage() {

Playground

- + properties={menuButtonBindings} onChange={onSandboxChange}> void; -}; export default function RadioPage() { const { version } = useContext(LanguageVersionContext); @@ -297,8 +290,8 @@ export default function RadioPage() { MarginProperty, ]; - function onSandboxChange(bindings: ComponentBinding[], props: Record) { - setRadioProps(props as CastingType); + function onSandboxChange(bindings: ComponentBinding[], props: ComponentPropsType) { + setRadioProps(props); setRadioBindings(bindings); } @@ -322,7 +315,7 @@ export default function RadioPage() {

Playground

- properties={radioBindings} formItemProperties={formItemBindings} onChange={onSandboxChange} diff --git a/src/routes/components/Tabs.tsx b/src/routes/components/Tabs.tsx index e5b0b1f9b..b8948480b 100644 --- a/src/routes/components/Tabs.tsx +++ b/src/routes/components/Tabs.tsx @@ -1,18 +1,14 @@ -import { - GoabBadge, - GoabContainer, - GoabTab, - GoabTabs, -} from "@abgov/react-components"; +import { useState, useContext } from "react"; +import { GoabBadge, GoabContainer, GoabTab, GoabTabs } from "@abgov/react-components"; import { ComponentProperties, ComponentProperty, } from "@components/component-properties/ComponentProperties"; import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; import { ComponentContent } from "@components/component-content/ComponentContent"; +import { Sandbox, ComponentBinding } from "@components/sandbox"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet"; import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; -import { useContext } from "react"; import { TestIdProperty } from "@components/component-properties/common-properties.ts"; import { TabsExamples } from "@examples/tabs/TabsExamples.tsx"; import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; @@ -23,9 +19,20 @@ const componentName = "Tabs"; const description = "Let users navigate between related sections of content, displaying one section at a time."; const category = Category.STRUCTURE_AND_NAVIGATION; -const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=25293-519360"; +const FIGMA_LINK = + "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=25293-519360"; export default function TabsPage() { const { version } = useContext(LanguageVersionContext); + const [tabsBindings, setTabsBindings] = useState([ + { + label: "Variant", + type: "list", + name: "variant", + options: ["", "default", "segmented"], + value: "", + }, + ]); + const [tabsProps, setTabsProps] = useState>({}); const oldComponentProperties: ComponentProperty[] = [ { name: "initialtab", @@ -61,6 +68,12 @@ export default function TabsPage() { defaultValue: "1", description: "Current active tab", }, + { + name: "variant", + type: "GoabTabsVariant (default | segmented)", + defaultValue: "default", + description: "The visual style variant of the tabs.", + }, { name: "onChange", type: "(event: GoabTabsOnChangeDetail) => void", @@ -89,6 +102,12 @@ export default function TabsPage() { lang: "angular", description: "Add components to the tab heading such as badges", }, + { + name: "disabled", + type: "boolean", + defaultValue: "false", + description: "Disables the tab, preventing user interaction.", + }, ]; const noop = () => {}; @@ -115,7 +134,13 @@ export default function TabsPage() { {/*4. If you click anywhere on the screen, it then autoscrolls back up to the top*/}
- + {/* JSON stringify to force React to remount the `GoabTabs` component when variant changes */} + Tab Item 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. @@ -131,8 +156,8 @@ export default function TabsPage() {
- {/*Angular code*/} + {/*Angular code*/} {version === "old" && ( <> )} + {version === "new" && ( - <> + { + setTabsBindings(bindings); + setTabsProps(props); + }} + skipRender + skipRenderDom + > + {/* Angular Code */} + Tab Item 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. @@ -199,53 +236,51 @@ export default function TabsPage() { `} /> - - )} - {/*React Code*/} - - {version === "old" && ( - <> + {/* React Code */} - - Tab Item 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - - Tab Item 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - - Tab Item 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - + + + Tab Item 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + Tab Item 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + Tab Item 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + `} /> - + )} - {version === "new" && ( + {/*React Code*/} + {version === "old" && ( <> @@ -254,24 +289,22 @@ export default function TabsPage() { tags="react" allowCopy={true} code={` - - - Tab Item 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - - Tab Item 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - - Tab Item 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - + + + Tab Item 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + Tab Item 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + Tab Item 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + `} /> )} - {/**/} - {/*GoATabs Table Properties*/} - & { onChange?: (event: GoabInputOnChangeDetail) => void; }; -type CastingType = { - name: string; - value: string; - [key: string]: unknown; - onChange: (event: GoabInputOnChangeDetail) => void; -}; export default function TextFieldPage() { const { version } = useContext(LanguageVersionContext); @@ -628,9 +622,9 @@ export default function TextFieldPage() { MarginProperty, ]; - function onSandboxChange(bindings: ComponentBinding[], props: Record) { + function onSandboxChange(bindings: ComponentBinding[], props: ComponentPropsType) { setComponentBindings(bindings); - setComponentProps(props as CastingType); + setComponentProps(props); } // For sandbox demo function @@ -654,7 +648,7 @@ export default function TextFieldPage() {

Playground

- properties={componentBindings} formItemProperties={formItemBindings} onChange={onSandboxChange} diff --git a/src/routes/components/Tooltip.tsx b/src/routes/components/Tooltip.tsx index 1b1f35838..9ab4b49ba 100644 --- a/src/routes/components/Tooltip.tsx +++ b/src/routes/components/Tooltip.tsx @@ -37,10 +37,6 @@ const relatedComponents = [ { link: "/components/popover", name: "Popover" } ]; type ComponentPropsType = GoabTooltipProps; -type CastingType = { - content: string; - [key: string]: unknown; -}; export default function TooltipPage() { const { version } = useContext(LanguageVersionContext); @@ -161,9 +157,9 @@ export default function TooltipPage() { MarginProperty ]; - function onSandboxChange(bindings: ComponentBinding[], props: Record) { + function onSandboxChange(bindings: ComponentBinding[], props: ComponentPropsType) { setComponentBindings(bindings); - setComponentProps(props as CastingType); + setComponentProps(props); } return ( @@ -181,7 +177,7 @@ export default function TooltipPage() {

Playground

- + properties={componentBindings} onChange={onSandboxChange}>