@vygruppen/spor-react 3.7.7 → 3.8.0

package/src/input/NumericStepper.tsx

@@ -33,6 +33,10 @@ type NumericStepperProps = {
   isDisabled?: boolean;
   /** Whether to show input field or not */
   withInput?: boolean;
+  /** The amount to increase/decrease when pressing +/- */
+  stepSize?: number;
+  /** Whether to show the number input when value is zero  */
+  showZero?: boolean;
 } & Omit<BoxProps, "onChange">;
 /** A simple stepper component for integer values
  *
@@ -43,10 +47,10 @@ type NumericStepperProps = {
  * <NumericStepper value={value} onChange={setValue} />
  * ```
  *
- * You can also set a minimum and/or maximum value:
+ * You can also set a minimum and/or maximum value and step size:
  *
  * ```tsx
- * <NumericStepper value={value} onChange={setValue} minValue={1} maxValue={10} />
+ * <NumericStepper value={value} onChange={setValue} minValue={1} maxValue={10} stepSize={3} />
  * ```
  *
  * You can use the NumericStepper inside of a FormControl component to get IDs etc linked up automatically:
@@ -68,6 +72,8 @@ export function NumericStepper({
   maxValue = 99,
   isDisabled,
   withInput = true,
+  stepSize = 1,
+  showZero = false,
   ...boxProps
 }: NumericStepperProps) {
   const { t } = useTranslation();
@@ -80,15 +86,17 @@ export function NumericStepper({
   const textColor = useColorModeValue("darkGrey", "white");
   const backgroundColor = useColorModeValue("white", "darkGrey");
   const focusColor = useColorModeValue("greenHaze", "azure");
+  const clampedStepSize = Math.max(Math.min(stepSize, 10), 1);
 
   return (
     <Flex alignItems="center" {...boxProps}>
       <VerySmallButton
-        icon={<SubtractIcon color="white" />}
-        aria-label={t(texts.decrementButtonAriaLabel)}
-        onClick={() => onChange(value - 1)}
+        icon={<SubtractIcon color="white" stepLabel={clampedStepSize} />}
+        aria-label={t(texts.decrementButtonAriaLabel(clampedStepSize))}
+        onClick={() => onChange(Math.max(value - clampedStepSize, minValue))}
         visibility={value <= minValue ? "hidden" : "visible"}
         isDisabled={formControlProps.disabled}
+        id={value <= minValue ? undefined : formControlProps.id}
       />
       {withInput ? (
         <chakra.input
@@ -98,10 +106,10 @@ export function NumericStepper({
           name={nameProp}
           value={value}
           {...formControlProps}
-          id={value !== 0 ? formControlProps.id : undefined}
+          id={!showZero && value === 0 ? undefined : formControlProps.id}
           fontSize="sm"
           fontWeight="bold"
-          width="3ch"
+          width={`${Math.max(value.toString().length + 1, 3)}ch`}
           marginX={1}
           paddingX={1}
           borderRadius="xs"
@@ -109,7 +117,7 @@ export function NumericStepper({
           backgroundColor={backgroundColor}
           color={textColor}
           transition="box-shadow .1s ease-out"
-          visibility={value === 0 ? "hidden" : "visible"}
+          visibility={!showZero && value === 0 ? "hidden" : "visible"}
           aria-live="assertive"
           aria-label={value.toString()}
           _hover={{
@@ -136,7 +144,7 @@ export function NumericStepper({
             if (Number.isNaN(numericInput)) {
               return;
             }
-            onChange(numericInput);
+            onChange(Math.max(Math.min(numericInput, maxValue), minValue));
           }}
         />
       ) : (
@@ -149,19 +157,19 @@ export function NumericStepper({
           textAlign="center"
           color={textColor}
           transition="box-shadow .1s ease-out"
-          visibility={value === 0 ? "hidden" : "visible"}
+          visibility={!showZero && value === 0 ? "hidden" : "visible"}
           aria-label={value.toString()}
         >
           {value}
         </chakra.text>
       )}
       <VerySmallButton
-        icon={<AddIcon color="white" />}
-        aria-label={t(texts.incrementButtonAriaLabel)}
-        onClick={() => onChange(value + 1)}
+        icon={<AddIcon color="white" stepLabel={clampedStepSize} />}
+        aria-label={t(texts.incrementButtonAriaLabel(clampedStepSize))}
+        onClick={() => onChange(Math.min(value + clampedStepSize, maxValue))}
         visibility={value >= maxValue ? "hidden" : "visible"}
         isDisabled={formControlProps.disabled}
-        id={value === 0 ? formControlProps.id : undefined}
+        id={value >= maxValue ? undefined : formControlProps.id}
       />
     </Flex>
   );
@@ -201,65 +209,80 @@ const VerySmallButton = (props: VerySmallButtonProps) => {
   );
 };
 
-const SubtractIcon = (props: BoxProps) => (
-  <Box
-    as="svg"
-    viewBox="0 0 30 30"
-    width="24"
-    height="24"
-    stroke="currentColor"
-    {...props}
-  >
-    <line
-      x1="9"
-      y1="15"
-      x2="21"
-      y2="15"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-    />
-  </Box>
+const SubtractIcon = (props: BoxProps & { stepLabel: number }) => (
+  <>
+    <Box
+      as="svg"
+      viewBox="0 0 30 30"
+      width="24"
+      height="24"
+      stroke="currentColor"
+      {...props}
+    >
+      <line
+        x1="9"
+        y1="15"
+        x2="21"
+        y2="15"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </Box>
+    {props.stepLabel > 1 && (
+      <chakra.span paddingRight="1">{props.stepLabel.toString()}</chakra.span>
+    )}
+  </>
 );
 
-const AddIcon = (props: BoxProps) => (
-  <Box
-    as="svg"
-    viewBox="0 0 30 30"
-    width="24"
-    height="24"
-    stroke="currentColor"
-    {...props}
-  >
-    <line
-      x1="9"
-      y1="15"
-      x2="21"
-      y2="15"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-    />
-    <line
-      x1="15"
-      y1="9"
-      x2="15"
-      y2="21"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-    />
-  </Box>
+const AddIcon = (props: BoxProps & { stepLabel: number }) => (
+  <>
+    <Box
+      as="svg"
+      viewBox="0 0 30 30"
+      width="24"
+      height="24"
+      stroke="currentColor"
+      {...props}
+    >
+      <line
+        x1="9"
+        y1="15"
+        x2="21"
+        y2="15"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+      <line
+        x1="15"
+        y1="9"
+        x2="15"
+        y2="21"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </Box>
+
+    {props.stepLabel > 1 && (
+      <chakra.span paddingRight="1">{props.stepLabel.toString()}</chakra.span>
+    )}
+  </>
 );
 
 const texts = createTexts({
-  decrementButtonAriaLabel: {
-    nb: "Trekk fra 1",
-    en: "Subtract 1",
-    nn: "Trekk frå 1",
-    sv: "Subtrahera 1",
+  decrementButtonAriaLabel(stepSize) {
+    return {
+      nb: `Trekk fra ${stepSize}`,
+      en: `Subtract ${stepSize}`,
+      nn: `Trekk frå ${stepSize}`,
+      sv: `Subtrahera ${stepSize}`,
+    };
   },
-  incrementButtonAriaLabel: {
-    nb: "Legg til 1",
-    en: "Add 1",
-    nn: "Legg til 1",
-    sv: "Lägg till 1",
+  incrementButtonAriaLabel(stepSize) {
+    return {
+      nb: `Legg til ${stepSize}`,
+      en: `Add ${stepSize}`,
+      nn: `Legg til ${stepSize}`,
+      sv: `Lägg till ${stepSize}`,
+    };
   },
 });

package/src/theme/components/close-button.ts

@@ -1,39 +1,40 @@
 import { defineStyleConfig } from "@chakra-ui/react";
-import { cssVar } from "@chakra-ui/theme-tools";
+import { cssVar, mode } from "@chakra-ui/theme-tools";
 import { getBoxShadowString } from "../utils/box-shadow-utils";
 import { focusVisible } from "../utils/focus-utils";
 
 const $size = cssVar("close-button-size");
 
 const config = defineStyleConfig({
-  baseStyle: {
+  baseStyle: (props) => ({
     w: [$size.reference],
     h: [$size.reference],
     transitionProperty: "common",
     transitionDuration: "normal",
-    borderRadius: "xs",
+    borderRadius: "md",
     backgroundColor: "transparent",
-    color: "darkGrey",
+    color: mode("darkGrey", "white")(props),
     fontWeight: "normal",
     ...focusVisible({
       focus: {
         outline: "none",
-        boxShadow: getBoxShadowString({ borderColor: "greenHaze" }),
+        boxShadow: getBoxShadowString({ borderColor: mode("greenHaze", "azure")(props) }),
+        outlineOffset: "2px",
       },
       notFocus: {
         boxShadow: "none",
       },
     }),
     _hover: {
-      backgroundColor: "seaMist",
+      backgroundColor: mode("seaMist", "pine")(props),
       _disabled: {
         color: "dimGrey",
       },
     },
     _active: {
-      backgroundColor: "mint",
+      backgroundColor: mode("mint", "whiteAlpha.200")(props),
     },
-  },
+  }),
   sizes: {
     lg: {
       [$size.variable]: "40px",

package/src/theme/components/datepicker.ts

@@ -19,7 +19,6 @@ const parts = anatomy("datepicker").parts(
 const $arrowBackground = cssVar("popper-arrow-bg");
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
-
 const config = helpers.defineMultiStyleConfig({
   baseStyle: (props) => ({
     wrapper: {
@@ -29,6 +28,7 @@ const config = helpers.defineMultiStyleConfig({
       }),
       transitionProperty: "box-shadow",
       transitionDuration: "fast",
+      borderRadius: "sm",
       display: "flex",
       flex: 1,
       paddingY: 0.5,
@@ -80,27 +80,26 @@ const config = helpers.defineMultiStyleConfig({
     },
     calendarTriggerButton: {
       backgroundColor: mode("white", "night")(props),
-      boxShadow: `${getBoxShadowString({
-        borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
-      })}, inset 1px 0 0 1px ${mode("white", colors.night)(props)}`, // to make the shadow colors not multiply
+      boxShadow: "none",
       width: 8,
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      borderRightRadius: "sm",
+      borderLeftRadius: "sm",
       transitionProperty: "box-shadow, background-color",
       transitionSpeed: "fast",
       position: "relative",
-      left: "-1px", // To make the box-shadows overlap
+      paddingTop: 1,
+      paddingBottom: 1,
+      borderRadius: "sm",
+      right: "9px",
 
       _hover: {
-        boxShadow: `${getBoxShadowString({
-          borderColor: mode("darkGrey", "white")(props),
-          borderWidth: 2,
-        })}, inset 2px 0 0 2px ${mode("white", colors.night)(props)}`,
+        boxShadow: "none",
+        backgroundColor: mode("seaMist", "pine")(props),
       },
       _active: {
-        backgroundColor: mode("mint", "azure")(props),
+        backgroundColor: mode("mint", "whiteAlpha.200")(props),
       },
       ...focusVisible({
         focus: {
@@ -124,18 +123,22 @@ const config = helpers.defineMultiStyleConfig({
         }),
       },
     },
-    arrow: {
+    arrow: {  
       [$arrowBackground.variable]: mode("white", colors.night)(props),
-    },
+    },    
     calendar: {
       backgroundColor: mode("white", "night")(props),
       color: mode("darkGrey", "white")(props),
+      boxShadow: getBoxShadowString({
+        borderWidth: 2,
+        borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props),
+      }),
     },
     weekdays: {
       color: mode("darkGrey", "white")(props),
     },
     weekend: {
-      color: mode("greenHaze", "azure")(props),
+      color: mode("darkTeal", "seaMist")(props),
     },
     dateCell: {
       backgroundColor: mode("white", "night")(props),
@@ -195,7 +198,7 @@ const config = helpers.defineMultiStyleConfig({
       "&[data-today]": {
         boxShadow: getBoxShadowString({
           borderWidth: 1,
-          borderColor: mode("osloGrey", "dimGrey")(props),
+          borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
         }),
         _focus: {
           outline: "none",
@@ -212,16 +215,64 @@ const config = helpers.defineMultiStyleConfig({
     },
   }),
   variants: {
-    simple: {
-      wrapper: {
-        borderRadius: "sm",
+    base: (props) => ({
+      calendar: {
+        backgroundColor: mode("white", "night")(props),
+        color: mode("darkGrey", "white")(props),
+        boxShadow: getBoxShadowString({
+          borderWidth: 2,
+          borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props),
+        }),
       },
-    },
-    "with-trigger": {
-      wrapper: {
-        borderLeftRadius: "sm",
+      dateCell: {
+        color: mode("darkGrey", "white")(props),
+        _hover: {
+          backgroundColor: mode("seaMist", "pine")(props),
+        },
+        "&[data-today]": {
+          boxShadow: getBoxShadowString({
+            borderWidth: 1,
+            borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
+          }),
+        },
       },
-    },
+    }),
+    floating: (props) => ({
+        calendar: {
+          backgroundColor: mode("white", "night")(props),
+          color: mode("darkGrey", "white")(props),
+          boxShadow: getBoxShadowString({
+            borderColor: mode("grey.200", "whiteAlpha.400")(props),
+            baseShadow: "sm",
+          }),
+        },
+      dateCell: {
+        color: mode("darkGrey", "white")(props),
+        _hover: {
+          backgroundColor: mode("", "")(props),
+        },
+      },
+    }),
+    ghost: (props) => ({
+      calendar: {
+        backgroundColor: mode("white", "night")(props),
+        color: mode("darkGrey", "white")(props),
+        boxShadow: getBoxShadowString({
+          borderWidth: 2,
+          borderColor: mode("", "")(props),
+        }),
+      },
+      dateCell: {
+        color: mode("darkGrey", "white")(props),
+        _hover: {
+          backgroundColor: mode("seaMist", "pine")(props),
+        },
+        _selected: {
+          backgroundColor: mode("", "primaryGreen")(props),
+          color: "darkGrey"
+        },
+      },
+    }),
   },
 });
 

package/src/theme/components/modal.ts

@@ -1,6 +1,6 @@
 import { modalAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import type { PartsStyleObject } from "@chakra-ui/theme-tools";
+import { mode, type PartsStyleObject } from "@chakra-ui/theme-tools";
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 
@@ -19,8 +19,8 @@ const config = helpers.defineMultiStyleConfig({
     },
     dialog: {
       borderRadius: "md",
-      background: "white",
-      color: "inherit",
+      background: mode("white", "night")(props),
+      color: mode("inherit", "white")(props),
       my: "3.75rem",
       zIndex: "modal",
       maxHeight:
@@ -36,6 +36,7 @@ const config = helpers.defineMultiStyleConfig({
     },
     closeButton: {
       position: "absolute",
+      color: "inherit",
       top: 3,
       insetEnd: 3,
     },