@obosbbl/grunnmuren-react 2.0.0-canary.39 → 2.0.0-canary.40

package/dist/index.d.mts

@@ -181,6 +181,7 @@ declare const buttonVariants: (props?: ({
     variant?: "primary" | "secondary" | "tertiary" | undefined;
     color?: "mint" | "white" | "green" | undefined;
     isIconOnly?: boolean | undefined;
+    isPending?: boolean | 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;
@@ -241,9 +242,12 @@ type ButtonOrLinkProps$1 = VariantProps<typeof buttonVariants> & {
     href?: string;
     /**
      * Display the button in a loading state
+     * @deprecated Use isPending instead.
      * @default false
      */
     isLoading?: boolean;
+    /** Additional style properties for the element. */
+    style?: React.CSSProperties;
 };
 type ButtonProps = (ButtonProps$1 | React.ComponentPropsWithoutRef<typeof Link>) & ButtonOrLinkProps$1;
 declare const _Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
@@ -309,10 +313,15 @@ type ComboboxProps<T extends object> = {
     /** Error message for the form control. Automatically sets `isInvalid` to true */
     errorMessage?: React.ReactNode;
     /**
-     * Display the dropdown button trigger in a loading state
-     * @default false
+     * Display the dropdown button trigger in a pending state
+     * @deprecated Use isPending instead.
      */
     isLoading?: boolean;
+    /**
+     * Display the dropdown button trigger in a pending state
+     * @default false
+     */
+    isPending?: boolean;
     /** Label for the form control. */
     label?: React.ReactNode;
     /** Placeholder text. Only visible when the input value is empty. */
@@ -329,10 +338,15 @@ declare const _Combobox: react.ForwardRefExoticComponent<{
     /** Error message for the form control. Automatically sets `isInvalid` to true */
     errorMessage?: React.ReactNode;
     /**
-     * Display the dropdown button trigger in a loading state
-     * @default false
+     * Display the dropdown button trigger in a pending state
+     * @deprecated Use isPending instead.
      */
     isLoading?: boolean;
+    /**
+     * Display the dropdown button trigger in a pending state
+     * @default false
+     */
+    isPending?: boolean;
     /** Label for the form control. */
     label?: React.ReactNode;
     /** Placeholder text. Only visible when the input value is empty. */

package/dist/index.mjs

@@ -2,11 +2,11 @@
 import { I18nProvider, RouterProvider, useLocale, useContextProps, Provider, Link, Button as Button$1, Text, CheckboxContext, Checkbox as Checkbox$1, Label as Label$1, FieldError, CheckboxGroup as CheckboxGroup$1, ListBoxItem as ListBoxItem$1, ListBox as ListBox$1, ComboBox, Group, Input, Popover, RadioGroup as RadioGroup$1, Radio as Radio$1, Select as Select$1, SelectValue, TextField as TextField$1, TextArea as TextArea$1, NumberField as NumberField$1, Breadcrumbs as Breadcrumbs$1, Breadcrumb as Breadcrumb$1 } from 'react-aria-components';
 export { Form } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createContext, forwardRef, Children, useId, useState, useRef } from 'react';
+import { createContext, forwardRef, Children, useId, useState } from 'react';
 import { cx, cva, compose } from 'cva';
 import { ChevronDown, LoadingSpinner, Check, Close, InfoCircle, CheckCircle, Warning, CloseCircle, ChevronRight, ChevronLeft } from '@obosbbl/grunnmuren-icons-react';
-import { useLayoutEffect, mergeRefs } from '@react-aria/utils';
-import { useDateFormatter } from 'react-aria';
+import { useLayoutEffect } from '@react-aria/utils';
+import { useProgressBar, useDateFormatter } from 'react-aria';
 
 function GrunnmurenProvider({ children, locale = 'nb', navigate, useHref }) {
     return /*#__PURE__*/ jsx(I18nProvider, {
@@ -203,7 +203,7 @@ const _Badge = /*#__PURE__*/ forwardRef(Badge);
  * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
  */ const buttonVariants = cva({
     base: [
-        'inline-flex min-h-[44px] cursor-pointer items-center justify-center whitespace-nowrap rounded-lg font-medium transition-colors duration-200 focus-visible:outline-focus-offset'
+        'inline-flex min-h-[44px] cursor-pointer items-center justify-center whitespace-nowrap rounded-lg font-medium transition-colors duration-200 focus-visible:outline-focus-offset [&:not([data-focus-visible])]:outline-none'
     ],
     variants: {
         /**
@@ -219,9 +219,9 @@ const _Badge = /*#__PURE__*/ forwardRef(Badge);
      * Adjusts the color of the button for usage on different backgrounds.
      * @default green
      */ color: {
-            green: 'focus-visible:outline-focus',
-            mint: 'focus-visible:outline-focus focus-visible:outline-mint',
-            white: 'focus-visible:outline-focus focus-visible:outline-white'
+            green: 'data-[focus-visible]:outline-focus',
+            mint: 'data-[focus-visible]:outline-focus data-[focus-visible]:outline-mint',
+            white: 'data-[focus-visible]:outline-focus data-[focus-visible]:outline-white'
         },
         /**
      * When the button is without text, but with a single icon.
@@ -229,6 +229,11 @@ const _Badge = /*#__PURE__*/ forwardRef(Badge);
      */ isIconOnly: {
             true: 'p-2 [&>svg]:h-7 [&>svg]:w-7',
             false: 'gap-2.5 px-4 py-2'
+        },
+        // Make the content of the button transparent to hide it's content, but keep the button width
+        isPending: {
+            true: 'relative !text-transparent',
+            false: null
         }
     },
     compoundVariants: [
@@ -236,97 +241,100 @@ const _Badge = /*#__PURE__*/ forwardRef(Badge);
             color: 'green',
             variant: 'primary',
             // Darken bg by 20% on hover. The color is manually crafted
-            className: 'bg-green text-white hover:bg-green-dark active:bg-[#007352]'
+            className: 'bg-green text-white hover:bg-green-dark active:bg-[#007352] [&_[role="progressbar"]]:text-white'
         },
         {
             color: 'green',
             variant: 'secondary',
-            className: 'text-black shadow-green hover:bg-green hover:text-white active:bg-green'
+            className: 'text-black shadow-green hover:bg-green hover:text-white active:bg-green [&:hover_[role="progressbar"]]:text-white [&_[role="progressbar"]]:text-black'
+        },
+        {
+            color: 'green',
+            variant: 'tertiary',
+            className: '[&_[role="progressbar"]]: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]'
+            className: 'active:[#9ddac6] bg-mint text-black hover:bg-[#8dd4bd] [&_[role="progressbar"]]:text-black'
         },
         {
             color: 'mint',
             variant: 'secondary',
-            className: 'text-mint shadow-mint hover:bg-mint hover:text-black'
+            className: 'text-mint shadow-mint hover:bg-mint hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-mint'
         },
         {
             color: 'mint',
             variant: 'tertiary',
-            className: 'text-mint'
+            className: 'text-mint [&_[role="progressbar"]]:text-mint'
         },
         {
             color: 'white',
             variant: 'primary',
-            className: 'bg-white text-black hover:bg-sky active:bg-sky-light'
+            className: 'bg-white text-black hover:bg-sky active:bg-sky-light [&_[role="progressbar"]]:text-black'
         },
         {
             color: 'white',
             variant: 'secondary',
-            className: 'text-white shadow-white hover:bg-white hover:text-black'
+            className: 'text-white shadow-white hover:bg-white hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-white'
         },
         {
             color: 'white',
             variant: 'tertiary',
-            className: 'text-white'
+            className: 'text-white [&_[role="progressbar"]]:text-white'
         }
     ],
     defaultVariants: {
         variant: 'primary',
         color: 'green',
-        isIconOnly: false
+        isIconOnly: false,
+        isPending: false
     }
 });
 function isLinkProps$1(props) {
     return !!props.href;
 }
-function Button(props, forwardedRef) {
-    const { children: _children, color, isIconOnly, isLoading, variant, style: _style, ...restProps } = props;
-    const [widthOverride, setWidthOverride] = useState();
-    const ownRef = useRef(null);
-    const ref = mergeRefs(ownRef, forwardedRef);
-    useLayoutEffect(()=>{
-        if (isLoading) {
-            const requestID = window.requestAnimationFrame(()=>{
-                setWidthOverride(ownRef.current?.getBoundingClientRect()?.width);
-            });
-            return ()=>{
-                setWidthOverride(undefined);
-                cancelAnimationFrame(requestID);
-            };
-        }
-    }, [
-        isLoading,
-        _children
-    ]);
+const translations$1 = {
+    pending: {
+        nb: 'venter',
+        sv: 'väntar',
+        en: 'pending'
+    }
+};
+function Button(props, ref) {
+    const { children: _children, color, isIconOnly, isLoading, variant, isPending: _isPending, ...restProps } = props;
+    const isPending = _isPending || isLoading;
     const className = buttonVariants({
         className: props.className,
         color,
         isIconOnly,
-        variant
+        variant,
+        isPending
+    });
+    const locale = _useLocale();
+    const { progressBarProps } = useProgressBar({
+        isIndeterminate: true,
+        'aria-label': translations$1.pending[locale]
     });
-    const children = widthOverride ? // remove margin for icon alignment
-    /*#__PURE__*/ jsx(LoadingSpinner, {
-        className: "!m-0 mx-auto animate-spin"
+    const children = isPending ? /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            _children,
+            /*#__PURE__*/ jsx(LoadingSpinner, {
+                className: "absolute m-auto motion-safe:animate-spin",
+                ...progressBarProps
+            })
+        ]
     }) : _children;
-    const style = {
-        ..._style,
-        width: widthOverride
-    };
     return isLinkProps$1(restProps) ? /*#__PURE__*/ jsx(Link, {
         ...restProps,
         className: className,
-        style: style,
         ref: ref,
         children: children
     }) : /*#__PURE__*/ jsx(Button$1, {
         ...restProps,
         className: className,
-        style: style,
+        isPending: isPending,
         ref: ref,
         children: children
     });
@@ -546,7 +554,8 @@ function InputAddonDivider() {
 }
 
 function Combobox(props, ref) {
-    const { className, children, description, errorMessage, isLoading, label, isInvalid: _isInvalid, ...restProps } = props;
+    const { className, children, description, errorMessage, isLoading, isPending: _isPending, label, isInvalid: _isInvalid, ...restProps } = props;
+    const isPending = _isPending || isLoading;
     // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
     // which will override any built in validation
     const isInvalid = errorMessage != null || _isInvalid;
@@ -571,7 +580,7 @@ function Combobox(props, ref) {
                         ref: ref
                     }),
                     /*#__PURE__*/ jsx(Button$1, {
-                        children: isLoading ? /*#__PURE__*/ jsx(LoadingSpinner, {
+                        children: isPending ? /*#__PURE__*/ jsx(LoadingSpinner, {
                             className: "animate-spin"
                         }) : /*#__PURE__*/ jsx(ChevronDown, {
                             className: dropdown.chevronIcon
@@ -998,7 +1007,7 @@ function Breadcrumb(props, ref) {
             href ? /*#__PURE__*/ jsx(Link, {
                 href: href,
                 // use outline instead of ring for focus marker that can be offset without creating a white background between the focus marker and the element content
-                className: "rounded-sm data-[focus-visible]:focus-visible:outline-focus focus:outline-none group-last:no-underline",
+                className: "rounded-sm data-[focus-visible]:outline-focus group-last:no-underline [&:not([data-focus-visible])]:outline-none",
                 children: children
             }) : children,
             /*#__PURE__*/ jsx(ChevronRight, {
@@ -1016,7 +1025,7 @@ function Backlink(props, ref) {
     const { className, children, withUnderline, ...restProps } = props;
     const Component = isLinkProps(props) ? Link : Button$1;
     return /*#__PURE__*/ jsxs(Component, {
-        className: cx(className, 'group flex max-w-fit cursor-pointer items-center gap-3 rounded-md p-2.5 no-underline focus-visible:outline-focus'),
+        className: cx(className, 'group flex max-w-fit cursor-pointer items-center gap-3 rounded-md p-2.5 no-underline data-[focus-visible]:outline-focus [&:not([data-focus-visible])]:outline-none'),
         ...restProps,
         // @ts-expect-error ignore the type of the ref here
         ref: ref,
@@ -1044,6 +1053,7 @@ const cardVariants = cva({
         // **** Heading ****
         '[&_[data-slot="heading"]]:inline',
         '[&_[data-slot="heading"]]:heading-s',
+        '[&_[data-slot="heading"]]:leading-6',
         '[&_[data-slot="heading"]]:w-fit',
         '[&_[data-slot="heading"]]:text-pretty',
         // **** Content ****
@@ -1071,11 +1081,13 @@ const cardVariants = cva({
         '[&_[data-slot="heading"]_[data-slot="card-link"]]:transition-colors',
         '[&_[data-slot="heading"]_[data-slot="card-link"]:hover]:border-b-current',
         // Mimic heading styles for the card link if placed in the heading slot. This is necessary to make the custom underline align with the link text
-        '[&_[data-slot="heading"]_[data-slot="card-link"]]:heading-s [&_[data-slot="heading"]_[data-slot="card-link"]]:text-pretty',
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:heading-s [&_[data-slot="heading"]_[data-slot="card-link"]]:text-pretty [&_[data-slot="heading"]_[data-slot="card-link"]]:leading-6',
         // **** Fail-safe for interactive elements ****
         // Make interactive elements clickable by themselves, while the rest of the card is clickable as a whole
         // The card is made clickable by a pseudo-element on the heading that covers the entire card
         '[&:not(:has([data-slot="card-link"]_a))_a:not([data-slot="card-link"])]:relative [&_button]:relative [&_input]:relative',
+        // Our Button component has position: relative by default, so we need to override that if it is used in a CardLink (to make the entire card clickable)
+        '[&_[data-slot="card-link"]_a]:static',
         // Place other interactive on top of the pseudo-element that makes the entire card clickable
         // by setting a higher z-index than the pseudo-element (which implicitly z-index 0)
         '[&_a:not([data-slot="card-link"])]:z-[1] [&_button]:z-[1] [&_input]:z-[1]'
@@ -1120,8 +1132,8 @@ const cardLinkVariants = cva({
                 'after:rounded-[calc(theme(borderRadius.2xl)-theme(borderWidth.DEFAULT))]',
                 // **** Focus ****
                 'focus-visible:outline-none',
-                'focus-visible:after:outline-focus',
-                'focus-visible:after:outline-offset-2',
+                'data-[focus-visible]:after:outline-focus',
+                'data-[focus-visible]:after:outline-offset-2',
                 // **** Hover ****
                 // Links are underlined by default, and the underline is removed on hover.
                 // So we make sure that also happens when the user hovers the clickable area.
@@ -1134,9 +1146,9 @@ const cardLinkVariants = cva({
                 '[&_a]:after:inset-[calc(theme(borderWidth.DEFAULT)*-1)]',
                 '[&_a]:after:rounded-[calc(theme(borderRadius.2xl)-theme(borderWidth.DEFAULT))]',
                 // **** Focus ****
-                '[&_a:focus-visible]:outline-none',
-                '[&_a:focus-visible]:after:outline-focus',
-                '[&_a:focus-visible]:after:outline-offset-2',
+                '[&_a[data-focus-visible]]:outline-none',
+                '[&_a[data-focus-visible]]:after:outline-focus',
+                '[&_a[data-focus-visible]]:after:outline-offset-2',
                 // **** Hover ****
                 // Links are underlined by default, and the underline is removed on hover.
                 // So we make sure that also happens when the user hovers the card.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "2.0.0-canary.39",
+  "version": "2.0.0-canary.40",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"