@coopdigital/react 1.15.2 → 1.16.1

package/dist/components/Card/Card.js

@@ -26,7 +26,6 @@ function getCardLinkElement(as, href) {
 const Card = ({ adaptive, chevron = false, children, className, href, hrefAs, orientation, ref, signpost, ...props }) => {
 	const { element: linkElement, props: linkProps } = getCardLinkElement(hrefAs, href);
 	const slots = { ...useSlots(componentSlots, children) };
-	const innerProps = { className: "coop-card--inner" };
 	const hasLinkWrapper = href && !slots.CardHeading;
 	const componentProps = {
 		className: clsx("coop-card", !hasUserBg(className) && "bg-white", className),
@@ -43,22 +42,20 @@ const Card = ({ adaptive, chevron = false, children, className, href, hrefAs, or
 			slots.CardImage,
 			slots.CardBadge,
 			React.createElement(hasLinkWrapper ? linkElement : "div", hasLinkWrapper ? {
-				href,
-				...innerProps
-			} : innerProps, /* @__PURE__ */ jsxs("div", {
 				className: "coop-card--content",
-				children: [
-					slots.CardLabel,
-					slots.CardHeading,
-					slots.CardBody,
-					slots.Children
-				]
-			}), (chevron || signpost) && /* @__PURE__ */ jsx("span", {
+				href
+			} : { className: "coop-card--content" }, /* @__PURE__ */ jsxs(Fragment, { children: [
+				slots.CardLabel,
+				slots.CardHeading,
+				slots.CardBody,
+				slots.Children
+			] })),
+			(chevron || signpost) && /* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",
 				className: "coop-card--icon",
 				role: "presentation",
 				children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
-			}))
+			})
 		]
 	});
 };

package/dist/components/Checkbox/Checkbox.js

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 const Checkbox = ({ className, disabled, error = false, id, name, ref, size, ...props }) => {
 	const field = useField();
 	return /* @__PURE__ */ jsx("input", {
-		className: clsx("coop-checkbox", "coop-field-element", className),
+		className: clsx("coop-checkbox", className),
 		"data-error": error || void 0,
 		"data-size": size ?? void 0,
 		disabled,

package/dist/components/Field/Field.js

@@ -7,7 +7,7 @@ import { Error } from "../FieldMarkers/Error.js";
 import { Hint } from "../FieldMarkers/Hint.js";
 import { Label } from "../FieldMarkers/Label.js";
 import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "react";
 //#region src/components/Field/Field.tsx
 const componentSlots = {
@@ -54,25 +54,16 @@ const Field = ({ boxed = false, children, className, error = false, hideErrorBar
 			...componentProps,
 			ref,
 			children: [
-				!controlProps?.inline && hasMarkers && /* @__PURE__ */ jsxs("div", {
-					className: "coop-field-markers",
-					children: [
-						slots.FieldLabel,
-						slots.FieldHint,
-						slots.FieldError
-					]
-				}),
-				slots.Control && /* @__PURE__ */ jsxs("div", {
-					className: "coop-field-control",
-					children: [slots.Control, controlProps?.inline && hasMarkers && /* @__PURE__ */ jsxs("div", {
-						className: "coop-field-markers",
-						children: [
-							slots.FieldLabel,
-							slots.FieldHint,
-							slots.FieldError
-						]
-					})]
-				}),
+				!controlProps?.inline && hasMarkers && /* @__PURE__ */ jsxs(Fragment, { children: [
+					slots.FieldLabel,
+					slots.FieldHint,
+					slots.FieldError
+				] }),
+				slots.Control && /* @__PURE__ */ jsxs(Fragment, { children: [slots.Control, controlProps?.inline && hasMarkers && /* @__PURE__ */ jsxs(Fragment, { children: [
+					slots.FieldLabel,
+					slots.FieldHint,
+					slots.FieldError
+				] })] }),
 				slots.Children
 			]
 		})

package/dist/components/Radio/Radio.js

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 const Radio = ({ className, disabled, error = false, id, name, ref, size, ...props }) => {
 	const field = useField();
 	return /* @__PURE__ */ jsx("input", {
-		className: clsx("coop-radio", "coop-field-element", className),
+		className: clsx("coop-radio", className),
 		"data-error": error || void 0,
 		"data-size": size ?? void 0,
 		disabled,

package/dist/components/Select/Select.js

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 const Select = ({ children, className, disabled, error, fit = false, id, name, ref, size, ...props }) => {
 	const field = useField();
 	return /* @__PURE__ */ jsx("select", {
-		className: clsx("coop-select", "coop-field-element", className),
+		className: clsx("coop-select", className),
 		"data-error": error ?? void 0,
 		"data-fit": fit || void 0,
 		"data-size": size ?? void 0,

package/dist/components/TextInput/TextInput.js

@@ -7,7 +7,7 @@ const TextInput = ({ "aria-placeholder": ariaPlaceholder, className, disabled, e
 	const field = useField();
 	const componentProps = {
 		"aria-placeholder": placeholder ?? ariaPlaceholder ?? void 0,
-		className: clsx("coop-text-input", "coop-field-element", className),
+		className: clsx("coop-text-input", className),
 		"data-error": error || void 0,
 		"data-fit": fit || void 0,
 		"data-size": size?.length ? size : void 0,
@@ -26,7 +26,7 @@ const TextInput = ({ "aria-placeholder": ariaPlaceholder, className, disabled, e
 		className: "coop-text-input--suffix",
 		"data-inline": suffixInline || void 0
 	} : {};
-	return /* @__PURE__ */ jsxs("div", {
+	return prefix || suffix ? /* @__PURE__ */ jsxs("div", {
 		className: "coop-text-input-wrapper",
 		children: [
 			prefix && /* @__PURE__ */ jsx("span", {
@@ -42,6 +42,9 @@ const TextInput = ({ "aria-placeholder": ariaPlaceholder, className, disabled, e
 				children: suffix
 			})
 		]
+	}) : /* @__PURE__ */ jsx("input", {
+		...componentProps,
+		ref
 	});
 };
 TextInput.slot = { name: "TextInput" };

package/dist/components/Textarea/Textarea.js

@@ -13,7 +13,7 @@ const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, c
 	const field = useField();
 	const componentProps = {
 		"aria-placeholder": placeholder ?? ariaPlaceholder ?? void 0,
-		className: clsx("coop-textarea", "coop-field-element", className),
+		className: clsx("coop-textarea", className),
 		cols,
 		"data-error": error ?? void 0,
 		"data-fit": fit || void 0,

package/dist/components/ValidationSummary/ValidationSummary.js

@@ -30,7 +30,7 @@ const ValidationSummary = ({ autoScroll = true, children, className, forceMount
 	]);
 	if (!hasErrors && !forceMount) return null;
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("coop-validation-summary ", className),
+		className: clsx("coop-validation-summary", className),
 		...props,
 		"aria-live": "assertive",
 		ref: mergeRefs(internalRef, ref),
@@ -44,11 +44,11 @@ const ValidationSummary = ({ autoScroll = true, children, className, forceMount
 		]
 	});
 };
-const ValidationSummaryHeading = ({ as = "h2", children = "There's a problem", className }) => {
-	return React.createElement(as, { className: clsx("coop-validation-summary--heading", className) }, children);
+const ValidationSummaryHeading = ({ as = "h2", children, className }) => {
+	return React.createElement(as, { className: clsx("coop-validation-summary--heading", className) }, children ?? "There's a problem");
 };
-const ValidationSummaryPrompt = ({ children = "Check the form. You must:" }) => {
-	return /* @__PURE__ */ jsx(Fragment, { children });
+const ValidationSummaryPrompt = ({ children }) => {
+	return children ? /* @__PURE__ */ jsx(Fragment, { children }) : /* @__PURE__ */ jsx("p", { children: "Check the form. You must:" });
 };
 const focusable = [
 	"INPUT",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.15.2",
+  "version": "1.16.1",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -102,12 +102,12 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.11.1",
+    "@coopdigital/styles": "^1.12.1",
     "@radix-ui/react-popover": "^1.1.23",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.1"
   },
-  "gitHead": "5a4607f2961f5dd623071549a49ccbb71b2aec71"
+  "gitHead": "f55d477f98dd57a88d7527a208b33abbf8be3ef8"
 }

package/src/components/Card/Card.tsx

@@ -112,7 +112,6 @@ const Card = ({
   const { element: linkElement, props: linkProps } = getCardLinkElement(hrefAs, href)
 
   const slots = { ...useSlots(componentSlots, children) }
-  const innerProps = { className: "coop-card--inner" }
   const hasLinkWrapper = href && !slots.CardHeading
 
   const componentProps = {
@@ -134,18 +133,20 @@ const Card = ({
       {slots.CardBadge}
       {React.createElement(
         hasLinkWrapper ? linkElement : "div",
-        hasLinkWrapper ? { href, ...innerProps } : innerProps,
-        <div className="coop-card--content">
+        hasLinkWrapper
+          ? { className: "coop-card--content", href }
+          : { className: "coop-card--content" },
+        <>
           {slots.CardLabel}
           {slots.CardHeading}
           {slots.CardBody}
           {slots.Children}
-        </div>,
-        (chevron || signpost) && (
-          <span aria-hidden="true" className="coop-card--icon" role="presentation">
-            <ChevronRightIcon />
-          </span>
-        )
+        </>
+      )}
+      {(chevron || signpost) && (
+        <span aria-hidden="true" className="coop-card--icon" role="presentation">
+          <ChevronRightIcon />
+        </span>
       )}
     </article>
   )

package/src/components/Checkbox/Checkbox.tsx

@@ -39,7 +39,7 @@ const Checkbox = ({
   const field = useField()
 
   const componentProps = {
-    className: clsx("coop-checkbox", "coop-field-element", className),
+    className: clsx("coop-checkbox", className),
     "data-error": error || undefined,
     "data-size": size ?? undefined,
     disabled,

package/src/components/Field/Field.tsx

@@ -95,23 +95,23 @@ const Field = ({
     <FieldContext.Provider value={{ ...controlProps }}>
       <div {...componentProps} ref={ref}>
         {!controlProps?.inline && hasMarkers && (
-          <div className="coop-field-markers">
+          <>
             {slots.FieldLabel}
             {slots.FieldHint}
             {slots.FieldError}
-          </div>
+          </>
         )}
         {slots.Control && (
-          <div className="coop-field-control">
+          <>
             {slots.Control}
             {controlProps?.inline && hasMarkers && (
-              <div className="coop-field-markers">
+              <>
                 {slots.FieldLabel}
                 {slots.FieldHint}
                 {slots.FieldError}
-              </div>
+              </>
             )}
-          </div>
+          </>
         )}
         {slots.Children}
       </div>

package/src/components/Radio/Radio.tsx

@@ -35,7 +35,7 @@ const Radio = ({
   const field = useField()
 
   const componentProps = {
-    className: clsx("coop-radio", "coop-field-element", className),
+    className: clsx("coop-radio", className),
     "data-error": error || undefined,
     "data-size": size ?? undefined,
     disabled,

package/src/components/Select/Select.tsx

@@ -68,7 +68,7 @@ const Select = ({
   const field = useField()
 
   const componentProps = {
-    className: clsx("coop-select", "coop-field-element", className),
+    className: clsx("coop-select", className),
     "data-error": error ?? undefined,
     "data-fit": fit || undefined,
     "data-size": size ?? undefined,

package/src/components/TextInput/TextInput.tsx

@@ -77,7 +77,7 @@ const TextInput = ({
 
   const componentProps = {
     "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
-    className: clsx("coop-text-input", "coop-field-element", className),
+    className: clsx("coop-text-input", className),
     "data-error": error || undefined,
     "data-fit": fit || undefined,
     "data-size": size?.length ? size : undefined,
@@ -99,12 +99,14 @@ const TextInput = ({
 
   //const formItemProps = { "aria-disabled": disabled ? true : undefined }
 
-  return (
+  return prefix || suffix ? (
     <div className="coop-text-input-wrapper">
       {prefix && <span {...prefixProps}>{prefix}</span>}
       <input {...componentProps} ref={ref} />
       {suffix && <span {...suffixProps}>{suffix}</span>}
     </div>
+  ) : (
+    <input {...componentProps} ref={ref} />
   )
 }
 

package/src/components/Textarea/Textarea.tsx

@@ -75,7 +75,7 @@ const Textarea = ({
 
   const componentProps = {
     "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
-    className: clsx("coop-textarea", "coop-field-element", className),
+    className: clsx("coop-textarea", className),
     cols,
     "data-error": error ?? undefined,
     "data-fit": fit || undefined,

package/src/components/ValidationSummary/ValidationSummary.tsx

@@ -101,7 +101,7 @@ const ValidationSummary = ({
   }
 
   const componentProps = {
-    className: clsx("coop-validation-summary ", className),
+    className: clsx("coop-validation-summary", className),
     ...props,
   }
 
@@ -123,20 +123,18 @@ const ValidationSummary = ({
 
 const ValidationSummaryHeading = ({
   as = "h2",
-  children = "There's a problem",
+  children,
   className,
 }: ValidationSummaryHeadingProps): JSX.Element => {
   return React.createElement(
     as,
     { className: clsx("coop-validation-summary--heading", className) },
-    children
+    children ?? "There's a problem"
   )
 }
 
-const ValidationSummaryPrompt = ({
-  children = "Check the form. You must:",
-}: ValidationSummaryPromptProps): JSX.Element => {
-  return <>{children}</>
+const ValidationSummaryPrompt = ({ children }: ValidationSummaryPromptProps): JSX.Element => {
+  return children ? <>{children}</> : <p>Check the form. You must:</p>
 }
 
 const focusable = ["INPUT", "TEXTAREA", "SELECT"]