@obosbbl/grunnmuren-react 1.6.1 → 1.7.0

package/dist/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type ButtonColor = 'standard' | 'white' | 'light-green';
+export type ButtonColor = 'standard' | 'white' | 'light-green';
 export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
     children: React.ReactNode;
     className?: string;

package/dist/Chip/Chip.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type ChipColor = 'blue-light' | 'green-light' | 'red-light' | 'orange-light';
+export type ChipColor = 'blue-light' | 'green-light' | 'red-light' | 'orange-light';
 export interface ChipProps {
     icon?: React.ReactNode;
     color?: ChipColor;

package/dist/Hero/Hero.d.ts

@@ -4,8 +4,8 @@ export declare const HeroContext: import("react").Context<{
     contentPosition: HeroContentPosition;
     hasImage: boolean;
 }>;
-export declare type HeroColor = 'green' | 'blue' | 'white';
-export declare type HeroContentPosition = 'below-center' | 'below-left' | 'top-left' | 'bottom-left' | 'top-right' | 'bottom-right' | 'center' | 'vertical-split';
+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 {
     /** @default white */
     bgColor?: HeroColor;

package/dist/Pagination/Pagination.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import type { RequireAtLeastOne } from 'type-fest';
+interface BasePaginationProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'onChange'> {
+    /** The current page number.
+     * @note Starts at 1
+     */
+    page: number;
+    /** The total number of pages. */
+    count: number;
+    /**  Given a page number, should return a valid href string. */
+    getItemHref: (page: number) => string;
+    /**  Given a page number, should return a valid href string. */
+    getItemAriaLabel: (page: number) => string;
+    /** Aria label for the next page button link */
+    nextPageAriaLabel: string;
+    /** Aria label for the previous page button link */
+    prevPageAriaLabel: string;
+    /** Handler that is called with the page number to navigate to. `event.preventDefault` is called for you. Fallbacks to default browser behavior if undefined. */
+    onChange?: (page: number) => void;
+}
+type PaginationProps = RequireAtLeastOne<BasePaginationProps, 'aria-label' | 'aria-labelledby'>;
+export declare const Pagination: (props: PaginationProps) => JSX.Element;
+export {};

package/dist/Pagination/index.d.ts

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

package/dist/StepList/StepList.d.ts

@@ -1,13 +1,25 @@
 /// <reference types="react" />
-interface StepListProps extends React.ComponentPropsWithoutRef<'ol'> {
+type Alignment = 'center' | 'top';
+export interface StepListProps extends React.ComponentPropsWithoutRef<'ol'> {
+    /**
+     * Determines the vertical alignment of the bullets
+     * @default 'center'
+     */
+    align?: Alignment;
+    /**
+     * <StepList> items
+     */
+    children: React.ReactNode;
 }
 declare const StepList: {
     (props: StepListProps): JSX.Element;
     Item: (props: StepListItemProps) => JSX.Element;
 };
-interface StepListItemProps extends React.ComponentPropsWithoutRef<'li'> {
+export interface StepListItemProps extends React.ComponentPropsWithoutRef<'li'> {
     /** Content for the StepListItem's bullet */
     bullet: React.ReactNode;
+    /** @private this is set by the parent StepList component */
+    align?: Alignment;
 }
 export declare const StepListItem: (props: StepListItemProps) => JSX.Element;
 export { StepList };

package/dist/grunnmuren.es.js

@@ -68,6 +68,32 @@ const ChevronDown = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__sprea
     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 ChevronLeft = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
+  width: "1.25em",
+  height: "1.25em",
+  fill: "none",
+  viewBox: "0 0 17 29",
+  role: "img",
+  "aria-hidden": props["aria-label"] == null
+}, props), {
+  children: /* @__PURE__ */ jsx("path", {
+    fill: "currentColor",
+    d: "M12.6771 0L17 4.31278L6.95043 14.3624L17 24.4119L12.6771 28.7247L1.19328 17.2409C0.814993 16.8631 0.514893 16.4143 0.310141 15.9204C0.105389 15.4265 0 14.897 0 14.3624C0 13.8277 0.105389 13.2982 0.310141 12.8043C0.514893 12.3104 0.814993 11.8616 1.19328 11.4838L12.6771 0Z"
+  })
+}));
+const ChevronRight = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
+  width: "1.25em",
+  height: "1.25em",
+  fill: "none",
+  viewBox: "0 0 17 29",
+  role: "img",
+  "aria-hidden": props["aria-label"] == null
+}, props), {
+  children: /* @__PURE__ */ jsx("path", {
+    fill: "currentColor",
+    d: "M4.32295 28.7247L0 24.4119L10.0496 14.3624L0 4.31278L4.32295 0L15.8067 11.4838C16.185 11.8616 16.4851 12.3104 16.6899 12.8043C16.8946 13.2982 17 13.8277 17 14.3624C17 14.897 16.8946 15.4265 16.6899 15.9204C16.4851 16.4143 16.185 16.8631 15.8067 17.2409L4.32295 28.7247Z"
+  })
+}));
 const Close = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
   width: "1.25em",
   height: "1.25em",
