@vygruppen/spor-react 11.3.10 → 12.0.1

package/src/breadcrumb/Breadcrumb.tsx

@@ -1,41 +1,56 @@
+"use client";
+
+import React, { forwardRef } from "react";
 import {
   Breadcrumb as ChakraBreadcrumb,
-  BreadcrumbItem as ChakraBreadcrumbItem,
+  BreadcrumbRootProps,
   BreadcrumbLink as ChakraBreadcrumbLink,
-  BreadcrumbProps as ChakraBreadcrumbProps,
-  useColorModeValue,
+  BreadcrumbCurrentLink as ChakraBreadcrumbCurrentLink,
+  BreadcrumbEllipsis as ChakraBreadcrumbEllipsis,
 } from "@chakra-ui/react";
 import { DropdownRightFill18Icon } from "@vygruppen/spor-icon-react";
-import React from "react";
-
-type BreadcrumbProps = Omit<ChakraBreadcrumbProps, "variant"> & {
-  variant?: "base" | "ghost";
-};
 /**
  * A breadcrumb component.
  *
  * Used to create customizable breadcrumbs.
- *
+ * BreadcrumbCurrentLink is used to set the last breadcrumb.
+ * BreadcrumbLink is used to set the other breadcrumbs.
  * ```tsx
  * <Breadcrumb>
- *   <BreadcrumbItem>
  *     <BreadcrumbLink href="/">Home</BreadcrumbLink>
- *   </BreadcrumbItem>
- *   <BreadcrumbItem isCurrentPage={true}>
- *    <BreadcrumbLink href="/about">About</BreadcrumbLink>
- *  </BreadcrumbItem>
+ *    <BreadcrumbLink href="/Breadcrumb">Breadcrumb</BreadcrumbLink>
+ *    <BreadcrumbCurrentLink href="/about">About</BreadcrumbCurrentLink>
  * </Breadcrumb>
  * ```
  */
-export const Breadcrumb = (props: BreadcrumbProps) => {
-  const iconColor = useColorModeValue("blackAlpha.400", "whiteAlpha.400");
-  return (
-    <ChakraBreadcrumb
-      separator={<DropdownRightFill18Icon color={iconColor} />}
-      {...props}
-    />
-  );
-};
+export const Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbRootProps>(
+  ({ children, ...props }, ref) => {
+    const validChildren = React.Children.toArray(children).filter(
+      React.isValidElement,
+    );
+
+    return (
+      <ChakraBreadcrumb.Root ref={ref} {...props}>
+        <ChakraBreadcrumb.List>
+          {validChildren.map((child, index) => {
+            const isLast = index === validChildren.length - 1;
+            return (
+              <React.Fragment key={index}>
+                <ChakraBreadcrumb.Item>{child}</ChakraBreadcrumb.Item>
+                {!isLast && (
+                  <ChakraBreadcrumb.Separator aria-hidden="true">
+                    <DropdownRightFill18Icon />
+                  </ChakraBreadcrumb.Separator>
+                )}
+              </React.Fragment>
+            );
+          })}
+        </ChakraBreadcrumb.List>
+      </ChakraBreadcrumb.Root>
+    );
+  },
+);
 
-export const BreadcrumbItem = ChakraBreadcrumbItem;
 export const BreadcrumbLink = ChakraBreadcrumbLink;
+export const BreadcrumbCurrentLink = ChakraBreadcrumbCurrentLink;
+export const BreadcrumbEllipsis = ChakraBreadcrumbEllipsis;

package/src/button/Button.tsx

@@ -1,41 +1,41 @@
 import {
   Box,
   Center,
-  ButtonProps as ChakraButtonProps,
+  Button as ChakraButton,
   Flex,
-  forwardRef,
-  SpaceProps,
-  useButtonGroup,
-  useStyleConfig,
+  Span,
+  type ButtonProps as ChakraButtonProps,
+  type RecipeVariantProps,
 } from "@chakra-ui/react";
