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

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/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,11 @@ interface WCProps {
     trailingicon?: string;
     variant: string;
     disabled?: boolean;
-    error?: string;
+    error?: boolean;
     readonly?: boolean;
     focused?: boolean;
     handletrailingiconclick: boolean;
+    width?: string;
     testid?: string;
 }
 declare global {
@@ -37,7 +38,8 @@ export interface Props {
     variant?: 'goa' | 'bare';
     focused?: boolean;
     readonly?: boolean;
-    error?: string;
+    error?: boolean;
+    width?: string;
     testId?: string;
 }
 export declare const GoAInput: FC<Props & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-alpha.3",
   "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,
@@ -336,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);
 };
 
@@ -495,6 +526,7 @@ const GoAInput = ({
   value,
   placeholder,
   error,
+  width,
   testId,
   onTrailingIconClick,
   onChange
@@ -541,6 +573,7 @@ const GoAInput = ({
     error: error,
     "data-testid": testId,
     value: value,
+    width: width,
     handletrailingiconclick: !!onTrailingIconClick
   }, void 0);
 };
@@ -827,4 +860,4 @@ const GoATextArea = ({
   }, 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;
         }
@@ -259,8 +303,8 @@
           error = _c === void 0 ? false : _c,
           content = _a.content,
           onDeleteIconClick = _a.onDeleteIconClick;
-      var el = React.useRef(null);
-      React.useEffect(function () {
+      var el = react.useRef(null);
+      react.useEffect(function () {
         if (!el.current) return;
         if (!onDeleteIconClick) return;
         var current = el.current;
@@ -335,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;
         }
@@ -374,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);
     };
 
@@ -462,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;
         }
@@ -505,11 +529,12 @@
           value = _a.value,
           placeholder = _a.placeholder,
           error = _a.error,
+          width = _a.width,
           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 +574,7 @@
         error: error,
         "data-testid": testId,
         value: value,
+        width: width,
         handletrailingiconclick: !!onTrailingIconClick
       }, void 0);
     };
@@ -648,8 +674,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;
         }
@@ -733,8 +759,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;
         }
@@ -801,8 +827,8 @@
           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;
         }
@@ -833,6 +859,7 @@
       }, void 0);
     };
 
+    exports.GoAAppFooter = GoAAppFooter;
     exports.GoAAppHeader = GoAAppHeader;
     exports.GoABadge = GoABadge;
     exports.GoAButton = GoAButton;
@@ -866,8 +893,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;