@vygruppen/spor-react 1.3.3 → 2.0.0

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "1.3.3",
+  "version": "2.0.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "license": "MIT",
   "sideEffects": false,
   "scripts": {
-    "build": "tsup src/* --dts --treeshake --format esm,cjs",
+    "build": "tsup src/index.tsx --dts --treeshake --format cjs,esm",
     "dev": "tsup src/index.tsx --watch --format esm"
   },
   "homepage": "https://github.com/nsbno/spor/tree/main/packages/spor-react",
@@ -17,42 +17,30 @@
     "directory": "packages/spor-react"
   },
   "dependencies": {
-    "@leile/lobo-t": "^1.0.5",
-    "@vygruppen/spor-accordion-react": "*",
-    "@vygruppen/spor-alert-react": "*",
-    "@vygruppen/spor-button-react": "*",
-    "@vygruppen/spor-card-react": "*",
-    "@vygruppen/spor-design-tokens": "*",
-    "@vygruppen/spor-datepicker-react": "*",
-    "@vygruppen/spor-i18n-react": "*",
-    "@vygruppen/spor-icon-react": "*",
-    "@vygruppen/spor-image-react": "*",
-    "@vygruppen/spor-input-react": "*",
-    "@vygruppen/spor-layout-react": "*",
-    "@vygruppen/spor-linjetag-react": "*",
-    "@vygruppen/spor-link-react": "*",
-    "@vygruppen/spor-loader-react": "*",
-    "@vygruppen/spor-logo-react": "*",
-    "@vygruppen/spor-media-controller-react": "*",
-    "@vygruppen/spor-modal-react": "*",
-    "@vygruppen/spor-stepper-react": "*",
-    "@vygruppen/spor-table-react": "*",
-    "@vygruppen/spor-theme-react": "*",
-    "@vygruppen/spor-popover-react": "*",
-    "@vygruppen/spor-provider-react": "*",
-    "@vygruppen/spor-tab-react": "*",
-    "@vygruppen/spor-toast-react": "*",
-    "@vygruppen/spor-typography-react": "*",
-    "@vygruppen/spor-util-react": "*",
     "@chakra-ui/react": "^2.3.5",
+    "@chakra-ui/theme-tools": "^2.0.12",
+    "@internationalized/date": "^3.0.1",
+    "@leile/lobo-t": "^1.0.5",
+    "@vygruppen/spor-design-tokens": "latest",
+    "@vygruppen/spor-icon-react": "latest",
+    "@vygruppen/spor-loader": "latest",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
-    "framer-motion": ">6.0.0"
+    "framer-motion": ">6.0.0",
+    "lottie-react": "^2.3.1",
+    "react-aria": "^3.23.0",
+    "react-stately": "^3.20.0",
+    "react-swipeable": "^7.0.0"
   },
   "devDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tsup": "^6.2.2"
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "tsup": "^6.2.2",
+    "vitest": "^0.26.3",
+    "vitest-axe": "^0.1.0",
+    "vitest-canvas-mock": "^0.2.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/accordion/Accordion.test.tsx

@@ -0,0 +1,20 @@
+import { act, render } from "@testing-library/react";
+import React from "react";
+import { axe } from "vitest-axe";
+import { Accordion } from "./Accordion";
+import { ExpandableItem } from "./Expandable";
+
+describe("<Accordion />", () => {
+  it("is accessible", async () => {
+    const { container, getByRole } = render(
+      <Accordion>
+        <ExpandableItem title="Title">Content</ExpandableItem>
+      </Accordion>
+    );
+    await act(async () => {
+      expect(await axe(container)).toHaveNoViolations();
+      getByRole("button").click();
+      expect(await axe(container)).toHaveNoViolations();
+    });
+  });
+});

package/src/accordion/Accordion.tsx

