CardForm.test.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`card form wrapper disables the save button if canSubmit is false 1`] = `
<div
  className="card--container"
  id="start-main-content"
>
  <div
    className="ds-l-container"
  >
    <div
      className="ds-l-row card"
    >
      <div
        className="ds-l-col--1 ds-u-margin-left--auto"
      />
      <div
        className="ds-l-col--12 ds-l-sm-col--10 ds-l-lg-col--6"
      >
        <h1
          className="ds-h1"
        >
          test
        </h1>
        <form
          onSubmit={[Function]}
        >
          <fieldset
            className="ds-u-margin--0 ds-u-padding--0 ds-u-border--0"
          >
            hello world
            <div
              className="ds-u-margin-top--5"
            >
              <Button
                disabled={true}
                type="submit"
                variation="primary"
              >
                Save changes
              </Button>
              <Button
                onClick={[Function]}
                type="button"
                variation="transparent"
              >
                Cancel
              </Button>
            </div>
          </fieldset>
        </form>
      </div>
      <div
        className="ds-l-col--1 ds-u-margin-right--auto"
      />
    </div>
  </div>
</div>
`;

exports[`card form wrapper does not render a cancel button if form is not cancelable 1`] = `
<div
  className="card--container"
  id="start-main-content"
>
  <div
    className="ds-l-container"
  >
    <div
      className="ds-l-row card"
    >
      <div
        className="ds-l-col--1 ds-u-margin-left--auto"
      />
      <div
        className="ds-l-col--12 ds-l-sm-col--10 ds-l-lg-col--6"
      >
        <h1
          className="ds-h1"
        >
          test
        </h1>
        <form
          onSubmit={[Function]}
        >
          <fieldset
            className="ds-u-margin--0 ds-u-padding--0 ds-u-border--0"
          >
            hello world
            <div
              className="ds-u-margin-top--5"
            />
          </fieldset>
        </form>
      </div>
      <div
        className="ds-l-col--1 ds-u-margin-right--auto"
      />
    </div>
  </div>
</div>
`;

exports[`card form wrapper renders a footer if provided 1`] = `
<div
  className="card--container"
  id="start-main-content"
>
  <div
    className="ds-l-container"
  >
    <div
      className="ds-l-row card"
    >
      <div
        className="ds-l-col--1 ds-u-margin-left--auto"
      />
      <div
        className="ds-l-col--12 ds-l-sm-col--10 ds-l-lg-col--6"
      >
        <h1
          className="ds-h1"
        >
          test
        </h1>
        <form
          onSubmit={[Function]}
        >
          <fieldset
            className="ds-u-margin--0 ds-u-padding--0 ds-u-border--0"
          >
            hello world
            <div
              className="ds-u-margin-top--5"
            >
              <Button
                onClick={[Function]}
                type="button"
                variation="transparent"
              >
                Cancel
              </Button>
            </div>
          </fieldset>
        </form>
        <div
          className="card--foter"
        >
          <div>
            Hello
          </div>
        </div>
      </div>
      <div
        className="ds-l-col--1 ds-u-margin-right--auto"
      />
    </div>
  </div>
</div>
`;

exports[`card form wrapper renders a legend if provided 1`] = `
<div
  className="card--container"
  id="start-main-content"
>
  <div
    className="ds-l-container"
  >
    <div
      className="ds-l-row card"
    >
      <div
        className="ds-l-col--1 ds-u-margin-left--auto"
      />
      <div
        className="ds-l-col--12 ds-l-sm-col--10 ds-l-lg-col--6"
      >
        <h1
          className="ds-h1"
        >
          test
        </h1>
        <form
          onSubmit={[Function]}
        >
          <fieldset
            className="ds-u-margin--0 ds-u-padding--0 ds-u-border--0"
          >
            <legend
              className="ds-u-visibility--screen-reader"
            >
              of zelda
            </legend>
            hello world
            <div
              className="ds-u-margin-top--5"
            >
              <Button
                onClick={[Function]}
                type="button"
                variation="transparent"
              >
                Cancel
              </Button>
            </div>
          </fieldset>
        </form>
      </div>
      <div
        className="ds-l-col--1 ds-u-margin-right--auto"
      />
    </div>
  </div>
</div>
`;

exports[`card form wrapper renders a spinny-wheel on the save button and disables it if the form is busy 1`] = `
<div
  className="card--container"
  id="start-main-content"
>
  <div
    className="ds-l-container"
  >
    <div
      className="ds-l-row card"
    >
      <div
        className="ds-l-col--1 ds-u-margin-left--auto"
      />
      <div
        className="ds-l-col--12 ds-l-sm-col--10 ds-l-lg-col--6"
      >
        <h1
          className="ds-h1"
        >
          test
        </h1>
        <form
          onSubmit={[Function]}
        >
          <fieldset
            className="ds-u-margin--0 ds-u-padding--0 ds-u-border--0"
          >
            hello world
            <div
              className="ds-u-margin-top--5"
            >
              <Button
                disabled={true}
                type="submit"
                variation="primary"
              >
                <Spinner
                  aria-valuetext="Loading"
                  role="progressbar"
                />
                 
                Working
              </Button>
              <Button
                onClick={[Function]}
                type="button"
                variation="transparent"
              >
                Cancel
              </Button>
            </div>
          </fieldset>
        </form>
      </div>
      <div
        className="ds-l-col--1 ds-u-margin-right--auto"
      />
    </div>
  </div>
</div>
`;

