@vygruppen/spor-react 3.7.6 → 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/tab/Tabs.tsx

@@ -9,7 +9,17 @@ export type TabsProps = Exclude<
   ChakraTabsProps,
   "colorScheme" | "variant" | "orientation" | "size"
 > & {
-  colorScheme: "dark" | "light" | "green" | "grey";
+  colorScheme: 
+  /** @deprecated dark is deprecated please use accent*/
+  | "dark"
+  /** @deprecated light is deprecated please use default*/
+  | "light"
+  /** @deprecated green is deprecated please use accent*/
+  | "green"   
+  /** @deprecated grey is deprecated please use default*/
+  | "grey"
+  | "base" 
+  | "accent" ;
   /** Defaults to `md` */
   size?: "sm" | "md" | "lg" | "xl";
   /** Defaults to `round` */

package/src/theme/components/button.ts

@@ -11,7 +11,9 @@ const config = defineStyleConfig({
     fontWeight: "bold",
     transitionProperty: "common",
     transitionDuration: "normal",
-    px: 3,
+    textWrap: "wrap",
+    paddingX: 3,
+    paddingY: 1,
     _focus: {
       boxShadow: 0,
       outline: 0,
@@ -36,7 +38,7 @@ const config = defineStyleConfig({
         focus: {
           boxShadow: `inset 0 0 0 4px ${mode(
             colors.darkTeal,
-            colors.seaMist,
+            colors.seaMist
           )(props)}, inset 0 0 0 6px currentColor`,
         },
         notFocus: { boxShadow: "none" },
@@ -57,10 +59,10 @@ const config = defineStyleConfig({
         focus: {
           boxShadow: `inset 0 0 0 2px ${mode(
             colors.greenHaze,
-            colors.azure,
+            colors.azure
           )(props)}, inset 0 0 0 4px ${mode(
             colors.white,
-            colors.darkGrey,
+            colors.darkGrey
           )(props)}`,
         },
         notFocus: { boxShadow: "none" },
@@ -84,18 +86,18 @@ const config = defineStyleConfig({
         focus: {
           boxShadow: `inset 0 0 0 2px ${mode(
             colors.greenHaze,
-            colors.azure,
+            colors.azure
           )(props)}, inset 0 0 0 4px ${mode(
             colors.white,
-            colors.blackAlpha[300],
+            colors.blackAlpha[300]
           )(props)}`,
           _hover: {
             boxShadow: `inset 0 0 0 2px ${mode(
               colors.greenHaze,
-              colors.azure,
+              colors.azure
             )(props)}, inset 0 0 0 4px ${mode(
               colors.white,
-              colors.blackAlpha[500],
+              colors.blackAlpha[500]
             )(props)}`,
           },
         },
@@ -107,18 +109,18 @@ const config = defineStyleConfig({
         backgroundColor: mode("mint", "whiteAlpha.300")(props),
         boxShadow: `inset 0 0 0 2px ${mode(
           colors.greenHaze,
-          colors.azure,
+          colors.azure
         )(props)}, inset 0 0 0 4px ${mode(
           colors.white,
-          colors.blackAlpha[600],
+          colors.blackAlpha[600]
         )(props)}`,
         _hover: {
           boxShadow: `inset 0 0 0 2px ${mode(
             colors.greenHaze,
-            colors.azure,
+            colors.azure
           )(props)}, inset 0 0 0 4px ${mode(
             colors.white,
-            colors.blackAlpha[600],
+            colors.blackAlpha[600]
           )(props)}`,
         },
       },
@@ -149,7 +151,7 @@ const config = defineStyleConfig({
       fontWeight: "normal",
       boxShadow: `inset 0 0 0 1px ${mode(
         colors.blackAlpha[400],
-        colors.whiteAlpha[400],
+        colors.whiteAlpha[400]
       )(props)}`,
       ...focusVisible({
         focus: {
@@ -161,7 +163,7 @@ const config = defineStyleConfig({
         notFocus: {
           boxShadow: `inset 0 0 0 1px ${mode(
             colors.blackAlpha[400],
-            colors.whiteAlpha[400],
+            colors.whiteAlpha[400]
           )(props)}`,
         },
       }),
@@ -171,7 +173,7 @@ const config = defineStyleConfig({
       _active: {
         boxShadow: `inset 0 0 0 1px ${mode(
           colors.blackAlpha[400],
-          colors.whiteAlpha[300],
+          colors.whiteAlpha[300]
         )(props)}`,
         backgroundColor: mode("mint", "whiteAlpha.200")(props),
       },
@@ -260,7 +262,7 @@ const config = defineStyleConfig({
       minHeight: 5,
       minWidth: 5,
       fontSize: "16px",
-      px: 2,
+      paddingX: 2,
     },
   },
   defaultProps: {

package/src/theme/components/card.ts

@@ -2,6 +2,7 @@ import { defineStyleConfig } from "@chakra-ui/react";
 import { colors } from "../foundations";
 import { getBoxShadowString } from "../utils/box-shadow-utils";
 import { focusVisible } from "../utils/focus-utils";
+import { mode } from "@chakra-ui/theme-tools";
 
 const config = defineStyleConfig({
   baseStyle: (props: any) => ({
@@ -22,7 +23,7 @@ const config = defineStyleConfig({
       ...focusVisible({
         focus: {
           boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
+            borderColor: mode("greenHaze", "azure")(props),
             borderWidth: 2,
             isInset: false,
           }),
@@ -61,13 +62,18 @@ type CardThemeProps = {
   size: "sm" | "lg";
 };
 
-function getColorSchemeBaseProps({ colorScheme }: CardThemeProps): {
-  backgroundColor: string;
-} {
+const getColorSchemeBaseProps= (props: CardThemeProps) => {
+  const { colorScheme, size } = props;
+  const baseShadow = size === "lg" ? "md" : "sm";
   switch (colorScheme) {
     case "white":
       return {
-        backgroundColor: "white",
+        backgroundColor: mode("white", "whiteAlpha.100")(props),
+        boxShadow: getBoxShadowString({
+          baseShadow,
+          borderColor: "silver",
+          isInset: false,
+        }),
       };
     case "grey":
       return {
@@ -116,12 +122,14 @@ function getColorSchemeClickableProps({ colorScheme, size }: CardThemeProps) {
   }
 }
 
-function getColorSchemeHoverProps({ colorScheme, size }: CardThemeProps) {
+const getColorSchemeHoverProps = (props: CardThemeProps) => {
+  const { colorScheme, size } = props;
   const baseShadow = size === "lg" ? "lg" : "md";
   switch (colorScheme) {
     case "white":
       return {
-        boxShadow: getBoxShadowString({
+        backgroundColor: mode("white", "whiteAlpha.200")(props),
+        boxShadow: getBoxShadowString({   
           baseShadow,
           borderColor: colors.steel,
           isInset: false,
@@ -146,13 +154,13 @@ function getColorSchemeHoverProps({ colorScheme, size }: CardThemeProps) {
       };
   }
 }
-
-function getColorSchemeActiveProps({ colorScheme, size }: CardThemeProps) {
+const getColorSchemeActiveProps = (props: CardThemeProps) => {
+  const { colorScheme, size } = props;
   const baseShadow = size === "lg" ? "sm" : "none";
   switch (colorScheme) {
     case "white":
       return {
-        backgroundColor: "mint",
+        backgroundColor: mode("mint", "teal")(props),
         boxShadow: getBoxShadowString({
           baseShadow,
           borderColor: colors.silver,

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"
+        },
+      },
+    }),
   },
 });