@obosbbl/grunnmuren-react 1.1.0 → 1.2.0

package/dist/Radio/Radio.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface RadioProps extends React.ComponentPropsWithoutRef<'input'> {
+    children: React.ReactNode;
+}
+export declare const Radio: (props: RadioProps) => JSX.Element;

package/dist/Radio/RadioContext.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const RadioContext: import("react").Context<{
+    defaultValue?: string | undefined;
+    isControlled: boolean;
+    name?: string | undefined;
+    onChange?(event: React.ChangeEvent<HTMLInputElement>): void;
+    required?: boolean | undefined;
+    value?: string | undefined;
+}>;

package/dist/Radio/RadioGroup.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export interface RadioGroupProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'> {
+    /** The value of the radio button to be initially selected. For uncontrolled usage */
+    defaultValue?: string;
+    /** Help text for the radio group. */
+    description?: string;
+    /** The `name` attribute for the radio buttons. */
+    name: string;
+    /** The label for the radio group. */
+    label?: string;
+    /** Event handler called when the value changes. */
+    onChange?(value: string): void;
+    /** Whether a value selection is required. */
+    required?: boolean;
+    /** The value of the selected radio button. For controlled usage */
+    value?: string;
+}
+export declare const RadioGroup: (props: RadioGroupProps) => JSX.Element;

package/dist/Radio/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Radio';
+export * from './RadioGroup';

package/dist/grunnmuren.es.js

@@ -51,6 +51,19 @@ var __spreadValues2 = (a, b) => {
   return a;
 };
 var __spreadProps2 = (a, b) => __defProps2(a, __getOwnPropDescs2(b));
+const ChevronDown = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
+  width: "1.25em",
+  height: "1.25em",
+  fill: "none",
+  viewBox: "0 0 29 17",
+  role: "img",
+  "aria-hidden": props["aria-label"] == null
+}, props), {
+  children: /* @__PURE__ */ jsx("path", {
+    fill: "currentColor",
+    d: "M0 4.31662L4.31662 0L14.3752 10.0484L24.4337 0L28.7503 4.31662L17.2563 15.8106C16.4929 16.5722 15.4586 16.9999 14.3803 16.9999C13.3019 16.9999 12.2676 16.5722 11.5042 15.8106L0 4.31662Z"
+  })
+}));
 const Close = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
   width: "1.25em",
   height: "1.25em",
