@vygruppen/spor-react 7.0.1 → 7.1.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@7.0.1 build
+> @vygruppen/spor-react@7.1.0 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -9,14 +9,14 @@
 CJS Build start
 ESM Build start
 "Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/index.js".
-"Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-CSCLMQYA.mjs".
+"Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-UQDHT6S5.mjs".
 DTS Build start
-CJS dist/index.js 493.23 KB
-CJS ⚡️ Build success in 2280ms
+CJS dist/index.js 494.15 KB
+CJS ⚡️ Build success in 2222ms
 ESM dist/index.mjs                      2.16 KB
-ESM dist/CountryCodeSelect-EKQUBVBJ.mjs 1.19 KB
-ESM dist/chunk-CSCLMQYA.mjs             386.09 KB
-ESM ⚡️ Build success in 2281ms
-DTS ⚡️ Build success in 10981ms
-DTS dist/index.d.ts  263.56 KB
-DTS dist/index.d.mts 263.56 KB
+ESM dist/CountryCodeSelect-NMBC7YLP.mjs 1.19 KB
+ESM dist/chunk-UQDHT6S5.mjs             386.88 KB
+ESM ⚡️ Build success in 2223ms
+DTS ⚡️ Build success in 11100ms
+DTS dist/index.d.ts  264.83 KB
+DTS dist/index.d.mts 264.83 KB

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @vygruppen/spor-react
 
+## 7.1.0
+
+### Minor Changes
+
+- cd07ee5: Stepper: Redesign and re-implement the Stepper component.
+
+  This change also introduces a new prop – onBackButtonClick – which is called whenever the back button is clicked on smaller screen. It receives a boolean argument outlining whether or not the current step is the first one or not. If you don't pass this prop, the back button will be hidden on the first step.
+
 ## 7.0.1
 
 ### Patch Changes