@@ -0,0 +1,62 @@
+import {
+  Accordion as ChakraAccordion,
+  AccordionProps as ChakraAccordionProps,
+  As,
+  forwardRef,
+} from "@chakra-ui/react";
+import React from "react";
+import { AccordionProvider } from "./AccordionContext";
+export {
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+} from "@chakra-ui/react";
+export type {
+  AccordionButtonProps,
+  AccordionItemProps,
+  AccordionPanelProps,
+} from "@chakra-ui/react";
+
+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
+   */
+  variant?: "list" | "outline" | "card";
+  size?: "sm" | "md" | "lg";
+};
+/**
+ * Wraps a set of ExpandableItem or AccordionItem components.
+ *
+ * ```tsx
+ * <Accordion variant="list" size="md">
+ *   <ExpandableItem title="Is Spor easy?" headingLevel="h3">
+ *     Yes
+ *   </ExpandableItem>
+ *   <ExpandableItem title="Is Spor lovable?" headingLevel="h3">
+ *     🥰
+ *   </ExpandableItem>
+ * </Accordion>
+ * ```
+ *
+ * If you only have one expandable item, you can use the `<Expandable />` component instead.
+ */
+export const Accordion = forwardRef<AccordionProps, "div">((props, ref) => {
+  const defaultIndex =
+    typeof props.defaultIndex === "number" && props.allowMultiple
+      ? [props.defaultIndex]
+      : props.defaultIndex;
+  return (
+    <AccordionProvider size={props.size}>
+      <ChakraAccordion
+        {...props}
+        ref={ref}
+        defaultIndex={defaultIndex as number[] | undefined}
+      />
+    </AccordionProvider>
+  );
+});

package/src/accordion/AccordionContext.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { AccordionProps } from "./Accordion";
+
+type AccordionContextType = {
+  size: AccordionProps["size"];
+};
+const AccordionContext = React.createContext<AccordionContextType | null>(null);
+type AccordionProviderProps = {
+  children: React.ReactNode;
+  size: AccordionProps["size"];
+};
+export const AccordionProvider = ({
+  size,
+  ...props
+}: AccordionProviderProps) => {
+  return <AccordionContext.Provider value={{ size }} {...props} />;
+};
+
+export const useAccordionContext = () => {
+  const context = React.useContext(AccordionContext);
+  if (context === null) {
+    throw new Error(
+      "useAccordionContext must be used within AccordionProvider"
+    );
+  }
+  return context;
+};

package/src/accordion/Expandable.tsx

