@vygruppen/spor-react 9.2.1 → 9.4.0

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-EVOFJL5T.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-JRXSGTL2.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "9.2.1",
+  "version": "9.4.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/alert/AlertIcon.tsx

@@ -11,7 +11,7 @@ import { BaseAlertProps } from "./BaseAlert";
 
 type AlertIconProps = { variant: BaseAlertProps["variant"] };
 /**
- * Internal component that shows the correct icon for the alert.
+ * Internal component that shows the correct icon for the alert
  */
 export const AlertIcon = ({ variant }: AlertIconProps) => {
   const Icon = getIcon(variant);

package/src/card/StaticCard.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Box, useStyleConfig } from "@chakra-ui/react";
+/**
+ * Renders a static card.
+ *
+ * The most basic version looks like this:
+ *
+ * ```tsx
+ * <StaticCard colorScheme="white">
+ *   Content
+ * </StaticCard>
+ * ```
+ *
+ * Static cards can also be rendered as whatever DOM element you want – like a li (list item) or an article. You do this by specifying the `as` prop:
+ *
+ * ```tsx
+ * <StaticCard colorScheme="green" as="section">
+ *   This is now a <section /> element
+ * </StaticCard>
+ * ```
+ */
+export const StaticCard = ({ colorScheme, ...props }: any) => {
+  const styles = useStyleConfig("StaticCard", { colorScheme });
+  return <Box __css={styles} {...props} />;
+};

package/src/card/index.tsx

@@ -1 +1,2 @@
 export * from "./Card";
+export * from "./StaticCard";

package/src/input/CardSelect.tsx

@@ -4,6 +4,7 @@ import {
   chakra,
   Flex,
   forwardRef,
+  ResponsiveValue,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
 import {
@@ -43,7 +44,18 @@ type CardSelectProps = BoxProps & {
   placement?: AriaPositionProps["placement"];
   /** Whether or not to show the chevron. Defaults to true */
   withChevron?: boolean;
-} & ({ label: string } | { "aria-label": string });
+  /** Defaults to normal */
+  fontWeight?: ResponsiveValue<"normal" | "bold">;
+} & (
+    | {
+        /** The text label of the trigger button */
+        label: string;
+      }
+    | {
+        /** Accessible label for the trigger button */
+        "aria-label": string;
+      }
+  );
 
 /**
  * A card select component.
@@ -73,6 +85,7 @@ export const CardSelect = forwardRef<CardSelectProps, "button">(
       crossOffset = 0,
       placement = "bottom",
       withChevron = true,
+      fontWeight = "normal",
       ...props
     },
     externalRef,
@@ -109,6 +122,7 @@ export const CardSelect = forwardRef<CardSelectProps, "button">(
         <chakra.button
           type="button"
           ref={triggerRef}
+          fontWeight="bold"
           sx={styles.trigger}
           aria-label={label}
           {...buttonProps}

package/src/input/Combobox.tsx

@@ -4,6 +4,29 @@ import { useComboBoxState } from "react-stately";
 import { ColorSpinner, Input, InputProps, ListBox } from "..";
 import { Popover } from "./Popover";
 
+type OverridableInputProps = Pick<
+  InputProps,
+  | "marginTop"
+  | "marginBottom"
+  | "marginRight"
+  | "marginLeft"
+  | "marginY"
+  | "marginX"
+  | "paddingTop"
+  | "paddingBottom"
+  | "paddingLeft"
+  | "paddingRight"
+  | "paddingY"
+  | "paddingX"
+  | "leftIcon"
+  | "rightIcon"
+  | "borderTopRightRadius"
+  | "borderTopLeftRadius"
+  | "borderBottomRightRadius"
+  | "borderBottomLeftRadius"
+  | "onFocus"
+>;
+
 export type ComboboxProps<T> = AriaComboBoxProps<T> & {
   /** The label of the combobox */
   label: string;
@@ -15,28 +38,7 @@ export type ComboboxProps<T> = AriaComboBoxProps<T> & {
   inputRef?: React.RefObject<HTMLInputElement>;
   /** If you want to allow an empty collection */
   allowsEmptyCollection?: boolean;
-} & Pick<
-    InputProps,
-    | "marginTop"
-    | "marginBottom"
-    | "marginRight"
-    | "marginLeft"
-    | "marginY"
-    | "marginX"
-    | "paddingTop"
-    | "paddingBottom"
-    | "paddingLeft"
-    | "paddingRight"
-    | "paddingY"
-    | "paddingX"
-    | "leftIcon"
-    | "rightIcon"
-    | "borderTopRightRadius"
-    | "borderTopLeftRadius"
-    | "borderBottomRightRadius"
-    | "borderBottomLeftRadius"
-    | "onFocus"
-  >;
+} & OverridableInputProps;
 /**
  * A combobox is a combination of an input and a list of suggestions.
  *
@@ -60,6 +62,7 @@ export type ComboboxProps<T> = AriaComboBoxProps<T> & {
  * </Combobox>
  * ```
  */
