@vygruppen/spor-react 13.4.6 → 13.6.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "13.4.6",
+  "version": "13.6.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -46,13 +46,14 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
-    "@vygruppen/spor-design-tokens": "5.0.6",
+    "@vygruppen/spor-design-tokens": "5.1.0",
     "@vygruppen/spor-icon-react": "5.0.2",
     "@vygruppen/spor-loader": "0.7.0"
   },
   "devDependencies": {
     "@react-types/datepicker": "^3.10.0",
     "@react-types/shared": "^3.27.0",
+    "@storybook/react": "^8",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",

package/src/accordion/Accordion.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Accordion,
+  Box,
+  Expandable,
+  ExpandableItem,
+} from "@vygruppen/spor-react";
+
+const meta = {
+  title: "Components/Accordion",
+  component: Accordion,
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Grouped: Story = {
+  render: () => (
+    <Box>
+      <Accordion collapsible defaultValue={["refunds"]}>
+        <ExpandableItem value="refunds" title="Can I change my ticket?">
+          Yes, ticket changes depend on fare rules and route availability.
+        </ExpandableItem>
+        <ExpandableItem value="pets" title="Can I bring my pet?">
+          Small pets are usually allowed if they do not disturb other
+          passengers.
+        </ExpandableItem>
+        <ExpandableItem value="bike" title="Can I bring a bicycle?">
+          Bicycle availability varies between departures and must be reserved
+          when required.
+        </ExpandableItem>
+      </Accordion>
+    </Box>
+  ),
+};
+
+export const SingleExpandable: Story = {
+  render: () => (
+    <Box>
+      <Expandable
+        title="Read more about onboard services"
+        variant="floating"
+        defaultValue={["single-expandable"]}
+      >
+        Wi‑Fi, power outlets, and accessible seating may vary by train set and
+        route.
+      </Expandable>
+    </Box>
+  ),
+};

package/src/alert/Alert.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Alert, Flex } from "@vygruppen/spor-react";
+
+const meta = {
+  title: "Components/Alert",
+  component: Alert,
+  args: {
+    title: "Traffic update",
+    children: "Track work may affect departures this afternoon.",
+  },
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const variants = [
+  "info",
+  "important",
+  "alt",
+  "error",
+  "error-secondary",
+  "success",
+] as const;
+
+export const Overview: Story = {
+  render: () => (
+    <Flex gap={2} direction="column">
+      {variants.map((variant) => (
+        <Alert key={variant} variant={variant} title={variant}>
+          Example of the {variant} alert variant.
+        </Alert>
+      ))}
+    </Flex>
+  ),
+};
+
+export const Closable: Story = {
+  args: {
+    variant: "info",
+    closable: true,
+    title: "Dismissible message",
+    children: "This alert can be closed by the user.",
+  },
+};

package/src/button/Button.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Box, Button, Flex } from "@vygruppen/spor-react";
+
+const meta = {
+  title: "Components/Button",
+  component: Button,
+  args: {
+    children: "Book trip",
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const variants = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "ghost",
+  "floating",
+] as const;
+const sizes = ["lg", "md", "sm", "xs"] as const;
+
+const icon = (symbol: string) => <span aria-hidden="true">{symbol}</span>;
+
+export const Overview: Story = {
+  render: () => (
+    <Box display="grid" gap={4}>
+      {sizes.map((size) => (
+        <Flex key={size} alignItems="center" gap={2}>
+          {variants.map((variant) => (
+            <Button key={`${size}-${variant}`} size={size} variant={variant}>
+              {variant}
+            </Button>
+          ))}
+        </Flex>
+      ))}
+    </Box>
+  ),
+};
+
+export const WithIcons: Story = {
+  render: () => (
+    <Flex gap={4}>
+      <Button leftIcon={icon("←")}>Left icon</Button>
+      <Button rightIcon={icon("→")}>Right icon</Button>
+      <Button leftIcon={icon("★")} rightIcon={icon("→")} variant="secondary">
+        Both icons
+      </Button>
+    </Flex>
+  ),
+};
+
+export const States: Story = {
+  render: () => (
+    <Flex gap={4}>
+      <Button loading loadingText="Loading">
+        Loading
+      </Button>
+      <Button disabled variant="secondary">
+        Disabled
+      </Button>
+      <Button loading variant="ghost" leftIcon={icon("⟳")}>
+        Refreshing
+      </Button>
+    </Flex>
+  ),
+};

package/src/datepicker/DatePicker.tsx

@@ -56,6 +56,7 @@ type DatePickerProps = Omit<AriaDatePickerProps<DateValue>, "onChange"> &
  * A date picker component.
  *
  * There are three different variants –`core`, `floating` and `ghost`.
+ * There are two different sizes - `sm` and `md`
  *
  * ```tsx
  * <DatePicker label="Dato" variant="core" />
@@ -65,6 +66,7 @@ type DatePickerProps = Omit<AriaDatePickerProps<DateValue>, "onChange"> &
 export const DatePicker = ({
   ref: externalRef,
   variant,
+  size,
   errorText,
   minHeight,
   showYearNavigation,
@@ -144,12 +146,13 @@ export const DatePicker = ({
             invalid={invalid}
             helperText={helperText}
             required={props.required}
+            size={size}
           >
             <PopoverAnchor>
               <StyledField
                 variant={variant}
+                size={size}
                 onClick={onFieldClick}
-                paddingX={3}
                 minHeight={minHeight}
                 isDisabled={props.isDisabled}
                 isActive={props.isActive}
@@ -162,8 +165,7 @@ export const DatePicker = ({
                 ) : (
                   <ChakraPopover.Trigger asChild>
                     <CalendarTriggerButton
-                      paddingLeft={1}
-                      paddingRight={1}
+                      marginLeft={1}
                       variant={variant}
                       ref={ref}
                       {...buttonProps}

package/src/datepicker/DateRangePicker.tsx

@@ -52,12 +52,14 @@ type DateRangePickerProps = Omit<
  * A date range picker component.
  *
  * There are three variants to choose from – `core`, `floating` and `ghost`.
+ * There are two different sizes - `sm` and `md`
  *
  * ```tsx
  * <DateRangePicker startLabel="From" startName="from" endLabel="To" endName="to" variant="core" />
  * ```
  */ export function DateRangePicker({
   variant = "core",
+  size,
   minHeight,
   startName,
   endName,
@@ -135,6 +137,7 @@ type DateRangePickerProps = Omit<
                 alignItems="center"
                 paddingX={3}
                 variant={variant}
+                size={size}
                 onClick={onFieldClick}
                 minHeight={minHeight}
               >

package/src/datepicker/DateTimeSegment.tsx

@@ -57,7 +57,6 @@ export const DateTimeSegment = ({
       textAlign="center"
       outline="none"
       borderRadius="xs"
-      fontSize={["mobile.sm", "desktop.sm"]}
       css={styles.dateTimeSegment}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledby}

package/src/datepicker/StyledField.tsx

@@ -29,6 +29,7 @@ export const StyledField = function StyledField({
     isDisabled,
     isActive,
     overrideBorderColor,
+    size,
     ...otherProps
   } = props;
   const { invalid } = useFieldContext() ?? {
@@ -38,7 +39,7 @@ export const StyledField = function StyledField({
   const recipe = useSlotRecipe({
     key: "datePicker",
   });
-  const styles = recipe({ variant });
+  const styles = recipe({ variant, size });
 
   return (
     <Box
@@ -51,7 +52,6 @@ export const StyledField = function StyledField({
       ref={ref}
       aria-invalid={invalid}
       aria-disabled={isDisabled}
-      fontSize={["mobile.md", "desktop.md"]}
     >
       {children}
     </Box>

package/src/datepicker/TimeField.tsx

@@ -36,8 +36,6 @@ export const TimeField = ({ state, ...props }: TimeFieldProps) => {
         color="text.subtle"
         top={0}
         cursor="text"
-        left="50%"
-        transform="translateX(-50%)"
         position="absolute"
         paddingTop="2px"
         whiteSpace="nowrap"

package/src/datepicker/TimePicker.tsx

@@ -50,6 +50,11 @@ type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> &
      * Defaults to "core".
      */
     variant?: "core" | "floating" | "ghost";
+    /**
+     * The size of the time picker.
+     * Defaults to "md".
+     */
+    size?: "sm" | "md";
   };
 /** A time picker component.
  *
@@ -137,10 +142,8 @@ export const TimePicker = ({
     <Field as="time" {...boxProps}>
       <StyledField
         width="fit-content"
-        paddingX={2}
         alignItems="center"
         justifyContent="space-between"
-        gap={2}
         opacity={isDisabled ? 0.5 : 1}
         pointerEvents={isDisabled ? "none" : "auto"}
         aria-disabled={isDisabled}

package/src/datepicker/types.ts

@@ -2,4 +2,5 @@ import { ConditionalValue } from "@chakra-ui/react";
 
 export type CalendarVariants = {
   variant?: ConditionalValue<"core" | "floating" | "ghost">;
+  size?: ConditionalValue<"sm" | "md">;
 };

package/src/input/Input.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Box, Flex, Input, SearchInput, Textarea } from "@vygruppen/spor-react";
+import { useState } from "react";
+
+const meta = {
+  title: "Components/Input",
+  component: Input,
+} satisfies Meta<typeof Input>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Overview: Story = {
+  render: () => (
+    <Flex direction="column" gap={4}>
+      <Input label="Name" helperText="Enter your full name" />
+      <Input
+        label="Email"
+        variant="floating"
+        type="email"
+        helperText="Used for booking updates"
+      />
+      <Input label="Disabled field" disabled value="Unavailable" />
+    </Flex>
+  ),
+};
+
+export const Textareas: Story = {
+  render: () => (
+    <Flex direction="column" gap={4}>
+      <Textarea label="Message" helperText="Share additional travel details" />
+      <Textarea
+        label="Accessibility needs"
+        variant="floating"
+        helperText="Optional"
+        defaultValue="Wheelchair assistance at Oslo S."
+      />
+    </Flex>
+  ),
+};
+
+export const Search: Story = {
+  render: () => {
+    const SearchExample = () => {
+      const [value, setValue] = useState("Oslo");
+
+      return (
+        <Box>
+          <SearchInput
+            label="Search departures"
+            value={value}
+            onChange={(event) => setValue(event.target.value)}
+            onReset={() => setValue("")}
+          />
+        </Box>
+      );
+    };
+
+    return <SearchExample />;
+  },
+};

package/src/layout/RadioCard.tsx

@@ -36,10 +36,12 @@ type RadioCardItemProps = Exclude<
   RadioCardVariantProps & {
     inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
     ariaLabel?: string;
+    showIndicator?: boolean;
   };
 
 export const RadioCard = ({
   ref,
+  showIndicator = false,
   ...props
 }: RadioCardItemProps & {
   ref?: React.Ref<HTMLInputElement>;
@@ -61,6 +63,7 @@ export const RadioCard = ({
         {...inputProps}
       />
       <ChakraRadioCard.ItemControl id={itemControlId} aria-hidden>
+        {showIndicator && <ChakraRadioCard.ItemIndicator />}
         {children}
       </ChakraRadioCard.ItemControl>
     </ChakraRadioCard.Item>

package/src/theme/brand.ts

@@ -1,6 +1,11 @@
 export enum Brand {
   VyDigital = "VyDigital",
+  /**
+   * @deprecated The VyUtvikling theme is deprecated and will be removed in a
+   * future major version. Use {@link Brand.VyTeknologi} instead.
+   */
   VyUtvikling = "VyUtvikling",
+  VyTeknologi = "VyTeknologi",
   CargoNet = "CargoNet",
 }
 

package/src/theme/index.ts

@@ -48,6 +48,10 @@ export const themes = {
     defaultBaseConfig,
     generateTheme(Brand.VyUtvikling),
   ),
+  [Brand.VyTeknologi]: createSystem(
+    defaultBaseConfig,
+    generateTheme(Brand.VyTeknologi),
+  ),
 };
 
 export const system = themes[Brand.VyDigital];

package/src/theme/semantic-tokens/colors.ts

@@ -3,7 +3,12 @@ import tokens from "@vygruppen/spor-design-tokens/raw-tokens";
 
 export enum Brand {
   VyDigital = "VyDigital",
+  /**
+   * @deprecated The VyUtvikling theme is deprecated and will be removed in a
+   * future major version. Use {@link Brand.VyTeknologi} instead.
+   */
   VyUtvikling = "VyUtvikling",
+  VyTeknologi = "VyTeknologi",
   CargoNet = "CargoNet",
 }
 
@@ -11,10 +16,18 @@ export const vyDigitalColors = defineSemanticTokens.colors({
   ...tokens.color["vy-digital"].color.vyDigital,
 });
 
+/**
+ * @deprecated The VyUtvikling theme is deprecated and will be removed in a
+ * future major version. Use {@link vyTeknologiColors} instead.
+ */
 export const vyUtviklingColors = defineSemanticTokens.colors({
   ...tokens.color["vy-utvikling"].color.vyUtvikling,
 });
 
+export const vyTeknologiColors = defineSemanticTokens.colors({
+  ...tokens.color["vy-teknologi"].color.vyTeknologi,
+});
+
 export const cargonetColors = defineSemanticTokens.colors({
   ...tokens.color["cargonet"].color.cargonet,
 });

package/src/theme/semantic-tokens/index.ts

@@ -1,5 +1,10 @@
 import { Brand } from "../brand";
-import { cargonetColors, vyDigitalColors, vyUtviklingColors } from "./colors";
+import {
+  cargonetColors,
+  vyDigitalColors,
+  vyTeknologiColors,
+  vyUtviklingColors,
+} from "./colors";
 import { radii } from "./radii";
 import { shadows } from "./shadows";
 
@@ -13,6 +18,10 @@ export const semanticTokens = {
     ...baseSemanticTokens,
     colors: vyUtviklingColors,
   },
+  [Brand.VyTeknologi]: {
+    ...baseSemanticTokens,
+    colors: vyTeknologiColors,
+  },
   [Brand.CargoNet]: {
     ...baseSemanticTokens,
     colors: cargonetColors,

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

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

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

@@ -13,6 +13,8 @@ export const datePickerSlotRecipe = defineSlotRecipe({
       display: "flex",
       flex: 1,
       paddingY: 0.5,
+      paddingX: 2,
+      gap: 1.5,
       alignItems: "center",
       _hover: {
         zIndex: "docked",
@@ -237,8 +239,23 @@ export const datePickerSlotRecipe = defineSlotRecipe({
         },
       },
     },
+    size: {
+      sm: {
+        wrapper: {
+          fontSize: ["mobile.xs", "desktop.xs"],
+          paddingX: 1,
+          gap: 1,
+        },
+      },
+      md: {
+        wrapper: {
+          fontSize: ["mobile.sm", "desktop.sm"],
+        },
+      },
+    },
   },
   defaultVariants: {
     variant: "core",
+    size: "md",
   },
 });

package/src/theme/slot-recipes/radio-card.ts

@@ -37,6 +37,58 @@ export const radioCardSlotRecipe = defineSlotRecipe({
       fontWeight: "bold",
       fontSize: "inherit",
     },
+    itemControl: {
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "flex-start",
+    },
+
+    itemIndicator: {
+      display: "inline-flex",
+      flexShrink: 0,
+      alignItems: "center",
+      justifyContent: "center",
+      borderWidth: "2px",
+      borderColor: "outline.core",
+      borderRadius: "xl",
+      width: 3,
+      height: 3,
+      marginRight: 2,
+      marginTop: 0.5,
+
+      _checked: {
+        borderColor: "surface.brand",
+      },
+      _hover: {
+        borderColor: "surface.brand.hover",
+        "& .dot": {
+          backgroundColor: "surface.brand.hover",
+        },
+      },
+
+      _disabled: {
+        pointerEvents: "none",
+        backgroundColor: "surface.disabled",
+        borderColor: "outline.disabled",
+        "& .dot": {
+          backgroundColor: "outline.disabled",
+        },
+      },
+      _focusVisible: {
+        outlineWidth: "2px",
+        outlineColor: "outline.focus",
+        outlineStyle: "solid",
+        outlineOffset: "1px",
+      },
+
+      "& .dot": {
+        height: "full",
+        width: "full",
+        borderRadius: "xl",
+        backgroundColor: "surface.brand",
+        scale: "0.5",
+      },
+    },
   },
   variants: {
     variant: {

package/src/toast/toast.tsx

@@ -10,6 +10,7 @@ import {
 } from "@chakra-ui/react";
 
 import { AlertIcon } from "@/alert/AlertIcon";
+import { Button, CloseButton } from "@/button";
 
 const toaster = createToaster({
   placement: "bottom",
@@ -18,11 +19,18 @@ const toaster = createToaster({
 
 type Variant = "info" | "success" | "error";
 
+type ToastAction = {
+  label: string;
+  onClick: () => void;
+};
+
 type ToastProps = {
   duration?: number;
   text: string;
   variant: Variant;
   id?: string;
+  action?: ToastAction;
+  closable?: boolean;
 } & Pick<BoxProps, "width">;
 
 export const createToast = ({
@@ -31,13 +39,17 @@ export const createToast = ({
   id,
   duration = 6000,
   width = "sm",
+  action,
+  closable = false,
 }: ToastProps) =>
   toaster.create({
     description: text,
     type: variant,
     id: id ?? crypto.randomUUID(),
     duration,
+    action,
     meta: { width },
+    closable: closable,
   });
 
 export const Toaster = () => {
@@ -56,6 +68,18 @@ export const Toaster = () => {
             <Stack gap="1" flex="1" maxWidth="100%">
               <Toast.Description>{toast.description}</Toast.Description>
             </Stack>
+            {toast.action && (
+              <Toast.ActionTrigger onClick={toast.action.onClick}>
+                <Button variant="ghost" size="xs">
+                  {toast.action.label}
+                </Button>
+              </Toast.ActionTrigger>
+            )}
+            {toast.closable && (
+              <Toast.CloseTrigger>
+                <CloseButton size="xs" />
+              </Toast.CloseTrigger>
+            )}
           </Toast.Root>
         )}
       </ChakraToaster>