@vygruppen/spor-react 11.3.10 → 12.0.0

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

@@ -0,0 +1,66 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { alertServiceAnatomy } from "./anatomy";
+
+export const alertServiceSlotRecipe = defineSlotRecipe({
+  className: "spor-service-alert",
+  slots: alertServiceAnatomy.keys(),
+  base: {
+    root: {
+      fontSize: "inherit",
+      transitionProperty: "outline, border-radius",
+      transitionDuration: "fast",
+      borderTopRadius: "none",
+      borderBottomRadius: "md",
+      backgroundColor: "alert.service.surface",
+      outline: "1px solid",
+      outlineColor: "alert.service.outline",
+      color: "text.inverted",
+      boxShadow: "sm",
+    },
+    itemTrigger: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      padding: [2, null, null, 2],
+      borderBottomRadius: "md",
+      borderTopRadius: "none",
+      width: "full",
+      color: "text.inverted",
+      "&:hover": {
+        backgroundColor: "alert.service.surface.hover",
+      },
+      "&:active": {
+        backgroundColor: "alert.service.surface.active",
+      },
+
+      _icon: {
+        color: "darkGrey",
+      },
+    },
+    itemTriggerTitle: {
+      fontSize: ["xs", null, null, "sm"],
+    },
+    notificationText: {
+      fontWeight: "400",
+      fontSize: ["2xs", null, null, "xs"],
+      textWrap: "nowrap",
+    },
+    itemBody: {
+      paddingInline: 2,
+      paddingBottom: ["0.5", null, null, "1"],
+      color: "text.inverted",
+      "& > p": {
+        gap: 2,
+        width: "full",
+        justifyContent: "center",
+        borderBottom: "1px dashed",
+        borderColor: "outline.inverted",
+        paddingBottom: "3",
+        paddingTop: "2",
+        _last: {
+          borderBottom: "none",
+        },
+      },
+    },
+  },
+});

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

@@ -0,0 +1,72 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { alertAnatomy } from "./anatomy";
+
+const createVariant = (variant: string) => ({
+  root: {
+    borderColor: `alert.${variant}.outline`,
+    background: `alert.${variant}.surface`,
+  },
+  description: {
+    color: `alert.${variant}.text.secondary`,
+  },
+  title: {
+    color: `alert.${variant}.text`,
+  },
+  closeButton: {
+    color: `alert.${variant}.text`,
+    _hover: {
+      bg: `alert.${variant}.surface.hover`,
+      _active: {
+        bg: `alert.${variant}.surface.active`,
+      },
+    },
+  },
+});
+
+export const alertSlotRecipe = defineSlotRecipe({
+  className: "spor-alert",
+  slots: alertAnatomy.keys(),
+  base: {
+    root: {
+      borderRadius: "sm",
+      padding: 2,
+      display: "flex",
+      maxWidth: "300px",
+      justifyContent: "space-between",
+      alignItems: "flex-start",
+      position: "relative",
+      textStyle: "sm",
+      border: "sm",
+    },
+    description: {
+      display: "flex",
+      alignItems: "flex-start",
+      gap: 1.5,
+      color: "text",
+    },
+    content: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "2",
+      alignItems: "flex-start",
+    },
+    title: {
+      fontWeight: "bold",
+    },
+  },
+  variants: {
+    variant: {
+      important: createVariant("important"),
+      alt: createVariant("alt"),
+      error: createVariant("error"),
+      success: createVariant("success"),
+      info: createVariant("info"),
+      neutral: createVariant("neutral"),
+      "error-secondary": createVariant("error-secondary"),
+      service: createVariant("service"),
+    },
+  },
+  defaultVariants: {
+    variant: "info",
+  },
+});

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

