@abgov/react-components 3.4.0-alpha.5 → 3.4.0-alpha.50

package/react-components.umd.js

@@ -58,36 +58,6 @@
       }), void 0);
     };
 
-    function styleInject(css, ref) {
-      if ( ref === void 0 ) ref = {};
-      var insertAt = ref.insertAt;
-
-      if (!css || typeof document === 'undefined') { return; }
-
-      var head = document.head || document.getElementsByTagName('head')[0];
-      var style = document.createElement('style');
-      style.type = 'text/css';
-
-      if (insertAt === 'top') {
-        if (head.firstChild) {
-          head.insertBefore(style, head.firstChild);
-        } else {
-          head.appendChild(style);
-        }
-      } else {
-        head.appendChild(style);
-      }
-
-      if (style.styleSheet) {
-        style.styleSheet.cssText = css;
-      } else {
-        style.appendChild(document.createTextNode(css));
-      }
-    }
-
-    var css_248z$3 = "goa-badge {\n  margin-left: 0.25rem;\n}";
-    styleInject(css_248z$3);
-
     var GoABadge = function GoABadge(_a) {
       var type = _a.type,
           content = _a.content,
@@ -141,8 +111,35 @@
       }, void 0);
     };
 
-    var css_248z$2 = "goa-button + goa-button {\n  margin-top: 1.5rem;\n}\n\n/* TODO: these margins need to match UI specs */\n@media (min-width: 480px) {\n  goa-button + goa-button {\n    margin-left: 1rem;\n  }\n}\n";
-    styleInject(css_248z$2);
+    function styleInject(css, ref) {
+      if ( ref === void 0 ) ref = {};
+      var insertAt = ref.insertAt;
+
+      if (!css || typeof document === 'undefined') { return; }
+
+      var head = document.head || document.getElementsByTagName('head')[0];
+      var style = document.createElement('style');
+      style.type = 'text/css';
+
+      if (insertAt === 'top') {
+        if (head.firstChild) {
+          head.insertBefore(style, head.firstChild);
+        } else {
+          head.appendChild(style);
+        }
+      } else {
+        head.appendChild(style);
+      }
+
+      if (style.styleSheet) {
+        style.styleSheet.cssText = css;
+      } else {
+        style.appendChild(document.createTextNode(css));
+      }
+    }
+
+    var css_248z$1 = "goa-button + goa-button {\n  margin-top: 1.5rem;\n}\n\n/* TODO: these margins need to match UI specs */\n@media (min-width: 480px) {\n  goa-button + goa-button {\n    margin-left: 1rem;\n  }\n}\n";
+    styleInject(css_248z$1);
 
     var GoAButton = function GoAButton(_a) {
       var title = _a.title,
@@ -165,7 +162,7 @@
         var current = el.current;
 
         var listener = function listener(e) {
-          onClick();
+          onClick(e);
         };
 
         current.addEventListener('_click', listener);
@@ -185,8 +182,8 @@
       }), void 0);
     };
 
-    var css_248z$1 = "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";
-    styleInject(css_248z$1);
+    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";
+    styleInject(css_248z);
 
     var GoAButtonGroup = function GoAButtonGroup(_a) {
       var alignment = _a.alignment,
@@ -212,14 +209,13 @@
     };
 
     var GoACheckbox = function GoACheckbox(_a) {
-      var name = _a.name,
+      var id = _a.id,
+          name = _a.name,
           testId = _a.testId,
           error = _a.error,
           disabled = _a.disabled,
           checked = _a.checked,
-          indeterminate = _a.indeterminate,
-          _b = _a.value,
-          value = _b === void 0 ? true : _b,
+          value = _a.value,
           text = _a.text,
           children = _a.children,
           onChange = _a.onChange;
@@ -243,11 +239,11 @@
       return jsxRuntime.jsx("goa-checkbox", __assign({
         "data-testid": testId,
         ref: el,
+        id: id,
         name: name,
         error: error,
         checked: checked,
         disabled: disabled,
-        indeterminate: indeterminate,
         text: text,
         value: value
       }, {
@@ -255,13 +251,30 @@
       }), void 0);
     };
 