@@ -568,7 +594,7 @@ const CardContent = (props) => {
     "className"
   ]);
   return /* @__PURE__ */ jsx("div", __spreadValues({
-    className: cx(className, "p-8 md:p-10")
+    className: cx(className, "p-8 md:px-10")
   }, rest));
 };
 const CardLinkOverlay = forwardRef((props, ref) => {
@@ -1138,6 +1164,150 @@ const NavbarExpandedMobileContent = (props) => {
     children: props.children
   });
 };
+const SIBLING_COUNT = 2;
+const PaginationContext = createContext({
+  currentPage: 0,
+  pageCount: 0
+});
+const Pagination = (props) => {
+  const _a = props, {
+    className,
+    page: currentPage,
+    count: pageCount,
+    onChange,
+    getItemHref,
+    getItemAriaLabel,
+    nextPageAriaLabel,
+    prevPageAriaLabel
+  } = _a, rest = __objRest(_a, [
+    "className",
+    "page",
+    "count",
+    "onChange",
+    "getItemHref",
+    "getItemAriaLabel",
+    "nextPageAriaLabel",
+    "prevPageAriaLabel"
+  ]);
+  const context = useMemo(() => ({
+    currentPage: Math.max(1, Math.min(currentPage, pageCount)),
+    pageCount: Math.max(1, pageCount)
+  }), [currentPage, pageCount]);
+  const handleClick = (page) => (event) => {
+    if (onChange) {
+      event.preventDefault();
+      onChange(page);
+    }
+  };
+  return /* @__PURE__ */ jsx(PaginationContext.Provider, {
+    value: context,
+    children: /* @__PURE__ */ jsxs("nav", __spreadProps(__spreadValues({
+      className: cx("flex justify-center gap-2 sm:gap-4", className)
+    }, rest), {
+      children: [/* @__PURE__ */ jsx(PrevPage, {
+        "aria-label": prevPageAriaLabel,
+        href: getItemHref(currentPage - 1),
+        onClick: handleClick(currentPage - 1)
+      }), /* @__PURE__ */ jsx(PageItem, {
+        page: 1,
+        href: getItemHref(1),
+        onClick: handleClick(1),
+        "aria-label": getItemAriaLabel(1),
+        selected: currentPage === 1
+      }), pageCount > 2 + SIBLING_COUNT * 2 && currentPage > SIBLING_COUNT + 2 && /* @__PURE__ */ jsx(PaginationEllipsis, {}), /* @__PURE__ */ jsx(Pages, {
+        children: (page) => /* @__PURE__ */ jsx(PageItem, {
+          href: getItemHref(page),
+          onClick: handleClick(page),
+          "aria-label": getItemAriaLabel(page),
+          page,
+          selected: page === currentPage
+        }, page)
+      }), /* @__PURE__ */ jsx(NextPage, {
+        "aria-label": nextPageAriaLabel,
+        href: getItemHref(currentPage + 1),
+        onClick: handleClick(currentPage + 1)
+      })]
+    }))
+  });
+};
+const NextPage = forwardRef((props, ref) => {
+  const {
+    currentPage,
+    pageCount
+  } = useContext(PaginationContext);
+  const hide = currentPage >= pageCount;
+  return /* @__PURE__ */ jsx(PageLink, __spreadProps(__spreadValues({
+    "aria-hidden": hide,
+    className: hide ? "invisible" : void 0,
+    ref,
+    rel: "next"
+  }, props), {
+    children: /* @__PURE__ */ jsx(ChevronRight, {})
+  }));
+});
+const PrevPage = forwardRef((props, ref) => {
+  const {
+    currentPage
+  } = useContext(PaginationContext);
+  const hide = currentPage <= 1;
+  return /* @__PURE__ */ jsx(PageLink, __spreadProps(__spreadValues({
+    "aria-hidden": hide,
+    className: hide ? "invisible" : void 0,
+    ref,
+    rel: "prev"
+  }, props), {
+    children: /* @__PURE__ */ jsx(ChevronLeft, {})
+  }));
+});
+const PageLink = forwardRef((props, ref) => {
+  const _a = props, {
+    className
+  } = _a, rest = __objRest(_a, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({
+    className: cx(className, "aria-[current]:border-green hover:bg-gray-concrete flex h-9 w-9 items-center justify-center rounded-lg border-2 border-transparent no-underline sm:h-10 sm:w-10"),
+    ref
+  }, rest));
+});
+const PaginationEllipsis = () => {
+  return /* @__PURE__ */ jsx("span", {
+    className: "flex h-9 w-9 cursor-default items-center justify-center border-2 border-transparent sm:h-10 sm:w-10",
+    children: "..."
+  });
+};
+const Pages = ({
+  children
+}) => {
+  const {
+    currentPage,
+    pageCount
+  } = useContext(PaginationContext);
+  const end = Math.min(Math.max(2 + SIBLING_COUNT * 2, currentPage + SIBLING_COUNT), pageCount);
+  let start = Math.max(Math.min(currentPage - SIBLING_COUNT, end - SIBLING_COUNT * 2), 1);
+  if (start - SIBLING_COUNT === 0) {
+    start = start - 1;
+  }
+  const pages = Array.from({
+    length: end - start
+  }, (_, i) => start + i + 1);
+  return pages.map((page) => children(page));
+};
+const PageItem = forwardRef((props, ref) => {
+  const _a = props, {
+    page,
+    selected
+  } = _a, rest = __objRest(_a, [
+    "page",
+    "selected"
+  ]);
+  return /* @__PURE__ */ jsx(PageLink, __spreadProps(__spreadValues({
+    "aria-current": selected ? "page" : void 0,
+    ref
+  }, rest), {
+    children: page
+  }));
+});
 const RadioContext = createContext({
   defaultValue: void 0,
   isControlled: false,
@@ -1301,30 +1471,60 @@ const SnackbarContent = (props) => {
   }));
 };
 const StepList = (props) => {
-  return /* @__PURE__ */ jsx("ol", __spreadValues({}, props));
+  const _a = props, {
+    align = "center",
+    children,
+    className
+  } = _a, rest = __objRest(_a, [
+    "align",
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx("ol", __spreadProps(__spreadValues({
+    className: cx(className, "flex flex-col gap-8 md:gap-12")
+  }, rest), {
+    children: Children.map(children, (child) => {
+      return cloneElement(child, {
+        align
+      });
+    })
+  }));
 };
 const StepListItem = (props) => {
   const _a = props, {
     className,
     children,
-    bullet
+    bullet,
+    align = "center"
   } = _a, rest = __objRest(_a, [
     "className",
     "children",
-    "bullet"
+    "bullet",
+    "align"
   ]);
   return /* @__PURE__ */ jsxs("li", __spreadProps(__spreadValues({
-    className: cx(className, "group relative flex items-center gap-4 pb-8 text-sm last:pb-0 md:gap-8 md:pb-12 md:text-base")
+    className: cx(className, "group relative flex gap-4 text-sm md:gap-8 md:text-base", {
+      "items-center": align === "center"
+    })
   }, rest), {
     children: [/* @__PURE__ */ jsx(StepListBullet, {
+      align,
       children: bullet
     }), children]
   }));
 };
-const StepListBullet = (props) => {
+const StepListBullet = (_a) => {
+  var _b = _a, {
+    align
+  } = _b, props = __objRest(_b, [
+    "align"
+  ]);
   return /* @__PURE__ */ jsx("span", __spreadValues({
     "aria-hidden": true,
-    className: "text-green after:bg-gray-light grid h-10 w-10 flex-none place-content-center justify-items-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"
+    className: cx("text-green after:bg-gray-light before:bg-gray-light grid h-10 w-10 flex-none place-content-center justify-items-center rounded-full border-2 text-sm font-bold after:absolute after:bottom-0 after:w-0.5 after:translate-x-1/2 group-last:after:hidden md:h-20 md:w-20 md:text-xl  ", {
+      "before:absolute before:top-0 before:bottom-1/2 before:w-0.5 before:-translate-y-5 before:translate-x-1/2 after:top-1/2 after:translate-y-5 group-first:before:hidden before:md:-translate-y-10 after:md:translate-y-10": align === "center",
+      "after:top-10 after:-bottom-8 after:md:-bottom-12 after:md:top-20": align === "top"
+    })
   }, props));
 };
 StepList.Item = StepListItem;
@@ -1428,4 +1628,4 @@ const TextField = forwardRef((props, ref) => {
     })]
   });
 });
