@obosbbl/grunnmuren-react 1.7.0 → 1.9.0

package/dist/Radio/RadioContext.d.ts

@@ -6,4 +6,5 @@ export declare const RadioContext: import("react").Context<{
     onChange?(event: React.ChangeEvent<HTMLInputElement>): void;
     required?: boolean | undefined;
     value?: string | undefined;
+    error?: boolean | undefined;
 }>;

package/dist/Radio/RadioGroup.d.ts

@@ -4,6 +4,8 @@ export interface RadioGroupProps extends Omit<React.ComponentPropsWithoutRef<'di
     defaultValue?: string;
     /** Help text for the radio group. */
     description?: React.ReactNode;
+    /** Error message for the form control */
+    error?: string;
     /** The `name` attribute for the radio buttons. */
     name: string;
     /** The label for the radio group. */

package/dist/Select/Select.d.ts

@@ -1,7 +1,21 @@
 /// <reference types="react" />
-export interface SelectProps extends React.ComponentPropsWithoutRef<'select'> {
+export interface SelectProps extends Omit<React.ComponentPropsWithoutRef<'select'>, 'size'> {
+    /**
+     * Collection of <option />-elements
+     */
     children: React.ReactNode;
-    id?: string;
-    className?: string;
+    /** Help text for the form control */
+    description?: React.ReactNode;
+    /** Disables the built in HTML5 validation. If using custom validation for an entire form, consider setting `noValidate` on the form element instead. @default false */
+    disableValidation?: boolean;
+    /** Error message for the form control */
+    error?: string;
+    /**  Label for the form control */
+    label: string;
+    /**
+     * Changes font-size, padding and gaps
+     * @default medium
+     */
+    size?: 'medium' | 'small';
 }
 export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLSelectElement>>;

package/dist/Select/SelectPlain.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export interface SelectPlainProps extends Omit<React.ComponentPropsWithoutRef<'select'>, 'size'> {
+    /**
+     * Collection of <option />-elements
+     */
+    children: React.ReactNode;
+    /** Render select as invalid. Sets `aria-invalid` to true */
+    isInvalid?: boolean;
+    /**
+     * Changes font-size, padding and gaps
+     * @default medium
+     */
+    size?: 'medium' | 'small';
+}
+export declare const SelectPlain: import("react").ForwardRefExoticComponent<SelectPlainProps & import("react").RefAttributes<HTMLSelectElement>>;

package/dist/grunnmuren.es.js

@@ -633,10 +633,10 @@ const Checkbox = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxs("div", {
     className: "grid gap-2",
     children: [/* @__PURE__ */ jsxs("label", {
-      className: cx(className, "inline-flex cursor-pointer items-center"),
+      className: cx(className, "flex cursor-pointer gap-2.5"),
       children: [/* @__PURE__ */ jsx("input", __spreadProps(__spreadValues({
         id,
-        className: cx("checkbox checked:bg-green checked:border-green mr-3 grid h-[1.25em] w-[1.25em] flex-none cursor-pointer appearance-none place-content-center rounded border-2 border-solid bg-white text-white focus:outline-none focus:ring-2", {
+        className: cx("checkbox checked:bg-green checked:border-green grid h-[1.25em] w-[1.25em] flex-none translate-y-[0.1em] cursor-pointer appearance-none place-content-center rounded border-2 border-solid bg-white text-white focus:outline-none focus:ring-2", {
           "border-gray-dark focus:ring-black": !error,
           "border-red focus:ring-red": !!error
         }),
@@ -760,7 +760,7 @@ const FormErrorMessage = (props) => {
     "className"
   ]);
   return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({
-    className: cx(className, "bg-red-light text-red flex items-center gap-2 rounded-lg py-1 px-4 text-sm"),
+    className: cx(className, "bg-red-light text-red flex items-center gap-2 rounded py-1 px-2 text-sm"),
     "aria-live": "polite"
   }, rest), {
     children: [/* @__PURE__ */ jsx(Warning, {
@@ -985,7 +985,7 @@ const Input = forwardRef((props, ref) => {
   const Component = as != null ? as : "input";
   const type = getType(Component, typeProp);
   return /* @__PURE__ */ jsxs("div", {
-    className: cx(className, "relative flex items-center rounded-md border-[1px] border-b-[3px] focus-within:-ml-[2px] focus-within:-mt-[2px] focus-within:border-[3px] focus-within:shadow", {
+    className: cx(className, "relative flex items-center rounded-lg border border-b-[3px] focus-within:-ml-[2px] focus-within:-mt-[2px] focus-within:border-[3px] focus-within:shadow", {
       "focus-within:border-blue-dark border-black": !isInvalid,
       "border-red focus-within:border-red": isInvalid,
       "w-fit": size != null,
@@ -996,7 +996,7 @@ const Input = forwardRef((props, ref) => {
     children: [leftAddon, /* @__PURE__ */ jsx(Component, __spreadValues({
       "aria-invalid": isInvalid,
       ref,
-      className: "focus:none placeholder-gray w-full rounded-md border-none px-4 py-3.5 focus:outline-none",
+      className: "focus:none placeholder-gray w-full rounded-lg border-none px-4 py-3.5 focus:outline-none",
       size,
       type
     }, rest)), rightAddon]
@@ -1314,7 +1314,8 @@ const RadioContext = createContext({
   name: void 0,
   onChange: noop,
   required: false,
-  value: void 0
+  value: void 0,
+  error: false
 });
 const Radio = forwardRef((props, ref) => {
   const _a = props, {
@@ -1330,12 +1331,13 @@ const Radio = forwardRef((props, ref) => {
     name,
     onChange,
     required,
-    value
+    value,
+    error
   } = useContext(RadioContext);
   return /* @__PURE__ */ jsxs("label", {
-    className: cx(className, "cursor-pointer"),
+    className: cx(className, "flex cursor-pointer gap-2.5"),
     children: [/* @__PURE__ */ jsx("input", __spreadValues({
-      className: "radio",
+      className: cx("radio", error && "border-red"),
       defaultChecked: !isControlled ? rest.value === defaultValue : void 0,
       checked: isControlled ? rest.value === value : void 0,
       name,
@@ -1352,6 +1354,8 @@ const RadioGroup = forwardRef((props, ref) => {
     className,
     defaultValue,
     description,
+    error,
+    id: idProp,
     children,
     label,
     name,
@@ -1362,6 +1366,8 @@ const RadioGroup = forwardRef((props, ref) => {
     "className",
     "defaultValue",
     "description",
+    "error",
+    "id",
     "children",
     "label",
     "name",
@@ -1379,15 +1385,22 @@ const RadioGroup = forwardRef((props, ref) => {
     name,
     onChange,
     required,
-    value
-  }), [defaultValue, isControlled, name, onChange, required, value]);
-  const groupId = useId();
+    value,
+    error: Boolean(error)
+  }), [defaultValue, isControlled, name, onChange, required, value, error]);
+  const groupId = useFallbackId(idProp);
   const labelId = `${groupId}:label`;
-  const helpId = `${groupId}:help`;
+  const helpTextId = `${groupId}:help`;
+  const errorMsgId = groupId + "err";
+  const errorMsg = error;
   return /* @__PURE__ */ jsx(RadioContext.Provider, {
     value: group,
     children: /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({
-      "aria-describedby": description ? helpId : void 0,
+      "aria-describedby": cx({
+        [errorMsgId]: errorMsg,
+        [helpTextId]: description
+      }) || void 0,
+      "aria-invalid": !!error,
       "aria-labelledby": label ? labelId : void 0,
       className: cx(className, "flex flex-col gap-4"),
       role: "radiogroup",
@@ -1396,30 +1409,89 @@ const RadioGroup = forwardRef((props, ref) => {
       children: [label && /* @__PURE__ */ jsx(FormLabel, {
         id: labelId,
         isRequired: required,
+        isInvalid: !!error,
         children: label
-      }), children, /* @__PURE__ */ jsx(FormHelperText, {
-        id: helpId,
+      }), description && /* @__PURE__ */ jsx(FormHelperText, {
+        id: helpTextId,
         children: description
+      }), children, errorMsg && /* @__PURE__ */ jsx(FormErrorMessage, {
+        id: errorMsgId,
+        children: errorMsg
       })]
     }))
   });
 });
-const Select = forwardRef((props, ref) => {
+const SelectPlain = forwardRef((props, ref) => {
   const _a = props, {
     children,
-    className
+    className,
+    isInvalid,
+    size
   } = _a, rest = __objRest(_a, [
     "children",
-    "className"
+    "className",
+    "isInvalid",
+    "size"
   ]);
+  const isSmall = size === "small";
   return /* @__PURE__ */ jsxs("div", {
-    className: cx("relative", className),
-    children: [/* @__PURE__ */ jsx("select", __spreadProps(__spreadValues({}, rest), {
-      className: "focus:border-blue border-gray-dark w-full appearance-none rounded-lg border-2 border-solid bg-white px-4 py-3 focus:outline-none",
+    className: cx(className, "relative", isSmall && "text-sm"),
+    children: [/* @__PURE__ */ jsx("select", __spreadProps(__spreadValues({
+      "aria-invalid": isInvalid
+    }, rest), {
+      className: cx("w-full cursor-pointer appearance-none border border-b-[3px] bg-white focus:-mt-0.5 focus:-ml-0.5 focus:border-[3px] focus:shadow focus:outline-none", isSmall ? "rounded px-3.5 py-2" : "rounded-lg px-4 py-3.5", isInvalid ? "border-red focus:border-red" : "focus:border-blue-dark border-black"),
       ref,
       children
     })), /* @__PURE__ */ jsx(ChevronDown, {
-      className: "absolute top-4 right-4"
+      className: cx("pointer-events-none absolute top-0 bottom-0 my-auto", isSmall ? "right-3.5" : "right-4")
+    })]
+  });
+});
+const Select = forwardRef((props, ref) => {
+  const _a = props, {
+    description,
+    error,
+    id: idProp,
+    label,
+    disableValidation = false
+  } = _a, rest = __objRest(_a, [
+    "description",
+    "error",
+    "id",
+    "label",
+    "disableValidation"
+  ]);
+  const ownRef = useRef(null);
+  const {
+    validity,
+    validationMessage
+  } = useFormControlValidity(ownRef, !disableValidation);
+  const id = useFallbackId(idProp);
+  const helpTextId = id + "help";
+  const errorMsgId = id + "err";
+  const errorMsg = error || validationMessage;
+  return /* @__PURE__ */ jsxs("div", {
+    className: "grid gap-2",
+    children: [/* @__PURE__ */ jsx(FormLabel, {
+      htmlFor: id,
+      isRequired: props.required,
+      isInvalid: !!error || validity === "invalid",
+      children: label
+    }), description && /* @__PURE__ */ jsx(FormHelperText, {
+      id: helpTextId,
+      children: description
+    }), /* @__PURE__ */ jsx(SelectPlain, __spreadProps(__spreadValues({
+      id,
+      ref: composeRefs(ownRef, ref)
+    }, rest), {
+      isInvalid: !!error || validity === "invalid",
+      "aria-describedby": cx({
+        [errorMsgId]: errorMsg,
+        [helpTextId]: description
+      }) || void 0
+    })), errorMsg && /* @__PURE__ */ jsx(FormErrorMessage, {
+      id: errorMsgId,
+      children: errorMsg
     })]
   });
 });
@@ -1521,7 +1593,7 @@ const StepListBullet = (_a) => {
   ]);
   return /* @__PURE__ */ jsx("span", __spreadValues({
     "aria-hidden": true,
-    className: cx("text-green after:bg-gray-light before:bg-gray-light grid h-10 w-10 flex-none place-content-center justify-items-center rounded-full border-2 text-sm font-bold after:absolute after:bottom-0 after:w-0.5 after:translate-x-1/2 group-last:after:hidden md:h-20 md:w-20 md:text-xl  ", {
+    className: cx("text-green after:bg-gray-light before:bg-gray-light grid h-10 w-10 flex-none place-content-center justify-items-center rounded-full border-2 text-sm font-bold after:absolute after:bottom-0 after:w-0.5 after:translate-x-1/2 group-last:after:hidden md:h-20 md:w-20 md:text-xl", {
       "before:absolute before:top-0 before:bottom-1/2 before:w-0.5 before:-translate-y-5 before:translate-x-1/2 after:top-1/2 after:translate-y-5 group-first:before:hidden before:md:-translate-y-10 after:md:translate-y-10": align === "center",
       "after:top-10 after:-bottom-8 after:md:-bottom-12 after:md:top-20": align === "top"
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "description": "OBOS Grunnmuren design system React components",
   "license": "MIT",
   "repository": {
@@ -17,26 +17,26 @@
   ],
   "types": "./dist/index.d.ts",
   "devDependencies": {
-    "@babel/core": "7.20.2",
-    "@storybook/addon-controls": "6.5.14",
-    "@storybook/addon-docs": "6.5.14",
+    "@babel/core": "7.20.7",
+    "@storybook/addon-controls": "6.5.15",
+    "@storybook/addon-docs": "6.5.15",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/builder-webpack5": "6.5.14",
-    "@storybook/manager-webpack5": "6.5.14",
-    "@storybook/react": "6.5.14",
-    "@types/react": "18.0.25",
-    "@types/react-dom": "18.0.9",
+    "@storybook/builder-webpack5": "6.5.15",
+    "@storybook/manager-webpack5": "6.5.15",
+    "@storybook/react": "6.5.15",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.10",
     "@vitejs/plugin-react": "1.3.2",
-    "postcss": "8.4.19",
+    "postcss": "8.4.20",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "require-from-string": "2.0.2",
     "rimraf": "3.0.2",
     "tailwindcss": "3.2.4",
-    "type-fest": "3.3.0",
+    "type-fest": "3.5.0",
     "vite": "2.9.15",
     "webpack": "5.75.0",
-    "@obosbbl/grunnmuren-tailwind": "0.8.3"
+    "@obosbbl/grunnmuren-tailwind": "0.8.4"
   },
   "dependencies": {
     "@seznam/compose-react-refs": "1.0.6",
@@ -46,7 +46,7 @@
     "@obosbbl/grunnmuren-icons": "^0.5.1"
   },
   "peerDependencies": {
-    "@obosbbl/grunnmuren-tailwind": "^0.8.3",
+    "@obosbbl/grunnmuren-tailwind": "^0.8.4",
     "react": "^18"
   },
   "peerDependenciesMeta": {