-import React from "react";
+import React, { forwardRef, PropsWithChildren } from "react";
 import { createTexts, useTranslation } from "../i18n";
 import { ColorInlineLoader } from "../loader";
+import { buttonRecipe } from "../theme/recipes/button";
+
+export type ButtonVariantProps = RecipeVariantProps<typeof buttonRecipe>;
 
 export type ButtonProps = Exclude<
   ChakraButtonProps,
-  "colorScheme" | "size" | "variant"
-> & {
-  /**
-   * The size of the button.
-   *
-   * Defaults to "md"
-   * */
-  size?: "xs" | "sm" | "md" | "lg";
-  /** The different variants of a button
-   *
-   * Defaults to "primary".
-   *
-   * "control" is deprecated, and will be removed in a future version
-   */
-  variant?:
-    | "control"
-    | "primary"
-    | "secondary"
-    | "tertiary"
-    | "ghost"
-    | "floating";
-};
+  "size" | "variant" | "colorPalette"
+> &
+  PropsWithChildren<ButtonVariantProps> & {
+    /* Boolean value for loading state */
+    loading?: boolean;
+    /* You may display a different loading text */
+    loadingText?: React.ReactNode;
+    /* Display icon to the left */
+    leftIcon?: React.ReactNode;
+    /* Display icon to the right */
+    rightIcon?: React.ReactNode;
+    /* "primary" | "secondary" | "tertiary" | "ghost" | "floating". Defaults to primary. */
+    variant: "primary" | "secondary" | "tertiary" | "ghost" | "floating";
+    /* "lg" | "md" | "sm" | "xs". Defaults to md. */
+    size?: "lg" | "md" | "sm" | "xs";
+    /* Link to a downloadable resource. */
+    download?: string;
+    /* Use this to specify a path combined with as="a" */
+    href?: string;
+  };
 /**
  * Buttons are used to trigger actions.
  *
@@ -63,86 +63,67 @@ export type ButtonProps = Exclude<
  *
  * @see https://spor.vy.no/components/button
  */
-export const Button = forwardRef<ButtonProps, "button">((props, ref) => {
-  const {
-    as = "button",
-    type = "button",
-    fontWeight,
-    size,
-    children,
-    isLoading,
-    isDisabled,
-    leftIcon,
-    rightIcon,
-    sx,
-    ...rest
-  } = props;
-  const ariaLabel = useCorrectAriaLabel(props);
-  const buttonGroup = useButtonGroup();
-  const finalSize = (size ?? buttonGroup?.size ?? "md") as Required<
-    ButtonProps["size"]
-  >;
-  const styles = useStyleConfig("Button", {
-    ...buttonGroup,
-    ...rest,
-    size: finalSize,
-    leftIcon,
-    rightIcon,
-  });
 
-  // We want to explicitly allow to override the fontWeight prop
-  if (fontWeight) {
-    styles.fontWeight = fontWeight;
-  }
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    const {
+      loading,
+      disabled,
+      loadingText,
+      variant = "primary",
+      size = "md",
+      leftIcon,
+      rightIcon,
+      type = "button",
+      children,
+      ...rest
+    } = props;
+    const ariaLabel = useCorrectAriaLabel(props);
+
+    const buttonContent = (
+      <>
+        {leftIcon}
+        {children}
+        {rightIcon && <Span marginLeft="auto">{rightIcon}</Span>}
+      </>
+    );
 
-  return (
-    <Box
-      {...rest}
-      as={as}
-      type={type}
-      sx={{ ...styles, ...sx }}
-      ref={ref}
-      aria-label={ariaLabel}
-      aria-busy={isLoading}
-      disabled={isDisabled || isLoading}
-      position="relative"
-      fontFamily={"Vy Sans"}
-    >
-      {isLoading && (
-        <Center position="absolute" right={0} left={0} top={1} bottom={0}>
-          <ColorInlineLoader
-            maxWidth={getLoaderWidth(finalSize)}
-            width="80%"
-            marginX={2}
-            marginY={2}
-          />
-        </Center>
-      )}
-      <Flex
-        gap={1}
-        flex={1}
-        alignItems="center"
-        justifyContent={rightIcon ? "space-between" : "center"}
-        visibility={isLoading ? "hidden" : "visible"}
-        aria-hidden={isLoading}
+    return (
+      <ChakraButton
+        type={type}
+        ref={ref}
+        aria-label={ariaLabel}
+        aria-busy={loading}
+        disabled={disabled || loading}
+        position="relative"
+        variant={variant}
+        size={size}
+        {...rest}
       >
-        <Flex gap={1} alignItems="center">
-          {leftIcon}
-          <Box
-            visibility={isLoading ? "hidden" : "visible"}
-            whiteSpace="normal"
-            textAlign="center"
-          >
-            {children}
-          </Box>
-        </Flex>
-        {rightIcon}
-      </Flex>
-    </Box>
-  );
-});
+        {loading ? (
+          <>
+            <Flex gap="1" visibility="hidden">
+              {buttonContent}
+            </Flex>
+            <Center position="absolute" right={0} left={0} top={1} bottom={0}>
+              <ColorInlineLoader
+                maxWidth={getLoaderWidth(size)}
+                width="80%"
+                marginX={2}
+                marginY={2}
+              />
+              {loadingText && <Box>{loadingText}</Box>}
+            </Center>
+          </>
+        ) : (
+          buttonContent
+        )}
+      </ChakraButton>
+    );
+  },
+);
 
