@obosbbl/grunnmuren-react 1.14.9 → 2.0.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 OBOS
+Copyright (c) 2023 OBOS
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/Button/Button.d.mts

@@ -0,0 +1,71 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { VariantProps } from 'cva';
+
+/**
+ * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "tertiary" | undefined;
+    color?: "default" | "mint" | "white" | undefined;
+} & ({
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+    className?: undefined;
+} | {
+    class?: undefined;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+})) | undefined) => string;
+type ButtonProps = VariantProps<typeof buttonVariants> & {
+    className?: string;
+    children: React.ReactNode;
+};
+declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
+
+export { Button, type ButtonProps, buttonVariants };

package/dist/Button/Button.d.ts

@@ -1,16 +1,71 @@
-import React from 'react';
-export type ButtonColor = 'standard' | 'white' | 'light-green' | 'mint';
-export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
-    children: React.ReactNode;
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { VariantProps } from 'cva';
+
+/**
+ * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "tertiary" | undefined;
+    color?: "default" | "mint" | "white" | undefined;
+} & ({
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+    className?: undefined;
+} | {
+    class?: undefined;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+})) | undefined) => string;
+type ButtonProps = VariantProps<typeof buttonVariants> & {
     className?: string;
-    color?: 'standard' | 'white' | 'light-green' | 'mint';
-    disabled?: boolean;
-    href?: string;
-    /** Renders the button in a loading state */
-    loading?: boolean;
-    /** @default button */
-    type?: 'button' | 'submit' | 'reset';
-    /** @default primary */
-    variant?: 'primary' | 'secondary';
-}
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+    children: React.ReactNode;
+};
+declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
+
+export { Button, type ButtonProps, buttonVariants };

package/dist/Button/Button.mjs

@@ -0,0 +1,86 @@
+import { jsx } from 'react/jsx-runtime';
+import { cva } from 'cva';
+
+const buttonVariants = cva({
+  base: "cursor-pointer rounded-x-small px-4 py-2 font-medium transition-all duration-200 hover:rounded-[0.25rem] focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+  variants: {
+    /**
+     * The variant of the button
+     * @default primary
+     */
+    variant: {
+      primary: "border-none",
+      secondary: "border-2",
+      tertiary: "underline"
+    },
+    /**
+     * Adjusts the color of the button for usage on different backgrounds.
+     * @default default
+     */
+    color: {
+      default: "focus-visible:ring-black",
+      mint: "focus-visible:ring-mint focus-visible:ring-offset-green-dark",
+      white: "focus-visible:ring-white focus-visible:ring-offset-blue"
+    }
+  },
+  compoundVariants: [
+    {
+      color: "default",
+      variant: "primary",
+      // Darken bg by 20% on hover. The color is manually crafted
+      className: "bg-green text-white hover:bg-[#006c4e] active:bg-[#007352]"
+    },
+    {
+      color: "default",
+      variant: "secondary",
+      className: "border-green bg-white text-black"
+    },
+    {
+      color: "mint",
+      variant: "primary",
+      // Darken bg by 20% on hover. The color is manually crafted
+      className: "active:[#9ddac6] bg-mint text-black hover:bg-[#8dd4bd]"
+    },
+    {
+      color: "mint",
+      variant: "secondary",
+      className: "border-mint text-mint"
+    },
+    {
+      color: "mint",
+      variant: "tertiary",
+      className: "text-mint"
+    },
+    {
+      color: "white",
+      variant: "primary",
+      className: "bg-white text-black hover:bg-sky active:bg-sky-light"
+    },
+    {
+      color: "white",
+      variant: "secondary",
+      className: "border-white text-white"
+    },
+    {
+      color: "white",
+      variant: "tertiary",
+      className: "text-white"
+    }
+  ],
+  defaultVariants: {
+    variant: "primary",
+    color: "default"
+  }
+});
+function Button(props) {
+  const { className, variant, color, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: buttonVariants({ className, color, variant }),
+      ...rest
+    }
+  );
+}
+
+export { Button, buttonVariants };

package/package.json

@@ -1,63 +1,40 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "1.14.9",
-  "description": "OBOS Grunnmuren design system React components",
+  "version": "2.0.0",
+  "description": "Grunnmuren components in React",
   "license": "MIT",
-  "repository": {
-    "url": "https://github.com/code-obos/grunnmuren",
-    "directory": "packages/react"
-  },
+  "type": "module",
   "exports": {
-    "types": "./dist/index.d.ts",
-    "import": "./dist/grunnmuren.mjs"
+    "./button": {
+      "types": "./dist/Button/Button.d.ts",
+      "default": "./dist/Button/Button.mjs"
+    }
   },
+  "sideEffects": false,
   "files": [
     "dist"
   ],
