@vygruppen/spor-react 11.3.9 → 12.0.0

package/src/theme/components/drawer.ts

@@ -1,95 +0,0 @@
-import { modalAnatomy as parts } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { type PartsStyleObject } from "@chakra-ui/theme-tools";
-import { baseText } from "../utils/base-utils";
-import { bg } from "../utils/bg-utils";
-
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: (props) => ({
-    overlay: {
-      backgroundColor: "blackAlpha.600",
-      zIndex: "modal",
-      color: "red",
-    },
-    dialogContainer: {
-      display: "flex",
-      zIndex: "modal",
-      justifyContent: "center",
-      alignItems: props.isCentered ? "center" : "flex-start",
-      overflow: props.scrollBehavior === "inside" ? "hidden" : "auto",
-    },
-    dialog: {
-      ...bg("default", props),
-      ...baseText("default", props),
-      zIndex: "modal",
-      maxHeight:
-        props.scrollBehavior === "inside" ? "calc(100% - 7.5rem)" : undefined,
-      boxShadow: "md",
-    },
-    header: {
-      paddingX: 3,
-      paddingTop: 6,
-      paddingBottom: 2,
-      fontWeight: "bold",
-      fontFamily: "body",
-    },
-    closeButton: {
-      position: "absolute",
-      top: 3,
-      insetEnd: 3,
-      zIndex: "modal",
-    },
-    body: {
-      paddingX: 3,
-      paddingBottom: 6,
-      flex: 1,
-      overflow: props.scrollBehavior === "inside" ? "auto" : undefined,
-    },
-    footer: {
-      paddingX: 3,
-      paddingBottom: 3,
-    },
-  }),
-  sizes: {
-    xs: getSize("xs"),
-    sm: getSize("sm"),
-    md: getSize("md"),
-    lg: getSize("lg"),
-    xl: getSize("xl"),
-    "2xl": getSize("2xl"),
-    "3xl": getSize("3xl"),
-    "4xl": getSize("4xl"),
-    "5xl": getSize("5xl"),
-    "6xl": getSize("6xl"),
-    full: getSize("full"),
-  },
-  defaultProps: {
-    size: "md",
-  },
-});
-
-/**
- * Since the `maxWidth` prop references theme.sizes internally,
- * we can leverage that to size our modals.
- */
-function getSize(value: string): PartsStyleObject<typeof parts> {
-  if (value === "full") {
-    return {
-      dialog: {
-        maxWidth: "100vw",
-        minHeight: "100vh",
-        "@supports(min-height: -webkit-fill-available)": {
-          minHeight: "-webkit-fill-available",
-        },
-        marginY: 0,
-      },
-    };
-  }
-  return {
-    dialog: { maxWidth: value },
-  };
-}
-
-export default config;

package/src/theme/components/fab.ts

@@ -1,109 +0,0 @@
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { anatomy, StyleFunctionProps } from "@chakra-ui/theme-tools";
-
-import { accentBackground, accentText } from "../utils/accent-utils";
-import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
-import { brandBackground, brandText } from "../utils/brand-utils";
-import { focusVisibleStyles } from "../utils/focus-utils";
-import { surface } from "../utils/surface-utils";
-
-const parts = anatomy("fab").parts("container", "icon", "text");
-
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: (props) => ({
-    container: {
-      display: "flex",
-      alignItems: "center",
-      paddingY: 2,
-      paddingLeft: 2,
-      paddingRight: props.isTextVisible ? 3 : 2,
-      cursor: "pointer",
-      overflowX: "hidden",
-      whiteSpace: "nowrap",
-      borderRadius: "xl",
-      boxShadow: "md",
-      transitionDuration: "fast",
-      transitionProperty: "common",
-      position: "fixed",
-      zIndex: "sticky",
-      ...getPositionProps(props),
-      ...focusVisibleStyles(props),
-      _disabled: {
-        ...surface("disabled", props),
-        ...baseText("disabled", props),
-        pointerEvents: "none",
-      },
-    },
-    icon: {
-      marginRight: props.isTextVisible ? 1 : 0,
-    },
-    text: {
-      display: "flex",
-      flex: "none",
-      alignItems: "center",
-      fontWeight: "bold",
-      textStyle: "sm",
-    },
-  }),
-  variants: {
-    brand: (props) => ({
-      container: {
-        ...brandBackground("default", props),
-        ...brandText("default", props),
-        _hover: {
-          ...brandBackground("hover", props),
-        },
-        _active: {
-          ...brandBackground("active", props),
-        },
-      },
-    }),
-    base: (props) => ({
-      container: {
-        ...baseBackground("default", props),
-        ...baseBorder("default", props),
-        ...baseText("default", props),
-        _hover: {
-          ...baseBackground("hover", props),
-          ...baseBorder("hover", props),
-        },
-        _active: {
-          ...baseBorder("default", props),
-          ...baseBackground("active", props),
-        },
-      },
-    }),
-    accent: (props) => ({
-      container: {
-        ...accentBackground("default", props),
-        ...accentText("default", props),
-        _hover: {
-          ...accentBackground("hover", props),
-          ...accentText("default", props),
-        },
-        _active: {
-          ...accentBackground("active", props),
-        },
-      },
-    }),
-  },
-  defaultProps: {
-    variant: "brand",
-  },
-});
-
-export default config;
-
-const getPositionProps = (props: StyleFunctionProps) => {
-  switch (props.placement) {
-    case "top left":
-      return { top: "1em", left: "1em" };
-    case "top right":
-      return { top: "1em", right: "1em" };
-    case "bottom left":
-      return { bottom: "1em", left: "1em" };
-    case "bottom right":
-      return { bottom: "1em", right: "1em" };
-  }
-};

