@obosbbl/grunnmuren-react 1.8.0 → 1.10.0

package/dist/Accordion/stories/Accordion.stories.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
+export default _default;
+export declare const Controlled: () => JSX.Element;
+export declare const Uncontrolled: () => JSX.Element;

package/dist/Alert/stories/Alert.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => JSX.Element;

package/dist/Banner/stories/Banner.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => JSX.Element;

package/dist/Button/stories/Button.stories.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+declare const Composition: {
+    readonly Text: "Text";
+    readonly Icon: "Icon";
+    readonly TextIcon: "Text Icon";
+    readonly IconText: "Icon Text";
+};
+type CompositionValue = (typeof Composition)[keyof typeof Composition];
+declare const _default: {
+    title: string;
+    argTypes: {
+        composition: {
+            options: ("Text" | "Icon" | "Text Icon" | "Icon Text")[];
+            control: string;
+            defaultValue: "Text";
+        };
+        disabled: {
+            control: string;
+            defaultValue: boolean;
+        };
+        loading: {
+            control: string;
+            defaultValue: boolean;
+        };
+    };
+};
+export default _default;
+export declare const Default: (props: {
+    composition: CompositionValue;
+    disabled: boolean;
+    loading: boolean;
+}) => JSX.Element;

package/dist/Campaign/Campaign.d.ts

@@ -13,13 +13,12 @@ interface CampaignProps<T extends React.ElementType> {
      */
     rightAlignBody?: boolean;
 }
-declare const Campaign: {
-    <T extends import("react").ElementType<any> = "div">(props: CampaignProps<T> & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<T>>, keyof CampaignProps<T>>): JSX.Element;
-    Body: (props: CampaignBodyProps) => JSX.Element;
-    Image: (props: CampaignImageProps) => JSX.Element;
-};
 interface CampaignBodyProps extends React.ComponentPropsWithoutRef<'div'> {
 }
 interface CampaignImageProps extends React.ComponentPropsWithoutRef<'img'> {
 }
+declare const Campaign: import("react").ForwardRefExoticComponent<Pick<CampaignProps<import("react").ElementType<any>> & Omit<Pick<any, string | number | symbol>, keyof CampaignProps<T>>, string | number | symbol> & import("react").RefAttributes<HTMLDivElement>> & {
+    Body: import("react").ForwardRefExoticComponent<CampaignBodyProps & import("react").RefAttributes<HTMLDivElement>>;
+    Image: import("react").ForwardRefExoticComponent<CampaignImageProps & import("react").RefAttributes<HTMLImageElement>>;
+};
 export { Campaign };

package/dist/Campaign/stories/Campaign.stories.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
+export default _default;
+export declare const Default: () => JSX.Element;
+export declare const WithCustomImageComponent: () => JSX.Element;

package/dist/Card/Card.d.ts

@@ -5,4 +5,4 @@ export interface CardProps<T extends React.ElementType> {
     /** @default white */
     bgColor?: 'white' | 'gray';
 }
-export declare const Card: <T extends import("react").ElementType<any> = "div">(props: CardProps<T> & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<T>>, keyof CardProps<T>>) => JSX.Element;
+export declare const Card: import("react").ForwardRefExoticComponent<Pick<CardProps<import("react").ElementType<any>> & Omit<Pick<any, string | number | symbol>, keyof CardProps<T>>, string | number | symbol> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Card/CardContent.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 interface CardContentProps extends React.ComponentPropsWithoutRef<'div'> {
 }
-export declare const CardContent: (props: CardContentProps) => JSX.Element;
+export declare const CardContent: import("react").ForwardRefExoticComponent<CardContentProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/Card/CardImage.d.ts

@@ -3,5 +3,5 @@ interface CardImageProps extends React.ComponentPropsWithoutRef<'img'> {
     width: number;
     height: number;
 }
-export declare const CardImage: (props: CardImageProps) => JSX.Element;
+export declare const CardImage: import("react").ForwardRefExoticComponent<CardImageProps & import("react").RefAttributes<HTMLImageElement>>;
 export {};

package/dist/Card/CardList.d.ts

@@ -3,5 +3,5 @@ import { BlockBackgroundColor } from '../hooks';
 interface CardListProps extends React.ComponentPropsWithoutRef<'div'> {
     bgColor?: BlockBackgroundColor;
 }
-export declare const CardList: (props: CardListProps) => JSX.Element;
+export declare const CardList: import("react").ForwardRefExoticComponent<CardListProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/Card/stories/Card.stories.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { CardProps } from '../../';
+declare const _default: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        bgColor: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    (props: CardProps<'div'>): JSX.Element;
+    args: {
+        bgColor: string;
+    };
+};
+export declare const Link: {
+    (props: CardProps<'div'>): JSX.Element;
+    args: {
+        bgColor: string;
+    };
+};
+export declare const CardList: {
+    (): JSX.Element;
+    parameters: {
+        layout: string;
+    };
+};

