@vygruppen/spor-react 1.3.3 → 2.0.0

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

@@ -0,0 +1,267 @@
+import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
+import type { StyleFunctionProps } from "@chakra-ui/theme-tools";
+import { anatomy } from "@chakra-ui/theme-tools";
+import { getBoxShadowString } from "../utils/box-shadow-utils";
+import { focusVisible } from "../utils/focus-utils";
+
+const parts = anatomy("travel-tag").parts(
+  "container",
+  "iconContainer",
+  "icon",
+  "textContainer",
+  "title",
+  "description",
+  "deviationIcon"
+);
+
+const helpers = createMultiStyleConfigHelpers(parts.keys);
+
+const config = helpers.defineMultiStyleConfig({
+  baseStyle: (props) => ({
+    container: {
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      padding: 0.5,
+      width: "fit-content",
+      ...getDeviationContainerStyle(props),
+      transitionDuration: "fast",
+      transitionProperty: "common",
+      _disabled: {
+        backgroundColor: "silver",
+      },
+      "button&, a&": {
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: props.theme.colors.blackAlpha[100],
+            baseShadow: "sm",
+          }),
+        },
+        ...focusVisible({
+          focus: {
+            outline: "none",
+            borderColor: "transparent",
+            boxShadow: getBoxShadowString({
+              borderWidth: 2,
+              borderColor: "darkGrey",
+            }),
+          },
+          notFocus: {
+            boxShadow: "none",
+            borderColor: getDeviationBorderColor(props),
+          },
+        }),
+        _active: {
+          opacity: 0.5,
+          boxShadow: "none",
+        },
+      },
+    },
+    iconContainer: {
+      padding: 0.5,
+      "[aria-disabled=true] &": {
+        backgroundColor: "osloGrey",
+        color: "white",
+      },
+    },
+    textContainer: {
+      color: "darkGrey",
+      paddingRight: 0.5,
+      whiteSpace: "nowrap",
+      "[aria-disabled=true] &": {
+        color: "dimGrey",
+      },
+    },
+    title: {
+      fontWeight: "bold",
+    },
+    description: {
+      fontWeight: "normal",
+    },
+    deviationIcon: {
+      ...getDeviationIconStyle(props),
+    },
+  }),
+  variants: {
+    "local-train": {
+      container: {
+        backgroundColor: "linjetag.lokaltogLight",
+      },
+    },
+    "region-train": {
+      container: {
+        backgroundColor: "linjetag.regiontogLight",
+      },
+    },
+    "region-express-train": {
+      container: {
+        backgroundColor: "linjetag.regionEkspressLight",
+      },
+    },
+    "long-distance-train": {
+      container: {
+        backgroundColor: "linjetag.fjerntogLight",
+      },
+    },
+    "airport-express-train": {
+      container: {
+        backgroundColor: "linjetag.flytogLight",
+      },
+    },
+    "vy-bus": {
+      container: {
+        backgroundColor: "linjetag.vyBussLight",
+      },
+    },
+    "local-bus": {
+      container: {
+        backgroundColor: "linjetag.lokalbussLight",
+      },
+    },
+    ferry: {
+      container: {
+        backgroundColor: "linjetag.fergeLight",
+      },
+    },
+    subway: {
+      container: {
+        backgroundColor: "linjetag.tbaneLight",
+      },
+    },
+    tram: {
+      container: {
+        backgroundColor: "linjetag.trikkLight",
+      },
+    },
+    "alt-transport": {
+      container: {
+        backgroundColor: "linjetag.altTransportLight",
+      },
+    },
+    walk: {
+      container: {
+        backgroundColor: "white",
+        _disabled: {
+          backgroundColor: "white",
+        },
+      },
+      iconContainer: {
+        border: "none",
+        position: "relative",
+        left: -1,
+        "[aria-disabled=true] &": {
+          backgroundColor: "transparent",
+          color: "osloGrey",
+        },
+      },
+      textContainer: {
+        position: "absolute",
+        left: 2,
+        bottom: -0.5,
+        "[aria-disabled=true] &": {
+          color: "osloGrey",
+        },
+      },
+      title: {
+        fontSize: "mobile.xs",
+        fontWeight: "normal",
+      },
+      description: {
+        display: "none",
+      },
+    },
+  },
+  sizes: {
+    sm: {
+      container: {
+        borderRadius: "sm",
+      },
+      iconContainer: {
+        borderRadius: "xs",
+      },
+      textContainer: {
+        marginLeft: 1,
+        fontSize: "mobile.sm",
+      },
+    },
+    md: {
+      container: {
+        borderRadius: "sm",
+      },
+      iconContainer: {
+        borderRadius: "0.5625rem", // 9px
+      },
+      textContainer: {
+        marginLeft: 1.5,
+        fontSize: "mobile.sm",
+      },
+    },
+    lg: {
+      container: {
+        borderRadius: "sm",
+      },
+      iconContainer: {
+        borderRadius: "0.5625rem", // 9px
+      },
+      textContainer: {
+        marginLeft: 2,
+        fontSize: "mobile.md",
+      },
+    },
+  },
+  defaultProps: {
+    size: "md",
+  },
+});
+
+export default config;
+
+const getDeviationContainerStyle = (props: StyleFunctionProps) => {
+  switch (props.deviationLevel) {
+    case "critical":
+      return {
+        border: "1px solid",
+        borderColor: getDeviationBorderColor(props),
+      };
+    case "major":
+      return {
+        border: "1px solid",
+        borderColor: getDeviationBorderColor(props),
+      };
+    default:
+      return {};
+  }
+};
+
+const getDeviationBorderColor = (props: StyleFunctionProps) => {
+  switch (props.deviationLevel) {
+    case "critical":
+      return "brightRed";
+    case "major":
+      return "golden";
+    default:
+      return "transparent";
+  }
+};
+
+const getDeviationIconStyle = (props: StyleFunctionProps) => {
+  return {
+    position: "absolute",
+    top: "0",
+    right: "0",
+    transform: "translate(50%, -50%)",
+    zIndex: "banner",
+    stroke: "white",
+    color:
+      deviationIconColor[
+        props.deviationLevel as keyof typeof deviationIconColor
+      ] || "inherit",
+  };
+};
+
+const deviationIconColor = {
+  critical: "brightRed",
+  major: "golden",
+  minor: "golden",
+  info: "ocean",
+} as const;

