@vygruppen/spor-react 13.4.2 → 13.4.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "13.4.2",
+  "version": "13.4.4",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -46,8 +46,8 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
-    "@vygruppen/spor-design-tokens": "5.0.4",
-    "@vygruppen/spor-icon-react": "5.0.0",
+    "@vygruppen/spor-design-tokens": "5.0.5",
+    "@vygruppen/spor-icon-react": "5.0.1",
     "@vygruppen/spor-loader": "0.7.0"
   },
   "devDependencies": {

package/src/alert/AlertIcon.tsx

@@ -46,42 +46,33 @@ export const BaseAlertIcon = ({
 }: {
   variant: AlertProps["variant"];
 }) => {
-  const css = {
-    "& path:first-of-type": {
-      fill: `icon.${variant}`,
-    },
-    "& path:not(:first-of-type)": {
-      fill: `surface.${variant}`,
-    },
-  };
-
   switch (variant) {
     case "info": {
-      return <InformationFill24Icon css={css} />;
+      return <InformationFill24Icon />;
     }
     case "success": {
-      return <SuccessFill24Icon css={css} />;
+      return <SuccessFill24Icon />;
     }
     case "important": {
       return <WarningFill24Icon />;
     }
     case "alt": {
-      return <AltTransportFill24Icon css={css} />;
+      return <AltTransportFill24Icon />;
     }
     case "error": {
-      return <ErrorFill24Icon css={css} />;
+      return <ErrorFill24Icon />;
     }
     case "error-secondary": {
-      return <ErrorOutline24Icon css={css} />;
+      return <ErrorOutline24Icon />;
     }
     case "neutral": {
-      return <QuestionFill24Icon css={css} />;
+      return <QuestionFill24Icon />;
     }
     case "service": {
       return <ServiceFill24Icon />;
     }
     default: {
-      return <InformationFill24Icon css={css} />;
+      return <InformationFill24Icon />;
     }
   }
 };

package/src/datepicker/DateField.tsx

@@ -72,7 +72,7 @@ export const DateField = ({
           <DateTimeSegment
             key={index}
             segment={segment}
-            ariaDescription={t(getAriaLabel(segment.type))}
+            ariaLabel={t(getAriaLabel(segment.type))}
             state={state}
           />
         ))}

package/src/datepicker/DatePicker.tsx

