@obosbbl/grunnmuren-react 1.7.0 → 1.8.0

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]
@@ -1333,7 +1333,7 @@ const Radio = forwardRef((props, ref) => {
     value
   } = 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",
       defaultChecked: !isControlled ? rest.value === defaultValue : void 0,
@@ -1404,22 +1404,77 @@ const RadioGroup = forwardRef((props, ref) => {
     }))
   });
 });
-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 +1576,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.8.0",
   "description": "OBOS Grunnmuren design system React components",
   "license": "MIT",
   "repository": {
@@ -17,14 +17,14 @@
   ],
   "types": "./dist/index.d.ts",
   "devDependencies": {
-    "@babel/core": "7.20.2",
+    "@babel/core": "7.20.5",
     "@storybook/addon-controls": "6.5.14",
     "@storybook/addon-docs": "6.5.14",
     "@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": "18.0.26",
     "@types/react-dom": "18.0.9",
     "@vitejs/plugin-react": "1.3.2",
     "postcss": "8.4.19",
@@ -36,7 +36,7 @@
     "type-fest": "3.3.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": {