@obosbbl/grunnmuren-react 1.9.0 → 1.11.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/Hero.d.ts

@@ -6,7 +6,7 @@ export declare const HeroContext: import("react").Context<{
 }>;
 export type HeroColor = 'green' | 'blue' | 'white';
 export type HeroContentPosition = 'below-center' | 'below-left' | 'top-left' | 'bottom-left' | 'top-right' | 'bottom-right' | 'center' | 'vertical-split';
-export interface HeroProps {
+export interface HeroProps extends React.ComponentPropsWithoutRef<'div'> {
     /** @default white */
     bgColor?: HeroColor;
     className?: string;
@@ -18,4 +18,4 @@ export interface HeroProps {
     /** Instance of HeroImage */
     image?: React.ReactNode;
 }
-export declare const Hero: (props: HeroProps) => JSX.Element;
+export declare const Hero: import("react").ForwardRefExoticComponent<HeroProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Hero/HeroActions.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-interface HeroActionsProps {
+interface HeroActionsProps extends React.ComponentPropsWithoutRef<'div'> {
     className?: string;
     children?: React.ReactNode;
 }
-export declare const HeroActions: (props: HeroActionsProps) => JSX.Element;
+export declare const HeroActions: import("react").ForwardRefExoticComponent<HeroActionsProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/Hero/HeroContent.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-interface HeroContentProps {
+interface HeroContentProps extends React.ComponentPropsWithoutRef<'div'> {
     children?: React.ReactNode;
     className?: string;
     heading: string;
     description?: string;
 }
-export declare const HeroContent: (props: HeroContentProps) => JSX.Element;
+export declare const HeroContent: import("react").ForwardRefExoticComponent<HeroContentProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/Hero/HeroImage.d.ts

@@ -3,6 +3,7 @@ interface HeroImageProps {
     src: string;
     mdSrc: string;
     alt?: string;
+    className?: string;
 }
-export declare const HeroImage: (props: HeroImageProps) => JSX.Element;
+export declare const HeroImage: import("react").ForwardRefExoticComponent<HeroImageProps & import("react").RefAttributes<HTMLPictureElement>>;
 export {};

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/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
@@ -840,7 +856,7 @@ const HeroContext = createContext({
   contentPosition: "below-center",
   hasImage: false
 });
-const Hero = (props) => {
+const Hero = forwardRef((props, ref) => {
   const _a = props, {
     bgColor = "white",
     children,
@@ -873,23 +889,25 @@ const Hero = (props) => {
           gridTemplateAreas: '"hero"'
         } : void 0
       }, rest), {
+        ref,
         children: [image, children]
       }))
     })
   });
-};
-const HeroImage = (props) => {
+});
+const HeroImage = forwardRef((props, ref) => {
   const {
     contentPosition
   } = useContext(HeroContext);
   return /* @__PURE__ */ jsxs("picture", {
-    className: cx("aspect-w-6 aspect-h-7 block", {
+    className: cx(props.className, "aspect-w-6 aspect-h-7 block", {
       "sm:aspect-w-8 sm:aspect-h-4": contentPosition !== "vertical-split",
       "sm:aspect-w-8 sm:aspect-h-8": contentPosition === "vertical-split"
     }),
     style: contentPosition !== "vertical-split" && contentPosition !== "below-center" && contentPosition !== "below-left" ? {
       gridArea: "hero"
     } : void 0,
+    ref,
     children: [/* @__PURE__ */ jsx("source", {
       media: "(min-width: 768px)",
       srcSet: props.mdSrc
@@ -900,8 +918,8 @@ const HeroImage = (props) => {
       alt: props.alt
     })]
   });
-};
-const HeroContent = (props) => {
+});
+const HeroContent = forwardRef((props, ref) => {
   const {
     bgColor,
     contentPosition,
@@ -941,15 +959,16 @@ const HeroContent = (props) => {
     style: usesGridArea ? {
       gridArea: "hero"
     } : void 0,
+    ref,
     children: [/* @__PURE__ */ jsx("h1", {
       children: heading
     }), description && /* @__PURE__ */ jsx("p", {
-      className: "text-lg md:text-xl",
+      className: "text-lg font-semibold md:text-xl",
       children: description
     }), children]
   }));
-};
-const HeroActions = (props) => {
+});
+const HeroActions = forwardRef((props, ref) => {
   const _a = props, {
     className
   } = _a, rest = __objRest(_a, [
@@ -958,12 +977,14 @@ const HeroActions = (props) => {
   const {
     contentPosition
   } = useContext(HeroContext);
-  return /* @__PURE__ */ jsx("div", __spreadValues({
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({
     className: cx(className, "grid items-center justify-center justify-items-center gap-4 md:grid-flow-col", {
       "md:justify-start": contentPosition === "vertical-split" || contentPosition === "below-left"
     })
-  }, rest));
-};
+  }, rest), {
+    ref
+  }));
+});
 const Input = forwardRef((props, ref) => {
   const _a = props, {
     className,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "1.9.0",
+  "version": "1.11.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.7",
+    "@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.15",
     "@storybook/manager-webpack5": "6.5.15",
     "@storybook/react": "6.5.15",
-    "@types/react": "18.0.26",
+    "@types/react": "18.0.27",
     "@types/react-dom": "18.0.10",
     "@vitejs/plugin-react": "1.3.2",
-    "postcss": "8.4.20",
+    "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.1.2",
     "tailwindcss": "3.2.4",
-    "type-fest": "3.5.0",
+    "type-fest": "3.5.3",
     "vite": "2.9.15",
     "webpack": "5.75.0",
     "@obosbbl/grunnmuren-tailwind": "0.8.4"