@vygruppen/spor-react 7.0.0 → 7.1.0

package/src/stepper/Stepper.tsx

@@ -1,22 +1,42 @@
-import { Flex, HStack, useMultiStyleConfig } from "@chakra-ui/react";
-import { DropdownLeftFill24Icon } from "@vygruppen/spor-icon-react";
+import { Flex, useMultiStyleConfig } from "@chakra-ui/react";
+import { ArrowLeftFill24Icon } from "@vygruppen/spor-icon-react";
 import React from "react";
 import { StepperStep } from ".";
-import {
-  Box,
-  IconButton,
-  SimplePopover,
-  createTexts,
-  useTranslation,
-} from "..";
+import { Box, IconButton, Text, createTexts, useTranslation } from "..";
 import { StepperProvider } from "./StepperContext";
 
 type StepperProps = {
+  /** Callback for when a step is clicked */
   onClick: (clickedStep: number) => void;
+  /** Callback for when the back button is clicked (on smaller screens).
+   * A boolean indicating whether or not the user is on the first step is passed as an argument.
+   *
+   * If this is not provided, the back button will not be shown on smaller screens on the first step.
+   */
+  onBackButtonClick?: (isFirstStep: boolean) => void;
+  /**
+   * Heading shown on smaller devices
+   * @deprecated Use `heading` instead
+   */
   title?: string;
+  /** Heading shown on smaller devices */
+  heading?: string;
+  /**
+   * The heading level rendered for the heading shown on smaller devices.
+   *
+   * Defaults to h2
+   * */
+  headingLevel?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p";
+  /** The currently active step */
   activeStep: number;
+  /** The labels of each step */
   steps: string[];
+  /** The variant.
+   * "base" has a transparent background,
+   * while "accent" has a slight accent color  */
   variant: "base" | "accent";
+  /** Disables all clicks */
+  isDisabled?: boolean;
 };
 /**
  * A stepper is used to show which step of a process a user is currently in.
@@ -25,74 +45,78 @@ type StepperProps = {
  *
  * ```tsx
  * <Stepper
- *   title="Eksempel"
+ *   title="Example"
  *   onClick={handleStepClick}
  *   activeStep={2}
- *   steps={['Velg hvor', 'Velg når', 'Velg hvordan']}
+ *   steps={['Where', 'When', 'How']}
  * />
  * ```
  **/
 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 __css={style.root}>
+    <Box sx={style.root}>
       <StepperProvider
         onClick={onClick}
         activeStep={activeStep}
         variant={variant}
         numberOfSteps={numberOfSteps}
       >
