@vygruppen/spor-react 11.3.10 → 12.0.0

package/src/media-controller/index.test.tsx

@@ -1,59 +0,0 @@
-import { render } from "@testing-library/react";
-import React from "react";
-import { vi } from "vitest";
-import { axe } from "vitest-axe";
-import { JumpButton, PlayPauseButton, SkipButton } from ".";
-
-describe("<PlayPauseButton />", () => {
-  it("works like a button", async () => {
-    const handleClick = vi.fn();
-    const { getByRole } = render(
-      <PlayPauseButton size="sm" isPlaying={true} onClick={handleClick} />,
-    );
-    getByRole("button").click();
-    expect(handleClick).toHaveBeenCalled();
-  });
-
-  it("is accessible", async () => {
-    const { container } = render(
-      <PlayPauseButton size="sm" isPlaying={true} onClick={() => {}} />,
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});
-
-describe("<SkipButtonButton />", () => {
-  it("works like a button", async () => {
-    const handleClick = vi.fn();
-    const { getByRole } = render(
-      <SkipButton size="sm" direction="forward" onClick={handleClick} />,
-    );
-    getByRole("button").click();
-    expect(handleClick).toHaveBeenCalled();
-  });
-
-  it("is accessible", async () => {
-    const { container } = render(
-      <SkipButton size="sm" direction="forward" onClick={() => {}} />,
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});
-
-describe("<JumpButtonButton />", () => {
-  it("works like a button", async () => {
-    const handleClick = vi.fn();
-    const { getByRole } = render(
-      <JumpButton size="sm" direction="forward" onClick={handleClick} />,
-    );
-    getByRole("button").click();
-    expect(handleClick).toHaveBeenCalled();
-  });
-
-  it("is accessible", async () => {
-    const { container } = render(
-      <JumpButton size="sm" direction="forward" onClick={() => {}} />,
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/modal/Drawer.tsx

@@ -1,120 +0,0 @@
-import {
-  Box,
-  BoxProps,
-  Center,
-  Drawer as ChakraDrawer,
-  DrawerContent as ChakraDrawerContent,
-  DrawerContentProps as ChakraDrawerContentProps,
-  DrawerProps as ChakraDrawerProps,
-  forwardRef,
-  useModalContext,
-} from "@chakra-ui/react";
-import React from "react";
-import { useSwipeable } from "react-swipeable";
-export {
-  DrawerBody,
-  DrawerCloseButton,
-  DrawerFooter,
-  DrawerOverlay,
-} from "@chakra-ui/react";
-export type { DrawerProps } from "@chakra-ui/react";
-export { ModalHeader as DrawerHeader } from "./ModalHeader";
-
-type DrawerProps = ChakraDrawerProps;
-export const Drawer = (props: DrawerProps) => {
-  return (
-    <DrawerProvider placement={props.placement}>
-      <ChakraDrawer {...props} />
-    </DrawerProvider>
-  );
-};
-
-type DrawerContentProps = ChakraDrawerContentProps;
-export const DrawerContent = forwardRef<DrawerContentProps, any>(
-  ({ children, ...props }, ref) => {
-    const placement = useDrawerContext();
-    const { onClose } = useModalContext();
-    const handlers = useSwipeable({
-      onSwiped: (e) => {
-        const shouldClose =
-          (placement === "bottom" && e.dir === "Down") ||
-          (placement === "right" && e.dir === "Right") ||
-          (placement === "left" && e.dir === "Left") ||
-          (placement === "top" && e.dir === "Up") ||
-          (placement === "end" && e.dir === "Right") ||
-          (placement === "start" && e.dir === "Left");
-        if (shouldClose) {
-          onClose();
-        }
-      },
-      swipeDuration: 500,
-    });
-
-    const isTopOrBottom = placement === "top" || placement === "bottom";
-    const widthConstraits = isTopOrBottom
-      ? { width: ["100%", "37.5rem"], mx: "auto" }
-      : {};
-    return (
-      <Box {...handlers}>
-        <ChakraDrawerContent
-          {...widthConstraits}
-          borderTopRadius={placement === "bottom" ? "md" : "none"}
-          borderBottomRadius={placement === "top" ? "md" : "none"}
-          {...props}
-          ref={ref}
-        >
-          <Box position="relative">
-            <Box maxHeight="100vh" maxWidth="100vw" overflow="auto">
-              {isTopOrBottom && <Notch />}
-
-              <Box>{children}</Box>
-            </Box>
-          </Box>
-        </ChakraDrawerContent>
-      </Box>
-    );
-  },
-);
-
-const Notch = forwardRef<BoxProps, any>((props, ref) => {
-  const placement = useDrawerContext();
-  return (
-    <Box
-      position="absolute"
-      left={0}
-      right={0}
-      top={placement === "bottom" ? 0 : undefined}
-      bottom={placement === "top" ? 0 : undefined}
-      zIndex="modal"
-      {...props}
-      ref={ref}
-    >
-      <Center
-        background={placement === "bottom" ? "bottom" : "top"}
-        padding={2}
-        borderRadius="md"
-      >
-        <Box
-          width="2.265rem"
-          height={1}
-          backgroundColor="steel"
-          borderRadius="xs"
-        />
-      </Center>
-    </Box>
-  );
-});
-
-const DrawerContext = React.createContext<DrawerProps["placement"]>(undefined);
-type DrawerProviderProps = {
-  children: React.ReactNode;
-  placement: DrawerProps["placement"];
-};
-const DrawerProvider = (props: DrawerProviderProps) => (
-  <DrawerContext.Provider value={props.placement}>
-    {props.children}
-  </DrawerContext.Provider>
-);
-const useDrawerContext = () => {
-  return React.useContext(DrawerContext);
-};

package/src/modal/FullScreenDrawer.tsx

@@ -1,239 +0,0 @@
-import {
-  Box,
-  DrawerBody,
-  DrawerContent,
-  DrawerHeader,
-  DrawerOverlay,
-  Flex,
-  useColorModeValue,
-  useMediaQuery,
-  useModalContext,
-} from "@chakra-ui/react";
-import tokens from "@vygruppen/spor-design-tokens";
-import {
-  ArrowLeftFill24Icon,
-  ArrowLeftFill30Icon,
-  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";
-import { DrawerBodyProps } from "./SimpleDrawer";
-
-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;
-  /** Props for drawer body */
-  body?: DrawerBodyProps;
-};
-
-export const FullScreenDrawer = ({
-  children,
-  title,
-  placement = "bottom",
-  leftButton = <DrawerBackButton />,
-  rightButton = <DrawerCloseButton />,
-  isOpen,
-  onClose,
-  body,
-}: 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} {...body}>
-          {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">
-        <Box width="fit-content">{leftButton}</Box>
-      </Box>
-      <DrawerHeader
-        as="h2"
-        fontSize="md"
-        fontWeight="bold"
-        textAlign="center"
-        flex="2"
-        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"
-      >
-        {t(texts.close)}
-      </Button>
-    );
-  }
-
-  return (
-    <IconButton
-      variant="ghost"
-      icon={<CloseFill30Icon />}
-      onClick={onClose}
-      aria-label={t(texts.close)}
-    />
-  );
-};
-
-const DrawerBackButton = () => {
-  const { onClose } = useModalContext();
-  const { t } = useTranslation();
-
-  const [isScreenSizeMinSm] = useMediaQuery(
-    `(min-width: ${tokens.size.breakpoint.sm})`,
-  );
-
-  if (isScreenSizeMinSm) {
-    return (
-      <Button
-        variant="ghost"
-        leftIcon={<ArrowLeftFill24Icon />}
-        onClick={onClose}
-        aria-label={t(texts.backAriaLabel)}
-        width="fit-content"
-      >
-        {t(texts.back)}
-      </Button>
-    );
-  }
-
-  return (
-    <IconButton
-      variant="ghost"
-      icon={<ArrowLeftFill30Icon />}
-      onClick={onClose}
-      aria-label={t(texts.close)}
-    />
-  );
-};
-
-const texts = createTexts({
-  close: {
-    nb: "Lukk",
-    nn: "Lukk",
-    en: "Close",
-    sv: "Stäng",
-  },
-  closeAriaLabel: {
-    nb: "Lukk vindu",
-    nn: "Lukk vindauge",
-    en: "Close window",
-    sv: "Stäng fönster",
-  },
-  back: {
-    nb: "Tilbake",
-    nn: "Tilbake",
-    en: "Back",
-    sv: "Tillbaka",
-  },
-  backAriaLabel: {
-    nb: "Gå tilbake",
-    nn: "Gå tilbake",
-    en: "Go back",
-    sv: "Gå tillbaka",
-  },
-});

package/src/modal/Modal.tsx

@@ -1,15 +0,0 @@
-export {
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalOverlay,
-} from "@chakra-ui/react";
-export type {
-  ModalBodyProps,
-  ModalContentProps,
-  ModalFooterProps,
-  ModalOverlayProps,
-  ModalProps,
-} from "@chakra-ui/react";

package/src/modal/ModalHeader.tsx

@@ -1,31 +0,0 @@
-import {
-  forwardRef,
-  ModalHeader as ChakraModalHeader,
-  ModalHeaderProps as ChakraModalHeaderProps,
-} from "@chakra-ui/react";
-import React from "react";
-
-export type ModalHeaderProps = ChakraModalHeaderProps & {
-  size?: "sm" | "lg";
-};
-
-/**
- * ModalHeader
- *
- * You can specify the size with either `size="sm"` or `size="lg"`.
- */
-export const ModalHeader = forwardRef<ModalHeaderProps, "header">(
-  ({ size, ...props }, ref) => {
-    const styles = {
-      fontSize:
-        size === "lg"
-          ? ["mobile.lg", "desktop.lg"]
-          : ["mobile.md", "desktop.md"],
-      textAlign:
-        size === "lg"
-          ? "center"
-          : ("left" as ChakraModalHeaderProps["textAlign"]),
-    };
-    return <ChakraModalHeader as={"h1"} {...props} ref={ref} {...styles} />;
-  },
-);

package/src/modal/SimpleDrawer.tsx

@@ -1,51 +0,0 @@
-import React from "react";
-import {
-  Drawer,
-  DrawerBody,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerHeader,
-  DrawerOverlay,
-} from "./Drawer";
-
-export type DrawerBodyProps = {
-  id?: string;
-};
-
-export type SimpleDrawerProps = {
-  children: React.ReactNode;
-  title?: React.ReactNode;
-  placement: "top" | "right" | "bottom" | "left";
-  isOpen: boolean;
-  onClose: () => void;
-  /** Props for drawer body */
-  body?: DrawerBodyProps;
-};
-/** A very basic drawer component that's easy to use
- *
- * ```tsx
- * <SimpleDrawer placement="bottom" isOpen={isOpen} onClose={handleClose}>
- *   This is the drawer content
- * </SimpleDrawer>
- * ```
- *
- * For more advanced use cases, see the [Drawer](./Drawer.tsx) component.
- */
-export const SimpleDrawer = ({
-  placement,
-  children,
-  title,
-  body,
-  ...props
-}: SimpleDrawerProps) => {
-  return (
-    <Drawer placement={placement} {...props}>
-      <DrawerOverlay />
-      <DrawerContent>
-        <DrawerCloseButton />
-        {title && <DrawerHeader>{title}</DrawerHeader>}
-        <DrawerBody {...body}>{children}</DrawerBody>
-      </DrawerContent>
-    </Drawer>
-  );
-};

package/src/modal/index.tsx

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

package/src/nudge/WizardNudge.tsx

@@ -1,107 +0,0 @@
-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"
- * >
- *   <StaticCard width="fit-content" padding={2}>
- *    My new feature
- *  </StaticCard>
- * </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",
-  },
-});