package/src/theme/components/form-label.ts

@@ -1,17 +0,0 @@
-import { defineStyleConfig } from "@chakra-ui/react";
-
-const config = defineStyleConfig({
-  baseStyle: {
-    fontSize: "mobile.sm",
-    marginEnd: 3,
-    marginBottom: 2,
-    transitionProperty: "common",
-    transitionDuration: "normal",
-    opacity: 1,
-    _disabled: {
-      opacity: 0.4,
-    },
-  },
-});
-
-export default config;

package/src/theme/components/form.ts

@@ -1,27 +0,0 @@
-import { formAnatomy as parts } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { mode } from "@chakra-ui/theme-tools";
-
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: (props) => ({
-    container: {
-      width: "100%",
-      position: "relative",
-      transitionProperty: "common",
-      transitionDuration: "fast",
-    },
-    requiredIndicator: {
-      marginStart: 1,
-      color: mode("brightRed", "lightRed")(props),
-    },
-    helperText: {
-      marginTop: 2,
-      color: mode("dimGrey", "whiteAlpha.600")(props),
-      lineHeight: "normal",
-      fontSize: "sm",
-    },
-  }),
-});
-export default config;

package/src/theme/components/index.ts

@@ -1,45 +0,0 @@
-export { default as Accordion } from "./accordion";
-export { default as Alert } from "./alert";
-export { default as AlertExpandable } from "./alert-expandable";
-export { default as AlertService } from "./alert-service";
-export { default as Badge } from "./badge";
-export { default as Breadcrumb } from "./breadcrumb";
-export { default as Button } from "./button";
-export { default as CardSelect } from "./card-select";
-export { default as Checkbox } from "./checkbox";
-export { default as ChoiceChip } from "./choice-chip";
-export { default as CloseButton } from "./close-button";
-export { default as Code } from "./code";
-export { default as Datepicker } from "./datepicker";
-export { default as Divider } from "./divider";
-export { default as Drawer } from "./drawer";
-export { default as FloatingActionButton } from "./fab";
-export { default as Form } from "./form";
-export { default as FormLabel } from "./form-label";
-export { default as InfoSelect } from "./info-select";
-export { default as InfoTag } from "./info-tag";
-export { default as Input } from "./input";
-export { default as LineIcon } from "./line-icon";
-export { default as Link } from "./link";
-export { default as List } from "./list";
-export { default as ListBox } from "./listbox";
-export { default as MediaControllerButton } from "./media-controller-button";
-export { default as Modal } from "./modal";
-export { default as NumericStepper } from "./numeric-stepper";
-export { default as Pagination } from "./pagination";
-export { default as Popover } from "./popover";
-export { default as ProgressBar } from "./progress-bar";
-export { default as ProgressIndicator } from "./progress-indicator";
-export { default as RadioCard } from "./radio-card";
-export { default as Radio } from "./radio";
-export { default as Select } from "./select";
-export { default as Skeleton } from "./skeleton";
-export { default as Stepper } from "./stepper";
-export { default as Switch } from "./switch";
-export { default as Table } from "./table";
-export { default as Tabs } from "./tabs";
-export { default as Textarea } from "./textarea";
-export { default as Toast } from "./toast";
-export { default as StaticCard } from "./static-card";
-export { default as PressableCard } from "./pressable-card";
-export { default as TravelTag } from "./travel-tag";

