@nypl/design-system-react-components 1.0.2 → 1.0.3-beta

package/src/components/ComponentWrapper/ComponentWrapper.test.tsx

@@ -1,163 +0,0 @@
-import * as React from "react";
-import { render, screen } from "@testing-library/react";
-import { axe } from "jest-axe";
-import renderer from "react-test-renderer";
-
-import ComponentWrapper from "./ComponentWrapper";
-
-/**
- * @NOTE while the component is accessible, whatever is passed as children
- * elements may not be considered accessible. This is up to the developer to
- * make sure to pass accessible elements.
- */
-describe("ComponentWrapper Accessibility", () => {
-  it("Passes axe accessibility test", async () => {
-    const { container } = render(
-      <ComponentWrapper
-        descriptionText="description text"
-        headingText="heading text"
-        helperText="helper text"
-        id="id"
-        invalidText="invalid text"
-        isInvalid={false}
-      >
-        <div>children elements</div>
-      </ComponentWrapper>
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-
-  it("Passes axe accessibility test without certain props", async () => {
-    const { container } = render(
-      <ComponentWrapper id="id">
-        <div>children elements</div>
-      </ComponentWrapper>
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});
-
-describe("ComponentWrapper", () => {
-  it("renders with different text sections and children elements", () => {
-    render(
-      <ComponentWrapper
-        descriptionText="description text"
-        headingText="heading text"
-        helperText="helper text"
-        id="id"
-        invalidText="invalid text"
-        isInvalid={false}
-      >
-        <div>children elements</div>
-      </ComponentWrapper>
-    );
-
-    expect(screen.getByText("description text")).toBeInTheDocument();
-    expect(screen.getByText("heading text")).toBeInTheDocument();
-    expect(screen.getByText("helper text")).toBeInTheDocument();
-    expect(screen.queryByText("invalid text")).not.toBeInTheDocument();
-    expect(screen.getByText("children elements")).toBeInTheDocument();
-  });
-
-  it("renders with only its children elements", () => {
-    render(
-      <ComponentWrapper id="id">
-        <div>children elements</div>
-      </ComponentWrapper>
-    );
-
-    expect(screen.queryByText("description text")).not.toBeInTheDocument();
-    expect(screen.queryByText("heading text")).not.toBeInTheDocument();
-    expect(screen.queryByText("helper text")).not.toBeInTheDocument();
-    expect(screen.queryByText("invalid text")).not.toBeInTheDocument();
-    expect(screen.getByText("children elements")).toBeInTheDocument();
-  });
-
-  it("renders invalid text in the internal HelperErrorText component", () => {
-    const { rerender } = render(
-      <ComponentWrapper
-        descriptionText="description text"
-        headingText="heading text"
-        helperText="helper text"
-        id="id"
-        invalidText="invalid text"
-        isInvalid={false}
-      >
-        <div>children elements</div>
-      </ComponentWrapper>
-    );
-
-    expect(screen.getByText("helper text")).toBeInTheDocument();
-    expect(screen.queryByText("invalid text")).not.toBeInTheDocument();
-
-    rerender(
-      <ComponentWrapper
-        descriptionText="description text"
-        headingText="heading text"
-        helperText="helper text"
-        id="id"
-        invalidText="invalid text"
-        isInvalid={true}
-      >
-        <div>children elements</div>
-      </ComponentWrapper>
-    );
-
-    expect(screen.queryByText("helper text")).not.toBeInTheDocument();
-    expect(screen.getByText("invalid text")).toBeInTheDocument();
-  });
-
-  it("Renders the UI snapshot correctly", () => {
-    const basic = renderer
-      .create(
-        <ComponentWrapper
-          descriptionText="description text"
-          headingText="heading text"
-          helperText="helper text"
-          id="id"
-          invalidText="invalid text"
-          isInvalid={false}
-        >
-          <div>children elements</div>
-        </ComponentWrapper>
-      )
-      .toJSON();
-    const onlyWithChildren = renderer
-      .create(
-        <ComponentWrapper id="id">
-          <div>children elements</div>
-        </ComponentWrapper>
-      )
-      .toJSON();
-    const isInvalid = renderer
-      .create(
-        <ComponentWrapper
-          descriptionText="description text"
-          headingText="heading text"
-          helperText="helper text"
-          id="id"
-          invalidText="invalid text"
-          isInvalid={true}
-        >
-          <div>children elements</div>
-        </ComponentWrapper>
-      )
-      .toJSON();
-    const withChakraProps = renderer.create(
-      <ComponentWrapper id="chakra" p="20px" color="ui.error.primary">
-        <div>children elements</div>
-      </ComponentWrapper>
-    );
-    const withOtherProps = renderer.create(
-      <ComponentWrapper id="props" data-testid="props">
-        <div>children elements</div>
-      </ComponentWrapper>
-    );
-
-    expect(basic).toMatchSnapshot();
-    expect(onlyWithChildren).toMatchSnapshot();
-    expect(isInvalid).toMatchSnapshot();
-    expect(withChakraProps).toMatchSnapshot();
-    expect(withOtherProps).toMatchSnapshot();
-  });
-});

package/src/components/ComponentWrapper/ComponentWrapper.tsx

@@ -1,76 +0,0 @@
-import { Box, chakra, useMultiStyleConfig } from "@chakra-ui/react";
-import * as React from "react";
-
-import Heading from "../Heading/Heading";
-import HelperErrorText, {
-  HelperErrorTextType,
-} from "../HelperErrorText/HelperErrorText";
-import Text from "../Text/Text";
-export interface ComponentWrapperProps {
-  /** The UI elements that will be wrapped by this component */
-  children: React.ReactNode;
-  /** A class name for the `div` parent element. */
-  className?: string;
-  /** Optional string to set the text for the component's description */
-  descriptionText?: string;
-  /** Optional string to set the text for a `Heading` component */
-  headingText?: string;
-  /** Optional string to set the text for a `HelperErrorText` component */
-  helperText?: HelperErrorTextType;
-  /** Styles that target the helper text. */
-  helperTextStyles?: { [key: string]: any };
-  /** ID that other components can cross reference for accessibility purposes */
-  id?: string;
-  /** Optional string to populate the `HelperErrorText` for the error state
-   * when `isInvalid` is true. */
-  invalidText?: HelperErrorTextType;
-  /** Sets invalid text in the error state. */
-  isInvalid?: boolean;
-  /** Offers the ability to hide the helper/invalid text. */
-  showHelperInvalidText?: boolean;
-}
-
-export const ComponentWrapper = chakra(
-  (props: React.PropsWithChildren<ComponentWrapperProps>) => {
-    const {
-      children,
-      className,
-      descriptionText,
-      headingText,
-      helperText,
-      helperTextStyles = {},
-      id,
-      invalidText,
-      isInvalid = false,
-      showHelperInvalidText = true,
-      ...rest
-    } = props;
-    const hasChildren = !!children;
-    const styles = useMultiStyleConfig("ComponentWrapper", { hasChildren });
-    const footnote = isInvalid ? invalidText : helperText;
-
-    // Note: Typescript warns when there are no children passed and
-    // doesn't compile. This is meant to log in non-Typescript apps.
-    if (!hasChildren) {
-      console.warn("NYPL Reservoir ComponentWrapper: No children were passed.");
-    }
-
-    return (
-      <Box className={className} id={`${id}-wrapper`} __css={styles} {...rest}>
-        {headingText && <Heading id={`${id}-heading`} text={headingText} />}
-        {descriptionText && <Text>{descriptionText}</Text>}
-        {children}
-        {footnote && showHelperInvalidText && (
-          <HelperErrorText
-            id={`${id}-helperText`}
-            isInvalid={isInvalid}
-            text={footnote}
-            __css={{ ...styles.helperErrorText, ...helperTextStyles }}
-          />
-        )}
-      </Box>
-    );
-  }
-);
-
-export default ComponentWrapper;

package/src/components/ComponentWrapper/__snapshots__/ComponentWrapper.test.tsx.snap

@@ -1,103 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ComponentWrapper Renders the UI snapshot correctly 1`] = `
-<div
-  className="css-1xdhyk6"
-  id="id-wrapper"
->
-  <h2
-    className="chakra-heading css-1xdhyk6"
-    id="id-heading"
-  >
-    heading text
-  </h2>
-  <p
-    className="chakra-text css-1xdhyk6"
-  >
-    description text
-  </p>
-  <div>
-    children elements
-  </div>
-  <div
-    aria-atomic={true}
-    aria-live="off"
-    className="css-1xdhyk6"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "helper text",
-      }
-    }
-    data-isinvalid={false}
-    id="id-helperText"
-  />
-</div>
-`;
-
-exports[`ComponentWrapper Renders the UI snapshot correctly 2`] = `
-<div
-  className="css-1xdhyk6"
-  id="id-wrapper"
->
-  <div>
-    children elements
-  </div>
-</div>
-`;
-
-exports[`ComponentWrapper Renders the UI snapshot correctly 3`] = `
-<div
-  className="css-1xdhyk6"
-  id="id-wrapper"
->
-  <h2
-    className="chakra-heading css-1xdhyk6"
-    id="id-heading"
-  >
-    heading text
-  </h2>
-  <p
-    className="chakra-text css-1xdhyk6"
-  >
-    description text
-  </p>
-  <div>
-    children elements
-  </div>
-  <div
-    aria-atomic={true}
-    aria-live="polite"
-    className="css-1xdhyk6"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "invalid text",
-      }
-    }
-    data-isinvalid={true}
-    id="id-helperText"
-  />
-</div>
-`;
-
-exports[`ComponentWrapper Renders the UI snapshot correctly 4`] = `
-<div
-  className="css-kle7zy"
-  id="chakra-wrapper"
->
-  <div>
-    children elements
-  </div>
-</div>
-`;
-
-exports[`ComponentWrapper Renders the UI snapshot correctly 5`] = `
-<div
-  className="css-1xdhyk6"
-  data-testid="props"
-  id="props-wrapper"
->
-  <div>
-    children elements
-  </div>
-</div>
-`;