@vygruppen/spor-react 11.3.9 → 12.0.0

package/src/theme/foundations/lineHeights.ts

@@ -1,6 +0,0 @@
-import tokens from "@vygruppen/spor-design-tokens";
-
-export const lineHeights = {
-  base: tokens.font.style.lg["line-height"],
-  normal: tokens.font.style.lg["line-height"],
-};

package/src/theme/foundations/radii.ts

@@ -1,12 +0,0 @@
-import tokens from "@vygruppen/spor-design-tokens";
-
-export const radii = {
-  none: tokens.size["border-radius"].none,
-  xs: tokens.size["border-radius"].xs,
-  sm: tokens.size["border-radius"].sm,
-  md: tokens.size["border-radius"].md,
-  lg: tokens.size["border-radius"].lg,
-  xl: tokens.size["border-radius"].xl,
-  "2xl": tokens.size["border-radius"]["2xl"],
-  round: "50%",
-};

package/src/theme/foundations/shadows.ts

@@ -1,8 +0,0 @@
-import tokens from "@vygruppen/spor-design-tokens";
-
-export const shadows = {
-  none: "none",
-  sm: tokens.depth.shadow.sm.value,
-  md: tokens.depth.shadow.md.value,
-  lg: tokens.depth.shadow.lg.value,
-};

package/src/theme/foundations/sizes.ts

@@ -1,36 +0,0 @@
-import tokens from "@vygruppen/spor-design-tokens";
-import { spacing } from "./spacing";
-
-const largeSizes = {
-  max: "max-content",
-  min: "min-content",
-  full: "100%",
-  "3xs": "14rem",
-  "2xs": "16rem",
-  xs: "20rem",
-  sm: "24rem",
-  md: "28rem",
-  lg: "32rem",
-  xl: "36rem",
-  "2xl": "42rem",
-  "3xl": "48rem",
-  "4xl": "56rem",
-  "5xl": "64rem",
-  "6xl": "72rem",
-  "7xl": "80rem",
-  "8xl": "90rem",
-};
-
-const container = {
-  base: "0px",
-  sm: tokens.size.breakpoint.sm,
-  md: tokens.size.breakpoint.md,
-  lg: tokens.size.breakpoint.lg,
-  xl: tokens.size.breakpoint.xl,
-};
-
-export const sizes = {
-  ...spacing,
-  ...largeSizes,
-  container,
-};

package/src/theme/foundations/spacing.ts

@@ -1,31 +0,0 @@
-import tokens from "@vygruppen/spor-design-tokens";
-
-type Token = { value: { number: number } };
-type Spacing = {
-  0: Token;
-  0.5: Token;
-  1: Token;
-  1.5: Token;
-  2: Token;
-  2.5: Token;
-  3: Token;
-  4: Token;
-  5: Token;
-  6: Token;
-  7: Token;
-  8: Token;
-  9: Token;
-  10: Token;
-  11: Token;
-  12: Token;
-};
-
-export const spacing = Object.entries(tokens.size.spacing).reduce(
-  (tokens, [key, token]) => ({
-    ...tokens,
-    [Number(key)]: token,
-  }),
-  {} as Record<keyof Spacing, string>,
-);
-
-export const space = spacing;

package/src/theme/foundations/styles.ts

@@ -1,12 +0,0 @@
-import { StyleFunctionProps, mode } from "@chakra-ui/theme-tools";
-
-export const styles = {
-  global: (props: StyleFunctionProps | Record<string, any>) => ({
-    "html, body": {
-      color: mode("darkGrey", "lightGrey")(props),
-    },
-    svg: {
-      display: "initial",
-    },
-  }),
-};

package/src/theme/foundations/textStyles.ts

