@vygruppen/spor-react 4.0.0 → 4.0.2

package/src/input/FormErrorMessage.tsx

@@ -30,7 +30,7 @@ export type FormErrorMessageProps = BoxProps & {
  * </FormControl>
  * ```
  *
- * @see https://spor.vy.no/komponenter/skjemaelementer
+ * @see https://spor.vy.no/components/form-control
  */
 export const FormErrorMessage = ({
   children,

package/src/input/InfoSelect.tsx

@@ -147,7 +147,7 @@ type InfoSelectProps<T extends object> = {
  * </InfoSelect>
  * ```
  *
- * @see https://spor.vy.no/komponenter/info-select
+ * @see https://spor.vy.no/components/info-select
  */
 export function InfoSelect<T extends object>({
   placeholder,

package/src/input/PasswordInput.tsx

@@ -46,6 +46,7 @@ export const PasswordInput = forwardRef<PasswordInputProps, "input">(
             onClick={onToggle}
             borderRadius="sm"
             marginRight={1}
+            isDisabled={props.disabled || props.isDisabled}
           >
             {isShowingPassword ? t(texts.hidePassword) : t(texts.showPassword)}
           </Button>

package/src/linjetag/InfoTag.tsx

@@ -24,7 +24,7 @@ export type InfoTagProps = TagProps;
  * />
  * ```
  *
- * @see https://spor.vy.no/komponenter/linjetags
+ * @see https://spor.vy.no/components/line-tags
  */
 export const InfoTag = ({
   variant,

package/src/linjetag/LineIcon.tsx

@@ -23,7 +23,7 @@ export type LineIconProps = BoxProps & {
  * <LineIcon variant="subway" size="lg" />
  * ```
  *
- * @see https://spor.vy.no/komponenter/linjetags
+ * @see https://spor.vy.no/components/line-tags
  */
 export const LineIcon = ({
   variant,

package/src/linjetag/TravelTag.tsx

@@ -58,7 +58,7 @@ export type TravelTagProps = TagProps &
  * />
  * ```
  *
- * @see https://spor.vy.no/komponenter/linjetags
+ * @see https://spor.vy.no/components/line-tags
  */
 export const TravelTag = forwardRef<TravelTagProps, As>(
   (

package/src/theme/components/datepicker.ts

@@ -8,6 +8,7 @@ const parts = anatomy("datepicker").parts(
   "wrapper",
   "calendarTriggerButton",
   "arrow",
+  "calendarPopover",
   "calendar",
   "weekdays",
   "weekend",
@@ -34,36 +35,10 @@ const config = helpers.defineMultiStyleConfig({
       paddingY: 0.5,
       alignItems: "center",
       _hover: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("darkGrey", "white")(props),
-          borderWidth: 2,
-        }),
         zIndex: zIndices.docked,
       },
-      _focusWithin: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("greenHaze", "azure")(props),
-          borderWidth: 2,
-        }),
-      },
-      _invalid: {
-        boxShadow: getBoxShadowString({
-          borderColor: "brightRed",
-          borderWidth: 2,
-        }),
-      },
       _disabled: {
         pointerEvents: "none",
-        boxShadow: getBoxShadowString({
-          borderColor: mode("osloGrey", "whiteAlpha.400")(props),
-          borderWidth: 1,
-        }),
-        _focus: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("osloGrey", "whiteAlpha.400")(props),
-            borderWidth: 1,
-          }),
-        },
       },
     },
     inputLabel: {
@@ -123,17 +98,19 @@ const config = helpers.defineMultiStyleConfig({
         }),
       },
     },
-    arrow: {  
+    arrow: {
       [$arrowBackground.variable]: mode("white", colors.night)(props),
-    },    
-    calendar: {
+    },
+    calendarPopover: {
       backgroundColor: mode("white", "night")(props),
       color: mode("darkGrey", "white")(props),
       boxShadow: getBoxShadowString({
         borderWidth: 2,
         borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props),
+        baseShadow: "md",
       }),
     },
+
     weekdays: {
       color: mode("darkGrey", "white")(props),
     },
@@ -216,6 +193,41 @@ const config = helpers.defineMultiStyleConfig({
   }),
   variants: {
     base: (props) => ({
+      wrapper: {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
+        }),
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("darkGrey", "white")(props),
+            borderWidth: 2,
+          }),
+        },
+        _focusWithin: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("greenHaze", "azure")(props),
+            borderWidth: 2,
+          }),
+        },
+        _invalid: {
+          boxShadow: getBoxShadowString({
+            borderColor: "brightRed",
+            borderWidth: 2,
+          }),
+        },
+        _disabled: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("osloGrey", "whiteAlpha.400")(props),
+            borderWidth: 1,
+          }),
+          _focus: {
+            boxShadow: getBoxShadowString({
+              borderColor: mode("osloGrey", "whiteAlpha.400")(props),
+              borderWidth: 1,
+            }),
+          },
+        },
+      },
       calendar: {
         backgroundColor: mode("white", "night")(props),
         color: mode("darkGrey", "white")(props),
@@ -238,14 +250,55 @@ const config = helpers.defineMultiStyleConfig({
       },
     }),
     floating: (props) => ({
-        calendar: {
-          backgroundColor: mode("white", "night")(props),
-          color: mode("darkGrey", "white")(props),
+      wrapper: {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
+          baseShadow: "sm",
+        }),
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("darkGrey", "white")(props),
+            borderWidth: 2,
+            baseShadow: "sm",
+          }),
+        },
+        _focusWithin: {
           boxShadow: getBoxShadowString({
-            borderColor: mode("grey.200", "whiteAlpha.400")(props),
+            borderColor: mode("greenHaze", "azure")(props),
+            borderWidth: 2,
             baseShadow: "sm",
           }),
         },
+        _invalid: {
+          boxShadow: getBoxShadowString({
+            borderColor: "brightRed",
+            borderWidth: 2,
+            baseShadow: "sm",
+          }),
+        },
+        _disabled: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("osloGrey", "whiteAlpha.400")(props),
+            borderWidth: 1,
+            baseShadow: "sm",
+          }),
+          _focus: {
+            boxShadow: getBoxShadowString({
+              borderColor: mode("osloGrey", "whiteAlpha.400")(props),
+              borderWidth: 1,
+              baseShadow: "sm",
+            }),
+          },
+        },
+      },
+      calendar: {
+        backgroundColor: mode("white", "night")(props),
+        color: mode("darkGrey", "white")(props),
+        boxShadow: getBoxShadowString({
+          borderColor: mode("grey.200", "whiteAlpha.400")(props),
+          baseShadow: "sm",
+        }),
+      },
       dateCell: {
         color: mode("darkGrey", "white")(props),
         _hover: {
@@ -254,13 +307,43 @@ const config = helpers.defineMultiStyleConfig({
       },
     }),
     ghost: (props) => ({
+      wrapper: {
+        boxShadow: "none",
+        _hover: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("darkGrey", "white")(props),
+            borderWidth: 2,
+          }),
+        },
+        _focusWithin: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("greenHaze", "azure")(props),
+            borderWidth: 2,
+          }),
+        },
+        _invalid: {
+          boxShadow: getBoxShadowString({
+            borderColor: "brightRed",
+            borderWidth: 2,
+          }),
+        },
+        _disabled: {
+          boxShadow: getBoxShadowString({
+            borderColor: mode("osloGrey", "whiteAlpha.400")(props),
+            borderWidth: 1,
+          }),
+          _focus: {
+            boxShadow: getBoxShadowString({
+              borderColor: mode("osloGrey", "whiteAlpha.400")(props),
+              borderWidth: 1,
+            }),
+          },
+        },
+      },
       calendar: {
         backgroundColor: mode("white", "night")(props),
         color: mode("darkGrey", "white")(props),
-        boxShadow: getBoxShadowString({
-          borderWidth: 2,
-          borderColor: mode("", "")(props),
-        }),
+        boxShadow: "none",
       },
       dateCell: {
         color: mode("darkGrey", "white")(props),
@@ -268,8 +351,8 @@ const config = helpers.defineMultiStyleConfig({
           backgroundColor: mode("seaMist", "pine")(props),
         },
         _selected: {
-          backgroundColor: mode("", "primaryGreen")(props),
-          color: "darkGrey"
+          backgroundColor: mode("transparent", "primaryGreen")(props),
+          color: "darkGrey",
         },
       },
     }),

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

@@ -1,15 +1,15 @@
 import { anatomy } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { mode } from "@chakra-ui/theme-tools";
-import { getBoxShadowString } from "../utils/box-shadow-utils";
 import { focusVisible } from "../utils/focus-utils";
 import { srOnly } from "../utils/sr-utils";
+import { baseBorder } from "../utils/border-utils";
+import { baseBackground } from "../utils/background-utils";
 
 const parts = anatomy("InfoSelect").parts(
   "container",
   "label",
   "button",
-  "arrowIcon"
+  "arrowIcon",
 );
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
@@ -31,57 +31,44 @@ const config = helpers.defineMultiStyleConfig({
       justifyContent: "space-between",
       alignItems: "center",
       fontSize: "mobile.md",
-      boxShadow: getBoxShadowString({
-        borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
-      }),
+      ...baseBorder("default", props),
       _hover: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("darkGrey", "whiteAlpha.600")(props),
-          borderWidth: 2,
-        }),
+        ...baseBorder("hover", props),
       },
       ...focusVisible({
         focus: {
-          boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
-            borderWidth: 2,
-          }),
+          ...baseBorder("focus", props),
           outline: "none",
         },
         notFocus: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
-          }),
+          ...baseBorder("default", props),
         },
       }),
       _disabled: {
-        boxShadow: getBoxShadowString({ borderColor: "platinum" }),
-        _hover: { boxShadow: getBoxShadowString({ borderColor: "platinum" }) },
-        _focus: { boxShadow: getBoxShadowString({ borderColor: "platinum" }) },
+        color: "whiteAlpha.400",
+        ...baseBackground("disabled", props),
+        _hover: { ...baseBorder("disabled", props) },
+        _focus: { ...baseBorder("disabled", props) },
+      },
+      _active: {
+        ...baseBackground("active", props),
+        ...baseBorder("focus", props),
+      },
+      _expanded: {
+        ...baseBackground("active", props),
+        ...baseBorder("focus", props),
       },
       _invalid: {
-        boxShadow: getBoxShadowString({
-          borderColor: "brightRed",
-          borderWidth: 2,
-        }),
+        ...baseBorder("invalid", props),
         _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: "darkGrey",
-            borderWidth: 2,
-          }),
+          ...baseBorder("hover", props),
         },
         ...focusVisible({
           focus: {
-            boxShadow: getBoxShadowString({
-              borderColor: "greenHaze",
-              borderWidth: 2,
-            }),
+            ...baseBorder("focus", props),
           },
           notFocus: {
-            boxShadow: getBoxShadowString({
-              borderColor: "brightRed",
-              borderWidth: 2,
-            }),
+            ...baseBorder("invalid", props),
           },
         }),
       },

package/src/theme/components/input.ts

@@ -45,13 +45,15 @@ const config = helpers.defineMultiStyleConfig({
           }),
         },
         notFocus: {
-          boxShadow: getBoxShadowString({ borderColor: "darkGrey" }),
+          boxShadow: getBoxShadowString({ borderColor: mode("darkGrey", "white")(props) }),
         },
       }),
       _disabled: {
-        boxShadow: getBoxShadowString({ borderColor: "platinum" }),
-        _hover: { boxShadow: getBoxShadowString({ borderColor: "platinum" }) },
-        _focus: { boxShadow: getBoxShadowString({ borderColor: "platinum" }) },
+        backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+        boxShadow: getBoxShadowString({
+          borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props)
+        }),
+        cursor: "not-allowed",
       },
       _invalid: {
         boxShadow: getBoxShadowString({
@@ -60,7 +62,7 @@ const config = helpers.defineMultiStyleConfig({
         }),
         _hover: {
           boxShadow: getBoxShadowString({
-            borderColor: "darkGrey",
+            borderColor: mode("darkGrey", "white")(props),
             borderWidth: 2,
           }),
         },
@@ -100,6 +102,11 @@ const config = helpers.defineMultiStyleConfig({
     element: {
       height: "100%",
     },
+    group: {
+      ":has(:disabled)": {
+        color: mode("blackAlpha.400", "whiteAlpha.400")(props),
+      },
+    },
   }),
 });
 

package/src/theme/components/list.ts

@@ -1,21 +1,21 @@
 import { listAnatomy as parts } from "@chakra-ui/anatomy";
-import {
-  createMultiStyleConfigHelpers,
-  defineStyle,
-} from "@chakra-ui/styled-system";
+import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
 
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
 
-const baseStyleIcon = defineStyle({
-  marginEnd: "2",
-  display: "inline",
-  verticalAlign: "text-bottom",
-  fontFamily: "body",
-});
-
 const baseStyle = definePartsStyle({
-  icon: baseStyleIcon,
+  container: {
+    fontSize: ["mobile.sm", "desktop.sm"],
+  },
+  item: {
+    fontFamily: "body",
+  },
+  icon: {
+    marginEnd: "2",
+    display: "inline",
+    verticalAlign: "text-bottom",
+  },
 });
 
 export default defineMultiStyleConfig({

package/src/theme/components/listbox.ts

@@ -1,12 +1,14 @@
 import { anatomy } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { mode } from "@chakra-ui/theme-tools";
+import { colors } from "../foundations";
+import { baseBackground } from "../utils/background-utils";
 
 const parts = anatomy("ListBox").parts(
   "container",
   "item",
   "label",
-  "description"
+  "description",
 );
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
@@ -14,7 +16,11 @@ const helpers = createMultiStyleConfigHelpers(parts.keys);
 const config = helpers.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
-      background: mode("white", "darkGrey")(props),
+      // avoiding extra div by blending a transparent color into darkGrey for dark mode
+      backgroundColor: mode(
+        "mint",
+        `color-mix(in srgb, ${colors.darkGrey}, ${colors.white} 10%)`,
+      )(props),
       boxShadow: "sm",
       overflowY: "auto",
       maxHeight: "50vh",
@@ -31,20 +37,20 @@ const config = helpers.defineMultiStyleConfig({
       color: mode("darkGrey", "white")(props),
       cursor: "pointer",
       _hover: {
-        backgroundColor: mode("seaMist", "darkTeal")(props),
+        backgroundColor: mode("seaMist", "pine")(props),
         outline: "none",
       },
       _active: {
-        backgroundColor: mode("mint", "darkTeal")(props),
+        backgroundColor: mode("mint", "pine")(props),
         outline: "none",
       },
       _focus: {
         outline: "none",
-        backgroundColor: mode("seaMist", "darkTeal")(props),
+        backgroundColor: mode("seaMist", "pine")(props),
       },
       _selected: {
-        backgroundColor: mode("pine", "pine")(props),
-        color: mode("white", "white")(props),
+        ...baseBackground("selected", props),
+        color: "white",
       },
     },
     label: {},

package/src/theme/components/select.ts

@@ -1,6 +1,7 @@
-import { selectAnatomy } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { default as Input } from "./input";
+import {selectAnatomy} from "@chakra-ui/anatomy";
+import {createMultiStyleConfigHelpers} from "@chakra-ui/react";
+import {default as Input} from "./input";
+import {mode} from "@chakra-ui/theme-tools";
 
 const parts = selectAnatomy.extend("root");
 
@@ -43,7 +44,7 @@ const config = helpers.defineMultiStyleConfig({
       strokeLinecap: "round",
       fontSize: "1.125rem",
       _disabled: {
-        opacity: 0.5,
+        color: mode("blackAlpha.400", "whiteAlpha.400")(props),
       },
     },
   }),

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

@@ -0,0 +1,28 @@
+import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
+
+type State =
+  | "default"
+  | "hover"
+  | "active"
+  | "focus"
+  | "selected"
+  | "invalid"
+  | "disabled";
+export function baseBackground(state: State, props: StyleFunctionProps) {
+  switch (state) {
+    case "active":
+      return {
+        backgroundColor: mode("mint", "whiteAlpha.100")(props),
+      };
+    case "selected":
+      return {
+        backgroundColor: "pine",
+      };
+    case "disabled":
+      return {
+        backgroundColor: mode("silver", "whiteAlpha.100")(props),
+      };
+    default:
+      return {};
+  }
+}

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

@@ -0,0 +1,59 @@
+import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
+import { getBoxShadowString } from "./box-shadow-utils";
+
+type State =
+  | "default"
+  | "hover"
+  | "active"
+  | "focus"
+  | "selected"
+  | "invalid"
+  | "disabled";
+
+export function baseBorder(state: State, props: StyleFunctionProps) {
+  switch (state) {
+    case "hover":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("darkGrey", "white")(props),
+          borderWidth: 2,
+        }),
+      };
+    case "focus": {
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props),
+          borderWidth: 2,
+        }),
+      };
+    }
+    case "disabled": {
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("platinum", "whiteAlpha.400")(props),
+        }),
+      };
+    }
+    case "selected":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props),
+        }),
+      };
+    case "invalid": {
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: "brightRed",
+          borderWidth: 2,
+        }),
+      };
+    }
+    case "default":
+    default:
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
+        }),
+      };
+  }
+}