@abgov/react-components 4.0.0-alpha.2 → 4.0.0-alpha.5

package/index.d.ts

@@ -3,6 +3,9 @@
  */
 import '@abgov/web-components';
 import { GoAAppHeader } from './lib/app-header/app-header';
+import { GoAAppFooter } from './lib/app-footer/app-footer';
+import { GoAMetaLink } from './lib/app-footer/meta-link';
+import { GoANavigationLink } from './lib/app-footer/navigation-link';
 import { GoABadge, GoAInfoBadge, GoAEmergencyBadge, GoASuccessBadge, GoAWarningBadge } from './lib/badge/badge';
 import { GoAButton } from './lib/button/button';
 import { GoAButtonGroup } from './lib/button-group/button-group';
@@ -30,4 +33,4 @@ import type { GoAIconType } from './lib/icons';
 import type { GoABadgeType } from './lib/badge/badge';
 export type { GoAIconType };
 export type { GoABadgeType };
-export { GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea, GoAWarningBadge, };
+export { GoAAppHeader, GoAAppFooter, GoAMetaLink, GoANavigationLink, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea, GoAWarningBadge, };

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

@@ -0,0 +1,24 @@
+import React, { FC } from 'react';
+interface WCProps {
+    id?: string;
+    appurl?: string;
+    title?: string;
+    copyrighturl?: string;
+    copyrighttext?: string;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-app-footer': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface Props {
+    id?: string;
+    appUrl?: string;
+    title?: string;
+    copyrightUrl?: string;
+    copyrightText?: string;
+}
+export declare const GoAAppFooter: FC<Props>;
+export default GoAAppFooter;

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

@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+interface WCProps {
+    footerid?: string;
+    url: string;
+    title: string;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-meta-link': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface Props {
+    footerId?: string;
+    url: string;
+    title: string;
+}
+export declare const GoAMetaLink: FC<Props>;
+export default GoAMetaLink;

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

@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+interface WCProps {
+    footerid?: string;
+    url: string;
+    title: string;
+    section?: string;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-navigation-link': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface Props {
+    footerId?: string;
+    url: string;
+    title: string;
+    section?: string;
+}
+export declare const GoANavigationLink: FC<Props>;
+export default GoANavigationLink;

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/flex/row.d.ts