-        <Box __css={style.container}>
-          <Box __css={style.innerContainer}>
-            <HStack>
-              {activeStep > 1 && (
-                <IconButton
-                  aria-label={t(texts.back)}
-                  icon={<DropdownLeftFill24Icon />}
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => onClick(activeStep - 1)}
-                  __css={style.backButton}
-                />
+        <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={() => {
+                  if (onBackButtonClick) {
+                    onBackButtonClick(activeStep === 1);
+                  }
+                  onClick(activeStep - 1);
+                }}
+              />
+              {shownHeading && (
+                <Text flex={1} variant="sm" as={headingLevel} sx={style.title}>
+                  {shownHeading}
+                </Text>
               )}
-
-              <SimplePopover
-                triggerElement={
-                  <Box as="button" __css={style.stepCounter}>
-                    {t(texts.stepsOf(activeStep, numberOfSteps))}
-                  </Box>
-                }
-                borderRadius="xs"
-              >
-                {steps.map((step, index) => (
-                  <StepperStep
-                    key={step}
-                    stepNumber={index + 1}
-                    variant={variant}
-                  >
-                    {step}
-                  </StepperStep>
-                ))}
-              </SimplePopover>
-            </HStack>
-            {title && (
-              <Box as="h3" __css={style.title}>
-                {title}
+              <Box sx={style.stepCounter}>
+                {t(texts.stepsOf(activeStep, numberOfSteps))}
               </Box>
-            )}
+            </Flex>
           </Box>
-          <Flex justifyContent="center" display={["none", "flex"]}>
+          <Flex justifyContent="center" display={["none", null, "flex"]}>
             {steps.map((step, index) => (
-              <StepperStep key={index} stepNumber={index + 1} variant={variant}>
+              <StepperStep
+                key={index}
+                stepNumber={index + 1}
+                variant={variant}
+                aria-current={index + 1 === activeStep ? "step" : undefined}
+                isDisabled={isDisabled}
+              >
                 {step}
               </StepperStep>
             ))}
@@ -105,10 +129,10 @@ export const Stepper = ({
 
 const texts = createTexts({
   stepsOf: (activeStep, numberOfSteps) => ({
-    nb: `Steg ${activeStep} av ${numberOfSteps}`,
-    nn: `Steg ${activeStep} av ${numberOfSteps}`,
-    sv: `Steg ${activeStep} av ${numberOfSteps}`,
-    en: `Step ${activeStep} of ${numberOfSteps}`,
+    nb: `Steg ${activeStep}/${numberOfSteps}`,
+    nn: `Steg ${activeStep}/${numberOfSteps}`,
+    sv: `Steg ${activeStep}/${numberOfSteps}`,
+    en: `Step ${activeStep}/${numberOfSteps}`,
   }),
   back: {
     nb: "Tilbake",

package/src/stepper/StepperStep.tsx

@@ -1,82 +1,73 @@
-import { useMultiStyleConfig } from "@chakra-ui/react";
+import { useColorModeValue, useMultiStyleConfig } from "@chakra-ui/react";
 import { DropdownRightFill18Icon } from "@vygruppen/spor-icon-react";
 import React from "react";
-import { Box, Button } from "..";
+import { Box, Button, Text } from "..";
 import { useStepper } from "./StepperContext";
 
 type StepperStepProps = {
   children: React.ReactNode;
   stepNumber: number;
   variant: "base" | "accent";
+  isDisabled?: boolean;
 };
 export const StepperStep = ({
   children,
   stepNumber,
   variant,
+  isDisabled: isDisabledOverride,
 }: StepperStepProps) => {
   const { activeStep, onClick } = useStepper();
-  const state = getState(stepNumber!, activeStep);
+  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 adjustedProps = getButtonStylesForState(state);
+  const isDisabled =
+    (state !== "active" && isDisabledOverride) || state === "disabled";
 
   return (
-    <Box __css={style.stepContainer}>
+    <Box sx={style.stepContainer}>
       {stepNumber > 1 && (
-        <DropdownRightFill18Icon marginX={5} display={["none", "block"]} />
+        <DropdownRightFill18Icon
+          marginX={5}
+          display={["none", null, "block"]}
+          color={iconColor}
+        />
+      )}
+      {isDisabled ? (
+        <Text
+          variant="xs"
+          fontSize="16px"
+          color={disabledTextColor}
+          cursor="default"
+          paddingX={2}
+        >
+          {children}
+        </Text>
+      ) : (
+        <Button
+          size="xs"
+          variant={state === "active" ? "primary" : "ghost"}
+          onClick={
+            state === "completed" ? () => onClick(stepNumber) : undefined
+          }
+          pointerEvents={state === "active" ? "none" : "auto"}
+          tabIndex={state === "active" ? -1 : undefined}
+          sx={style.stepButton}
+        >
+          {children}
+        </Button>
       )}
-
-      <Button
-        size={"xs"}
-        variant={
-          state === "active"
-            ? "primary"
-            : state === "completed"
-              ? "tertiary"
-              : "ghost"
-        }
-        {...adjustedProps}
-        onClick={() => onClick(stepNumber)}
-      >
-        {children}
-      </Button>
     </Box>
   );
 };
 
-const getButtonStylesForState = (
-  state: "completed" | "active" | "disabled",
-): Record<string, any> => {
-  switch (state) {
-    case "active":
-      return {
-        _hover: {},
-        boxShadow: "none",
-        _focus: {},
-        _active: {},
-        cursor: "auto",
-      };
-    case "completed":
-      return {
-        boxShadow: "none",
-      };
-    case "disabled":
-      return {
-        _disabled: {},
-        _hover: {},
-        _focus: {},
-        _active: {},
-        color: "dimGrey",
-        cursor: "auto",
-      };
-    default:
-      return {};
-  }
-};
-
 const getState = (stepNumber: number, activeStep: number) => {
   if (stepNumber < activeStep) {
     return "completed";

package/src/theme/components/button.ts

@@ -24,12 +24,12 @@ const config = defineStyleConfig({
     _disabled: {
       cursor: "not-allowed",
       boxShadow: "none",
-      backgroundColor: "silver",
-      color: "dimGrey",
+      backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+      color: mode("blackAlpha.400", "whiteAlpha.400")(props),
     },
     _hover: {
       _disabled: {
-        background: "silver",
+        background: mode("blackAlpha.100", "whiteAlpha.100")(props),
       },
     },
   }),

package/src/theme/components/fab.ts

@@ -23,12 +23,16 @@ const config = helpers.defineMultiStyleConfig({
       position: "fixed",
       ...getPositionProps(props),
       _disabled: {
-        backgroundColor: "whiteAlpha.400",
-        color: "white",
+        backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+        color: mode("blackAlpha.400", "whiteAlpha.400")(props),
       },
       ...focusVisibleStyles(props),
       _hover: {
         backgroundColor: "seaMist",
+        _disabled: {
+          backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+          color: mode("blackAlpha.400", "whiteAlpha.400")(props),
+        },
       },
       zIndex: "sticky",
     },

package/src/theme/components/progress-indicator.ts

@@ -29,7 +29,7 @@ const config = helpers.defineMultiStyleConfig({
         },
       },
       circle: {
-        fill: mode("blackAlpha.400", "whiteAlpha.400")(props),
+        fill: mode("blackAlpha.200", "whiteAlpha.200")(props),
       },
     },
   }),

package/src/theme/components/stepper.ts

@@ -5,7 +5,6 @@ const parts = anatomy("stepper").parts(
   "root",
   "container",
   "innerContainer",
-  "backButton",
   "title",
   "stepCounter",
   "stepContainer",
@@ -18,32 +17,27 @@ const parts = anatomy("stepper").parts(
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 
 const config = helpers.defineMultiStyleConfig({
-  baseStyle: (props) => ({
+  baseStyle: {
     root: {
       display: "flex",
       alignItems: "center",
-      justifyContent: ["space-between", "center"],
-      minHeight: ["48px", "60px"],
+      justifyContent: ["space-between", null, "center"],
+      minHeight: ["48px", null, "60px"],
       overflowX: "auto",
       width: "100%",
     },
     container: {
-      paddingX: [2, 2, 0],
+      paddingX: [2, null, null, 0],
       maxWidth: "container.lg",
       marginX: "auto",
       width: "100%",
     },
     innerContainer: {
       overflow: "hidden",
-      display: ["flex", "none"],
+      display: ["flex", null, "none"],
       alignItems: "center",
       justifyContent: "space-between",
-    },
-    backButton: {
-      borderRadius: "xs",
-      paddingX: 0,
-      width: "auto",
-      minWidth: "auto",
+      gap: 3,
     },
     title: {
       overflow: "hidden",
@@ -51,8 +45,8 @@ const config = helpers.defineMultiStyleConfig({
       WebkitLineClamp: 2,
       display: "-webkit-box",
       WebkitBoxOrient: "vertical",
-      marginLeft: 2,
-      textAlign: "right",
+      textAlign: "center",
+      maxWidth: "80%",
     },
     stepContainer: {
       display: "flex",
@@ -62,7 +56,7 @@ const config = helpers.defineMultiStyleConfig({
       textStyle: "sm",
       whiteSpace: "nowrap",
     },
-  }),
+  },
   variants: {
     base: () => ({
       root: {
@@ -72,6 +66,26 @@ const config = helpers.defineMultiStyleConfig({
     accent: (props) => ({
       root: {
         backgroundColor: mode("seaMist", "pine")(props),
+        color: mode("darkTeal", "seaMist")(props),
+      },
+      stepButton: {
+        color:
+          props.state === "disabled"
+            ? mode("blackAlpha.400", "whiteAlpha.400")(props)
+            : props.state === "completed"
+              ? mode("darkTeal", "white")(props)
+              : mode("white", "darkTeal")(props),
+        _hover: {
+          backgroundColor:
+            props.state === "disabled"
+              ? "transparent"
+              : mode("coralGreen", "greenHaze")(props),
+        },
+      },
+      backButton: {
+        _hover: {
+          backgroundColor: mode("coralGreen", "greenHaze")(props),
+        },
       },
     }),
   },