@@ -0,0 +1,157 @@
+import {
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionItemProps,
+  AccordionPanel,
+  Box,
+  Flex,
+} from "@chakra-ui/react";
+import React from "react";
+import { Accordion, AccordionProps } from "./Accordion";
+import { useAccordionContext } from "./AccordionContext";
+
+type HeadingLevel = "h2" | "h3" | "h4" | "h5" | "h6";
+type ExpandableProps = AccordionProps & {
+  /** The hidden content */
+  children: React.ReactNode;
+  /** The title that's shown inside the toggle button */
+  title: React.ReactNode;
+  /** The semantic heading level of the toggle button */
+  headingLevel?: HeadingLevel;
+  /**
+   * Icon shown to the left of the title
+   *
+   * Make sure it's the outlined version of the icon.
+   *
+   * If the size is set to `sm` or `md` the icon should be 24px.
+   * If the size is set to `lg`, the icon should be 30px.
+   */
+  leftIcon?: React.ReactNode;
+};
+/**
+ * A standalone expandable component.
+ *
+ * This one is great to use if you have a single expandable component by itself.
+ * 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">
+ *   <Text>MORE! 🎉</Text>
+ * </Expandable>
+ * ```
+ */
+export const Expandable = ({
+  children,
+  headingLevel,
+  title,
+  leftIcon,
+  size = "md",
+  ...rest
+}: ExpandableProps) => {
+  return (
+    <Accordion {...rest} size={size}>
+      <ExpandableItem
+        headingLevel={headingLevel}
+        title={title}
+        leftIcon={leftIcon}
+      >
+        {children}
+      </ExpandableItem>
+    </Accordion>
+  );
+};
+
+export type ExpandableItemProps = AccordionItemProps & {
+  /** The hidden content */
+  children: React.ReactNode;
+  /** The title that's shown inside the toggle button */
+  title: React.ReactNode;
+  /** The semantic heading level of the toggle button */
+  headingLevel?: HeadingLevel;
+  /**
+   * Icon shown to the left of the title
+   *
+   * Make sure it's the 30px outlined version of the icon
+   */
+  leftIcon?: React.ReactNode;
+};
+/**
+ * An item in a set of Expandables. Must be wrapped in an `<Accordion>` component.
+ *
+ * ```tsx
+ * <Accordion variant="list" size="md">
+ *  <ExpandableItem title="Is Spor easy?" headingLevel="h3">
+ *    Yes
+ *  </ExpandableItem>
+ *  <ExpandableItem title="Do you love it?" headingLevel="h3">
+ *    🥰
+ *  </ExpandableItem>
+ * </Accordion>
+ * ```
+ *
+ * If you need even more control, you can put together your own expandable with the `Accordion`, `AccordionItem`, `AccordionButton`, `AccordionIcon` and `AccordionPanel` components.
+ */
+export const ExpandableItem = ({
+  children,
+  title,
+  headingLevel = "h3",
+  leftIcon,
+  ...rest
+}: ExpandableItemProps) => {
+  const { size } = useAccordionContext();
+  warnAboutMismatchingIcon({ icon: leftIcon, size });
+  return (
+    <AccordionItem {...rest}>
+      <Box as={headingLevel}>
+        <AccordionButton>
+          <Flex alignItems="center">
+            {leftIcon && <Box mr={2}>{leftIcon}</Box>}
+            {title}
+          </Flex>
+          <AccordionIcon />
+        </AccordionButton>
+      </Box>
+      <AccordionPanel>{children}</AccordionPanel>
+    </AccordionItem>
+  );
+};
+
+type WarnAboutMismatchingIcon = {
+  icon: any;
+  size: AccordionProps["size"];
+};
+const warnAboutMismatchingIcon = ({ icon, size }: WarnAboutMismatchingIcon) => {
+  if (process.env.NODE_ENV !== "production") {
+    const displayName = icon?.type?.render?.displayName;
+    if (!displayName) {
+      return;
+    }
+    if (displayName.includes("Fill")) {
+      console.warn(
+        `You passed a filled icon. This component requires outlined icons. You passed ${displayName}, replace it with ${displayName.replace(
+          "Fill",
+          "Outline"
+        )}.`
+      );
+      return;
+    }
+    if (size === "lg" && !displayName.includes("30Icon")) {
+      console.warn(
+        `The icon you passed was of the wrong size for the lg size. You passed ${displayName}, replace it with ${displayName.replace(
+          /(\d{2})Icon/,
+          "30Icon"
+        )}.`
+      );
+      return;
+    }
+    if (["md" || "sm"].includes(size!) && !displayName.includes("24Icon")) {
+      console.warn(
+        `The icon you passed was of the wrong size for the ${size} size. You passed ${displayName}, replace it with ${displayName.replace(
+          /(\d{2})Icon/,
+          "24Icon"
+        )}.`
+      );
+    }
+  }
+};

package/src/accordion/index.tsx

@@ -0,0 +1,2 @@
+export * from "./Accordion";
+export * from "./Expandable";

package/src/alert/AlertIcon.tsx

@@ -0,0 +1,75 @@
+import {
+  AltTransportOutline24Icon,
+  ErrorOutline24Icon,
+  InformationOutline24Icon,
+  SuccessOutline24Icon,
+  WarningOutline24Icon,
+} from "@vygruppen/spor-icon-react";
+import React from "react";
+import { createTexts, useTranslation } from "../i18n";
+import { BaseAlertProps } from "./BaseAlert";
+
+type AlertIconProps = { variant: BaseAlertProps["variant"] };
+/**
+ * Internal component that shows the correct icon for the alert.
+ */
+export const AlertIcon = ({ variant }: AlertIconProps) => {
+  const Icon = getIcon(variant);
+  const { t } = useTranslation();
+  return (
+    <Icon
+      flexShrink={0}
+      aria-label={t(texts[variant])}
+      marginRight={1}
+      color="darkGrey"
+    />
+  );
+};
+
+const getIcon = (variant: BaseAlertProps["variant"]) => {
+  switch (variant) {
+    case "info":
+      return InformationOutline24Icon;
+    case "success":
+      return SuccessOutline24Icon;
+    case "warning":
+      return WarningOutline24Icon;
+    case "alt-transport":
+      return AltTransportOutline24Icon;
+    case "error":
+      return ErrorOutline24Icon;
+  }
+};
+
+const texts = createTexts({
+  info: {
+    nb: "Informasjon",
+    nn: "Informasjon",
+    sv: "Information",
+    en: "Information",
+  },
+  success: {
+    nb: "Suksess",
+    nn: "Suksess",
+    sv: "Succé",
+    en: "Success",
+  },
+  warning: {
+    nb: "Advarsel",
+    nn: "Advarsel",
+    sv: "Varning",
+    en: "Warning",
+  },
+  error: {
+    nb: "Feil",
+    nn: "Feil",
+    sv: "Error",
+    en: "Error",
+  },
+  "alt-transport": {
+    nb: "Alternativ transport",
+    nn: "Alternativ transport",
+    sv: "Alternativ transport",
+    en: "Alternative transport",
+  },
+});

