import React from "react";
import { HeaderText, BodyText } from "../InfoStyles";

export const InputInfo = () => {
  return (
    <>
      <HeaderText>Usage</HeaderText>
      <BodyText>
        To allow users to enter text or numbers. Typically appears in forms and
        dialogs.
      </BodyText>
      <BodyText>
        - All info fields should only allow the user to type in or select one
        option
      </BodyText>
      <br />
      <HeaderText>Accessibility</HeaderText>
      <BodyText>
        User should be able to tab through each item. When selecting dropdown
        options, selecting enter on the arrow icon displays all corresponding
        options.
      </BodyText>
      <br />
      <HeaderText>Rules</HeaderText>
      <BodyText>
        ✔️  Should always include a label describing what information the user
        is asked to enter, and an indication of whether it is a required or
        optional field.
      </BodyText>
      <BodyText>🔍  If used as a filter, label is optional. </BodyText>
      <br />
      <HeaderText>Props</HeaderText>
      <BodyText>
        <b>
          <u>placeholder:</u>
        </b>{" "}
        An optional <i>string</i> that serves as placeholder text
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>labelText:</u>
        </b>{" "}
        An optional <i>react component</i> that serves as the label text above the input
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>defaultValue:</u>
        </b>{" "}
        An optional <i>string</i> that serves as the initial input content
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>value:</u>
        </b>{" "}
        An optional <i>string</i> that serves as the input content value
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>onChange:</u>
        </b>{" "}
        An optional <i>callback function</i> to run when user changes input
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>onPressEnter:</u>
        </b>{" "}
        An optional <i>callback function</i> to run when user presses Enter key
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>disabled:</u>
        </b>{" "}
        An optional <i>boolean</i> that determines whether the input is disabled
      </BodyText>
      <BodyText>
        - Communicates a non-interactive component. User is unable to select or
        input any information in this state.
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>maxLength:</u>
        </b>{" "}
        An optional <i>number</i> that indicates the maximum amount of
        characters the user can input
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>status:</u>
        </b>{" "}
        An optional <i>string</i> that indicates the status of the component -
        typically left blank, pass in "error" to display the input's error state
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>errorText:</u>
        </b>{" "}
        An optional <i>string</i> that displays below the input when status =
        "error"
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>width:</u>
        </b>{" "}
        An optional <i>string</i> that indicates width of the component -
        options include "small", "medium", "large", "xl"
      </BodyText>
      <BodyText>- If left blank will default to "medium"</BodyText>
      <br />
      <BodyText>
        Additional props that are less commonly used but may be needed for
        future additional functionality can be found:{" "}
        <a href="https://ant.design/components/input">here</a>
      </BodyText>
      <br />
      <HeaderText>Input Number Props</HeaderText>
      <BodyText>
        <i>All of the above props also apply to input number with a few
        additional props:</i>
      </BodyText>
      <BodyText>
        <b>
          <u>controls:</u>
        </b>{" "}
        An optional <i>boolean</i> that indicates whether to show +/- controls,
        or set custom arrows icon
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>step:</u>
        </b>{" "}
        An optional <i>number or string</i> that indicates the amount by which
        the current number is increased/decreased with the controls - can be a
        whole number or integer
      </BodyText>
      <br />
      <BodyText>
        <b>
          <u>onStep:</u>
        </b>{" "}
        An optional <i>callback function</i> that is triggered when +/- buttons are clicked
      </BodyText>
      <br />
      <HeaderText>Size</HeaderText>
      <BodyText>
        - Available in four sizes controlled by the width prop: small, medium,
        large, xl
      </BodyText>
      <BodyText>
        - Fixed height of 48px, with the exception of Open Text fields which
        have a fixed height of 114px
      </BodyText>
      <br />
      <HeaderText>Error State</HeaderText>
      <BodyText>- Communicates a user or system mistake</BodyText>
      <BodyText>
        Always show supporting text in the error state. Supporting text should
        be left aligned and placed underneath the input field.
      </BodyText>
      <BodyText>
        - Error state supporting copy should be contextual to the input field
        label. Copy should give users enough context so they understand what
        action is required of them. Follow format of "Please enter the [input
        field name]".
      </BodyText>
      <BodyText>
        <i>Examples:</i>- "Please enter your state". - "Please enter your
        license number."
      </BodyText>
      <br />
      <HeaderText>Labels</HeaderText>
      <BodyText>
        Input field labels should be in title case and worded as statements,
        rather than questions.
      </BodyText>
      <BodyText>
        <i>
          e.g. "Mobile Phone Number" instead of "What is your mobile phone
          number?"
        </i>
      </BodyText>
      <br />
      <HeaderText>Search</HeaderText>
      <BodyText>
        User selects "Enter" to display corresponding search results. Can
        display on page refresh or takes user to a search results page, as
        determined by the page template.
      </BodyText>
    </>
  );
};
