@abgov/react-components 5.2.0 → 5.3.0

package/lib/accordion/accordion.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
 import { Margins } from "../../common/styling";
 export type GoAHeadingSize = "small" | "medium";
+export type GoAIconPosition = "left" | "right";
 interface WCProps extends Margins {
     open?: boolean;
     headingSize?: GoAHeadingSize;
@@ -9,6 +10,7 @@ interface WCProps extends Margins {
     headingContent?: ReactNode;
     maxwidth?: string;
     testid?: string;
+    iconposition?: GoAIconPosition;
 }
 declare global {
     namespace JSX {
@@ -25,7 +27,8 @@ export interface GoAAccordionProps extends Margins {
     headingContent?: ReactNode;
     maxWidth?: string;
     testid?: string;
+    iconPosition?: GoAIconPosition;
     children: ReactNode;
 }
-export declare function GoAAccordion({ open, heading, headingSize, secondaryText, headingContent, maxWidth, testid, children, mt, mr, mb, ml, }: GoAAccordionProps): JSX.Element;
+export declare function GoAAccordion({ open, heading, headingSize, secondaryText, headingContent, iconPosition, maxWidth, testid, children, mt, mr, mb, ml, }: GoAAccordionProps): JSX.Element;
 export default GoAAccordion;

package/lib/app-header/app-header.d.ts

@@ -3,6 +3,8 @@ interface WCProps {
     url?: string;
     maxcontentwidth?: string;
     fullmenubreakpoint?: number;
+    hasmenuclickhandler?: boolean;
+    ref: React.RefObject<HTMLElement>;
     testid?: string;
 }
 declare global {
@@ -18,7 +20,8 @@ export interface GoAAppHeaderProps {
     maxContentWidth?: string;
     fullMenuBreakpoint?: number;
     children?: React.ReactNode;
+    onMenuClick?: () => void;
     testId?: string;
 }
-export declare function GoAAppHeader({ heading, url, maxContentWidth, fullMenuBreakpoint, testId, children, }: GoAAppHeaderProps): JSX.Element;
+export declare function GoAAppHeader({ heading, url, maxContentWidth, fullMenuBreakpoint, testId, children, onMenuClick, }: GoAAppHeaderProps): JSX.Element;
 export default GoAAppHeader;

package/lib/callout/callout.d.ts

@@ -2,12 +2,14 @@ import { Margins } from "../../common/styling";
 export type GoACalloutType = "important" | "information" | "event" | "success" | "emergency";
 export type GoACalloutSize = "medium" | "large";
 export type GoACalloutAriaLive = "off" | "polite" | "assertive";
+export type GoACalloutIconTheme = "outline" | "filled";
 interface WCProps extends Margins {
     heading?: string;
     type?: GoACalloutType;
     size?: GoACalloutSize;
     maxwidth?: string;
     arialive?: GoACalloutAriaLive;
+    icontheme?: GoACalloutIconTheme;
     testid?: string;
 }
 declare global {
@@ -21,11 +23,12 @@ export interface GoACalloutProps extends Margins {
     heading?: string;
     type?: GoACalloutType;
     size?: GoACalloutSize;
+    iconTheme?: GoACalloutIconTheme;
     maxWidth?: string;
     testId?: string;
     ariaLive?: GoACalloutAriaLive;
     children?: React.ReactNode;
 }
 export type CalloutProps = GoACalloutProps;
-export declare const GoACallout: ({ heading, type, size, maxWidth, testId, ariaLive, children, mt, mr, mb, ml, }: GoACalloutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const GoACallout: ({ heading, type, iconTheme, size, maxWidth, testId, ariaLive, children, mt, mr, mb, ml, }: GoACalloutProps) => import("react/jsx-runtime").JSX.Element;
 export default GoACallout;

package/lib/card/card-actions.d.ts

@@ -0,0 +1,12 @@
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-card-actions": React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface GoACardActionsProps {
+    children?: React.ReactNode;
+}
+export declare function GoACardActions({ children }: GoACardActionsProps): JSX.Element;
+export default GoACardActions;

package/lib/card/card-content.d.ts

@@ -0,0 +1,12 @@
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-card-content": React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface GoACardContentProps {
+    children?: React.ReactNode;
+}
+export declare function GoACardContent({ children }: GoACardContentProps): JSX.Element;
+export default GoACardContent;

package/lib/card/card-group.d.ts

@@ -0,0 +1,12 @@
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-card-group": React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface GoACardGroupProps {
+    children?: React.ReactNode;
+}
+export declare function GoACardGroup({ children }: GoACardGroupProps): JSX.Element;
+export default GoACardGroup;

package/lib/card/card-image.d.ts

@@ -0,0 +1,17 @@
+interface WCProps {
+    src: string;
+    height: string;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-card-image": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface GoACardImageProps {
+    src: string;
+    height: string;
+}
+export declare function GoACardImage({ src, height }: GoACardImageProps): JSX.Element;
+export default GoACardImage;

package/lib/card/card.d.ts

@@ -0,0 +1,21 @@
+import { Margins } from "../../common/styling";
+interface WCProps extends Margins {
+    elevation?: number;
+    width?: string;
+    children: React.ReactNode;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-card": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface GoACardProps extends Margins {
+    elevation?: number;
+    width?: string;
+    testId?: string;
+    children?: React.ReactNode;
+}
+export declare function GoACard({ elevation, width, mt, mr, mb, ml, testId, children, }: GoACardProps): JSX.Element;
+export default GoACard;

package/lib/card/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./card-content";
+export * from "./card-image";
+export * from "./card-actions";
+export * from "./card-group";
+export * from "./card";

package/lib/drawer/drawer.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+type DrawerPosition = "bottom" | "left" | "right" | undefined;
+type DrawerSizeUnit = "px" | "rem" | "ch" | "vh" | "vw";
+type DrawerSize = `${number}${DrawerSizeUnit}` | undefined;
+interface WCProps {
+    open: boolean | undefined;
+    position: DrawerPosition;
+    heading?: string;
+    maxsize?: DrawerSize;
+    testid?: string;
+    ref: React.RefObject<HTMLElement>;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-drawer": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface GoADrawerProps {
+    open: boolean;
+    position: DrawerPosition;
+    heading?: string;
+    maxSize?: DrawerSize;
+    testId?: string;
+    children: ReactNode;
+    onClose: () => void;
+}
+export declare function GoADrawer({ open, position, heading, maxSize, testId, children, onClose, }: GoADrawerProps): JSX.Element;
+export default GoADrawer;

package/lib/side-menu-group/side-menu-group.d.ts

@@ -1,6 +1,9 @@
 import { ReactNode } from "react";
-interface WCProps {
+import { GoAIconType } from "../icon/icon";
+import { Margins } from "../../common/styling";
+interface WCProps extends Margins {
     heading: string;
+    icon?: GoAIconType;
     testid?: string;
 }
 declare global {
@@ -10,8 +13,9 @@ declare global {
         }
     }
 }
-export interface GoASideMenuGroupProps {
+export interface GoASideMenuGroupProps extends Margins {
     heading: string;
+    icon?: GoAIconType;
     testId?: string;
     children?: ReactNode;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"
@@ -29,6 +29,11 @@
       "import": "./index.mjs",
       "require": "./index.js",
       "types": "./index.d.ts"
+    },
+    "./experimental": {
+      "import": "./experimental.mjs",
+      "require": "./experimental.js",
+      "types": "./experimental/index.d.ts"
     }
   }
 }

package/style.css

@@ -0,0 +1,49 @@
+._panel_m3z4m_1 {
+  display: flex;
+  border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
+  border-radius: var(--goa-border-radius-m);
+  background: var(--goa-color-greyscale-white);
+}
+
+._panelBackground_m3z4m_8 {
+  background: #F8F8F8;
+}
+
+._children_m3z4m_12 {
+  flex: 1 1 auto;
+  padding: 2rem;
+}
+
+._handle_m3z4m_17 {
+  flex: 0 0 1rem;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 1rem;
+  background-color: var(--goa-color-greyscale-100);
+  border-left: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
+  cursor: col-resize;
+  overflow: hidden;
+  border-top-right-radius: calc(var(--goa-border-radius-m) - 1);
+  border-bottom-right-radius: calc(var(--goa-border-radius-m) - 1);
+  display: flex;
+  justify-content: center;
+}
+
+._handle_m3z4m_17:active {
+  cursor: col-resize;
+}
+
+._handle_m3z4m_17 goa-icon {
+  transform: rotate(90deg);
+  opacity: 0.8;
+}
+
+._width_m3z4m_42 {
+  float: right;
+  position: relative;
+  top: -2rem;
+  color: var(--goa-color-greyscale-400);
+  font-family: var(--goa-font-family-number);
+  font-size: var(--goa-font-size-2);
+}