package/dist/{CountryCodeSelect-EKQUBVBJ.mjs → CountryCodeSelect-NMBC7YLP.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-CSCLMQYA.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-UQDHT6S5.mjs';
 import React from 'react';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 

package/dist/{chunk-CSCLMQYA.mjs → chunk-UQDHT6S5.mjs}

@@ -1,11 +1,11 @@
 import tokens10__default from '@vygruppen/spor-design-tokens';
 import * as tokens10 from '@vygruppen/spor-design-tokens';
 export { tokens10 as tokens };
-import { forwardRef, Divider as Divider$1, Stack as Stack$1, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, useStyleConfig, Box, Center, Flex, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useMultiStyleConfig, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, useFormControlContext, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, chakra, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, Button as Button$1, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, useColorModeValue, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverCloseButton, ChakraProvider, HStack, useToast as useToast$1, useInterval } from '@chakra-ui/react';
+import { forwardRef, Divider as Divider$1, Stack as Stack$1, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, useStyleConfig, Box, Center, Flex, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useMultiStyleConfig, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, useFormControlContext, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, chakra, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, Button as Button$1, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, useColorModeValue, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverCloseButton, ChakraProvider, useToast as useToast$1, useInterval } from '@chakra-ui/react';
 export { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, Container, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, Fade, Flex, FormHelperText, Grid, GridItem, HStack, Image, Img, InputGroup, LightMode, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, OrderedList, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, Portal, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, VStack, Wrap, WrapItem, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import * as React69 from 'react';
 import React69__default, { createContext, useEffect, forwardRef as forwardRef$1, useRef, useState, useId, Suspense, useContext, useCallback, useMemo, useLayoutEffect } from 'react';
-import { CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, CalendarOutline24Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill24Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, LinkOutOutline24Icon, DropdownRightFill18Icon, DropdownLeftFill18Icon, DropdownDownFill18Icon, DropdownDownFill24Icon, DropdownUpFill24Icon, ArrowRightFill18Icon, DropdownLeftFill24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, ErrorOutline24Icon, AltTransportOutline24Icon, WarningOutline24Icon, SuccessOutline24Icon, InformationOutline24Icon, TrainFill18Icon, TrainFill24Icon, TrainFill30Icon, ExpressBusFill18Icon, ExpressBusFill24Icon, ExpressBusFill30Icon, BusFill18Icon, BusFill24Icon, BusFill30Icon, FerryFill18Icon, FerryFill24Icon, FerryFill30Icon, SubwayFill18Icon, SubwayFill24Icon, SubwayFill30Icon, TramFill18Icon, TramFill24Icon, TramFill30Icon, AltTransportFill18Icon, AltTransportFill24Icon, AltTransportFill30Icon, WalkFill18Icon, WalkFill24Icon, WalkFill30Icon } from '@vygruppen/spor-icon-react';
+import { CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, CalendarOutline24Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill24Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, LinkOutOutline24Icon, DropdownRightFill18Icon, DropdownLeftFill18Icon, DropdownDownFill18Icon, DropdownDownFill24Icon, DropdownUpFill24Icon, ArrowRightFill18Icon, ArrowLeftFill24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, ErrorOutline24Icon, AltTransportOutline24Icon, WarningOutline24Icon, SuccessOutline24Icon, InformationOutline24Icon, TrainFill18Icon, TrainFill24Icon, TrainFill30Icon, ExpressBusFill18Icon, ExpressBusFill24Icon, ExpressBusFill30Icon, BusFill18Icon, BusFill24Icon, BusFill30Icon, FerryFill18Icon, FerryFill24Icon, FerryFill30Icon, SubwayFill18Icon, SubwayFill24Icon, SubwayFill30Icon, TramFill18Icon, TramFill24Icon, TramFill30Icon, AltTransportFill18Icon, AltTransportFill24Icon, AltTransportFill30Icon, WalkFill18Icon, WalkFill24Icon, WalkFill30Icon } from '@vygruppen/spor-icon-react';
 import { inlineLoaderColorData, spinnerColorData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, fullScreenLoaderBlackData, inlineLoaderLightData, spinnerLightData, spinnerDarkData } from '@vygruppen/spor-loader';
 import { useLottie } from 'lottie-react';
 import { useDateSegment, useDateField, useDatePicker, I18nProvider, usePopover, DismissButton, Overlay, useOverlayTrigger, useButton, useProgressBar, useCalendar, useDateRangePicker, useDialog, useFilter, useComboBox, useListBox, useOption, useListBoxSection, useSelect, HiddenSelect, useCalendarGrid, useRangeCalendar, useTimeField, useCalendarCell } from 'react-aria';
@@ -3417,7 +3417,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-EKQUBVBJ.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-NMBC7YLP.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -4268,16 +4268,22 @@ var useStepper = () => {
 var Stepper = ({
   onClick = () => {
   },
+  onBackButtonClick,
   steps,
   activeStep: activeStepAsStringOrNumber,
   title,
-  variant
+  heading,
+  headingLevel,
+  variant,
+  isDisabled
 }) => {
   const style = useMultiStyleConfig("Stepper", { variant });
   const numberOfSteps = steps.length;
   const activeStep = Number(activeStepAsStringOrNumber);
   const { t: t2 } = useTranslation();
-  return /* @__PURE__ */ React69__default.createElement(Box, { __css: style.root }, /* @__PURE__ */ React69__default.createElement(
+  const hideBackButtonOnFirstStep = activeStep === 1 && !onBackButtonClick;
+  const shownHeading = heading || title;
+  return /* @__PURE__ */ React69__default.createElement(Box, { sx: style.root }, /* @__PURE__ */ React69__default.createElement(
     StepperProvider,
     {
       onClick,
@@ -4285,40 +4291,51 @@ var Stepper = ({
       variant,
       numberOfSteps
     },
-    /* @__PURE__ */ React69__default.createElement(Box, { __css: style.container }, /* @__PURE__ */ React69__default.createElement(Box, { __css: style.innerContainer }, /* @__PURE__ */ React69__default.createElement(HStack, null, activeStep > 1 && /* @__PURE__ */ React69__default.createElement(
-      IconButton,
-      {
-        "aria-label": t2(texts22.back),
-        icon: /* @__PURE__ */ React69__default.createElement(DropdownLeftFill24Icon, null),
-        variant: "ghost",
-        size: "sm",
-        onClick: () => onClick(activeStep - 1),
-        __css: style.backButton
-      }
-    ), /* @__PURE__ */ React69__default.createElement(
-      SimplePopover,
+    /* @__PURE__ */ React69__default.createElement(Box, { sx: style.container }, /* @__PURE__ */ React69__default.createElement(Box, { sx: style.innerContainer }, /* @__PURE__ */ React69__default.createElement(
+      Flex,
       {
-        triggerElement: /* @__PURE__ */ React69__default.createElement(Box, { as: "button", __css: style.stepCounter }, t2(texts22.stepsOf(activeStep, numberOfSteps))),
-        borderRadius: "xs"
+        justifyContent: "space-between",
+        alignItems: "center",
+        gap: 2,
+        flex: 1
       },
-      steps.map((step, index) => /* @__PURE__ */ React69__default.createElement(
-        StepperStep,
+      /* @__PURE__ */ React69__default.createElement(
+        IconButton,
         {
-          key: step,
-          stepNumber: index + 1,
-          variant
-        },
-        step
-      ))
-    )), title && /* @__PURE__ */ React69__default.createElement(Box, { as: "h3", __css: style.title }, title)), /* @__PURE__ */ React69__default.createElement(Flex, { justifyContent: "center", display: ["none", null, "flex"] }, steps.map((step, index) => /* @__PURE__ */ React69__default.createElement(StepperStep, { key: index, stepNumber: index + 1, variant }, step))))
+          "aria-label": t2(texts22.back),
+          icon: /* @__PURE__ */ React69__default.createElement(ArrowLeftFill24Icon, null),
+          variant: "ghost",
+          size: "sm",
+          visibility: hideBackButtonOnFirstStep ? "hidden" : "visible",
+          onClick: () => {
+            if (onBackButtonClick) {
+              onBackButtonClick(activeStep === 1);
+            }
+            onClick(activeStep - 1);
+          }
+        }
+      ),
+      shownHeading && /* @__PURE__ */ React69__default.createElement(Text4, { flex: 1, variant: "sm", as: headingLevel, sx: style.title }, shownHeading),
+      /* @__PURE__ */ React69__default.createElement(Box, { sx: style.stepCounter }, t2(texts22.stepsOf(activeStep, numberOfSteps)))
+    )), /* @__PURE__ */ React69__default.createElement(Flex, { justifyContent: "center", display: ["none", null, "flex"] }, steps.map((step, index) => /* @__PURE__ */ React69__default.createElement(
+      StepperStep,
+      {
+        key: index,
+        stepNumber: index + 1,
+        variant,
+        "aria-current": index + 1 === activeStep ? "step" : void 0,
+        isDisabled
+      },
+      step
+    ))))
   ));
 };
 var texts22 = 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",
@@ -4330,7 +4347,8 @@ var texts22 = createTexts({
 var StepperStep = ({
   children,
   stepNumber,
-  variant
+  variant,
+  isDisabled: isDisabledOverride
 }) => {
   const { activeStep, onClick } = useStepper();
   const state2 = getState(stepNumber, activeStep);
@@ -4338,45 +4356,42 @@ var StepperStep = ({
     state: state2,
     variant
   });
-  const adjustedProps = getButtonStylesForState(state2);
-  return /* @__PURE__ */ React69__default.createElement(Box, { __css: style.stepContainer }, stepNumber > 1 && /* @__PURE__ */ React69__default.createElement(DropdownRightFill18Icon, { marginX: 5, display: ["none", "block"] }), /* @__PURE__ */ React69__default.createElement(
+  const disabledTextColor = useColorModeValue(
+    "blackAlpha.400",
+    "whiteAlpha.400"
+  );
+  const iconColor = useColorModeValue("blackAlpha.200", "whiteAlpha.200");
+  const isDisabled = state2 !== "active" && isDisabledOverride || state2 === "disabled";
+  return /* @__PURE__ */ React69__default.createElement(Box, { sx: style.stepContainer }, stepNumber > 1 && /* @__PURE__ */ React69__default.createElement(
+    DropdownRightFill18Icon,
+    {
+      marginX: 5,
+      display: ["none", null, "block"],
+      color: iconColor
+    }
+  ), isDisabled ? /* @__PURE__ */ React69__default.createElement(
+    Text4,
+    {
+      variant: "xs",
+      fontSize: "16px",
+      color: disabledTextColor,
+      cursor: "default",
+      paddingX: 2
+    },
+    children
+  ) : /* @__PURE__ */ React69__default.createElement(
     Button,
     {
       size: "xs",
-      variant: state2 === "active" ? "primary" : state2 === "completed" ? "tertiary" : "ghost",
-      ...adjustedProps,
-      onClick: () => onClick(stepNumber)
+      variant: state2 === "active" ? "primary" : "ghost",
+      onClick: state2 === "completed" ? () => onClick(stepNumber) : void 0,
+      pointerEvents: state2 === "active" ? "none" : "auto",
+      tabIndex: state2 === "active" ? -1 : void 0,
+      sx: style.stepButton
     },
     children
   ));
 };
-var getButtonStylesForState = (state2) => {
-  switch (state2) {
-    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 {};
-  }
-};
 var getState = (stepNumber, activeStep) => {
   if (stepNumber < activeStep) {
     return "completed";
@@ -12578,7 +12593,6 @@ var parts14 = anatomy$1("stepper").parts(
   "root",
   "container",
   "innerContainer",
-  "backButton",
   "title",
   "stepCounter",
   "stepContainer",
@@ -12608,13 +12622,8 @@ var config32 = helpers22.defineMultiStyleConfig({
       overflow: "hidden",
       display: ["flex", null, "none"],
       alignItems: "center",
-      justifyContent: "space-between"
-    },
-    backButton: {
-      borderRadius: "xs",
-      paddingX: 0,
-      width: "auto",
-      minWidth: "auto"
+      justifyContent: "space-between",
+      gap: 3
     },
     title: {
       overflow: "hidden",
@@ -12622,8 +12631,8 @@ var config32 = helpers22.defineMultiStyleConfig({
       WebkitLineClamp: 2,
       display: "-webkit-box",
       WebkitBoxOrient: "vertical",
-      marginLeft: 2,
-      textAlign: "right"
+      textAlign: "center",
+      maxWidth: "80%"
     },
     stepContainer: {
       display: "flex",
@@ -12642,7 +12651,19 @@ var config32 = helpers22.defineMultiStyleConfig({
     }),
     accent: (props) => ({
       root: {
-        backgroundColor: mode("seaMist", "pine")(props)
+        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)
+        }
       }
     })
   },

package/dist/index.d.mts

@@ -1953,11 +1953,37 @@ type SporProviderProps = ChakraProviderProps & {
 declare const SporProvider: ({ theme, language, brand, children, ...props }: SporProviderProps) => React__default.JSX.Element;
 
 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.
@@ -1966,21 +1992,22 @@ type StepperProps = {
  *
  * ```tsx
  * <Stepper
- *   title="Eksempel"
+ *   title="Example"
  *   onClick={handleStepClick}
  *   activeStep={2}
- *   steps={['Velg hvor', 'Velg når', 'Velg hvordan']}
+ *   steps={['Where', 'When', 'How']}
  * />
  * ```
  **/
-declare const Stepper: ({ onClick, steps, activeStep: activeStepAsStringOrNumber, title, variant, }: StepperProps) => React__default.JSX.Element;
+declare const Stepper: ({ onClick, onBackButtonClick, steps, activeStep: activeStepAsStringOrNumber, title, heading, headingLevel, variant, isDisabled, }: StepperProps) => React__default.JSX.Element;
 
 type StepperStepProps = {
     children: React__default.ReactNode;
     stepNumber: number;
     variant: "base" | "accent";
+    isDisabled?: boolean;
 };
-declare const StepperStep: ({ children, stepNumber, variant, }: StepperStepProps) => React__default.JSX.Element;
+declare const StepperStep: ({ children, stepNumber, variant, isDisabled: isDisabledOverride, }: StepperStepProps) => React__default.JSX.Element;
 
 type TabsProps = Exclude<TabsProps$1, "colorScheme" | "variant" | "orientation" | "size"> & {
     colorScheme: "base" | "accent";
@@ -4733,12 +4760,7 @@ declare const theme: {
                     display: ("flex" | "none" | null)[];
                     alignItems: string;
                     justifyContent: string;
-                };
-                backButton: {
-                    borderRadius: string;
-                    paddingX: number;
-                    width: string;
-                    minWidth: string;
+                    gap: number;
                 };
                 title: {
                     overflow: string;
@@ -4746,8 +4768,8 @@ declare const theme: {
                     WebkitLineClamp: number;
                     display: string;
                     WebkitBoxOrient: string;
-                    marginLeft: number;
                     textAlign: string;
+                    maxWidth: string;
                 };
                 stepContainer: {
                     display: string;
@@ -4760,7 +4782,7 @@ declare const theme: {
             } | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("title" | "container" | "closeButton" | "root" | "innerContainer" | "backButton" | "stepCounter" | "stepContainer" | "stepButton" | "stepNumber" | "stepTitle")[];
+                    keys: ("title" | "container" | "closeButton" | "root" | "innerContainer" | "stepCounter" | "stepContainer" | "stepButton" | "stepNumber" | "stepTitle")[];
                 }>;
             } | undefined;
             variants?: {
@@ -4772,6 +4794,18 @@ declare const theme: {
                 accent: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     root: {
                         backgroundColor: string;
+                        color: string;
+                    };
+                    stepButton: {
+                        color: string;
+                        _hover: {
+                            backgroundColor: string;
+                        };
+                    };
+                    backButton: {
+                        _hover: {
+                            backgroundColor: string;
+                        };
                     };
                 };
             } | undefined;
@@ -4780,7 +4814,7 @@ declare const theme: {
                 variant?: "base" | "accent" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
-            parts: ("title" | "container" | "closeButton" | "root" | "innerContainer" | "backButton" | "stepCounter" | "stepContainer" | "stepButton" | "stepNumber" | "stepTitle")[];
+            parts: ("title" | "container" | "closeButton" | "root" | "innerContainer" | "stepCounter" | "stepContainer" | "stepButton" | "stepNumber" | "stepTitle")[];
         };
         Switch: {
             baseStyle?: {

package/dist/index.d.ts

@@ -1953,11 +1953,37 @@ type SporProviderProps = ChakraProviderProps & {
 declare const SporProvider: ({ theme, language, brand, children, ...props }: SporProviderProps) => React__default.JSX.Element;
 
 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.
@@ -1966,21 +1992,22 @@ type StepperProps = {
  *
  * ```tsx
  * <Stepper
- *   title="Eksempel"
+ *   title="Example"
  *   onClick={handleStepClick}
  *   activeStep={2}
- *   steps={['Velg hvor', 'Velg når', 'Velg hvordan']}
+ *   steps={['Where', 'When', 'How']}
  * />
  * ```
  **/
-declare const Stepper: ({ onClick, steps, activeStep: activeStepAsStringOrNumber, title, variant, }: StepperProps) => React__default.JSX.Element;
+declare const Stepper: ({ onClick, onBackButtonClick, steps, activeStep: activeStepAsStringOrNumber, title, heading, headingLevel, variant, isDisabled, }: StepperProps) => React__default.JSX.Element;
 
 type StepperStepProps = {
     children: React__default.ReactNode;
     stepNumber: number;
     variant: "base" | "accent";
+    isDisabled?: boolean;
 };
-declare const StepperStep: ({ children, stepNumber, variant, }: StepperStepProps) => React__default.JSX.Element;
+declare const StepperStep: ({ children, stepNumber, variant, isDisabled: isDisabledOverride, }: StepperStepProps) => React__default.JSX.Element;
 
 type TabsProps = Exclude<TabsProps$1, "colorScheme" | "variant" | "orientation" | "size"> & {
     colorScheme: "base" | "accent";
@@ -4733,12 +4760,7 @@ declare const theme: {
                     display: ("flex" | "none" | null)[];
                     alignItems: string;
                     justifyContent: string;
-                };
-                backButton: {
-                    borderRadius: string;
-                    paddingX: number;
-                    width: string;
-                    minWidth: string;
+                    gap: number;
                 };
                 title: {
                     overflow: string;
@@ -4746,8 +4768,8 @@ declare const theme: {
                     WebkitLineClamp: number;
                     display: string;
                     WebkitBoxOrient: string;
-                    marginLeft: number;
                     textAlign: string;
+                    maxWidth: string;
                 };
                 stepContainer: {
                     display: string;
@@ -4760,7 +4782,7 @@ declare const theme: {
             } | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("title" | "container" | "closeButton" | "root" | "innerContainer" | "backButton" | "stepCounter" | "stepContainer" | "stepButton" | "stepNumber" | "stepTitle")[];
+                    keys: ("title" | "container" | "closeButton" | "root" | "innerContainer" | "stepCounter" | "stepContainer" | "stepButton" | "stepNumber" | "stepTitle")[];
                 }>;
             } | undefined;
             variants?: {
@@ -4772,6 +4794,18 @@ declare const theme: {
                 accent: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     root: {
                         backgroundColor: string;
+                        color: string;
+                    };
+                    stepButton: {
+                        color: string;
+                        _hover: {
+                            backgroundColor: string;
+                        };
+                    };
+                    backButton: {
+                        _hover: {
+                            backgroundColor: string;
+                        };
                     };
                 };
             } | undefined;
@@ -4780,7 +4814,7 @@ declare const theme: {
                 variant?: "base" | "accent" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
-            parts: ("title" | "container" | "closeButton" | "root" | "innerContainer" | "backButton" | "stepCounter" | "stepContainer" | "stepButton" | "stepNumber" | "stepTitle")[];
+            parts: ("title" | "container" | "closeButton" | "root" | "innerContainer" | "stepCounter" | "stepContainer" | "stepButton" | "stepNumber" | "stepTitle")[];
         };
         Switch: {
             baseStyle?: {

package/dist/index.js

@@ -5140,16 +5140,22 @@ var init_Stepper = __esm({
     exports.Stepper = ({
       onClick = () => {
       },
+      onBackButtonClick,
       steps,
       activeStep: activeStepAsStringOrNumber,
       title,
-      variant
+      heading,
+      headingLevel,
+      variant,
+      isDisabled
     }) => {
       const style = react.useMultiStyleConfig("Stepper", { variant });
       const numberOfSteps = steps.length;
       const activeStep = Number(activeStepAsStringOrNumber);
       const { t: t2 } = useTranslation();
-      return /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { __css: style.root }, /* @__PURE__ */ React69__namespace.default.createElement(
+      const hideBackButtonOnFirstStep = activeStep === 1 && !onBackButtonClick;
+      const shownHeading = heading || title;
+      return /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { sx: style.root }, /* @__PURE__ */ React69__namespace.default.createElement(
         StepperProvider,
         {
           onClick,
@@ -5157,40 +5163,51 @@ var init_Stepper = __esm({
           variant,
           numberOfSteps
         },
-        /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { __css: style.container }, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { __css: style.innerContainer }, /* @__PURE__ */ React69__namespace.default.createElement(react.HStack, null, activeStep > 1 && /* @__PURE__ */ React69__namespace.default.createElement(
-          exports.IconButton,
-          {
-            "aria-label": t2(texts23.back),
-            icon: /* @__PURE__ */ React69__namespace.default.createElement(sporIconReact.DropdownLeftFill24Icon, null),
-            variant: "ghost",
-            size: "sm",
-            onClick: () => onClick(activeStep - 1),
-            __css: style.backButton
-          }
-        ), /* @__PURE__ */ React69__namespace.default.createElement(
-          exports.SimplePopover,
+        /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { sx: style.container }, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { sx: style.innerContainer }, /* @__PURE__ */ React69__namespace.default.createElement(
+          react.Flex,
           {
-            triggerElement: /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { as: "button", __css: style.stepCounter }, t2(texts23.stepsOf(activeStep, numberOfSteps))),
-            borderRadius: "xs"
+            justifyContent: "space-between",
+            alignItems: "center",
+            gap: 2,
+            flex: 1
           },
-          steps.map((step, index) => /* @__PURE__ */ React69__namespace.default.createElement(
-            exports.StepperStep,
+          /* @__PURE__ */ React69__namespace.default.createElement(
+            exports.IconButton,
             {
-              key: step,
-              stepNumber: index + 1,
-              variant
-            },
-            step
-          ))
-        )), title && /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { as: "h3", __css: style.title }, title)), /* @__PURE__ */ React69__namespace.default.createElement(react.Flex, { justifyContent: "center", display: ["none", null, "flex"] }, steps.map((step, index) => /* @__PURE__ */ React69__namespace.default.createElement(exports.StepperStep, { key: index, stepNumber: index + 1, variant }, step))))
+              "aria-label": t2(texts23.back),
+              icon: /* @__PURE__ */ React69__namespace.default.createElement(sporIconReact.ArrowLeftFill24Icon, null),
+              variant: "ghost",
+              size: "sm",
+              visibility: hideBackButtonOnFirstStep ? "hidden" : "visible",
+              onClick: () => {
+                if (onBackButtonClick) {
+                  onBackButtonClick(activeStep === 1);
+                }
+                onClick(activeStep - 1);
+              }
+            }
+          ),
+          shownHeading && /* @__PURE__ */ React69__namespace.default.createElement(exports.Text, { flex: 1, variant: "sm", as: headingLevel, sx: style.title }, shownHeading),
+          /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { sx: style.stepCounter }, t2(texts23.stepsOf(activeStep, numberOfSteps)))
+        )), /* @__PURE__ */ React69__namespace.default.createElement(react.Flex, { justifyContent: "center", display: ["none", null, "flex"] }, steps.map((step, index) => /* @__PURE__ */ React69__namespace.default.createElement(
+          exports.StepperStep,
+          {
+            key: index,
+            stepNumber: index + 1,
+            variant,
+            "aria-current": index + 1 === activeStep ? "step" : void 0,
+            isDisabled
+          },
+          step
+        ))))
       ));
     };
     texts23 = 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",
@@ -5201,7 +5218,7 @@ var init_Stepper = __esm({
     });
   }
 });
-exports.StepperStep = void 0; var getButtonStylesForState, getState;
+exports.StepperStep = void 0; var getState;
 var init_StepperStep = __esm({
   "src/stepper/StepperStep.tsx"() {
     init_src();
@@ -5209,7 +5226,8 @@ var init_StepperStep = __esm({
     exports.StepperStep = ({
       children,
       stepNumber,
-      variant
+      variant,
+      isDisabled: isDisabledOverride
     }) => {
       const { activeStep, onClick } = useStepper();
       const state2 = getState(stepNumber, activeStep);
@@ -5217,45 +5235,42 @@ var init_StepperStep = __esm({
         state: state2,
         variant
       });
-      const adjustedProps = getButtonStylesForState(state2);
-      return /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { __css: style.stepContainer }, stepNumber > 1 && /* @__PURE__ */ React69__namespace.default.createElement(sporIconReact.DropdownRightFill18Icon, { marginX: 5, display: ["none", "block"] }), /* @__PURE__ */ React69__namespace.default.createElement(
+      const disabledTextColor = react.useColorModeValue(
+        "blackAlpha.400",
+        "whiteAlpha.400"
+      );
+      const iconColor = react.useColorModeValue("blackAlpha.200", "whiteAlpha.200");
+      const isDisabled = state2 !== "active" && isDisabledOverride || state2 === "disabled";
+      return /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { sx: style.stepContainer }, stepNumber > 1 && /* @__PURE__ */ React69__namespace.default.createElement(
+        sporIconReact.DropdownRightFill18Icon,
+        {
+          marginX: 5,
+          display: ["none", null, "block"],
+          color: iconColor
+        }
+      ), isDisabled ? /* @__PURE__ */ React69__namespace.default.createElement(
+        exports.Text,
+        {
+          variant: "xs",
+          fontSize: "16px",
+          color: disabledTextColor,
+          cursor: "default",
+          paddingX: 2
+        },
+        children
+      ) : /* @__PURE__ */ React69__namespace.default.createElement(
         exports.Button,
         {
           size: "xs",
-          variant: state2 === "active" ? "primary" : state2 === "completed" ? "tertiary" : "ghost",
-          ...adjustedProps,
-          onClick: () => onClick(stepNumber)
+          variant: state2 === "active" ? "primary" : "ghost",
+          onClick: state2 === "completed" ? () => onClick(stepNumber) : void 0,
+          pointerEvents: state2 === "active" ? "none" : "auto",
+          tabIndex: state2 === "active" ? -1 : void 0,
+          sx: style.stepButton
         },
         children
       ));
     };
-    getButtonStylesForState = (state2) => {
-      switch (state2) {
-        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 {};
-      }
-    };
     getState = (stepNumber, activeStep) => {
       if (stepNumber < activeStep) {
         return "completed";
@@ -14229,7 +14244,6 @@ var init_stepper2 = __esm({
       "root",
       "container",
       "innerContainer",
-      "backButton",
       "title",
       "stepCounter",
       "stepContainer",
@@ -14259,13 +14273,8 @@ var init_stepper2 = __esm({
           overflow: "hidden",
           display: ["flex", null, "none"],
           alignItems: "center",
-          justifyContent: "space-between"
-        },
-        backButton: {
-          borderRadius: "xs",
-          paddingX: 0,
-          width: "auto",
-          minWidth: "auto"
+          justifyContent: "space-between",
+          gap: 3
         },
         title: {
           overflow: "hidden",
@@ -14273,8 +14282,8 @@ var init_stepper2 = __esm({
           WebkitLineClamp: 2,
           display: "-webkit-box",
           WebkitBoxOrient: "vertical",
-          marginLeft: 2,
-          textAlign: "right"
+          textAlign: "center",
+          maxWidth: "80%"
         },
         stepContainer: {
           display: "flex",
@@ -14293,7 +14302,19 @@ var init_stepper2 = __esm({
         }),
         accent: (props) => ({
           root: {
-            backgroundColor: themeTools.mode("seaMist", "pine")(props)
+            backgroundColor: themeTools.mode("seaMist", "pine")(props),
+            color: themeTools.mode("darkTeal", "seaMist")(props)
+          },
+          stepButton: {
+            color: props.state === "disabled" ? themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props) : props.state === "completed" ? themeTools.mode("darkTeal", "white")(props) : themeTools.mode("white", "darkTeal")(props),
+            _hover: {
+              backgroundColor: props.state === "disabled" ? "transparent" : themeTools.mode("coralGreen", "greenHaze")(props)
+            }
+          },
+          backButton: {
+            _hover: {
+              backgroundColor: themeTools.mode("coralGreen", "greenHaze")(props)
+            }
           }
         })
       },

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-CSCLMQYA.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-UQDHT6S5.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "7.0.1",
+  "version": "7.1.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

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", 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/stepper.ts

@@ -5,7 +5,6 @@ const parts = anatomy("stepper").parts(
   "root",
   "container",
   "innerContainer",
-  "backButton",
   "title",
   "stepCounter",
   "stepContainer",
@@ -38,12 +37,7 @@ const config = helpers.defineMultiStyleConfig({
       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",
@@ -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),
+        },
       },
     }),
   },