@@ -311,7 +324,7 @@ const Button = forwardRef((props, ref) => {
   const colorFromContext = useContext(ButtonColorContext);
   const color = colorFromProp != null ? colorFromProp : colorFromContext;
   const buttonVariation = buttonVariations[`${color}-${variant}`];
-  const classes = classNames(className, buttonVariation, "button relative no-underline inline-block border-solid border-2 px-6 py-2 rounded-xl transition-all duration-200 font-medium w-fit disabled:pointer-events-none disabled:text-black disabled:bg-gray-light disabled:border-gray-light hover:rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-black ring-offset-2");
+  const classes = classNames(className, buttonVariation, "button");
   return /* @__PURE__ */ jsx(Fragment, {
     children: href ? /* @__PURE__ */ jsx("a", __spreadProps(__spreadValues({}, rest), {
       href,
@@ -466,7 +479,7 @@ const Checkbox = forwardRef((props, ref) => {
       className: classNames(className, "inline-flex cursor-pointer items-center"),
       children: [/* @__PURE__ */ jsx("input", __spreadProps(__spreadValues({
         id,
-        className: classNames("checkbox checked:bg-green checked:border-green bg-whit mr-3 grid h-[1.25em] w-[1.25em] flex-none cursor-pointer appearance-none place-content-center rounded border-2 border-solid text-white focus:outline-none focus:ring-2", {
+        className: classNames("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", {
           "border-gray-dark focus:ring-black": !error,
           "border-red focus:ring-red": !!error
         }),
@@ -961,6 +974,101 @@ const NavbarExpandedMobileContent = (props) => {
     children: props.children
   });
 };
+const RadioContext = createContext({
+  defaultValue: void 0,
+  isControlled: false,
+  name: void 0,
+  onChange() {
+  },
+  required: false,
+  value: void 0
+});
+const Radio = (props) => {
+  const _a = props, {
+    children,
+    className
+  } = _a, rest = __objRest(_a, [
+    "children",
+    "className"
+  ]);
+  const {
+    defaultValue,
+    isControlled,
+    name,
+    onChange,
+    required,
+    value
+  } = useContext(RadioContext);
+  return /* @__PURE__ */ jsxs("label", {
+    className: classNames(className, "cursor-pointer"),
+    children: [/* @__PURE__ */ jsx("input", __spreadValues({
+      className: "radio",
+      defaultChecked: !isControlled ? rest.value === defaultValue : void 0,
+      checked: isControlled ? rest.value === value : void 0,
+      name,
+      onChange: isControlled ? onChange : void 0,
+      required,
+      type: "radio"
+    }, rest)), children]
+  });
+};
+const RadioGroup = (props) => {
+  const isControlled = "value" in props;
+  const _a = props, {
+    className,
+    defaultValue,
+    description,
+    children,
+    label,
+    name,
+    onChange: onChangeProp,
+    required,
+    value
+  } = _a, rest = __objRest(_a, [
+    "className",
+    "defaultValue",
+    "description",
+    "children",
+    "label",
+    "name",
+    "onChange",
+    "required",
+    "value"
+  ]);
+  const onChange = useCallback((event) => {
+    const nextValue = event.target.value;
+    onChangeProp == null ? void 0 : onChangeProp(nextValue);
+  }, [onChangeProp]);
+  const group = useMemo(() => ({
+    defaultValue,
+    isControlled,
+    name,
+    onChange,
+    required,
+    value
+  }), [defaultValue, isControlled, name, onChange, required, value]);
+  const groupId = useId();
+  const labelId = `${groupId}:label`;
+  const helpId = `${groupId}:help`;
+  return /* @__PURE__ */ jsx(RadioContext.Provider, {
+    value: group,
+    children: /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({
+      "aria-describedby": description ? helpId : void 0,
+      "aria-labelledby": label ? labelId : void 0,
+      className: classNames(className, "flex flex-col gap-4"),
+      role: "radiogroup"
+    }, rest), {
+      children: [label && /* @__PURE__ */ jsx(FormLabel, {
+        id: labelId,
+        isRequired: required,
+        children: label
+      }), children, /* @__PURE__ */ jsx(FormHelperText, {
+        id: helpId,
+        children: description
+      })]
+    }))
+  });
+};
 const Snackbar = (props) => {
   const {
     heading,
@@ -1140,4 +1248,23 @@ const TextField = forwardRef((props, ref) => {
     })]
   });
 });
-export { Alert, Banner, BannerImage, Button, ButtonColorContext, Campaign, Card, CardContent, CardImage, CardLinkOverlay, CardList, Checkbox, Footer, Form, FormError, FormErrorMessage, FormHeading, FormHelperText, FormLabel, FormSuccess, Hero, HeroActions, HeroContent, HeroContext, HeroImage, Input, Link, Navbar, NavbarCollapsible, NavbarContent, NavbarExpandedMobileContent, NavbarItem, NavbarItems, Snackbar, SnackbarButton, SnackbarContent, StepList, StepListItem, TextArea, TextField, assignRef, useBlockBackgroundColor, useComposedRefs, useFallbackId, useFormControlValidity, useMedia, usePrefersReducedMotion, useScreenMaxWidthMd };
+const Select = forwardRef((props, ref) => {
+  const _a = props, {
+    children,
+    className
+  } = _a, rest = __objRest(_a, [
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxs("div", {
+    className: classNames("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",
+      ref,
+      children
+    })), /* @__PURE__ */ jsx(ChevronDown, {
+      className: "absolute top-4 right-4"
+    })]
+  });
+});
+export { Alert, Banner, BannerImage, Button, ButtonColorContext, Campaign, Card, CardContent, CardImage, CardLinkOverlay, CardList, Checkbox, Footer, Form, FormError, FormErrorMessage, FormHeading, FormHelperText, FormLabel, FormSuccess, Hero, HeroActions, HeroContent, HeroContext, HeroImage, Input, Link, Navbar, NavbarCollapsible, NavbarContent, NavbarExpandedMobileContent, NavbarItem, NavbarItems, Radio, RadioGroup, Select, Snackbar, SnackbarButton, SnackbarContent, StepList, StepListItem, TextArea, TextField, assignRef, useBlockBackgroundColor, useComposedRefs, useFallbackId, useFormControlValidity, useMedia, usePrefersReducedMotion, useScreenMaxWidthMd };

package/dist/index.d.ts

@@ -10,8 +10,10 @@ export * from './Hero';
 export * from './Input';
 export * from './Link';
 export * from './Navbar';
+export * from './Radio';
 export * from './Snackbar';
 export * from './StepList';
 export * from './TextArea';
 export * from './TextField';
 export * from './hooks';
+export * from './Select';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "OBOS Grunnmuren design system React components",
   "license": "MIT",
   "repository": {
@@ -17,32 +17,32 @@
   ],
   "types": "./dist/index.d.ts",
   "devDependencies": {
-    "@babel/core": "7.18.6",
-    "@obosbbl/grunnmuren-tailwind": "^0.4.1",
-    "@storybook/addon-controls": "6.5.9",
-    "@storybook/addon-docs": "6.5.9",
+    "@babel/core": "7.18.10",
+    "@obosbbl/grunnmuren-tailwind": "0.5.0",
+    "@storybook/addon-controls": "6.5.10",
+    "@storybook/addon-docs": "6.5.10",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/builder-webpack5": "6.5.9",
-    "@storybook/manager-webpack5": "6.5.9",
-    "@storybook/react": "6.5.9",
-    "@types/react": "18.0.14",
-    "@types/react-dom": "18.0.5",
+    "@storybook/builder-webpack5": "6.5.10",
+    "@storybook/manager-webpack5": "6.5.10",
+    "@storybook/react": "6.5.10",
+    "@types/react": "18.0.17",
+    "@types/react-dom": "18.0.6",
     "@vitejs/plugin-react": "1.3.2",
-    "postcss": "8.4.14",
+    "postcss": "8.4.16",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "require-from-string": "2.0.2",
-    "tailwindcss": "3.1.4",
-    "vite": "2.9.13",
-    "webpack": "5.73.0"
+    "tailwindcss": "3.1.8",
+    "vite": "2.9.15",
+    "webpack": "5.74.0"
   },
   "dependencies": {
     "@obosbbl/grunnmuren-icons": "^0.3.0",
-    "clsx": "1.2.0"
+    "clsx": "1.2.1"
   },
   "peerDependencies": {
     "react": "^18",
-    "@obosbbl/grunnmuren-tailwind": "^0.4.1"
+    "@obosbbl/grunnmuren-tailwind": "^0.5.0"
   },
   "peerDependenciesMeta": {
     "@obosbbl/grunnmuren-tailwind": {