package/src/theme/font-faces.ts

@@ -0,0 +1,66 @@
+import tokens from "@vygruppen/spor-design-tokens";
+
+/** A string of CSS that should be injected in the global CSS space */
+export const fontFaces = `
+@font-face {
+  font-family: ${tokens.asset.font["vy-sans"]["light"].name};
+  src: url("https://www.vy.no/styles/font/VySans-Light.woff2") format("woff2"),
+    url("https://www.vy.no/styles/font/VySans-Light.woff") format("woff");
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap
+}
+@font-face {
+  font-family: ${tokens.asset.font["vy-sans"]["light-italic"].name};
+  src: url("https://www.vy.no/styles/font/VySans-LightItalic.woff2")
+      format("woff2"),
+    url("https://www.vy.no/styles/font/VySans-LightItalic.woff") format("woff");
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap
+}
+@font-face {
+  font-family: ${tokens.asset.font["vy-sans"]["medium"].name};
+  src: url("https://www.vy.no/styles/font/VySans-Regular.woff2") format("woff2"),
+    url("https://www.vy.no/styles/font/VySans-Regular.woff") format("woff");
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap
+}
+@font-face {
+  font-family: ${tokens.asset.font["vy-sans"]["medium-italic"].name}
+  src: url("https://www.vy.no/styles/font/VySans-RegularItalic.woff2")
+      format("woff2"),
+    url("https://www.vy.no/styles/font/VySans-RegularItalic.woff")
+      format("woff");
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap
+}
+@font-face {
+  font-family: ${tokens.asset.font["vy-sans"]["bold"].name};
+  src: url("https://www.vy.no/styles/font/VySans-Bold.woff2") format("woff2"),
+    url("https://www.vy.no/styles/font/VySans-Bold.woff") format("woff");
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap
+}
+@font-face {
+  font-family: ${tokens.asset.font["vy-sans"]["bold-italic"].name};
+  src: url("https://www.vy.no/styles/font/VySans-BoldItalic.woff2")
+      format("woff2"),
+    url("https://www.vy.no/styles/font/VySans-BoldItalic.woff") format("woff");
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap
+}
+@font-face {
+  font-family: ${tokens.asset.font["vy-display"].name};
+  src: url("https://www.vy.no/styles/font/VyDisplay-Medium.woff2")
+      format("woff2"),
+    url("https://www.vy.no/styles/font/VyDisplay-Medium.woff") format("woff");
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap
+}
+`;

