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

export const ToastInfo = () => {
  return (
    <>
      <HeaderText>Usage</HeaderText>
      <BodyText>
        A non-disruptive message that appears at the bottom of the screen to
        provide quick, at-a-glance feedback on the outcome of an action
      </BodyText>
      <br />
      <HeaderText>Accessibility</HeaderText>
      <BodyText>
        Screen reader should announce toast text when it appears.
      </BodyText>
      <br />
      <HeaderText>Rules</HeaderText>
      <BodyText>
        ✔️  Should only be used to convey general confirmation upon a user’s
        action, and should not require users to take any additional actions.
      </BodyText>
      <BodyText>
        ✔️  Always include a close (X) icon on the top right corner in order to
        allow users to close the toast manually.
      </BodyText>
      <BodyText>
        ❌  Do not stack toasts on top of one another. Only one toast should
        appear at a time.
      </BodyText>
      <BodyText>
        🔍 If trying to convey more critical information, or users are required
        to take additional actions, use Action Sheet or Modals instead.
      </BodyText>
      <br />
      <HeaderText>Props</HeaderText>
      <BodyText>
        <b>
          <u>variant:</u>
        </b>{" "}
        An optional <i>string</i> that helps the component decide which icon to display
      </BodyText>
      <BodyText>- Possible values: "success", "warning", "error"</BodyText>
      <BodyText>
        - If left blank the icon will default to the Info icon
      </BodyText>
      <BodyText><i>eg. "success"</i></BodyText>
      <br />
      <BodyText>
        <b>
          <u>message:</u>
        </b>{" "}
        A required <i>string</i> that serves as the title of the toast component
      </BodyText>
      <BodyText>- Character count: Min: 5; max: 35</BodyText>
      <BodyText>
        - Do not change titles for Success, Warning, and Error variants. Info
        variant title can be changed.
      </BodyText>
      <BodyText><i>eg. "Roo-hoo!"</i></BodyText>
      <br />
      <BodyText>
        <b>
          <u>description:</u>
        </b>{" "}
        A required <i>string</i> that serves as the body text of the toast component
      </BodyText>
      <BodyText>- Character count: Max: 45</BodyText>
      <BodyText>- Body text should not exceed a single line.</BodyText>
      <BodyText>
        - Body text should only convey the outcome of the user's action. Do not
        include additional info like system time, or link out to any other pages
        within the platform.
      </BodyText>
      <BodyText>
        - Keep copy as succinct as possible, and use active voice. Do not use
        passive voice.
      </BodyText>
      <BodyText>
        - For success state, body text should follow format of:{" "}
        <b>"[Item] was successfully [action]"</b>
      </BodyText>
      <BodyText>
        <i>
          eg. "Shift request was successfully confirmed.", "Primary contact was
          successfully saved."
        </i>
      </BodyText>
      <br />
      <BodyText><b><u>color:</u></b> An optional <i>string</i> that indicates the background color of the toast component</BodyText>
      <BodyText>- If left blank will default to "#fff"</BodyText>
      <BodyText><i>eg. "#E6F2EE"</i></BodyText>
      <br />
      <BodyText><b><u>borderColor:</u></b> An optional <i>string</i> that indicates the top border color of the toast component</BodyText>
      <BodyText>-If left blank will default to "#412894"</BodyText>
      <BodyText><i>eg. "#007A4C"</i></BodyText>
      <br />
      <HeaderText>Interaction</HeaderText>
      <BodyText>
        Toast should automatically be triggered upon user's action.
      </BodyText>
      <BodyText>
        All toasts should disappear after 1000ms unless manually closed by the
        user before 1000ms
      </BodyText>
      <br />
      <HeaderText>
        Placement
      </HeaderText>
      <BodyText>
        <b>Desktop:</b>
      </BodyText>
      <BodyText>
        - 68px from the bottom, 28px from the right of the viewport
      </BodyText>
      <BodyText>
        - Should slide in upwards from the bottom right corner of the screen
      </BodyText>
      <BodyText>
        <b>Mobile web:</b>
      </BodyText>
      <BodyText>
        - 44px from the bottom, centered on the page with 8px margin on left and
        right sides
      </BodyText>
      <BodyText>
        - Should slide in upwards from the bottom of the screen
      </BodyText>
    </>
  );
};