@@ -1,74 +0,0 @@
-import tokens from "@vygruppen/spor-design-tokens";
-
-export const textStyles = {
-  "2xl": {
-    fontSize: [
-      tokens.font.style.xxl["font-size"].mobile,
-      null,
-      null,
-      tokens.font.style.xxl["font-size"].desktop,
-    ],
-    fontFamily: tokens.font.style.xxl["font-family"],
-    lineHeight: tokens.font.style.xxl["line-height"],
-  },
-  "xl-display": {
-    fontSize: [
-      tokens.font.style["xl-display"]["font-size"].mobile,
-      null,
-      null,
-      tokens.font.style["xl-display"]["font-size"].desktop,
-    ],
-    fontFamily: tokens.font.style["xl-display"]["font-family"],
-    lineHeight: tokens.font.style["xl-display"]["line-height"],
-  },
-  "xl-sans": {
-    fontSize: [
-      tokens.font.style["xl-sans"]["font-size"].mobile,
-      null,
-      null,
-      tokens.font.style["xl-sans"]["font-size"].desktop,
-    ],
-    fontFamily: tokens.font.style["xl-sans"]["font-family"],
-    lineHeight: tokens.font.style["xl-sans"]["line-height"],
-  },
-  lg: {
-    fontSize: [
-      tokens.font.style.lg["font-size"].mobile,
-      null,
-      null,
-      tokens.font.style.lg["font-size"].desktop,
-    ],
-    fontFamily: tokens.font.style.lg["font-family"],
-    lineHeight: tokens.font.style.lg["line-height"],
-  },
-  md: {
-    fontSize: [
-      tokens.font.style.md["font-size"].mobile,
-      null,
-      null,
-      tokens.font.style.md["font-size"].desktop,
-    ],
-    fontFamily: tokens.font.style.md["font-family"],
-    lineHeight: tokens.font.style.md["line-height"],
-  },
-  sm: {
-    fontSize: [
-      tokens.font.style.sm["font-size"].mobile,
-      null,
-      null,
-      tokens.font.style.sm["font-size"].desktop,
-    ],
-    fontFamily: tokens.font.style.sm["font-family"],
-    lineHeight: tokens.font.style.sm["line-height"],
-  },
-  xs: {
-    fontSize: [
-      tokens.font.style.xs["font-size"].mobile,
-      null,
-      null,
-      tokens.font.style.xs["font-size"].desktop,
-    ],
-    fontFamily: tokens.font.style.xs["font-family"],
-    lineHeight: tokens.font.style.xs["line-height"],
-  },
-};

package/src/theme/foundations/zIndices.ts

@@ -1,17 +0,0 @@
-import tokens from "@vygruppen/spor-design-tokens";
-
-export const zIndices = {
-  hide: tokens.depth["z-index"].hide,
-  auto: "auto",
-  base: tokens.depth["z-index"].base,
-  docked: tokens.depth["z-index"].docked,
-  dropdown: tokens.depth["z-index"].dropdown,
-  sticky: tokens.depth["z-index"].sticky,
-  banner: tokens.depth["z-index"].banner,
-  overlay: tokens.depth["z-index"].overlay,
-  modal: tokens.depth["z-index"].modal,
-  popover: tokens.depth["z-index"].popover,
-  skipLink: tokens.depth["z-index"].skipLink,
-  toast: tokens.depth["z-index"].toast,
-  tooltip: tokens.depth["z-index"].tooltip,
-};

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

@@ -1,104 +0,0 @@
-import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
-import { brandBackground } from "./brand-utils";
-import { focusVisibleStyles } from "./focus-utils";
-import { surface } from "./surface-utils";
-import { State, Subset } from "./types";
-
-type BaseBackgroundState = Subset<
-  State,
-  "default" | "active" | "selected" | "hover" | "disabled"
->;
-export function baseBackground(
-  state: BaseBackgroundState,
-  props: StyleFunctionProps,
-) {
-  switch (state) {
-    case "active":
-      return {
-        backgroundColor: mode(
-          "base.surface.active.light",
-          "base.surface.active.dark",
-        )(props),
-      };
-    case "selected":
-      return brandBackground("default", props);
-
-    case "disabled":
-      return surface("disabled", props);
-    case "hover":
-    default:
-      return { backgroundColor: "transparent" };
-  }
-}
-
-type BorderState = Subset<
-  State,
-  "hover" | "focus" | "active" | "disabled" | "selected" | "invalid" | "default"
->;
-
-export function baseBorder(state: BorderState, props: StyleFunctionProps) {
-  switch (state) {
-    case "hover":
-      return {
-        outline: "2px solid",
-        outlineColor: mode(
-          "base.outline.hover.light",
-          "base.outline.hover.dark",
-        )(props),
-      };
-    case "focus": {
-      return focusVisibleStyles(props)._focusVisible;
-    }
-    case "disabled": {
-      return {
-        outline: "1px solid",
-        outlineColor: mode(
-          "outline.disabled.light",
-          "outline.disabled.dark",
-        )(props),
-      };
-    }
-    case "active": {
-      return {
-        outline: "1px solid",
-        outlineColor: mode(
-          "base.outline.default.light",
-          "base.outline.default.dark",
-        )(props),
-      };
-    }
-    case "invalid": {
-      return {
-        outline: "2px solid",
-        outlineColor: mode("outline.error.light", "outline.error.dark")(props),
-      };
-    }
-    case "default":
-    default:
-      return {
-        outline: "1px solid",
-        outlineColor: mode(
-          "base.outline.default.light",
-          "base.outline.default.dark",
-        )(props),
-      };
-  }
-}
-
-type BaseTextState = Subset<State, "default" | "selected" | "disabled">;
-export function baseText(state: BaseTextState, props: StyleFunctionProps) {
-  switch (state) {
-    case "selected":
-      return {
-        color: mode("brand.text.light", "brand.text.dark")(props),
-      };
-    case "disabled":
-      return {
-        color: mode("text.disabled.light", "text.disabled.dark")(props),
-      };
-    default:
-      return {
-        color: mode("base.text.light", "base.text.dark")(props),
-      };
-  }
-}

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