package/src/theme/foundations/borders.ts

@@ -0,0 +1,11 @@
+import tokens from "@vygruppen/spor-design-tokens";
+
+export const borders = {
+  none: "0",
+  sm: `${tokens.size.stroke.sm} solid`,
+  "sm-dashed": `${tokens.size.stroke.sm} dashed`,
+  md: `${tokens.size.stroke.md} solid`,
+  "md-dashed": `${tokens.size.stroke.md} dashed`,
+  lg: `${tokens.size.stroke.lg} solid`,
+  "lg-dashed": `${tokens.size.stroke.lg} dashed`,
+};

package/src/theme/foundations/breakpoints.ts

@@ -0,0 +1,9 @@
+import tokens from "@vygruppen/spor-design-tokens";
+
+export const breakpoints = {
+  sm: tokens.size.breakpoint.sm,
+  md: tokens.size.breakpoint.md,
+  lg: tokens.size.breakpoint.lg,
+  xl: tokens.size.breakpoint.lg,
+  "2xl": tokens.size.breakpoint.lg,
+};

package/src/theme/foundations/colors.ts

@@ -0,0 +1,10 @@
+import tokens from "@vygruppen/spor-design-tokens";
+
+export type ColorsType = typeof tokens.color.alias &
+  typeof tokens.color.palette & { linjetag: typeof tokens.color.linjetag };
+
+export const colors: ColorsType = {
+  ...tokens.color.alias,
+  ...tokens.color.palette,
+  linjetag: tokens.color.linjetag,
+};

package/src/theme/foundations/config.ts

@@ -0,0 +1,5 @@
+export const config = {
+  cssVarPrefix: "spor",
+  initialColorMode: "light",
+  useSystemColorMode: false,
+};

package/src/theme/foundations/fontSizes.ts

@@ -0,0 +1,29 @@
+import tokens from "@vygruppen/spor-design-tokens";
+
+export const fontSizes = {
+  "2xs": tokens.size.font.xs.mobile,
+  xs: tokens.size.font.sm.mobile,
+  sm: tokens.size.font.md.mobile,
+  md: tokens.size.font.lg.mobile,
+  lg: tokens.size.font.xl.mobile,
+  xl: tokens.size.font.xxl.mobile,
+  "2xl": tokens.size.font.xl.desktop,
+  "3xl": tokens.size.font.xxl.desktop,
+
+  mobile: {
+    xs: tokens.size.font.xs.mobile,
+    sm: tokens.size.font.sm.mobile,
+    md: tokens.size.font.md.mobile,
+    lg: tokens.size.font.lg.mobile,
+    xl: tokens.size.font.xl.mobile,
+    xxl: tokens.size.font.xxl.mobile,
+  },
+  desktop: {
+    xs: tokens.size.font.xs.desktop,
+    sm: tokens.size.font.sm.desktop,
+    md: tokens.size.font.md.desktop,
+    lg: tokens.size.font.lg.desktop,
+    xl: tokens.size.font.xl.desktop,
+    xxl: tokens.size.font.xxl.desktop,
+  },
+};

package/src/theme/foundations/fontWeights.ts

@@ -0,0 +1,5 @@
+export const fontWeights = {
+  light: 300,
+  medium: 400,
+  bold: 700,
+};

package/src/theme/foundations/fonts.ts

@@ -0,0 +1,7 @@
+import tokens from "@vygruppen/spor-design-tokens";
+
+export const fonts = {
+  body: tokens.font.family.body,
+  heading: tokens.font.family.heading,
+  mono: tokens.font.family.monospace,
+};

package/src/theme/foundations/index.ts

@@ -0,0 +1,14 @@
+export * from "./borders";
+export * from "./breakpoints";
+export * from "./colors";
+export * from "./config";
+export * from "./fonts";
+export * from "./fontSizes";
+export * from "./fontWeights";
+export * from "./lineHeights";
+export * from "./radii";
+export * from "./shadows";
+export * from "./sizes";
+export * from "./spacing";
+export * from "./textStyles";
+export * from "./zIndices";

package/src/theme/foundations/lineHeights.ts

