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

exports[`renders configure 1`] = `
<section
  aria-labelledby="tab-CONFIGURE"
  className="App-tabContent coral coral-configure"
  data-testid="current-tab-pane"
  id="tabPane-CONFIGURE"
  role="tabpanel"
>
  <div>
    <div
      className="Box-root HorizontalGutter-root HorizontalGutter-double"
    >
      <div
        className="Box-root Flex-root coral coral-viewerBox"
      >
        <div
          className="Flex-flex Flex-halfItemGutter Flex-wrap gutter"
        >
          <div
            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary UserBoxAuthenticated-userBoxText"
          >
            Signed in as 
            <span
              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
            >
              Moderator
            </span>
            .
          </div>
          <div
            className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary UserBoxAuthenticated-userBoxText Flex-flex"
          >
            <span>
              Not you? 
            </span>
            <button
              className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular UserBoxAuthenticated-userBoxButton coral coral-viewerBox-logoutButton"
              data-color="primary"
              data-variant="regular"
              onBlur={[Function]}
              onClick={[Function]}
              onFocus={[Function]}
              onMouseOut={[Function]}
              onMouseOver={[Function]}
              onTouchEnd={[Function]}
              type="button"
            >
              Sign Out
            </button>
          </div>
        </div>
      </div>
      <div>
        <h1
          className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary"
        >
          <a
            className="ExternalLink-root"
            href="/admin/moderate/reported/story-1"
            rel="noopener noreferrer"
            target="_blank"
          >
            Moderate this stream
          </a>
        </h1>
      </div>
      <hr
        className="HorizontalRule-root"
      />
      <form
        autoComplete="off"
        className="coral coral-configureCommentStream"
        id="configure-form"
        onSubmit={[Function]}
      >
        <div
          className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifySpaceBetween Flex-alignFlexStart gutter"
        >
          <h1
            className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary ConfigureStream-heading"
          >
            Configure this Comment Stream
          </h1>
          <button
            className="BaseButton-root Button-root Button-sizeRegular Button-colorSuccess Button-variantFilled Button-disabled coral coral-configureCommentStream-applyButton"
            data-color="success"
            data-variant="filled"
            disabled={true}
            onBlur={[Function]}
            onFocus={[Function]}
            onMouseOut={[Function]}
            onMouseOver={[Function]}
            onTouchEnd={[Function]}
            type="submit"
          >
            Apply
          </button>
        </div>
        <div
          className="Box-root HorizontalGutter-root HorizontalGutter-double"
        >
          <div>
            <div
              className="CheckBox-root"
            >
              <input
                checked={true}
                className="CheckBox-input"
                disabled={false}
                id="live.enabled"
                name="live.enabled"
                onBlur={[Function]}
                onChange={[Function]}
                onFocus={[Function]}
                type="checkbox"
                value={true}
              />
              <label
                className="CheckBox-label"
                htmlFor="live.enabled"
              >
                <span
                  className="CheckBox-labelSpan"
                >
                  <span
                    className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
                  >
                    <span>
                      Enable Live Updates for this Story
                    </span>
                  </span>
                </span>
              </label>
            </div>
            <div
              className="ToggleConfig-details"
            >
              <p
                className="Box-root Typography-root Typography-detail Typography-colorTextSecondary WidthLimitedDescription-root"
              >
                When enabled, the comments will be updated instantly
as new comments and replies are submitted, instead of
requiring a page refresh. You can disable this in the
unusual situation of an article getting so much traffic that the comments are loading slowly.
              </p>
            </div>
          </div>
          <div>
            <div
              className="CheckBox-root"
            >
              <input
                checked={false}
                className="CheckBox-input"
                disabled={false}
                id="moderation"
                name="moderation"
                onBlur={[Function]}
                onChange={[Function]}
                onFocus={[Function]}
                type="checkbox"
                value={false}
              />
              <label
                className="CheckBox-label"
                htmlFor="moderation"
              >
                <span
                  className="CheckBox-labelSpan"
                >
                  <span
                    className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
                  >
                    <span>
                      Enable Pre-Moderation
                    </span>
                  </span>
                </span>
              </label>
            </div>
            <div
              className="ToggleConfig-details"
            >
              <p
                className="Box-root Typography-root Typography-detail Typography-colorTextSecondary WidthLimitedDescription-root"
              >
                Moderators must approve any comment before it is published to this story.
              </p>
            </div>
          </div>
          <div>
            <div
              className="CheckBox-root"
            >
              <input
                checked={false}
                className="CheckBox-input"
                disabled={false}
                id="premodLinksEnable"
                name="premodLinksEnable"
                onBlur={[Function]}
                onChange={[Function]}
                onFocus={[Function]}
                type="checkbox"
                value={false}
              />
              <label
                className="CheckBox-label"
                htmlFor="premodLinksEnable"
              >
                <span
                  className="CheckBox-labelSpan"
                >
                  <span
                    className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
                  >
                    <span>
                      Pre-Moderate Comments Containing Links
                    </span>
                  </span>
                </span>
              </label>
            </div>
            <div
              className="ToggleConfig-details"
            >
              <p
                className="Box-root Typography-root Typography-detail Typography-colorTextSecondary WidthLimitedDescription-root"
              >
                Moderators must approve any comment that contains a link before it is published to this story.
              </p>
            </div>
          </div>
          <div>
            <div
              className="CheckBox-root coral coral-configureMessageBox"
            >
              <input
                checked={false}
                className="CheckBox-input"
                disabled={false}
                id="messageBox.enabled"
                name="messageBox.enabled"
                onBlur={[Function]}
                onChange={[Function]}
                onFocus={[Function]}
                type="checkbox"
                value={false}
              />
              <label
                className="CheckBox-label"
                htmlFor="messageBox.enabled"
              >
                <span
                  className="CheckBox-labelSpan"
                >
                  <span
                    className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
                  >
                    <span>
                      Enable Message Box for this Story
                    </span>
                  </span>
                </span>
              </label>
            </div>
            <div
              className="ToggleConfig-details"
            >
              <div
                className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
              >
                <p
                  className="Box-root Typography-root Typography-detail Typography-colorTextSecondary WidthLimitedDescription-root"
                >
                  Add a message to the top of the comment box for your readers.
Use this to suggest a discussion topic, ask a question or make
announcements relating to the comments on this story.
                </p>
              </div>
            </div>
          </div>
        </div>
      </form>
      <hr
        className="HorizontalRule-root"
      />
      <div
        className="coral coral-closeCommentStream"
      >
        <h1
          className="Box-root Typography-root Typography-heading2 Typography-colorTextPrimary CloseStream-heading"
        >
          Close Comment Stream
        </h1>
        <div
          className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignFlexStart gutter"
        >
          <p
            className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
          >
            This comment stream is currently open. By closing this comment stream,
no new comments may be submitted and all previously submitted comments
will still be displayed.
          </p>
          <button
            className="BaseButton-root Button-root Button-sizeRegular Button-colorError Button-variantOutlined CloseStream-button coral coral-closeCommentStream-closeButton"
            data-color="error"
            data-variant="outlined"
            disabled={false}
            onBlur={[Function]}
            onClick={[Function]}
            onFocus={[Function]}
            onMouseOut={[Function]}
            onMouseOver={[Function]}
            onTouchEnd={[Function]}
            type="button"
          >
            Close Stream
          </button>
        </div>
      </div>
    </div>
  </div>
</section>
`;
