@vygruppen/spor-react 6.1.0 → 6.2.1

package/src/button/Button.tsx

@@ -1,10 +1,11 @@
 import {
   Box,
   Center,
-  Button as ChakraButton,
   ButtonProps as ChakraButtonProps,
+  Flex,
   forwardRef,
   useButtonGroup,
+  useStyleConfig,
 } from "@chakra-ui/react";
 import React from "react";
 import { createTexts, useTranslation } from "../i18n";
@@ -22,7 +23,9 @@ export type ButtonProps = Exclude<
   size?: "xs" | "sm" | "md" | "lg";
   /** The different variants of a button
    *
-   * Defaults to "primary"
+   * Defaults to "primary".
+   *
+   * "control" is deprecated, and will be removed in a future version
    */
   variant?:
     | "control"
@@ -37,7 +40,6 @@ export type ButtonProps = Exclude<
  *
  * There are several button variants. You can specify which one you want with the `variant` prop. The available variants are:
  *
- * - `control`: This button is used for ticket controls only.
  * - `primary`: This is our main button. It's used for the main actions in a view, like a call to action. There should only be a single primary button in each view.
  * - `secondary`: Used for secondary actions in a view, and when you need to make several actions available at the same time.
  * - `tertiary`: Used for additional choices, like a less important secondary action.
