@obosbbl/grunnmuren-react 0.2.2 → 1.0.0

package/dist/Stepper/Stepper.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+interface StepperProps extends React.ComponentPropsWithoutRef<'ol'> {
+}
+export declare const Stepper: (props: StepperProps) => JSX.Element;
+interface StepProps extends React.ComponentPropsWithoutRef<'li'> {
+    /** Content for the Step item's bullet */
+    bullet: React.ReactNode;
+}
+export declare const Step: (props: StepProps) => JSX.Element;
+interface StepBulletProps extends React.ComponentPropsWithoutRef<'span'> {
+}
+export declare const StepBullet: (props: StepBulletProps) => JSX.Element;
+export {};

package/dist/Stepper/index.d.ts

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

package/dist/grunnmuren.es.js

@@ -77,36 +77,6 @@ const InfoCircle = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spread
     d: "M16 0C12.8355 0 9.74207 0.938384 7.11088 2.69649C4.4797 4.45459 2.42894 6.95345 1.21793 9.87707C0.0069325 12.8007 -0.309921 16.0177 0.307443 19.1214C0.924806 22.2251 2.44866 25.0761 4.6863 27.3137C6.92394 29.5513 9.77487 31.0752 12.8786 31.6926C15.9823 32.3099 19.1993 31.9931 22.1229 30.7821C25.0466 29.5711 27.5454 27.5203 29.3035 24.8891C31.0616 22.2579 32 19.1645 32 16C32 11.7565 30.3143 7.68687 27.3137 4.68629C24.3131 1.68571 20.2435 0 16 0ZM18 26H14V15H18V26ZM18 11H14V7H18V11Z"
   })
 }));
-const Mail = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
-  width: "1.25em",
-  height: "1.25em",
-  fill: "none",
-  viewBox: "0 0 28 22",
-  role: "img",
-  "aria-hidden": props["aria-label"] == null
-}, props), {
-  children: /* @__PURE__ */ jsx("path", {
-    fill: "currentColor",
-    fillRule: "evenodd",
-    d: "M28 4L15.984 10.866C15.3797 11.2112 14.6959 11.3927 14 11.3927C13.3041 11.3927 12.6203 11.2112 12.016 10.866L0 4C0 2.93913 0.421427 1.92172 1.17157 1.17157C1.92172 0.421427 2.93913 0 4 0H24C25.0609 0 26.0783 0.421427 26.8284 1.17157C27.5786 1.92172 28 2.93913 28 4ZM0 9L12 16H16L28 9V18C28 19.0609 27.5786 20.0783 26.8284 20.8284C26.0783 21.5786 25.0609 22 24 22H4C2.93913 22 1.92172 21.5786 1.17157 20.8284C0.421427 20.0783 0 19.0609 0 18V9Z",
-    clipRule: "evenodd"
-  })
-}));
-const MapPin = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
-  width: "1.25em",
-  height: "1.25em",
-  fill: "none",
-  viewBox: "0 0 22 35",
-  role: "img",
-  "aria-hidden": props["aria-label"] == null
-}, props), {
-  children: /* @__PURE__ */ jsx("path", {
-    fill: "currentColor",
-    fillRule: "evenodd",
-    d: "M2.51 17.205L2.28 16.915H2.24C1.09834 15.315 0.41945 13.4314 0.277819 11.471C0.136187 9.51058 0.537288 7.54902 1.43711 5.80154C2.33694 4.05407 3.70071 2.58821 5.37881 1.56481C7.0569 0.541404 8.98446 0 10.95 0C12.9155 0 14.8431 0.541404 16.5212 1.56481C18.1993 2.58821 19.5631 4.05407 20.4629 5.80154C21.3627 7.54902 21.7638 9.51058 21.6222 11.471C21.4806 13.4314 20.8017 15.315 19.66 16.915L19.43 17.215L19.43 17.215C19.33 17.345 19.23 17.475 19.12 17.595L14.12 24.015C13.828 24.6005 13.3785 25.0931 12.8221 25.4374C12.2657 25.7816 11.6243 25.964 10.97 25.964C10.3157 25.964 9.67431 25.7816 9.11789 25.4374C8.56147 25.0931 8.11202 24.6005 7.82 24.015L2.82 17.605C2.74304 17.514 2.67097 17.4182 2.60037 17.3243C2.57007 17.284 2.54004 17.244 2.51 17.205ZM14 8.00497H8V14.005H14V8.00497ZM4 30.005H18L22 34.005H0L4 30.005Z",
-    clipRule: "evenodd"
-  })
-}));
 const MenuAlt = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
   width: "1.25em",
   height: "1.25em",
