@abgov/react-components 5.0.0-alpha.7 → 5.0.0-alpha.8

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

@@ -394,7 +394,7 @@ function GoACheckbox({
       id,
       name,
       error,
-      checked,
+      checked: checked || false,
       disabled,
       text,
       value,
@@ -538,7 +538,7 @@ function GoADatePicker({
     const current = ref.current;
     const handleChange = (e) => {
       const newValue = e.detail.value;
-      onChange(name || "", newValue ? new Date(newValue) : void 0);
+      onChange == null ? void 0 : onChange(name || "", newValue ? new Date(newValue) : void 0);
     };
     current.addEventListener("_change", handleChange);
     return () => {
@@ -609,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 () => {
@@ -664,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,
@@ -2630,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();
@@ -2701,6 +2749,7 @@ function GoAInput({
 }
 const onDateChangeHandler = (onChange) => {
   return (name, value) => {
+    if (!onChange) return;
     if (!value) {
       onChange(name, "");
       return;
@@ -2712,6 +2761,7 @@ const onDateChangeHandler = (onChange) => {
 };
 const onTimeChangeHandler = (onChange) => {
   return (name, value) => {
+    if (!onChange) return;
     if (!value) {
       onChange(name, "");
       return;
@@ -2806,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" }
     }
   );
@@ -2821,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;
@@ -2853,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,
@@ -3310,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,
@@ -3338,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 () => {
@@ -3454,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;
@@ -3480,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;
@@ -3501,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;