+    var GoACircularProgress = function GoACircularProgress(_a) {
+      var type = _a.type,
+          visible = _a.visible,
+          message = _a.message,
+          progress = _a.progress,
+          variant = _a.variant,
+          size = _a.size;
+      return jsxRuntime.jsx("goa-circular-progress", {
+        type: type,
+        visible: visible ? "true" : "false",
+        message: message,
+        progress: progress,
+        variant: variant,
+        size: size
+      }, void 0);
+    };
+
     var GoAContainer = function GoAContainer(_a) {
       var headingSize = _a.headingSize,
           title = _a.title,
           children = _a.children,
           actions = _a.actions,
           _b = _a.variant,
-          variant = _b === void 0 ? 'primary' : _b;
+          variant = _b === void 0 ? 'default' : _b;
       return jsxRuntime.jsxs("goa-container", __assign({
         variant: variant,
         headingsize: headingSize
@@ -299,7 +312,7 @@
         var current = el.current;
 
         var handler = function handler(state) {
-          var _a = state.detail.data,
+          var _a = state.detail,
               name = _a.name,
               value = _a.value;
           props.onChange(name, value);
@@ -313,22 +326,20 @@
       return jsxRuntime.jsx("goa-dropdown", __assign({
         ref: el,
         name: props.name,
-        values: JSON.stringify(props.selectedValues),
+        values: JSON.stringify(props.values),
         leadingicon: props.leadingIcon,
         maxheight: props.maxHeight,
         placeholder: props.placeholder,
-        autocomplete: props.autoComplete,
+        filterable: props.filterable,
         disabled: props.disabled,
-        multiselect: props.multiSelect,
+        multiselect: props.multiselect,
+        error: props.error,
         "data-testid": props.testId
       }, {
         children: props.children
       }), void 0);
     };
 
-    var css_248z = "";
-    styleInject(css_248z);
-
     var GoAFlexRow = function GoAFlexRow(_a) {
       var gap = _a.gap,
           minWidth = _a.minWidth,
@@ -359,21 +370,13 @@
       }), void 0);
     };
 
-    var row = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        GoAFlexRow: GoAFlexRow,
-        'default': GoAFlexRow
-    });
-
     var GoAFormItem = function GoAFormItem(_a) {
       var children = _a.children,
           helpText = _a.helpText,
           error = _a.error,
           optional = _a.optional,
-          name = _a.name,
           label = _a.label;
       return jsxRuntime.jsx("goa-form-item", __assign({
-        name: name,
         label: label,
         error: error,
         optional: optional,
@@ -383,12 +386,6 @@
       }), void 0);
     };
 
-    var formItem = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        GoAFormItem: GoAFormItem,
-        'default': GoAFormItem
-    });
-
     var GoAHeroBanner = function GoAHeroBanner(_a) {
       var title = _a.title,
           backgroundUrl = _a.backgroundUrl,
@@ -401,15 +398,6 @@
       }), void 0);
     };
 
-    var GoAHeroBannerContent = function GoAHeroBannerContent(_a) {
-      var children = _a.children;
-      return jsxRuntime.jsx("div", __assign({
-        slot: "content"
-      }, {
-        children: children
-      }), void 0);
-    };
-
     var GoAHeroBannerActions = function GoAHeroBannerActions(_a) {
       var children = _a.children;
       return jsxRuntime.jsx("div", __assign({
@@ -478,13 +466,14 @@
           leadingIcon = _a.leadingIcon,
           trailingIcon = _a.trailingIcon,
           _b = _a.variant,
-          variant = _b === void 0 ? 'goa' : _b;
-          _a.focused;
-          var disabled = _a.disabled,
+          variant = _b === void 0 ? 'goa' : _b,
+          focused = _a.focused,
+          disabled = _a.disabled,
           readonly = _a.readonly,
           value = _a.value,
           placeholder = _a.placeholder,
           error = _a.error,
+          testId = _a.testId,
           onTrailingIconClick = _a.onTrailingIconClick,
           onChange = _a.onChange;
       var ref = React.useRef(null);
@@ -496,34 +485,26 @@
         var current = ref.current;
 
         var changeListener = function changeListener(e) {
-          var _a = e.detail.data,
+          var _a = e.detail,
               name = _a.name,
               value = _a.value;
           onChange(name, value);
-        }; // TODO: determinw the propery type of the e (CustomEvent does not work)
-
+        };
 
         var clickListener = function clickListener(e) {
           onTrailingIconClick === null || onTrailingIconClick === void 0 ? void 0 : onTrailingIconClick();
         };
 
-        current.addEventListener('_change', changeListener); // TODO: remove all the `on:` prefixes
-
-        current.addEventListener('_ontrailingiconclick', clickListener);
+        current.addEventListener('_change', changeListener);
+        current.addEventListener('_trailingIconClick', clickListener);
         return function () {
           current.removeEventListener('_change', changeListener);
-          current.removeEventListener('_ontrailingiconclick', clickListener);
+          current.removeEventListener('_trailingIconClick', clickListener);
         };
-      }, [ref, onChange, onTrailingIconClick]); // useEffect(() => {
-      //   if (focused) {
-      //     inputRef.current?.focus();
-      //   } else {
-      //     inputRef.current?.blur();
-      //   }
-      // }, [focused, inputRef]);
-
+      }, [ref, onChange, onTrailingIconClick]);
       return jsxRuntime.jsx("goa-input", {
         ref: ref,
+        focused: focused,
         type: type,
         name: name,
         id: id,
@@ -534,6 +515,7 @@
         readonly: readonly,
         placeholder: placeholder,
         error: error,
+        "data-testid": testId,
         value: value,
         handletrailingiconclick: !!onTrailingIconClick
       }, void 0);
