@abgov/react-components 5.0.0 → 5.2.0

package/index.d.ts

@@ -16,6 +16,7 @@ export * from "./lib/details/details";
 export * from "./lib/divider/divider";
 export * from "./lib/dropdown/dropdown";
 export * from "./lib/dropdown/dropdown-item";
+export * from "./lib/fieldset/fieldset";
 export * from "./lib/file-upload-card/file-upload-card";
 export * from "./lib/file-upload-input/file-upload-input";
 export * from "./lib/footer/footer";
@@ -30,6 +31,8 @@ export * from "./lib/hero-banner/hero-banner-actions";
 export * from "./lib/icon-button/icon-button";
 export * from "./lib/icon/icon";
 export * from "./lib/input/input";
+export * from "./lib/link/link";
+export * from "./lib/link-button/link-button";
 export * from "./lib/microsite-header/microsite-header";
 export * from "./lib/modal/modal";
 export * from "./lib/notification/notification";
@@ -49,6 +52,7 @@ export * from "./lib/table/table";
 export * from "./lib/table/table-sort-header";
 export * from "./lib/tabs/tabs";
 export * from "./lib/tab/tab";
+export * from "./lib/text/text";
 export * from "./lib/textarea/textarea";
 export * from "./lib/three-column-layout/three-column-layout";
 export * from "./lib/tooltip/tooltip";

package/index.js