@@ -62,61 +64,48 @@ export type ButtonProps = Exclude<
  */
 export const Button = forwardRef<ButtonProps, "button">((props, ref) => {
   const {
+    as = "button",
+    fontWeight,
     size,
-    variant,
     children,
     isLoading,
     isDisabled,
     leftIcon,
     rightIcon,
+    sx,
     ...rest
   } = props;
   const ariaLabel = useCorrectAriaLabel(props);
   const buttonGroup = useButtonGroup();
-  const finalVariant = (variant ??
-    buttonGroup?.variant ??
-    "primary") as Required<ButtonProps["variant"]>;
   const finalSize = (size ?? buttonGroup?.size ?? "md") as Required<
     ButtonProps["size"]
   >;
+  const styles = useStyleConfig("Button", {
+    ...buttonGroup,
+    ...rest,
+    size: finalSize,
+    leftIcon,
+    rightIcon,
+  });
+
+  // We want to explicitly allow to override the fontWeight prop
+  if (fontWeight) {
+    styles.fontWeight = fontWeight;
+  }
 
   return (
-    <ChakraButton
-      size={finalSize}
-      variant={finalVariant}
+    <Box
       {...rest}
+      as={as}
+      sx={{ ...styles, ...sx }}
       ref={ref}
       aria-label={ariaLabel}
       aria-busy={isLoading}
-      isDisabled={isDisabled || isLoading}
-      leftIcon={
-        isLoading && leftIcon ? (
-          <Box visibility={isLoading ? "hidden" : "visible"} aria-hidden="true">
-            {leftIcon}
-          </Box>
-        ) : (
-          leftIcon
-        )
-      }
-      rightIcon={
-        isLoading && rightIcon ? (
-          <Box visibility={isLoading ? "hidden" : "visible"} aria-hidden="true">
-            {rightIcon}
-          </Box>
-        ) : (
-          rightIcon
-        )
-      }
+      disabled={isDisabled || isLoading}
       position="relative"
     >
       {isLoading && (
-        <Center
-          position="absolute"
-          right="0"
-          paddingBottom={1}
-          left="0"
-          paddingTop={2}
-        >
+        <Center position="absolute" right={0} left={0} top={1} bottom={0}>
           <ColorInlineLoader
             maxWidth={getLoaderWidth(finalSize)}
             width="80%"
@@ -125,18 +114,30 @@ export const Button = forwardRef<ButtonProps, "button">((props, ref) => {
           />
         </Center>
       )}
-      <Box
+      <Flex
+        justifyContent="space-between"
+        alignItems="center"
+        gap={1}
         visibility={isLoading ? "hidden" : "visible"}
-        whiteSpace="normal"
-        textAlign="left"
+        aria-hidden={isLoading}
       >
-        {children}
-      </Box>
-    </ChakraButton>
+        <Flex justifyContent="center" alignItems="center" gap={1}>
+          {leftIcon}
+          <Box
+            visibility={isLoading ? "hidden" : "visible"}
+            whiteSpace="normal"
+            textAlign="left"
+          >
+            {children}
+          </Box>
+        </Flex>
+        {rightIcon}
+      </Flex>
+    </Box>
   );
 });
 
-function getLoaderWidth(size: any) {
+function getLoaderWidth(size: Required<ButtonProps["size"]>) {
   switch (size) {
     case "xs":
       return "4rem";

package/src/button/IconButton.tsx

@@ -8,6 +8,10 @@ import React from "react";
 import { ColorSpinner } from "..";
 
 export type IconButtonProps = Omit<ChakraIconButtonProps, "variant"> & {
+  /** The button variant.
+   *
+   * "control" is deprecated
+   */
   variant:
     | "control"
     | "primary"

package/src/datepicker/DateField.tsx

@@ -52,14 +52,9 @@ export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
             {props.label}
           </FormLabel>
         )}
-        <Flex {...fieldProps} paddingTop="3" paddingBottom="0.5">
+        <Flex {...fieldProps} ref={ref} paddingTop="3" paddingBottom="0.5">
           {state.segments.map((segment, i) => (
-            <DateTimeSegment
-              ref={i === 0 ? ref : undefined}
-              key={i}
-              segment={segment}
-              state={state}
-            />
+            <DateTimeSegment key={i} segment={segment} state={state} />
           ))}
         </Flex>
         <input

package/src/input/NumericStepper.tsx

@@ -14,7 +14,6 @@ import {
   useTranslation,
 } from "..";
 import { getBoxShadowString } from "../theme/utils/box-shadow-utils";
-import { focusVisible } from "../theme/utils/focus-utils";
 
 type NumericStepperProps = {
   /** The name of the input field */
@@ -197,13 +196,10 @@ const VerySmallButton = (props: VerySmallButtonProps) => {
       size="xs"
       minWidth="24px"
       minHeight="24px"
-      sx={focusVisible({
-        notFocus: { boxShadow: "none" },
-        focus: {
-          boxShadow:
-            "inset 0 0 0 2px var(--spor-colors-pine), inset 0 0 0 3px white",
-        },
-      })}
+      _focusVisible={{
+        boxShadow:
+          "inset 0 0 0 2px var(--spor-colors-pine), inset 0 0 0 3px white",
+      }}
       {...props}
     />
   );

package/src/linjetag/InfoTag.tsx

@@ -24,6 +24,17 @@ export type InfoTagProps = TagProps;
  * />
  * ```
  *
+ * If required, you can also override the colors and icons in these line tags:
+ *
+ * ```tsx
+ * <InfoTag
+ *  variant="custom"
+ *  customIconVariant="ferry"
+ *  foregroundColor="#b4da55"
+ *  backgroundColor="#c0ffee"
+ * />
+ * ```
+ *
  * @see https://spor.vy.no/components/line-tags
  */
 export const InfoTag = ({
@@ -31,11 +42,21 @@ export const InfoTag = ({
   size = "md",
   title,
   description,
+  ...customProps
 }: InfoTagProps) => {
-  const styles = useMultiStyleConfig("InfoTag", { variant, size });
+  const styles = useMultiStyleConfig("InfoTag", {
+    variant,
+    size,
+    ...customProps,
+  });
   return (
     <Box sx={styles.container}>
-      <LineIcon variant={variant} size={size} sx={styles.iconContainer} />
+      <LineIcon
+        variant={variant}
+        size={size}
+        sx={styles.iconContainer}
+        {...(customProps as any)} // TODO: Fix this
+      />
       <Box sx={styles.textContainer}>
         {title && (
           <Box as="span" sx={styles.title}>

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/card.ts

@@ -2,7 +2,6 @@ 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: (props: any) => ({
@@ -20,21 +19,15 @@ const config = defineStyleConfig({
       ...getColorSchemeClickableProps(props),
       _hover: getColorSchemeHoverProps(props),
       _active: getColorSchemeActiveProps(props),
-      ...focusVisible({
-        focus: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("greenHaze", "azure")(props),
-            borderWidth: 2,
-            isInset: false,
-          }),
-          outline: "none",
-          _active: getColorSchemeActiveProps(props),
-        },
-        notFocus: {
-          ...getColorSchemeClickableProps(props),
-          _active: getColorSchemeActiveProps(props),
-        },
-      }),
+      _focusVisible: {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props),
+          borderWidth: 2,
+          isInset: false,
+        }),
+        outline: "none",
+        _active: getColorSchemeActiveProps(props),
+      },
       _disabled: {
         backgroundColor: "platinum",
         boxShadow: getBoxShadowString({

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: {

package/tsconfig.json

@@ -3,6 +3,6 @@
   "include": ["."],
   "exclude": ["dist", "build", "node_modules"],
   "compilerOptions": {
-    "rootDir": "."
-  }
+    "rootDir": ".",
+  },
 }