@nypl/design-system-react-components 0.25.7 → 0.25.10

package/src/components/Input/Input.stories.tsx

@@ -1,133 +0,0 @@
-import React from "react";
-
-import Input from "./Input";
-import { InputTypes } from "./InputTypes";
-import Label from "../Label/Label";
-import Button from "../Button/Button";
-import { ButtonTypes } from "../Button/ButtonTypes";
-import HelperErrorText from "../HelperErrorText/HelperErrorText";
-import { action } from "@storybook/addon-actions";
-import { getCategory } from "../../utils/componentCategories";
-
-export default {
-  title: getCategory("Input"),
-  component: Input,
-};
-
-export const input = () => (
-  <>
-    <Label htmlFor="inputID" optReqFlag="Required" id={"label"}>
-      Choose your islander name:
-    </Label>
-    <Input
-      id="inputID"
-      ariaLabel="Input Label"
-      ariaLabelledBy={"helperText"}
-      required={false}
-      placeholder="CoolPerson99"
-      type={InputTypes.text}
-      disabled={false}
-    ></Input>
-    <HelperErrorText isInvalid={false} id={"helperText"}>
-      Once you pick a name for your islander it cannot be changed, so choose
-      wisely!
-    </HelperErrorText>
-  </>
-);
-
-input.storyName = "Input";
-input.parameters = {
-  design: {
-    type: "figma",
-    url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11895%3A547",
-  },
-  jest: ["Input.test.tsx"],
-};
-
-let groupErrored;
-
-export const inputGroup = () => (
-  <fieldset className="fieldset">
-    <legend className="legend">Construction Time Request Form:</legend>
-    <div className="input-group">
-      <div style={{ flex: "1" }}>
-        <Label htmlFor="input1" id={"label1"}>
-          From
-        </Label>
-        <Input
-          id="input1"
-          ariaLabelledBy="helperText1 sharedHelperText label1"
-          errored={groupErrored ? true : false}
-          required={true}
-          type={InputTypes.text}
-        ></Input>
-        <HelperErrorText isInvalid={false} id={"helperText1"}>
-          "E.g., 10am"
-        </HelperErrorText>
-      </div>
-
-      <div style={{ flex: "1" }}>
-        <Label htmlFor="input2" id={"label2"}>
-          To
-        </Label>
-        <Input
-          id="input2"
-          ariaLabelledBy={
-            groupErrored
-              ? "helperText2 sharedHelperText label2"
-              : "helperText2 label2"
-          }
-          errored={false}
-          required={true}
-          type={InputTypes.text}
-        ></Input>
-        <HelperErrorText isInvalid={false} id={"helperText2"}>
-          E.g., 11am
-        </HelperErrorText>
-      </div>
-    </div>
-    <Button
-      onClick={action("clicked")}
-      id="button"
-      buttonType={ButtonTypes.Primary}
-      type="submit"
-    >
-      Apply
-    </Button>
-  </fieldset>
-);
-
-inputGroup.storyName = "Input Group";
-inputGroup.parameters = {
-  design: {
-    type: "figma",
-    url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11895%3A547",
-  },
-  jest: ["Input.test.tsx"],
-};
-
-export const inputAttributes = () => (
-  <>
-    <Label htmlFor="inputID-attrs" optReqFlag={"Required"} id={"label"}>
-      Choose your islander name:
-    </Label>
-    <Input
-      id="inputID-attrs"
-      ariaLabel="Input Label"
-      ariaLabelledBy="helperText-attrs"
-      required={false}
-      placeholder={"CoolPerson42"}
-      type={InputTypes.text}
-      attributes={{
-        onBlur: action("onBlur"),
-        onChange: action("onChange"),
-        maxLength: 10,
-        tabIndex: 0,
-      }}
-    ></Input>
-    <HelperErrorText isInvalid={false} id="helperText-attrs">
-      {"Change the max length for 'text' input as an example! And note " +
-        "the actions being called for the passed object in the `attributes` props."}
-    </HelperErrorText>
-  </>
-);

package/src/components/Input/Input.test.tsx