@@ -0,0 +1,269 @@
+import { createAnatomy } from "@ark-ui/react/anatomy";
+import { popoverAnatomy as arkPopoverAnatomy } from "@ark-ui/react/popover";
+
+export const accordionAnatomy = createAnatomy("accordion").parts(
+  "root",
+  "itemTrigger",
+  "item",
+  "itemBody",
+  "itemContent",
+  "itemIndicator",
+);
+
+export const alertAnatomy = createAnatomy("alert").parts(
+  "root",
+  "indicator",
+  "title",
+  "closeButton",
+  "content",
+  "description",
+);
+
+export const alertExpandableAnatomy = createAnatomy("alert-expandable").parts(
+  "root",
+  "itemTrigger",
+  "itemContent",
+  "indicator",
+  "title",
+  "itemIndicator",
+);
+
+export const alertServiceAnatomy = createAnatomy("service-alert").parts(
+  "root",
+  "itemTrigger",
+  "itemTriggerTitle",
+  "notificationText",
+  "itemContent",
+  "itemBody",
+);
+
+export const listAnatomy = createAnatomy("list").parts(
+  "root",
+  "item",
+  "icon",
+  "indicator",
+);
+
+export const tableAnatomy = createAnatomy("table").parts(
+  "root",
+  "body",
+  "row",
+  "cell",
+  "columnHeader",
+  "caption",
+  "footer",
+  "header",
+);
+
+export const fieldAnatomy = createAnatomy("field").parts(
+  "root",
+  "label",
+  "requiredIndicator",
+  "helperText",
+  "errorText",
+);
+
+export const dialogAnatomy = createAnatomy("dialog").parts(
+  "header",
+  "body",
+  "footer",
+  "backdrop",
+  "positioner",
+  "content",
+  "title",
+  "description",
+  "closeTrigger",
+);
+
+export const paginationAnatomy = createAnatomy("pagination").parts(
+  "list",
+  "item",
+);
+export const linjetagAnatomy = createAnatomy("linjetag").parts(
+  "iconContainer",
+  "icon",
+  "root",
+  "title",
+  "desc",
+);
+
+export const infoTagAnatomy = createAnatomy("info-tag").parts(
+  "container",
+  "iconContainer",
+  "icon",
+  "textContainer",
+  "title",
+  "description",
+  "walk",
+);
+
+export const travelTagAnatomy = createAnatomy("travel-tag").parts(
+  "container",
+  "iconContainer",
+  "icon",
+  "textContainer",
+  "title",
+  "description",
+  "deviationIcon",
+);
+
+export const drawerAnatomy = createAnatomy("drawer").parts(
+  "header",
+  "body",
+  "backdrop",
+  "positioner",
+  "content",
+  "footer",
+  "title",
+  "description",
+  "closeTrigger",
+);
+
+export const checkboxAnatomy = createAnatomy("checkbox").parts(
+  "root",
+  "control",
+  "label",
+  "description",
+  "addon",
+  "indicator",
+  "content",
+);
+
+export const breadcrumbAnatomy = createAnatomy("breadcrumb").parts(
+  "link",
+  "currentLink",
+  "list",
+  "separator",
+);
+
+export const stepperAnatomy = createAnatomy("stepper").parts(
+  "root",
+  "container",
+  "innerContainer",
+  "title",
+  "stepCounter",
+  "stepContainer",
+  "stepButton",
+  "stepNumber",
+  "stepTitle",
+  "closeButton",
+  "backButton",
+);
+
+export const radioCardAnatomy = createAnatomy("radio-card").parts(
+  "root",
+  "item",
+  "label",
+  "itemText",
+  "itemDescription",
+  "itemContent",
+);
+
+export const radioAnatomy = createAnatomy("radio").parts(
+  "root",
+  "item",
+  "itemControl",
+  "itemText",
+  "label",
+);
+
+export const listBoxAnatomy = createAnatomy("listbox").parts(
+  "root",
+  "item",
+  "label",
+  "description",
+);
+
+export const NativeSelectAnatomy = createAnatomy("native-select").parts(
+  "root",
+  "field",
+  "icon",
+);
+
+export const tabsAnatomy = createAnatomy("tabs").parts(
+  "root",
+  "list",
+  "trigger",
+  "content",
+  "indicator",
+);
+
+export const switchAnatomy = createAnatomy("switch").parts(
+  "root",
+  "thumb",
+  "control",
+  "label",
+);
+
+export const selectAnatomy = createAnatomy("select").parts(
+  "root",
+  "trigger",
+  "indicatorGroup",
+  "indicator",
+  "selectContent",
+  "item",
+  "control",
+  "itemText",
+  "itemDescription",
+  "itemGroup",
+  "itemGroupLabel",
+  "label",
+  "valueText",
+);
+export const cardSelectAnatomy = createAnatomy("card-select").parts(
+  "trigger",
+  "card",
+);
+
+export const numericStepperAnatomy = createAnatomy("numeric-stepper").parts(
+  "root",
+  "container",
+  "input",
+  "text",
+  "button",
+);
+export const mediaControllerAnatomy = createAnatomy(
+  "media-controller-button",
+).parts("root", "icon");
+export const progressBarAnotomy = createAnatomy("progress-bar").parts(
+  "container",
+  "background",
+  "progress",
+  "description",
+  "disabledBackground",
+);
+
+export const toastAnatomy = createAnatomy("toast").parts(
+  "root",
+  "title",
+  "description",
+  "indicator",
+  "closeTrigger",
+  "actionTrigger",
+);
+
+export const floatingActionButtonAnatomy = createAnatomy(
+  "floating-action-button",
+).parts("root", "icon", "text");
+
+export const popoverAnatomy = arkPopoverAnatomy.extendWith(
+  "header",
+  "body",
+  "footer",
+);
+
+export const datepickerAnatomy = createAnatomy("datepicker").parts(
+  "wrapper",
+  "calendarTriggerButton",
+  "arrow",
+  "calendarPopover",
+  "calendar",
+  "weekdays",
+  "weekend",
+  "dateCell",
+  "inputLabel",
+  "dateTimeSegment",
+  "cell",
+  "box",
+  "rangeCalendarPopover",
+);

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

