@abgov/react-components 4.0.0-alpha.3 → 4.0.0-alpha.6

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

@@ -5,6 +5,7 @@ interface WCProps {
     title?: string;
     copyrighturl?: string;
     copyrighttext?: string;
+    multicolumnsectionnames?: string;
 }
 declare global {
     namespace JSX {
@@ -19,6 +20,7 @@ export interface Props {
     title?: string;
     copyrightUrl?: string;
     copyrightText?: string;
+    multiColumnSectionNames?: string;
 }
 export declare const GoAAppFooter: FC<Props>;
 export default GoAAppFooter;

package/lib/button/button.d.ts

@@ -1,6 +1,7 @@
 import React, { FC, ReactNode } from 'react';
 import './button.css';
-export declare type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'get-started';
+import { GoAIconType } from '../icons';
+export declare type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'start';
 export declare type ButtonSize = 'compact' | 'normal';
 export declare type ButtonVariant = 'default' | 'danger';
 interface WCProps {
@@ -9,6 +10,8 @@ interface WCProps {
     variant?: ButtonVariant;
     disabled?: boolean;
     title?: string;
+    leadingicon?: string;
+    trailingicon?: string;
     ref: React.RefObject<HTMLElement>;
 }
 declare global {
@@ -24,6 +27,8 @@ declare type ButtonProps = {
     size?: ButtonSize;
     variant?: ButtonVariant;
     disabled?: boolean;
+    leadingIcon?: GoAIconType;
+    trailingIcon?: GoAIconType;
     onClick: (e: any) => void;
     children: ReactNode;
 };

package/lib/chip/chip.d.ts

@@ -14,10 +14,11 @@ declare global {
     }
 }
 export interface Props {
-    onDeleteIconClick?: () => void;
+    onClick?: () => void;
+    deletable?: boolean;
     leadingIcon?: string;
     error?: boolean;
     content: string;
 }
-export declare const GoAChip: ({ leadingIcon, error, content, onDeleteIconClick }: Props) => JSX.Element;
+export declare const GoAChip: ({ leadingIcon, deletable, error, content, onClick }: Props) => JSX.Element;
 export default GoAChip;

package/lib/input/input.d.ts

@@ -14,6 +14,8 @@ interface WCProps {
     error?: boolean;
     readonly?: boolean;
     focused?: boolean;
+    showcounter?: boolean;
+    maxcharcount?: number;
     handletrailingiconclick: boolean;
     width?: string;
     testid?: string;
@@ -40,6 +42,8 @@ export interface Props {
     readonly?: boolean;
     error?: boolean;
     width?: string;
+    showCounter?: boolean;
+    maxCharCount?: number;
     testId?: string;
 }
 export declare const GoAInput: FC<Props & {

package/lib/modal/modal.d.ts

@@ -6,6 +6,7 @@ interface WCProps {
     width?: string;
     closable?: boolean;
     scrollable?: boolean;
+    transition?: "fast" | "slow" | "none";
 }
 declare global {
     namespace JSX {
@@ -19,6 +20,7 @@ interface Props {
     width?: string;
     actions?: React.ReactElement;
     onClose?: () => void;
+    transition?: "fast" | "slow" | "none";
     open?: boolean;
 }
 export declare const GoAModal: FC<Props>;

package/lib/textarea/textarea.d.ts

@@ -5,8 +5,10 @@ interface WCProps {
     value: string;
     placeholder?: string;
     rows?: number;
-    error: boolean;
-    disabled: boolean;
+    error?: boolean;
+    disabled?: boolean;
+    showcounter?: boolean;
+    maxcharcount?: number;
 }
 declare global {
     namespace JSX {
@@ -21,9 +23,11 @@ interface Props {
     id?: string;
     placeholder?: string;
     rows?: number;
-    error: boolean;
-    disabled: boolean;
-    testId: string;
+    error?: boolean;
+    disabled?: boolean;
+    showCounter?: boolean;
+    maxCharCount?: number;
+    testId?: string;
     onChange: (name: string, value: string) => void;
 }
 export declare const GoATextArea: FC<Props>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "4.0.0-alpha.3",
+  "version": "4.0.0-alpha.6",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/react-components.esm.js

@@ -21,6 +21,7 @@ const GoAAppFooter = ({
   title,
   copyrightUrl,
   copyrightText,
+  multiColumnSectionNames,
   children
 }) => {
   return jsx("goa-app-footer", Object.assign({
@@ -28,7 +29,8 @@ const GoAAppFooter = ({
     appurl: appUrl,
     title: title,
     copyrighturl: copyrightUrl,
-    copyrighttext: copyrightText
+    copyrighttext: copyrightText,
+    multicolumnsectionnames: multiColumnSectionNames
   }, {
     children: children
   }), void 0);
@@ -160,6 +162,8 @@ const GoAButton = ({
   type: _type = 'primary',
   size: _size = 'normal',
   variant: _variant = 'default',
+  leadingIcon,
+  trailingIcon,
   children,
   onClick
 }) => {
@@ -187,13 +191,15 @@ const GoAButton = ({
     size: _size,
     variant: _variant,
     disabled: _disabled,
-    title: title
+    title: title,
+    leadingicon: leadingIcon,
+    trailingicon: trailingIcon
   }, {
     children: children
   }), void 0);
 };
 
-var css_248z = "goa-button-group > goa-button ~ goa-button {\n  margin: 0;\n  margin-top: 0.25rem;\n}\n\n@media (min-width: 320px) {\n  goa-button-group > goa-button ~ goa-button {\n    margin: 0;\n    /* margin-left: 0.25rem; */\n  }\n}\n";
+var css_248z = "goa-button-group > goa-button ~ goa-button {\n  margin: 0;\n  margin-top: 0.25rem;\n}\n\n@media (min-width: 480px) {\n  goa-button-group > goa-button ~ goa-button {\n    margin: 0;\n  }\n}\n";
 styleInject(css_248z);
 
 const GoAButtonGroup = ({
@@ -266,30 +272,31 @@ const GoACheckbox = ({
 
 const GoAChip = ({
   leadingIcon: _leadingIcon = "",
+  deletable: _deletable = false,
   error: _error = false,
   content,
-  onDeleteIconClick
+  onClick
 }) => {
   const el = useRef(null);
   useEffect(() => {
     if (!el.current) return;
-    if (!onDeleteIconClick) return;
+    if (!onClick) return;
     const current = el.current;
 
     const listener = e => {
-      onDeleteIconClick();
+      onClick();
     };
 
-    current.addEventListener('_onDeleteIconClick', listener);
+    current.addEventListener('_click', listener);
     return () => {
-      current.removeEventListener('_onDeleteIconClick', listener);
+      current.removeEventListener('_click', listener);
     };
-  }, [el, onDeleteIconClick]);
+  }, [el, onClick]);
   return jsx("goa-chip", {
     ref: el,
     leadingicon: _leadingIcon,
     error: _error,
-    deletable: !!onDeleteIconClick,
+    deletable: _deletable,
     content: content
   }, void 0);
 };
@@ -527,6 +534,8 @@ const GoAInput = ({
   placeholder,
   error,
   width,
+  showCounter,
+  maxCharCount,
   testId,
   onTrailingIconClick,
   onChange
@@ -574,6 +583,8 @@ const GoAInput = ({
     "data-testid": testId,
     value: value,
     width: width,
+    showcounter: showCounter,
+    maxcharcount: maxCharCount,
     handletrailingiconclick: !!onTrailingIconClick
   }, void 0);
 };
@@ -670,6 +681,7 @@ const GoAModal = ({
   open,
   width,
   actions,
+  transition,
   onClose
 }) => {
   const el = useRef(null);
@@ -695,7 +707,8 @@ const GoAModal = ({
     open: open,
     closable: !!onClose,
     scrollable: true,
-    width: width
+    width: width,
+    transition: transition
   }, {
     children: [actions && jsx("div", Object.assign({
       slot: "actions"
@@ -823,6 +836,8 @@ const GoATextArea = ({
   placeholder,
   rows,
   disabled,
+  showCounter,
+  maxCharCount,
   testId,
   error,
   onChange
@@ -855,6 +870,8 @@ const GoATextArea = ({
     value: value,
     rows: rows,
     disabled: disabled,
+    showcounter: showCounter,
+    maxcharcount: maxCharCount,
     error: error,
     "data-testid": testId
   }, void 0);

package/react-components.umd.js

@@ -60,13 +60,15 @@
           title = _a.title,
           copyrightUrl = _a.copyrightUrl,
           copyrightText = _a.copyrightText,
+          multiColumnSectionNames = _a.multiColumnSectionNames,
           children = _a.children;
       return jsxRuntime.jsx("goa-app-footer", __assign({
         id: id,
         appurl: appUrl,
         title: title,
         copyrighturl: copyrightUrl,
-        copyrighttext: copyrightText
+        copyrighttext: copyrightText,
+        multicolumnsectionnames: multiColumnSectionNames
       }, {
         children: children
       }), void 0);
@@ -195,6 +197,8 @@
           size = _d === void 0 ? 'normal' : _d,
           _e = _a.variant,
           variant = _e === void 0 ? 'default' : _e,
+          leadingIcon = _a.leadingIcon,
+          trailingIcon = _a.trailingIcon,
           children = _a.children,
           onClick = _a.onClick;
       var el = react.useRef(null);
@@ -221,13 +225,15 @@
         size: size,
         variant: variant,
         disabled: disabled,
-        title: title
+        title: title,
+        leadingicon: leadingIcon,
+        trailingicon: trailingIcon
       }, {
         children: children
       }), void 0);
     };
 
-    var css_248z = "goa-button-group > goa-button ~ goa-button {\n  margin: 0;\n  margin-top: 0.25rem;\n}\n\n@media (min-width: 320px) {\n  goa-button-group > goa-button ~ goa-button {\n    margin: 0;\n    /* margin-left: 0.25rem; */\n  }\n}\n";
+    var css_248z = "goa-button-group > goa-button ~ goa-button {\n  margin: 0;\n  margin-top: 0.25rem;\n}\n\n@media (min-width: 480px) {\n  goa-button-group > goa-button ~ goa-button {\n    margin: 0;\n  }\n}\n";
     styleInject(css_248z);
 
     var GoAButtonGroup = function GoAButtonGroup(_a) {
@@ -299,30 +305,32 @@
     var GoAChip = function GoAChip(_a) {
       var _b = _a.leadingIcon,
           leadingIcon = _b === void 0 ? "" : _b,
-          _c = _a.error,
-          error = _c === void 0 ? false : _c,
+          _c = _a.deletable,
+          deletable = _c === void 0 ? false : _c,
+          _d = _a.error,
+          error = _d === void 0 ? false : _d,
           content = _a.content,
-          onDeleteIconClick = _a.onDeleteIconClick;
+          onClick = _a.onClick;
       var el = react.useRef(null);
       react.useEffect(function () {
         if (!el.current) return;
-        if (!onDeleteIconClick) return;
+        if (!onClick) return;
         var current = el.current;
 
         var listener = function listener(e) {
-          onDeleteIconClick();
+          onClick();
         };
 
-        current.addEventListener('_onDeleteIconClick', listener);
+        current.addEventListener('_click', listener);
         return function () {
-          current.removeEventListener('_onDeleteIconClick', listener);
+          current.removeEventListener('_click', listener);
         };
-      }, [el, onDeleteIconClick]);
+      }, [el, onClick]);
       return jsxRuntime.jsx("goa-chip", {
         ref: el,
         leadingicon: leadingIcon,
         error: error,
-        deletable: !!onDeleteIconClick,
+        deletable: deletable,
         content: content
       }, void 0);
     };
@@ -530,6 +538,8 @@
           placeholder = _a.placeholder,
           error = _a.error,
           width = _a.width,
+          showCounter = _a.showCounter,
+          maxCharCount = _a.maxCharCount,
           testId = _a.testId,
           onTrailingIconClick = _a.onTrailingIconClick,
           onChange = _a.onChange;
@@ -575,6 +585,8 @@
         "data-testid": testId,
         value: value,
         width: width,
+        showcounter: showCounter,
+        maxcharcount: maxCharCount,
         handletrailingiconclick: !!onTrailingIconClick
       }, void 0);
     };
@@ -673,6 +685,7 @@
           open = _a.open,
           width = _a.width,
           actions = _a.actions,
+          transition = _a.transition,
           onClose = _a.onClose;
       var el = react.useRef(null);
       react.useEffect(function () {
@@ -697,7 +710,8 @@
         open: open,
         closable: !!onClose,
         scrollable: true,
-        width: width
+        width: width,
+        transition: transition
       }, {
         children: [actions && jsxRuntime.jsx("div", __assign({
           slot: "actions"
@@ -824,6 +838,8 @@
           placeholder = _a.placeholder,
           rows = _a.rows,
           disabled = _a.disabled,
+          showCounter = _a.showCounter,
+          maxCharCount = _a.maxCharCount,
           testId = _a.testId,
           error = _a.error,
           onChange = _a.onChange;
@@ -854,6 +870,8 @@
         value: value,
         rows: rows,
         disabled: disabled,
+        showcounter: showCounter,
+        maxcharcount: maxCharCount,
         error: error,
         "data-testid": testId
       }, void 0);