package/src/alert/BaseAlert.test.tsx

@@ -0,0 +1,37 @@
+import { render } from "@testing-library/react";
+import React from "react";
+import { axe } from "vitest-axe";
+import { BaseAlert } from "./BaseAlert";
+
+describe("<BaseAlert />", () => {
+  it("is accessible as variant='success'", async () => {
+    const { container } = render(
+      <BaseAlert variant="success">Test text</BaseAlert>
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+  it("is accessible as variant='info'", async () => {
+    const { container } = render(
+      <BaseAlert variant="info">Test text</BaseAlert>
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+  it("is accessible as variant='warning'", async () => {
+    const { container } = render(
+      <BaseAlert variant="warning">Test text</BaseAlert>
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+  it("is accessible as variant='error'", async () => {
+    const { container } = render(
+      <BaseAlert variant="error">Test text</BaseAlert>
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+  it("is accessible as variant='alt-transport'", async () => {
+    const { container } = render(
+      <BaseAlert variant="alt-transport">Test text</BaseAlert>
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

package/src/alert/BaseAlert.tsx

@@ -0,0 +1,21 @@
+import { Box, BoxProps, useMultiStyleConfig } from "@chakra-ui/react";
+import React from "react";
+
+export type BaseAlertProps = BoxProps & {
+  /** The color scheme and icon of the alert */
+  variant: "info" | "success" | "warning" | "alt-transport" | "error";
+  /** The body content of the alert */
+  children: React.ReactNode;
+};
+
+/**
+ * A base alert box component. Should only be composed by other alert components.
+ */
+export const BaseAlert = ({ variant, children, ...boxProps }: BaseAlertProps) => {
+  const styles = useMultiStyleConfig("Alert", { variant });
+  return (
+    <Box sx={styles.container} {...boxProps}>
+      {children}
+    </Box>
+  );
+};

package/src/alert/ClosableAlert.test.tsx

@@ -0,0 +1,37 @@
+import { act, render } from "@testing-library/react";
+import React from "react";
+import { vi } from "vitest";
+import { axe } from "vitest-axe";
+import { ClosableAlert } from ".";
+
+describe("<ClosableAlert />", () => {
+  it("closes when you click the close button", async () => {
+    const { getByRole, queryByRole } = render(
+      <ClosableAlert variant="info">Test text</ClosableAlert>
+    );
+    act(() => {
+      getByRole("button").click();
+    });
+    expect(queryByRole("button")).not.toBeInTheDocument();
+  });
+
+  it("calls the onClose prop when closed", () => {
+    const handleClick = vi.fn();
+    const { getByRole } = render(
+      <ClosableAlert variant="info" onClose={handleClick}>
+        Test text
+      </ClosableAlert>
+    );
+    act(() => {
+      getByRole("button").click();
+    });
+    expect(handleClick).toHaveBeenCalled();
+  });
+
+  it("is accessible", async () => {
+    const { container } = render(
+      <ClosableAlert variant="info">Test text</ClosableAlert>
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

package/src/alert/ClosableAlert.tsx

@@ -0,0 +1,75 @@
+import { useDisclosure, useMultiStyleConfig } from "@chakra-ui/react";
+import { CloseFill18Icon } from "@vygruppen/spor-icon-react";
+import React from "react";
+import { IconButton } from "../button";
+import { createTexts, useTranslation } from "../i18n";
+import { AlertIcon } from "./AlertIcon";
+import { BaseAlert, BaseAlertProps } from "./BaseAlert";
+
+type ClosableAlertProps = BaseAlertProps & {
+  /** Callback for when the close button is clicked */
+  onClose?: () => void;
+};
+/**
+ * A closable alert component.
+ *
+ * A regular alert with a close button that can be used to dismiss the alert.
+ *
+ * ```tsx
+ * <ClosableAlert variant="info" title="Nice to know">
+ *   <Text>Some info here</Text>
+ * </ClosableAlert>
+ * ```
+ *
+ * You can also pass in an optional `onClose` callback, for things like analytics.
+ *
+ * ```tsx
+ * <ClosableAlert
+ *   variant="info"
+ *   title="Nice to know"
+ *   onClose={() => analytics.track('alert-closed')}
+ * >
+ *   <Text>Some info here</Text>
+ * </ClosableAlert>
+ */
+export const ClosableAlert = ({
+  variant,
+  children,
+  onClose: externalOnClose = () => {},
+}: ClosableAlertProps) => {
+  const { isOpen, onClose } = useDisclosure({ defaultIsOpen: true });
+  const styles = useMultiStyleConfig("Alert", { variant });
+  const { t } = useTranslation();
+  if (!isOpen) {
+    return null;
+  }
+
+  const handleClose = () => {
+    externalOnClose();
+    onClose();
+  };
+
+  return (
+    <BaseAlert variant={variant}>
+      <IconButton
+        variant="ghost"
+        size="sm"
+        onClick={handleClose}
+        icon={<CloseFill18Icon />}
+        aria-label={t(texts.close)}
+        sx={styles.closeButton}
+      />
+      <AlertIcon variant={variant} />
+      {children}
+    </BaseAlert>
+  );
+};
+
+const texts = createTexts({
+  close: {
+    nb: "Lukk",
+    nn: "Lukk",
+    sv: "Dölj",
+    en: "Close",
+  },
+});

package/src/alert/ExpandableAlert.test.tsx

@@ -0,0 +1,84 @@
+import { act, render, waitFor } from "@testing-library/react";
+import React from "react";
+import { vi } from "vitest";
+import { axe } from "vitest-axe";
+import { ExpandableAlert } from ".";
+
+describe("<ExpandableAlert />", () => {
+  it("works as an expandable", async () => {
+    const { getByRole, getByText } = render(
+      <ExpandableAlert variant="info" title="Title">
+        Test text
+      </ExpandableAlert>
+    );
+    await waitFor(() => expect(getByText("Test text")).not.toBeVisible());
+    act(() => {
+      getByRole("button").click();
+    });
+    await waitFor(() => expect(getByText("Test text")).toBeVisible());
+    act(() => {
+      getByRole("button").click();
+    });
+    await waitFor(() => expect(getByText("Test text")).not.toBeVisible());
+  });
+
+  it("calls onToggle when toggled", async () => {
+    const handleClick = vi.fn();
+    const { getByRole } = render(
+      <ExpandableAlert variant="info" title="Title" onToggle={handleClick}>
+        Test text
+      </ExpandableAlert>
+    );
+
+    act(() => {
+      getByRole("button").click();
+    });
+    expect(handleClick).toHaveBeenCalledTimes(1);
+    expect(handleClick).lastCalledWith(true);
+
+    act(() => {
+      getByRole("button").click();
+    });
+    expect(handleClick).toHaveBeenCalledTimes(2);
+    expect(handleClick).lastCalledWith(false);
+  });
+
+  it("lets you set the heading level", async () => {
+    const { queryByRole, rerender } = render(
+      <ExpandableAlert variant="info" title="Title" headingLevel="h2">
+        Test text
+      </ExpandableAlert>
+    );
+    expect(queryByRole("heading", { level: 2 })).toBeInTheDocument();
+    rerender(
+      <ExpandableAlert variant="info" title="Title" headingLevel="h3">
+        Test text
+      </ExpandableAlert>
+    );
+    expect(queryByRole("heading", { level: 2 })).not.toBeInTheDocument();
+    expect(queryByRole("heading", { level: 3 })).toBeInTheDocument();
+  });
+
+  it("is accessible in all states", async () => {
+    const { container, getByRole } = render(
+      <ExpandableAlert variant="info" title="Title">
+        Test text
+      </ExpandableAlert>
+    );
+    await act(async () => {
+      expect(await axe(container)).toHaveNoViolations();
+    });
+    act(() => {
+      getByRole("button").click();
+    });
+    await act(async () => {
+      expect(await axe(container)).toHaveNoViolations();
+    });
+    act(() => {
+      getByRole("button").click();
+    });
+    await act(async () => {
+      expect(await axe(container)).toHaveNoViolations();
+    });
+  });
+});