@@ -122,19 +92,6 @@ const MenuAlt = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadVal
     clipRule: "evenodd"
   })
 }));
-const Mobile = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
-  width: "1.25em",
-  height: "1.25em",
-  fill: "none",
-  viewBox: "0 0 22 32",
-  role: "img",
-  "aria-hidden": props["aria-label"] == null
-}, props), {
-  children: /* @__PURE__ */ jsx("path", {
-    fill: "currentColor",
-    d: "M18 0H4C2.93914 0 1.92172 0.421427 1.17157 1.17157C0.421427 1.92172 0 2.93913 0 4V28C0 29.0609 0.421427 30.0783 1.17157 30.8284C1.92172 31.5786 2.93914 32 4 32H18C19.0609 32 20.0783 31.5786 20.8284 30.8284C21.5786 30.0783 22 29.0609 22 28V4C22 2.93913 21.5786 1.92172 20.8284 1.17157C20.0783 0.421427 19.0609 0 18 0ZM13.036 28H9.036V24H13.036V28ZM16.036 20H6.036V6H16.036V20Z"
-  })
-}));
 const Warning = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
   width: "1.25em",
   height: "1.25em",
@@ -722,30 +679,6 @@ const HeroActions = (props) => {
     })
   }, rest));
 };
-const IconLegacy = (props) => {
-  var _b;
-  const _a = props, {
-    className,
-    name
-  } = _a, rest = __objRest(_a, [
-    "className",
-    "name"
-  ]);
-  const IconComponent = (_b = iconMap[name]) != null ? _b : IconFallback;
-  return /* @__PURE__ */ jsx(IconComponent, __spreadValues({
-    className: classNames(className, "inline")
-  }, rest));
-};
-const IconFallback = (props) => /* @__PURE__ */ jsx("svg", __spreadValues({
-  "aria-hidden": props["aria-label"] == null,
-  height: "1.25em",
-  width: "1.25em"
-}, props));
-const iconMap = {
-  mapmarker: MapPin,
-  smartphone: Mobile,
-  envelope: Mail
-};
 const Input = forwardRef((props, ref) => {
   const _a = props, {
     className,
@@ -753,7 +686,7 @@ const Input = forwardRef((props, ref) => {
     size,
     prefix,
     as,
-    type
+    type: typeProp
   } = _a, rest = __objRest(_a, [
     "className",
     "isInvalid",
@@ -763,7 +696,7 @@ const Input = forwardRef((props, ref) => {
     "type"
   ]);
   const Component = as != null ? as : "input";
-  const inputType = (type != null ? type : Component === "input") ? "text" : void 0;
+  const type = getType(Component, typeProp);
   return /* @__PURE__ */ jsxs("div", {
     className: classNames(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", {
       "border-gray-dark focus-within:border-blue": !isInvalid,
@@ -779,10 +712,16 @@ const Input = forwardRef((props, ref) => {
       ref,
       className: "focus:none placeholder-gray w-full rounded-md border-none px-4 py-3 outline-none",
       size,
-      type: inputType
+      type
     }, rest))]
   });
 });
+function getType(Component, type) {
+  if (type != null)
+    return type;
+  if (Component === "input")
+    return "text";
+}
 const Link = (props) => {
   let iconClass = "";
   if (props.icon) {
@@ -987,6 +926,38 @@ const SnackbarContent = (props) => {
     children: props.children
   }));
 };
+const Stepper = (props) => {
+  return /* @__PURE__ */ jsx("ol", __spreadValues({}, props));
+};
+const Step = (props) => {
+  const _a = props, {
+    className,
+    children,
+    bullet
+  } = _a, rest = __objRest(_a, [
+    "className",
+    "children",
+    "bullet"
+  ]);
+  return /* @__PURE__ */ jsxs("li", __spreadProps(__spreadValues({
+    className: classNames(className, "group relative flex gap-4 pb-8 text-sm last:pb-0 md:gap-8 md:pb-12 md:text-base")
+  }, rest), {
+    children: [/* @__PURE__ */ jsx(StepBullet, {
+      children: bullet
+    }), children]
+  }));
+};
+const StepBullet = (props) => {
+  const _a = props, {
+    className
+  } = _a, rest = __objRest(_a, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx("span", __spreadValues({
+    "aria-hidden": true,
+    className: classNames(className, "text-green border-gray-light after:bg-gray-light grid h-10 w-10 flex-none place-content-center rounded-full border-2 text-sm font-bold after:absolute after:left-5 after:top-10 after:bottom-0 after:w-0.5 group-last:after:hidden md:h-20 md:w-20 md:text-xl md:after:left-10 md:after:top-20")
+  }, rest));
+};
 const TextArea = forwardRef((props, ref) => {
   const _a = props, {
     description,
@@ -1091,4 +1062,4 @@ const TextField = forwardRef((props, ref) => {
     })]
   });
 });
-export { Alert, Banner, BannerImage, Button, ButtonColorContext, Card, CardContent, CardImage, CardLinkOverlay, CardList, Checkbox, Footer, Form, FormError, FormErrorMessage, FormHeading, FormHelperText, FormLabel, FormSuccess, Hero, HeroActions, HeroContent, HeroContext, HeroImage, IconLegacy, Input, Link, Navbar, NavbarCollapsible, NavbarContent, NavbarExpandedMobileContent, NavbarItem, NavbarItems, Snackbar, SnackbarButton, SnackbarContent, TextArea, TextField, assignRef, useBlockBackgroundColor, useComposedRefs, useFallbackId, useFormControlValidity, useMedia, usePrefersReducedMotion, useScreenMaxWidthMd };
+export { Alert, Banner, BannerImage, Button, ButtonColorContext, 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, Step, StepBullet, Stepper, TextArea, TextField, assignRef, useBlockBackgroundColor, useComposedRefs, useFallbackId, useFormControlValidity, useMedia, usePrefersReducedMotion, useScreenMaxWidthMd };

package/dist/index.d.ts

@@ -6,11 +6,11 @@ export * from './Checkbox';
 export * from './Footer';
 export * from './Form';
 export * from './Hero';
-export * from './IconLegacy';
 export * from './Input';
 export * from './Link';
 export * from './Navbar';
 export * from './Snackbar';
+export * from './Stepper';
 export * from './TextArea';
 export * from './TextField';
 export * from './hooks';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "0.2.2",
+  "version": "1.0.0",
   "description": "OBOS Grunnmuren design system React components",
   "license": "MIT",
   "repository": {
@@ -17,30 +17,37 @@
   ],
   "types": "./dist/index.d.ts",
   "devDependencies": {
-    "@babel/core": "7.17.10",
-    "@storybook/addon-controls": "6.5.4",
-    "@storybook/addon-docs": "6.5.4",
+    "@babel/core": "7.18.2",
+    "@obosbbl/grunnmuren-tailwind": "^0.4.0",
+    "@storybook/addon-controls": "6.5.5",
+    "@storybook/addon-docs": "6.5.5",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/builder-webpack5": "6.5.4",
-    "@storybook/manager-webpack5": "6.5.4",
-    "@storybook/react": "6.5.4",
+    "@storybook/builder-webpack5": "6.5.5",
+    "@storybook/manager-webpack5": "6.5.5",
+    "@storybook/react": "6.5.5",
     "@types/react": "18.0.9",
-    "@types/react-dom": "18.0.3",
+    "@types/react-dom": "18.0.5",
     "@vitejs/plugin-react": "1.3.2",
-    "postcss": "8.4.13",
+    "postcss": "8.4.14",
     "react": "18.1.0",
     "react-dom": "18.1.0",
+    "require-from-string": "2.0.2",
     "tailwindcss": "3.0.24",
     "vite": "2.9.9",
     "webpack": "5.72.1"
   },
   "dependencies": {
     "@obosbbl/grunnmuren-icons": "^0.3.0",
-    "@obosbbl/grunnmuren-tailwind": "^0.3.1",
     "clsx": "1.1.1"
   },
   "peerDependencies": {
-    "react": "^18"
+    "react": "^18",
+    "@obosbbl/grunnmuren-tailwind": "^0.4.0"
+  },
+  "peerDependenciesMeta": {
+    "@obosbbl/grunnmuren-tailwind": {
+      "optional": true
+    }
   },
   "scripts": {
     "build": "pnpm run build:lib && pnpm run build:types",

package/dist/IconLegacy/IconLegacy.d.ts

@@ -1,20 +0,0 @@
-/// <reference types="react" />
-export declare type IconName = keyof typeof iconMap;
-interface IconLegacyProps {
-    className?: string;
-    name: IconName;
-    children?: never;
-}
-/**
- *
- * NB! This component should only be used for compatibility reasons.
- * It uses old icon names and it causes all the referenced icons to be inluded in the application bundle.
- * Import icons from @obosbbl/grunnmuren-icons instead.
- */
-export declare const IconLegacy: (props: IconLegacyProps) => JSX.Element;
-declare const iconMap: {
-    readonly mapmarker: (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
-    readonly smartphone: (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
-    readonly envelope: (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
-};
-export {};

package/dist/IconLegacy/index.d.ts

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