+
 export function Combobox<T extends object>({
   label,
   isLoading,
@@ -103,6 +106,24 @@ export function Combobox<T extends object>({
     ...rest,
   });
 
+  const comboBoxProps: OverridableInputProps = {
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    marginBottom,
+    marginTop,
+    marginRight,
+    marginLeft,
+    marginX,
+    marginY,
+    paddingBottom,
+    paddingRight,
+    paddingTop,
+    paddingLeft,
+    paddingX,
+    paddingY,
+    leftIcon,
+  };
+
   const {
     inputProps: { size, ...inputProps },
     listBoxProps,
@@ -119,7 +140,7 @@ export function Combobox<T extends object>({
   return (
     <>
       <Input
-        {...inputProps}
+        {...styleProps(comboBoxProps)}
         aria-haspopup="listbox"
         ref={inputRef}
         label={label}
@@ -129,21 +150,7 @@ export function Combobox<T extends object>({
         borderBottomRightRadius={
           state.isOpen && !isLoading ? 0 : borderBottomRightRadius
         }
-        borderTopLeftRadius={borderTopLeftRadius}
-        borderTopRightRadius={borderTopRightRadius}
-        marginBottom={marginBottom}
-        marginTop={marginTop}
-        marginRight={marginRight}
-        marginLeft={marginLeft}
-        marginX={marginX}
-        marginY={marginY}
-        paddingBottom={paddingBottom}
-        paddingRight={paddingRight}
-        paddingTop={paddingTop}
-        paddingLeft={paddingLeft}
-        paddingX={paddingX}
-        paddingY={paddingY}
-        leftIcon={leftIcon}
+        {...inputProps}
         rightIcon={
           isLoading ? (
             <ColorSpinner
@@ -162,6 +169,7 @@ export function Combobox<T extends object>({
           )
         }
       />
+
       {state.isOpen && !isLoading && (
         <Popover
           state={state}
@@ -204,6 +212,12 @@ const useInputWidth = (inputRef: React.RefObject<HTMLInputElement>) => {
   return inputWidth;
 };
 
+function styleProps(obj: Record<string, unknown>): Record<string, unknown> {
+  return Object.fromEntries(
+    Object.entries(obj).filter(([, value]) => value !== undefined),
+  );
+}
+
 const debounce = (fn: () => void, ms = 100) => {
   let timer: any;
   return () => {

package/src/modal/FullScreenDrawer.tsx

@@ -0,0 +1,179 @@
+import {
+  Box,
+  DrawerBody,
+  DrawerContent,
+  DrawerHeader,
+  DrawerOverlay,
+  Flex,
+  useColorModeValue,
+  useMediaQuery,
+  useModalContext,
+} from "@chakra-ui/react";
+import tokens from "@vygruppen/spor-design-tokens";
+import { CloseFill24Icon, CloseFill30Icon } from "@vygruppen/spor-icon-react";
+import React, { useEffect, useState } from "react";
+import { Button, IconButton } from "../button";
+import { createTexts, useTranslation } from "../i18n";
+import { Drawer } from "./Drawer";
+
+type DrawerPlacement = "top" | "right" | "bottom" | "left";
+
+type FullScreenDrawerProps = {
+  /** The content inside the drawer */
+  children: React.ReactNode;
+  /** The title in the middle of the top menu */
+  title?: String;
+  /** Determines which side the drawer slides from */
+  placement?: DrawerPlacement;
+  /** A React component that will be placed to the left in the modal header */
+  leftButton?: React.ReactNode;
+  /** A React component that will be placed to the right in the modal header */
+  rightButton?: React.ReactNode;
+  /** Determines if the drawer is open or closed */
+  isOpen: boolean;
+  /** Function that will be called when the drawer closes */
+  onClose: () => void;
+};
+
+export const FullScreenDrawer = ({
+  children,
+  title,
+  placement = "bottom",
+  leftButton = null,
+  rightButton = <DrawerCloseButton />,
+  isOpen,
+  onClose,
+}: FullScreenDrawerProps) => {
+  const [isContentBoxScrolled, setContentBoxScrolled] = useState(false);
+
+  const onContentScroll = (e: React.UIEvent<HTMLDivElement, UIEvent>) => {
+    const target = e.target as HTMLDivElement;
+
+    if (target.scrollTop <= 0) {
+      setContentBoxScrolled(false);
+      return;
+    }
+    setContentBoxScrolled(true);
+  };
+
+  useEffect(() => {
+    setContentBoxScrolled(false);
+  }, [isOpen]);
+
+  return (
+    <Drawer isOpen={isOpen} onClose={onClose} placement={placement} size="full">
+      <DrawerOverlay />
+      <DrawerContent
+        height="100vh"
+        backgroundSize="100% 285px, 100%"
+        backgroundPosition="top"
+        backgroundRepeat="no-repeat"
+      >
+        <DrawerTopMenu
+          isScrolled={isContentBoxScrolled}
+          title={title}
+          leftButton={leftButton}
+          rightButton={rightButton}
+        />
+        <DrawerBody overflow="auto" onScroll={onContentScroll}>
+          {children}
+        </DrawerBody>
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+type DrawerTopMenuProps = {
+  /** Optional title */
+  title?: String;
+  leftButton?: React.ReactNode;
+  rightButton?: React.ReactNode;
+  /** Whether or not the context this menu is placed in is scrolled */
+  isScrolled: boolean;
+};
+
+const DrawerTopMenu = ({
+  title,
+  leftButton,
+  rightButton,
+  isScrolled,
+}: DrawerTopMenuProps) => {
+  const backgroundColor = useColorModeValue(
+    "bg.default.light",
+    "bg.default.dark",
+  );
+
+  return (
+    <Flex
+      width="100%"
+      backgroundColor={backgroundColor}
+      position="static"
+      paddingTop={[1.5, 2.5, 3, 3]}
+      paddingBottom={[1.5, 2.5, 3, 3]}
+      paddingLeft={[2, 3, 6, 9]}
+      paddingRight={[2, 3, 6, 9]}
+      transition="box-shadow 0.2s"
+      boxShadow={isScrolled ? "md" : undefined}
+    >
+      <Box flex="1">{leftButton}</Box>
+      <DrawerHeader
+        as="h2"
+        fontSize="md"
+        fontWeight="bold"
+        textAlign="center"
+        flex="1"
+        margin={0}
+        padding={0}
+      >
+        {title}
+      </DrawerHeader>
+      <Box flex="1">
+        <Box width="fit-content" marginLeft="auto">
+          {rightButton}
+        </Box>
+      </Box>
+    </Flex>
+  );
+};
+
+const DrawerCloseButton = () => {
+  const { onClose } = useModalContext();
+  const { t } = useTranslation();
+
+  const [isScreenSizeMinSm] = useMediaQuery(
+    `(min-width: ${tokens.size.breakpoint.sm})`,
+  );
+
+  if (isScreenSizeMinSm) {
+    return (
+      <Button
+        variant="ghost"
+        leftIcon={<CloseFill24Icon />}
+        onClick={onClose}
+        aria-label={t(texts.close)}
+        width="fit-content"
+        marginLeft="auto"
+      >
+        {t(texts.close)}
+      </Button>
+    );
+  }
+
+  return (
+    <IconButton
+      variant="ghost"
+      icon={<CloseFill30Icon />}
+      onClick={onClose}
+      aria-label={t(texts.close)}
+    />
+  );
+};
+
+const texts = createTexts({
+  close: {
+    nb: "Lukk",
+    nn: "Lukk",
+    en: "Close",
+    sv: "Stäng",
+  },
+});

package/src/modal/index.tsx

@@ -1,4 +1,5 @@
 export * from "./Drawer";
+export * from "./FullScreenDrawer";
 export * from "./Modal";
 export * from "./ModalHeader";
 export * from "./SimpleDrawer";

package/src/theme/components/button.ts

@@ -57,7 +57,7 @@ const config = defineStyleConfig({
         ...baseBorder("hover", props),
       },
       _active: {
-        ...baseBorder("default", props), // We want a
+        ...baseBorder("default", props),
         ...baseBackground("active", props),
       },
     }),

package/src/theme/components/choice-chip.ts

@@ -64,13 +64,11 @@ const config = helpers.defineMultiStyleConfig({
   variants: {
     base: (props) => ({
       container: {
-        ...baseBackground("default", props),
         ...baseBorder("default", props),
         ...baseText("default", props),
         _hover: {
           ...baseText("default", props),
           ...baseBorder("hover", props),
-          ...baseBackground("hover", props),
         },
         _active: {
           ...baseBackground("active", props),

package/src/theme/components/datepicker.ts

@@ -4,7 +4,7 @@ import { zIndices } from "../foundations";
 import { accentText } from "../utils/accent-utils";
 import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
 import { brandBackground, brandText } from "../utils/brand-utils";
-import { floatingBorder } from "../utils/floating-utils";
+import { floatingBorder, floatingBackground } from "../utils/floating-utils";
 import { focusVisibleStyles } from "../utils/focus-utils";
 import { ghostBackground } from "../utils/ghost-utils";
 import { surface } from "../utils/surface-utils";
@@ -159,6 +159,7 @@ const config = helpers.defineMultiStyleConfig({
     }),
     floating: (props) => ({
       wrapper: {
+        ...floatingBackground("default", props),
         ...floatingBorder("default", props),
         boxShadow: "sm",
 

package/src/theme/components/index.ts

@@ -38,4 +38,5 @@ export { default as Table } from "./table";
 export { default as Tabs } from "./tabs";
 export { default as Textarea } from "./textarea";
 export { default as Toast } from "./toast";
+export { default as StaticCard } from "./static-card";
 export { default as TravelTag } from "./travel-tag";

package/src/theme/components/input.ts

@@ -13,7 +13,6 @@ const config = helpers.defineMultiStyleConfig({
       width: "100%",
       outline: "none",
       border: 0,
-      ...baseBackground("default", props),
       borderRadius: "sm",
       transitionProperty: "common",
       transitionDuration: "fast",
@@ -21,6 +20,7 @@ const config = helpers.defineMultiStyleConfig({
       paddingX: 3,
       height: "54px",
       fontSize: "mobile.md",
+      ...baseBackground("default", props),
 
       ...baseBorder("default", props),
       _hover: {

package/src/theme/components/numeric-stepper.ts

@@ -28,8 +28,8 @@ const config = helpers.defineMultiStyleConfig({
       textAlign: "center",
       transitionProperty: "common",
       transitionDuration: "fast",
-      ...baseBackground("default", props),
       ...baseText("default", props),
+      ...baseBackground("default", props),
 
       _disabled: {
         pointerEvents: "none",

package/src/theme/components/select.ts

@@ -31,9 +31,7 @@ const config = helpers.defineMultiStyleConfig({
       ...Input.baseStyle!(props).field,
       appearance: "none",
       paddingTop: "16px",
-      "option, optgroup": {
-        background: "white",
-      },
+      "option, optgroup": {},
     },
     icon: {
       width: "30px",

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

@@ -0,0 +1,66 @@
+import { defineStyleConfig } from "@chakra-ui/react";
+import { mode } from "@chakra-ui/theme-tools";
+import { colors } from "../foundations";
+import { baseBorder } from "../utils/base-utils";
+
+const config = defineStyleConfig({
+  baseStyle: (props: any) => ({
+    appearance: "none",
+    border: "none",
+    overflow: "hidden",
+    fontSize: "inherit",
+    display: "block",
+    borderRadius: "md",
+    // Except for white cards, all cards are light mode always
+    color: "text.default.light",
+    ...getColorSchemeBaseProps(props),
+  }),
+});
+
+export default config;
+
+type CardThemeProps = {
+  colorScheme:
+    | "white"
+    | "grey"
+    | "blue"
+    | "green"
+    | "teal"
+    | "yellow"
+    | "orange"
+    | "red";
+  theme: any;
+  colorMode: "light" | "dark";
+};
+
+const getColorSchemeBaseProps = (props: CardThemeProps) => {
+  switch (props.colorScheme) {
+    case "white":
+      return {
+        ...baseBorder("default", props),
+        backgroundColor: mode(
+          "white",
+          `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`,
+        )(props),
+        color: "inherit",
+      };
+    case "grey":
+      return {
+        backgroundColor: "lightGrey",
+      };
+    case "green": {
+      return {
+        backgroundColor: "seaMist",
+      };
+    }
+    case "red": {
+      return {
+        backgroundColor: "pink",
+      };
+    }
+    default:
+      return {
+        backgroundColor: colors[props.colorScheme]?.[100] ?? "platinum",
+      };
+  }
+};

package/src/theme/components/switch.ts

@@ -27,12 +27,11 @@ const config = helpers.defineMultiStyleConfig({
       height: [$height.reference],
       transitionProperty: "common",
       transitionDuration: "fast",
-      ...baseBackground("default", props),
       ...baseBorder("default", props),
       ...focusVisibleStyles(props),
+      ...baseBackground("default", props),
 
       _hover: {
-        ...baseBackground("hover", props),
         ...baseBorder("hover", props),
       },
       _checked: {
@@ -40,6 +39,7 @@ const config = helpers.defineMultiStyleConfig({
         outlineColor: "transparent",
 
         _hover: {
+          ...baseBackground("default", props),
           ...brandBackground("hover", props),
         },
       },

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

@@ -26,7 +26,7 @@ export function baseBackground(
       return surface("disabled", props);
     case "hover":
     default:
-      return surface("default", props);
+      return { backgroundColor: "transparent" };
   }
 }