@@ -115,7 +115,7 @@ export const DatePicker = ({
   const popoverContent = (
     <ChakraPopover.Positioner>
       <ChakraPopover.Content css={styles.calendarPopover}>
-        <ChakraPopover.Body minWidth="20rem">
+        <ChakraPopover.Body minWidth="18rem">
           <Calendar
             {...calendarProps}
             variant={variant}

package/src/datepicker/DateTimeSegment.tsx

@@ -10,7 +10,7 @@ type DateTimeSegmentProps = PropsWithChildren<DatePickerVariantProps> & {
   segment: DateSegment;
   state: DateFieldState;
   ariaLabel?: string;
-  ariaDescription?: string;
+  ariaLabelledby?: string;
 };
 /**
  * A date time segment is a part of a date or a time stamp.
@@ -24,7 +24,7 @@ export const DateTimeSegment = ({
   segment,
   state,
   ariaLabel,
-  ariaDescription,
+  ariaLabelledby,
   variant,
 }: DateTimeSegmentProps & {
   ref?: React.Ref<HTMLDivElement>;
@@ -59,8 +59,8 @@ export const DateTimeSegment = ({
       borderRadius="xs"
       fontSize={["mobile.sm", "desktop.sm"]}
       css={styles.dateTimeSegment}
-      aria-label={ariaDescription}
-      aria-labelledby={ariaLabel}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledby}
     >
       {isPaddable(segment.type) ? segment.text.padStart(2, "0") : segment.text}
     </Box>

package/src/datepicker/TimeField.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { Box, Flex } from "@chakra-ui/react";
+import { Box, Field as ChakraField, Flex } from "@chakra-ui/react";
 import { CalendarDateTime, Time } from "@internationalized/date";
 import { useRef } from "react";
 import { AriaTimeFieldProps, useTimeField } from "react-aria";
@@ -7,6 +7,7 @@ import { DateSegment, TimeFieldState } from "react-stately";
 
 import { spor } from "@/util";
 
+import { createTexts, useTranslation } from "../i18n";
 import { DateTimeSegment } from "./DateTimeSegment";
 import { getTimestampFromTime } from "./utils";
 
@@ -23,6 +24,7 @@ type TimeFieldProps = AriaTimeFieldProps<Time> & {
 export const TimeField = ({ state, ...props }: TimeFieldProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const { labelProps, fieldProps } = useTimeField(props, state, ref);
+  const { t } = useTranslation();
 
   return (
     <Box>
@@ -43,10 +45,16 @@ export const TimeField = ({ state, ...props }: TimeFieldProps) => {
         maxWidth="80%"
       >
         {props.label}
+        <ChakraField.RequiredIndicator />
       </spor.label>
       <Flex {...fieldProps} ref={ref} paddingTop="3" paddingBottom="0.5">
         {state.segments.map((segment: DateSegment, index) => (
-          <DateTimeSegment key={index} segment={segment} state={state} />
+          <DateTimeSegment
+            key={index}
+            segment={segment}
+            state={state}
+            ariaLabel={t(getAriaLabel(segment.type))}
+          />
         ))}
       </Flex>
       <input
@@ -57,3 +65,47 @@ export const TimeField = ({ state, ...props }: TimeFieldProps) => {
     </Box>
   );
 };
+
+const getAriaLabel = (segmentType: DateSegment["type"]) => {
+  switch (segmentType) {
+    case "hour": {
+      return texts.hour;
+    }
+    case "minute": {
+      return texts.minute;
+    }
+    case "second": {
+      return texts.second;
+    }
+    default: {
+      return texts.default;
+    }
+  }
+};
+
+const texts = createTexts({
+  hour: {
+    nb: "Velg time",
+    nn: "Vel time",
+    sv: "Välj timme",
+    en: "Choose hour",
+  },
+  minute: {
+    nb: "Velg minutt",
+    nn: "Vel minutt",
+    sv: "Välj minut",
+    en: "Choose minute",
+  },
+  second: {
+    nb: "Velg sekund",
+    nn: "Vel sekund",
+    sv: "Välj sekund",
+    en: "Choose second",
+  },
+  default: {
+    nb: "Velg tid",
+    nn: "Vel tid",
+    sv: "Välj tid",
+    en: "Choose time",
+  },
+});

package/src/datepicker/TimePicker.tsx

@@ -144,7 +144,6 @@ export const TimePicker = ({
         opacity={isDisabled ? 0.5 : 1}
         pointerEvents={isDisabled ? "none" : "auto"}
         aria-disabled={isDisabled}
-        aria-live="assertive"
         aria-label={ariaLabel}
         position="relative"
         {...boxProps}

package/src/error-summary/index.tsx

@@ -37,17 +37,7 @@ export const ErrorSummary = ({
     >
       {heading && (
         <Flex css={styles.heading}>
-          <ErrorFill24Icon
-            css={{
-              flexShrink: 0,
-              "& path:first-of-type": {
-                fill: `icon.critical`,
-              },
-              "& path:not(:first-of-type)": {
-                fill: `surface.critical`,
-              },
-            }}
-          />
+          <ErrorFill24Icon />
           <Heading as={headingLevel} variant="md" autoId ref={headingRef}>
             {heading}
           </Heading>

package/src/theme/recipes/textarea.ts

@@ -14,6 +14,8 @@ export const textareaRecipe = defineRecipe({
     "&:focus-visible, &:not(:placeholder-shown)": {
       borderTop: "var(--label-height) solid transparent",
     },
+    fontSize: "mobile.md",
+    paddingLeft: 3,
   },
   variants: {
     variant: {

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

@@ -80,6 +80,7 @@ export const datePickerSlotRecipe = defineSlotRecipe({
       boxShadow: "md",
       backgroundColor: "surface.floating",
       minHeight: "min-content",
+      maxWidth: "100vw",
     },
     rangeCalendarPopover: {
       width: "43rem",