);
-}
\ No newline at end of file
+}
diff --git a/src/components/old-component-banner/OldComponentBanner.tsx b/src/components/old-component-banner/OldComponentBanner.tsx
new file mode 100644
index 000000000..fa2ef0747
--- /dev/null
+++ b/src/components/old-component-banner/OldComponentBanner.tsx
@@ -0,0 +1,21 @@
+import { GoabCallout } from "@abgov/react-components";
+import { ANGULAR_VERSIONS, REACT_VERSIONS } from "@components/version-language-switcher/version-language-constants.ts";
+import { Link } from "react-router-dom";
+
+interface OldComponentBannerProps {
+ componentName: string;
+ language: string;
+}
+
+export const OldComponentBanner = ({ componentName, language }: OldComponentBannerProps) => {
+ return (
+
+ This component is only available in {language == "angular" ? ANGULAR_VERSIONS.NEW.label.substring(0,2).toUpperCase()
+ : REACT_VERSIONS.NEW.label.substring(0,2).toUpperCase()} of the design system components.
+
+ View upgrade guide{" "}
+
+ )
+}
diff --git a/src/components/sandbox/Sandbox.tsx b/src/components/sandbox/Sandbox.tsx
index 16bb71b4b..59e7902b6 100644
--- a/src/components/sandbox/Sandbox.tsx
+++ b/src/components/sandbox/Sandbox.tsx
@@ -29,6 +29,7 @@ interface SandboxProps {
flags?: Flag[];
skipRender?: boolean; // prevent rendering the snippet, to allow custom code to be shown
skipRenderOnly?: string; // prevent rendering the snippet for a specific language. Ex: react/angular
+ skipRenderDom?: boolean; // rendering code snippets, but display none for the DOM because it isn't working as expected if inside sandbox
allow?: string[]; // Be default the Sandbox is selective to what it renders out. This adds
// additional elements to what is allowed to be rendered out
variableNames?: string[]; // If we want to assign a variable such as step={step} render in code snippet, provides variableNames=["step"]
@@ -114,7 +115,7 @@ export const Sandbox = (props: SandboxProps) => {
return (
<>
-
+ {props.skipRenderDom ? null : }
{/* Only render the GoAAccordion if props.properties is provided */}
{props.properties && props.properties.length > 0 && (
diff --git a/src/examples/drawer/DrawerAddRecordExample.tsx b/src/examples/drawer/DrawerAddRecordExample.tsx
new file mode 100644
index 000000000..a58dc3656
--- /dev/null
+++ b/src/examples/drawer/DrawerAddRecordExample.tsx
@@ -0,0 +1,267 @@
+import {
+ GoabBlock,
+ GoabButton, GoabCheckbox, GoabContainer, GoabDatePicker,
+ GoabDrawer,
+ GoabDropdown,
+ GoabDropdownItem,
+ GoabFormItem, GoabInput, GoabRadioGroup, GoabRadioItem
+} from "@abgov/react-components";
+import { useState } from "react";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+
+export const DrawerAddRecordExample = () => {
+ const [open, setOpen] = useState(false);
+ const noop = () => {/* do something */}
+ return (
+ <>
+ {/*Don't use a Sandbox because the animation slowing displaying the drawer isn't working if it is inside sandbox*/}
+
+
+
+
+ );
+};
diff --git a/src/examples/drawer/DrawerFiltersExample.tsx b/src/examples/drawer/DrawerFiltersExample.tsx
new file mode 100644
index 000000000..194229457
--- /dev/null
+++ b/src/examples/drawer/DrawerFiltersExample.tsx
@@ -0,0 +1,231 @@
+import {
+ GoabButton,
+ GoabCheckbox,
+ GoabContainer,
+ GoabDrawer,
+ GoabDropdown,
+ GoabDropdownItem,
+ GoabFormItem,
+ GoabRadioGroup,
+ GoabRadioItem,
+} from "@abgov/react-components";
+import { useState } from "react";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+
+export const DrawerFiltersExample = () => {
+ const [open, setOpen] = useState(false);
+ // const noop = () => {/* do something */};
+ return (
+ <>
+ {/*Don't use a Sandbox because the animation slowing displaying the drawer isn't working if it is inside sandbox*/}
+
+
+ setOpen(true)}>Filters
+
+ setOpen(false)}
+ position="right"
+ actions={ setOpen(false)}>Apply}>
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ /* do something */
+ }}>
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ /* do something */
+ }}>
+
+
+
+
+
+ {
+ /** do something **/
+ }}>
+
+
+
+
+
+
+
+ {/*React*/}
+ {
+ setOpen(true);
+ }
+ const drawerOnClose = () => {
+ setOpen(false);
+ }
+ const radioGroupOnChange = (event: GoabRadioGroupOnChangeDetail) => {
+ console.log(event.value);
+ }
+ `}
+ />
+
+ Filters
+
+ setOpen(false)}>Apply}>
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* do something */}}>
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* do something */}}>
+
+
+
+
+
+
+
+
+
+
+
+ `}
+ />
+
+ {/*Angular*/}
+
+ Filters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Apply
+
+
+ `}
+ />
+
+ );
+};
diff --git a/src/examples/filter-chip/FilterChipTypedChipExample.tsx b/src/examples/filter-chip/FilterChipTypedChipExample.tsx
index 921ec650d..9c892bcf3 100644
--- a/src/examples/filter-chip/FilterChipTypedChipExample.tsx
+++ b/src/examples/filter-chip/FilterChipTypedChipExample.tsx
@@ -1,7 +1,8 @@
-import { GoabContainer, GoabFilterChip, GoabFormItem, GoabInput, GoabInputOnChangeDetail, GoabInputOnKeyPressDetail } from "@abgov/react-components";
+import { GoabContainer, GoabFilterChip, GoabFormItem, GoabInput } from "@abgov/react-components";
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
import { useContext, useState } from "react";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { GoabInputOnChangeDetail, GoabInputOnKeyPressDetail } from "@abgov/ui-components-common";
export const FilterChipTypedChipExample = () => {
const {version} = useContext(LanguageVersionContext);
diff --git a/src/examples/filter-chip/TableWithGlobalFiltersExample.tsx b/src/examples/filter-chip/TableWithGlobalFiltersExample.tsx
index ffcb253ad..918f38c31 100644
--- a/src/examples/filter-chip/TableWithGlobalFiltersExample.tsx
+++ b/src/examples/filter-chip/TableWithGlobalFiltersExample.tsx
@@ -14,7 +14,7 @@ import type {
GoabBadgeType,
GoabInputOnChangeDetail,
GoabInputOnKeyPressDetail,
-} from "@abgov/react-components";
+} from "@abgov/ui-components-common";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
diff --git a/src/routes/components/AllComponents.tsx b/src/routes/components/AllComponents.tsx
index 6e11dd69e..13a3a47c0 100644
--- a/src/routes/components/AllComponents.tsx
+++ b/src/routes/components/AllComponents.tsx
@@ -190,6 +190,15 @@ const AllComponents = () => {
"Lets users select a date through a calendar without the need to manually type it in a field.",
status: "Published",
},
+ {
+ name: "drawer",
+ groups: ["Structure and navigation"],
+ tags: ["sections", "structure and navigation", "tabbed interface"],
+ description:
+ "A panel that slides in from the side of the screen to display additional content or actions without navigating away from the current view.",
+ status: "Published",
+ isNew: true,
+ },
{
name: "dropdown",
groups: ["Inputs and actions"],
@@ -625,6 +634,7 @@ const AllComponents = () => {
status={card.status}
githubLink={`https://github.com/GovAlta/ui-components/issues?q=is%3Aissue+is%3Aopen+label%3A${encodeURIComponent(getLabelQuery(card.name))}`}
openIssues={issueCounts[card.name]}
+ isNew={card.isNew}
/>
))}
@@ -635,4 +645,4 @@ const AllComponents = () => {
);
};
-export default AllComponents;
\ No newline at end of file
+export default AllComponents;
diff --git a/src/routes/components/Components.tsx b/src/routes/components/Components.tsx
index e64985352..7056c2fc6 100644
--- a/src/routes/components/Components.tsx
+++ b/src/routes/components/Components.tsx
@@ -1,9 +1,16 @@
-import { GoabNotification, GoabSideMenu, GoabSideMenuGroup, GoabSpacer } from "@abgov/react-components";
+import {
+ GoabBadge,
+ GoabBlock,
+ GoabNotification,
+ GoabSideMenu,
+ GoabSideMenuGroup,
+ GoabSpacer
+} from "@abgov/react-components";
import { Link, Outlet } from "react-router-dom";
import { SupportInfo } from "@components/support-info/SupportInfo.tsx";
import { useContext } from "react";
import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
-import { getVersionedUrlPath } from "@components/version-language-switcher/version-language-constants.ts";
+import { getVersionedUrlPath, ANGULAR_VERSIONS, REACT_VERSIONS } from "@components/version-language-switcher/version-language-constants.ts";
import { MAX_CONTENT_WIDTH } from "../../global-constants.ts";
export function Components() {
@@ -16,6 +23,20 @@ export function Components() {
};
+ const newComponentLabel = (componentName: string) => {
+ const getBadgeLabel = () => {
+ if (version === "new") return "New";
+ return language === "angular"
+ ? ANGULAR_VERSIONS.NEW.label.substring(0, 2).toUpperCase()
+ : REACT_VERSIONS.NEW.label.substring(0, 2).toUpperCase();
+ };
+ return (
+
+ {componentName}
+
+ );
+ };
+
return (
<>
{version === "old" && (
@@ -68,6 +89,7 @@ export function Components() {
Text area
+ {newComponentLabel("Drawer")}
Footer
Form stepper
Header
@@ -97,5 +119,3 @@ export function Components() {
}
export default Components;
-
-
diff --git a/src/routes/components/Drawer.tsx b/src/routes/components/Drawer.tsx
new file mode 100644
index 000000000..bdbadfadb
--- /dev/null
+++ b/src/routes/components/Drawer.tsx
@@ -0,0 +1,228 @@
+import {
+ GoabBadge,
+ GoabButton,
+ GoabContainer,
+ GoabDrawer,
+ GoabDrawerProps,
+ GoabTab,
+ GoabTabs,
+} from "@abgov/react-components";
+import { Sandbox, ComponentBinding } from "@components/sandbox";
+import { Category, ComponentHeader } from "@components/component-header/ComponentHeader";
+import {
+ ComponentProperties,
+ ComponentProperty,
+} from "@components/component-properties/ComponentProperties";
+import { ComponentContent } from "@components/component-content/ComponentContent";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { useContext, useState } from "react";
+import { TestIdProperty } from "@components/component-properties/common-properties.ts";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { DrawerExamples } from "@examples/drawer/DrawerExamples.tsx";
+import { OldComponentBanner } from "@components/old-component-banner/OldComponentBanner.tsx";
+import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx";
+import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx";
+
+// == Page props ==
+
+const FIGMA_LINK = "https://www.figma.com/design/XwdpAM2ejssrXlzSuPiycT/Component---Drawer?node-id=2332-98665&m=dev";
+const ACCESSIBILITY_FIGMA_LINK = "https://www.figma.com/design/XwdpAM2ejssrXlzSuPiycT/Component---Drawer?node-id=2488-93239&m=dev";
+const componentName = "Drawer";
+const description =
+ "A panel that slides in from the side of the screen to display additional content or actions without navigating away from the current view.";
+const category = Category.STRUCTURE_AND_NAVIGATION;
+const relatedComponents = [
+ { link: "/components/modal", name: "Modal" }
+];
+
+type ComponentPropsType = Omit;
+
+export const DrawerPage = () => {
+ const {version, language} = useContext(LanguageVersionContext);
+ const [open, setOpen] = useState(false);
+
+ const [drawerProps, setDrawerProps] = useState({
+ heading: "Drawer heading",
+ position: "right",
+ onClose: () => {},
+ children: null
+ });
+
+ const [drawerBindings, setDrawerBindings] = useState([
+ {
+ label: "Position",
+ type: "dropdown",
+ name: "position",
+ options: ["left", "right", "bottom"],
+ value: "right"
+ },
+ {
+ label: "Heading",
+ type: "string",
+ name: "heading",
+ value: "Drawer heading",
+ },
+ {
+ label: "Max Size",
+ helpText: "Sets max height on bottom position, sets width on left and right position",
+ type: "string",
+ name: "maxSize",
+ value: "",
+ },
+ ]);
+
+ const componentProperties: ComponentProperty[] = [
+ {
+ name: "open",
+ type: "boolean",
+ description: "Whether the drawer is open.",
+ required: true,
+ },
+ {
+ name: "position",
+ type: "GoabDrawerPosition (right|left|bottom)",
+ description: "The position of the drawer.",
+ required: true,
+ },
+ {
+ name: "heading",
+ type: "string | ReactNode",
+ description: "Heading of the drawer.",
+ lang: "react",
+ },
+ {
+ name: "heading",
+ type: "string | TemplateRef",
+ description: "Heading of the drawer.",
+ lang: "angular",
+ },
+ {
+ name: "maxSize",
+ type: "GoabDrawerSize (px|rem|ch|vh|vw) (ex: 300px)",
+ description: "Sets max height on bottom position, sets width on left and right position",
+ },
+ {
+ name: "actions",
+ type: "ReactNode",
+ description: "Actions to display in the drawer.",
+ lang: "react",
+ },
+ {
+ name: "actions",
+ type: "TemplateRef",
+ description: "Actions to display in the drawer.",
+ lang: "angular",
+ },
+ {
+ name: "onClose",
+ type: "() => void",
+ description: "Callback function to handle the close event.",
+ },
+ TestIdProperty
+ ];
+
+ function SandboxOnChange(bindings: ComponentBinding[], props: Record) {
+ setDrawerBindings(bindings);
+ setDrawerProps({
+ ...drawerProps,
+ ...props
+ } as ComponentPropsType);
+ }
+
+ return (
+ <>
+
+
+ {version === "old" && }
+
+ {version === "new" && (
+
+
+
+
+ Component
+
+ {/*Don't use a Sandbox because the animation slowing displaying the drawer isn't working if it is inside sandbox*/}
+
+
+ setOpen(true)}>Open Drawer
+
+ setOpen(false)}>
+
+ This is a drawer. It is a panel that slides in from the edge of the screen to
+ provide users access to secondary content and actions without leaving the
+ current page.
+
+ This is a drawer. It is a panel that slides in from the edge of the screen to
+ provide users access to secondary content and actions without leaving the
+ current page.
+
+
+
+
+
+
+
+
+ Examples
+ }>
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ );
+}
diff --git a/src/routes/components/Radio.tsx b/src/routes/components/Radio.tsx
index fc39028b7..d33ea022e 100644
--- a/src/routes/components/Radio.tsx
+++ b/src/routes/components/Radio.tsx
@@ -50,6 +50,7 @@ export default function RadioPage() {
const [radioProps, setRadioProps] = useState({
name: "item",
value: "",
+ onChange: () => {},
});
const [radioBindings, setRadioBindings] = useState([
{
diff --git a/src/routes/get-started/designers/UxDesigner.tsx b/src/routes/get-started/designers/UxDesigner.tsx
index 6a0ac91d9..40171d507 100644
--- a/src/routes/get-started/designers/UxDesigner.tsx
+++ b/src/routes/get-started/designers/UxDesigner.tsx
@@ -1,5 +1,6 @@
import { Link } from "react-router-dom";
import { ComponentContent } from "@components/component-content/ComponentContent";
+import { GoabCallout } from "@abgov/react-components";
export default function UxDesignerPage() {
return (
@@ -35,7 +36,7 @@ export default function UxDesignerPage() {
The design system tokens, styles, components and page templates are all available to pull
into your file in Figma.
- When selecting components, prioritize those with a “goa-” prefix in the name such as “goa-input.” These components are available in both design and development, which means that developers can avoid unnecessary custom development.
+ When selecting components, prioritize those with a “goa-” prefix in the name such as “goa-input.” These components are available in both design and development, which means that developers can avoid unnecessary custom development.