-export { Accordion, AccordionContent, AccordionHeader, AccordionItem, Alert, Banner, BannerImage, Button, ButtonColorContext, Campaign, Card, CardContent, CardImage, CardLinkOverlay, CardList, Checkbox, Chip, 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, useBlockBackgroundColor, useFallbackId, useFormControlValidity, usePrefersReducedMotion, useScreenMaxWidthMd };
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, Alert, Banner, BannerImage, Button, ButtonColorContext, Campaign, Card, CardContent, CardImage, CardLinkOverlay, CardList, Checkbox, Chip, Footer, Form, FormError, FormErrorMessage, FormHeading, FormHelperText, FormLabel, FormSuccess, Hero, HeroActions, HeroContent, HeroContext, HeroImage, Input, Link, Navbar, NavbarCollapsible, NavbarContent, NavbarExpandedMobileContent, NavbarItem, NavbarItems, Pagination, Radio, RadioGroup, Select, Snackbar, SnackbarButton, SnackbarContent, StepList, StepListItem, TextArea, TextField, useBlockBackgroundColor, useFallbackId, useFormControlValidity, usePrefersReducedMotion, useScreenMaxWidthMd };

package/dist/hooks/useBlockBackgroundColor.d.ts

@@ -1,2 +1,2 @@
-export declare type BlockBackgroundColor = 'yellow' | 'gray' | 'blue' | 'green';
+export type BlockBackgroundColor = 'yellow' | 'gray' | 'blue' | 'green';
 export declare function useBlockBackgroundColor(blockBgColor: BlockBackgroundColor | undefined): string | undefined;