@@ -611,19 +593,28 @@
       _a.step;
           var props = __rest(_a, ["step"]);
 
-      return jsxRuntime.jsx("input", __assign({}, props, {
-        type: "range",
-        onChange: function (e) {
-          return props.onChange(e.target.name, e.target.value);
-        }
+      return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+        type: "range"
       }), void 0);
     };
 
+    var GoAMicrositeHeader = function GoAMicrositeHeader(_a) {
+      var level = _a.level,
+          version = _a.version,
+          feedbackUrl = _a.feedbackUrl;
+      return jsxRuntime.jsx("goa-microsite-header", {
+        level: level,
+        version: version,
+        feedbackurl: feedbackUrl
+      }, void 0);
+    };
+
     var GoAModal = function GoAModal(_a) {
       var title = _a.title,
           children = _a.children,
           open = _a.open,
-          closable = _a.closable,
+          width = _a.width,
+          actions = _a.actions,
           onClose = _a.onClose;
       var el = React.useRef(null);
       React.useEffect(function () {
@@ -642,14 +633,19 @@
           current.removeEventListener('_close', listener);
         };
       }, [el, onClose]);
-      return jsxRuntime.jsx("goa-modal", __assign({
+      return jsxRuntime.jsxs("goa-modal", __assign({
         ref: el,
         title: title,
         open: open,
-        closable: closable,
-        scrollable: true
+        closable: !!onClose,
+        scrollable: true,
+        width: width
       }, {
-        children: children
+        children: [actions && jsxRuntime.jsx("div", __assign({
+          slot: "actions"
+        }, {
+          children: actions
+        }), void 0), children]
       }), void 0);
     };
 
@@ -664,22 +660,14 @@
       }), void 0);
     };
 
-    var GoAPageLoader = function GoAPageLoader(_a) {
-      var type = _a.type,
-          visible = _a.visible,
-          message = _a.message,
-          progress = _a.progress,
-          variant = _a.variant;
-      return jsxRuntime.jsx("goa-page-loader", {
-        type: type,
-        visible: visible,
-        message: message,
-        progress: progress,
-        variant: variant
+    var GoAPageBlock = function GoAPageBlock(_a) {
+      var children = _a.children;
+      return jsxRuntime.jsx("goa-page-block", {
+        children: children
       }, void 0);
     };
 
-    var GoARadio = function GoARadio(_a) {
+    var GoARadioItem = function GoARadioItem(_a) {
       var name = _a.name,
           label = _a.label,
           value = _a.value,
@@ -707,6 +695,10 @@
           children = _a.children,
           _b = _a.orientation,
           orientation = _b === void 0 ? 'vertical' : _b,
+          _c = _a.disabled,
+          disabled = _c === void 0 ? false : _c,
+          _d = _a.error,
+          error = _d === void 0 ? false : _d,
           testId = _a.testId,
           onChange = _a.onChange;
       var el = React.useRef(null);
@@ -716,6 +708,11 @@
         }
 
         var listener = function listener(e) {
+          if (!onChange) {
+            console.warn("Missing onChange function");
+            return;
+          }
+
           onChange(name, e.detail.value);
         };
 
@@ -730,16 +727,36 @@
         ref: el,
         name: name,
         value: value,
-        orientation: orientation
+        orientation: orientation,
+        disabled: disabled,
+        error: error
       }, {
         children: children
       }), void 0);
     };
 