@@ -24,7 +24,7 @@ function GoAAccordion({
       heading,
       secondaryText,
       maxwidth: maxWidth,
-      "data-testid": testid,
+      testid,
       mt,
       mr,
       mb,
@@ -51,7 +51,7 @@ function GoAAppHeader({
       url,
       fullmenubreakpoint: fullMenuBreakpoint,
       maxcontentwidth: maxContentWidth,
-      "data-testid": testId,
+      testid: testId,
       children
     }
   );
@@ -62,7 +62,7 @@ function GoAAppHeaderMenu(props) {
     {
       heading: props.heading,
       leadingicon: props.leadingIcon,
-      "data-testid": props.testId,
+      testid: props.testId,
       children: props.children
     }
   );
@@ -84,7 +84,7 @@ function GoABadge({
       type,
       content,
       icon,
-      "data-testid": testId,
+      testid: testId,
       arialabel: ariaLabel,
       mt,
       mr,
@@ -204,7 +204,7 @@ function GoABlock(props) {
       mr: props.mr,
       mb: props.mb,
       ml: props.ml,
-      "data-testid": props.testId,
+      testid: props.testId,
       children: props.children
     }
   );
@@ -251,7 +251,7 @@ function GoAButton({
       disabled,
       leadingicon: leadingIcon,
       trailingicon: trailingIcon,
-      "data-testid": testId,
+      testid: testId,
       mt,
       mr,
       mb,
@@ -279,7 +279,7 @@ function GoAButtonGroup({
       mr,
       mb,
       ml,
-      "data-testid": testId,
+      testid: testId,
       children
     }
   );
@@ -314,7 +314,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,
@@ -347,7 +347,7 @@ const GoACallout = ({
       mr,
       mb,
       ml,
-      "data-testid": testId,
+      testid: testId,
       children
     }
   );
@@ -389,12 +389,12 @@ function GoACheckbox({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "goa-checkbox",
     {
-      "data-testid": testId,
+      testid: testId,
       ref: el,
       id,
       name,
       error,
-      checked,
+      checked: checked || false,
       disabled,
       text,
       value,
@@ -453,7 +453,7 @@ const GoAChip = ({
       mr,
       mb,
       ml,
-      "data-testid": testId
+      testid: testId
     }
   );
 };
@@ -473,7 +473,7 @@ const GoACircularProgress = ({
       progress,
       variant,
       size,
-      "data-testid": testId
+      testid: testId
     }
   );
 };
@@ -506,7 +506,7 @@ function GoAContainer({
       mr,
       mb,
       ml,
-      "data-testid": testId,
+      testid: testId,
       children: [
         headingContent && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "title", children: headingContent }),
         children,
@@ -522,10 +522,12 @@ function GoADatePicker({
   min,
   max,
   testId,
+  disabled,
   mt,
   mr,
   mb,
   ml,
+  relative,
   onChange
 }) {
   const ref = react.useRef(null);
@@ -535,7 +537,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 () => {
@@ -547,15 +550,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
     }
   );
 }
@@ -566,7 +571,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,
@@ -583,7 +588,7 @@ function GoADivider(props) {
       mr: props.mr,
       mb: props.mb,
       ml: props.ml,
-      "data-testid": props.testId
+      testid: props.testId
     }
   );
 }
@@ -604,8 +609,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 () => {
@@ -632,7 +638,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,
@@ -659,6 +665,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 = react.useRef(null);
+  react.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__ */ jsxRuntime.jsx(
+    "goa-fieldset",
+    {
+      ref,
+      id,
+      first,
+      last,
+      heading,
+      buttontext: buttonText,
+      mt,
+      mr,
+      mb,
+      ml,
+      children
+    }
+  );
+}
 function GoAFileUploadCard({
   filename,
   size,
@@ -691,7 +744,7 @@ function GoAFileUploadCard({
       type,
       progress,
       error,
-      "data-testid": testId
+      testid: testId
     }
   );
 }
@@ -721,7 +774,7 @@ function GoAFileUploadInput({
       variant,
       accept,
       maxfilesize: maxFileSize,
-      "data-testid": testId
+      testid: testId
     }
   );
 }
@@ -730,13 +783,13 @@ function GoAAppFooter({
   children,
   testId
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("goa-app-footer", { maxcontentwidth: maxContentWidth, "data-testid": testId, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-app-footer", { maxcontentwidth: maxContentWidth, testid: testId, children });
 }
 function GoAAppFooterMetaSection({ testId, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-app-footer-meta-section",
     {
-      "data-testid": testId,
+      testid: testId,
       slot: "meta",
       children
     }
@@ -754,7 +807,7 @@ function GoAAppFooterNavSection({
       slot: "nav",
       heading,
       maxcolumncount: maxColumnCount,
-      "data-testid": testId,
+      testid: testId,
       children
     }
   );
@@ -787,7 +840,7 @@ function GoAFormItem({
       mr,
       mb,
       ml,
-      "data-testid": testId,
+      testid: testId,
       id,
       children: [
         error && typeof error !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "error", children: error }),
@@ -829,7 +882,7 @@ function GoAFormStepper({
     "goa-form-stepper",
     {
       ref,
-      "data-testid": testId,
+      testid: testId,
       step,
       mt,
       mr,
@@ -858,7 +911,7 @@ function GoAGrid({
       mr,
       mb,
       ml,
-      "data-testid": testId,
+      testid: testId,
       children
     }
   );
@@ -882,7 +935,7 @@ function GoAHeroBanner({
       maxcontentwidth: maxContentWidth,
       backgroundcolor: backgroundColor,
       textcolor: textColor,
-      "data-testid": testId,
+      testid: testId,
       children
     }
   );
@@ -938,7 +991,7 @@ function GoAIconButton({
       mr,
       mb,
       ml,
-      "data-testid": testId,
+      testid: testId,
       children
     }
   );
@@ -973,7 +1026,7 @@ function GoAIcon({
       mr,
       mb,
       ml,
-      "data-testid": testId
+      testid: testId
     }
   );
 }
@@ -2625,7 +2678,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();
@@ -2672,7 +2725,7 @@ function GoAInput({
       readonly,
       placeholder,
       error,
-      "data-testid": testId,
+      testid: testId,
       value,
       width,
       min,
@@ -2696,6 +2749,7 @@ function GoAInput({
 }
 const onDateChangeHandler = (onChange) => {
   return (name, value) => {
+    if (!onChange) return;
     if (!value) {
       onChange(name, "");
       return;
@@ -2707,6 +2761,7 @@ const onDateChangeHandler = (onChange) => {
 };
 const onTimeChangeHandler = (onChange) => {
   return (name, value) => {
+    if (!onChange) return;
     if (!value) {
       onChange(name, "");
       return;
@@ -2801,7 +2856,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" }
     }
   );
@@ -2816,7 +2874,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;
@@ -2848,6 +2907,35 @@ function GoAInputNumber({
 function GoAInputRange(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(GoAInput, { ...props, type: "range" });
 }
+function GoALink(props) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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,
@@ -2855,18 +2943,39 @@ function GoAMicrositeHeader({
   maxContentWidth,
   feedbackUrlTarget,
   headerUrlTarget,
-  testId
+  testId,
+  onFeedbackClick
 }) {
+  const el = react.useRef(null);
+  react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { slot: "version", children: version })
     }
   );
 }
@@ -2915,7 +3024,7 @@ function GoAModal({
       maxwidth: maxWidth,
       transition,
       calloutvariant: calloutVariant,
-      "data-testid": testId,
+      testid: testId,
       role,
       children: [
         heading && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "heading", children: heading }),
@@ -2952,7 +3061,7 @@ const GoANotification = ({
     {
       ref: el,
       type,
-      "data-testid": testId,
+      testid: testId,
       maxcontentwidth: maxContentWidth,
       arialive: ariaLive,
       children
@@ -2963,7 +3072,7 @@ function GoAOneColumnLayout(props) {
   return /* @__PURE__ */ jsxRuntime.jsx("goa-one-column-layout", { children: props.children });
 }
 function GoAPageBlock(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx("goa-page-block", { width: props.width, "data-testid": props.testId, children: props.children });
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-page-block", { width: props.width, testid: props.testId, children: props.children });
 }
 function GoAPages(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3006,7 +3115,7 @@ function GoAPagination({ onChange, ...props }) {
       mb: props.mb,
       ml: props.ml,
       mr: props.mr,
-      "data-testid": props.testId
+      testid: props.testId
     }
   );
 }
@@ -3027,7 +3136,7 @@ function GoAPopover({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "goa-popover",
     {
-      "data-testid": testId,
+      testid: testId,
       maxwidth: maxWidth,
       minwidth: minWidth,
       padded,
@@ -3121,7 +3230,7 @@ function GoARadioGroup({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-radio-group",
     {
-      "data-testid": testId,
+      testid: testId,
       ref: el,
       name,
       value,
@@ -3142,7 +3251,7 @@ function GoASideMenuGroup(props) {
     "goa-side-menu-group",
     {
       heading: props.heading,
-      "data-testid": props.testId,
+      testid: props.testId,
       children: props.children
     }
   );
@@ -3152,7 +3261,7 @@ function GoASideMenuHeading(props) {
     "goa-side-menu-heading",
     {
       icon: props.icon,
-      "data-testid": props.testId,
+      testid: props.testId,
       children: [
         props.children,
         props.meta && /* @__PURE__ */ jsxRuntime.jsx("span", { slot: "meta", children: props.meta })
@@ -3161,7 +3270,7 @@ function GoASideMenuHeading(props) {
   );
 }
 function GoASideMenu(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx("goa-side-menu", { "data-testid": props.testId, children: props.children });
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-side-menu", { testid: props.testId, children: props.children });
 }
 const GoASkeleton = ({
   maxWidth,
@@ -3185,7 +3294,7 @@ const GoASkeleton = ({
       mr,
       mb,
       ml,
-      "data-testid": testId
+      testid: testId
     }
   );
 };
@@ -3195,7 +3304,7 @@ function GoASpacer(props) {
     {
       hspacing: props.hSpacing,
       vspacing: props.vSpacing,
-      "data-testid": props.testId
+      testid: props.testId
     }
   );
 }
@@ -3213,7 +3322,7 @@ function GoASpinner({
       size,
       progress,
       invert,
-      "data-testid": testId
+      testid: testId
     }
   );
 }
@@ -3240,7 +3349,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,
@@ -3276,7 +3385,7 @@ function GoATabs({
       };
     }
   }, [onChange]);
-  return /* @__PURE__ */ jsxRuntime.jsx("goa-tabs", { ref, initialtab: initialTab, "data-testid": testId, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-tabs", { ref, initialtab: initialTab, testid: testId, children });
 }
 function GoATab({ heading, children }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("goa-tab", { children: [
@@ -3284,6 +3393,21 @@ function GoATab({ heading, children }) {
     children
   ] });
 }
+function GoAText(props) {
+  return /* @__PURE__ */ jsxRuntime.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,
@@ -3312,7 +3436,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 () => {
@@ -3347,7 +3471,7 @@ function GoATextarea({
       width,
       maxwidth: maxWidth,
       error,
-      "data-testid": testId,
+      testid: testId,
       arialabel: ariaLabel,
       mt,
       mr,
@@ -3381,7 +3505,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,
@@ -3428,6 +3552,7 @@ exports.GoADropdown = GoADropdown;
 exports.GoADropdownItem = GoADropdownItem;
 exports.GoADropdownOption = GoADropdownOption;
 exports.GoAEmergencyBadge = GoAEmergencyBadge;
+exports.GoAFieldset = GoAFieldset;
 exports.GoAFileUploadCard = GoAFileUploadCard;
 exports.GoAFileUploadInput = GoAFileUploadInput;
 exports.GoAFormItem = GoAFormItem;
@@ -3454,6 +3579,8 @@ exports.GoAInputTel = GoAInputTel;
 exports.GoAInputText = GoAInputText;
 exports.GoAInputTime = GoAInputTime;
 exports.GoAInputUrl = GoAInputUrl;
+exports.GoALink = GoALink;
+exports.GoALinkButton = GoALinkButton;
 exports.GoAMicrositeHeader = GoAMicrositeHeader;
 exports.GoAModal = GoAModal;
 exports.GoANotification = GoANotification;
@@ -3475,6 +3602,7 @@ exports.GoATab = GoATab;
 exports.GoATable = GoATable;
 exports.GoATableSortHeader = GoATableSortHeader;
 exports.GoATabs = GoATabs;
+exports.GoAText = GoAText;
 exports.GoATextArea = GoATextarea;
 exports.GoATextarea = GoATextarea;
 exports.GoAThreeColumnLayout = GoAThreeColumnLayout;