@vygruppen/spor-react 7.2.2 → 8.0.1

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, 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, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, 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, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, 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-PPXTF3R3.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, 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-5VZ5S46A.mjs';

package/package.json

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

package/src/accordion/Accordion.tsx

@@ -22,20 +22,20 @@ export type AccordionProps = Omit<ChakraAccordionProps, "variant" | "size"> & {
   /**
    * The display variant of the accordion items.
    *
-   * - `list` renders a pretty unstyled expandable list without any borders
-   * - `outline` renders an outlined version
-   * - `card` renders a version with a drop shadow
+   * - `ghost` renders a pretty unstyled expandable list without any borders
+   * - `base` renders an outlined version
+   * - `floating` renders a version with a drop shadow
    */
-  variant?: "list" | "outline" | "card";
+  variant?: "ghost" | "base" | "floating";
   size?: "sm" | "md" | "lg";
   /** The margin between accordion items */
   spacing?: StackProps["spacing"];
 };
-/**
+/*
  * Wraps a set of ExpandableItem or AccordionItem components.
  *
  * ```tsx
- * <Accordion variant="list" size="md">
+ * <Accordion variant="ghost" size="md">
  *   <ExpandableItem title="Is Spor easy?" headingLevel="h3">
  *     Yes
  *   </ExpandableItem>

package/src/accordion/Expandable.tsx

@@ -36,7 +36,7 @@ type ExpandableProps = Omit<AccordionProps, "title"> & {
  * If you want several expandables in a row, use the `Accordion` and `ExpandableItem` components instead.
  *
  * ```tsx
- * <Expandable title="Click for more" variant="card" size="lg">
+ * <Expandable title="Click for more" variant="base" size="lg">
  *   <Text>MORE! 🎉</Text>
  * </Expandable>
  * ```
@@ -80,7 +80,7 @@ export type ExpandableItemProps = Omit<AccordionItemProps, "title"> & {
  * An item in a set of Expandables. Must be wrapped in an `<Accordion>` component.
  *
  * ```tsx
- * <Accordion variant="list" size="md">
+ * <Accordion variant="ghost" size="md">
  *  <ExpandableItem title="Is Spor easy?" headingLevel="h3">
  *    Yes
  *  </ExpandableItem>

package/src/datepicker/DatePicker.tsx

@@ -116,6 +116,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
             isOpen={state.isOpen}
             onOpen={state.open}
             onClose={state.close}
+            flip={false}
           >
             <InputGroup {...groupProps} display="inline-flex">
               <PopoverAnchor>

package/src/index.tsx

@@ -16,7 +16,7 @@ export * from "./loader";
 export * from "./logo";
 export * from "./media-controller";
 export * from "./modal";
-export * from "./popover";
+export * from "./nudge";
 export * from "./progress-indicator";
 export * from "./provider";
 export * from "./stepper";
@@ -24,6 +24,7 @@ export * from "./tab";
 export * from "./table";
 export * from "./theme";
 export * from "./toast";
+export * from "./tooltip";
 export * from "./transition";
 export * from "./typography";
 export * from "./util";

package/src/input/ChoiceChip.tsx

@@ -11,6 +11,7 @@ import React, { ChangeEvent, useId } from "react";
 export type ChoiceChipProps = {
   onChange?: (value: ChangeEvent<HTMLInputElement>) => void;
   isChecked?: boolean;
+  isDisabled?: boolean;
   defaultChecked?: boolean;
   /** The button text */
   children: React.ReactNode;
@@ -19,7 +20,8 @@ export type ChoiceChipProps = {
     checked: React.ReactNode;
   };
   size?: "sm" | "md" | "lg" | "xl";