@@ -0,0 +1,61 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import { breadcrumbAnatomy } from "./anatomy";
+import tokens from "@vygruppen/spor-design-tokens";
+
+export const breadcrumbSlotRecipe = defineSlotRecipe({
+  slots: breadcrumbAnatomy.keys(),
+  base: {
+    list: {
+      display: "inline-flex",
+      flexWrap: "wrap",
+      gap: 1,
+      alignItems: "center",
+    },
+    link: {
+      cursor: "pointer",
+      padding: 0.5,
+      borderRadius: "xs",
+    },
+    currentLink: {
+      borderRadius: "xs",
+      cursor: "default",
+    },
+    separator: {
+      "& svg": {
+        color: "icon.disabled",
+      },
+    },
+  },
+
+  variants: {
+    variant: {
+      core: {
+        link: {
+          _hover: {
+            outlineColor: "core.outline.hover",
+            outlineWidth: tokens.size.stroke.md,
+            outlineStyle: "solid",
+            _active: {
+              backgroundColor: "core.surface.active",
+              outline: "none",
+            },
+          },
+        },
+      },
+      ghost: {
+        link: {
+          _hover: {
+            backgroundColor: "ghost.surface.hover",
+            _active: {
+              backgroundColor: "ghost.surface.active",
+            },
+          },
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    variant: "core",
+  },
+});

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

@@ -0,0 +1,89 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+import tokens from "@vygruppen/spor-design-tokens";
+import { brandBackground, brandText } from "../utils/brand-utils";
+import { coreBackground, coreText } from "../utils/core-utils";
+import { checkboxAnatomy } from "./anatomy";
+
+export const checkboxSlotRecipe = defineSlotRecipe({
+  className: "spor-checkbox",
+  slots: checkboxAnatomy.keys(),
+  base: {
+    root: {
+      display: "flex",
+      gap: 1.5,
+      _hover: {
+        "& > input:enabled:not([aria-invalid]) + .spor-checkbox__control": {
+          ...coreBackground("hover"),
+          borderColor: brandBackground("hover").backgroundColor,
+        },
+        "& > input:enabled:checked:not([aria-invalid]) + .spor-checkbox__control":
+          {
+            ...brandBackground("hover"),
+            borderColor: brandBackground("hover").backgroundColor,
+          },
+      },
+    },
+    indicator: {
+      width: "100%",
+      height: "100%",
+      borderColor: "white",
+      marginTop: -1,
+      transform: "scale(1)",
+      opacity: 0,
+      _checked: {
+        opacity: 1,
+        transition: "opacity 300ms cubic-bezier(0.65, 0.25, 0.56, 0.96)",
+      },
+    },
+    control: {
+      width: 4,
+      height: 4,
+      transitionProperty: "background, border-color",
+      transitionDuration: "moderate",
+      border: "2px solid",
+      borderColor: "core.outline",
+      borderRadius: "xs",
+      ...coreBackground("default"),
+
+      _checked: {
+        ...brandText("default"),
+        ...brandBackground("default"),
+        borderColor: brandBackground("default").backgroundColor,
+        _focus: {
+          borderColor: "brand.surface.active",
+        },
+
+        _disabled: {
+          ...coreBackground("disabled"),
+          ...coreText("disabled"),
+          borderColor: "currentColor",
+        },
+
+        _invalid: {
+          backgroundColor: "brightRed",
+          borderColor: "brightRed",
+        },
+      },
+      _disabled: {
+        ...coreBackground("disabled"),
+        borderColor: coreText("disabled").color,
+      },
+      _invalid: {
+        ...coreBackground("default"),
+        borderColor: "outline.error",
+      },
+      _focus: {
+        outlineStyle: "solid",
+        outlineColor: "outline.focus",
+        outlineOffset: tokens.size.stroke.md,
+        outlineWidth: tokens.size.stroke.md,
+        borderColor: "core.outline",
+        borderWidth: tokens.size.stroke.md,
+      },
+    },
+    label: {
+      userSelect: "none",
+      _disabled: { opacity: 0.4 },
+    },
+  },
+});