-  "types": "./dist/index.d.ts",
-  "devDependencies": {
-    "@storybook/addon-controls": "7.4.5",
-    "@storybook/addon-docs": "7.4.5",
-    "@storybook/addon-styling": "1.3.7",
-    "@storybook/builder-vite": "7.4.4",
-    "@storybook/react": "7.4.5",
-    "@storybook/react-vite": "7.4.4",
-    "@types/react": "18.2.22",
-    "@types/react-dom": "18.2.7",
-    "@vitejs/plugin-react": "4.0.4",
-    "autoprefixer": "10.4.16",
-    "postcss": "8.4.30",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "require-from-string": "2.0.2",
-    "rimraf": "5.0.1",
-    "storybook": "7.4.5",
-    "tailwindcss": "3.3.3",
-    "type-fest": "4.3.1",
-    "vite": "4.4.9",
-    "@obosbbl/grunnmuren-tailwind": "0.9.1"
+  "repository": {
+    "url": "https://github.com/code-obos/grunnmuren"
   },
   "dependencies": {
-    "@react-hookz/web": "23.1.0",
-    "clsx": "2.0.0",
-    "react-collapsed": "4.0.4",
-    "react-merge-refs": "2.0.2",
-    "@obosbbl/grunnmuren-icons": "^0.7.0"
+    "cva": "1.0.0-beta.1"
   },
   "peerDependencies": {
-    "@obosbbl/grunnmuren-tailwind": "^0.9.1",
     "react": "^18"
   },
-  "peerDependenciesMeta": {
-    "@obosbbl/grunnmuren-tailwind": {
-      "optional": true
+  "unbuild": {
+    "entries": [
+      "./src/Button/Button.tsx"
+    ],
+    "declaration": true,
+    "rollup": {
+      "esbuild": {
+        "jsx": "automatic"
+      }
     }
   },
   "scripts": {
-    "build": "pnpm run build:lib && pnpm run build:types",
-    "build:lib": "vite build",
-    "build:types": "tsc --emitDeclarationOnly --declaration && rimraf 'dist/**/stories/'",
-    "dev": "storybook dev -p 6006 --ci",
-    "build:storybook": "storybook build"
+    "build": "unbuild"
   }
 }

package/README.md

@@ -1,45 +0,0 @@
-# @obosbbl/grunnmuren-react
-
-Grunnmuren React components
-
-## Install
-
-```sh
-npm install @obosbbl/grunnmuren-react
-```
-
-You need to setup and configure [`@obosbbl/grunnmuren-tailwind`](../tailwind/) as well.
-
-## Develop
-
-Install packages in the root folder
-
-```
-cd ../..
-pnpm install
-```
-
-Build the icons
-
-```
-cd packages/icons
-pnpm run build
-```
-
-Finally, start up development server from this folder
-
-```
-pnpm dev
-```
-
-### Changeset
-
-All updates should be marked with a changeset.
-
-In the root folder, run
-
-```
-pnpm changeset
-```
-
-an followed the steps.

package/dist/Accordion/Accordion.d.ts

@@ -1,27 +0,0 @@
-import React from 'react';
-interface AccordionProps extends React.ComponentPropsWithoutRef<'div'> {
-}
-export declare const Accordion: {
-    (props: AccordionProps): import("react/jsx-runtime").JSX.Element;
-    Item: (props: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
-    Header: <T extends React.ElementType<any> = "h3">(props: AccordionHeaderProps<T> & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, "as">) => import("react/jsx-runtime").JSX.Element;
-    Content: (props: AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
-};
-export interface AccordionItemProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'> {
-    defaultOpen?: boolean;
-    open?: boolean;
-    onChange?: (open: boolean) => void;
-}
-export declare const AccordionItem: (props: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
-interface AccordionHeaderProps<T extends React.ElementType> {
-    /**
-     * The heading element that wraps the accordion item's button. Should always be an element with `role="heading"`
-     * or a HTML heading tag. Change this to an appropriate heading level for your page.
-     * @default h3 */
-    as?: T;
-}
-export declare const AccordionHeader: <T extends React.ElementType<any> = "h3">(props: AccordionHeaderProps<T> & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, "as">) => import("react/jsx-runtime").JSX.Element;
-interface AccordionContentProps extends React.ComponentPropsWithoutRef<'div'> {
-}
-export declare const AccordionContent: (props: AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/Accordion/index.d.ts

@@ -1 +0,0 @@
-export * from './Accordion';

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

@@ -1,9 +0,0 @@
-declare const _default: {
-    title: string;
-    parameters: {
-        layout: string;
-    };
-};
-export default _default;
-export declare const Controlled: () => import("react/jsx-runtime").JSX.Element;
-export declare const Uncontrolled: () => import("react/jsx-runtime").JSX.Element;

package/dist/Alert/Alert.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-export interface AlertProps {
-    className?: string;
-    children?: React.ReactNode;
-    heading: string;
-    /** @default alert */
-    severity?: 'alert' | 'info';
-}
-export declare const Alert: (props: AlertProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Alert/index.d.ts

@@ -1 +0,0 @@
-export * from './Alert';

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

@@ -1,5 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/dist/Banner/Banner.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import { BlockBackgroundColor } from '../hooks';
-interface BannerProps {
-    bgColor?: BlockBackgroundColor;
-    className?: string;
-    children: React.ReactNode;
-    heading: string;
-    image: React.ReactNode;
-}
-export declare const Banner: (props: BannerProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/Banner/BannerImage.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export interface BannerImageProps extends React.ComponentPropsWithoutRef<'img'> {
-    width: number;
-    height: number;
-}
-export declare const BannerImage: (props: BannerImageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Banner/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Banner';
-export * from './BannerImage';

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

@@ -1,5 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/dist/Button/ButtonColorContext.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import type { ButtonColor } from '.';
-export declare const ButtonColorContext: import("react").Context<ButtonColor>;

package/dist/Button/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Button';
-export * from './ButtonColorContext';

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

@@ -1,31 +0,0 @@
-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;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/Campaign/Campaign.d.ts

@@ -1,26 +0,0 @@
-/// <reference types="react" />
-export interface CampaignProps<T extends React.ElementType> {
-    /** @default div */
-    as?: T;
-    body: React.ReactElement;
-    /** Use the `body` and `image` props. */
-    children?: never;
-    image: React.ReactElement;
-    /**
-     * Setting this to false changes the ordering of the body and the image on >= medium sceens.
-     * Use this to alternate the image's positon with lists of Campaigns.
-     * @default true
-     */
-    rightAlignBody?: boolean;
-}
-export interface CampaignBodyProps extends React.ComponentPropsWithoutRef<'div'> {
-}
-export declare const CampaignBody: import("react").ForwardRefExoticComponent<CampaignBodyProps & import("react").RefAttributes<HTMLDivElement>>;
-export interface CampaignImageProps extends React.ComponentPropsWithoutRef<'img'> {
-}
-export declare const CampaignImage: import("react").ForwardRefExoticComponent<CampaignImageProps & import("react").RefAttributes<HTMLImageElement>>;
-declare const Campaign: import("react").ForwardRefExoticComponent<Omit<CampaignProps<import("react").ElementType<any>> & Omit<Omit<any, "ref">, keyof CampaignProps<T>>, "ref"> & 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/index.d.ts

@@ -1 +0,0 @@
-export * from './Campaign';

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

@@ -1,9 +0,0 @@
-declare const _default: {
-    title: string;
-    parameters: {
-        layout: string;
-    };
-};
-export default _default;
-export declare const Default: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithCustomImageComponent: () => import("react/jsx-runtime").JSX.Element;

package/dist/Card/Card.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-export interface CardProps<T extends React.ElementType> {
-    /** @default div */
-    as?: T;
-    /** @default white */
-    bgColor?: 'white' | 'gray';
-}
-export declare const Card: import("react").ForwardRefExoticComponent<Omit<CardProps<import("react").ElementType<any>> & Omit<Omit<any, "ref">, keyof CardProps<T>>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Card/CardContent.d.ts

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

package/dist/Card/CardImage.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-interface CardImageProps extends React.ComponentPropsWithoutRef<'img'> {
-    width: number;
-    height: number;
-}
-export declare const CardImage: import("react").ForwardRefExoticComponent<CardImageProps & import("react").RefAttributes<HTMLImageElement>>;
-export {};

package/dist/Card/CardLinkOverlay.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export interface CardLinkOverlayProps extends React.ComponentPropsWithoutRef<'a'> {
-}
-export declare const CardLinkOverlay: import("react").ForwardRefExoticComponent<CardLinkOverlayProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/Card/CardList.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { BlockBackgroundColor } from '../hooks';
-interface CardListProps extends React.ComponentPropsWithoutRef<'div'> {
-    bgColor?: BlockBackgroundColor;
-}
-export declare const CardList: import("react").ForwardRefExoticComponent<CardListProps & import("react").RefAttributes<HTMLDivElement>>;
-export {};

package/dist/Card/index.d.ts

@@ -1,5 +0,0 @@
-export * from './Card';
-export * from './CardImage';
-export * from './CardList';
-export * from './CardContent';
-export * from './CardLinkOverlay';

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

@@ -1,34 +0,0 @@
-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'>): import("react/jsx-runtime").JSX.Element;
-    args: {
-        bgColor: string;
-    };
-};
-export declare const Link: {
-    (props: CardProps<'div'>): import("react/jsx-runtime").JSX.Element;
-    args: {
-        bgColor: string;
-    };
-};
-export declare const CardList: {
-    (): import("react/jsx-runtime").JSX.Element;
-    parameters: {
-        layout: string;
-    };
-};

package/dist/Checkbox/Checkbox.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-/**
- * CSS inspired by https://moderncss.dev/pure-css-custom-checkbox-style/
- */
-export interface CheckboxProps extends React.ComponentPropsWithRef<'input'> {
-    children: React.ReactNode;
-    className?: string;
-    /** Error message for the form control */
-    error?: string;
-    /** 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;
-}
-export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;