package/dist/Checkbox/stories/Checkbox.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare const metadata: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
+export default metadata;
+export declare const Default: () => JSX.Element;

package/dist/Chip/stories/Chip.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => JSX.Element;

package/dist/Footer/stories/Footer.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => JSX.Element;

package/dist/Form/stories/Form.stories.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+declare const metadata: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
+export default metadata;
+export declare const Label: () => JSX.Element;
+export declare const ErrorMessage: () => JSX.Element;
+export declare const Success: () => JSX.Element;
+export declare const HelperText: () => JSX.Element;
+export declare const Form: () => JSX.Element;
+export declare const FormError: () => JSX.Element;

package/dist/Hero/stories/Hero.stories.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { HeroProps } from '../../';
+declare const metadata: {
+    title: string;
+    argTypes: {
+        contentPosition: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        bgColor: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default metadata;
+export declare function WithImage(props: HeroProps): JSX.Element;
+export declare namespace WithImage {
+    var args: {
+        readonly contentPosition: "below-center";
+        readonly bgColor: "white";
+    };
+}
+export declare function WithoutImage(props: HeroProps): JSX.Element;
+export declare namespace WithoutImage {
+    var args: {
+        contentPosition: string;
+        bgColor: string;
+    };
+}

package/dist/Input/stories/Input.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare const metadata: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
+export default metadata;
+export declare const Default: () => JSX.Element;

package/dist/Navbar/stories/Navbar.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => JSX.Element;

package/dist/Pagination/stories/Pagination.stories.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+declare const metadata: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        pageCount: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+            };
+        };
+    };
+};
+export default metadata;
+export declare const Default: {
+    (props: {
+        pageCount: number;
+    }): JSX.Element;
+    args: {
+        pageCount: number;
+    };
+};

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/Radio/stories/Radio.stories.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+declare const metadata: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
+export default metadata;
+export declare const Uncontrolled: () => JSX.Element;
+export declare const Controlled: () => JSX.Element;
+export declare const WithLabelAndHelpText: () => JSX.Element;
+export declare const WithLongLabelThatBreaksLines: () => JSX.Element;
+export declare const WithErrorText: () => JSX.Element;

package/dist/Select/stories/Select.stories.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { SelectProps } from '../';
+declare const metadata: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        description: {
+            defaultValue: string;
+            control: string;
+        };
+        size: {
+            defaultValue: string;
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        required: {
+            defaultValue: boolean;
+            control: string;
+        };
+    };
+};
+export default metadata;
+export declare const Default: (props: SelectProps) => JSX.Element;

package/dist/Snackbar/stories/Snackbar.stories.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare const metadata: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
+export default metadata;
+export declare const Default: () => JSX.Element;
+export declare const SnackbarWithContent: () => JSX.Element;