package/dist/hooks/useFormControlValidity.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-declare type Validity = 'indeterminate' | 'invalid' | 'valid';
+type Validity = 'indeterminate' | 'invalid' | 'valid';
 /**
  * Browser validation as it should be. "Invalid" only triggers after the user has blurred an input, or attempted
  * to submit the form.

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export * from './Hero';
 export * from './Input';
 export * from './Link';
 export * from './Navbar';
+export * from './Pagination';
 export * from './Radio';
 export * from './Select';
 export * from './Snackbar';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "description": "OBOS Grunnmuren design system React components",
   "license": "MIT",
   "repository": {
@@ -17,35 +17,36 @@
   ],
   "types": "./dist/index.d.ts",
   "devDependencies": {
-    "@babel/core": "7.19.6",
-    "@obosbbl/grunnmuren-tailwind": "0.8.1",
-    "@storybook/addon-controls": "6.5.13",
-    "@storybook/addon-docs": "6.5.13",
+    "@babel/core": "7.20.2",
+    "@storybook/addon-controls": "6.5.14",
+    "@storybook/addon-docs": "6.5.14",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/builder-webpack5": "6.5.13",
-    "@storybook/manager-webpack5": "6.5.13",
-    "@storybook/react": "6.5.13",
+    "@storybook/builder-webpack5": "6.5.14",
+    "@storybook/manager-webpack5": "6.5.14",
+    "@storybook/react": "6.5.14",
     "@types/react": "18.0.25",
-    "@types/react-dom": "18.0.8",
+    "@types/react-dom": "18.0.9",
     "@vitejs/plugin-react": "1.3.2",
-    "postcss": "8.4.18",
+    "postcss": "8.4.19",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "require-from-string": "2.0.2",
     "rimraf": "3.0.2",
-    "tailwindcss": "3.2.1",
+    "tailwindcss": "3.2.4",
+    "type-fest": "3.3.0",
     "vite": "2.9.15",
-    "webpack": "5.74.0"
+    "webpack": "5.75.0",
+    "@obosbbl/grunnmuren-tailwind": "0.8.3"
   },
   "dependencies": {
-    "@obosbbl/grunnmuren-icons": "^0.5.1",
     "@seznam/compose-react-refs": "1.0.6",
     "clsx": "1.2.1",
     "react-collapsed": "3.5.0",
-    "react-use": "17.4.0"
+    "react-use": "17.4.0",
+    "@obosbbl/grunnmuren-icons": "^0.5.1"
   },
   "peerDependencies": {
-    "@obosbbl/grunnmuren-tailwind": "^0.8.1",
+    "@obosbbl/grunnmuren-tailwind": "^0.8.3",
     "react": "^18"
   },
   "peerDependenciesMeta": {