diff --git a/src/examples/popover/PopoverExamples.tsx b/src/examples/popover/PopoverExamples.tsx index 5df0de433..fd4f6eb8d 100644 --- a/src/examples/popover/PopoverExamples.tsx +++ b/src/examples/popover/PopoverExamples.tsx @@ -1,6 +1,8 @@ +import { GoabSpacer } from "@abgov/react-components"; import { ButtonClosePopover } from "@examples/popover/ButtonClosePopover"; import { LinkClosePopover } from "@examples/popover/LinkClosePopover"; import { IconButtonClosePopover } from "@examples/popover/IconButtonClosePopover"; +import { TablePopover } from "@examples/popover/TablePopover"; import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; import { OldComponentBanner } from "@components/old-component-banner/OldComponentBanner.tsx"; import { useContext } from "react"; @@ -10,9 +12,7 @@ export const PopoverExamples = () => { const { version, language } = useContext(LanguageVersionContext); return ( <> - {version === "old" && ( - - )} + {/*Popover Example - close using a button*/} @@ -27,6 +27,16 @@ export const PopoverExamples = () => { figmaExample=""> + {/*Popover example - Table*/} + + + + + {version === "old" && ( + + )} ); }; diff --git a/src/examples/popover/TablePopover.tsx b/src/examples/popover/TablePopover.tsx new file mode 100644 index 000000000..b6d2ebcba --- /dev/null +++ b/src/examples/popover/TablePopover.tsx @@ -0,0 +1,382 @@ +import { useContext, useState } from "react"; +import { Sandbox } from "@components/sandbox"; +import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; +import { + GoabBadge, + GoabFilterChip, + GoabFormItem, + GoabRadioGroup, + GoabRadioItem, + GoabButton, + GoabPopover, + GoabTable, + GoabText +} from "@abgov/react-components"; +import "./popover-page-examples.css"; +import { GoabBadgeType } from "@abgov/ui-components-common"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; +import { GoabRadioGroupOnChangeDetail } from "@abgov/ui-components-common"; + +export const TablePopover = () => { + const { version } = useContext(LanguageVersionContext); + const [selectedFilter, setSelectedFilter] = useState(null); + + const popoverValues = [ + { key: 1, type: "success", status: "Open" }, + { key: 2, type: "midtone", status: "Closed" }, + { key: 3, type: "midtone", status: "Closed" }, + { key: 4, type: "midtone", status: "Closed" }, + { key: 5, type: "success", status: "Open" }, + { key: 6, type: "midtone", status: "Closed" }, + ]; + + const target = ( + + Filter + + ); + + function radioGroupOnChange(event: GoabRadioGroupOnChangeDetail) { + setSelectedFilter(event.value); + } + + const filteredData = selectedFilter ? popoverValues.filter((item) => + item.status === selectedFilter + ) : popoverValues; + + return ( + <> + + {/*============= React code ==============*/} + + {version === "new" && ( + (null); + + const popoverValues = [ + { + key: 1, + type: "success", + status: "Open" + }, + { + key: 2, + type: "midtone", + status: "Closed" + }, + { + key: 3, + type: "midtone", + status: "Closed" + }, + { + key: 4, + type: "midtone", + status: "Closed" + }, + { + key: 5, + type: "success", + status: "Open" + }, + { + key: 6, + type: "midtone", + status: "Closed" + }, + ]; + + const target = ( + + Filter + + ); + + function radioGroupOnChange(event: GoabRadioGroupOnChangeDetail) { + setSelectedFilter(event.value); + } + + const filteredData = selectedFilter ? popoverValues.filter((item) => + item.status === selectedFilter + ) : popoverValues; + `} + /> + )} + + {version === "new" && ( + +

Table with a filter

+ +
+ + + + + + +
+ + + {selectedFilter && ( +
+ + Filter: + + setSelectedFilter(null)} + /> + setSelectedFilter(null)} + > + Clear all + +
+ )} + + + + + Status + Text + Number + Action + + + + {filteredData.map((u) => ( + + + + + Lorem ipsum + 1234567890 + + Action + + + ))} + + + `} + /> + )} + + {/*================ Angular code ==================*/} + + {version === "new" && ( + (null); + + popoverValues: PopoverValue[] = [ + { + key: 1, + type: 'success', + status: 'Open' + }, + { + key: 2, + type: 'midtone', + status: 'Closed' + }, + { + key: 3, + type: 'midtone', + status: 'Closed' + }, + { + key: 4, + type: 'midtone', + status: 'Closed' + }, + { + key: 5, + type: 'success', + status: 'Open' + }, + { + key: 6, + type: 'midtone', + status: 'Closed' + }, + ]; + + get filteredData(): PopoverValue[] { + const filter = this.selectedFilter.value; + return filter + ? this.popoverValues.filter(item => item.status === filter) + : this.popoverValues; + } + + clearFilter() { + this.selectedFilter.setValue(null); + } + } + `} + /> + )} + + {version === "new" && ( + +

Table with a filter

+ +
+ + + + + + +
+ + + Filter + + + + + +
+ + Filter: + + + + Clear all + +
+ + + + + Status + Text + Number + Action + + + + + Lorem ipsum + 1234567890 + Action + + + + `} + /> + )} + +
+

Table with a filter

+ +
+ + + + + + +
+ +
+ {selectedFilter && ( +
+ + Filter: + + setSelectedFilter(null)} + /> + setSelectedFilter(null)} + aria-label="Clear all filters" + > + Clear all + +
+ )} + + + + + Status + Text + Number + Action + + + + {filteredData.map((u) => ( + + + + + Lorem ipsum + 1234567890 + + Action + + + ))} + + + + + ); +}; diff --git a/src/examples/popover/popover-page-examples.css b/src/examples/popover/popover-page-examples.css new file mode 100644 index 000000000..7d441361f --- /dev/null +++ b/src/examples/popover/popover-page-examples.css @@ -0,0 +1,5 @@ +.goa-table-heading-container { + display: flex; + justify-content: space-between; + align-items: center; +} \ No newline at end of file diff --git a/src/routes/components/Popover.tsx b/src/routes/components/Popover.tsx index 33c5f6b9f..dd4364312 100644 --- a/src/routes/components/Popover.tsx +++ b/src/routes/components/Popover.tsx @@ -1,11 +1,12 @@ import { useContext, useState } from "react"; import { ComponentBinding, Sandbox } from "@components/sandbox"; +import { Link } from "react-router-dom"; import { ComponentProperties, ComponentProperty, } from "@components/component-properties/ComponentProperties.tsx"; import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; -import { GoabBadge, GoabButton, GoabPopover, GoabTab, GoabTabs } from "@abgov/react-components"; +import { GoabBadge, GoabButton, GoabCallout, GoabPopover, GoabSpacer, GoabTab, GoabTabs } from "@abgov/react-components"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { propsToString } from "@components/sandbox/BaseSerializer.ts"; import { ComponentContent } from "@components/component-content/ComponentContent"; @@ -298,6 +299,8 @@ export default function PopoverPage() { It can be used for a number of different contexts. + + Popovers are used as a base layer in other components like tooltips and dropdown menus. Examples - + }>