-  variant?: "icon" | "choice" | "filter";
+  chipType?: "icon" | "choice" | "filter";
+  variant?: "base" | "accent" | "floating";
 };
 /**
  * Choice chips are checkboxes that look like selectable buttons.
@@ -33,26 +35,34 @@ export type ChoiceChipProps = {
  * </Stack>
  * ```
  *
- * There are also three different variants - `icon`, `choice` and `filter`.
+ * There are also three different chipType - `icon`, `choice` and `filter`.
  *
  * ```tsx
  * <Stack flexDirection="row">
- *  <ChoiceChip variant="icon" icon={<Bus24Icon />}>Bus</ChoiceChip>
- *  <ChoiceChip variant="choice" icon={<Bus24Icon />}>Bus</ChoiceChip>
- *  <ChoiceChip variant="filter" icon={<Bus24Icon />}>Bus</ChoiceChip>
+ *  <ChoiceChip chipType="icon" icon={<Bus24Icon />}>Bus</ChoiceChip>
+ *  <ChoiceChip chipType="choice" icon={<Bus24Icon />}>Bus</ChoiceChip>
+ *  <ChoiceChip chipType="filter" icon={<Bus24Icon />}>Bus</ChoiceChip>
  * </Stack>
  *
- * You can add an icon as well, if you want to!
+ * There are also three different variants - `base`, `accent` and `floating`.
  *
  * ```tsx
  * <Stack flexDirection="row">
- *   <ChoiceChip size="md" icon={<BusIcon />}>Bus</ChoiceChip>
- *   <ChoiceChip size="lg" icon={<TrainIcon />}>Train</ChoiceChip>
+ *   <ChoiceChip variant="base">Bus</ChoiceChip>
+ *   <ChoiceChip variant="accent">Boat</ChoiceChip>
+ *   <ChoiceChip variant="floating">Train</ChoiceChip>
  * </Stack>
  * ```
  */
 export const ChoiceChip = forwardRef((props: ChoiceChipProps, ref) => {
-  const { children, icon, size = "md", variant = "choice" } = props;
+  const {
+    children,
+    icon,
+    isDisabled,
+    size = "md",
+    chipType = "choice",
+    variant = "base",
+  } = props;
 
   const {
     state,
@@ -63,6 +73,7 @@ export const ChoiceChip = forwardRef((props: ChoiceChipProps, ref) => {
   } = useCheckbox(props);
   const styles = useMultiStyleConfig("ChoiceChip", {
     size,
+    chipType,
     variant,
     icon,
     hasLabel: Boolean(children),
@@ -76,7 +87,7 @@ export const ChoiceChip = forwardRef((props: ChoiceChipProps, ref) => {
       {...getRootProps()}
       aria-label={String(children)}
     >
-      <chakra.input {...getInputProps({}, ref)} id={id} />
+      <chakra.input {...getInputProps({}, ref)} id={id} disabled={isDisabled} />
       <chakra.div
         {...getLabelProps()}
         __css={styles.container}
@@ -93,9 +104,9 @@ export const ChoiceChip = forwardRef((props: ChoiceChipProps, ref) => {
         )}
 
         <chakra.span __css={styles.label} {...getCheckboxProps()}>
-          {variant !== "icon" && children}
+          {chipType !== "icon" && children}
         </chakra.span>
-        {variant === "filter" && state.isChecked && (
+        {chipType === "filter" && state.isChecked && (
           <CloseOutline24Icon marginLeft={1.5} />
         )}
       </chakra.div>

package/src/nudge/Nudge.tsx

@@ -0,0 +1,146 @@
+import {
+  Box,
+  DarkMode,
+  Popover,
+  PopoverAnchor,
+  PopoverArrow,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+} from "@chakra-ui/react";
+import React from "react";
+import { Button, ButtonGroup, createTexts, useTranslation } from "..";
+import { TooltipProps } from "../tooltip";
+
+export type NudgeProps = {
+  /**
+   * The ISO-formatted date of when the Nudge was introduced.
+   *
+   * After this date has been surpassed by 30 days, the nudge will no longer be shown,
+   * and an error will be logged in development mode.
+   *
+   * ```tsx
+   * <Nudge introducedDate="2024-02-19" {...otherProps} />
+   * ```
+   **/
+  introducedDate: string;
+  /**
+   * The name of the nudge.
+   * This will be used to check whether or not the nudge has been viewed.
+   **/
+  name: string;
+  /**
+   * The anchor of the nudge.
+   *
+   * The element that should be nudged toward.
+   *
+   * ```tsx
+   * <Nudge content="This is a great new feature! Try it out.">
+   *  <MyFeature />
+   * </Nudge>
+   * ```
+   * */
+  children: React.ReactNode;
+  /**
+   * The content of the nudge.
+   */
+  content: React.ReactNode;
+  /**
+   * Any actions you want to provide. Defaults to a close button and a "Show me" button.
+   */
+  actions?: React.ReactNode;
+} & Omit<
+  TooltipProps,
+  | "name"
+  | "triggerElement"
+  | "children"
+  | "withCloseButton"
+  | "defaultIsOpen"
+  | "size"
+  | "borderRadius"
+>;
+
+const EXPIRATION_DELAY = 1000 * 60 * 60 * 24 * 30; // 30 days
+
+/** A nudge.
+ *
+ * A nudge is a way to hint of a new feature.
+ *
+ * You're required to set an `introducedDate` to the nudge, which is the timestamp of when the nudge was introduced. After 30 days, the nudge will no longer be shown, and an error will be logged in development mode.
+ *
+ * ```tsx
+ * <Nudge
+ *  introducedDate="2024-02-19"
+ *  name="my-nudge"
+ *  content="Check out this enormous new feature!"
+ * >
+ *   <Card variant="base" padding={2} width="fit-content">My new feature</Card>
+ * </Nudge>
+ * ```
+ */
+export const Nudge = ({
+  introducedDate,
+  name,
+  children,
+  content,
+  actions,
+  ...props
+}: NudgeProps) => {
+  const { t } = useTranslation();
+  if (new Date(introducedDate).getTime() + EXPIRATION_DELAY < Date.now()) {
+    if (process.env.NODE_ENV === "development") {
+      console.warn(
+        `The nudge ${name} has been used for longer than 30 days. Please remove it from the codebase.
+        
+        This is a development only warning, and will not be shown in production.`,
+      );
+    }
+    return null;
+  }
+  return (
+    <Popover
+      arrowSize={12}
+      arrowShadowColor="none"
+      defaultIsOpen={true}
+      {...props}
+    >
+      <PopoverAnchor>{children}</PopoverAnchor>
+      <PopoverContent borderRadius="sm">
+        <DarkMode>
+          <PopoverArrow />
+          <PopoverCloseButton />
+          <PopoverBody margin={1}>
+            <Box marginRight={4}>{content}</Box>
+            <Box marginTop={1.5}>
+              {actions ?? (
+                <ButtonGroup>
+                  <Button variant="tertiary" size="xs">
+                    {t(texts.close)}
+                  </Button>
+                  <Button variant="secondary" size="xs" fontWeight="bold">
+                    {t(texts.showMe)}
+                  </Button>
+                </ButtonGroup>
+              )}
+            </Box>
+          </PopoverBody>
+        </DarkMode>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+const texts = createTexts({
+  close: {
+    nb: "Lukk",
+    nn: "Lukk",
+    sv: "Stäng",
+    en: "Close",
+  },
+  showMe: {
+    nb: "Vis meg",
+    nn: "Vis meg",
+    sv: "Visa mig",
+    en: "Show me",
+  },
+});

package/src/nudge/WizardNudge.tsx

@@ -0,0 +1,107 @@
+import { Box, usePopoverContext } from "@chakra-ui/react";
+import { ArrowRightFill18Icon } from "@vygruppen/spor-icon-react";
+import React, { useState } from "react";
+import {
+  Button,
+  Flex,
+  Nudge,
+  NudgeProps,
+  ProgressIndicator,
+  createTexts,
+  useTranslation,
+} from "..";
+
+export type WizardNudgeProps = Omit<NudgeProps, "actions" | "content"> & {
+  /** Steps in the wizard. Each item is its own step. Should only be Step components */
+  content: React.ReactNode[];
+  /**
+   * Where the nudge should be placed by default.
+   *
+   * Note - this is a suggestion, and may be overridden by space concerns.
+   */
+  placement?: "top" | "bottom" | "left" | "right";
+};
+/**
+ * A nudge that displays its children one at a time, with a step indicator.
+ *
+ * ```tsx
+ * <WizardNudge
+ *  content={["First step", "Second step"]}
+ *  name="my-wizard-nudge"
+ *  introducedDate="2024-02-19"
+ * >
+ *   <Card width="fit-content" padding={2}>
+ *    My new feature
+ *  </Card>
+ * </WizardNudge>
+ * ```
+ */
+export const WizardNudge = ({
+  children,
+  name,
+  onClose,
+  content,
+  ...props
+}: WizardNudgeProps) => {
+  const [currentStep, setCurrentStep] = useState(1);
+  const totalSteps = content.length;
+  const isLastStep = totalSteps === currentStep;
+  const onNext = () => setCurrentStep((prev) => prev + 1);
+
+  return (
+    <Nudge
+      onClose={onClose}
+      name={name}
+      content={content[currentStep - 1]}
+      actions={
+        <Flex gap={3} alignItems="center">
+          <ProgressIndicator
+            activeStep={currentStep}
+            numberOfSteps={totalSteps}
+          />
+          <Box>
+            <NextOrCloseButton isLastStep={isLastStep} onNext={onNext} />
+          </Box>
+        </Flex>
+      }
+      {...props}
+    >
+      {children}
+    </Nudge>
+  );
+};
+
+type NextOrCloseButtonProps = {
+  isLastStep: boolean;
+  onNext: () => void;
+};
+const NextOrCloseButton = ({ isLastStep, onNext }: NextOrCloseButtonProps) => {
+  const { onClose } = usePopoverContext();
+  const { t } = useTranslation();
+  return (
+    <Button
+      variant="tertiary"
+      size="xs"
+      leftIcon={isLastStep ? undefined : <ArrowRightFill18Icon />}
+      onClick={isLastStep ? onClose : onNext}
+      width="fit-content"
+    >
+      {t(isLastStep ? texts.finish : texts.nextStep)}
+    </Button>
+  );
+};
+
+const texts = createTexts({
+  nextStep: {
+    nb: "Neste",
+    nn: "Neste",
+    sv: "Nästa",
+    en: "Next",
+  },
+  finish: {
+    nb: "Fullfør",
+    nn: "Fullfør",
+    sv: "Fullför",
+    en: "Finish",
+  },
+});

package/src/nudge/index.tsx

@@ -0,0 +1,2 @@
+export * from "./Nudge";
+export * from "./WizardNudge";

package/src/progress-indicator/ProgressIndicator.tsx

@@ -39,7 +39,11 @@ export const ProgressIndicator = ({
     >
       <Box __css={style.container}>
         {Array.from({ length: numberOfSteps }, (_, i) => (
-          <ProgressDot aria-value={i + 1} isActive={activeStep === i + 1} />
+          <ProgressDot
+            key={i}
+            aria-value={i + 1}
+            isActive={activeStep === i + 1}
+          />
         ))}
       </Box>
     </Box>

package/src/theme/components/accordion.ts

@@ -1,9 +1,13 @@
 import { accordionAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
-import { mode } from "@chakra-ui/theme-tools";
-import { colors, shadows } from "../foundations";
-import { getBoxShadowString } from "../utils/box-shadow-utils";
+import {
+  baseBackground,
+  floatingBackground,
+  ghostBackground,
+} from "../utils/background-utils";
+import { baseBorder, floatingBorder } from "../utils/border-utils";
 import { focusVisibleStyles } from "../utils/focus-util";
+import { baseText } from "../utils/text-utils";
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 const config = helpers.defineMultiStyleConfig({
@@ -21,7 +25,7 @@ const config = helpers.defineMultiStyleConfig({
       borderColor: "osloGrey",
       display: "flex",
       justifyContent: "space-between",
-      color: mode("darkGrey", "white")(props),
+      ...baseText("default", props),
       textAlign: "left",
       fontFamily: "body",
       fontWeight: "bold",
@@ -40,70 +44,50 @@ const config = helpers.defineMultiStyleConfig({
     },
   }),
   variants: {
-    list: (props) => ({
+    ghost: (props) => ({
       button: {
         boxShadow: "none",
         _hover: {
-          backgroundColor: mode("seaMist", "pine")(props),
+          ...ghostBackground("hover", props),
         },
         _active: {
-          backgroundColor: mode("mint", "whiteAlpha.200")(props),
+          ...ghostBackground("active", props),
         },
       },
     }),
-    outline: (props) => ({
+    base: (props) => ({
       container: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode(
-            colors.blackAlpha["400"],
-            colors.whiteAlpha["400"],
-          )(props),
-        }),
+        ...baseBorder("default", props),
       },
       button: {
         _expanded: {
           borderBottomRadius: "none",
         },
         _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("darkGrey", "white")(props),
-            borderWidth: 2,
-          }),
+          ...baseBorder("hover", props),
         },
         _active: {
-          backgroundColor: mode("mint", "whiteAlpha.100")(props),
-          boxShadow: getBoxShadowString({
-            borderColor: mode("darkGrey", colors.whiteAlpha[400])(props),
-          }),
+          ...baseBackground("active", props),
+          ...baseBorder("default", props),
         },
       },
     }),
-    card: (props) => ({
+    floating: (props) => ({
       container: {
-        backgroundColor: mode("white", "whiteAlpha.100")(props),
-        boxShadow: getBoxShadowString({
-          baseShadow: mode<keyof typeof shadows>("sm", "none")(props),
-          borderColor: mode("silver", "whiteAlpha.400")(props),
-        }),
+        ...floatingBackground("default", props),
+        ...floatingBorder("default", props),
       },
       button: {
         _expanded: {
           borderBottomRadius: "none",
         },
         _hover: {
-          backgroundColor: mode("seaMist", "whiteAlpha.200")(props),
-          boxShadow: getBoxShadowString({
-            borderColor: mode("darkGrey", "white")(props),
-            borderWidth: 1,
-          }),
+          ...ghostBackground("hover", props),
+          ...floatingBorder("default", props),
         },
         _active: {
-          backgroundColor: mode("mint", "inherit")(props),
-          boxShadow: getBoxShadowString({
-            baseShadow: "none",
-            borderWidth: 1,
-            borderColor: mode("darkGrey", "whiteAlpha.400")(props),
-          }),
+          ...ghostBackground("active", props),
+          ...floatingBorder("default", props),
         },
       },
     }),
@@ -147,7 +131,7 @@ const config = helpers.defineMultiStyleConfig({
     },
   },
   defaultProps: {
-    variant: "list",
+    variant: "ghost",
     size: "sm",
   },
 });

package/src/theme/components/button.ts

@@ -147,7 +147,7 @@ const config = defineStyleConfig({
       minHeight: 5,
       minWidth: 5,
       fontSize: "16px",
-      paddingX: 2,
+
       fontWeight: "normal",
     },
   },