@@ -0,0 +1,5 @@
+import tokens from "@vygruppen/spor-design-tokens";
+
+export const lineHeights = {
+  normal: tokens.font.style.lg["line-height"],
+};

package/src/theme/foundations/radii.ts

@@ -0,0 +1,12 @@
+import tokens from "@vygruppen/spor-design-tokens";
+
+export const radii = {
+  none: tokens.size["border-radius"].none,
+  xs: tokens.size["border-radius"].xs,
+  sm: tokens.size["border-radius"].sm,
+  md: tokens.size["border-radius"].md,
+  lg: tokens.size["border-radius"].lg,
+  xl: tokens.size["border-radius"].xl,
+  "2xl": tokens.size["border-radius"]["2xl"],
+  round: "50%",
+};

package/src/theme/foundations/shadows.ts

@@ -0,0 +1,8 @@
+import tokens from "@vygruppen/spor-design-tokens";
+
+export const shadows = {
+  none: "none",
+  sm: tokens.depth.shadow.sm.value,
+  md: tokens.depth.shadow.md.value,
+  lg: tokens.depth.shadow.lg.value,
+};

package/src/theme/foundations/sizes.ts

@@ -0,0 +1,34 @@
+import { spacing } from "./spacing";
+
+const largeSizes = {
+  max: "max-content",
+  min: "min-content",
+  full: "100%",
+  "3xs": "14rem",
+  "2xs": "16rem",
+  xs: "20rem",
+  sm: "24rem",
+  md: "28rem",
+  lg: "32rem",
+  xl: "36rem",
+  "2xl": "42rem",
+  "3xl": "48rem",
+  "4xl": "56rem",
+  "5xl": "64rem",
+  "6xl": "72rem",
+  "7xl": "80rem",
+  "8xl": "90rem",
+};
+
+const container = {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+};
+
+export const sizes = {
+  ...spacing,
+  ...largeSizes,
+  container,
+};

package/src/theme/foundations/spacing.ts

@@ -0,0 +1,30 @@
+import tokens from "@vygruppen/spor-design-tokens";
+
+type Token = { value: { number: number } };
+type Spacing = {
+  0: Token;
+  0.5: Token;
+  1: Token;
+  1.5: Token;
+  2: Token;
+  3: Token;
+  4: Token;
+  5: Token;
+  6: Token;
+  7: Token;
+  8: Token;
+  9: Token;
+  10: Token;
+  11: Token;
+  12: Token;
+};
+
+export const spacing = Object.entries(tokens.size.spacing).reduce(
+  (tokens, [key, token]) => ({
+    ...tokens,
+    [Number(key)]: token,
+  }),
+  {} as Record<keyof Spacing, string>
+);
+
+export const space = spacing;

package/src/theme/foundations/textStyles.ts

@@ -0,0 +1,60 @@
+import tokens from "@vygruppen/spor-design-tokens";
+
+export const textStyles = {
+  "2xl": {
+    fontSize: [
+      tokens.font.style.xxl["font-size"].mobile,
+      tokens.font.style.xxl["font-size"].desktop,
+    ],
+    fontFamily: tokens.font.style.xxl["font-family"],
+    lineHeight: tokens.font.style.xxl["line-height"],
+  },
+  "xl-display": {
+    fontSize: [
+      tokens.font.style["xl-display"]["font-size"].mobile,
+      tokens.font.style["xl-display"]["font-size"].desktop,
+    ],
+    fontFamily: tokens.font.style["xl-display"]["font-family"],
+    lineHeight: tokens.font.style["xl-display"]["line-height"],
+  },
+  "xl-sans": {
+    fontSize: [
+      tokens.font.style["xl-sans"]["font-size"].mobile,
+      tokens.font.style["xl-sans"]["font-size"].desktop,
+    ],
+    fontFamily: tokens.font.style["xl-sans"]["font-family"],
+    lineHeight: tokens.font.style["xl-sans"]["line-height"],
+  },
+  lg: {
+    fontSize: [
+      tokens.font.style.lg["font-size"].mobile,
+      tokens.font.style.lg["font-size"].desktop,
+    ],
+    fontFamily: tokens.font.style.lg["font-family"],
+    lineHeight: tokens.font.style.lg["line-height"],
+  },
+  md: {
+    fontSize: [
+      tokens.font.style.md["font-size"].mobile,
+      tokens.font.style.md["font-size"].desktop,
+    ],
+    fontFamily: tokens.font.style.md["font-family"],
+    lineHeight: tokens.font.style.md["line-height"],
+  },
+  sm: {
+    fontSize: [
+      tokens.font.style.sm["font-size"].mobile,
+      tokens.font.style.sm["font-size"].desktop,
+    ],
+    fontFamily: tokens.font.style.sm["font-family"],
+    lineHeight: tokens.font.style.sm["line-height"],
+  },
+  xs: {
+    fontSize: [
+      tokens.font.style.xs["font-size"].mobile,
+      tokens.font.style.xs["font-size"].desktop,
+    ],
+    fontFamily: tokens.font.style.xs["font-family"],
+    lineHeight: tokens.font.style.xs["line-height"],
+  },
+};

