@vygruppen/spor-react 12.14.0 → 12.14.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.14.0",
+  "version": "12.14.2",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -68,8 +68,8 @@
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.2.2",
-    "@vygruppen/eslint-config": "1.2.3",
-    "@vygruppen/tsconfig": "0.1.1"
+    "@vygruppen/tsconfig": "0.1.1",
+    "@vygruppen/eslint-config": "1.2.3"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",

package/src/alert/ServiceAlert.tsx

@@ -6,7 +6,6 @@ import {
   HStack,
   RecipeVariantProps,
   Span,
-  Stack,
   Text,
   useSlotRecipe,
 } from "@chakra-ui/react";
@@ -127,16 +126,10 @@ export const ServiceAlert = forwardRef<HTMLDivElement, ServiceAlertProps>(
             </HStack>
           </Accordion.ItemTrigger>
 
-          <Accordion.ItemContent asChild>
-            <Stack flexDirection="row" width="100%">
-              <Accordion.ItemBody
-                as={Stack}
-                width={contentWidth}
-                css={styles.itemBody}
-              >
-                {children}
-              </Accordion.ItemBody>
-            </Stack>
+          <Accordion.ItemContent css={styles.itemContent}>
+            <Accordion.ItemBody maxWidth={contentWidth} css={styles.itemBody}>
+              {children}
+            </Accordion.ItemBody>
           </Accordion.ItemContent>
         </Accordion.Item>
       </Accordion.Root>

package/src/button/ResponsiveButton.tsx

@@ -0,0 +1,27 @@
+import { Button, ButtonProps } from "./Button";
+import { IconButton, IconButtonProps } from "./IconButton";
+
+/**
+ * For internal use
+ */
+
+type Props = IconButtonProps &
+  Omit<ButtonProps, "leftIcon" | "rightIcon"> & {
+    label: string;
+  };
+
+export const ResponsiveButton = ({ label, icon, ...props }: Props) => {
+  return (
+    <>
+      <Button display={["none", "flex"]} leftIcon={icon} {...props}>
+        {label}
+      </Button>
+      <IconButton
+        display={["flex", "none"]}
+        aria-label={label}
+        icon={icon}
+        {...props}
+      />
+    </>
+  );
+};

package/src/datepicker/CalendarHeader.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { Box, Flex } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 import { getLocalTimeZone } from "@internationalized/date";
 import {
   ArrowLeftOutline24Icon,
@@ -7,6 +7,8 @@ import {
 } from "@vygruppen/spor-icon-react";
 import { CalendarState, RangeCalendarState } from "react-stately";
 
+import { Text } from "@/typography";
+
 import { createTexts, useTranslation } from "../i18n";
 import { CalendarNavigationButton } from "./CalendarNavigationButton";
 import { useCurrentLocale } from "./utils";
@@ -103,16 +105,16 @@ export const CalendarNavigator = ({
         icon={<ArrowLeftOutline24Icon />}
         aria-label={`${t(texts.previous)} ${t(texts[unit])}`}
       />
-      <Box
+      <Text
         role="heading"
-        fontSize="sm"
+        variant="md"
         fontWeight="bold"
         flex="1"
         textAlign="center"
         color={"core.text"}
       >
         {capitalize(title)}
-      </Box>
+      </Text>
       <CalendarNavigationButton
         onPress={onNext}
         isDisabled={isNextDisabled}

package/src/datepicker/DateField.tsx

@@ -63,11 +63,7 @@ export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
             position="absolute"
             paddingTop="2px"
           >
-            <Label
-              padding="0"
-              fontSize={["mobile.xs", "desktop.xs"]}
-              {...props.labelProps}
-            >
+            <Label padding="0" {...props.labelProps}>
               {props.label} <Field.RequiredIndicator />
             </Label>
           </Box>

package/src/dialog/Drawer.tsx

@@ -4,8 +4,6 @@ import {
   Box,
   createContext,
   Drawer as ChakraDrawer,
-  Grid,
-  GridItem,
   Portal,
   useDialogContext,
 } from "@chakra-ui/react";
@@ -16,7 +14,9 @@ import {
 import { forwardRef } from "react";
 import { useSwipeable } from "react-swipeable";
 
-import { Button, CloseButton } from "../button";
+import { ResponsiveButton } from "@/button/ResponsiveButton";
+
+import { CloseButton } from "../button";
 import { createTexts, useTranslation } from "../i18n";
 import {
   DrawerContentProps,
@@ -116,9 +116,11 @@ export const DrawerCloseTrigger = forwardRef<
   return (
     <ChakraDrawer.CloseTrigger ref={ref} {...props} asChild>
       {size === "full" ? (
-        <Button variant="ghost" leftIcon={<CloseFill24Icon />}>
-          {t(texts.close)}
-        </Button>
+        <ResponsiveButton
+          variant="ghost"
+          icon={<CloseFill24Icon />}
+          label={t(texts.close)}
+        />
       ) : (
         <CloseButton size="md" />
       )}
@@ -132,10 +134,12 @@ export const DrawerBackTrigger = forwardRef<
 >((props, ref) => {
   const { t } = useTranslation();
   return (
-    <ChakraDrawer.CloseTrigger asChild {...props} ref={ref} top="0">
-      <Button variant="ghost" leftIcon={<ArrowLeftFill24Icon />}>
-        {t(texts.back)}
-      </Button>
+    <ChakraDrawer.CloseTrigger asChild {...props} ref={ref}>
+      <ResponsiveButton
+        variant="ghost"
+        icon={<ArrowLeftFill24Icon />}
+        label={t(texts.back)}
+      />
     </ChakraDrawer.CloseTrigger>
   );
 });
@@ -147,20 +151,10 @@ export const DrawerFullScreenHeader = forwardRef<
 >((props, ref) => {
   const { backTrigger = true, closeTrigger = true, children } = props;
   return (
-    <ChakraDrawer.Header {...props} ref={ref} asChild>
-      <Grid templateColumns="1fr auto 1fr" height="auto" paddingX="8">
-        <GridItem width="full" alignSelf="center">
-          {backTrigger && <DrawerBackTrigger />}
-        </GridItem>
-        <GridItem width="full" alignSelf="end" asChild>
-          {children && <DrawerTitle>{children}</DrawerTitle>}
-        </GridItem>
-        {closeTrigger && (
-          <GridItem width="full" alignSelf="end">
-            <DrawerCloseTrigger justifySelf="end" top="0" />
-          </GridItem>
-        )}
-      </Grid>
+    <ChakraDrawer.Header {...props} ref={ref}>
+      <Box>{backTrigger && <DrawerBackTrigger />}</Box>
+      {<DrawerTitle>{children}</DrawerTitle>}
+      <Box> {closeTrigger && <DrawerCloseTrigger />}</Box>
     </ChakraDrawer.Header>
   );
 });

package/src/input/Field.tsx

@@ -104,7 +104,7 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
           )}
         </ChakraField.Root>
         {helperText && (
-          <Text fontSize="sm" color="text.tertiary">
+          <Text variant="sm" color="text.tertiary">
             {helperText}
           </Text>
         )}

package/src/input/ListBox.tsx

@@ -127,7 +127,11 @@ export function ItemDescription({ children }: { children: React.ReactNode }) {
   const recipe = useSlotRecipe({ key: "listbox" });
   const styles = recipe({});
   return (
-    <Box {...descriptionProps} css={styles} fontSize={"xs"}>
+    <Box
+      {...descriptionProps}
+      css={styles}
+      fontSize={["mobile.xs", "desktop.xs"]}
+    >
       {children}
     </Box>
   );
@@ -233,7 +237,7 @@ function ListBoxSection({ section, state }: ListBoxSectionProps) {
       >
         {section.rendered && (
           <Box
-            fontSize="mobile.xs"
+            fontSize={["mobile.sm", "desktop.sm"]}
             color={titleColor}
             paddingTop={1}
             marginTop={isFirstSection ? 0 : 2}

package/src/input/Switch.tsx

@@ -78,7 +78,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
           <ChakraSwitch.Control css={styles.control}>
             <ChakraSwitch.Thumb />
           </ChakraSwitch.Control>
-          <ChakraSwitch.Label>{label}</ChakraSwitch.Label>
+          {label && <ChakraSwitch.Label>{label}</ChakraSwitch.Label>}
         </ChakraSwitch.Root>
       </Field>
     );

package/src/stepper/StepperStep.tsx

@@ -44,7 +44,6 @@ export const StepperStep = ({
       {disabled ? (
         <Text
           variant="xs"
-          fontSize="1rem"
           color={disabledTextColor}
           cursor="default"
           paddingX={2}

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

@@ -22,13 +22,13 @@ export const accordionSlotRecipe = defineSlotRecipe({
       textAlign: "left",
       width: "full",
       alignItems: "center",
-      fontSize: ["mobile.sm", null, "desktop.sm"],
+      fontSize: ["mobile.sm", "desktop.sm"],
       fontFamily: "body",
       fontWeight: "bold",
       outlineOffset: "-2px",
-      paddingX: [2, null, 3],
-      paddingY: [1, null, 1.5],
-      minHeight: [6, null, 7],
+      paddingX: [2, 3],
+      paddingY: [1, 1.5],
+      minHeight: [6, 7],
       cursor: "pointer",
       _disabled: {
         pointerEvents: "none",
@@ -37,7 +37,7 @@ export const accordionSlotRecipe = defineSlotRecipe({
     },
     itemContent: {
       borderBottomRadius: "sm",
-      fontSize: ["mobile.sm", null, "desktop.sm"],
+      fontSize: ["mobile.sm", "desktop.sm"],
       color: "text",
       height: "auto",
       overflow: "hidden",
@@ -52,7 +52,7 @@ export const accordionSlotRecipe = defineSlotRecipe({
     },
     itemBody: {
       paddingY: 2,
-      paddingX: [2, null, 3],
+      paddingX: [2, 3],
     },
     itemIndicator: {
       transition: "rotate 0.2s",

package/src/theme/slot-recipes/alert-service.ts

@@ -22,7 +22,8 @@ export const alertServiceSlotRecipe = defineSlotRecipe({
       display: "flex",
       flexDirection: "column",
       justifyContent: "center",
-      padding: [2, null, null, 2],
+      padding: ["2", "3"],
+      paddingBottom: "1",
       borderBottomRadius: "md",
       borderTopRadius: "none",
       width: "full",
@@ -39,27 +40,41 @@ export const alertServiceSlotRecipe = defineSlotRecipe({
       },
     },
     itemTriggerTitle: {
-      fontSize: ["xs", null, null, "sm"],
+      fontSize: ["mobile.sm", "desktop.sm"],
     },
     notificationText: {
       fontWeight: "400",
-      fontSize: ["2xs", null, null, "xs"],
+      fontSize: ["mobile.xs", "desktop.xs"],
       textWrap: "nowrap",
+      color: "alert.service.text.secondary",
     },
+
+    itemContent: {
+      paddingX: ["2", "3"],
+      paddingBottom: ["2", "3"],
+      paddingTop: ["1", "2"],
+    },
+
     itemBody: {
       marginX: "auto",
       padding: "0 !important",
-      paddingBottom: ["0.5", null, null, "1"],
-      color: "text.inverted",
+      color: "alert.service.text.secondary",
+      gap: 0,
+      flexDirection: "column",
+      display: "flex",
       "& > p": {
-        gap: 2,
         width: "full",
         borderBottom: "1px dashed",
         borderColor: "outline.inverted",
-        paddingBottom: "3",
-        paddingTop: "2",
+
+        paddingY: ["1", "1.5"],
+
+        _first: {
+          paddingTop: 0,
+        },
         _last: {
           borderBottom: "none",
+          paddingBottom: 0,
         },
       },
     },

package/src/theme/slot-recipes/choice-chip.ts

@@ -10,7 +10,6 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
       display: "inline-flex",
       alignItems: "center",
       boxAlign: "center",
-      fontSize: "xs",
       cursor: "pointer",
       transitionProperty: "all",
       borderRadius: "xl",
@@ -69,7 +68,6 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
       display: "flex",
       alignItems: "center",
       gap: "1",
-      fontSize: "xs",
     },
   },
 
@@ -83,6 +81,10 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
           height: 5,
           paddingX: 1.5,
         },
+        label: {
+          fontSize: { base: "mobile.sm", sm: "desktop.sm" },
+          fontWeight: "medium",
+        },
       },
       sm: {
         root: {
@@ -92,6 +94,10 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
           height: 6,
           paddingX: 2,
         },
+        label: {
+          fontSize: { base: "mobile.sm", sm: "desktop.sm" },
+          fontWeight: "bold",
+        },
       },
       md: {
         root: {
@@ -101,6 +107,10 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
           height: 7,
           paddingX: 2,
         },
+        label: {
+          fontSize: { base: "mobile.md", sm: "desktop.md" },
+          fontWeight: "bold",
+        },
       },
       lg: {
         root: {
@@ -110,6 +120,10 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
           height: 8,
           paddingX: 3,
         },
+        label: {
+          fontSize: { base: "mobile.md", sm: "desktop.md" },
+          fontWeight: "bold",
+        },
       },
     },
 
@@ -176,7 +190,7 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
   },
 
   defaultVariants: {
-    size: "md",
+    size: "sm",
     variant: "core",
     chipType: "choice",
   },

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

@@ -37,7 +37,7 @@ export const datePickerSlotRecipe = defineSlotRecipe({
       },
     },
     inputLabel: {
-      fontSize: "mobile.xs",
+      fontSize: ["mobile.xs", "desktop.xs"],
       margin: 0,
       cursor: "text",
     },

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

@@ -59,7 +59,8 @@ export const drawerSlotRecipe = defineSlotRecipe({
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
-      paddingX: ["3", null, null, "5"],
+      paddingX: ["2", null, null, "5"],
+      gap: "1",
       paddingBottom: "1",
     },
     body: {

package/src/theme/slot-recipes/line-icon.ts

@@ -74,6 +74,10 @@ export const lineIconSlotRecipe = defineSlotRecipe({
         iconContainer: {
           backgroundColor: "linjetag.altTransport",
         },
+        icon: {
+          // eslint-disable-next-line spor/use-semantic-tokens
+          color: "darkGrey",
+        },
       },
       walk: {
         title: {