@vygruppen/spor-react 10.1.0 → 10.3.0

package/package.json

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

package/src/input/Input.tsx

@@ -10,7 +10,7 @@ import {
 } from "@chakra-ui/react";
 import React, { useId } from "react";
 
-export type InputProps = Omit<ChakraInputProps, "variant" | "size"> & {
+export type InputProps = Omit<ChakraInputProps, "size"> & {
   /** The input's label */
   label: string;
   /** Icon that shows up to the left */
@@ -32,6 +32,12 @@ export type InputProps = Omit<ChakraInputProps, "variant" | "size"> & {
  * ```tsx
  * <Input label="E-mail" leftIcon={<EmailOutline24Icon />} />
  * ```
+ *
+ * Input has two variants base, and floating.
+ *
+ * ```tsx
+ * <Input label="E-mail" leftIcon={<EmailOutline24Icon />} variant="floating" />
+ * ```
  */
 export const Input = forwardRef<InputProps, "input">(
   ({ label, leftIcon, rightIcon, id, size, ...props }, ref) => {

package/src/input/NumericStepper.tsx

@@ -4,7 +4,7 @@ import {
   useFormControl,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
-import React from "react";
+import React, { useRef } from "react";
 import {
   Box,
   BoxProps,
@@ -35,6 +35,8 @@ type NumericStepperProps = {
   stepSize?: number;
   /** Whether to show the number input when value is zero  */
   showZero?: boolean;
+  /** Name added to the aria-label of subtract and add buttons. */
+  ariaLabelContext?: { singular: string; plural: string };
 } & Omit<BoxProps, "onChange">;
 /** A simple stepper component for integer values
  *
@@ -72,8 +74,10 @@ export function NumericStepper({
   withInput = true,
   stepSize = 1,
   showZero = false,
+  ariaLabelContext = { singular: "", plural: "" },
   ...boxProps
 }: NumericStepperProps) {
+  const addButtonRef = useRef<HTMLButtonElement>(null);
   const { t } = useTranslation();
   const styles = useMultiStyleConfig("NumericStepper", {});
   const [value, onChange] = useControllableState<number>({
@@ -84,12 +88,26 @@ export function NumericStepper({
   const formControlProps = useFormControl({ id: idProp, isDisabled });
   const clampedStepSize = Math.max(Math.min(stepSize, 10), 1);
 
+  const focusOnAddButton = () => {
+    addButtonRef.current?.focus();
+  };
+
   return (
     <Flex __css={styles.container} {...boxProps}>
       <VerySmallButton
         icon={<SubtractIcon stepLabel={clampedStepSize} />}
-        aria-label={t(texts.decrementButtonAriaLabel(clampedStepSize))}
-        onClick={() => onChange(Math.max(value - clampedStepSize, minValue))}
+        aria-label={t(
+          texts.decrementButtonAriaLabel(
+            clampedStepSize,
+            stepSize == 1 ? ariaLabelContext.singular : ariaLabelContext.plural,
+          ),
+        )}
+        onClick={() => {
+          onChange(Math.max(value - clampedStepSize, minValue));
+          if (Math.max(value - clampedStepSize, minValue) <= minValue) {
+            focusOnAddButton();
+          }
+        }}
         visibility={value <= minValue ? "hidden" : "visible"}
         isDisabled={formControlProps.disabled}
         id={value <= minValue ? undefined : formControlProps.id}
@@ -107,27 +125,48 @@ export function NumericStepper({
           width={`${Math.max(value.toString().length + 1, 3)}ch`}
           visibility={!showZero && value === 0 ? "hidden" : "visible"}
           aria-live="assertive"
-          aria-label={value.toString()}
+          aria-label={
+            ariaLabelContext.plural !== ""
+              ? t(texts.currentNumberAriaLabel(ariaLabelContext.plural))
+              : ""
+          }
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
             const numericInput = Number(e.target.value);
             if (Number.isNaN(numericInput)) {
               return;
             }
             onChange(Math.max(Math.min(numericInput, maxValue), minValue));
+            if (
+              !showZero &&
+              Math.max(Math.min(numericInput, maxValue), minValue) === 0
+            ) {
+              focusOnAddButton();
+            }
           }}
         />
       ) : (
         <chakra.text
           sx={styles.text}
           visibility={!showZero && value === 0 ? "hidden" : "visible"}
-          aria-label={value.toString()}
+          aria-live="assertive"
+          aria-label={
+            ariaLabelContext.plural !== ""
+              ? t(texts.currentNumberAriaLabel(ariaLabelContext.plural))
+              : ""
+          }
         >
           {value}
         </chakra.text>
       )}
       <VerySmallButton
+        ref={addButtonRef}
         icon={<AddIcon stepLabel={clampedStepSize} />}
-        aria-label={t(texts.incrementButtonAriaLabel(clampedStepSize))}
+        aria-label={t(
+          texts.incrementButtonAriaLabel(
+            clampedStepSize,
+            stepSize == 1 ? ariaLabelContext.singular : ariaLabelContext.plural,
+          ),
+        )}
         onClick={() => onChange(Math.min(value + clampedStepSize, maxValue))}
         visibility={value >= maxValue ? "hidden" : "visible"}
         isDisabled={formControlProps.disabled}
@@ -152,12 +191,18 @@ type VerySmallButtonProps = {
   id?: string;
 };
 /** Internal override for extra small icon buttons */
-const VerySmallButton = (props: VerySmallButtonProps) => {
+const VerySmallButton = React.forwardRef((props: VerySmallButtonProps, ref) => {
   const styles = useMultiStyleConfig("NumericStepper", {});
   return (
-    <IconButton variant="primary" size="xs" sx={styles.button} {...props} />
+    <IconButton
+      variant="primary"
+      size="xs"
+      sx={styles.button}
+      ref={ref}
+      {...props}
+    />
   );
-};
+});
 
 type IconPropTypes = BoxProps & { stepLabel: number };
 
@@ -221,20 +266,28 @@ const AddIcon = ({ stepLabel, ...props }: IconPropTypes) => (
 );
 
 const texts = createTexts({
-  decrementButtonAriaLabel(stepSize) {
+  currentNumberAriaLabel(ariaContext) {
+    return {
+      nb: `Valgt antall ${ariaContext}`,
+      en: `Chosen number of ${ariaContext}`,
+      nn: `Valgt antall ${ariaContext}`,
+      sv: `Valgt antall ${ariaContext}`,
+    };
+  },
+  decrementButtonAriaLabel(stepSize, ariaContext) {
     return {
-      nb: `Trekk fra ${stepSize}`,
-      en: `Subtract ${stepSize}`,
-      nn: `Trekk frå ${stepSize}`,
-      sv: `Subtrahera ${stepSize}`,
+      nb: `Trekk fra ${stepSize} ${ariaContext}`,
+      en: `Subtract ${stepSize} ${ariaContext}`,
+      nn: `Trekk frå ${stepSize} ${ariaContext}`,
+      sv: `Subtrahera ${stepSize} ${ariaContext}`,
     };
   },
-  incrementButtonAriaLabel(stepSize) {
+  incrementButtonAriaLabel(stepSize, ariaContext) {
     return {
-      nb: `Legg til ${stepSize}`,
-      en: `Add ${stepSize}`,
-      nn: `Legg til ${stepSize}`,
-      sv: `Lägg till ${stepSize}`,
+      nb: `Legg til ${stepSize} ${ariaContext}`,
+      en: `Add ${stepSize} ${ariaContext}`,
+      nn: `Legg til ${stepSize} ${ariaContext}`,
+      sv: `Lägg till ${stepSize} ${ariaContext}`,
     };
   },
 });

package/src/modal/ModalHeader.tsx

@@ -26,6 +26,6 @@ export const ModalHeader = forwardRef<ModalHeaderProps, "header">(
           ? "center"
           : ("left" as ChakraModalHeaderProps["textAlign"]),
     };
-    return <ChakraModalHeader {...props} ref={ref} {...styles} />;
+    return <ChakraModalHeader as={"h1"} {...props} ref={ref} {...styles} />;
   },
 );

package/src/theme/components/input.ts

@@ -3,6 +3,7 @@ import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
 import { focusVisibleStyles } from "../utils/focus-utils";
 import { surface } from "../utils/surface-utils";
+import { floatingBackground, floatingBorder } from "../utils/floating-utils";
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 
@@ -20,9 +21,6 @@ const config = helpers.defineMultiStyleConfig({
       paddingX: 3,
       height: 8,
       fontSize: "mobile.md",
-      ...baseBackground("default", props),
-
-      ...baseBorder("default", props),
       _hover: {
         ...baseBorder("hover", props),
       },
@@ -73,6 +71,37 @@ const config = helpers.defineMultiStyleConfig({
       },
     },
   }),
+  variants: {
+    base: (props) => ({
+      field: {
+        ...baseBackground("default", props),
+        ...baseBorder("default", props),
+      },
+    }),
+    floating: (props) => ({
+      field: {
+        boxShadow: "sm",
+        ...floatingBackground("default", props),
+        ...floatingBorder("default", props),
+
+        _hover: {
+          ...floatingBorder("hover", props),
+          ...floatingBackground("hover", props),
+        },
+        _active: {
+          ...floatingBorder("active", props),
+          ...floatingBackground("active", props),
+        },
+        _selected: {
+          ...floatingBorder("selected", props),
+          ...floatingBackground("selected", props),
+        },
+      },
+    }),
+  },
+  defaultProps: {
+    variant: "base",
+  },
 });
 
 export default config;