@@ -1,7 +1,16 @@
-import { FC } from "react";
-interface Props {
-    gap?: 'small' | 'medium' | 'large';
-    minWidth?: number | string;
+import React, { FC } from "react";
+interface WCProps {
+    gap: 'small' | 'medium' | 'large';
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-flex-row': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface Props {
+    gap: 'small' | 'medium' | 'large';
 }
 export declare const GoAFlexRow: FC<Props>;
 export default GoAFlexRow;

package/lib/input/input.d.ts

@@ -11,10 +11,13 @@ interface WCProps {
     trailingicon?: string;
     variant: string;
     disabled?: boolean;
-    error?: string;
+    error?: boolean;
     readonly?: boolean;
     focused?: boolean;
+    showcounter?: boolean;
+    maxcharcount?: number;
     handletrailingiconclick: boolean;
+    width?: string;
     testid?: string;
 }
 declare global {
@@ -37,7 +40,10 @@ export interface Props {
     variant?: 'goa' | 'bare';
     focused?: boolean;
     readonly?: boolean;
-    error?: string;
+    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.2",
+  "version": "4.0.0-alpha.5",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/react-components.esm.js

@@ -1,6 +1,6 @@
 import '@abgov/web-components';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React, { useRef, useEffect } from 'react';
+import { useRef, useEffect } from 'react';
 
 const GoAAppHeader = ({
   title,
@@ -15,6 +15,57 @@ const GoAAppHeader = ({
   }), void 0);
 };
 
+const GoAAppFooter = ({
+  id,
+  appUrl,
+  title,
+  copyrightUrl,
+  copyrightText,
+  children
+}) => {
+  return jsx("goa-app-footer", Object.assign({
+    id: id,
+    appurl: appUrl,
+    title: title,
+    copyrighturl: copyrightUrl,
+    copyrighttext: copyrightText
+  }, {
+    children: children
+  }), void 0);
+};
+
+const GoAMetaLink = ({
+  footerId,
+  url,
+  title,
+  children
+}) => {
+  return jsx("goa-meta-link", Object.assign({
+    footerid: footerId,
+    url: url,
+    title: title
+  }, {
+    children: children
+  }), void 0);
+};
+
+const GoANavigationLink = ({
+  footerId,
+  url,
+  title,
+  section,
+  children
+}) => {
+  return jsx("goa-navigation-link", Object.assign({
+    footerid: footerId,
+    url: url,
+    title: title,
+    section: section
+  }, {
+    children: children
+  }), void 0);
+};
+
 const GoABadge = ({
   type,
   content,
@@ -215,30 +266,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);
 };
@@ -336,32 +388,12 @@ const GoADropdown = props => {
 
 const GoAFlexRow = ({
   gap,
-  minWidth,
   children
 }) => {
-  const style = {
-    gap: gap === 'small' ? '1rem' : gap === 'medium' ? '2rem' : gap === 'large' ? '3rem' : '0'
-  };
-
-  const getChildren = () => {
-    if (!children) {
-      return null;
-    }
-
-    return React.Children.map(children, child => {
-      return /*#__PURE__*/React.cloneElement(child, {
-        style: Object.assign({
-          flexBasis: minWidth
-        }, child.props.style)
-      });
-    });
-  };
-
-  return jsx("div", Object.assign({
-    className: "goa-flex-row",
-    style: style
+  return jsx("goa-flex-row", Object.assign({
+    gap: gap
   }, {
-    children: getChildren()
+    children: children
   }), void 0);
 };
 
@@ -495,6 +527,9 @@ const GoAInput = ({
   value,
   placeholder,
   error,
+  width,
+  showCounter,
+  maxCharCount,
   testId,
   onTrailingIconClick,
   onChange
@@ -541,6 +576,9 @@ const GoAInput = ({
     error: error,
     "data-testid": testId,
     value: value,
+    width: width,
+    showcounter: showCounter,
+    maxcharcount: maxCharCount,
     handletrailingiconclick: !!onTrailingIconClick
   }, void 0);
 };
@@ -637,6 +675,7 @@ const GoAModal = ({
   open,
   width,
   actions,
+  transition,
   onClose
 }) => {
   const el = useRef(null);
@@ -662,7 +701,8 @@ const GoAModal = ({
     open: open,
     closable: !!onClose,
     scrollable: true,
-    width: width
+    width: width,
+    transition: transition
   }, {
     children: [actions && jsx("div", Object.assign({
       slot: "actions"
@@ -790,6 +830,8 @@ const GoATextArea = ({
   placeholder,
   rows,
   disabled,
+  showCounter,
+  maxCharCount,
   testId,
   error,
   onChange
@@ -822,9 +864,11 @@ const GoATextArea = ({
     value: value,
     rows: rows,
     disabled: disabled,
+    showcounter: showCounter,
+    maxcharcount: maxCharCount,
     error: error,
     "data-testid": testId
   }, void 0);
 };
 
-export { GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea, GoAWarningBadge };
+export { GoAAppFooter, GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMetaLink, GoAMicrositeHeader, GoAModal, GoANavigationLink, GoANotification, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea, GoAWarningBadge };

package/react-components.umd.js

@@ -2,11 +2,7 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@abgov/web-components'), require('react/jsx-runtime'), require('react')) :
     typeof define === 'function' && define.amd ? define(['exports', '@abgov/web-components', 'react/jsx-runtime', 'react'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactComponents = {}, null, global.jsxRuntime, global.React));
-})(this, (function (exports, webComponents, jsxRuntime, React) { 'use strict';
-
-    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-    var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+})(this, (function (exports, webComponents, jsxRuntime, react) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -58,6 +54,54 @@
       }), void 0);
     };
 
+    var GoAAppFooter = function GoAAppFooter(_a) {
+      var id = _a.id,
+          appUrl = _a.appUrl,
+          title = _a.title,
+          copyrightUrl = _a.copyrightUrl,
+          copyrightText = _a.copyrightText,
+          children = _a.children;
+      return jsxRuntime.jsx("goa-app-footer", __assign({
+        id: id,
+        appurl: appUrl,
+        title: title,
+        copyrighturl: copyrightUrl,
+        copyrighttext: copyrightText
+      }, {
+        children: children
+      }), void 0);
+    };
+
+    var GoAMetaLink = function GoAMetaLink(_a) {
+      var footerId = _a.footerId,
+          url = _a.url,
+          title = _a.title,
+          children = _a.children;
+      return jsxRuntime.jsx("goa-meta-link", __assign({
+        footerid: footerId,
+        url: url,
+        title: title
+      }, {
+        children: children
+      }), void 0);
+    };
+
+    var GoANavigationLink = function GoANavigationLink(_a) {
+      var footerId = _a.footerId,
+          url = _a.url,
+          title = _a.title,
+          section = _a.section,
+          children = _a.children;
+      return jsxRuntime.jsx("goa-navigation-link", __assign({
+        footerid: footerId,
+        url: url,
+        title: title,
+        section: section
+      }, {
+        children: children
+      }), void 0);
+    };
+
     var GoABadge = function GoABadge(_a) {
       var type = _a.type,
           content = _a.content,
@@ -153,8 +197,8 @@
           variant = _e === void 0 ? 'default' : _e,
           children = _a.children,
           onClick = _a.onClick;
-      var el = React.useRef(null);
-      React.useEffect(function () {
+      var el = react.useRef(null);
+      react.useEffect(function () {
         if (!el.current) {
           return;
         }
@@ -220,8 +264,8 @@
           text = _a.text,
           children = _a.children,
           onChange = _a.onChange;
-      var el = React.useRef(null);
-      React.useEffect(function () {
+      var el = react.useRef(null);
+      react.useEffect(function () {
         if (!el.current) {
           return;
         }
@@ -255,30 +299,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;
-      var el = React.useRef(null);
-      React.useEffect(function () {
+          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);
     };
@@ -335,8 +381,8 @@
     };
 
     var GoADropdown = function GoADropdown(props) {
-      var el = React.useRef(null);
-      React.useEffect(function () {
+      var el = react.useRef(null);
+      react.useEffect(function () {
         if (!el.current) {
           return;
         }
@@ -374,31 +420,11 @@
 
     var GoAFlexRow = function GoAFlexRow(_a) {
       var gap = _a.gap,
-          minWidth = _a.minWidth,
           children = _a.children;
-      var style = {
-        gap: gap === 'small' ? '1rem' : gap === 'medium' ? '2rem' : gap === 'large' ? '3rem' : '0'
-      };
-
-      var getChildren = function getChildren() {
-        if (!children) {
-          return null;
-        }
-
-        return React__default["default"].Children.map(children, function (child) {
-          return /*#__PURE__*/React__default["default"].cloneElement(child, {
-            style: __assign({
-              flexBasis: minWidth
-            }, child.props.style)
-          });
-        });
-      };
-
-      return jsxRuntime.jsx("div", __assign({
-        className: "goa-flex-row",
-        style: style
+      return jsxRuntime.jsx("goa-flex-row", __assign({
+        gap: gap
       }, {
-        children: getChildren()
+        children: children
       }), void 0);
     };
 
@@ -462,8 +488,8 @@
           size = _c === void 0 ? 'medium' : _c,
           title = _a.title,
           children = _a.children;
-      var ref = React.useRef(null);
-      React.useEffect(function () {
+      var ref = react.useRef(null);
+      react.useEffect(function () {
         if (!ref.current) {
           return;
         }
@@ -505,11 +531,14 @@
           value = _a.value,
           placeholder = _a.placeholder,
           error = _a.error,
+          width = _a.width,
+          showCounter = _a.showCounter,
+          maxCharCount = _a.maxCharCount,
           testId = _a.testId,
           onTrailingIconClick = _a.onTrailingIconClick,
           onChange = _a.onChange;
-      var ref = React.useRef(null);
-      React.useEffect(function () {
+      var ref = react.useRef(null);
+      react.useEffect(function () {
         if (!ref.current) {
           return;
         }
@@ -549,6 +578,9 @@
         error: error,
         "data-testid": testId,
         value: value,
+        width: width,
+        showcounter: showCounter,
+        maxcharcount: maxCharCount,
         handletrailingiconclick: !!onTrailingIconClick
       }, void 0);
     };
@@ -647,9 +679,10 @@
           open = _a.open,
           width = _a.width,
           actions = _a.actions,
+          transition = _a.transition,
           onClose = _a.onClose;
-      var el = React.useRef(null);
-      React.useEffect(function () {
+      var el = react.useRef(null);
+      react.useEffect(function () {
         if (!el.current) {
           return;
         }
@@ -671,7 +704,8 @@
         open: open,
         closable: !!onClose,
         scrollable: true,
-        width: width
+        width: width,
+        transition: transition
       }, {
         children: [actions && jsxRuntime.jsx("div", __assign({
           slot: "actions"
@@ -733,8 +767,8 @@
           error = _d === void 0 ? false : _d,
           testId = _a.testId,
           onChange = _a.onChange;
-      var el = React.useRef(null);
-      React.useEffect(function () {
+      var el = react.useRef(null);
+      react.useEffect(function () {
         if (!el.current) {
           return;
         }
@@ -798,11 +832,13 @@
           placeholder = _a.placeholder,
           rows = _a.rows,
           disabled = _a.disabled,
+          showCounter = _a.showCounter,
+          maxCharCount = _a.maxCharCount,
           testId = _a.testId,
           error = _a.error,
           onChange = _a.onChange;
-      var el = React.useRef(null);
-      React.useEffect(function () {
+      var el = react.useRef(null);
+      react.useEffect(function () {
         if (!el.current) {
           return;
         }
@@ -828,11 +864,14 @@
         value: value,
         rows: rows,
         disabled: disabled,
+        showcounter: showCounter,
+        maxcharcount: maxCharCount,
         error: error,
         "data-testid": testId
       }, void 0);
     };
 
+    exports.GoAAppFooter = GoAAppFooter;
     exports.GoAAppHeader = GoAAppHeader;
     exports.GoABadge = GoABadge;
     exports.GoAButton = GoAButton;
@@ -866,8 +905,10 @@
     exports.GoAInputText = GoAInputText;
     exports.GoAInputTime = GoAInputTime;
     exports.GoAInputUrl = GoAInputUrl;
+    exports.GoAMetaLink = GoAMetaLink;
     exports.GoAMicrositeHeader = GoAMicrositeHeader;
     exports.GoAModal = GoAModal;
+    exports.GoANavigationLink = GoANavigationLink;
     exports.GoANotification = GoANotification;
     exports.GoAPageBlock = GoAPageBlock;
     exports.GoARadioGroup = GoARadioGroup;