@vygruppen/spor-react 9.8.2 → 9.9.0

package/src/input/InfoSelect.tsx

@@ -1,6 +1,8 @@
 import {
   Box,
   chakra,
+  Flex,
+  FormLabel,
   ResponsiveValue,
   useFormControlProps,
   useMultiStyleConfig,
@@ -11,7 +13,7 @@ import {
 } from "@vygruppen/spor-icon-react";
 import React, { useRef } from "react";
 import { HiddenSelect, useButton, useSelect } from "react-aria";
-import { useSelectState } from "react-stately";
+import { Column, useSelectState } from "react-stately";
 import { createTexts, useTranslation } from "../";
 import { ListBox } from "./ListBox";
 import { Popover } from "./Popover";
@@ -152,13 +154,11 @@ type InfoSelectProps<T extends object> = {
  */
 export function InfoSelect<T extends object>({
   placeholder,
-  width = "100%",
-  height = "auto",
   onChange,
   value,
   isLabelSrOnly,
   defaultValue,
-  variant = "base",
+  variant,
   ...props
 }: InfoSelectProps<T>) {
   const renamedProps = {
@@ -188,11 +188,10 @@ export function InfoSelect<T extends object>({
   const { t } = useTranslation();
   const formControl = useFormControlProps(props);
 
+  const hasChosenValue = state.selectedItem !== null;
+
   return (
     <Box sx={styles.container}>
-      <chakra.div {...labelProps} sx={styles.label}>
-        {props.label}
-      </chakra.div>
       <HiddenSelect
         state={state}
         triggerRef={triggerRef}
@@ -205,17 +204,37 @@ export function InfoSelect<T extends object>({
         ref={triggerRef}
         sx={styles.button}
         {...buttonProps}
-        width={width}
-        height={height}
         data-attachable
         aria-invalid={formControl.isInvalid}
         aria-describedby={formControl["aria-describedby"]}
       >
-        <Box {...valueProps}>
-          {state.selectedItem
-            ? state.selectedItem.textValue ?? state.selectedItem.rendered
-            : placeholder ?? t(texts.selectAnOption)}
-        </Box>
+        <chakra.div sx={styles.innerButton}>
+          <chakra.div
+            {...labelProps}
+            sx={{
+              ...styles.label,
+              ...(hasChosenValue && {
+                transform: "scale(0.825) translateY(-10px) translateX(-10%)",
+                transitionProperty: "var(--spor-transition-property-common)",
+                transitionDuration: "var(--spor-transition-duration-normal)",
+              }),
+            }}
+          >
+            {props.label}
+          </chakra.div>
+          <Box
+            {...valueProps}
+            h={!hasChosenValue ? "0px" : "18px"}
+            hidden={!hasChosenValue}
+            transform={"scale(1) translateY(-10px)"}
+            transitionProperty={"var(--spor-transition-property-common)"}
+            transitionDuration={"var(--spor-transition-duration-normal)"}
+          >
+            {state.selectedItem
+              ? state.selectedItem.textValue ?? state.selectedItem.rendered
+              : placeholder ?? t(texts.selectAnOption)}
+          </Box>
+        </chakra.div>
         <Box sx={styles.arrowIcon}>
           {state.isOpen ? <DropdownUpFill24Icon /> : <DropdownDownFill24Icon />}
         </Box>

package/src/input/ListBox.tsx

@@ -185,6 +185,7 @@ const OptionContext = React.createContext<OptionContextValue>({
   labelProps: {},
   descriptionProps: {},
 });
+
 const useOptionContext = () => {
   return useContext(OptionContext);
 };

package/src/layout/PressableCard.tsx

@@ -9,7 +9,7 @@ import {
 
 type PressableCardProps = BoxProps & {
   /** Defaults to "base"  */
-  variant: "floating" | "accent" | "base";
+  variant?: "floating" | "accent" | "base";
 };
 
 /**
@@ -43,7 +43,7 @@ type PressableCardProps = BoxProps & {
  */
 
 export const PressableCard = forwardRef<PressableCardProps, As>(
-  ({ children, variant = "base", ...props }, ref) => {
+  ({ children, variant = "floating", ...props }, ref) => {
     const styles = useStyleConfig("PressableCard", {
       variant,
     });

package/src/layout/RadioCard.tsx

@@ -9,7 +9,7 @@ import {
 import { dataAttr } from "@chakra-ui/utils";
 import React, { useId } from "react";
 
-type RadioCardProps = UseRadioProps &
+export type RadioCardProps = UseRadioProps &
   BoxProps & {
     children: React.ReactNode;
     /** Defaults to "base" */

package/src/layout/RadioCardGroup.tsx

@@ -5,6 +5,7 @@ import {
   Stack,
 } from "@chakra-ui/react";
 import React, { Children } from "react";
+import { RadioCard, RadioCardProps } from "./RadioCard";
 
 type RadioCardGroupProps = RadioGroupProps & {
   children: React.ReactNode;
@@ -78,13 +79,38 @@ export const RadioCardGroup = ({
 
   return (
     <Stack direction={direction} {...group}>
-      {Children.map(
-        children as React.ReactElement[],
-        (child: React.ReactElement) => {
+      {recursiveMap(children, (child: React.ReactElement) => {
+        if (child.type === RadioCard) {
           const radio = getRadioProps({ value: child.props.value });
-          return React.cloneElement(child, { ...radio, variant, ...props });
-        },
-      )}
+          const variantValue = variant as "base" | "floating" | undefined;
+          return React.cloneElement(
+            child as React.ReactElement<RadioCardProps>,
+            { ...radio, variant: variantValue, ...props },
+          );
+        }
+        return child;
+      })}
     </Stack>
   );
 };
+
+function recursiveMap(
+  children: React.ReactNode,
+  fn: (child: React.ReactElement) => React.ReactElement,
+): React.ReactNode {
+  return React.Children.map(children, (child) => {
+    // If this child is a React element and has children, recurse
+    if (React.isValidElement(child) && child.props.children) {
+      child = React.cloneElement(child as React.ReactElement<any>, {
+        children: recursiveMap(child.props.children, fn),
+      });
+    }
+
+    // Apply the function to the child (if it's a React element)
+    if (React.isValidElement(child)) {
+      return fn(child);
+    }
+
+    return child;
+  });
+}

package/src/layout/StaticCard.tsx

@@ -70,7 +70,6 @@ export const StaticCard = forwardRef<StaticCardProps, As>(
     return (
       <Box __css={styles} {...props} ref={ref}>
         {children}
-        <Card />
       </Box>
     );
   },

package/src/theme/components/alert.ts

@@ -22,6 +22,7 @@ const config = helpers.defineMultiStyleConfig({
       position: "absolute",
       top: 1,
       right: 1,
+      color: "darkGrey",
     },
   },
   variants: {

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

@@ -19,18 +19,28 @@ const config = helpers.defineMultiStyleConfig({
     container: {},
     label: {
       position: "relative",
+      fontSize: ["mobile.xs", "desktop.sm"],
       ...(props.isLabelSrOnly ? srOnly : {}),
     },
+    innerButton: {
+      display: "flex",
+      flexDir: "column",
+      alignItems: "start",
+      justifyContent: "start",
+    },
     button: {
+      display: "flex",
       appearance: "none",
+      width: "100%",
+      height: "54px",
       borderTopRadius: "sm",
       borderBottomRadius: props.isOpen ? 0 : "sm",
       paddingY: 1.5,
       paddingX: 3,
-      display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
       fontSize: "mobile.md",
+      h: 8,
       ...baseBorder("default", props),
       _hover: {
         ...baseBorder("hover", props),
@@ -48,6 +58,7 @@ const config = helpers.defineMultiStyleConfig({
         ...baseBorder("invalid", props),
       },
     },
+    placeholder: {},
     arrowIcon: {},
   }),
   variants: {

package/src/theme/components/listbox.ts

@@ -2,7 +2,7 @@ import { anatomy } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { mode } from "@chakra-ui/theme-tools";
 import { baseBorder } from "../utils/base-utils";
-import { ghostBackground } from "../utils/ghost-utils";
+import { ghostBackground, ghostText } from "../utils/ghost-utils";
 import { surface } from "../utils/surface-utils";
 
 const parts = anatomy("ListBox").parts(
@@ -32,7 +32,7 @@ const config = helpers.defineMultiStyleConfig({
       marginY: 1,
       marginX: 1,
       borderRadius: "sm",
-      color: mode("darkGrey", "white")(props),
+      ...ghostText("default", props),
       cursor: "pointer",
       outline: "none",
       _active: {
@@ -45,15 +45,15 @@ const config = helpers.defineMultiStyleConfig({
         ...ghostBackground("selected", props),
       },
       _selected: {
-        ...ghostBackground("selected", props),
+        ...ghostBackground("active", props),
       },
     },
     label: {},
     description: {
       fontSize: ["mobile.xs", "desktop.xs"],
-      color: mode("dimGrey", "silver")(props),
+      ...ghostText("default", props),
       "[aria-selected='true'] &": {
-        color: mode("lightGrey", "platinum")(props),
+        ...ghostText("selected", props),
       },
     },
   }),

package/src/theme/components/pressable-card.ts

@@ -13,9 +13,14 @@ const config = defineStyleConfig({
     display: "block",
     borderRadius: "md",
     cursor: "pointer",
-    ...focusVisibleStyles(props),
+    transitionProperty: "common",
+    transitionDuration: "fast",
+    "button&, a&, label&, &.is-clickable": {
+      ...focusVisibleStyles(props),
+    },
     _disabled: {
       ...baseBackground("disabled", props),
+      ...baseBorder("disabled", props),
       ...baseText("disabled", props),
       outline: "none",
       pointerEvents: "none",

package/src/theme/components/table.ts

@@ -17,12 +17,10 @@ const config = helpers.defineMultiStyleConfig({
       borderCollapse: "collapse",
       ...baseText("default", props),
       width: "100%",
-      minWidth: "600px",
     },
     th: {
       fontWeight: "bold",
       textAlign: "start",
-      minWidth: "68px",
     },
     td: {
       textAlign: "start",

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

@@ -25,14 +25,14 @@ export function floatingBackground(
       return {
         backgroundColor: mode(
           "floating.surface.hover.light",
-          "floating.surface.hover.dark",
+          `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`,
         )(props),
       };
     case "default":
       return {
         backgroundColor: mode(
-          "floating.surface.default.light",
-          "floating.surface.default.dark",
+          "white",
+          `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`,
         )(props),
       };
   }

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

@@ -29,7 +29,10 @@ export function ghostBackground(
       };
     case "selected": {
       return {
-        backgroundColor: mode("mint", "whiteAlpha.200")(props),
+        backgroundColor: mode(
+          "ghost.surface.selected.light",
+          "ghost.surface.selected.dark",
+        )(props),
       };
     }
     case "default":
@@ -38,3 +41,18 @@ export function ghostBackground(
       };
   }
 }
+
+type GhostTextState = Subset<State, "default" | "selected">;
+
+export function ghostText(state: GhostTextState, props: StyleFunctionProps) {
+  switch (state) {
+    case "selected":
+      return {
+        color: mode("ghost.text.light", "ghost.text.dark")(props),
+      };
+    default:
+      return {
+        color: mode("ghost.text.light", "ghost.text.dark")(props),
+      };
+  }
+}