@@ -1,10 +0,0 @@
-import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
-
-export const focusVisibleStyles = (props: StyleFunctionProps) => ({
-  _focusVisible: {
-    outlineWidth: "2px",
-    outlineColor: mode("outline.focus.light", "outline.focus.dark")(props),
-    outlineStyle: "solid",
-    outlineOffset: "1px",
-  },
-});

package/src/toast/ActionToast.test.tsx

@@ -1,22 +0,0 @@
-import { render } from "@testing-library/react";
-import React from "react";
-import { vi } from "vitest";
-import { ActionToast } from "./ActionToast";
-
-describe("<ActionToast />", () => {
-  it("renders a button", async () => {
-    const handleClick = vi.fn();
-    const { getByRole } = render(
-      <ActionToast
-        variant="success"
-        onClick={handleClick}
-        buttonText="Click me"
-      >
-        Test text
-      </ActionToast>,
-    );
-    getByRole("button").click();
-    expect(handleClick).toHaveBeenCalled();
-    expect(getByRole("button")).toHaveTextContent("Click me");
-  });
-});

package/src/toast/ActionToast.tsx

@@ -1,28 +0,0 @@
-import { Box } from "@chakra-ui/react";
-import React from "react";
-import { Button } from "..";
-import { BaseToast, BaseToastProps } from "./BaseToast";
-
-type ActionToastProps = BaseToastProps & {
-  onClick: () => void;
-  buttonText: string;
-};
-/** A toast with a button */
-export const ActionToast = ({
-  children,
-  onClick,
-  variant,
-  buttonText,
-  id,
-}: ActionToastProps) => {
-  return (
-    <BaseToast variant={variant} id={id}>
-      <Box marginRight={2} flexGrow="1">
-        {children}
-      </Box>
-      <Button variant="tertiary" size="sm" onClick={onClick}>
-        {buttonText}
-      </Button>
-    </BaseToast>
-  );
-};

package/src/toast/BaseToast.test.tsx

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

package/src/toast/BaseToast.tsx

@@ -1,75 +0,0 @@
-import { Flex, useStyleConfig } from "@chakra-ui/react";
-import {
-  ErrorOutline24Icon,
-  InformationOutline24Icon,
-  SuccessOutline24Icon,
-} from "@vygruppen/spor-icon-react";
-import React from "react";
-import { createTexts, useTranslation } from "..";
-
-export type BaseToastProps = {
-  children: React.ReactNode;
-  variant: "success" | "info" | "error";
-  id?: string;
-};
-/**
- * A basic toast component.
- **/
-export const BaseToast = ({ children, variant, id }: BaseToastProps) => {
-  const styles = useStyleConfig("Toast", { variant });
-  return (
-    <Flex sx={styles} id={id}>
-      <ToastIcon variant={variant} />
-      {children}
-    </Flex>
-  );
-};
-
-type ToastIconProps = Pick<BaseToastProps, "variant">;
-
-/** Internal component for selecting the correct icon to show */
-const ToastIcon = ({ variant }: ToastIconProps) => {
-  const Icon = getIcon(variant);
-  const { t } = useTranslation();
-  return (
-    <Icon
-      flexShrink={0}
-      aria-label={t(texts[variant])}
-      marginRight={1}
-      marginY={1.5}
-      color="darkGrey"
-    />
-  );
-};
-
-const getIcon = (variant: BaseToastProps["variant"]) => {
-  switch (variant) {
-    case "info":
-      return InformationOutline24Icon;
-    case "success":
-      return SuccessOutline24Icon;
-    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",
-  },
-  error: {
-    nb: "Feil",
-    nn: "Feil",
-    sv: "Error",
-    en: "Error",
-  },
-});

package/src/toast/ClosableToast.test.tsx

@@ -1,17 +0,0 @@
-import { render } from "@testing-library/react";
-import React from "react";
-import { vi } from "vitest";
-import { ClosableToast } from "./ClosableToast";
-
-describe("<ClosableToast />", () => {
-  it("renders a button", async () => {
-    const handleClick = vi.fn();
-    const { getByRole } = render(
-      <ClosableToast variant="success" onClose={handleClick}>
-        Test text
-      </ClosableToast>,
-    );
-    getByRole("button").click();
-    expect(handleClick).toHaveBeenCalled();
-  });
-});