-function getLoaderWidth(size: Required<ButtonProps["size"]>) {
+function getLoaderWidth(size: ButtonProps["size"]): string {
   switch (size) {
     case "xs":
       return "4rem";
@@ -158,7 +139,7 @@ function getLoaderWidth(size: Required<ButtonProps["size"]>) {
 
 function useCorrectAriaLabel(props: ButtonProps): string {
   const { t } = useTranslation();
-  if (props.isLoading) {
+  if (props.loading) {
     return String(props.loadingText) ?? t(texts.loadingText);
   }
   return props["aria-label"] as string;

package/src/button/ButtonGroup.tsx

@@ -1,13 +1,21 @@
+"use client";
+
 import {
-  ButtonGroup as ChakraButtonGroup,
-  ButtonGroupProps as ChakraButtonGroupProps,
-  forwardRef,
+  type GroupProps as ChakraGroupProps,
+  Group as ChakraGroup,
+  type RecipeVariantProps,
+  chakra,
 } from "@chakra-ui/react";
-import React from "react";
+import React, { forwardRef, PropsWithChildren } from "react";
+import { groupRecipe } from "../theme/recipes/group";
+
+export type GroupVariantProps = RecipeVariantProps<typeof groupRecipe>;
+
+export type ButtonGroupProps = ChakraGroupProps &
+  PropsWithChildren<GroupVariantProps>;
 
-export type ButtonGroupProps = ChakraButtonGroupProps;
 /**
- * Group buttons together with a `ButtonGroup`!
+ * Used to group or attach buttons together.
  *
  * If you have more than one button next to eachother, you might want to add a `ButtonGroup` to group them.
  *
@@ -18,26 +26,43 @@ export type ButtonGroupProps = ChakraButtonGroupProps;
  * </ButtonGroup>
  * ```
  *
- * You can specify the size of all buttons in a group with the `size` prop. You can also set the same variant across all buttons with the `variant` prop.
+ *
+ * Attach buttons together with the `attached` prop.
  *
  * ```tsx
- * <ButtonGroup variant="secondary" size="md">
- *   <Button>Open</Button>
- *   <Button>Save</Button>
+ * <ButtonGroup attached>
+ *   <Button variant="primary">Open</Button>
+ *   <IconButton variant="ghost">
+ *     <SaveIcon aria-label="Save"/>
+ *   </IconButton>
  * </ButtonGroup>
  * ```
  *
- * Finally, you can join several buttons together with the `isAttached` prop.
+ * Use the `grow` prop to make the buttons grow to fill the available space.
  *
  * ```tsx
- * <ButtonGroup variant="secondary" size="md" isAttached>
- *   <Button>Open</Button>
- *   <IconButton>
- *     <SaveIcon aria-label="Save"/>
- *   </IconButton>
+ * <ButtonGroup grow>
+ *  <Button variant="primary">Open</Button>
+ *  <Button variant="secondary">Save</Button>
  * </ButtonGroup>
- * ```
  */
-export const ButtonGroup = forwardRef<ButtonGroupProps, "div">((props, ref) => (
-  <ChakraButtonGroup {...props} ref={ref} />
-));
+
+const Group = chakra(ChakraGroup, groupRecipe);
+
+export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
+  (props, ref) => {
+    const { children, disabled, grow, attached, ...rest } = props;
+
+    return (
+      <Group
+        {...rest}
+        ref={ref}
+        attached={attached}
+        grow={grow}
+        disabled={disabled}
+      >
+        {children}
+      </Group>
+    );
+  },
+);

package/src/button/Clipboard.tsx

@@ -0,0 +1,82 @@
+import { Clipboard as ChakraClipboard } from "@chakra-ui/react";
+import * as React from "react";
+import { createTexts, useTranslation } from "@/i18n";
+import {
+  CheckmarkFill18Icon,
+  CopyOutline18Icon,
+} from "@vygruppen/spor-icon-react";
+import { Button, ButtonProps } from "./Button";
+import { Text } from "@/typography";
+
+/**
+ *
+ * Creates a button that copies text to the clipboard.
+ *
+ * ```tsx
+ * <Clipboard value="Some value to be copied">
+ *  <ClipboardButton />
+ * </Clipboard>
+ */
+
+const ClipboardIcon = React.forwardRef<
+  HTMLDivElement,
+  ChakraClipboard.IndicatorProps
+>((props, ref) => {
+  return (
+    <ChakraClipboard.Indicator
+      copied={<CheckmarkFill18Icon />}
+      {...props}
+      ref={ref}
+    >
+      <CopyOutline18Icon />
+    </ChakraClipboard.Indicator>
+  );
+});
+
+const ClipboardCopyText = React.forwardRef<
+  HTMLDivElement,
+  ChakraClipboard.IndicatorProps
+>((props, ref) => {
+  const { t } = useTranslation();
+  return (
+    <ChakraClipboard.Indicator
+      copied={<Text variant="xs">{t(texts.copied)}</Text>}
+      {...props}
+      ref={ref}
+    >
+      <Text variant="xs">{t(texts.copy)}</Text>
+    </ChakraClipboard.Indicator>
+  );
+});
+
+type ClipboardButtonProps = ButtonProps;
+
+export const ClipboardButton = React.forwardRef<
+  HTMLButtonElement,
+  ClipboardButtonProps
+>((props, ref) => {
+  return (
+    <ChakraClipboard.Trigger asChild>
+      <Button ref={ref} size="xs" leftIcon={<ClipboardIcon />} {...props}>
+        <ClipboardCopyText />
+      </Button>
+    </ChakraClipboard.Trigger>
+  );
+});
+
+export const Clipboard = ChakraClipboard.Root;
+
+const texts = createTexts({
+  copy: {
+    nb: "Kopier",
+    nn: "Kopier",
+    en: "Copy",
+    sv: "Kopiera",
+  },
+  copied: {
+    nb: "Kopiert",
+    nn: "Kopiert",
+    en: "Copied",
+    sv: "Kopierad",
+  },
+});

package/src/button/CloseButton.tsx

@@ -1,10 +1,11 @@
-import { forwardRef } from "@chakra-ui/react";
+"use client";
+
 import {
   CloseFill18Icon,
   CloseFill24Icon,
   CloseFill30Icon,
 } from "@vygruppen/spor-icon-react";
-import React from "react";
+import React, { forwardRef } from "react";
 import { createTexts, useTranslation } from "../i18n";
 import { IconButton, IconButtonProps } from "./IconButton";
 
@@ -25,7 +26,7 @@ export type CloseButtonProps = Omit<
  * <CloseButton onClick={closeModal} />
  * ```
  */
-export const CloseButton = forwardRef<CloseButtonProps, "button">(
+export const CloseButton = forwardRef<HTMLButtonElement, CloseButtonProps>(
   ({ size = "sm", ...props }, ref) => {
     const { t } = useTranslation();
     return (

package/src/button/FloatingActionButton.tsx

@@ -1,22 +1,27 @@
+"use client";
+
 import {
   Box,
   BoxProps,
-  ComponentWithAs,
-  forwardRef,
-  useMultiStyleConfig,
+  RecipeVariantProps,
+  Text,
+  useSlotRecipe,
 } from "@chakra-ui/react";
-import { motion } from "framer-motion";
-import React, { useEffect } from "react";
+import React, { forwardRef, PropsWithChildren, useEffect } from "react";
+import { floatingActionButtonSlotRecipe } from "../theme/slot-recipes/floating-action-button";
 
-const MotionBox = motion(Box);
+type FloatingActionButtonVariantProps = RecipeVariantProps<
+  typeof floatingActionButtonSlotRecipe
+>;
 
-type FloatingActionButtonProps = BoxProps & {
-  variant?: "accent" | "base" | "brand";
-  placement?: "bottom right" | "bottom left" | "top right" | "top left";
-  icon: React.ReactNode;
-  children: React.ReactNode;
-  isTextVisible?: boolean;
-};
+type FloatingActionButtonProps = BoxProps &
+  PropsWithChildren<FloatingActionButtonVariantProps> & {
+    variant?: "accent" | "core" | "brand";
+    placement?: "bottom right" | "bottom left" | "top right" | "top left";
+    icon: React.ReactNode;
+    children: React.ReactNode;
+    isTextVisible?: boolean;
+  };
 
 /**
  * Creates a floating action button.
@@ -31,8 +36,8 @@ type FloatingActionButtonProps = BoxProps & {
  * />
  */
 export const FloatingActionButton = forwardRef<
-  FloatingActionButtonProps,
-  ComponentWithAs<"a" | "button">
+  HTMLButtonElement,
+  FloatingActionButtonProps
 >(
   (
     {
@@ -65,39 +70,28 @@ export const FloatingActionButton = forwardRef<
       setIsTextVisible(!!externalIsTextVisible);
     }, [externalIsTextVisible]);
 
-    const style = useMultiStyleConfig("FloatingActionButton", {
+    const recipe = useSlotRecipe({ key: "floatingActionButton" });
+    const style = recipe({
       variant,
-      isTextVisible,
       placement,
     });
+
     return (
-      <MotionBox
-        __css={style.container}
-        aria-label={children}
+      <Box
+        css={style.root}
+        as="button"
+        aria-label={typeof children === "string" ? children : undefined}
         ref={ref}
         {...props}
+        aria-expanded={isTextVisible}
       >
-        <Box __css={style.icon}>{icon}</Box>
-        <MotionBox
-          animate={isTextVisible ? "show" : "hide"}
-          initial={externalIsTextVisible ? "show" : "hide"}
-          variants={{
-            show: {
-              opacity: 1,
-              width: "auto",
-              visibility: "visible",
-            },
-            hide: {
-              opacity: 0,
-              width: 0,
-              visibility: "hidden",
-            },
-          }}
-          __css={style.text}
-        >
-          {children}
-        </MotionBox>
-      </MotionBox>
+        <Box css={style.icon}>{icon}</Box>
+        {isTextVisible && (
+          <Text data-state="open" css={style.text}>
+            {children}
+          </Text>
+        )}
+      </Box>
     );
   },
 );