@abgov/react-components 5.0.0 → 5.3.0

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

@@ -1,8 +1,11 @@
 import { ReactNode } from "react";
+interface WCProps {
+    testid?: string;
+}
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            "goa-side-menu": React.HTMLAttributes<HTMLElement>;
+            "goa-side-menu": WCProps & React.HTMLAttributes<HTMLElement>;
         }
     }
 }

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

@@ -1,6 +1,10 @@
 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 {
     namespace JSX {
@@ -9,8 +13,9 @@ declare global {
         }
     }
 }
-export interface GoASideMenuGroupProps {
+export interface GoASideMenuGroupProps extends Margins {
     heading: string;
+    icon?: GoAIconType;
     testId?: string;
     children?: ReactNode;
 }

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

@@ -2,6 +2,7 @@ import { ReactNode } from "react";
 import { GoAIconType } from "../icon/icon";
 interface WCProps {
     icon?: GoAIconType;
+    testid?: string;
 }
 declare global {
     namespace JSX {

package/lib/skeleton/skeleton.d.ts

@@ -7,6 +7,7 @@ interface WCProps extends Margins {
     size?: GoASkeletonSize;
     linecount?: number;
     type: GoASkeletonType;
+    testid?: string;
 }
 declare global {
     namespace JSX {

package/lib/spacer/spacer.d.ts

@@ -2,6 +2,7 @@ import { Spacing } from "../../common/styling";
 interface WCProps {
     hspacing?: Spacing | "fill";
     vspacing?: Spacing;
+    testid?: string;
 }
 declare global {
     namespace JSX {

package/lib/spinner/spinner.d.ts

@@ -5,6 +5,7 @@ interface WCProps {
     type: SpinnerType;
     invert?: boolean;
     progress?: number;
+    testid?: string;
 }
 declare global {
     namespace JSX {

package/lib/table/table.d.ts

@@ -7,6 +7,7 @@ interface WCProps extends Margins {
     width?: string;
     stickyheader?: boolean;
     variant?: GoATableVariant;
+    testid?: string;
 }
 declare global {
     namespace JSX {

package/lib/tabs/tabs.d.ts

@@ -3,6 +3,7 @@ interface WCProps {
     initialtab?: number;
     ref: React.RefObject<HTMLElement>;
     onChange?: (tab: number) => void;
+    testid?: string;
 }
 declare global {
     namespace JSX {

package/lib/text/text.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+import { Margins } from "../../common/styling";
+type MaxWidth = string | "none";
+interface WCProps extends Margins {
+    as?: TextElement | HeadingElement;
+    size?: Size;
+    maxwidth?: MaxWidth;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-text": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export type HeadingElement = "h1" | "h2" | "h3" | "h4" | "h5";
+export type TextElement = "span" | "div" | "p";
+type HeadingSize = "heading-xl" | "heading-l" | "heading-m" | "heading-s" | "heading-xs";
+type BodySize = "body-l" | "body-m" | "body-s" | "body-xs";
+export type Size = HeadingSize | BodySize;
+interface GoATextProps extends Margins {
+    as?: TextElement | HeadingElement;
+    size?: Size;
+    maxWidth?: MaxWidth;
+    children: ReactNode;
+}
+export declare function GoAText(props: GoATextProps): JSX.Element;
+export default GoAText;

package/lib/textarea/textarea.d.ts

@@ -13,6 +13,7 @@ interface WCProps extends Margins {
     arialabel?: string;
     countby?: CountBy;
     maxcount?: number;
+    testid?: string;
 }
 declare global {
     namespace JSX {
@@ -35,7 +36,7 @@ export interface GoATextAreaProps extends Margins {
     ariaLabel?: string;
     countBy?: CountBy;
     maxCount?: number;
-    onChange: (name: string, value: string) => void;
+    onChange?: (name: string, value: string) => void;
     onKeyPress?: (name: string, value: string, key: string) => void;
 }
 export declare function GoATextarea({ name, value, placeholder, rows, disabled, countBy, maxCount, width, maxWidth, testId, error, ariaLabel, mt, mr, mb, ml, onChange, onKeyPress, }: GoATextAreaProps): JSX.Element;

package/lib/tooltip/tooltip.d.ts

@@ -6,6 +6,7 @@ interface WCProps extends Margins {
     position?: GoATooltipPosition;
     content?: string;
     halign?: GoATooltipHorizontalAlignment;
+    testid?: string;
 }
 declare global {
     namespace JSX {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "5.0.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);
+}