@vygruppen/spor-react 11.3.10 → 12.0.0

package/src/stepper/Stepper.tsx

@@ -1,11 +1,15 @@
-import { Flex, useMultiStyleConfig } from "@chakra-ui/react";
+"use client";
+import { Flex, RecipeVariantProps, useSlotRecipe } from "@chakra-ui/react";
 import { ArrowLeftFill24Icon } from "@vygruppen/spor-icon-react";
-import React from "react";
+import React, { forwardRef, PropsWithChildren } from "react";
 import { StepperStep } from ".";
-import { Box, IconButton, Text, createTexts, useTranslation } from "..";
+import { Box, createTexts, IconButton, Text, useTranslation } from "..";
+import { stepperSlotRecipe } from "../theme/slot-recipes/stepper";
 import { StepperProvider } from "./StepperContext";
 
-type StepperProps = {
+export type StepperVariantProps = RecipeVariantProps<typeof stepperSlotRecipe>;
+
+type StepperProps = PropsWithChildren<StepperVariantProps> & {
   /** Callback for when a step is clicked */
   onClick: (clickedStep: number) => void;
   /** Callback for when the back button is clicked (on smaller screens).
@@ -13,11 +17,6 @@ type StepperProps = {
    * If this is not provided, the back button will not be shown on smaller screens on the first step.
    */
   onBackButtonClick?: (stepNumberToGoTo: number) => void;
-  /**
-   * Heading shown on smaller devices
-   * @deprecated Use `heading` instead
-   */
-  title?: string;
   /** Heading shown on smaller devices */
   heading?: string;
   /**
@@ -31,11 +30,11 @@ type StepperProps = {
   /** The labels of each step */
   steps: string[];
   /** The variant.
-   * "base" has a transparent background,
+   * "core" has a transparent background,
    * while "accent" has a slight accent color  */
-  variant: "base" | "accent";
+  variant: "core" | "accent";
   /** Disables all clicks */
-  isDisabled?: boolean;
+  disabled?: boolean;
 };
 /**
  * A stepper is used to show which step of a process a user is currently in.
@@ -51,81 +50,85 @@ type StepperProps = {
  * />
  * ```
  **/
-export const Stepper = ({
-  onClick = () => {},
-  onBackButtonClick,
-  steps,
-  activeStep: activeStepAsStringOrNumber,
-  title,
-  heading,
-  headingLevel,
-  variant,
-  isDisabled,
-}: StepperProps) => {
-  const style = useMultiStyleConfig("Stepper", { variant });
-  const numberOfSteps = steps.length;
-  const activeStep = Number(activeStepAsStringOrNumber);
-  const { t } = useTranslation();
-  const hideBackButtonOnFirstStep = activeStep === 1 && !onBackButtonClick;
-  const shownHeading = heading || title;
-  return (
-    <Box sx={style.root}>
-      <StepperProvider
-        onClick={onClick}
-        activeStep={activeStep}
-        variant={variant}
-        numberOfSteps={numberOfSteps}
-      >
-        <Box sx={style.container}>
-          <Box sx={style.innerContainer}>
-            <Flex
-              justifyContent="space-between"
-              alignItems="center"
-              gap={2}
-              flex={1}
-            >
-              <IconButton
-                aria-label={t(texts.back)}
-                icon={<ArrowLeftFill24Icon />}
-                variant="ghost"
-                size="sm"
-                visibility={hideBackButtonOnFirstStep ? "hidden" : "visible"}
-                onClick={() => {
-                  const stepToGoTo = activeStep - 1;
-                  if (onBackButtonClick) {
-                    onBackButtonClick(stepToGoTo);
-                  }
-                  onClick(stepToGoTo);
-                }}
-              />
-              {shownHeading && (
-                <Text flex={1} variant="sm" as={headingLevel} sx={style.title}>
-                  {shownHeading}
-                </Text>
-              )}
-              <Box sx={style.stepCounter}>
-                {t(texts.stepsOf(activeStep, numberOfSteps))}
-              </Box>
+
+export const Stepper = forwardRef<HTMLDivElement, StepperProps>(
+  function Stepper(props, ref) {
+    const {
+      onClick = () => {},
+      onBackButtonClick,
+      steps,
+      activeStep: activeStepAsStringOrNumber,
+      heading,
+      headingLevel,
+      variant,
+      disabled,
+    } = props;
+    const recipe = useSlotRecipe({ key: "stepper" });
+    const style = recipe({ variant });
+    const numberOfSteps = steps.length;
+    const activeStep = Number(activeStepAsStringOrNumber);
+    const { t } = useTranslation();
+    const hideBackButtonOnFirstStep = activeStep === 1 && !onBackButtonClick;
+
+    return (
+      <Box css={style.root} ref={ref}>
+        <StepperProvider
+          onClick={onClick}
+          activeStep={activeStep}
+          variant={variant}
+          numberOfSteps={numberOfSteps}
+        >
+          <Box css={style.container}>
+            <Box css={style.innerContainer}>
+              <Flex
+                justifyContent="space-between"
+                alignItems="center"
+                gap={2}
+                flex={1}
+              >
+                <IconButton
+                  aria-label={t(texts.back)}
+                  icon={<ArrowLeftFill24Icon />}
+                  variant="ghost"
+                  size="sm"
+                  visibility={hideBackButtonOnFirstStep ? "hidden" : "visible"}
+                  onClick={() => {
+                    const stepToGoTo = activeStep - 1;
+                    if (onBackButtonClick) {
+                      onBackButtonClick(stepToGoTo);
+                    }
+                    onClick(stepToGoTo);
+                  }}
+                />
+                {heading && (
+                  <Text variant="sm" as={headingLevel} css={style.title}>
+                    {heading}
+                  </Text>
+                )}
+                <Box css={style.stepCounter}>
+                  {t(texts.stepsOf(activeStep, numberOfSteps))}
+                </Box>
+              </Flex>
+            </Box>
+            <Flex justifyContent="center" display={["none", null, "flex"]}>
+              {steps.map((step, index) => (
+                <StepperStep
+                  key={index}
+                  stepNumber={index + 1}
+                  variant={variant}
+                  aria-current={index + 1 === activeStep ? "step" : undefined}
+                  disabled={disabled}
+                >
+                  {step}
+                </StepperStep>
+              ))}
             </Flex>
           </Box>
-          <Flex justifyContent="center" display={["none", null, "flex"]}>
-            {steps.map((step, index) => (
-              <StepperStep
-                key={index}
-                stepNumber={index + 1}
-                variant={variant}
-                aria-current={index + 1 === activeStep ? "step" : undefined}
-                isDisabled={isDisabled}
-              >
-                {step}
-              </StepperStep>
-            ))}
-          </Flex>
-        </Box>
-      </StepperProvider>
-    </Box>
-  );
-};
+        </StepperProvider>
+      </Box>
+    );
+  },
+);
 
 const texts = createTexts({
   stepsOf: (activeStep, numberOfSteps) => ({

package/src/stepper/StepperContext.tsx

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 
 type StepperContextType = {
@@ -8,7 +9,7 @@ type StepperContextType = {
 };
 const StepperContext = React.createContext<StepperContextType | null>(null);
 
-type Variant = "base" | "accent";
+type Variant = "core" | "accent";
 
 type StepperProviderProps = {
   /** Stepper steps */

package/src/stepper/StepperStep.tsx

@@ -1,38 +1,38 @@
-import { useColorModeValue, useMultiStyleConfig } from "@chakra-ui/react";
+"use client";
+import { useSlotRecipe } from "@chakra-ui/react";
 import { DropdownRightFill18Icon } from "@vygruppen/spor-icon-react";
-import React from "react";
+import React, { PropsWithChildren } from "react";
 import { Box, Button, Text } from "..";
+import { StepperVariantProps } from "./Stepper";
 import { useStepper } from "./StepperContext";
 
-type StepperStepProps = {
+type StepperStepProps = PropsWithChildren<StepperVariantProps> & {
   children: React.ReactNode;
   stepNumber: number;
-  variant: "base" | "accent";
-  isDisabled?: boolean;
+  variant: "core" | "accent";
+  disabled?: boolean;
 };
 export const StepperStep = ({
   children,
   stepNumber,
   variant,
-  isDisabled: isDisabledOverride,
+  disabled: disabledOverride,
 }: StepperStepProps) => {
   const { activeStep, onClick } = useStepper();
   const state = getState(stepNumber, activeStep);
-  const style = useMultiStyleConfig("Stepper", {
-    state,
-    variant,
-  });
-  const disabledTextColor = useColorModeValue(
-    "blackAlpha.400",
-    "whiteAlpha.400",
-  );
-  const iconColor = useColorModeValue("blackAlpha.200", "whiteAlpha.200");
+  const recipe = useSlotRecipe({ key: "stepper" });
+  const style = recipe({ variant });
+  const disabledTextColor = "text.disabled";
+  const iconColor = {
+    _light: "blackAlpha.200",
+    _dark: "whiteAlpha.200",
+  };
 
-  const isDisabled =
-    (state !== "active" && isDisabledOverride) || state === "disabled";
+  const disabled =
+    (state !== "active" && disabledOverride) || state === "disabled";
 
   return (
-    <Box sx={style.stepContainer}>
+    <Box css={style.stepContainer}>
       {stepNumber > 1 && (
         <DropdownRightFill18Icon
           marginX={5}
@@ -40,10 +40,10 @@ export const StepperStep = ({
           color={iconColor}
         />
       )}
-      {isDisabled ? (
+      {disabled ? (
         <Text
           variant="xs"
-          fontSize="16px"
+          fontSize="1rem"
           color={disabledTextColor}
           cursor="default"
           paddingX={2}
@@ -59,7 +59,14 @@ export const StepperStep = ({
           }
           pointerEvents={state === "active" ? "none" : "auto"}
           tabIndex={state === "active" ? -1 : undefined}
-          sx={style.stepButton}
+          disabled={disabled}
+          aria-current={state === "active" ? "step" : undefined}
+          css={
+            state === "active"
+              ? style.stepButton._currentStep
+              : style.stepButton
+          }
+          fontWeight={state === "active" ? "bold" : undefined}
         >
           {children}
         </Button>

package/src/tab/Tabs.tsx

@@ -1,19 +1,69 @@
+"use client";
 import {
   Tabs as ChakraTabs,
-  TabsProps as ChakraTabsProps,
-  forwardRef,
+  TabsRootProps as ChakraTabsRootProps,
+  RecipeVariantProps,
 } from "@chakra-ui/react";
 import * as React from "react";
+import { forwardRef, PropsWithChildren } from "react";
+import { tabsSlotRecipe } from "../theme/slot-recipes/tabs";
+
+type TabsVariantProps = RecipeVariantProps<typeof tabsSlotRecipe>;
+
+/**
+ * Tabs are used to organize content into different sections.
+ * They are used to display different types of content in the same space.
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="coming" fitted>
+ *  <TabsList>
+ *    <TabsTrigger value="coming">
+ *      Kommende
+ *    </TabsTrigger>
+ *    <TabsTrigger value="completed">
+ *      Fullført
+ *    </TabsTrigger>
+ *    <TabsTrigger value="cancelled">
+ *      Avbestilt
+ *    </TabsTrigger>
+ *  </TabsList>
+ *  <TabsContent value="coming">
+ *    <Heading>Kommende</heading>
+ *    <Text>Kommende billeter</Text>
+ *  </TabsContent>
+ *  <TabsContent value="completed">
+ *    <Heading>Fullført</heading>
+ *    <Text>Fullført billeter</Text>
+ *  </TabsContent>
+ *  <TabsContent value="cancelled">
+ *    <Heading>Avbestilt</heading>
+ *    <Text>Avbestilte billeter</Text>
+ *  </TabsContent>
+ * </Tabs>
+ * ```
+ */
 
 export type TabsProps = Exclude<
-  ChakraTabsProps,
-  "colorScheme" | "variant" | "orientation" | "size"
-> & {
-  /** Defaults to `base` */
-  variant: "base" | "accent";
-  /** Defaults to `sm` */
-  size?: "xs" | "sm" | "md" | "lg";
-};
-export const Tabs = forwardRef<TabsProps, "div">((props, ref) => {
-  return <ChakraTabs {...props} ref={ref} />;
+  ChakraTabsRootProps,
+  "colorPalette" | "orientation"
+> &
+  PropsWithChildren<TabsVariantProps> & {
+    /** Defaults to `core` */
+    variant?: "core" | "accent";
+    /** Defaults to `sm` */
+    size?: "xs" | "sm" | "md" | "lg";
+    /** If Tabs should take up the full width or not. Defaults to `false` */
+    fitted?: boolean;
+    /** Defaults to `start` */
+    justify?: "start" | "center" | "end";
+  };
+export const Tabs = forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
+  const { variant = "core", size = "sm" } = props;
+  return <ChakraTabs.Root {...props} ref={ref} variant={variant} size={size} />;
 });
+
+export const TabsList = ChakraTabs.List;
+export const TabsTrigger = ChakraTabs.Trigger;
+export const TabsIndicator = ChakraTabs.Indicator;
+export const TabsContent = ChakraTabs.Content;

package/src/tab/index.tsx

@@ -1,9 +1 @@
-export { Tab, TabList, TabPanel, TabPanels } from "@chakra-ui/react";
-export type {
-  TabListProps,
-  TabPanelProps,
-  TabPanelsProps,
-  TabProps,
-} from "@chakra-ui/react";
-export { Tabs } from "./Tabs";
-export type { TabsProps } from "./Tabs";
+export * from "./Tabs";

package/src/table/Table.tsx

@@ -1,26 +1,30 @@
+"use client";
 import {
   Box,
-  forwardRef,
   Table as ChakraTable,
-  TableProps as ChakraTableProps,
+  TableRootProps as ChakraTableProps,
+  RecipeVariantProps,
+  useSlotRecipe,
 } from "@chakra-ui/react";
-import React from "react";
+import React, { forwardRef, PropsWithChildren } from "react";
+import { tableSlotRecipe } from "../theme/slot-recipes/table";
 
-export type TableProps = Omit<ChakraTableProps, "variant" | "colorScheme"> & {
-  variant?: "simple" | "outline";
-  colorScheme?: "grey" | "green";
-};
+type TableVariantProps = RecipeVariantProps<typeof tableSlotRecipe>;
+
+export type TableProps = Exclude<ChakraTableProps, "variant" | "colorPalette"> &
+  PropsWithChildren<TableVariantProps> & {
+    variant?: "ghost" | "core";
+    colorPalette?: "grey" | "green" | "white";
+  };
 /**
- * These components are used the same way as in Chakra UI. Please refer to [their documentation](https://chakra-ui.com/docs/data-display/table).
- *
- * The `Table` component has support for two different variants - `simple` and `outline`. The `simple` variant has basic lines between rows, while the `outline` variant has borders for each cell, plus a hover effect per row.
+ * The `Table` component has support for two different variants - `ghost` and `core`. The `ghost` variant has basic lines between rows, while the `core` variant has borders for each cell.
  *
- * You can also specify a `grey` or `green` `colorScheme` prop. Use `green` if you want to place the table on a light green background.
+ * You can also specify a `grey` or `green` `colorPalette` prop. Use `green` if you want to place the table on a light green background.
  *
  * Finally, there are three different `size` props you can specify - `sm`, `md` and `lg`.
  *
  * ```tsx
- * <Table variant="outlined" size="lg">
+ * <Table variant="core" size="lg">
  *   <Thead>
  *    ...
  *   </Thead>
@@ -28,31 +32,32 @@ export type TableProps = Omit<ChakraTableProps, "variant" | "colorScheme"> & {
  * </Table>
  * ```
  */
-export const Table = forwardRef<TableProps, "table">((props, ref) => {
-  const { variant, size, colorScheme, children, ...rest } = props;
+export const Table = forwardRef<HTMLTableElement, TableProps>((props, ref) => {
+  const { variant = "ghost", size, colorPalette = "green", children } = props;
+
+  const recipe = useSlotRecipe({ recipe: tableSlotRecipe });
+  const styles = recipe({ variant, size });
   return (
-    <Box {...rest} {...getStyleProps(props)}>
-      <Box overflowX="auto" role="region">
-        <ChakraTable
-          variant={variant}
-          size={size}
-          colorScheme={colorScheme}
-          ref={ref}
-        >
-          {children}
-        </ChakraTable>
-      </Box>
+    <Box overflowX="auto" role="region" {...getStyleProps(props)} {...props}>
+      <ChakraTable.Root
+        variant={variant}
+        size={size}
+        colorPalette={colorPalette}
+        css={styles}
+        ref={ref}
+      >
+        {children}
+      </ChakraTable.Root>
     </Box>
   );
 });
 
 function getStyleProps(props: TableProps) {
-  return props.variant === "outline"
+  return props.variant === "core"
     ? {
-        border: "1px solid",
-        borderColor: props.colorScheme === "grey" ? "silver" : "blackAlpha.200",
-        overflow: "hidden",
-        borderRadius: "md",
+        borderRadius: "sm",
+        border: "sm",
+        borderColor: "outline.disabled",
       }
     : {};
 }

package/src/table/index.tsx

@@ -1,11 +1,13 @@
 export {
   TableCaption,
-  Tbody,
-  Td,
-  Tfoot,
-  Th,
-  Thead,
-  Tr,
+  TableHeader,
+  TableRow,
+  TableColumn,
+  TableColumnHeader,
+  TableRoot,
+  TableBody,
+  TableCell,
+  TableFooter,
 } from "@chakra-ui/react";
 export type {
   TableBodyProps,
@@ -13,7 +15,9 @@ export type {
   TableCellProps,
   TableColumnHeaderProps,
   TableFooterProps,
-  TableHeadProps,
   TableRowProps,
+  TableHeaderProps,
+  TableColumnProps,
+  TableRootProps,
 } from "@chakra-ui/react";
 export * from "./Table";

package/src/theme/brand.ts

@@ -0,0 +1,7 @@
+export enum Brand {
+  VyDigital = "VyDigital",
+  VyUtvikling = "VyUtvikling",
+  CargoNet = "CargoNet",
+}
+
+export { fontFaces } from "./font-faces";

package/src/theme/index.ts

@@ -1,42 +1,50 @@
-import { theme as defaultTheme } from "@chakra-ui/theme";
-import tokens from "@vygruppen/spor-design-tokens";
-import * as components from "./components";
-import * as foundations from "./foundations";
+import {
+  createSystem,
+  defaultBaseConfig,
+  defineConfig,
+} from "@chakra-ui/react";
+import { animationStyles } from "./tokens/animation-styles";
+import { breakpoints } from "./tokens/breakpoints";
+import { globalCss } from "./tokens/global-css";
+import { keyframes } from "./tokens/keyframes";
+import { recipes } from "./recipes";
+import { semanticTokens } from "./semantic-tokens";
+import { slotRecipes } from "./slot-recipes";
+import { textStyles } from "./tokens/text-styles";
+import { tokens } from "./tokens";
+import { Brand } from "./brand";
+import { config } from "./tokens/config";
 
-export enum Brand {
-  VyDigital = "VyDigital",
-  VyUtvikling = "VyUtvikling",
-  CargoNet = "CargoNet",
-}
-
-export const theme = {
-  ...defaultTheme,
-  ...foundations,
-  components: {
-    ...defaultTheme.components,
-    ...components,
-  },
+const generateTheme = (brand: Brand) => {
+  return defineConfig({
+    ...config,
+    globalCss,
+    theme: {
+      breakpoints,
+      keyframes,
+      tokens,
+      semanticTokens: semanticTokens[brand],
+      recipes,
+      slotRecipes,
+      textStyles,
+      animationStyles,
+    },
+  });
 };
 
-export const brandTheme = {
-  [Brand.VyDigital]: {},
-  [Brand.VyUtvikling]: {
-    colors: {
-      bg: {
-        default: {
-          dark: foundations.colors.darkGrey,
-        },
-      },
-      surface: {
-        default: {
-          dark: foundations.colors.darkGrey,
-        },
-      },
-    },
-  },
-  [Brand.CargoNet]: {
-    colors: tokens.color.cargonet as any,
-  },
+export const themes = {
+  [Brand.VyDigital]: createSystem(
+    defaultBaseConfig,
+    generateTheme(Brand.VyDigital),
+  ),
+  [Brand.CargoNet]: createSystem(
+    defaultBaseConfig,
+    generateTheme(Brand.CargoNet),
+  ),
+  [Brand.VyUtvikling]: createSystem(
+    defaultBaseConfig,
+    generateTheme(Brand.VyUtvikling),
+  ),
 };
 
-export { fontFaces } from "./font-faces";
+export const system = themes[Brand.VyDigital];

package/src/theme/recipes/attached-inputs.ts

@@ -0,0 +1,43 @@
+import { defineRecipe } from "@chakra-ui/react";
+
+export const attachedInputsRecipe = defineRecipe({
+  base: {
+    display: "flex",
+    gap: "0.1rem",
+    width: "100%",
+    "& select": {
+      borderEndRadius: 0,
+    },
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        flexDirection: "row",
+        "& > *:first-of-type:not(:last-of-type) [data-attachable]": {
+          borderEndRadius: 0,
+        },
+        "& > *:not(:first-of-type):not(:last-of-type) [data-attachable]": {
+          borderRadius: 0,
+        },
+        "& > *:not(:first-of-type):last-of-type [data-attachable]": {
+          borderStartRadius: 0,
+        },
+      },
+      vertical: {
+        flexDirection: "column",
+        "& > *:first-of-type:not(:last-of-type) [data-attachable]": {
+          borderBottomRadius: 0,
+        },
+        "& > *:not(:first-of-type):not(:last-of-type) [data-attachable]": {
+          borderRadius: 0,
+        },
+        "& > *:not(:first-of-type):last-of-type [data-attachable]": {
+          borderTopRadius: 0,
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+});