@obosbbl/grunnmuren-react 3.3.5 → 3.4.1

package/dist/__stories__/form-validation.stories.cjs

@@ -7,6 +7,61 @@ var grunnmurenIconsReact = require('@obosbbl/grunnmuren-icons-react');
 var cva = require('cva');
 var reactAria = require('react-aria');
 
+const formField = cva.cx('group flex flex-col gap-2');
+const formFieldError = cva.cx('w-fit bg-red-light px-2 py-1 text-red text-sm leading-6', 'group-data-[slot=file-upload]:rounded-lg');
+const input = cva.cva({
+    base: [
+        // All inputs should always have a white background (this also ensures that type="search" on Safri doesn't get a gray background)
+        'bg-white',
+        // Use box-content to enable auto width based on number of characters (size)
+        // Setting min-height to prevent the input from collapsing in Safari
+        // Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
+        'box-content min-h-6 py-2.5',
+        'rounded-md font-normal text-base leading-6 placeholder-[#727070] outline-hidden ring-1 ring-black',
+        // invalid styles
+        'group-data-invalid:ring-focus group-data-invalid:ring-red',
+        // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
+        'appearance-none'
+    ],
+    variants: {
+        // Focus rings. Can either be :focus or :focus-visible based on the needs of the particular component.
+        focusModifier: {
+            focus: 'focus:ring-focus group-data-invalid:focus:ring-3 group-data-invalid:focus:ring-red',
+            visible: 'data-focus-visible:ring-focus group-data-invalid:data-focus-visible:ring-3 group-data-invalid:data-focus-visible:ring-red'
+        },
+        isGrouped: {
+            false: 'px-3',
+            true: '!ring-0 flex-1'
+        }
+    },
+    defaultVariants: {
+        focusModifier: 'focus',
+        isGrouped: false
+    }
+});
+const inputGroup = cva.cx([
+    'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black focus-within:ring-focus',
+    'group-data-invalid:ring-focus group-data-invalid:ring-red group-data-invalid:focus-within:ring-3 group-data-invalid:focus-within:ring-red'
+]);
+({
+    popover: cva.cx('data-entering:fade-in data-exiting:fade-out min-w-(--trigger-width) overflow-y-auto rounded-md border border-black bg-white shadow-sm data-entering:animate-in data-exiting:animate-out'),
+    // overflow-x-hidden is needed to prevent visible vertical scrollbars from overflowing the border radius of the popover
+    listbox: cva.cx('max-h-100 overflow-x-hidden text-sm outline-hidden'),
+    chevronIcon: cva.cx('text-base transition-transform duration-150 group-data-open:rotate-180 motion-reduce:transition-none')
+});
+const animateIconVariants = cva.cva({
+    base: '*:[svg]:shrink-0 *:[svg]:transition-transform',
+    variants: {
+        animateIcon: {
+            right: 'hover:*:[svg]:motion-safe:translate-x-1',
+            left: 'hover:*:[svg]:motion-safe:-translate-x-1',
+            down: 'hover:*:[svg]:motion-safe:translate-y-1',
+            up: 'hover:*:[svg]:motion-safe:-translate-y-1',
+            'up-right': 'hover:*:[svg]:motion-safe:-translate-y-0.5 hover:*:[svg]:motion-safe:translate-x-0.5'
+        }
+    }
+});
+
 const translations = {
     pending: {
         nb: 'venter',
@@ -24,38 +79,38 @@ const translations = {
 
 /**
  * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
- */ const buttonVariants = cva.cva({
+ */ const buttonVariants = cva.compose(animateIconVariants, cva.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'
     ],
     variants: {
         /**
-     * The variant of the button
-     * @default primary
-     */ variant: {
+       * The variant of the button
+       * @default primary
+       */ variant: {
             primary: 'no-underline',
             // by using an inset box-shadow to emulate a border instead of an actual border, the button size will be equal regardless of the variant
             secondary: 'border-2 border-current no-underline hover:border-transparent',
             tertiary: 'underline hover:no-underline'
         },
         /**
-     * Adjusts the color of the button for usage on different backgrounds.
-     * @default blue
-     */ color: {
+       * Adjusts the color of the button for usage on different backgrounds.
+       * @default blue
+       */ color: {
             blue: 'focus-visible:outline-focus',
             mint: 'focus-visible:outline-focus focus-visible:outline-mint',
             white: 'focus-visible:outline-focus focus-visible:outline-white'
         },
         /**
-     * When the button is without text, but with a single icon.
-     * @default false
-     */ isIconOnly: {
+       * When the button is without text, but with a single icon.
+       * @default false
+       */ 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: '!text-transparent relative',
+            true: 'relative text-transparent!',
             false: null
         }
     },
@@ -114,15 +169,17 @@ const translations = {
         isIconOnly: false,
         isPending: false
     }
-});
+}));
 const ButtonContext = /*#__PURE__*/ react.createContext({});
 function isLinkProps(props) {
     return !!props.href;
 }
 function Button({ ref = null, ...props }) {
     [props, ref] = reactAriaComponents.useContextProps(props, ref, ButtonContext);
-    const { children: _children, color, isIconOnly, variant, isPending, ...restProps } = props;
+    const { animateIcon, children: _children, color, isIconOnly, variant, isPending, ...restProps } = props;
     const className = buttonVariants({
+        // Don't animate the icon when we're pending, as it affects the loading spinner
+        animateIcon: isPending ? undefined : animateIcon,
         className: props.className,
         color,
         isIconOnly,
@@ -157,49 +214,6 @@ function Button({ ref = null, ...props }) {
     });
 }
 
-const formField = cva.cx('group flex flex-col gap-2');
-const formFieldError = cva.cx('w-fit bg-red-light px-2 py-1 text-red text-sm leading-6', 'group-data-[slot=file-upload]:rounded-lg');
-const input = cva.cva({
-    base: [
-        // All inputs should always have a white background (this also ensures that type="search" on Safri doesn't get a gray background)
-        'bg-white',
-        // Use box-content to enable auto width based on number of characters (size)
-        // Setting min-height to prevent the input from collapsing in Safari
-        // Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
-        'box-content min-h-6 py-2.5',
-        'rounded-md font-normal text-base leading-6 placeholder-[#727070] outline-hidden ring-1 ring-black',
-        // invalid styles
-        'group-data-invalid:ring-focus group-data-invalid:ring-red',
-        // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
-        'appearance-none'
-    ],
-    variants: {
-        // Focus rings. Can either be :focus or :focus-visible based on the needs of the particular component.
-        focusModifier: {
-            focus: 'focus:ring-focus group-data-invalid:focus:ring-3 group-data-invalid:focus:ring-red',
-            visible: 'data-focus-visible:ring-focus group-data-invalid:data-focus-visible:ring-3 group-data-invalid:data-focus-visible:ring-red'
-        },
-        isGrouped: {
-            false: 'px-3',
-            true: '!ring-0 flex-1'
-        }
-    },
-    defaultVariants: {
-        focusModifier: 'focus',
-        isGrouped: false
-    }
-});
-const inputGroup = cva.cx([
-    'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black focus-within:ring-focus',
-    'group-data-invalid:ring-focus group-data-invalid:ring-red group-data-invalid:focus-within:ring-3 group-data-invalid:focus-within:ring-red'
-]);
-({
-    popover: cva.cx('data-entering:fade-in data-exiting:fade-out min-w-(--trigger-width) overflow-y-auto rounded-md border border-black bg-white shadow-sm data-entering:animate-in data-exiting:animate-out'),
-    // overflow-x-hidden is needed to prevent visible vertical scrollbars from overflowing the border radius of the popover
-    listbox: cva.cx('max-h-100 overflow-x-hidden text-sm outline-hidden'),
-    chevronIcon: cva.cx('text-base transition-transform duration-150 group-data-open:rotate-180 motion-reduce:transition-none')
-});
-
 function InputAddonDivider() {
     return /*#__PURE__*/ jsxRuntime.jsx("span", {
         className: "block h-6 w-px flex-none bg-black"
@@ -239,7 +253,7 @@ function ErrorMessage(props) {
 function Label(props) {
     const { children, className, ...restProps } = props;
     return /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Label, {
-        className: cva.cx(className, 'font-semibold leading-7'),
+        className: cva.cx(className, 'font-medium leading-7'),
         ...restProps,
         children: children
     });

package/dist/__stories__/form-validation.stories.js

@@ -2,9 +2,64 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { createContext, useState } from 'react';
 import { useLocale, useContextProps, Link, Button as Button$1, Text, FieldError, Label as Label$1, TextField as TextField$1, Group, Input, Form as Form$1 } from 'react-aria-components';
 import { LoadingSpinner } from '@obosbbl/grunnmuren-icons-react';
-import { cva, cx, compose } from 'cva';
+import { cx, cva, compose } from 'cva';
 import { useProgressBar } from 'react-aria';
 
+const formField = cx('group flex flex-col gap-2');
+const formFieldError = cx('w-fit bg-red-light px-2 py-1 text-red text-sm leading-6', 'group-data-[slot=file-upload]:rounded-lg');
+const input = cva({
+    base: [
+        // All inputs should always have a white background (this also ensures that type="search" on Safri doesn't get a gray background)
+        'bg-white',
+        // Use box-content to enable auto width based on number of characters (size)
+        // Setting min-height to prevent the input from collapsing in Safari
+        // Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
+        'box-content min-h-6 py-2.5',
+        'rounded-md font-normal text-base leading-6 placeholder-[#727070] outline-hidden ring-1 ring-black',
+        // invalid styles
+        'group-data-invalid:ring-focus group-data-invalid:ring-red',
+        // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
+        'appearance-none'
+    ],
+    variants: {
+        // Focus rings. Can either be :focus or :focus-visible based on the needs of the particular component.
+        focusModifier: {
+            focus: 'focus:ring-focus group-data-invalid:focus:ring-3 group-data-invalid:focus:ring-red',
+            visible: 'data-focus-visible:ring-focus group-data-invalid:data-focus-visible:ring-3 group-data-invalid:data-focus-visible:ring-red'
+        },
+        isGrouped: {
+            false: 'px-3',
+            true: '!ring-0 flex-1'
+        }
+    },
+    defaultVariants: {
+        focusModifier: 'focus',
+        isGrouped: false
+    }
+});
+const inputGroup = cx([
+    'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black focus-within:ring-focus',
+    'group-data-invalid:ring-focus group-data-invalid:ring-red group-data-invalid:focus-within:ring-3 group-data-invalid:focus-within:ring-red'
+]);
+({
+    popover: cx('data-entering:fade-in data-exiting:fade-out min-w-(--trigger-width) overflow-y-auto rounded-md border border-black bg-white shadow-sm data-entering:animate-in data-exiting:animate-out'),
+    // overflow-x-hidden is needed to prevent visible vertical scrollbars from overflowing the border radius of the popover
+    listbox: cx('max-h-100 overflow-x-hidden text-sm outline-hidden'),
+    chevronIcon: cx('text-base transition-transform duration-150 group-data-open:rotate-180 motion-reduce:transition-none')
+});
+const animateIconVariants = cva({
+    base: '*:[svg]:shrink-0 *:[svg]:transition-transform',
+    variants: {
+        animateIcon: {
+            right: 'hover:*:[svg]:motion-safe:translate-x-1',
+            left: 'hover:*:[svg]:motion-safe:-translate-x-1',
+            down: 'hover:*:[svg]:motion-safe:translate-y-1',
+            up: 'hover:*:[svg]:motion-safe:-translate-y-1',
+            'up-right': 'hover:*:[svg]:motion-safe:-translate-y-0.5 hover:*:[svg]:motion-safe:translate-x-0.5'
+        }
+    }
+});
+
 const translations = {
     pending: {
         nb: 'venter',
@@ -22,38 +77,38 @@ const translations = {
 
 /**
  * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
- */ const buttonVariants = cva({
+ */ const buttonVariants = compose(animateIconVariants, 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'
     ],
     variants: {
         /**
-     * The variant of the button
-     * @default primary
-     */ variant: {
+       * The variant of the button
+       * @default primary
+       */ variant: {
             primary: 'no-underline',
             // by using an inset box-shadow to emulate a border instead of an actual border, the button size will be equal regardless of the variant
             secondary: 'border-2 border-current no-underline hover:border-transparent',
             tertiary: 'underline hover:no-underline'
         },
         /**
-     * Adjusts the color of the button for usage on different backgrounds.
-     * @default blue
-     */ color: {
+       * Adjusts the color of the button for usage on different backgrounds.
+       * @default blue
+       */ color: {
             blue: 'focus-visible:outline-focus',
             mint: 'focus-visible:outline-focus focus-visible:outline-mint',
             white: 'focus-visible:outline-focus focus-visible:outline-white'
         },
         /**
-     * When the button is without text, but with a single icon.
-     * @default false
-     */ isIconOnly: {
+       * When the button is without text, but with a single icon.
+       * @default false
+       */ 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: '!text-transparent relative',
+            true: 'relative text-transparent!',
             false: null
         }
     },
@@ -112,15 +167,17 @@ const translations = {
         isIconOnly: false,
         isPending: false
     }
-});
+}));
 const ButtonContext = /*#__PURE__*/ createContext({});
 function isLinkProps(props) {
     return !!props.href;
 }
 function Button({ ref = null, ...props }) {
     [props, ref] = useContextProps(props, ref, ButtonContext);
-    const { children: _children, color, isIconOnly, variant, isPending, ...restProps } = props;
+    const { animateIcon, children: _children, color, isIconOnly, variant, isPending, ...restProps } = props;
     const className = buttonVariants({
+        // Don't animate the icon when we're pending, as it affects the loading spinner
+        animateIcon: isPending ? undefined : animateIcon,
         className: props.className,
         color,
         isIconOnly,
@@ -155,49 +212,6 @@ function Button({ ref = null, ...props }) {
     });
 }
 
-const formField = cx('group flex flex-col gap-2');
-const formFieldError = cx('w-fit bg-red-light px-2 py-1 text-red text-sm leading-6', 'group-data-[slot=file-upload]:rounded-lg');
-const input = cva({
-    base: [
-        // All inputs should always have a white background (this also ensures that type="search" on Safri doesn't get a gray background)
-        'bg-white',
-        // Use box-content to enable auto width based on number of characters (size)
-        // Setting min-height to prevent the input from collapsing in Safari
-        // Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
-        'box-content min-h-6 py-2.5',
-        'rounded-md font-normal text-base leading-6 placeholder-[#727070] outline-hidden ring-1 ring-black',
-        // invalid styles
-        'group-data-invalid:ring-focus group-data-invalid:ring-red',
-        // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
-        'appearance-none'
-    ],
-    variants: {
-        // Focus rings. Can either be :focus or :focus-visible based on the needs of the particular component.
-        focusModifier: {
-            focus: 'focus:ring-focus group-data-invalid:focus:ring-3 group-data-invalid:focus:ring-red',
-            visible: 'data-focus-visible:ring-focus group-data-invalid:data-focus-visible:ring-3 group-data-invalid:data-focus-visible:ring-red'
-        },
-        isGrouped: {
-            false: 'px-3',
-            true: '!ring-0 flex-1'
-        }
-    },
-    defaultVariants: {
-        focusModifier: 'focus',
-        isGrouped: false
-    }
-});
-const inputGroup = cx([
-    'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black focus-within:ring-focus',
-    'group-data-invalid:ring-focus group-data-invalid:ring-red group-data-invalid:focus-within:ring-3 group-data-invalid:focus-within:ring-red'
-]);
-({
-    popover: cx('data-entering:fade-in data-exiting:fade-out min-w-(--trigger-width) overflow-y-auto rounded-md border border-black bg-white shadow-sm data-entering:animate-in data-exiting:animate-out'),
-    // overflow-x-hidden is needed to prevent visible vertical scrollbars from overflowing the border radius of the popover
-    listbox: cx('max-h-100 overflow-x-hidden text-sm outline-hidden'),
-    chevronIcon: cx('text-base transition-transform duration-150 group-data-open:rotate-180 motion-reduce:transition-none')
-});
-
 function InputAddonDivider() {
     return /*#__PURE__*/ jsx("span", {
         className: "block h-6 w-px flex-none bg-black"
@@ -237,7 +251,7 @@ function ErrorMessage(props) {
 function Label(props) {
     const { children, className, ...restProps } = props;
     return /*#__PURE__*/ jsx(Label$1, {
-        className: cx(className, 'font-semibold leading-7'),
+        className: cx(className, 'font-medium leading-7'),
         ...restProps,
         children: children
     });

package/dist/__stories__/layout.stories.cjs

@@ -298,6 +298,7 @@ const cardLinkVariants = cva.cva({
     });
 };
 
+const HeroContext = /*#__PURE__*/ react.createContext(null);
 // Common variant for "standard" and "full-bleed" Hero variants
 const oneColumnLayout = [
     // Vertical spacing in the <Content>
@@ -395,6 +396,12 @@ const Hero = ({ variant, className, children, ...rest })=>{
     });
     return /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Provider, {
         values: [
+            [
+                HeroContext,
+                {
+                    variant
+                }
+            ],
             [
                 HeadingContext,
                 {

package/dist/__stories__/layout.stories.js

@@ -296,6 +296,7 @@ const cardLinkVariants = cva({
     });
 };
 
+const HeroContext = /*#__PURE__*/ createContext(null);
 // Common variant for "standard" and "full-bleed" Hero variants
 const oneColumnLayout = [
     // Vertical spacing in the <Content>
@@ -393,6 +394,12 @@ const Hero = ({ variant, className, children, ...rest })=>{
     });
     return /*#__PURE__*/ jsx(Provider, {
         values: [
+            [
+                HeroContext,
+                {
+                    variant
+                }
+            ],
             [
                 HeadingContext,
                 {