exports[`card form wrapper renders a success alert if message provided 1`] = `
<div
  className="card--container"
  id="start-main-content"
>
  <div
    className="ds-l-container"
  >
    <div
      className="ds-l-row card"
    >
      <div
        className="ds-l-col--1 ds-u-margin-left--auto"
      />
      <div
        className="ds-l-col--12 ds-l-sm-col--10 ds-l-lg-col--6"
      >
        <Alert
          role="alert"
          variation="success"
        >
          oh yeah!
        </Alert>
        <h1
          className="ds-h1"
        >
          test
        </h1>
        <form
          onSubmit={[Function]}
        >
          <fieldset
            className="ds-u-margin--0 ds-u-padding--0 ds-u-border--0"
          >
            hello world
            <div
              className="ds-u-margin-top--5"
            >
              <Button
                onClick={[Function]}
                type="button"
                variation="transparent"
              >
                Cancel
              </Button>
            </div>
          </fieldset>
        </form>
      </div>
      <div
        className="ds-l-col--1 ds-u-margin-right--auto"
      />
    </div>
  </div>
</div>
`;

exports[`card form wrapper renders an error alert if message provided 1`] = `
<div
  className="card--container"
  id="start-main-content"
>
  <div
    className="ds-l-container"
  >
    <div
      className="ds-l-row card"
    >
      <div
        className="ds-l-col--1 ds-u-margin-left--auto"
      />
      <div
        className="ds-l-col--12 ds-l-sm-col--10 ds-l-lg-col--6"
      >
        <Alert
          role="alert"
          variation="error"
        >
          oh noes!
        </Alert>
        <h1
          className="ds-h1"
        >
          test
        </h1>
        <form
          onSubmit={[Function]}
        >
          <fieldset
            className="ds-u-margin--0 ds-u-padding--0 ds-u-border--0"
          >
            hello world
            <div
              className="ds-u-margin-top--5"
            >
              <Button
                onClick={[Function]}
                type="button"
                variation="transparent"
              >
                Cancel
              </Button>
            </div>
          </fieldset>
        </form>
      </div>
      <div
        className="ds-l-col--1 ds-u-margin-right--auto"
      />
    </div>
  </div>
</div>
`;

exports[`card form wrapper renders with a save button if onSave prop is provided 1`] = `
<div
  className="card--container"
  id="start-main-content"
>
  <div
    className="ds-l-container"
  >
    <div
      className="ds-l-row card"
    >
      <div
        className="ds-l-col--1 ds-u-margin-left--auto"
      />
      <div
        className="ds-l-col--12 ds-l-sm-col--10 ds-l-lg-col--6"
      >
        <h1
          className="ds-h1"
        >
          test
        </h1>
        <form
          onSubmit={[Function]}
        >
          <fieldset
            className="ds-u-margin--0 ds-u-padding--0 ds-u-border--0"
          >
            hello world
            <div
              className="ds-u-margin-top--5"
            >
              <Button
                disabled={false}
                type="submit"
                variation="primary"
              >
                Save changes
              </Button>
              <Button
                onClick={[Function]}
                type="button"
                variation="transparent"
              >
                Cancel
              </Button>
            </div>
          </fieldset>
        </form>
      </div>
      <div
        className="ds-l-col--1 ds-u-margin-right--auto"
      />
    </div>
  </div>
</div>
`;

exports[`card form wrapper renders without a save button if onSave prop is missing 1`] = `
<div
  className="card--container"
  id="start-main-content"
>
  <div
    className="ds-l-container"
  >
    <div
      className="ds-l-row card"
    >
      <div
        className="ds-l-col--1 ds-u-margin-left--auto"
      />
      <div
        className="ds-l-col--12 ds-l-sm-col--10 ds-l-lg-col--6"
      >
        <h1
          className="ds-h1"
        >
          test
        </h1>
        <form
          onSubmit={[Function]}
        >
          <fieldset
            className="ds-u-margin--0 ds-u-padding--0 ds-u-border--0"
          >
            hello world
            <div
              className="ds-u-margin-top--5"
            >
              <Button
                onClick={[Function]}
                type="button"
                variation="transparent"
              >
                Cancel
              </Button>
            </div>
          </fieldset>
        </form>
      </div>
      <div
        className="ds-l-col--1 ds-u-margin-right--auto"
      />
    </div>
  </div>
</div>
`;