package/src/theme/components/info-select.ts

@@ -1,85 +0,0 @@
-import { anatomy } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
-import { floatingBackground, floatingBorder } from "../utils/floating-utils";
-import { focusVisibleStyles } from "../utils/focus-utils";
-import { srOnly } from "../utils/sr-utils";
-
-const parts = anatomy("InfoSelect").parts(
-  "container",
-  "label",
-  "button",
-  "arrowIcon",
-);
-
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: (props) => ({
-    container: {},
-    label: {
-      position: "relative",
-      fontSize: ["mobile.xs", "desktop.sm"],
-      marginTop: props.hasChosenValue ? 2 : 0,
-      ...(props.isLabelSrOnly ? srOnly : {}),
-    },
-    innerButton: {
-      display: "flex",
-      flexDir: "column",
-      alignItems: "start",
-      justifyContent: "start",
-    },
-    button: {
-      display: "flex",
-      appearance: "none",
-      width: "100%",
-      height: 8,
-      borderTopRadius: "sm",
-      borderBottomRadius: props.isOpen ? 0 : "sm",
-      paddingY: 1.5,
-      paddingX: 3,
-      justifyContent: "space-between",
-      alignItems: "center",
-      fontSize: "mobile.md",
-      ...baseBorder("default", props),
-      _hover: {
-        ...baseBorder("hover", props),
-      },
-      ...focusVisibleStyles(props),
-      _disabled: {
-        pointerEvents: "none",
-        ...baseText("disabled", props),
-        ...baseBackground("disabled", props),
-      },
-      _active: {
-        ...baseBackground("active", props),
-      },
-      _invalid: {
-        ...baseBorder("invalid", props),
-      },
-    },
-    placeholder: {},
-    arrowIcon: {},
-  }),
-  variants: {
-    base: () => ({}),
-    floating: (props) => ({
-      button: {
-        ...floatingBackground("default", props),
-        ...floatingBorder("default", props),
-        _hover: {
-          ...floatingBorder("hover", props),
-          ...floatingBackground("hover", props),
-        },
-        _active: {
-          ...floatingBorder("active", props),
-          ...floatingBackground("active", props),
-        },
-      },
-    }),
-  },
-  defaultProps: {
-    variant: "base",
-  },
-});
-export default config;

package/src/theme/components/info-tag.ts

@@ -1,63 +0,0 @@
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { anatomy, mode } from "@chakra-ui/theme-tools";
-import travelTagStyles from "./travel-tag";
-
-const parts = anatomy("info-tag").parts(
-  "container",
-  "iconContainer",
-  "icon",
-  "textContainer",
-  "title",
-  "description",
-);
-
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: (props) => ({
-    ...travelTagStyles.baseStyle!(props),
-    iconContainer: {
-      ...travelTagStyles.baseStyle!(props).iconContainer,
-      padding: 1,
-    },
-    textContainer: {
-      color: mode("darkGrey", "white")(props),
-    },
-  }),
-  sizes: {
-    ...travelTagStyles.sizes,
-    sm: {
-      ...travelTagStyles.sizes!.sm,
-      iconContainer: {
-        borderRadius: "0.375rem",
-      },
-    },
-    md: {
-      ...travelTagStyles.sizes!.md,
-      iconContainer: {
-        borderRadius: "0.375rem",
-      },
-    },
-    lg: {
-      ...travelTagStyles.sizes!.lg,
-      iconContainer: {
-        borderRadius: "sm",
-      },
-    },
-  },
-  defaultProps: {
-    size: "md",
-  },
-  variants: {
-    walk: (props) => ({
-      iconContainer: {
-        backgroundColor: mode("white", "transparent")(props),
-        boxShadow: mode(
-          `${props.theme.shadows.md}, inset 0 0 0 2px ${props.theme.colors.black[200]}`,
-          `${props.theme.shadows.md}, inset 0 0 0 2px ${props.theme.colors.whiteAlpha[400]}`,
-        )(props),
-      },
-    }),
-  },
-});
-export default config;

package/src/theme/components/input.ts