-    var GoAServiceLevelHeader = function GoAServiceLevelHeader(_a) {
-      var level = _a.level;
-      return jsxRuntime.jsx("goa-service-level-header", {
-        level: level
+    var GoASkeleton = function GoASkeleton(_a) {
+      var type = _a.type,
+          _b = _a.size,
+          size = _b === void 0 ? 1 : _b;
+      return jsxRuntime.jsx("goa-skeleton", {
+        type: type,
+        size: size
+      }, void 0);
+    };
+
+    var GoASpinner = function GoASpinner(_a) {
+      var type = _a.type,
+          size = _a.size,
+          progress = _a.progress,
+          invert = _a.invert,
+          testId = _a.testId;
+      return jsxRuntime.jsx("goa-spinner", {
+        type: type,
+        size: size,
+        progress: progress,
+        invert: invert,
+        testid: testId
       }, void 0);
     };
 
@@ -749,6 +766,8 @@
           placeholder = _a.placeholder,
           rows = _a.rows,
           disabled = _a.disabled,
+          testId = _a.testId,
+          error = _a.error,
           onChange = _a.onChange;
       var el = React.useRef(null);
       React.useEffect(function () {
@@ -759,7 +778,7 @@
         var current = el.current;
 
         var listener = function listener(e) {
-          var _a = e.detail.data,
+          var _a = e.detail,
               name = _a.name,
               value = _a.value;
           onChange(name, value);
@@ -776,7 +795,9 @@
         placeholder: placeholder,
         value: value,
         rows: rows,
-        disabled: disabled
+        disabled: disabled,
+        error: error,
+        "data-testid": testId
       }, void 0);
     };
 
@@ -786,15 +807,15 @@
     exports.GoAButtonGroup = GoAButtonGroup;
     exports.GoACallout = GoACallout;
     exports.GoACheckbox = GoACheckbox;
+    exports.GoACircularProgress = GoACircularProgress;
     exports.GoAContainer = GoAContainer;
     exports.GoADropdown = GoADropdown;
     exports.GoADropdownOption = GoADropdownOption;
     exports.GoAEmergencyBadge = GoAEmergencyBadge;
-    exports.GoAFlexRow = row;
-    exports.GoAFormItem = formItem;
+    exports.GoAFlexRow = GoAFlexRow;
+    exports.GoAFormItem = GoAFormItem;
     exports.GoAHeroBanner = GoAHeroBanner;
     exports.GoAHeroBannerActions = GoAHeroBannerActions;
-    exports.GoAHeroBannerContent = GoAHeroBannerContent;
     exports.GoAIcon = GoAIcon;
     exports.GoAIconButton = GoAIconButton;
     exports.GoAInfoBadge = GoAInfoBadge;
@@ -812,12 +833,14 @@
     exports.GoAInputText = GoAInputText;
     exports.GoAInputTime = GoAInputTime;
     exports.GoAInputUrl = GoAInputUrl;
+    exports.GoAMicrositeHeader = GoAMicrositeHeader;
     exports.GoAModal = GoAModal;
     exports.GoANotification = GoANotification;
-    exports.GoAPageLoader = GoAPageLoader;
-    exports.GoARadio = GoARadio;
+    exports.GoAPageBlock = GoAPageBlock;
     exports.GoARadioGroup = GoARadioGroup;
-    exports.GoAServiceLevelHeader = GoAServiceLevelHeader;
+    exports.GoARadioItem = GoARadioItem;
+    exports.GoASkeleton = GoASkeleton;
+    exports.GoASpinner = GoASpinner;
     exports.GoASuccessBadge = GoASuccessBadge;
     exports.GoATextArea = GoATextArea;
     exports.GoAWarningBadge = GoAWarningBadge;

package/lib/hero-banner/hero-banner-content.d.ts

@@ -1,4 +0,0 @@
-import { FC } from 'react';
-export declare type GoAHeroBannerContentType = FC;
-export declare const GoAHeroBannerContent: GoAHeroBannerContentType;
-export default GoAHeroBannerContent;

package/lib/page-loader/page-loader.d.ts

@@ -1,26 +0,0 @@
-import React from 'react';
-declare type PageLoaderType = 'infinite' | 'progress';
-declare type PageLoaderVariant = "fullscreen" | "inline";
-interface WCProps {
-    type?: PageLoaderType;
-    variant?: PageLoaderVariant;
-    message?: string;
-    visible?: boolean;
-    progress?: number;
-}
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'goa-page-loader': WCProps & React.HTMLAttributes<HTMLElement>;
-        }
-    }
-}
-export interface PageLoaderProps {
-    type?: PageLoaderType;
-    variant?: PageLoaderVariant;
-    message?: string;
-    visible?: boolean;
-    progress?: number;
-}
-export declare const GoAPageLoader: ({ type, visible, message, progress, variant }: PageLoaderProps) => JSX.Element;
-export default GoAPageLoader;