@@ -1,266 +0,0 @@
-import * as React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
-import { axe } from "jest-axe";
-import userEvent from "@testing-library/user-event";
-
-import Label from "../Label/Label";
-import HelperErrorText from "../HelperErrorText/HelperErrorText";
-import Input from "./Input";
-import { InputTypes } from "./InputTypes";
-
-describe("Input Accessibility", () => {
-  it("passes axe accessibility test", async () => {
-    const { container } = render(
-      <Input
-        id="inputID"
-        ariaLabel="Input Label"
-        ariaLabelledBy={"helperText"}
-        required={true}
-        placeholder={"Input Placeholder"}
-        type={InputTypes.text}
-        attributes={{ onClick: jest.fn() }}
-        onChange={jest.fn()}
-      />
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});
-
-describe("Input", () => {
-  let changeHandler;
-  let clickHander;
-
-  beforeEach(() => {
-    clickHander = jest.fn();
-    changeHandler = jest.fn();
-    render(
-      <Input
-        id="inputID"
-        ariaLabel="Input Label"
-        ariaLabelledBy="helperText"
-        required={true}
-        placeholder="Input Placeholder"
-        type={InputTypes.text}
-        attributes={{ onClick: clickHander }}
-        onChange={changeHandler}
-      ></Input>
-    );
-  });
-
-  it("Renders Input", () => {
-    expect(screen.getByLabelText("Input Label")).toBeInTheDocument();
-  });
-
-  it("Renders aria-label", () => {
-    expect(screen.getByLabelText("Input Label")).toHaveAttribute(
-      "aria-label",
-      "Input Label"
-    );
-  });
-
-  it("Renders placeholder text", () => {
-    expect(
-      screen.getByPlaceholderText("Input Placeholder")
-    ).toBeInTheDocument();
-  });
-
-  it("Adds aria-required prop if input is required", () => {
-    expect(screen.getByLabelText("Input Label")).toHaveAttribute("aria-label");
-  });
-
-  it("Allows user to pass in additional attributes", () => {
-    expect(clickHander).toHaveBeenCalledTimes(0);
-    userEvent.click(screen.getByLabelText("Input Label"));
-    expect(clickHander).toHaveBeenCalledTimes(1);
-  });
-
-  it("Changing the value calls the onChange handler", () => {
-    expect(changeHandler).toHaveBeenCalledTimes(0);
-    fireEvent.change(screen.getByLabelText("Input Label"), {
-      target: { value: "Hello" },
-    });
-    expect(changeHandler).toHaveBeenCalledTimes(1);
-  });
-});
-
-describe("Input with Label", () => {
-  beforeEach(() => {
-    render(
-      <>
-        <Label htmlFor="inputID" id="label">
-          Input Label
-        </Label>
-        <Input
-          id="inputID"
-          ariaLabelledBy="label helperText"
-          ariaLabel="Input Label"
-          required={true}
-          placeholder="Input Placeholder"
-          type={InputTypes.text}
-        />
-        <HelperErrorText isInvalid={false} id="helperText">
-          Helper Text Content
-        </HelperErrorText>
-      </>
-    );
-  });
-
-  it("Renders Input", () => {
-    expect(screen.getByText("Input Label")).toBeInTheDocument();
-  });
-
-  it("Renders aria-label", () => {
-    expect(screen.getByLabelText("Input Label")).toHaveAttribute(
-      "aria-label",
-      "Input Label"
-    );
-  });
-
-  it("Renders aria-labelledby for inputId and ariaLabelledBy", () => {
-    expect(screen.getByLabelText("Input Label")).toHaveAttribute(
-      "aria-labelledby",
-      "label helperText"
-    );
-  });
-});
-
-describe("Input Group", () => {
-  beforeEach(() => {
-    render(
-      <fieldset>
-        <legend>Input Group Label Legend</legend>
-        <>
-          <>
-            <Label htmlFor="input1" id={"label1"}>
-              From
-            </Label>
-            <Input
-              id="input1"
-              ariaLabelledBy="label1 helperText1 sharedHelperText"
-              required={true}
-              type={InputTypes.text}
-            ></Input>
-            <HelperErrorText isInvalid={false} id={"helperText1"}>
-              Input 1 Helper Text
-            </HelperErrorText>
-          </>
-
-          <>
-            <Label htmlFor="input2" id={"label2"}>
-              To
-            </Label>
-            <Input
-              id="input2"
-              ariaLabelledBy={"label2 helperText2 sharedHelperText"}
-              required={true}
-              type={InputTypes.text}
-            ></Input>
-            <HelperErrorText isInvalid={false} id={"helperText2"}>
-              Input 2 Helper Text
-            </HelperErrorText>
-          </>
-        </>
-        <HelperErrorText isInvalid={true} id={"sharedHelperText"}>
-          Additional Error Text
-        </HelperErrorText>
-      </fieldset>
-    );
-  });
-  it("Renders legend", () => {
-    expect(screen.getByText("Input Group Label Legend")).toBeInTheDocument();
-  });
-
-  it("Renders two inputs", () => {
-    expect(screen.getByText("From")).toBeInTheDocument();
-    expect(screen.getByText("To")).toBeInTheDocument();
-  });
-});
-
-describe("Renders HTML attributes passed through the `attributes` prop", () => {
-  const onChangeSpy = jest.fn();
-  const onBlurSpy = jest.fn();
-  beforeEach(() => {
-    render(
-      <Input
-        id="inputID-attributes"
-        ariaLabel="Input Label"
-        ariaLabelledBy="helperText-attributes"
-        placeholder="Input Placeholder"
-        type={InputTypes.text}
-        attributes={{
-          onChange: onChangeSpy,
-          onBlur: onBlurSpy,
-          maxLength: 10,
-          tabIndex: 0,
-        }}
-      />
-    );
-  });
-
-  it("Has a maxlength for the input element", () => {
-    expect(screen.getByLabelText("Input Label")).toHaveAttribute(
-      "maxLength",
-      "10"
-    );
-  });
-
-  it("Has a tabIndex", () => {
-    expect(screen.getByLabelText("Input Label")).toHaveAttribute(
-      "tabIndex",
-      "0"
-    );
-  });
-
-  it("Calls the onChange function", () => {
-    expect(onChangeSpy).toHaveBeenCalledTimes(0);
-    fireEvent.change(screen.getByLabelText("Input Label"), {
-      target: { value: "Hello" },
-    });
-    expect(onChangeSpy).toHaveBeenCalledTimes(1);
-  });
-
-  it("Calls the onBlur function", () => {
-    expect(onBlurSpy).toHaveBeenCalledTimes(0);
-    fireEvent.blur(screen.getByLabelText("Input Label"));
-    expect(onBlurSpy).toHaveBeenCalledTimes(1);
-  });
-});
-
-// TODO:
-// describe("Forwarding refs", () => {
-//   it("Passes the ref to the input element", () => {
-//     const ref = React.createRef<HTMLInputElement>();
-//     const container = render(
-//       <Input
-//         id="inputID-attributes"
-//         ariaLabel="Input Label"
-//         ariaLabelledBy={"helperText-attributes"}
-//         placeholder={"Input Placeholder"}
-//         type={InputTypes.text}
-//         ref={ref}
-//       ></Input>
-//     );
-//     expect(container.find("input").instance()).toEqual(ref.current);
-//   });
-// });
-
-describe("Hidden input", () => {
-  it("Renders a hidden type input", () => {
-    render(
-      <Input
-        id="inputID-hidden"
-        ariaLabel="Hidden Input Label"
-        type={InputTypes.hidden}
-        value="hidden"
-      />
-    );
-
-    expect(screen.getByLabelText("Hidden Input Label")).toHaveAttribute(
-      "aria-hidden"
-    );
-    expect(screen.getByLabelText("Hidden Input Label")).toHaveAttribute(
-      "value",
-      "hidden"
-    );
-  });
-});

package/src/components/Input/Input.tsx

@@ -1,81 +0,0 @@
-import * as React from "react";
-import bem from "../../utils/bem";
-import { InputTypes } from "./InputTypes";
-
-export interface InputProps {
-  /** Additional attributes to pass to the <input> tag */
-  attributes?: { [key: string]: any };
-  /** Populates the aria-label on the input */
-  ariaLabel?: string;
-  /** Populates the aria-labelledby on the input */
-  ariaLabelledBy?: string;
-  /** BlockName for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-  blockName?: string;
-  /** className you can add in addition to 'input' */
-  className?: string;
-  /** ID that other components can cross reference for accessibility purposes */
-  id?: string;
-  /** Adds the 'disabled' prop to the input when true */
-  disabled?: boolean;
-  /** Helper for modifiers array; adds 'errored' styling */
-  errored?: boolean;
-  /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-  modifiers?: string[];
-  /** Populates the placeholder of the input */
-  placeholder?: string;
-  /** Will add 'aria-required: true' to input */
-  required?: boolean;
-  /** HTML Input types as defined by MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input */
-  type?: InputTypes;
-  /** Populates the value of the input */
-  value?: string | number;
-  /** The action to perform on the `<input>`'s onChange function  */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref?) => {
-  const {
-    ariaLabel,
-    ariaLabelledBy,
-    attributes,
-    blockName,
-    className,
-    disabled,
-    errored,
-    id,
-    placeholder,
-    required,
-    type = "text",
-    value,
-    onChange,
-  } = props;
-
-  const modifiers = props.modifiers ? props.modifiers : [];
-
-  if (errored) {
-    modifiers.push("error");
-  }
-  const transformedInput = (
-    <input
-      id={id}
-      className={bem("input", modifiers, blockName, [className])}
-      type={type}
-      value={value}
-      aria-label={ariaLabel}
-      aria-labelledby={ariaLabelledBy}
-      aria-required={required}
-      aria-hidden={type === InputTypes.hidden}
-      disabled={disabled}
-      placeholder={placeholder}
-      onChange={onChange}
-      ref={ref}
-      {...attributes}
-    />
-  );
-
-  return transformedInput;
-});
-
-Input.displayName = "Input";
-
-export default Input;

package/src/components/Input/InputTypes.tsx

@@ -1,8 +0,0 @@
-// HTML Input types as defined by MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
-export enum InputTypes {
-  // eslint-disable-next-line id-blacklist
-  number = "number",
-  password = "password",
-  text = "text",
-  hidden = "hidden",
-}

package/src/components/Input/_Input.scss

@@ -1,78 +0,0 @@
-$break-input-mobile: 400px;
-
-.input {
-  padding: var(--nypl-space-xs);
-  margin-bottom: var(--nypl-space-xs);
-
-  border: 1px solid var(--nypl-colors-ui-gray-medium);
-
-  &[type="text"],
-  &[type="number"],
-  &[type="password"] {
-    width: 100%;
-  }
-
-  &[type="radio"] {
-    width: unset;
-
-    + .label {
-      display: unset;
-      margin-left: var(--nypl-space-s);
-    }
-  }
-
-  &::-webkit-input-placeholder {
-    color: var(--nypl-colors-ui-gray-dark);
-  }
-
-  &:-moz-placeholder {
-    color: var(--nypl-colors-ui-gray-dark);
-  }
-
-  &:-ms-input-placeholder {
-    color: var(--nypl-colors-ui-gray-dark);
-  }
-
-  &:hover {
-    border-color: var(--nypl-colors-ui-gray-dark);
-  }
-
-  &:disabled {
-    background-color: var(--nypl-colors-ui-gray-xx-light-cool);
-    color: var(--nypl-colors-ui-gray-xdark);
-  }
-
-  &:active,
-  &:focus,
-  &:active:hover,
-  &:focus:hover {
-    border: 1px solid var(--nypl-colors-ui-focus);
-    box-shadow: 0;
-    outline: 1px solid var(--nypl-colors-ui-focus);
-    z-index: 9999;
-  }
-
-  &--error {
-    border: 1px solid var(--nypl-colors-ui-error-primary);
-  }
-}
-
-.input-group {
-  @include breakpoint($break-input-mobile) {
-    display: flex;
-    justify-content: space-between;
-
-    > *:not(:last-child) {
-      margin-right: var(--nypl-space-m);
-    }
-  }
-}
-
-// Used in `Input.stories.tsx`
-.fieldset {
-  @include fieldset-reset;
-}
-.legend {
-  border: 0;
-  font-weight: 500;
-}

package/src/components/StyleGuide/UIDocCard.tsx

@@ -1,36 +0,0 @@
-import * as React from "react";
-import CardEdition from "../CardEdition/CardEdition";
-
-interface UIDocCardProps {
-  /** backgroundColor of the doc card */
-  backgroundColor: string;
-}
-
-/**
- * UIDocCard
- * Component only used for Storybook.
- */
-export default function UIDocCard(
-  props: React.PropsWithChildren<UIDocCardProps>
-) {
-  const { backgroundColor, children } = props;
-
-  return (
-    <CardEdition className="var-docs">
-      <div
-        style={{
-          alignItems: "center",
-          backgroundColor: backgroundColor,
-          borderBottom: "1px solid var(--nypl-colors-ui-gray-light-cool)",
-          color: "white",
-          display: "flex",
-          height: "100px",
-          justifyContent: "center",
-          marginBottom: "15px",
-          width: "100%",
-        }}
-      ></div>
-      {children}
-    </CardEdition>
-  );
-}

package/src/helpers/CSSVariablesHelper.tsx

@@ -1,34 +0,0 @@
-import { CSSVariablesInterface } from "../interfaces";
-
-const cssVariables: CSSVariablesInterface = {};
-
-const buildCSSObject = function (_: any, cssRule) {
-  // All of our global variables are applied to :root
-  if (cssRule.selectorText === ":root") {
-    let css = cssRule.cssText.split("{");
-    css = css[1].replace("}", "").split(";");
-    for (let i = 0; i < css.length; i++) {
-      const prop = css[i].split(":");
-      if (
-        // if a valid CSS variable, i.e. --[whatever]
-        prop.length === 2 &&
-        prop[0].indexOf("--") === 1
-      ) {
-        cssVariables[prop[0]] = prop[1];
-      }
-    }
-  }
-};
-
-[].slice.call(document.styleSheets).reduce(function (prev, styleSheet) {
-  if (styleSheet.cssRules) {
-    return (
-      prev +
-      [].slice.call(styleSheet.cssRules).reduce(function (prev, cssRule) {
-        buildCSSObject(prev, cssRule);
-      }, "")
-    );
-  }
-}, "");
-
-export default cssVariables;

package/src/helpers/getCSSVariable.tsx

@@ -1,5 +0,0 @@
-export default function getCSSVariable(name: string) {
-  const propertyValue =
-    getComputedStyle(document.documentElement).getPropertyValue(name) || "";
-  return propertyValue;
-}

package/src/interfaces.ts

@@ -1,3 +0,0 @@
-export interface CSSVariablesInterface {
-  key?: string;
-}

package/src/utils/bem.ts

@@ -1,44 +0,0 @@
-// Re-written in TS from https://github.com/drupal-pattern-lab/bem-twig-extension
-
-export default function bem(
-  baseClass: string,
-  modifiers?: string[],
-  blockName?: string,
-  extra?: string[]
-) {
-  const classes = [];
-  // If using a blockname to override default class.
-  if (blockName) {
-    classes.push(blockName.concat("__").concat(baseClass));
-
-    // Set blockname--modifier classes for each modifier.
-    if (modifiers?.length > 0) {
-      modifiers.forEach((modifier) => {
-        classes.push(
-          blockName.concat("__").concat(baseClass).concat("--").concat(modifier)
-        );
-      });
-    }
-  }
-  // If not overriding base class.
-  else {
-    // Set base class.
-    classes.push(baseClass);
-
-    if (modifiers?.length > 0) {
-      modifiers.forEach((modifier) => {
-        classes.push(baseClass.concat("--").concat(modifier));
-      });
-    }
-  }
-
-  // If extra non-BEM classes are added.
-  if (extra?.length > 0) {
-    extra.forEach((extraClass) => {
-      classes.push(extraClass);
-    });
-  }
-
-  const attributes = classes.join(" ");
-  return attributes;
-}