@vygruppen/spor-react 6.1.0 → 6.2.0

package/src/linjetag/LineIcon.tsx

@@ -3,10 +3,23 @@ import React from "react";
 import { getCorrectIcon } from "./icons";
 import { TagProps } from "./types";
 
-export type LineIconProps = BoxProps & {
-  variant: TagProps["variant"];
-  size: TagProps["size"];
+type DefaultVariants = Exclude<TagProps["variant"], "custom">;
+
+type DefaultVariantProps = {
+  variant: DefaultVariants;
+};
+type CustomVariantProps = {
+  variant: "custom";
+  customIconVariant: DefaultVariants;
+  foregroundColor: string;
+  backgroundColor: string;
 };
+type VariantProps = DefaultVariantProps | CustomVariantProps;
+
+export type LineIconProps = Exclude<BoxProps, "variant"> &
+  VariantProps & {
+    size: TagProps["size"];
+  };
 
 /**
  * A line icon component.
@@ -23,6 +36,18 @@ export type LineIconProps = BoxProps & {
  * <LineIcon variant="subway" size="lg" />
  * ```
  *
+ * If you require some one-off colors, but still want to use the line tag component,
+ * you can do so like this:
+ *
+ * ```tsx
+ * <LineIcon
+ *  variant="custom"
+ *  customIconVariant="ferry"
+ *  foregroundColor="#b4da55"
+ *  backgroundColor="#c0ffee"
+ * />
+ * ```
+ *
  * @see https://spor.vy.no/components/line-tags
  */
 export const LineIcon = ({
@@ -31,8 +56,16 @@ export const LineIcon = ({
   sx,
   ...rest
 }: LineIconProps) => {
-  const styles = useMultiStyleConfig("LineIcon", { variant, size });
-  const Icon: any = getCorrectIcon({ variant, size });
+  const styles = useMultiStyleConfig("LineIcon", { variant, size, ...rest });
+  const Icon: any = getCorrectIcon({
+    variant:
+      variant === "custom" && "customIconVariant" in rest
+        ? rest.customIconVariant
+        : variant === "custom"
+          ? "local-train"
+          : variant,
+    size,
+  });
   if (!Icon) {
     return null;
   }

package/src/linjetag/TravelTag.tsx

@@ -58,6 +58,19 @@ export type TravelTagProps = TagProps &
  * />
  * ```
  *
+ * If required, you can also override the colors and icons in these travel tags:
+ *
+ * ```tsx
+ * <TravelTag
+ *   variant="custom"
+ *   customIconVariant="ferry"
+ *   foregroundColor="#b4da55"
+ *   backgroundColor="#c0ffee"
+ *   title="3"
+ *   description="Ringen"
+ * />
+ * ```
+ *
  * @see https://spor.vy.no/components/line-tags
  */
 export const TravelTag = forwardRef<TravelTagProps, As>(
@@ -77,13 +90,20 @@ export const TravelTag = forwardRef<TravelTagProps, As>(
       variant,
       size,
       deviationLevel,
+      foregroundColor: variant === "custom" ? rest.foregroundColor : undefined,
+      backgroundColor: variant === "custom" ? rest.backgroundColor : undefined,
     });
 
     const DeviationLevelIcon = getDeviationLevelIcon({ deviationLevel, size });
 
     return (
       <Box sx={styles.container} aria-disabled={isDisabled} ref={ref} {...rest}>
-        <LineIcon variant={variant} size={size} sx={styles.iconContainer} />
+        <LineIcon
+          variant={variant}
+          size={size}
+          sx={styles.iconContainer}
+          {...(rest as any)}
+        />
         <Box sx={styles.textContainer}>
           {title && (
             <Box as="span" sx={styles.title}>

package/src/linjetag/types.d.ts

@@ -16,9 +16,24 @@ export type Size = "sm" | "md" | "lg";
 
 export type TagType = "info" | "travel";
 
-export type TagProps = {
-  variant: Variant;
+export type TagProps = VariantProps & {
   size: Size;
   title: string;
   description?: string;
 };
+
+type DefaultVariantProps = {
+  variant: Variant;
+};
+type CustomVariantProps = {
+  variant: "custom";
+  /** When variant="custom", the foreground color of the tag */
+  foregroundColor: string;
+  /** When variant="custom", the background color of the tag */
+  backgroundColor: string;
+  /** When variant="custom", this is the icon you want to display.
+   * It should be one of the other variants
+   */
+  customIconVariant: Variant;
+};
+type VariantProps = DefaultVariantProps | CustomVariantProps;

package/src/theme/components/button.ts

@@ -2,13 +2,11 @@ import { defineStyleConfig } from "@chakra-ui/react";
 import { mode } from "@chakra-ui/theme-tools";
 import { colors } from "../foundations";
 import { getBoxShadowString } from "../utils/box-shadow-utils";
-import { focusVisible } from "../utils/focus-utils";
 
 const config = defineStyleConfig({
   baseStyle: {
     border: 0,
     borderRadius: "xl",
-    fontWeight: "bold",
     transitionProperty: "common",
     transitionDuration: "normal",
     textWrap: "wrap",
@@ -36,18 +34,15 @@ const config = defineStyleConfig({
       // hardcoded background color as alpha-"hack" below is not feasible for dark mode with solid background color
       backgroundColor: mode("pine", "coralGreen")(props),
       color: mode("white", "darkTeal")(props),
-      ...focusVisible({
-        focus: {
-          boxShadow: `inset 0 0 0 2px ${mode(
-            colors.greenHaze,
-            colors.azure,
-          )(props)}, inset 0 0 0 4px ${mode(
-            colors.white,
-            colors.darkGrey,
-          )(props)}`,
-        },
-        notFocus: { boxShadow: "none" },
-      }),
+      _focusVisible: {
+        boxShadow: `inset 0 0 0 2px ${mode(
+          colors.greenHaze,
+          colors.azure,
+        )(props)}, inset 0 0 0 4px ${mode(
+          colors.white,
+          colors.darkGrey,
+        )(props)}`,
+      },
       _hover: {
         backgroundColor: mode("darkTeal", "blueGreen")(props),
       },
@@ -58,34 +53,29 @@ const config = defineStyleConfig({
     secondary: (props) => ({
       // FIXME: Update to use global defined background color for darkMode whenever it is available instead of alpha
       backgroundColor: mode("seaMist", "primaryGreen")(props),
-      color: mode("darkTeal", "white")(props),
+      color: mode("darkTeal", "seaMist")(props),
       // order is important here for now while we do not have global defined background color for darkMode
       _hover: {
         backgroundColor: mode("coralGreen", "greenHaze")(props),
       },
-      ...focusVisible({
-        focus: {
+      _focusVisible: {
+        boxShadow: `inset 0 0 0 2px ${mode(
+          colors.greenHaze,
+          colors.primaryGreen,
+        )(props)}, inset 0 0 0 4px ${mode(
+          colors.white,
+          colors.darkTeal,
+        )(props)}`,
+        _hover: {
           boxShadow: `inset 0 0 0 2px ${mode(
             colors.greenHaze,
-            colors.primaryGreen,
+            colors.azure,
           )(props)}, inset 0 0 0 4px ${mode(
             colors.white,
-            colors.darkTeal,
+            colors.blackAlpha[500],
           )(props)}`,
-          _hover: {
-            boxShadow: `inset 0 0 0 2px ${mode(
-              colors.greenHaze,
-              colors.azure,
-            )(props)}, inset 0 0 0 4px ${mode(
-              colors.white,
-              colors.blackAlpha[500],
-            )(props)}`,
-          },
         },
-        notFocus: {
-          boxShadow: "none",
-        },
-      }),
+      },
       _active: {
         backgroundColor: mode("mint", "darkTeal")(props),
         boxShadow: `inset 0 0 0 2px ${mode(
@@ -109,25 +99,16 @@ const config = defineStyleConfig({
     tertiary: (props) => ({
       backgroundColor: "transparent",
       color: mode("darkGrey", "white")(props),
-      fontWeight: "normal",
       boxShadow: `inset 0 0 0 1px ${mode(
         colors.blackAlpha[400],
         colors.whiteAlpha[400],
       )(props)}`,
-      ...focusVisible({
-        focus: {
-          boxShadow: getBoxShadowString({
-            borderWidth: 2,
-            borderColor: "azure",
-          }),
-        },
-        notFocus: {
-          boxShadow: `inset 0 0 0 1px ${mode(
-            colors.blackAlpha[400],
-            colors.whiteAlpha[400],
-          )(props)}`,
-        },
-      }),
+      _focusVisible: {
+        boxShadow: getBoxShadowString({
+          borderWidth: 2,
+          borderColor: "azure",
+        }),
+      },
       _hover: {
         boxShadow: `inset 0 0 0 2px currentColor`,
       },
@@ -142,18 +123,12 @@ const config = defineStyleConfig({
     ghost: (props) => ({
       backgroundColor: "transparent",
       color: mode("darkGrey", "white")(props),
-      fontWeight: "normal",
-      ...focusVisible({
-        focus: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("greenHaze", "azure")(props),
-            borderWidth: 2,
-          }),
-        },
-        notFocus: {
-          outline: "none",
-        },
-      }),
+      _focusVisible: {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props),
+          borderWidth: 2,
+        }),
+      },
       _hover: {
         backgroundColor: mode("seaMist", "whiteAlpha.200")(props),
         _disabled: {
@@ -181,26 +156,20 @@ const config = defineStyleConfig({
           borderWidth: 2,
         }),
       },
-      ...focusVisible({
-        focus: {
+      _focusVisible: {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props),
+          borderWidth: 2,
+          baseShadow: "sm",
+        }),
+        _hover: {
           boxShadow: getBoxShadowString({
             borderColor: mode("greenHaze", "azure")(props),
             borderWidth: 2,
-            baseShadow: "sm",
+            baseShadow: "md",
           }),
-          _hover: {
-            boxShadow: getBoxShadowString({
-              borderColor: mode("greenHaze", "azure")(props),
-              borderWidth: 2,
-              baseShadow: "md",
-            }),
-          },
         },
-        notFocus: {
-          outline: "none",
-          boxShadow: "sm",
-        },
-      }),
+      },
     }),
   },
   sizes: {
@@ -208,22 +177,26 @@ const config = defineStyleConfig({
       minHeight: 8,
       minWidth: 8,
       fontSize: "18px",
+      fontWeight: "bold",
     },
     md: {
       minHeight: 7,
       minWidth: 7,
       fontSize: "18px",
+      fontWeight: "bold",
     },
     sm: {
       minHeight: 6,
       minWidth: 6,
       fontSize: "16px",
+      fontWeight: "normal",
     },
     xs: {
       minHeight: 5,
       minWidth: 5,
       fontSize: "16px",
       paddingX: 2,
+      fontWeight: "normal",
     },
   },
   defaultProps: {

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

@@ -92,6 +92,11 @@ const config = helpers.defineMultiStyleConfig({
         },
       },
     }),
+    custom: (props) => ({
+      iconContainer: {
+        backgroundColor: props.backgroundColor,
+      },
+    }),
   },
   sizes: {
     sm: {

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

@@ -172,6 +172,11 @@ const config = helpers.defineMultiStyleConfig({
         display: "none",
       },
     }),
+    custom: (props) => ({
+      container: {
+        backgroundColor: props.foregroundColor,
+      },
+    }),
   },
   sizes: {
     sm: {