@abgov/react-components 5.0.0 → 5.2.0

package/index.mjs

@@ -22,7 +22,7 @@ function GoAAccordion({
       heading,
       secondaryText,
       maxwidth: maxWidth,
-      "data-testid": testid,
+      testid,
       mt,
       mr,
       mb,
@@ -49,7 +49,7 @@ function GoAAppHeader({
       url,
       fullmenubreakpoint: fullMenuBreakpoint,
       maxcontentwidth: maxContentWidth,
-      "data-testid": testId,
+      testid: testId,
       children
     }
   );
@@ -60,7 +60,7 @@ function GoAAppHeaderMenu(props) {
     {
       heading: props.heading,
       leadingicon: props.leadingIcon,
-      "data-testid": props.testId,
+      testid: props.testId,
       children: props.children
     }
   );
@@ -82,7 +82,7 @@ function GoABadge({
       type,
       content,
       icon,
-      "data-testid": testId,
+      testid: testId,
       arialabel: ariaLabel,
       mt,
       mr,
@@ -202,7 +202,7 @@ function GoABlock(props) {
       mr: props.mr,
       mb: props.mb,
       ml: props.ml,
-      "data-testid": props.testId,
+      testid: props.testId,
       children: props.children
     }
   );
@@ -249,7 +249,7 @@ function GoAButton({
       disabled,
       leadingicon: leadingIcon,
       trailingicon: trailingIcon,
-      "data-testid": testId,
+      testid: testId,
       mt,
       mr,
       mb,
@@ -277,7 +277,7 @@ function GoAButtonGroup({
       mr,
       mb,
       ml,
-      "data-testid": testId,
+      testid: testId,
       children
     }
   );
@@ -312,7 +312,7 @@ function GoACalendar({
       value: value == null ? void 0 : value.toISOString(),
       min: min == null ? void 0 : min.toISOString(),
       max: max == null ? void 0 : max.toISOString(),
-      "data-testid": testId,
+      testid: testId,
       mt,
       mr,
       mb,
@@ -345,7 +345,7 @@ const GoACallout = ({
       mr,
       mb,
       ml,
-      "data-testid": testId,
+      testid: testId,
       children
     }
   );
@@ -387,12 +387,12 @@ function GoACheckbox({
   return /* @__PURE__ */ jsxs(
     "goa-checkbox",
     {
-      "data-testid": testId,
+      testid: testId,
       ref: el,
       id,
       name,
       error,
-      checked,
+      checked: checked || false,
       disabled,
       text,
       value,
@@ -451,7 +451,7 @@ const GoAChip = ({
       mr,
       mb,
       ml,
-      "data-testid": testId
+      testid: testId
     }
   );
 };
@@ -471,7 +471,7 @@ const GoACircularProgress = ({
       progress,
       variant,
       size,
-      "data-testid": testId
+      testid: testId
     }
   );
 };
@@ -504,7 +504,7 @@ function GoAContainer({
       mr,
       mb,
       ml,
-      "data-testid": testId,
+      testid: testId,
       children: [
         headingContent && /* @__PURE__ */ jsx("div", { slot: "title", children: headingContent }),
         children,
@@ -520,10 +520,12 @@ function GoADatePicker({
   min,
   max,
   testId,
+  disabled,
   mt,
   mr,
   mb,
   ml,
+  relative,
   onChange
 }) {
   const ref = useRef(null);
@@ -533,7 +535,8 @@ function GoADatePicker({
     }
     const current = ref.current;
     const handleChange = (e) => {
-      onChange(name || "", e.detail.value);
+      const newValue = e.detail.value;
+      onChange == null ? void 0 : onChange(name || "", newValue ? new Date(newValue) : void 0);
     };
     current.addEventListener("_change", handleChange);
     return () => {
@@ -545,15 +548,17 @@ function GoADatePicker({
     {
       ref,
       name,
-      value: value == null ? void 0 : value.toISOString(),
+      value: (value == null ? void 0 : value.toISOString()) || "",
       error,
+      disabled,
       min: min == null ? void 0 : min.toISOString(),
       max: max == null ? void 0 : max.toISOString(),
-      "data-testid": testId,
+      testid: testId,
       mt,
       mr,
       mb,
-      ml
+      ml,
+      relative
     }
   );
 }
@@ -564,7 +569,7 @@ function GoADetails(props) {
       heading: props.heading,
       open: props.open,
       maxwidth: props.maxWidth,
-      "data-testid": props.testId,
+      testid: props.testId,
       mt: props.mt,
       mr: props.mr,
       mb: props.mb,
@@ -581,7 +586,7 @@ function GoADivider(props) {
       mr: props.mr,
       mb: props.mb,
       ml: props.ml,
-      "data-testid": props.testId
+      testid: props.testId
     }
   );
 }
@@ -602,8 +607,9 @@ function GoADropdown(props) {
     }
     const current = el.current;
     const handler = (e) => {
+      var _a;
       const { name, value, values } = e.detail;
-      props.onChange(name, props.multiselect ? values : value);
+      (_a = props.onChange) == null ? void 0 : _a.call(props, name, props.multiselect ? values : value);
     };
     current.addEventListener("_change", handler);
     return () => {
@@ -630,7 +636,7 @@ function GoADropdown(props) {
       multiselect: props.multiselect,
       native: props.native,
       placeholder: props.placeholder,
-      "data-testid": props.testId,
+      testid: props.testId,
       width: props.width,
       relative: props.relative,
       id: props.id,
@@ -657,6 +663,53 @@ function GoADropdownItem({ value, label, filter, name, testId, mountType = "appe
     }
   );
 }
+function GoAFieldset({
+  heading,
+  buttonText,
+  id,
+  onContinue,
+  children,
+  mt,
+  mr,
+  mb,
+  ml,
+  first,
+  last
+}) {
+  const ref = useRef(null);
+  useEffect(() => {
+    var _a;
+    const _continue = (e) => {
+      const { el, state } = e.detail;
+      return onContinue == null ? void 0 : onContinue(el, state);
+    };
+    if (onContinue) {
+      (_a = ref.current) == null ? void 0 : _a.addEventListener("_continue", _continue);
+    }
+    return () => {
+      var _a2;
+      if (onContinue) {
+        (_a2 = ref.current) == null ? void 0 : _a2.removeEventListener("_continue", _continue);
+      }
+    };
+  }, [ref.current, onContinue]);
+  return /* @__PURE__ */ jsx(
+    "goa-fieldset",
+    {
+      ref,
+      id,
+      first,
+      last,
+      heading,
+      buttontext: buttonText,
+      mt,
+      mr,
+      mb,
+      ml,
+      children
+    }
+  );
+}
 function GoAFileUploadCard({
   filename,
   size,
@@ -689,7 +742,7 @@ function GoAFileUploadCard({
       type,
       progress,
       error,
-      "data-testid": testId
+      testid: testId
     }
   );
 }
@@ -719,7 +772,7 @@ function GoAFileUploadInput({
       variant,
       accept,
       maxfilesize: maxFileSize,
-      "data-testid": testId
+      testid: testId
     }
   );
 }
@@ -728,13 +781,13 @@ function GoAAppFooter({
   children,
   testId
 }) {
-  return /* @__PURE__ */ jsx("goa-app-footer", { maxcontentwidth: maxContentWidth, "data-testid": testId, children });
+  return /* @__PURE__ */ jsx("goa-app-footer", { maxcontentwidth: maxContentWidth, testid: testId, children });
 }
 function GoAAppFooterMetaSection({ testId, children }) {
   return /* @__PURE__ */ jsx(
     "goa-app-footer-meta-section",
     {
-      "data-testid": testId,
+      testid: testId,
       slot: "meta",
       children
     }
@@ -752,7 +805,7 @@ function GoAAppFooterNavSection({
       slot: "nav",
       heading,
       maxcolumncount: maxColumnCount,
-      "data-testid": testId,
+      testid: testId,
       children
     }
   );
@@ -785,7 +838,7 @@ function GoAFormItem({
       mr,
       mb,
       ml,
-      "data-testid": testId,
+      testid: testId,
       id,
       children: [
         error && typeof error !== "string" && /* @__PURE__ */ jsx("div", { slot: "error", children: error }),
@@ -827,7 +880,7 @@ function GoAFormStepper({
     "goa-form-stepper",
     {
       ref,
-      "data-testid": testId,
+      testid: testId,
       step,
       mt,
       mr,
@@ -856,7 +909,7 @@ function GoAGrid({
       mr,
       mb,
       ml,
-      "data-testid": testId,
+      testid: testId,
       children
     }
   );
@@ -880,7 +933,7 @@ function GoAHeroBanner({
       maxcontentwidth: maxContentWidth,
       backgroundcolor: backgroundColor,
       textcolor: textColor,
-      "data-testid": testId,
+      testid: testId,
       children
     }
   );
@@ -936,7 +989,7 @@ function GoAIconButton({
       mr,
       mb,
       ml,
-      "data-testid": testId,
+      testid: testId,
       children
     }
   );
@@ -971,7 +1024,7 @@ function GoAIcon({
       mr,
       mb,
       ml,
-      "data-testid": testId
+      testid: testId
     }
   );
 }
@@ -2623,7 +2676,7 @@ function GoAInput({
     const current = ref.current;
     const changeListener = (e) => {
       const { name: name2, value: value2 } = e.detail;
-      onChange(name2, value2);
+      onChange == null ? void 0 : onChange(name2, value2);
     };
     const clickListener = () => {
       onTrailingIconClick == null ? void 0 : onTrailingIconClick();
@@ -2670,7 +2723,7 @@ function GoAInput({
       readonly,
       placeholder,
       error,
-      "data-testid": testId,
+      testid: testId,
       value,
       width,
       min,
@@ -2694,6 +2747,7 @@ function GoAInput({
 }
 const onDateChangeHandler = (onChange) => {
   return (name, value) => {
+    if (!onChange) return;
     if (!value) {
       onChange(name, "");
       return;
@@ -2705,6 +2759,7 @@ const onDateChangeHandler = (onChange) => {
 };
 const onTimeChangeHandler = (onChange) => {
   return (name, value) => {
+    if (!onChange) return;
     if (!value) {
       onChange(name, "");
       return;
@@ -2799,7 +2854,10 @@ function GoAInputFile(props) {
       id: props.id,
       name: props.name,
       type: "file",
-      onChange: (e) => props.onChange(e.target.name, e.target.value),
+      onChange: (e) => {
+        var _a;
+        return (_a = props.onChange) == null ? void 0 : _a.call(props, e.target.name, e.target.value);
+      },
       style: { backgroundColor: "revert" }
     }
   );
@@ -2814,7 +2872,8 @@ function GoAInputNumber({
   ...props
 }) {
   const onNumberChange = (name, value2) => {
-    props.onChange(name, parseFloat(value2));
+    var _a;
+    (_a = props.onChange) == null ? void 0 : _a.call(props, name, parseFloat(value2));
   };
   const onFocus = (name, value2) => {
     var _a;
@@ -2846,6 +2905,35 @@ function GoAInputNumber({
 function GoAInputRange(props) {
   return /* @__PURE__ */ jsx(GoAInput, { ...props, type: "range" });
 }
+function GoALink(props) {
+  return /* @__PURE__ */ jsx(
+    "goa-link",
+    {
+      leadingicon: props.leadingIcon,
+      trailingicon: props.trailingIcon,
+      mt: props.mt,
+      mb: props.mb,
+      ml: props.ml,
+      mr: props.mr,
+      children: props.children
+    }
+  );
+}
+function GoALinkButton({ type = "primary", ...props }) {
+  return /* @__PURE__ */ jsx(
+    "goa-link-button",
+    {
+      type,
+      leadingicon: props.leadingIcon,
+      trailingicon: props.trailingIcon,
+      mt: props.mt,
+      mb: props.mb,
+      ml: props.ml,
+      mr: props.mr,
+      children: props.children
+    }
+  );
+}
 function GoAMicrositeHeader({
   type,
   version,
@@ -2853,18 +2941,39 @@ function GoAMicrositeHeader({
   maxContentWidth,
   feedbackUrlTarget,
   headerUrlTarget,
-  testId
+  testId,
+  onFeedbackClick
 }) {
+  const el = useRef(null);
+  useEffect(() => {
+    if (!el.current) {
+      return;
+    }
+    if (!onFeedbackClick) {
+      return;
+    }
+    const current = el.current;
+    const listener = () => {
+      onFeedbackClick();
+    };
+    current.addEventListener("_feedbackClick", listener);
+    return () => {
+      current.removeEventListener("_feedbackClick", listener);
+    };
+  }, [el, onFeedbackClick]);
   return /* @__PURE__ */ jsx(
     "goa-microsite-header",
     {
+      ref: el,
       type,
-      version,
+      version: typeof version === "string" ? version : void 0,
       feedbackurl: feedbackUrl,
-      "data-testid": testId,
+      testid: testId,
       maxcontentwidth: maxContentWidth,
       feedbackurltarget: feedbackUrlTarget,
-      headerurltarget: headerUrlTarget
+      headerurltarget: headerUrlTarget,
+      hasfeedbackhandler: !!onFeedbackClick,
+      children: version && typeof version !== "string" && /* @__PURE__ */ jsx("div", { slot: "version", children: version })
     }
   );
 }
@@ -2913,7 +3022,7 @@ function GoAModal({
       maxwidth: maxWidth,
       transition,
       calloutvariant: calloutVariant,
-      "data-testid": testId,
+      testid: testId,
       role,
       children: [
         heading && /* @__PURE__ */ jsx("div", { slot: "heading", children: heading }),
@@ -2950,7 +3059,7 @@ const GoANotification = ({
     {
       ref: el,
       type,
-      "data-testid": testId,
+      testid: testId,
       maxcontentwidth: maxContentWidth,
       arialive: ariaLive,
       children
@@ -2961,7 +3070,7 @@ function GoAOneColumnLayout(props) {
   return /* @__PURE__ */ jsx("goa-one-column-layout", { children: props.children });
 }
 function GoAPageBlock(props) {
-  return /* @__PURE__ */ jsx("goa-page-block", { width: props.width, "data-testid": props.testId, children: props.children });
+  return /* @__PURE__ */ jsx("goa-page-block", { width: props.width, testid: props.testId, children: props.children });
 }
 function GoAPages(props) {
   return /* @__PURE__ */ jsx(
@@ -3004,7 +3113,7 @@ function GoAPagination({ onChange, ...props }) {
       mb: props.mb,
       ml: props.ml,
       mr: props.mr,
-      "data-testid": props.testId
+      testid: props.testId
     }
   );
 }
@@ -3025,7 +3134,7 @@ function GoAPopover({
   return /* @__PURE__ */ jsxs(
     "goa-popover",
     {
-      "data-testid": testId,
+      testid: testId,
       maxwidth: maxWidth,
       minwidth: minWidth,
       padded,
@@ -3119,7 +3228,7 @@ function GoARadioGroup({
   return /* @__PURE__ */ jsx(
     "goa-radio-group",
     {
-      "data-testid": testId,
+      testid: testId,
       ref: el,
       name,
       value,
@@ -3140,7 +3249,7 @@ function GoASideMenuGroup(props) {
     "goa-side-menu-group",
     {
       heading: props.heading,
-      "data-testid": props.testId,
+      testid: props.testId,
       children: props.children
     }
   );
@@ -3150,7 +3259,7 @@ function GoASideMenuHeading(props) {
     "goa-side-menu-heading",
     {
       icon: props.icon,
-      "data-testid": props.testId,
+      testid: props.testId,
       children: [
         props.children,
         props.meta && /* @__PURE__ */ jsx("span", { slot: "meta", children: props.meta })
@@ -3159,7 +3268,7 @@ function GoASideMenuHeading(props) {
   );
 }
 function GoASideMenu(props) {
-  return /* @__PURE__ */ jsx("goa-side-menu", { "data-testid": props.testId, children: props.children });
+  return /* @__PURE__ */ jsx("goa-side-menu", { testid: props.testId, children: props.children });
 }
 const GoASkeleton = ({
   maxWidth,
@@ -3183,7 +3292,7 @@ const GoASkeleton = ({
       mr,
       mb,
       ml,
-      "data-testid": testId
+      testid: testId
     }
   );
 };
@@ -3193,7 +3302,7 @@ function GoASpacer(props) {
     {
       hspacing: props.hSpacing,
       vspacing: props.vSpacing,
-      "data-testid": props.testId
+      testid: props.testId
     }
   );
 }
@@ -3211,7 +3320,7 @@ function GoASpinner({
       size,
       progress,
       invert,
-      "data-testid": testId
+      testid: testId
     }
   );
 }
@@ -3238,7 +3347,7 @@ function GoATable({ onSort, ...props }) {
       width: props.width,
       stickyheader: false,
       variant: props.variant,
-      "data-testid": props.testId,
+      testid: props.testId,
       mt: props.mt,
       mb: props.mb,
       ml: props.ml,
@@ -3274,7 +3383,7 @@ function GoATabs({
       };
     }
   }, [onChange]);
-  return /* @__PURE__ */ jsx("goa-tabs", { ref, initialtab: initialTab, "data-testid": testId, children });
+  return /* @__PURE__ */ jsx("goa-tabs", { ref, initialtab: initialTab, testid: testId, children });
 }
 function GoATab({ heading, children }) {
   return /* @__PURE__ */ jsxs("goa-tab", { children: [
@@ -3282,6 +3391,21 @@ function GoATab({ heading, children }) {
     children
   ] });
 }
+function GoAText(props) {
+  return /* @__PURE__ */ jsx(
+    "goa-text",
+    {
+      as: props.as || "div",
+      size: props.size,
+      maxwidth: props.maxWidth || "65ch",
+      mt: props.mt,
+      mb: props.mb,
+      ml: props.ml,
+      mr: props.mr,
+      children: props.children
+    }
+  );
+}
 function GoATextarea({
   name,
   value,
@@ -3310,7 +3434,7 @@ function GoATextarea({
     const current = el.current;
     const listener = (e) => {
       const { name: name2, value: value2 } = e.detail;
-      onChange(name2, value2);
+      onChange == null ? void 0 : onChange(name2, value2);
     };
     current.addEventListener("_change", listener);
     return () => {
@@ -3345,7 +3469,7 @@ function GoATextarea({
       width,
       maxwidth: maxWidth,
       error,
-      "data-testid": testId,
+      testid: testId,
       arialabel: ariaLabel,
       mt,
       mr,
@@ -3379,7 +3503,7 @@ function GoATooltip(props) {
       position: props.position,
       content: props.content,
       halign: props.hAlign,
-      "data-testid": props.testId,
+      testid: props.testId,
       mt: props.mt,
       mr: props.mr,
       mb: props.mb,
@@ -3427,6 +3551,7 @@ export {
   GoADropdownItem,
   GoADropdownOption,
   GoAEmergencyBadge,
+  GoAFieldset,
   GoAFileUploadCard,
   GoAFileUploadInput,
   GoAFormItem,
@@ -3453,6 +3578,8 @@ export {
   GoAInputText,
   GoAInputTime,
   GoAInputUrl,
+  GoALink,
+  GoALinkButton,
   GoAMicrositeHeader,
   GoAModal,
   GoANotification,
@@ -3474,6 +3601,7 @@ export {
   GoATable,
   GoATableSortHeader,
   GoATabs,
+  GoAText,
   GoATextarea as GoATextArea,
   GoATextarea,
   GoAThreeColumnLayout,