@@ -1,28 +0,0 @@
-import { inputAnatomy as parts } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { inputBaseStyle, inputVariant } from "../utils/input-utils";
-
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: (props) => ({
-    ...inputBaseStyle(props),
-  }),
-  variants: {
-    base: (props) => ({
-      field: {
-        ...inputVariant("base", props),
-      },
-    }),
-    floating: (props) => ({
-      field: {
-        ...inputVariant("floating", props),
-      },
-    }),
-  },
-  defaultProps: {
-    variant: "base",
-  },
-});
-
-export default config;

package/src/theme/components/line-icon.ts

@@ -1,129 +0,0 @@
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { anatomy, mode } from "@chakra-ui/theme-tools";
-
-const parts = anatomy("line-tag").parts("iconContainer", "icon");
-const helpers = createMultiStyleConfigHelpers(parts.keys);
-
-const config = helpers.defineMultiStyleConfig({
-  baseStyle: {
-    iconContainer: {
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-    },
-    icon: {
-      color: "white",
-      "[aria-disabled=true] &": {
-        color: mode("icon.disabled.light", "icon.disabled.dark"),
-      },
-    },
-  },
-  variants: {
-    "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: (props) => ({
-      iconContainer: {
-        backgroundColor: "white",
-        borderWidth: 1,
-        borderStyle: "solid",
-        borderColor: "blackAlpha.200",
-      },
-      icon: {
-        color: mode("darkGrey", "white")(props),
-        "[aria-disabled=true] &": {
-          color: "osloGrey",
-        },
-      },
-    }),
-    custom: (props) => ({
-      iconContainer: {
-        backgroundColor: props.backgroundColor,
-      },
-    }),
-  },
-  sizes: {
-    sm: {
-      iconContainer: {
-        borderRadius: "0.5625rem",
-        padding: 1,
-      },
-    },
-    md: {
-      iconContainer: {
-        borderRadius: "0.5625rem",
-        padding: 1,
-      },
-    },
-    lg: {
-      iconContainer: {
-        borderRadius: "sm",
-        padding: 1,
-      },
-    },
-  },
-  defaultProps: {
-    size: "md",
-  },
-});
-
-export default config;

package/src/theme/components/link.ts

@@ -1,78 +0,0 @@
-import { defineStyleConfig } from "@chakra-ui/react";
-import { mode } from "@chakra-ui/theme-tools";
-import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
-import { brandBackground, brandText } from "../utils/brand-utils";
-import { focusVisibleStyles } from "../utils/focus-utils";
-
-const config = defineStyleConfig({
-  baseStyle: (props) => ({
-    transitionProperty: "common",
-    transitionDuration: "fast",
-    transitionTimingFunction: "ease-out",
-    cursor: "pointer",
-    backgroundImage: "linear-gradient(currentColor, currentColor)",
-    backgroundSize: "100% 1px",
-    backgroundPosition: "0 100%",
-    backgroundRepeat: "no-repeat",
-    borderRadius: "none",
-    padding: "2px",
-    color: "inherit",
-    display: "inline",
-    position: "relative",
-    boxDecorationBreak: "clone",
-
-    "&:focus, &:focus-visible, &:active, &:hover": {
-      backgroundImage: "none",
-      backgroundSize: "100%",
-      outline: "none",
-      borderRadius: "xs",
-    },
-
-    ...focusVisibleStyles(props),
-
-    svg: {
-      display: "inline-block",
-      width: "1.125em",
-      height: "1.125em",
-      position: "relative",
-      bottom: "-0.2em",
-    },
-  }),
-  variants: {
-    primary: (props) => ({
-      ...baseText("default", props),
-      _hover: {
-        ...brandText("hover", props),
-        ...brandBackground("hover", props),
-      },
-      _active: {
-        ...brandText("active", props),
-        ...brandBackground("active", props),
-      },
-    }),
-    secondary: (props) => ({
-      backgroundImage: `linear-gradient(${mode(
-        "blackAlpha.400",
-        "whiteAlpha.400",
-      )(props)}, ${mode("blackAlpha.400", "whiteAlpha.400")(props)})`,
-      ...baseText("default", props),
-      "&:focus, &:focus-visible, &:active, &:hover": {
-        outline: "1px solid",
-      },
-      ...baseBackground("default", props),
-      _hover: {
-        ...baseBorder("hover", props), // TODO: This is also weird
-        ...baseBackground("hover", props),
-        outlineWidth: 1,
-      },
-      _active: {
-        ...baseBackground("active", props),
-      },
-    }),
-  },
-  defaultProps: {
-    variant: "primary",
-  },
-});
-
-export default config;