package/src/toast/ClosableToast.tsx

@@ -1,40 +0,0 @@
-import { Box, useMultiStyleConfig } from "@chakra-ui/react";
-import { CloseFill18Icon } from "@vygruppen/spor-icon-react";
-import React from "react";
-import { IconButton, createTexts, useTranslation } from "..";
-import { BaseToast, BaseToastProps } from "./BaseToast";
-
-type ClosableToastProps = BaseToastProps & {
-  onClose: () => void;
-};
-/** A closable toast */
-export const ClosableToast = ({
-  children,
-  onClose,
-  variant,
-  id,
-}: ClosableToastProps) => {
-  const styles = useMultiStyleConfig("Toast", { variant });
-  const { t } = useTranslation();
-  return (
-    <BaseToast variant={variant} id={id}>
-      <Box flexGrow="1">{children}</Box>
-      <IconButton
-        sx={styles.dismissButton}
-        variant="ghost"
-        aria-label={t(texts.dismiss)}
-        icon={<CloseFill18Icon />}
-        onClick={onClose}
-      />
-    </BaseToast>
-  );
-};
-
-const texts = createTexts({
-  dismiss: {
-    nb: "Lukk",
-    nn: "Lukk",
-    sv: "Dölj",
-    en: "Dismiss",
-  },
-});

package/src/toast/useToast.tsx

@@ -1,121 +0,0 @@
-import { useToast as useChakraToast } from "@chakra-ui/react";
-import React, { useCallback } from "react";
-import { ActionToast } from "./ActionToast";
-import { BaseToast, BaseToastProps } from "./BaseToast";
-import { ClosableToast } from "./ClosableToast";
-
-type ClosableToastOptions = {
-  isClosable: true;
-  /** Callback for when the close button is clicked */
-  onClose?: () => void;
-};
-
-type ActionToastOptions = {
-  isClosable?: false;
-  /** Callback for when the button is clicked */
-  onClick: () => void;
-  /** The button text */
-  buttonText: string;
-};
-
-type BaseToastOptions = {
-  /** How the toast looks */
-  variant: BaseToastProps["variant"];
-  /** The content of the toast. Keep it short! */
-  text: string;
-  /**
-   * Number of milliseconds to show the toast.
-   *
-   * Defaults to 6000.
-   */
-  duration?: number;
-};
-
-export type ToastOptions = BaseToastOptions &
-  (ClosableToastOptions | ActionToastOptions | {});
-
-/**
- * Creates a function that can trigger toasts
- *
- * ```tsx
- * const toast = useToast();
- * return (
- *   <Button
- *     onClick={() =>
- *        toast({ text: "Hello world", variant: "info" })
- *     }
- *   >
- *    Click me
- *   </Button>
- * ```
- */
-export const useToast = () => {
-  const toast = useChakraToast();
-  const wrappedToast = useCallback(
-    (opts: ToastOptions) => {
-      const Toast = getToastComponent(opts);
-      toast({
-        ...opts,
-        render: Toast,
-      });
-    },
-    [toast],
-  );
-  return wrappedToast;
-};
-
-type RenderArgs = { onClose: () => void; id?: string | number };
-
-const getToastComponent = (opts: ToastOptions) => {
-  if ("isClosable" in opts && opts.isClosable) {
-    return ({ onClose, id }: RenderArgs) => {
-      if (id === undefined) {
-        return null; // Handle the case where id is undefined
-      }
-
-      return (
-        <ClosableToast
-          id={id.toString()}
-          variant={opts.variant}
-          onClose={() => {
-            if (opts.onClose) {
-              opts.onClose();
-            }
-            onClose();
-          }}
-        >
-          {opts.text}
-        </ClosableToast>
-      );
-    };
-  }
-  if ("buttonText" in opts) {
-    return ({ id }: RenderArgs) => {
-      if (id === undefined) {
-        return null; // Handle the case where id is undefined
-      }
-
-      return (
-        <ActionToast
-          id={id.toString()}
-          variant={opts.variant}
-          buttonText={opts.buttonText}
-          onClick={opts.onClick}
-        >
-          {opts.text}
-        </ActionToast>
-      );
-    };
-  }
-  return ({ id }: RenderArgs) => {
-    if (id === undefined) {
-      return null; // Handle the case where id is undefined
-    }
-
-    return (
-      <BaseToast id={id.toString()} variant={opts.variant}>
-        {opts.text}
-      </BaseToast>
-    );
-  };
-};