package/src/theme/foundations/zIndices.ts

@@ -0,0 +1,17 @@
+import tokens from "@vygruppen/spor-design-tokens";
+
+export const zIndices = {
+  hide: tokens.depth["z-index"].hide,
+  auto: "auto",
+  base: tokens.depth["z-index"].base,
+  docked: tokens.depth["z-index"].docked,
+  dropdown: tokens.depth["z-index"].dropdown,
+  sticky: tokens.depth["z-index"].sticky,
+  banner: tokens.depth["z-index"].banner,
+  overlay: tokens.depth["z-index"].overlay,
+  modal: tokens.depth["z-index"].modal,
+  popover: tokens.depth["z-index"].popover,
+  skipLink: tokens.depth["z-index"].skipLink,
+  toast: tokens.depth["z-index"].toast,
+  tooltip: tokens.depth["z-index"].tooltip,
+};

package/src/theme/index.ts

@@ -0,0 +1,14 @@
+import { theme as defaultTheme } from "@chakra-ui/theme";
+import * as components from "./components";
+import * as foundations from "./foundations";
+
+export const theme = {
+  ...defaultTheme,
+  ...foundations,
+  components: {
+    ...defaultTheme.components,
+    ...components,
+  },
+};
+
+export { fontFaces } from "./font-faces";

package/src/theme/utils/box-shadow-utils.ts

@@ -0,0 +1,44 @@
+import { colors, ColorsType } from "../foundations/colors";
+import { shadows } from "../foundations/shadows";
+
+type GetBoxShadowStringArgs = {
+  baseShadow?: keyof typeof shadows;
+  borderColor?: keyof typeof colors | string;
+  borderWidth?: number;
+  isInset?: boolean;
+};
+/**
+ * A utility for creating box shadow strings
+ */
+export const getBoxShadowString = (
+  args: GetBoxShadowStringArgs | GetBoxShadowStringArgs[]
+): string => {
+  if (Array.isArray(args)) {
+    return args.map((arg) => getBoxShadowString(arg)).join(", ");
+  }
+
+  const { baseShadow, borderColor, borderWidth = 1, isInset = true } = args;
+  const allShadows: string[] = [];
+
+  if (borderColor) {
+    let color = borderColor;
+    if (borderColor in colors) {
+      color = colors[borderColor as keyof typeof colors] as string;
+    } else {
+      const [subgroup, value] = borderColor.split(".");
+      const subgroupValue = (colors[subgroup as keyof ColorsType] as any)?.[
+        value
+      ];
+      if (subgroupValue) {
+        color = subgroupValue;
+      }
+    }
+    allShadows.push(
+      `${isInset ? "inset " : ""}0 0 0 ${borderWidth}px ${color}`
+    );
+  }
+  if (baseShadow) {
+    allShadows.push(shadows[baseShadow]);
+  }
+  return allShadows.join(", ");
+};

package/src/theme/utils/focus-utils.ts

@@ -0,0 +1,16 @@
+import { SystemStyleObject } from "@chakra-ui/theme-tools";
+
+type FocusArgs = {
+  /** The styles applied for when the element is not focused */
+  notFocus: SystemStyleObject;
+  /** The styles applied for when the element is focused */
+  focus: SystemStyleObject;
+};
+/**
+ * A helper function for applying focus styles in such a way that they work with Safari – which doesn't support :focus-visible.
+ */
+export const focusVisible = ({ notFocus, focus }: FocusArgs) => ({
+  _focus: focus,
+  _focusVisible: focus,
+  "&[data-focus]:not([data-focus-visible])": notFocus,
+});