@abgov/react-components 3.4.0-alpha.6 → 3.4.0-alpha.62

package/react-components.esm.js

@@ -15,36 +15,6 @@ const GoAAppHeader = ({
   }), 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);
-
 const GoABadge = ({
   type,
   content,
@@ -103,8 +73,35 @@ const GoAEmergencyBadge = ({
   }, 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);
 
 const GoAButton = ({
   title,
@@ -124,7 +121,7 @@ const GoAButton = ({
     const current = el.current;
 
     const listener = e => {
-      onClick();
+      onClick(e);
     };
 
     current.addEventListener('_click', listener);
@@ -144,8 +141,8 @@ const GoAButton = ({
   }), 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);
 
 const GoAButtonGroup = ({
   alignment,
@@ -172,13 +169,13 @@ const GoACallout = ({
 };
 
 const GoACheckbox = ({
+  id,
   name,
   testId,
   error,
   disabled,
   checked,
-  indeterminate,
-  value: _value = true,
+  value,
   text,
   children,
   onChange
@@ -203,24 +200,42 @@ const GoACheckbox = ({
   return jsx("goa-checkbox", Object.assign({
     "data-testid": testId,
     ref: el,
+    id: id,
     name: name,
     error: error,
     checked: checked,
     disabled: disabled,
-    indeterminate: indeterminate,
     text: text,
-    value: _value
+    value: value
   }, {
     children: children
   }), void 0);
 };
 
+const GoACircularProgress = ({
+  type,
+  visible,
+  message,
+  progress,
+  variant,
+  size
+}) => {
+  return jsx("goa-circular-progress", {
+    type: type,
+    visible: visible ? "true" : "false",
+    message: message,
+    progress: progress,
+    variant: variant,
+    size: size
+  }, void 0);
+};
+
 const GoAContainer = ({
   headingSize,
   title,
   children,
   actions,
-  variant: _variant = 'primary'
+  variant: _variant = 'default'
 }) => {
   return jsxs("goa-container", Object.assign({
     variant: _variant,
@@ -262,7 +277,7 @@ const GoADropdown = props => {
       const {
         name,
         value
-      } = state.detail.data;
+      } = state.detail;
       props.onChange(name, value);
     };
 
@@ -274,22 +289,20 @@ const GoADropdown = props => {
   return jsx("goa-dropdown", Object.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);
-
 const GoAFlexRow = ({
   gap,
   minWidth,
@@ -321,22 +334,14 @@ const GoAFlexRow = ({
   }), void 0);
 };
 
-var row = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  GoAFlexRow: GoAFlexRow,
-  'default': GoAFlexRow
-});
-
 const GoAFormItem = ({
   children,
   helpText,
   error,
   optional,
-  name,
   label
 }) => {
   return jsx("goa-form-item", Object.assign({
-    name: name,
     label: label,
     error: error,
     optional: optional,
@@ -346,12 +351,6 @@ const GoAFormItem = ({
   }), void 0);
 };
 
-var formItem = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  GoAFormItem: GoAFormItem,
-  'default': GoAFormItem
-});
-
 const GoAHeroBanner = ({
   title,
   backgroundUrl,
@@ -365,16 +364,6 @@ const GoAHeroBanner = ({
   }), void 0);
 };
 
-const GoAHeroBannerContent = ({
-  children
-}) => {
-  return jsx("div", Object.assign({
-    slot: "content"
-  }, {
-    children: children
-  }), void 0);
-};
-
 const GoAHeroBannerActions = ({
   children
 }) => {
@@ -475,6 +464,7 @@ const GoAInput = ({
   value,
   placeholder,
   error,
+  testId,
   onTrailingIconClick,
   onChange
 }) => {
@@ -490,32 +480,24 @@ const GoAInput = ({
       const {
         name,
         value
-      } = e.detail.data;
+      } = e.detail;
       onChange(name, value);
-    }; // TODO: determinw the propery type of the e (CustomEvent does not work)
-
+    };
 
     const 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 () => {
       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 jsx("goa-input", {
     ref: ref,
+    focused: focused,
     type: type,
     name: name,
     id: id,
@@ -526,6 +508,7 @@ const GoAInput = ({
     readonly: readonly,
     placeholder: placeholder,
     error: error,
+    "data-testid": testId,
     value: value,
     handletrailingiconclick: !!onTrailingIconClick
   }, void 0);
@@ -562,7 +545,7 @@ const GoAInputEmail = props => {
 };
 const GoAInputSearch = props => {
   return jsx(GoAInput, Object.assign({}, props, {
-    type: "text",
+    type: "search",
     trailingIcon: "search"
   }), void 0);
 };
@@ -600,17 +583,29 @@ const GoAInputNumber = props => {
 const GoAInputRange = _a => {
   var props = __rest(_a, ["step"]);
 
-  return jsx("input", Object.assign({}, props, {
-    type: "range",
-    onChange: e => props.onChange(e.target.name, e.target.value)
+  return jsx(GoAInput, Object.assign({}, props, {
+    type: "range"
   }), void 0);
 };
 
+const GoAMicrositeHeader = ({
+  level,
+  version,
+  feedbackUrl
+}) => {
+  return jsx("goa-microsite-header", {
+    level: level,
+    version: version,
+    feedbackurl: feedbackUrl
+  }, void 0);
+};
+
 const GoAModal = ({
-  title,
+  heading,
   children,
   open,
-  closable,
+  width,
+  actions,
   onClose
 }) => {
   const el = useRef(null);
@@ -630,14 +625,19 @@ const GoAModal = ({
       current.removeEventListener('_close', listener);
     };
   }, [el, onClose]);
-  return jsx("goa-modal", Object.assign({
+  return jsxs("goa-modal", Object.assign({
     ref: el,
-    title: title,
+    heading: heading,
     open: open,
-    closable: closable,
-    scrollable: true
+    closable: !!onClose,
+    scrollable: true,
+    width: width
   }, {
-    children: children
+    children: [actions && jsx("div", Object.assign({
+      slot: "actions"
+    }, {
+      children: actions
+    }), void 0), children]
   }), void 0);
 };
 
@@ -652,23 +652,15 @@ const GoANotification = ({
   }), void 0);
 };
 
-const GoAPageLoader = ({
-  type,
-  visible,
-  message,
-  progress,
-  variant
+const GoAPageBlock = ({
+  children
 }) => {
-  return jsx("goa-page-loader", {
-    type: type,
-    visible: visible,
-    message: message,
-    progress: progress,
-    variant: variant
+  return jsx("goa-page-block", {
+    children: children
   }, void 0);
 };
 
-const GoARadio = ({
+const GoARadioItem = ({
   name,
   label,
   value,
@@ -696,6 +688,8 @@ const GoARadioGroup = ({
   value,
   children,
   orientation: _orientation = 'vertical',
+  disabled: _disabled = false,
+  error: _error = false,
   testId,
   onChange
 }) => {
@@ -706,6 +700,11 @@ const GoARadioGroup = ({
     }
 
     const listener = e => {
+      if (!onChange) {
+        console.warn("Missing onChange function");
+        return;
+      }
+
       onChange(name, e.detail.value);
     };
 
@@ -720,17 +719,37 @@ const GoARadioGroup = ({
     ref: el,
     name: name,
     value: value,
-    orientation: _orientation
+    orientation: _orientation,
+    disabled: _disabled,
+    error: _error
   }, {
     children: children
   }), void 0);
 };
 
-const GoAServiceLevelHeader = ({
-  level
+const GoASkeleton = ({
+  type,
+  size: _size = 1
 }) => {
-  return jsx("goa-service-level-header", {
-    level: level
+  return jsx("goa-skeleton", {
+    type: type,
+    size: _size
+  }, void 0);
+};
+
+const GoASpinner = ({
+  type,
+  size,
+  progress,
+  invert,
+  testId
+}) => {
+  return jsx("goa-spinner", {
+    type: type,
+    size: size,
+    progress: progress,
+    invert: invert,
+    testid: testId
   }, void 0);
 };
 
@@ -740,6 +759,8 @@ const GoATextArea = ({
   placeholder,
   rows,
   disabled,
+  testId,
+  error,
   onChange
 }) => {
   const el = useRef(null);
@@ -754,7 +775,7 @@ const GoATextArea = ({
       const {
         name,
         value
-      } = e.detail.data;
+      } = e.detail;
       onChange(name, value);
     };
 
@@ -769,8 +790,10 @@ const GoATextArea = ({
     placeholder: placeholder,
     value: value,
     rows: rows,
-    disabled: disabled
+    disabled: disabled,
+    error: error,
+    "data-testid": testId
   }, void 0);
 };
 
-export { GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, row as GoAFlexRow, formItem as GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAHeroBannerContent, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAModal, GoANotification, GoAPageLoader, GoARadio, GoARadioGroup, GoAServiceLevelHeader, GoASuccessBadge, GoATextArea, GoAWarningBadge };
+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 };