@abgov/react-components 4.0.0-alpha.1 → 4.0.0-alpha.4

package/index.d.ts

@@ -3,11 +3,15 @@
  */
 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';
 import { GoACallout } from './lib/callout/callout';
 import { GoACheckbox } from './lib/checkbox/checkbox';
+import { GoAChip } from './lib/chip/chip';
 import { GoACircularProgress } from './lib/circular-progress/circular-progress';
 import { GoAContainer } from './lib/container/container';
 import { GoADropdown, GoADropdownOption } from './lib/dropdown/dropdown';
@@ -29,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, 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

@@ -0,0 +1,23 @@
+import React from 'react';
+interface WCProps {
+    ref: React.RefObject<HTMLElement>;
+    leadingicon: string;
+    error: boolean;
+    deletable: boolean;
+    content: string;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-chip': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface Props {
+    onDeleteIconClick?: () => void;
+    leadingIcon?: string;
+    error?: boolean;
+    content: string;
+}
+export declare const GoAChip: ({ leadingIcon, error, content, onDeleteIconClick }: 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/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.1",
+  "version": "4.0.0-alpha.4",
   "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,
@@ -213,6 +264,36 @@ const GoACheckbox = ({
   }), void 0);
 };
 
+const GoAChip = ({
+  leadingIcon: _leadingIcon = "",
+  error: _error = false,
+  content,
+  onDeleteIconClick
+}) => {
+  const el = useRef(null);
+  useEffect(() => {
+    if (!el.current) return;
+    if (!onDeleteIconClick) return;
+    const current = el.current;
+
+    const listener = e => {
+      onDeleteIconClick();
+    };
+
+    current.addEventListener('_onDeleteIconClick', listener);
+    return () => {
+      current.removeEventListener('_onDeleteIconClick', listener);
+    };
+  }, [el, onDeleteIconClick]);
+  return jsx("goa-chip", {
+    ref: el,
+    leadingicon: _leadingIcon,
+    error: _error,
+    deletable: !!onDeleteIconClick,
+    content: content
+  }, void 0);
+};
+
 const GoACircularProgress = ({
   type,
   visible,
@@ -306,32 +387,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);
 };
 
@@ -465,6 +526,9 @@ const GoAInput = ({
   value,
   placeholder,
   error,
+  width,
+  showCounter,
+  maxCharCount,
   testId,
   onTrailingIconClick,
   onChange
@@ -511,6 +575,9 @@ const GoAInput = ({
     error: error,
     "data-testid": testId,
     value: value,
+    width: width,
+    showcounter: showCounter,
+    maxcharcount: maxCharCount,
     handletrailingiconclick: !!onTrailingIconClick
   }, void 0);
 };
@@ -760,6 +827,8 @@ const GoATextArea = ({
   placeholder,
   rows,
   disabled,
+  showCounter,
+  maxCharCount,
   testId,
   error,
   onChange
@@ -792,9 +861,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, 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;
         }
@@ -252,6 +296,37 @@
       }), void 0);
     };
 
+    var GoAChip = function GoAChip(_a) {
+      var _b = _a.leadingIcon,
+          leadingIcon = _b === void 0 ? "" : _b,
+          _c = _a.error,
+          error = _c === void 0 ? false : _c,
+          content = _a.content,
+          onDeleteIconClick = _a.onDeleteIconClick;
+      var el = react.useRef(null);
+      react.useEffect(function () {
+        if (!el.current) return;
+        if (!onDeleteIconClick) return;
+        var current = el.current;
+
+        var listener = function listener(e) {
+          onDeleteIconClick();
+        };
+
+        current.addEventListener('_onDeleteIconClick', listener);
+        return function () {
+          current.removeEventListener('_onDeleteIconClick', listener);
+        };
+      }, [el, onDeleteIconClick]);
+      return jsxRuntime.jsx("goa-chip", {
+        ref: el,
+        leadingicon: leadingIcon,
+        error: error,
+        deletable: !!onDeleteIconClick,
+        content: content
+      }, void 0);
+    };
+
     var GoACircularProgress = function GoACircularProgress(_a) {
       var type = _a.type,
           visible = _a.visible,
@@ -304,8 +379,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;
         }
@@ -343,31 +418,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);
     };
 
@@ -431,8 +486,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;
         }
@@ -474,11 +529,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;
         }
@@ -518,6 +576,9 @@
         error: error,
         "data-testid": testId,
         value: value,
+        width: width,
+        showcounter: showCounter,
+        maxcharcount: maxCharCount,
         handletrailingiconclick: !!onTrailingIconClick
       }, void 0);
     };
@@ -617,8 +678,8 @@
           width = _a.width,
           actions = _a.actions,
           onClose = _a.onClose;
-      var el = React.useRef(null);
-      React.useEffect(function () {
+      var el = react.useRef(null);
+      react.useEffect(function () {
         if (!el.current) {
           return;
         }
@@ -702,8 +763,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;
         }
@@ -767,11 +828,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;
         }
@@ -797,17 +860,21 @@
         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;
     exports.GoAButtonGroup = GoAButtonGroup;
     exports.GoACallout = GoACallout;
     exports.GoACheckbox = GoACheckbox;
+    exports.GoAChip = GoAChip;
     exports.GoACircularProgress = GoACircularProgress;
     exports.GoAContainer = GoAContainer;
     exports.GoADropdown = GoADropdown;
@@ -834,8 +901,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;