@vygruppen/spor-react 11.3.9 → 12.0.0

package/src/layout/index.tsx

@@ -5,12 +5,12 @@ export {
   Flex,
   Grid,
   GridItem,
+  Stack,
   HStack,
   SimpleGrid,
   Spacer,
   VStack,
-  Wrap,
-  WrapItem,
+  Span,
 } from "@chakra-ui/react";
 export type {
   BoxProps,
@@ -21,12 +21,8 @@ export type {
   GridProps,
   SimpleGridProps,
   SpacerProps,
-  WrapItemProps,
-  WrapProps,
 } from "@chakra-ui/react";
-export * from "./Divider";
-export * from "./Stack";
+export * from "./Separator";
 export * from "./RadioCard";
-export * from "./RadioCardGroup";
 export * from "./StaticCard";
 export * from "./PressableCard";

package/src/linjetag/InfoTag.tsx

@@ -1,9 +1,13 @@
-import { Box, useMultiStyleConfig } from "@chakra-ui/react";
-import React from "react";
+"use client";
+import { Box, RecipeVariantProps, useSlotRecipe } from "@chakra-ui/react";
+import React, { PropsWithChildren } from "react";
 import { LineIcon } from "./LineIcon";
 import type { TagProps } from "./types";
+import { infoTagSlotRecipe } from "../theme/slot-recipes/info-tag";
 
-export type InfoTagProps = TagProps;
+type InfoTagVariantProps = RecipeVariantProps<typeof infoTagSlotRecipe>;
+
+export type InfoTagProps = TagProps & PropsWithChildren<InfoTagVariantProps>;
 
 /**
  * An info tag component.
@@ -44,28 +48,31 @@ export const InfoTag = ({
   description,
   ...customProps
 }: InfoTagProps) => {
-  const styles = useMultiStyleConfig("InfoTag", {
+  const recipe = useSlotRecipe({ key: "infoTag" });
+
+  const styles = recipe({
     variant,
     size,
     ...customProps,
   });
+
   return (
-    <Box sx={styles.container}>
+    <Box css={styles.container}>
       <LineIcon
         variant={variant}
         size={size}
-        sx={styles.iconContainer}
+        aria-label={title}
         {...(customProps as any)} // TODO: Fix this
       />
-      <Box sx={styles.textContainer}>
+      <Box css={styles.textContainer}>
         {title && (
-          <Box as="span" sx={styles.title}>
+          <Box as="span" css={styles.title}>
             {title}
           </Box>
         )}
         {title && description && " "}
         {description && (
-          <Box as="span" sx={styles.description}>
+          <Box as="span" css={styles.description}>
             {description}
           </Box>
         )}

package/src/linjetag/LineIcon.tsx

@@ -1,8 +1,17 @@
-import { Box, BoxProps, useMultiStyleConfig } from "@chakra-ui/react";
-import React from "react";
+"use client";
+import {
+  Box,
+  BoxProps,
+  RecipeVariantProps,
+  useSlotRecipe,
+} from "@chakra-ui/react";
+import React, { forwardRef, PropsWithChildren } from "react";
+import { lineIconSlotRecipe } from "../theme/slot-recipes/line-icon";
 import { getCorrectIcon } from "./icons";
 import { CustomVariantProps, TagProps } from "./types";
 
+type LineIconVariantProps = RecipeVariantProps<typeof lineIconSlotRecipe>;
+
 type DefaultVariants = Exclude<TagProps["variant"], "custom">;
 
 type DefaultVariantProps = {
@@ -12,8 +21,14 @@ type DefaultVariantProps = {
 type VariantProps = DefaultVariantProps | CustomVariantProps;
 
 export type LineIconProps = Exclude<BoxProps, "variant"> &
-  VariantProps & {
+  VariantProps &
+  PropsWithChildren<LineIconVariantProps> & {
     size: TagProps["size"];
+    foregroundColor?: string;
+    backgroundColor?: string;
+    disabled?: boolean;
+    target?: string;
+    label: string;
   };
 
 /**
@@ -45,28 +60,59 @@ export type LineIconProps = Exclude<BoxProps, "variant"> &
  *
  * @see https://spor.vy.no/components/line-tags
  */
-export const LineIcon = ({
-  variant,
-  size = "md",
-  sx,
-  ...rest
-}: LineIconProps) => {
-  const styles = useMultiStyleConfig("LineIcon", { variant, size, ...rest });
-  const Icon: any = getCorrectIcon({
-    variant:
-      variant === "custom" && "customIconVariant" in rest
-        ? rest.customIconVariant
-        : variant === "custom"
-          ? "local-train"
-          : variant,
-    size,
-  });
-  if (!Icon) {
-    return null;
-  }
-  return (
-    <Box sx={{ ...styles.iconContainer, ...sx }}>
-      <Icon sx={styles.icon} />
-    </Box>
-  );
-};
+
+export const LineIcon = forwardRef<HTMLDivElement, LineIconProps>(
+  function LineIcon({
+    variant,
+    size = "md",
+    foregroundColor,
+    backgroundColor,
+    disabled,
+    style,
+    target = "lineIcon",
+    label,
+    ...rest
+  }) {
+    const recipe = useSlotRecipe({ key: "lineIcon" });
+    const styles = recipe({ variant, size, ...rest });
+
+    const targetPadding = () => {
+      return target === "travelTag" ? 0.5 : 1;
+    };
+
+    const borderContainer = () => {
+      return variant === "walk" && target === "travelTag" ? 0 : 0.5;
+    };
+
+    const Icon: any = getCorrectIcon({
+      variant:
+        variant === "custom" && "customIconVariant" in rest
+          ? rest.customIconVariant
+          : variant === "custom"
+            ? "local-train"
+            : variant,
+      size,
+    });
+    if (!Icon) {
+      return null;
+    }
+
+    if (foregroundColor) {
+      styles.iconContainer.backgroundColor = disabled
+        ? "surface.disabled"
+        : foregroundColor;
+    }
+
+    return (
+      <Box
+        css={{ ...styles.iconContainer, ...style }}
+        padding={targetPadding()}
+        borderWidth={borderContainer()}
+        borderColor={variant === "walk" ? "core.outline" : "transparent"}
+        aria-label={label}
+      >
+        <Icon css={styles.icon} />
+      </Box>
+    );
+  },
+);

package/src/linjetag/TravelTag.tsx

@@ -1,8 +1,9 @@
+"use client";
 import {
   Box,
   BoxProps,
-  forwardRef,
-  useMultiStyleConfig,
+  RecipeVariantProps,
+  useSlotRecipe,
 } from "@chakra-ui/react";
 import {
   ErrorFill18Icon,
@@ -12,22 +13,20 @@ import {
   WarningFill18Icon,
   WarningFill24Icon,
 } from "@vygruppen/spor-icon-react";
-import React from "react";
+import React, { forwardRef, PropsWithChildren } from "react";
 import { LineIcon } from "./LineIcon";
 import type { TagProps } from "./types";
-import { As } from "@chakra-ui/system";
+import { travelTagSlotRecipe } from "../theme/slot-recipes/travel-tag";
+
+type TravelTagVariantProps = RecipeVariantProps<typeof travelTagSlotRecipe>;
+
+type DeviationLevels = "critical" | "major" | "minor" | "info" | "none";
 
 export type TravelTagProps = TagProps &
-  BoxProps & {
-    /**
-     * Defines the level of importance
-     * Default to none
-     */
-    deviationLevel?: "critical" | "major" | "minor" | "info" | "none";
-    isDisabled?: boolean;
-    /**
-     * Needs to be defined if variant is custom
-     */
+  BoxProps &
+  PropsWithChildren<TravelTagVariantProps> & {
+    deviationLevel?: DeviationLevels;
+    disabled?: boolean;
     foregroundColor?: string;
     /**
      * Needs to be defined if variant is custom
@@ -52,6 +51,8 @@ export type TravelTagProps = TagProps &
  *
  * You can also render them with a deviation level to indicate an extra focus:
  *
+ * You can add a "disabled" prop to the tag to make it look disabled (grey)
+ *
  * ```tsx
  * <TravelTag
  *   variant="subway"
@@ -89,57 +90,66 @@ export type TravelTagProps = TagProps &
  *
  * @see https://spor.vy.no/components/line-tags
  */
-export const TravelTag = forwardRef<TravelTagProps, As>(
-  (
+
+export const TravelTag = forwardRef<HTMLDivElement, TravelTagProps>(
+  function TravelTag(
     {
       variant,
       size = "md",
       deviationLevel = "none",
       title,
       description,
-      isDisabled,
+      disabled,
       foregroundColor,
       backgroundColor,
       customIconVariant,
       ...rest
     },
     ref,
-  ) => {
-    const styles = useMultiStyleConfig("TravelTag", {
+  ) {
+    const recipie = useSlotRecipe({ key: "travelTag" });
+    const styles = recipie({
       variant,
       size,
       deviationLevel,
-      foregroundColor: variant === "custom" ? foregroundColor : undefined,
-      backgroundColor: variant === "custom" ? backgroundColor : undefined,
     });
 
     const DeviationLevelIcon = getDeviationLevelIcon({ deviationLevel, size });
 
     return (
-      <Box sx={styles.container} aria-disabled={isDisabled} ref={ref} {...rest}>
+      <Box
+        css={styles.container}
+        aria-disabled={disabled}
+        ref={ref}
+        {...rest}
+        backgroundColor={disabled ? "surface.disabled" : backgroundColor}
+      >
         <LineIcon
           variant={variant}
           size={size}
-          sx={styles.iconContainer}
           foregroundColor={foregroundColor}
           backgroundColor={backgroundColor}
           customIconVariant={customIconVariant}
+          disabled={disabled}
+          target="travelTag"
           {...(rest as any)}
         />
-        <Box sx={styles.textContainer}>
+        <Box css={styles.textContainer}>
           {title && (
-            <Box as="span" sx={styles.title}>
+            <Box as="span" css={styles.title}>
               {title}
             </Box>
           )}
           {title && description && " "}
           {description && (
-            <Box as="span" sx={styles.description}>
+            <Box as="span" css={styles.description}>
               {description}
             </Box>
           )}
         </Box>
-        {DeviationLevelIcon && <DeviationLevelIcon sx={styles.deviationIcon} />}
+        {DeviationLevelIcon && (
+          <DeviationLevelIcon css={styles.deviationIcon} />
+        )}
       </Box>
     );
   },
@@ -157,6 +167,7 @@ const getDeviationLevelIcon = ({
       return size === "lg" ? WarningFill24Icon : WarningFill18Icon;
     case "info":
       return size === "lg" ? InformationFill24Icon : InformationFill18Icon;
+    case "none":
     default:
       return null;
   }

package/src/link/TextLink.tsx

@@ -1,35 +1,44 @@
+"use client";
 import {
   Link as ChakraLink,
   LinkProps as ChakraLinkProps,
-  forwardRef,
+  RecipeVariantProps,
 } from "@chakra-ui/react";
 import { LinkOutOutline24Icon } from "@vygruppen/spor-icon-react";
-import React from "react";
+import React, { forwardRef, PropsWithChildren } from "react";
 import { createTexts, useTranslation } from "..";
+import { linkRecipe } from "../theme/recipes/link";
+
+type linkVariantProps = RecipeVariantProps<typeof linkRecipe>;
+
+export type LinkProps = Exclude<ChakraLinkProps, "variant"> &
+  PropsWithChildren<linkVariantProps> & {
+    /** Defaults to primary */
+    variant?: "primary" | "secondary";
+    /** Define if the link shows an icon on the right that indicate it is an external link */
+    external?: boolean;
+  };
 
-type LinkProps = Omit<ChakraLinkProps, "variant"> & {
-  variant?: "primary" | "secondary";
-};
 /** Link to different sites or parts of site
  *
  * You can specify the `variant` prop to get different link designs.
+ *  * ```tsx
+ * <TextLink href="/url-to-page" variant="primary" size="md">
+ *   text that is linked
+ * </TextLink>
+ * ```
  */
-export const TextLink = forwardRef<LinkProps, "a">(
+export const TextLink = forwardRef<HTMLAnchorElement, LinkProps>(
   ({ children, ...props }, ref) => {
     const { t } = useTranslation();
-    const isExternal =
-      props.isExternal !== undefined
-        ? props.isExternal
+    const external =
+      props.external !== undefined
+        ? props.external
         : Boolean(props.href?.match(/^https?:\/\//));
     return (
-      <ChakraLink {...props} ref={ref} isExternal={isExternal}>
+      <ChakraLink {...props} ref={ref}>
         {children}
-        {isExternal && (
-          <LinkOutOutline24Icon
-            marginLeft={0.5}
-            aria-label={t(texts.externalLink)}
-          />
-        )}
+        {external && <LinkOutOutline24Icon aria-hidden />}
       </ChakraLink>
     );
   },

package/src/list/index.tsx

@@ -1,2 +1,24 @@
-export { ListItem, OrderedList, UnorderedList } from "@chakra-ui/react";
-export type { ListItemProps, ListProps } from "@chakra-ui/react";
+import { List as ChakraList } from "@chakra-ui/react";
+
+/**
+ * Use this component to display a list of items.
+ *
+ * props:
+ * - "chidren" (default: none) required: The items in the list.
+ * - "as" (default: "ul") not required: Rendrer as an ordered or unordered list.
+ *     - "ul": Unordered list
+ *     - "ol": Ordered list
+ * - "variant" (default: "marker") not required: The style of the list.
+ *    - "marker": A list with markers
+ *    - "plain": A plain list without markers
+ *
+ * ```tsx
+ * <List>
+ *  <ListItem>Item 1</ListItem>
+ *  <ListItem>Item 2</ListItem>
+ * </List>
+ */
+
+export const List = ChakraList.Root; // <ul> or <ol> HTMLElement
+export const ListItem = ChakraList.Item; // <li> HTMLElement
+export const ListIndicator = ChakraList.Indicator;

package/src/loader/ClientOnly.tsx

@@ -1,12 +1,11 @@
-import React from "react";
+"use client";
+import React, { PropsWithChildren } from "react";
 import { useHydrated } from "./useHydrated";
 
-type ClientOnlyProps = {
-  /** A function that renders the client-side only component */
-  children: () => React.ReactNode;
+type ClientOnlyProps = PropsWithChildren<{
   /** An optional fallback to render in place on the server */
   fallback?: React.ReactNode;
-};
+}>;
 
 /**
  * Render the children only after the JS has loaded client-side. Use an optional
@@ -18,12 +17,14 @@ type ClientOnlyProps = {
  * ```tsx
  * return (
  *   <ClientOnly fallback={<FakeChart />}>
- *     {() => <Chart />}
+ *     <Chart />
  *   </ClientOnly>
  * );
  * ```
  */
 export const ClientOnly = ({ children, fallback = null }: ClientOnlyProps) => {
   const isHydrated = useHydrated();
-  return <>{isHydrated ? children() : fallback}</>;
+
+  if (!isHydrated) return fallback;
+  return children;
 };

package/src/loader/ColorInlineLoader.tsx

@@ -1,4 +1,4 @@
-import { Box, BoxProps, Center } from "@chakra-ui/react";
+import { Box, BoxProps, Center, VisuallyHidden } from "@chakra-ui/react";
 import { inlineLoaderColorData } from "@vygruppen/spor-loader";
 import React from "react";
 import { ClientOnly } from "./ClientOnly";
@@ -16,12 +16,13 @@ export const ColorInlineLoader = ({
   ...props
 }: ColorInlineLoaderProps) => {
   return (
-    <Center {...props}>
+    <Center role="status" aria-live="polite" {...props}>
       <Box width={width} maxWidth={maxWidth}>
         <ClientOnly>
-          {() => <Lottie animationData={inlineLoaderColorData} />}
+          <Lottie animationData={inlineLoaderColorData} />
         </ClientOnly>
       </Box>
+      <VisuallyHidden>Loading...</VisuallyHidden>
     </Center>
   );
 };

package/src/loader/ColorSpinner.tsx

@@ -1,4 +1,5 @@
-import { Box, BoxProps, Center } from "@chakra-ui/react";
+"use client";
+import { Box, BoxProps, Center, VisuallyHidden } from "@chakra-ui/react";
 import { spinnerColorData } from "@vygruppen/spor-loader";
 import React from "react";
 import { ClientOnly } from "./ClientOnly";
@@ -25,16 +26,16 @@ export const ColorSpinner = ({
   children,
   width,
   maxWidth,
-
   ...props
 }: SpinnerProps) => {
   return (
-    <Center flexDirection="column" {...props}>
+    <Center flexDirection="column" role="status" aria-live="polite" {...props}>
       <Box width={width} maxWidth={maxWidth}>
         <ClientOnly>
-          {() => <Lottie animationData={spinnerColorData} />}
+          <Lottie animationData={spinnerColorData} />
         </ClientOnly>
       </Box>
+      <VisuallyHidden>Loading...</VisuallyHidden>
       {children && (
         <Box marginTop={3} fontWeight="bold">
           {children}

package/src/loader/ContentLoader.tsx

@@ -1,4 +1,5 @@
-import { Box, BoxProps } from "@chakra-ui/react";
+"use client";
+import { Box, BoxProps, VisuallyHidden } from "@chakra-ui/react";
 import { contentLoaderData } from "@vygruppen/spor-loader";
 import React from "react";
 import { ClientOnly } from "./ClientOnly";
@@ -7,16 +8,17 @@ import Lottie from "./Lottie";
 export type ContentLoaderProps = BoxProps;
 /**
  * ContentLoader is a component that renders a loading animation.
- * It should mostly be used for
+ * It should mostly be used for loading content that is not yet available.
  */
 export const ContentLoader = ({ children, ...props }: ContentLoaderProps) => {
   return (
-    <Box {...props}>
+    <Box role="status" aria-live="polite" {...props}>
       <Box maxWidth="140px" marginX="auto">
         <ClientOnly>
-          {() => <Lottie animationData={contentLoaderData} />}
+          <Lottie animationData={contentLoaderData} />
         </ClientOnly>
       </Box>
+      <VisuallyHidden>Loading...</VisuallyHidden>
       {children && (
         <Box textAlign="center" fontWeight="bold">
           {children}

package/src/loader/DarkFullScreenLoader.tsx

@@ -1,4 +1,5 @@
-import { Box, BoxProps, Center } from "@chakra-ui/react";
+"use client";
+import { Box, BoxProps, Center, VisuallyHidden } from "@chakra-ui/react";
 import { fullScreenLoaderWhiteData } from "@vygruppen/spor-loader";
 import React from "react";
 import { ClientOnly } from "./ClientOnly";
@@ -12,12 +13,19 @@ export const DarkFullScreenLoader = ({
   ...props
 }: DarkFullScreenLoaderProps) => {
   return (
-    <Center height="100%" background="darkTeal" {...props}>
+    <Center
+      height="100%"
+      background="darkTeal"
+      role="status"
+      aria-live="polite"
+      {...props}
+    >
       <Box width={width} maxWidth={maxWidth}>
         <ClientOnly>
-          {() => <Lottie animationData={fullScreenLoaderWhiteData} />}
+          <Lottie animationData={fullScreenLoaderWhiteData} />
         </ClientOnly>
       </Box>
+      <VisuallyHidden>Loading...</VisuallyHidden>
     </Center>
   );
 };

package/src/loader/DarkInlineLoader.tsx

@@ -1,4 +1,5 @@
-import { Box, BoxProps, Center } from "@chakra-ui/react";
+"use client";
+import { Box, BoxProps, Center, VisuallyHidden } from "@chakra-ui/react";
 import { inlineLoaderDarkData } from "@vygruppen/spor-loader";
 import React from "react";
 import { ClientOnly } from "./ClientOnly";
@@ -14,12 +15,13 @@ export const DarkInlineLoader = ({
   ...props
 }: DarkInlineLoaderProps) => {
   return (
-    <Center {...props}>
+    <Center role="status" aria-live="polite" {...props}>
       <Box width={width} maxWidth={maxWidth}>
         <ClientOnly>
-          {() => <Lottie animationData={inlineLoaderDarkData} />}
+          <Lottie animationData={inlineLoaderDarkData} />
         </ClientOnly>
       </Box>
+      <VisuallyHidden>Loading...</VisuallyHidden>
     </Center>
   );
 };

package/src/loader/DarkSpinner.tsx

@@ -1,6 +1,7 @@
+"use client";
 import { spinnerDarkData, spinnerLightData } from "@vygruppen/spor-loader";
 import React from "react";
-import { Box, BoxProps, Center, useColorMode } from "..";
+import { Box, BoxProps, Center, useColorMode, VisuallyHidden } from "..";
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";
 
@@ -29,10 +30,13 @@ export const DarkSpinner = ({
   const { colorMode } = useColorMode();
   const spinnerData = colorMode === "dark" ? spinnerLightData : spinnerDarkData;
   return (
-    <Center flexDirection="column" {...props}>
+    <Center flexDirection="column" role="status" aria-live="polite" {...props}>
       <Box width={width} maxWidth={maxWidth}>
-        <ClientOnly>{() => <Lottie animationData={spinnerData} />}</ClientOnly>
+        <ClientOnly>
+          <Lottie animationData={spinnerData} />
+        </ClientOnly>
       </Box>
+      <VisuallyHidden>Loading...</VisuallyHidden>
       {children && (
         <Box marginTop={3} fontWeight="bold">
           {children}

package/src/loader/LightFullScreenLoader.tsx

@@ -1,4 +1,5 @@
-import { Box, BoxProps, Center } from "@chakra-ui/react";
+"use client";
+import { Box, BoxProps, Center, VisuallyHidden } from "@chakra-ui/react";
 import { fullScreenLoaderBlackData } from "@vygruppen/spor-loader";
 import React from "react";
 import { ClientOnly } from "./ClientOnly";
@@ -12,12 +13,19 @@ export const LightFullScreenLoader = ({
   ...props
 }: LightFullScreenLoaderProps) => {
   return (
-    <Center height="100%" background="white" {...props}>
+    <Center
+      height="100%"
+      background="white"
+      role="status"
+      aria-live="polite"
+      {...props}
+    >
       <Box width={width} maxWidth={maxWidth}>
         <ClientOnly>
-          {() => <Lottie animationData={fullScreenLoaderBlackData} />}
+          <Lottie animationData={fullScreenLoaderBlackData} />
         </ClientOnly>
       </Box>
+      <VisuallyHidden>Loading...</VisuallyHidden>
     </Center>
   );
 };