package/dist/StepList/stories/StepList.stories.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { StepListProps } from '../..';
+declare const metadata: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        align: {
+            defaultValue: string;
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default metadata;
+export declare const Numbered: (props: StepListProps) => JSX.Element;
+export declare const Icons: (props: StepListProps) => JSX.Element;

package/dist/TextArea/stories/TextArea.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare const metadata: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
+export default metadata;
+export declare const Default: () => JSX.Element;

package/dist/TextField/stories/TextField.stories.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare const metadata: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
+export default metadata;
+export declare const Default: () => JSX.Element;
+export declare const Validation: () => JSX.Element;

package/dist/grunnmuren.es.js

@@ -488,7 +488,7 @@ function deeplyWrapStrings(children) {
 }
 const ButtonColorContext = createContext("standard");
 const CampaignContext = createContext(true);
-const Campaign = (props) => {
+const CampaignInner = (props, ref) => {
   const _a = props, {
     as: Component = "div",
     body: Body,
@@ -505,23 +505,26 @@ const Campaign = (props) => {
   return /* @__PURE__ */ jsxs(Component, __spreadProps(__spreadValues({
     className: cx(className, "grid gap-8 md:grid-flow-col md:grid-cols-[50%,50%] md:gap-0")
   }, rest), {
+    ref,
     children: [/* @__PURE__ */ jsx(CampaignContext.Provider, {
       value: rightAlignBody,
       children: Image
     }), Body]
   }));
 };
-const CampaignBody = (props) => {
+const CampaignBase = forwardRef(CampaignInner);
+const CampaignBody = forwardRef((props, ref) => {
   const _a = props, {
     className
   } = _a, rest = __objRest(_a, [
     "className"
   ]);
   return /* @__PURE__ */ jsx("div", __spreadValues({
-    className: cx(className, "md:mx-18 self-center")
+    className: cx(className, "md:mx-18 self-center"),
+    ref
   }, rest));
-};
-const CampaignImage = (props) => {
+});
+const CampaignImage = forwardRef((props, ref) => {
   const _a = props, {
     className: classNameProp,
     children
@@ -534,16 +537,20 @@ const CampaignImage = (props) => {
   if (isValidElement(children)) {
     const child = Children.only(children);
     return cloneElement(child, __spreadValues({
-      className
+      className,
+      ref
     }, rest));
   }
   return /* @__PURE__ */ jsx("img", __spreadValues({
-    className
+    className,
+    ref
   }, rest));
-};
-Campaign.Body = CampaignBody;
-Campaign.Image = CampaignImage;
-const Card = (props) => {
+});
+const Campaign = Object.assign({}, CampaignBase, {
+  Body: CampaignBody,
+  Image: CampaignImage
+});
+const CardInner = (props, ref) => {
   const _a = props, {
     as: Component = "div",
     className,
@@ -553,25 +560,30 @@ const Card = (props) => {
     "className",
     "bgColor"
   ]);
-  return /* @__PURE__ */ jsx(Component, __spreadValues({
+  return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({
     className: cx(className, "relative overflow-hidden rounded-3xl", {
       "border-2 border-solid bg-white": bgColor === "white",
       "bg-gray-light": bgColor === "gray"
     })
-  }, rest));
+  }, rest), {
+    ref
+  }));
 };
-const CardImage = (props) => {
+const Card = forwardRef(CardInner);
+const CardImage = forwardRef((props, ref) => {
   const _a = props, {
     className
   } = _a, rest = __objRest(_a, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx("img", __spreadValues({
+  return /* @__PURE__ */ jsx("img", __spreadProps(__spreadValues({
     className: cx(className, "w-full object-cover"),
     loading: "lazy"
-  }, rest));
-};
-const CardList = (props) => {
+  }, rest), {
+    ref
+  }));
+});
+const CardList = forwardRef((props, ref) => {
   const _a = props, {
     bgColor: bgColorProp,
     className
@@ -582,21 +594,25 @@ const CardList = (props) => {
   const bgColor = useBlockBackgroundColor(bgColorProp);
   return /* @__PURE__ */ jsx("div", {
     className: cx(bgColor, className),
-    children: /* @__PURE__ */ jsx("div", __spreadValues({
+    children: /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({
       className: "container grid grid-cols-1 gap-12 py-16 md:grid-cols-2 md:py-20 lg:py-24"
-    }, rest))
+    }, rest), {
+      ref
+    }))
   });
-};
-const CardContent = (props) => {
+});
+const CardContent = forwardRef((props, ref) => {
   const _a = props, {
     className
   } = _a, rest = __objRest(_a, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx("div", __spreadValues({
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({
     className: cx(className, "p-8 md:px-10")
-  }, rest));
-};
+  }, rest), {
+    ref
+  }));
+});
 const CardLinkOverlay = forwardRef((props, ref) => {
   const _a = props, {
     className
@@ -1314,7 +1330,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 +1347,13 @@ const Radio = forwardRef((props, ref) => {
     name,
     onChange,
     required,
-    value
+    value,
+    error
   } = useContext(RadioContext);
   return /* @__PURE__ */ jsxs("label", {
     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 +1370,8 @@ const RadioGroup = forwardRef((props, ref) => {
     className,
     defaultValue,
     description,
+    error,
+    id: idProp,
     children,
     label,
     name,
@@ -1362,6 +1382,8 @@ const RadioGroup = forwardRef((props, ref) => {
     "className",
     "defaultValue",
     "description",
+    "error",
+    "id",
     "children",
     "label",
     "name",
@@ -1379,15 +1401,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,10 +1425,14 @@ 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
       })]
     }))
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "description": "OBOS Grunnmuren design system React components",
   "license": "MIT",
   "repository": {
@@ -17,23 +17,23 @@
   ],
   "types": "./dist/index.d.ts",
   "devDependencies": {
-    "@babel/core": "7.20.5",
-    "@storybook/addon-controls": "6.5.14",
-    "@storybook/addon-docs": "6.5.14",
+    "@babel/core": "7.20.12",
+    "@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",
+    "@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.9",
+    "@types/react-dom": "18.0.10",
     "@vitejs/plugin-react": "1.3.2",
-    "postcss": "8.4.19",
+    "postcss": "8.4.21",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "require-from-string": "2.0.2",
-    "rimraf": "3.0.2",
+    "rimraf": "4.0.7",
     "tailwindcss": "3.2.4",
-    "type-fest": "3.3.0",
+    "type-fest": "3.5.2",
     "vite": "2.9.15",
     "webpack": "5.75.0",
     "@obosbbl/grunnmuren-tailwind": "0.8.4"