@vygruppen/spor-react 13.1.4 → 13.2.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "13.1.4",
+  "version": "13.2.1",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -47,7 +47,7 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
-    "@vygruppen/spor-design-tokens": "5.0.2",
+    "@vygruppen/spor-design-tokens": "5.0.3",
     "@vygruppen/spor-icon-react": "5.0.0",
     "@vygruppen/spor-loader": "0.7.0"
   },

package/src/alert/Alert.tsx

@@ -9,6 +9,7 @@ import {
 import { IconComponent } from "@vygruppen/spor-icon-react";
 
 import { CloseButton } from "@/button";
+import { createTexts, useTranslation } from "@/i18n";
 
 import { AlertIcon } from "./AlertIcon";
 
@@ -58,6 +59,7 @@ export const Alert = ({
     children,
   } = props;
   const { open, onClose } = useDisclosure({ defaultOpen: true });
+  const { t } = useTranslation();
 
   const handleAlertClose = () => {
     onClose();
@@ -67,9 +69,21 @@ export const Alert = ({
   const recipe = useSlotRecipe({ key: "alert" });
   const styles = recipe({ variant: props.variant });
 
+  const getAriaLabelText = () => {
+    const variant = props.variant;
+    if (variant === "important" || variant === "alt")
+      return texts.ariaLabelAlertWarning;
+    if (variant === "error" || variant === "error-secondary")
+      return texts.ariaLabelAlertError;
+    if (variant === "success") return texts.ariaLabelAlertSuccess;
+    return texts.ariaLabelAlertInformative;
+  };
+
+  const ariaLabel = t(getAriaLabelText());
+
   if (!open) return null;
   return (
-    <ChakraAlert.Root ref={ref} {...props}>
+    <ChakraAlert.Root ref={ref} role="alert" aria-label={ariaLabel} {...props}>
       <ChakraAlert.Content
         flexDirection={title ? "column" : "row"}
         data-part="content"
@@ -114,3 +128,30 @@ export const Alert = ({
     </ChakraAlert.Root>
   );
 };
+
+const texts = createTexts({
+  ariaLabelAlertInformative: {
+    en: "Announcement",
+    nb: "Kunngjøring",
+    nn: "Kunngjering",
+    sv: "Meddelande",
+  },
+  ariaLabelAlertWarning: {
+    en: "Warning",
+    nb: "Advarsel",
+    nn: "Varsel",
+    sv: "Varning",
+  },
+  ariaLabelAlertError: {
+    en: "Error",
+    nb: "Feil",
+    nn: "Feil",
+    sv: "Fel",
+  },
+  ariaLabelAlertSuccess: {
+    en: "Success",
+    nb: "Suksess",
+    nn: "Suksess",
+    sv: "Framgång",
+  },
+});

package/src/input/ChoiceChip.tsx

@@ -1,94 +1,156 @@
 "use client";
-import { CheckboxCard, CheckboxCardRootProps, Span } from "@chakra-ui/react";
-import { CloseOutline24Icon } from "@vygruppen/spor-icon-react";
-import React from "react";
+import {
+  RadioCard as ChakraRadioCard,
+  RecipeVariantProps,
+  Span,
+  useSlotRecipe,
+} from "@chakra-ui/react";
+import { createContext, useContext, useId } from "react";
 
-type CheckBoxIcon = {
-  default: React.ReactNode;
-  checked: React.ReactNode;
-};
-
-export type ChoiceChipProps = Omit<
-  CheckboxCardRootProps,
-  "onCheckedChange" | "checked"
-> & {
-  icon?: CheckBoxIcon;
-  onCheckedChange?: (checked: boolean) => void;
-  checked?: boolean;
-};
+import { choiceChipSlotRecipe } from "@/theme/slot-recipes/choice-chip";
 
 /**
- * Choice chips are checkboxes that look like selectable buttons.
+ * Choice chips are radio buttons that look like selectable buttons, allowing only one selection at a time.
  *
  * Choice chips are available in four different sizes - `xs`, `sm`, `md` and `lg`.
  *
  * ```tsx
- * <Stack flexDirection="row">
- *   <ChoiceChip size="lg">Bus</ChoiceChip>
- *   <ChoiceChip size="lg">Train</ChoiceChip>
- * </Stack>
+ * <ChoiceChipGroup defaultValue="economy">
+ *      <ChoiceChip value="economy">Economy</ChoiceChip>
+ *      <ChoiceChip value="business">Business</ChoiceChip>
+ *      <ChoiceChip value="first-class">First Class</ChoiceChip>
+ * </ChoiceChipGroup>
  * ```
  *
- * There are also three different chipType - `icon`, `choice` and `filter`.
- *
- * ```tsx
- * <Stack flexDirection="row">
- *  <ChoiceChip chipType="icon" icon={<Bus24Icon />}>Bus</ChoiceChip>
- *  <ChoiceChip chipType="choice" icon={<Bus24Icon />}>Bus</ChoiceChip>
- *  <ChoiceChip chipType="filter" icon={<Bus24Icon />}>Bus</ChoiceChip>
- * </Stack>
- *
  * There are also three different variants - `core`, `accent` and `floating`.
  *
  * ```tsx
- * <Stack flexDirection="row">
- *   <ChoiceChip variant="core">Bus</ChoiceChip>
- *   <ChoiceChip variant="accent">Boat</ChoiceChip>
- *   <ChoiceChip variant="floating">Train</ChoiceChip>
- * </Stack>
+ * <>
+ * <ChoiceChipGroup defaultValue="bus" variant="core">
+ *   <ChoiceChip value="bus">Bus</ChoiceChip>
+ * </ChoiceChipGroup>
+ * <ChoiceChipGroup defaultValue="bus" variant="accent">
+ *   <ChoiceChip value="bus">Bus</ChoiceChip>
+ * </ChoiceChipGroup>
+ * <ChoiceChipGroup defaultValue="bus" variant="floating">
+ *   <ChoiceChip value="bus">Bus</ChoiceChip>
+ * </ChoiceChipGroup>
+ * </>
  * ```
+ *
+ * @see https://spor.vy.no/components/choice-chip
  */
 
+type RadioCardVariantProps = RecipeVariantProps<typeof choiceChipSlotRecipe>;
+
+type Variant = Pick<RadioCardRootProps, "variant" | "size">;
+
+const ChoiceChipContext = createContext<Variant>({
+  variant: "core",
+  size: "sm",
+});
+const useChoiceChipContext = () => useContext(ChoiceChipContext);
+
+type CheckBoxIcon = {
+  default: React.ReactNode;
+  checked: React.ReactNode;
+};
+
+type RadioCardItemProps = Exclude<
+  ChakraRadioCard.ItemProps,
+  "colorPalette" | "indicator" | "variant" | "size" | "addon"
+> &
+  RadioCardVariantProps & {
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    ariaLabel?: string;
+    icon?: CheckBoxIcon;
+  };
+
 export const ChoiceChip = ({
   ref,
-  children,
-  icon,
-  onCheckedChange,
-  ...rootProps
-}: ChoiceChipProps & {
+  ...props
+}: RadioCardItemProps & {
   ref?: React.Ref<HTMLInputElement>;
 }) => {
+  const { children, inputProps, icon, variant, size, css, ...rest } = props;
+  const { variant: contextVariant, size: contextSize } = useChoiceChipContext();
+
+  const uniqueId = useId();
+  const itemControlId = `radio-card-item-control-${uniqueId}`;
+
+  const inputHasAriaLabel =
+    inputProps?.["aria-labelledby"] || inputProps?.["aria-label"];
+
+  const finalVariant = variant ?? contextVariant;
+  const finalSize = size ?? contextSize;
+
+  const recipe = useSlotRecipe({ key: "choiceChip" });
+  const styles = recipe({
+    variant: finalVariant,
+    size: finalSize,
+  });
+
+  return (
+    <ChakraRadioCard.Item {...rest} css={{ ...css, ...styles.item }}>
+      <ChakraRadioCard.ItemHiddenInput
+        aria-labelledby={
+          inputHasAriaLabel ? inputProps?.["aria-labelledby"] : itemControlId
+        }
+        ref={ref}
+        {...inputProps}
+      />
+      <ChakraRadioCard.ItemControl
+        id={itemControlId}
+        aria-hidden
+        css={styles.itemControl}
+      >
+        <ChakraRadioCard.ItemContext>
+          {({ checked }) => (
+            <ChakraRadioCard.Label css={styles.label}>
+              {checked
+                ? icon?.checked && <Span>{icon.checked}</Span>
+                : icon?.default && <Span>{icon.default}</Span>}
+              {children}
+            </ChakraRadioCard.Label>
+          )}
+        </ChakraRadioCard.ItemContext>
+      </ChakraRadioCard.ItemControl>
+    </ChakraRadioCard.Item>
+  );
+};
+
+type RadioCardRootProps = Exclude<
+  ChakraRadioCard.RootProps,
+  "variant" | "size"
+> &
+  RadioCardVariantProps & {
+    children: React.ReactNode;
+    gap?: string | number;
+    direction?: "row" | "column";
+    display?: string;
+  };
+
+export const ChoiceChipGroup = ({
+  ref,
+  ...props
+}: RadioCardRootProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}) => {
+  const { children, variant, size, css, ...rest } = props;
+  const recipe = useSlotRecipe({ key: "choiceChip" });
+  const styles = recipe({ variant, size });
   return (
-    <CheckboxCard.Root
-      {...rootProps}
-      {...(onCheckedChange && {
-        onCheckedChange: (details) => onCheckedChange(!!details.checked),
-      })}
-    >
-      <CheckboxCard.Context>
-        {({ checked }) => (
-          <>
-            <CheckboxCard.HiddenInput ref={ref} />
-            <CheckboxCard.Control>
-              <CheckboxCard.Content>
-                <CheckboxCard.Label>
-                  {icon && (
-                    <Span width="24px">
-                      {checked ? icon.checked : icon.default}
-                    </Span>
-                  )}
-
-                  {rootProps.chipType !== "icon" && children}
-
-                  {rootProps.chipType === "filter" && checked && (
-                    <CloseOutline24Icon />
-                  )}
-                </CheckboxCard.Label>
-              </CheckboxCard.Content>
-            </CheckboxCard.Control>
-          </>
-        )}
-      </CheckboxCard.Context>
-    </CheckboxCard.Root>
+    <ChoiceChipContext.Provider value={{ variant, size }}>
+      <ChakraRadioCard.Root
+        css={{ ...styles.root, ...css }}
+        ref={ref}
+        variant={variant}
+        {...rest}
+      >
+        {children}
+      </ChakraRadioCard.Root>
+    </ChoiceChipContext.Provider>
   );
 };
+
+export const ChoiceChipLabel = ChakraRadioCard.Label;

package/src/input/Field.tsx

@@ -54,6 +54,7 @@ export type FieldBaseProps = {
   floatingLabel?: boolean;
   shouldFloat?: boolean;
   labelAsChild?: boolean;
+  gap?: string | number;
 };
 
 export type FieldProps = Omit<
@@ -100,13 +101,14 @@ export const Field = ({
     id,
     shouldFloat,
     labelAsChild,
+    gap,
     ...rest
   } = props;
   const recipe = useSlotRecipe({ key: "field" });
   const styles = recipe();
 
   return (
-    <Stack gap="2" ref={ref} width="100%" {...rest}>
+    <Stack ref={ref} width="100%" {...rest}>
       <ChakraField.Root
         disabled={disabled}
         invalid={invalid}
@@ -115,6 +117,7 @@ export const Field = ({
         css={styles.root}
         direction={direction}
         id={id}
+        gap={gap}
       >
         {label && !floatingLabel && (
           <Label asChild={labelAsChild} aria-hidden>

package/src/input/FilterChip.tsx

@@ -0,0 +1,85 @@
+"use client";
+import { CheckboxCard, CheckboxCardRootProps, Span } from "@chakra-ui/react";
+import { CloseOutline24Icon } from "@vygruppen/spor-icon-react";
+import React from "react";
+
+type CheckBoxIcon = {
+  default: React.ReactNode;
+  checked: React.ReactNode;
+};
+
+export type FilterChipProps = Omit<
+  CheckboxCardRootProps,
+  "onCheckedChange" | "checked"
+> & {
+  icon?: CheckBoxIcon;
+  onCheckedChange?: (checked: boolean) => void;
+  checked?: boolean;
+};
+
+/**
+ * Filter chips are checkboxes that look like selectable buttons.
+ *
+ * Filter chips are available in four different sizes - `xs`, `sm`, `md` and `lg`.
+ *
+ * ```tsx
+ * <Stack flexDirection="row">
+ *   <FilterChip size="lg">Bus</FilterChip>
+ *   <FilterChip size="lg">Train</FilterChip>
+ * </Stack>
+ * ```
+ *
+ * There are also three different variants - `core`, `accent` and `floating`.
+ *
+ * ```tsx
+ * <Stack flexDirection="row">
+ *   <FilterChip variant="core">Bus</FilterChip>
+ *   <FilterChip variant="accent">Boat</FilterChip>
+ *   <FilterChip variant="floating">Train</FilterChip>
+ * </Stack>
+ * ```
+ *
+ * @see https://spor.vy.no/components/filter-chip
+ */
+
+export const FilterChip = ({
+  ref,
+  children,
+  icon,
+  onCheckedChange,
+  ...rootProps
+}: FilterChipProps & {
+  ref?: React.Ref<HTMLInputElement>;
+}) => {
+  return (
+    <CheckboxCard.Root
+      {...rootProps}
+      {...(onCheckedChange && {
+        onCheckedChange: (details) => onCheckedChange(!!details.checked),
+      })}
+    >
+      <CheckboxCard.Context>
+        {({ checked }) => (
+          <>
+            <CheckboxCard.HiddenInput ref={ref} />
+            <CheckboxCard.Control>
+              <CheckboxCard.Content>
+                <CheckboxCard.Label>
+                  {checked
+                    ? icon?.checked && <Span>{icon.checked}</Span>
+                    : icon?.default && <Span>{icon.default}</Span>}
+
+                  {rootProps.chipType !== "icon" && children}
+
+                  {rootProps.chipType === "filter" && checked && (
+                    <CloseOutline24Icon />
+                  )}
+                </CheckboxCard.Label>
+              </CheckboxCard.Content>
+            </CheckboxCard.Control>
+          </>
+        )}
+      </CheckboxCard.Context>
+    </CheckboxCard.Root>
+  );
+};

package/src/input/NumericStepper.tsx

@@ -87,6 +87,7 @@ export const NumericStepper = ({
     label,
     helperText,
     errorText,
+    gap,
     ...rest
   } = props;
 
@@ -116,6 +117,7 @@ export const NumericStepper = ({
       invalid={invalid}
       readOnly={readOnly}
       required={required}
+      gap={gap}
     >
       <VerySmallButton
         icon={<SubtractIcon stepLabel={clampedStepSize} />}
@@ -167,7 +169,10 @@ export const NumericStepper = ({
       ) : (
         <Text
           aria-live="assertive"
-          paddingX="0.95rem"
+          width={`${Math.max(value.toString().length + 1, 3)}ch`}
+          paddingX={0.5}
+          padding={0}
+          textAlign="center"
           aria-label={
             ariaLabelContext.plural === ""
               ? ""

package/src/input/index.ts

@@ -7,6 +7,7 @@ export * from "./ChoiceChip";
 export * from "./Combobox";
 export * from "./Field";
 export * from "./Fieldset";
+export * from "./FilterChip";
 export * from "./Input";
 export * from "./InputChip";
 export * from "./ListBox";

package/src/theme/recipes/badge.ts

@@ -66,24 +66,40 @@ export const badgeRecipie = defineRecipe({
           color: "icon.critical",
         },
       },
+      brightRed: {
+        backgroundColor: {
+          _light: "brightRed",
+          _dark: "brightRed",
+        },
+        color: {
+          _light: "pink",
+          _dark: "pink",
+        },
+        "& svg": {
+          color: {
+            _light: "pink",
+            _dark: "pink",
+          },
+        },
+      },
     },
     size: {
       sm: {
-        fontSize: "desktop.xs",
+        fontSize: "desktop.2xs",
         paddingX: "0.5",
         paddingY: "0",
         fontWeight: "normal",
         borderRadius: "xxs",
       },
       md: {
-        fontSize: "desktop.xs",
+        fontSize: "desktop.2xs",
         paddingX: "1",
         paddingY: "0.5",
         fontWeight: "bold",
         borderRadius: "xs",
       },
       lg: {
-        fontSize: "desktop.sm",
+        fontSize: "desktop.xs",
         paddingX: "1.5",
         paddingY: "0.5",
         fontWeight: "bold",

package/src/theme/recipes/pressable-card.ts

@@ -64,13 +64,13 @@ export const pressableCardRecipe = defineRecipe({
       accent: {
         boxShadow: "0px 1px 3px 0px var(--shadow-color)",
         shadowColor: "surface.disabled",
-        background: "surface.success",
+        background: "surface.accent",
         _hover: {
-          background: "surface.success.hover",
+          background: "surface.accent.hover",
 
           boxShadow: "0px 2px 6px 0px var(--shadow-color)",
           _active: {
-            background: "surface.success.active",
+            background: "surface.accent.active",
             boxShadow: "none",
           },
         },

package/src/theme/slot-recipes/anatomy.ts

@@ -158,6 +158,7 @@ export const radioCardAnatomy = createAnatomy("radio-card").parts(
   "itemText",
   "itemDescription",
   "itemContent",
+  "itemControl",
 );
 
 export const radioAnatomy = createAnatomy("radio").parts(