@vygruppen/spor-react 11.3.9 → 12.0.0

package/src/theme/slot-recipes/floating-action-button.ts

@@ -0,0 +1,131 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import tokens from "@vygruppen/spor-design-tokens";
+import { floatingActionButtonAnatomy } from "./anatomy";
+
+export const floatingActionButtonSlotRecipe = defineSlotRecipe({
+  slots: floatingActionButtonAnatomy.keys(),
+  className: "spor-floating-action-button",
+  base: {
+    root: {
+      display: "flex",
+      alignItems: "center",
+      gap: 1,
+      paddingY: 2,
+      paddingX: 2,
+      cursor: "pointer",
+      overflowX: "hidden",
+      whiteSpace: "nowrap",
+      borderRadius: "xl",
+      boxShadow: "md",
+      transitionDuration: "fast",
+      transitionProperty: "common",
+      position: "fixed",
+      zIndex: "dropdown",
+      _focus: {
+        outlineOffset: tokens.size.stroke.lg,
+        outlineColor: "outline.focus",
+      },
+      _disabled: {
+        backgroundColor: "surface.disabled",
+        color: "text.disabled",
+        pointerEvents: "none",
+      },
+      _open: {
+        animation: "expand-width 300ms ease-out",
+      },
+      _closed: {
+        animation: "collapse-width 300ms ease-out",
+      },
+    },
+    text: {
+      display: "flex",
+      flex: "none",
+      alignItems: "center",
+      fontWeight: "bold",
+      textStyle: "sm",
+      marginRight: 1,
+      _open: {
+        animation: "fade-in 250ms ease-out",
+      },
+      _closed: {
+        animation: "fade-out 250ms ease-out",
+      },
+    },
+  },
+  variants: {
+    variant: {
+      brand: {
+        root: {
+          backgroundColor: "brand.surface",
+          color: "brand.text",
+          _hover: {
+            backgroundColor: "brand.surface.hover",
+            _active: {
+              backgroundColor: "brand.surface.active",
+            },
+          },
+        },
+      },
+      core: {
+        root: {
+          backgroundColor: "transparent",
+          outline: "1px solid",
+          outlineColor: "core.outline",
+          color: "core.text",
+          _hover: {
+            backgroundColor: "transparent",
+            outline: "2px solid",
+            outlineColor: "core.outline.light",
+            _active: {
+              outline: "1px solid",
+              outlineColor: "core.outline",
+              backgroundColor: "core.surface.active",
+            },
+          },
+        },
+      },
+      accent: {
+        root: {
+          backgroundColor: "accent.surface",
+          color: "accent.text",
+          _hover: {
+            backgroundColor: "accent.surface.hover",
+            color: "accent.text",
+            _active: {
+              backgroundColor: "accent.surface.active",
+            },
+          },
+        },
+      },
+    },
+    placement: {
+      "top left": {
+        root: {
+          top: "1rem",
+          left: "1rem",
+        },
+      },
+      "top right": {
+        root: {
+          top: "1rem",
+          right: "1rem",
+        },
+      },
+      "bottom left": {
+        root: {
+          bottom: "1rem",
+          left: "1rem",
+        },
+      },
+      "bottom right": {
+        root: {
+          bottom: "1rem",
+          right: "1rem",
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "brand",
+  },
+});

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

@@ -0,0 +1,65 @@
+import { accordionSlotRecipe } from "./accordion";
+import { alertSlotRecipe } from "./alert";
+import { alertExpandableSlotRecipe } from "./alert-expandable";
+import { alertServiceSlotRecipe } from "./alert-service";
+import { breadcrumbSlotRecipe } from "./breadcrumb";
+import { checkboxSlotRecipe } from "./checkbox";
+import { datePickerSlotRecipe } from "./datepicker";
+import { dialogSlotRecipe } from "./dialog";
+import { drawerSlotRecipe } from "./drawer";
+import { fieldSlotRecipe } from "./field";
+import { floatingActionButtonSlotRecipe } from "./floating-action-button";
+import { infoTagSlotRecipe } from "./info-tag";
+import { lineIconSlotRecipe } from "./line-icon";
+import { listSlotRecipe } from "./list";
+import { listBoxSlotRecipe } from "./listbox";
+import { mediaControllerSlotRecipe } from "./media-controller-button";
+import { nativeSelectSlotRecipe } from "./native-select";
+import { numericStepperRecipe } from "./numeric-stepper";
+import { popoverSlotRecipe } from "./popover";
+import { progressBarRecipe } from "./progress-bar";
+import { progressIndicatorRecipe } from "./progress-indicator";
+import { paginationSlotRecipe } from "./pagination";
+import { radioGroupSlotRecipe } from "./radio";
+import { radioCardSlotRecipe } from "./radio-card";
+import { selectSlotRecipe } from "./select";
+import { stepperSlotRecipe } from "./stepper";
+import { switchSlotRecipe } from "./switch";
+import { tableSlotRecipe } from "./table";
+import { tabsSlotRecipe } from "./tabs";
+import { travelTagSlotRecipe } from "./travel-tag";
+import { toastSlotRecipe } from "./toast";
+
+export const slotRecipes = {
+  accordion: accordionSlotRecipe,
+  alertExpandable: alertExpandableSlotRecipe,
+  alertService: alertServiceSlotRecipe,
+  alert: alertSlotRecipe,
+  breadcrumb: breadcrumbSlotRecipe,
+  checkbox: checkboxSlotRecipe,
+  datePicker: datePickerSlotRecipe,
+  dialog: dialogSlotRecipe,
+  drawer: drawerSlotRecipe,
+  field: fieldSlotRecipe,
+  floatingActionButton: floatingActionButtonSlotRecipe,
+  infoTag: infoTagSlotRecipe,
+  lineIcon: lineIconSlotRecipe,
+  list: listSlotRecipe,
+  listBox: listBoxSlotRecipe,
+  mediaControllerButton: mediaControllerSlotRecipe,
+  nativeSelect: nativeSelectSlotRecipe,
+  numericStepper: numericStepperRecipe,
+  popover: popoverSlotRecipe,
+  progressbar: progressBarRecipe,
+  progressIndicator: progressIndicatorRecipe,
+  pagination: paginationSlotRecipe,
+  radioCard: radioCardSlotRecipe,
+  radioGroup: radioGroupSlotRecipe,
+  select: selectSlotRecipe,
+  stepper: stepperSlotRecipe,
+  switch: switchSlotRecipe,
+  table: tableSlotRecipe,
+  tabs: tabsSlotRecipe,
+  travelTag: travelTagSlotRecipe,
+  toast: toastSlotRecipe,
+};

package/src/theme/slot-recipes/info-tag.ts

@@ -0,0 +1,62 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { travelTagSlotRecipe } from "./travel-tag";
+import { infoTagAnatomy } from "./anatomy";
+import { coreBorder } from "../utils/core-utils";
+
+export const infoTagSlotRecipe = defineSlotRecipe({
+  slots: infoTagAnatomy.keys(),
+  className: "spor-info-tag",
+  base: {
+    ...travelTagSlotRecipe.base,
+    iconContainer: {},
+    textContainer: {
+      color: "text",
+    },
+    container: {
+      display: "flex",
+      position: "relative",
+      alignItems: "center",
+    },
+    title: {
+      fontWeight: "bold",
+    },
+    description: {
+      fontWeight: "normal",
+    },
+  },
+  variants: {
+    variant: {
+      walk: {
+        iconContainer: {
+          icon: {
+            color: "text",
+          },
+        },
+      },
+    },
+    size: {
+      ...travelTagSlotRecipe.variants?.size,
+      sm: {
+        ...travelTagSlotRecipe.variants?.size!.sm,
+        iconContainer: {
+          borderRadius: "0.375rem",
+        },
+      },
+      md: {
+        ...travelTagSlotRecipe.variants?.size!.md,
+        iconContainer: {
+          borderRadius: "0.375rem",
+        },
+      },
+      lg: {
+        ...travelTagSlotRecipe.variants?.size!.lg,
+        iconContainer: {
+          borderRadius: "sm",
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});

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

@@ -0,0 +1,140 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { linjetagAnatomy } from "./anatomy";
+
+export const lineIconSlotRecipe = defineSlotRecipe({
+  slots: linjetagAnatomy.keys(),
+  className: "spor-line-icon",
+  base: {
+    iconContainer: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      "[aria-disabled=true] &": {
+        backgroundColor: "surface.disabled",
+      },
+    },
+    icon: {
+      color: "white",
+      "[aria-disabled=true] &": {
+        color: "icon.disabled",
+      },
+    },
+    title: {
+      color: "darkGrey",
+      "[aria-disabled=true] &": {
+        color: "text.disabled",
+      },
+    },
+  },
+  variants: {
+    variant: {
+      "local-train": {
+        iconContainer: {
+          backgroundColor: "linjetag.lokaltog",
+        },
+      },
+      "region-train": {
+        iconContainer: {
+          backgroundColor: "linjetag.regiontog",
+        },
+      },
+      "region-express-train": {
+        iconContainer: {
+          backgroundColor: "linjetag.regionEkspress",
+        },
+      },
+      "long-distance-train": {
+        iconContainer: {
+          backgroundColor: "linjetag.fjerntog",
+        },
+      },
+      "airport-express-train": {
+        iconContainer: {
+          backgroundColor: "linjetag.flytog",
+        },
+      },
+      "vy-bus": {
+        iconContainer: {
+          backgroundColor: "linjetag.vyBuss",
+        },
+      },
+      "local-bus": {
+        iconContainer: {
+          backgroundColor: "linjetag.lokalbuss",
+        },
+      },
+      ferry: {
+        iconContainer: {
+          backgroundColor: "linjetag.ferge",
+        },
+      },
+      subway: {
+        iconContainer: {
+          backgroundColor: "linjetag.tbane",
+        },
+      },
+      tram: {
+        iconContainer: {
+          backgroundColor: "linjetag.trikk",
+        },
+      },
+      "alt-transport": {
+        iconContainer: {
+          backgroundColor: "linjetag.altTransport",
+        },
+        icon: {
+          color: "darkGrey",
+          "[aria-disabled=true] &": {
+            color: "white",
+          },
+        },
+      },
+      walk: {
+        title: {
+          color: "text",
+        },
+        icon: {
+          color: "linjetag.walkLight",
+          "[aria-disabled=true] &": {
+            color: "icon.disabled",
+          },
+        },
+        _disabled: {
+          icon: {
+            color: "text.disabled",
+          },
+          title: {
+            color: "text.disabled",
+          },
+        },
+      },
+      custom: {
+        iconContainer: {
+          _disabled: {
+            backgroundColor: "surface.disabled",
+          },
+        },
+      },
+    },
+    size: {
+      sm: {
+        iconContainer: {
+          borderRadius: "0.5625rem",
+        },
+      },
+      md: {
+        iconContainer: {
+          borderRadius: "0.5625rem",
+        },
+      },
+      lg: {
+        iconContainer: {
+          borderRadius: "sm",
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});

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

@@ -0,0 +1,45 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { listAnatomy } from "./anatomy";
+
+export const listSlotRecipe = defineSlotRecipe({
+  slots: listAnatomy.keys(),
+  className: "spor-list",
+  base: {
+    item: {
+      fontFamily: "body",
+      whiteSpace: "normal",
+      fontSize: "inherit",
+      marginLeft: "2",
+      _marker: {
+        display: "inline-block",
+      },
+    },
+    icon: {
+      display: "inline-block",
+    },
+  },
+  variants: {
+    variant: {
+      marker: {
+        root: {
+          listStyle: "revert",
+        },
+        item: {
+          _marker: {
+            color: "inherit",
+          },
+        },
+      },
+
+      plain: {
+        item: {
+          display: "block",
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    variant: "marker",
+  },
+});

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

@@ -0,0 +1,72 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { listBoxAnatomy } from "./anatomy";
+
+export const listBoxSlotRecipe = defineSlotRecipe({
+  slots: listBoxAnatomy.keys(),
+  className: "spor-listbox",
+  base: {
+    root: {
+      backgroundColor: "surface",
+      boxShadow: "sm",
+      overflowY: "auto",
+      maxHeight: "50vh",
+      width: "100%",
+      listStyle: "none",
+      paddingTop: 2,
+      borderBottomRadius: "md",
+      borderWidth: 1,
+      zIndex: "dropdown",
+    },
+    item: {
+      paddingX: 2,
+      paddingY: 1,
+      marginY: 1,
+      marginX: 1,
+      borderRadius: "sm",
+      color: "ghost.text",
+      cursor: "pointer",
+      listStyle: "none",
+      _active: {
+        backgroundColor: "ghost.surface.active",
+      },
+
+      _hover: {
+        backgroundColor: "accent.surface",
+        color: "accent.text",
+      },
+      _selected: {
+        backgroundColor: "ghost.surface.active",
+      },
+      _focus: {
+        outlineColor: "outline.focus",
+      },
+    },
+    label: {},
+    description: {
+      fontSize: ["mobile.xs", "desktop.xs"],
+      color: "ghost.text",
+      "[aria-selected='true'] &": {
+        color: "ghost.text",
+      },
+    },
+  },
+  variants: {
+    variant: {
+      core: {
+        root: {
+          outline: "1px solid",
+          outlineColor: "core.outline",
+        },
+      },
+      floating: {
+        root: {
+          outline: "1px solid",
+          outlineColor: "floating.outline",
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "core",
+  },
+});

package/src/theme/slot-recipes/media-controller-button.ts

@@ -0,0 +1,131 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { mediaControllerAnatomy } from "./anatomy";
+
+export const mediaControllerSlotRecipe = defineSlotRecipe({
+  slots: mediaControllerAnatomy.keys(),
+  className: "spor-media-controller-button",
+  base: {
+    root: {
+      fontSize: 30,
+      transitionProperty: "common",
+      transitionDuration: "fast",
+      borderRadius: "50%",
+      appearance: "none",
+      background: "transparent",
+      border: "none",
+      cursor: "pointer",
+      display: "flex",
+      padding: 1,
+      alignSelf: "center",
+      color: "brand.surface",
+      outlineOffset: "2px",
+    },
+    icon: {
+      flex: "0 0 auto",
+      display: "block",
+    },
+  },
+  variants: {
+    variant: {
+      play: {
+        root: {
+          padding: 0,
+          color: "brand.text",
+          backgroundColor: "brand.surface",
+          _hover: {
+            color: "brand.text",
+            backgroundColor: "brand.surface.hover",
+            _active: {
+              color: "brand.text",
+              backgroundColor: "brand.surface.active",
+            },
+          },
+          _disabled: {
+            pointerEvents: "none",
+            color: "icon.disabled",
+            backgroundColor: "surface.disabled",
+          },
+        },
+      },
+      jumpSkip: {
+        root: {
+          _hover: {
+            backgroundColor: "ghost.surface.hover",
+            _active: {
+              backgroundColor: "ghost.surface.active",
+            },
+          },
+          _disabled: {
+            pointerEvents: "none",
+            backgroundColor: "surface.disabled",
+            color: "text.disabled",
+          },
+        },
+      },
+    },
+    size: {
+      sm: {
+        root: {
+          fontSize: 42,
+        },
+      },
+      lg: {
+        root: {
+          fontSize: 60,
+        },
+        icon: {
+          transform: "scale(1.55)",
+        },
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      variant: "play",
+      size: "sm",
+      css: {
+        root: {
+          fontSize: 24,
+          width: "2.625rem",
+          height: "2.625rem",
+        },
+      },
+    },
+    {
+      variant: "play",
+      size: "lg",
+      css: {
+        root: {
+          fontSize: 38,
+          width: "3.75rem",
+          height: "3.75rem",
+        },
+        icon: {
+          transform: "scale(1.55)",
+        },
+      },
+    },
+    {
+      variant: "jumpSkip",
+      size: "sm",
+      css: {
+        root: {
+          fontSize: 24,
+        },
+      },
+    },
+    {
+      variant: "jumpSkip",
+      size: "lg",
+      css: {
+        root: {
+          fontSize: 38,
+        },
+        icon: {
+          margin: 1,
+          transform: "scale(1.4)",
+        },
+      },
+    },
+  ],
+});

package/src/theme/slot-recipes/native-select.ts

@@ -0,0 +1,54 @@
+import { coreText } from "../utils/core-utils";
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { NativeSelectAnatomy } from "./anatomy";
+import { inputRecipe } from "../recipes/input";
+
+export const nativeSelectSlotRecipe = defineSlotRecipe({
+  slots: NativeSelectAnatomy.keys(),
+  className: "spor-nativeSelect",
+  base: {
+    root: {
+      width: "100%",
+      height: "fit-content",
+      position: "relative",
+    },
+    field: {
+      ...inputRecipe.base,
+    },
+    icon: {
+      width: 5,
+      height: 5,
+      right: " 0.5rem",
+      strokeLinecap: "round",
+      position: "absolute",
+      display: "inline-flex",
+      boxAlign: "center",
+      alignItems: "center",
+      boxPack: "center",
+      justifyContent: "center",
+      pointerEvents: "none",
+      top: "50%",
+      transform: "translateY(-50%)",
+      insetEnd: "0.5rem",
+      color: "currentColor",
+      fontSize: "sm",
+      _disabled: {
+        ...coreText("disabled"),
+      },
+    },
+  },
+  variants: {
+    variant: {
+      core: {
+        field: {
+          ...inputRecipe.variants?.variant.core,
+        },
+      },
+      floating: {
+        field: {
+          ...inputRecipe.variants?.variant.floating,
+        },
+      },
+    },
+  },
+});