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

exports[`OuiControlBar is rendered 1`] = `
<section
  aria-label="aria-label"
  class="ouiControlBar testClass1 testClass2 ouiControlBar--large ouiControlBar--fixed"
  data-test-subj="test subject string"
  style="left: 0px; right: 0px;"
>
  <h2
    class="ouiScreenReaderOnly"
  >
    Page level controls
  </h2>
  <div
    class="ouiControlBar__controls"
  >
    <nav
      aria-label="breadcrumb"
      class="ouiBreadcrumbs ouiControlBar__breadcrumbs ouiBreadcrumbs--truncate"
    >
      <div
        class="ouiBreadcrumbWall"
      >
        <div
          class="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--first"
        >
          <span
            aria-current="false"
            class="ouiBreadcrumb"
            title="src"
          >
            src
          </span>
        </div>
      </div>
      <div
        class="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--last"
      >
        <span
          aria-current="page"
          class="ouiBreadcrumb ouiBreadcrumb--last"
          title="components"
        >
          components
        </span>
      </div>
    </nav>
    <button
      class="ouiButton ouiButton--ghost ouiButton--small ouiControlBar__button"
      data-test-subj="dts"
      type="button"
    >
      <span
        class="ouiButtonContent ouiButton__content"
      >
        <span
          class="ouiButton__text"
        >
          Sound the Alarm
        </span>
      </span>
    </button>
    <div
      class="ouiControlBar__text"
    >
      Close the Hatch
    </div>
    <div
      class="ouiControlBar__divider"
    />
    <span
      aria-label="Sample Icon"
      class="ouiControlBar__icon"
      color="danger"
      data-ouiicon-type="alert"
    />
    <div
      class="ouiControlBar__spacer"
    />
    <button
      class="ouiControlBar__tab"
    >
      Flight 815
    </button>
  </div>
</section>
`;

exports[`OuiControlBar props leftOffset is rendered 1`] = `
<OuiControlBar
  controls={
    Array [
      Object {
        "breadcrumbs": Array [
          Object {
            "text": "src",
          },
          Object {
            "text": "components",
          },
        ],
        "controlType": "breadcrumbs",
        "id": "current_file_path",
        "responsive": false,
      },
      Object {
        "controlType": "button",
        "data-test-subj": "dts",
        "id": "sound_the_alarm",
        "label": "Sound the Alarm",
        "onClick": [Function],
      },
      Object {
        "controlType": "text",
        "id": "close_the_hatch",
        "text": "Close the Hatch",
      },
      Object {
        "controlType": "divider",
      },
      Object {
        "aria-label": "Sample Icon",
        "color": "danger",
        "controlType": "icon",
        "iconType": "alert",
        "id": "sample_icon",
      },
      Object {
        "controlType": "spacer",
      },
      Object {
        "controlType": "tab",
        "id": "flight_815",
        "label": "Flight 815",
        "onClick": [Function],
      },
    ]
  }
  leftOffset={200}
  position="fixed"
  rightOffset={0}
  showContent={false}
  showOnMobile={false}
  size="l"
>
  <OuiPortal>
    <Portal
      containerInfo={
        <div>
          <section
            aria-label="Page level controls"
            class="ouiControlBar ouiControlBar--large ouiControlBar--fixed"
            style="left: 200px; right: 0px;"
          >
            <h2
              class="ouiScreenReaderOnly"
            >
              Page level controls
            </h2>
            <div
              class="ouiControlBar__controls"
            >
              <nav
                aria-label="breadcrumb"
                class="ouiBreadcrumbs ouiControlBar__breadcrumbs ouiBreadcrumbs--truncate"
              >
                <div
                  class="ouiBreadcrumbWall"
                >
                  <div
                    class="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--first"
                  >
                    <span
                      aria-current="false"
                      class="ouiBreadcrumb"
                      title="src"
                    >
                      src
                    </span>
                  </div>
                </div>
                <div
                  class="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--last"
                >
                  <span
                    aria-current="page"
                    class="ouiBreadcrumb ouiBreadcrumb--last"
                    title="components"
                  >
                    components
                  </span>
                </div>
              </nav>
              <button
                class="ouiButton ouiButton--ghost ouiButton--small ouiControlBar__button"
                data-test-subj="dts"
                type="button"
              >
                <span
                  class="ouiButtonContent ouiButton__content"
                >
                  <span
                    class="ouiButton__text"
                  >
                    Sound the Alarm
                  </span>
                </span>
              </button>
              <div
                class="ouiControlBar__text"
              >
                Close the Hatch
              </div>
              <div
                class="ouiControlBar__divider"
              />
              <span
                aria-label="Sample Icon"
                class="ouiControlBar__icon"
                color="danger"
                data-ouiicon-type="alert"
              />
              <div
                class="ouiControlBar__spacer"
              />
              <button
                class="ouiControlBar__tab"
              >
                Flight 815
              </button>
            </div>
          </section>
          <p
            aria-live="assertive"
            class="ouiScreenReaderOnly"
          >
            There is a new region landmark with page level controls at the end of the document.
          </p>
        </div>
      }
    >
      <OuiI18n
        default="Page level controls"
        token="ouiControlBar.screenReaderHeading"
      >
        <section
          aria-label="Page level controls"
          className="ouiControlBar ouiControlBar--large ouiControlBar--fixed"
          style={
            Object {
              "left": 200,
              "maxHeight": undefined,
              "right": 0,
            }
          }
        >
          <OuiScreenReaderOnly>
            <h2
              className="ouiScreenReaderOnly"
            >
              Page level controls
            </h2>
          </OuiScreenReaderOnly>
          <div
            className="ouiControlBar__controls"
          >
            <OuiBreadcrumbs
              breadcrumbs={
                Array [
                  Object {
                    "text": "src",
                  },
                  Object {
                    "text": "components",
                  },
                ]
              }
              className="ouiControlBar__breadcrumbs"
              key="current_file_path"
              responsive={false}
            >
              <nav
                aria-label="breadcrumb"
                className="ouiBreadcrumbs ouiControlBar__breadcrumbs ouiBreadcrumbs--truncate"
              >
                <div
                  className="ouiBreadcrumbWall"
                >
                  <div
                    className="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--first"
                  >
                    <OuiInnerText>
                      <span
                        aria-current="false"
                        className="ouiBreadcrumb"
                        title="src"
                      >
                        src
                      </span>
                    </OuiInnerText>
                  </div>
                </div>
                <div
                  className="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--last"
                >
                  <OuiInnerText>
                    <span
                      aria-current="page"
                      className="ouiBreadcrumb ouiBreadcrumb--last"
                      title="components"
                    >
                      components
                    </span>
                  </OuiInnerText>
                </div>
              </nav>
            </OuiBreadcrumbs>
            <OuiButton
              className="ouiControlBar__button"
              color="ghost"
              data-test-subj="dts"
              key="sound_the_alarm1"
              onClick={[Function]}
              size="s"
            >
              <OuiButtonDisplay
                baseClassName="ouiButton"
                className="ouiControlBar__button"
                color="ghost"
                data-test-subj="dts"
                disabled={false}
                element="button"
                isDisabled={false}
                onClick={[Function]}
                size="s"
                type="button"
              >
                <button
                  className="ouiButton ouiButton--ghost ouiButton--small ouiControlBar__button"
                  data-test-subj="dts"
                  disabled={false}
                  onClick={[Function]}
                  style={
                    Object {
                      "minWidth": undefined,
                    }
                  }
                  type="button"
                >
                  <OuiButtonContent
                    className="ouiButton__content"
                    iconSide="left"
                    textProps={
                      Object {
                        "className": "ouiButton__text",
                      }
                    }
                  >
                    <span
                      className="ouiButtonContent ouiButton__content"
                    >
                      <span
                        className="ouiButton__text"
                      >
                        Sound the Alarm
                      </span>
                    </span>
                  </OuiButtonContent>
                </button>
              </OuiButtonDisplay>
            </OuiButton>
            <div
              className="ouiControlBar__text"
              key="close_the_hatch"
            >
              Close the Hatch
            </div>
            <div
              className="ouiControlBar__divider"
              key="divider3"
            />
            <OuiIcon
              aria-label="Sample Icon"
              className="ouiControlBar__icon"
              color="danger"
              key="sample_icon4"
              type="alert"
            >
              <span
                aria-label="Sample Icon"
                className="ouiControlBar__icon"
                color="danger"
                data-ouiicon-type="alert"
              />
            </OuiIcon>
            <div
              className="ouiControlBar__spacer"
              key="spacer5"
            />
            <button
              className="ouiControlBar__tab"
              key="flight_8156"
              onClick={[Function]}
            >
              Flight 815
            </button>
          </div>
        </section>
      </OuiI18n>
      <OuiScreenReaderOnly>
        <p
          aria-live="assertive"
          className="ouiScreenReaderOnly"
        >
          <OuiI18n
            default="There is a new region landmark with page level controls at the end of the document."
            token="ouiControlBar.screenReaderAnnouncement"
          >
            There is a new region landmark with page level controls at the end of the document.
          </OuiI18n>
        </p>
      </OuiScreenReaderOnly>
    </Portal>
  </OuiPortal>
</OuiControlBar>
`;

exports[`OuiControlBar props maxHeight is rendered 1`] = `
<OuiControlBar
  controls={
    Array [
      Object {
        "breadcrumbs": Array [
          Object {
            "text": "src",
          },
          Object {
            "text": "components",
          },
        ],
        "controlType": "breadcrumbs",
        "id": "current_file_path",
        "responsive": false,
      },
      Object {
        "controlType": "button",
        "data-test-subj": "dts",
        "id": "sound_the_alarm",
        "label": "Sound the Alarm",
        "onClick": [Function],
      },
      Object {
        "controlType": "text",
        "id": "close_the_hatch",
        "text": "Close the Hatch",
      },
      Object {
        "controlType": "divider",
      },
      Object {
        "aria-label": "Sample Icon",
        "color": "danger",
        "controlType": "icon",
        "iconType": "alert",
        "id": "sample_icon",
      },
      Object {
        "controlType": "spacer",
      },
      Object {
        "controlType": "tab",
        "id": "flight_815",
        "label": "Flight 815",
        "onClick": [Function],
      },
    ]
  }
  leftOffset={0}
  maxHeight="20rem"
  position="fixed"
  rightOffset={0}
  showContent={false}
  showOnMobile={false}
  size="l"
>
  <OuiPortal>
    <Portal
      containerInfo={
        <div>
          <section
            aria-label="Page level controls"
            class="ouiControlBar ouiControlBar--large ouiControlBar--fixed"
            style="left: 0px; right: 0px; max-height: 20rem;"
          >
            <h2
              class="ouiScreenReaderOnly"
            >
              Page level controls
            </h2>
            <div
              class="ouiControlBar__controls"
            >
              <nav
                aria-label="breadcrumb"
                class="ouiBreadcrumbs ouiControlBar__breadcrumbs ouiBreadcrumbs--truncate"
              >
                <div
                  class="ouiBreadcrumbWall"
                >
                  <div
                    class="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--first"
                  >
                    <span
                      aria-current="false"
                      class="ouiBreadcrumb"
                      title="src"
                    >
                      src
                    </span>
                  </div>
                </div>
                <div
                  class="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--last"
                >
                  <span
                    aria-current="page"
                    class="ouiBreadcrumb ouiBreadcrumb--last"
                    title="components"
                  >
                    components
                  </span>
                </div>
              </nav>
              <button
                class="ouiButton ouiButton--ghost ouiButton--small ouiControlBar__button"
                data-test-subj="dts"
                type="button"
              >
                <span
                  class="ouiButtonContent ouiButton__content"
                >
                  <span
                    class="ouiButton__text"
                  >
                    Sound the Alarm
                  </span>
                </span>
              </button>
              <div
                class="ouiControlBar__text"
              >
                Close the Hatch
              </div>
              <div
                class="ouiControlBar__divider"
              />
              <span
                aria-label="Sample Icon"
                class="ouiControlBar__icon"
                color="danger"
                data-ouiicon-type="alert"
              />
              <div
                class="ouiControlBar__spacer"
              />
              <button
                class="ouiControlBar__tab"
              >
                Flight 815
              </button>
            </div>
          </section>
          <p
            aria-live="assertive"
            class="ouiScreenReaderOnly"
          >
            There is a new region landmark with page level controls at the end of the document.
          </p>
        </div>
      }
    >
      <OuiI18n
        default="Page level controls"
        token="ouiControlBar.screenReaderHeading"
      >
        <section
          aria-label="Page level controls"
          className="ouiControlBar ouiControlBar--large ouiControlBar--fixed"
          style={
            Object {
              "left": 0,
              "maxHeight": "20rem",
              "right": 0,
            }
          }
        >
          <OuiScreenReaderOnly>
            <h2
              className="ouiScreenReaderOnly"
            >
              Page level controls
            </h2>
          </OuiScreenReaderOnly>
          <div
            className="ouiControlBar__controls"
          >
            <OuiBreadcrumbs
              breadcrumbs={
                Array [
                  Object {
                    "text": "src",
                  },
                  Object {
                    "text": "components",
                  },
                ]
              }
              className="ouiControlBar__breadcrumbs"
              key="current_file_path"
              responsive={false}
            >
              <nav
                aria-label="breadcrumb"
                className="ouiBreadcrumbs ouiControlBar__breadcrumbs ouiBreadcrumbs--truncate"
              >
                <div
                  className="ouiBreadcrumbWall"
                >
                  <div
                    className="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--first"
                  >
                    <OuiInnerText>
                      <span
                        aria-current="false"
                        className="ouiBreadcrumb"
                        title="src"
                      >
                        src
                      </span>
                    </OuiInnerText>
                  </div>
                </div>
                <div
                  className="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--last"
                >
                  <OuiInnerText>
                    <span
                      aria-current="page"
                      className="ouiBreadcrumb ouiBreadcrumb--last"
                      title="components"
                    >
                      components
                    </span>
                  </OuiInnerText>
                </div>
              </nav>
            </OuiBreadcrumbs>
            <OuiButton
              className="ouiControlBar__button"
              color="ghost"
              data-test-subj="dts"
              key="sound_the_alarm1"
              onClick={[Function]}
              size="s"
            >
              <OuiButtonDisplay
                baseClassName="ouiButton"
                className="ouiControlBar__button"
                color="ghost"
                data-test-subj="dts"
                disabled={false}
                element="button"
                isDisabled={false}
                onClick={[Function]}
                size="s"
                type="button"
              >
                <button
                  className="ouiButton ouiButton--ghost ouiButton--small ouiControlBar__button"
                  data-test-subj="dts"
                  disabled={false}
                  onClick={[Function]}
                  style={
                    Object {
                      "minWidth": undefined,
                    }
                  }
                  type="button"
                >
                  <OuiButtonContent
                    className="ouiButton__content"
                    iconSide="left"
                    textProps={
                      Object {
                        "className": "ouiButton__text",
                      }
                    }
                  >
                    <span
                      className="ouiButtonContent ouiButton__content"
                    >
                      <span
                        className="ouiButton__text"
                      >
                        Sound the Alarm
                      </span>
                    </span>
                  </OuiButtonContent>
                </button>
              </OuiButtonDisplay>
            </OuiButton>
            <div
              className="ouiControlBar__text"
              key="close_the_hatch"
            >
              Close the Hatch
            </div>
            <div
              className="ouiControlBar__divider"
              key="divider3"
            />
            <OuiIcon
              aria-label="Sample Icon"
              className="ouiControlBar__icon"
              color="danger"
              key="sample_icon4"
              type="alert"
            >
              <span
                aria-label="Sample Icon"
                className="ouiControlBar__icon"
                color="danger"
                data-ouiicon-type="alert"
              />
            </OuiIcon>
            <div
              className="ouiControlBar__spacer"
              key="spacer5"
            />
            <button
              className="ouiControlBar__tab"
              key="flight_8156"
              onClick={[Function]}
            >
              Flight 815
            </button>
          </div>
        </section>
      </OuiI18n>
      <OuiScreenReaderOnly>
        <p
          aria-live="assertive"
          className="ouiScreenReaderOnly"
        >
          <OuiI18n
            default="There is a new region landmark with page level controls at the end of the document."
            token="ouiControlBar.screenReaderAnnouncement"
          >
            There is a new region landmark with page level controls at the end of the document.
          </OuiI18n>
        </p>
      </OuiScreenReaderOnly>
    </Portal>
  </OuiPortal>
</OuiControlBar>
`;

exports[`OuiControlBar props mobile is rendered 1`] = `
<OuiControlBar
  controls={
    Array [
      Object {
        "breadcrumbs": Array [
          Object {
            "text": "src",
          },
          Object {
            "text": "components",
          },
        ],
        "controlType": "breadcrumbs",
        "id": "current_file_path",
        "responsive": false,
      },
      Object {
        "controlType": "button",
        "data-test-subj": "dts",
        "id": "sound_the_alarm",
        "label": "Sound the Alarm",
        "onClick": [Function],
      },
      Object {
        "controlType": "text",
        "id": "close_the_hatch",
        "text": "Close the Hatch",
      },
      Object {
        "controlType": "divider",
      },
      Object {
        "aria-label": "Sample Icon",
        "color": "danger",
        "controlType": "icon",
        "iconType": "alert",
        "id": "sample_icon",
      },
      Object {
        "controlType": "spacer",
      },
      Object {
        "controlType": "tab",
        "id": "flight_815",
        "label": "Flight 815",
        "onClick": [Function],
      },
    ]
  }
  leftOffset={0}
  position="fixed"
  rightOffset={0}
  showContent={false}
  showOnMobile={true}
  size="l"
>
  <OuiPortal>
    <Portal
      containerInfo={
        <div>
          <section
            aria-label="Page level controls"
            class="ouiControlBar ouiControlBar--large ouiControlBar--fixed ouiControlBar--showOnMobile"
            style="left: 0px; right: 0px;"
          >
            <h2
              class="ouiScreenReaderOnly"
            >
              Page level controls
            </h2>
            <div
              class="ouiControlBar__controls"
            >
              <nav
                aria-label="breadcrumb"
                class="ouiBreadcrumbs ouiControlBar__breadcrumbs ouiBreadcrumbs--truncate"
              >
                <div
                  class="ouiBreadcrumbWall"
                >
                  <div
                    class="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--first"
                  >
                    <span
                      aria-current="false"
                      class="ouiBreadcrumb"
                      title="src"
                    >
                      src
                    </span>
                  </div>
                </div>
                <div
                  class="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--last"
                >
                  <span
                    aria-current="page"
                    class="ouiBreadcrumb ouiBreadcrumb--last"
                    title="components"
                  >
                    components
                  </span>
                </div>
              </nav>
              <button
                class="ouiButton ouiButton--ghost ouiButton--small ouiControlBar__button"
                data-test-subj="dts"
                type="button"
              >
                <span
                  class="ouiButtonContent ouiButton__content"
                >
                  <span
                    class="ouiButton__text"
                  >
                    Sound the Alarm
                  </span>
                </span>
              </button>
              <div
                class="ouiControlBar__text"
              >
                Close the Hatch
              </div>
              <div
                class="ouiControlBar__divider"
              />
              <span
                aria-label="Sample Icon"
                class="ouiControlBar__icon"
                color="danger"
                data-ouiicon-type="alert"
              />
              <div
                class="ouiControlBar__spacer"
              />
              <button
                class="ouiControlBar__tab"
              >
                Flight 815
              </button>
            </div>
          </section>
          <p
            aria-live="assertive"
            class="ouiScreenReaderOnly"
          >
            There is a new region landmark with page level controls at the end of the document.
          </p>
        </div>
      }
    >
      <OuiI18n
        default="Page level controls"
        token="ouiControlBar.screenReaderHeading"
      >
        <section
          aria-label="Page level controls"
          className="ouiControlBar ouiControlBar--large ouiControlBar--fixed ouiControlBar--showOnMobile"
          style={
            Object {
              "left": 0,
              "maxHeight": undefined,
              "right": 0,
            }
          }
        >
          <OuiScreenReaderOnly>
            <h2
              className="ouiScreenReaderOnly"
            >
              Page level controls
            </h2>
          </OuiScreenReaderOnly>
          <div
            className="ouiControlBar__controls"
          >
            <OuiBreadcrumbs
              breadcrumbs={
                Array [
                  Object {
                    "text": "src",
                  },
                  Object {
                    "text": "components",
                  },
                ]
              }
              className="ouiControlBar__breadcrumbs"
              key="current_file_path"
              responsive={false}
            >
              <nav
                aria-label="breadcrumb"
                className="ouiBreadcrumbs ouiControlBar__breadcrumbs ouiBreadcrumbs--truncate"
              >
                <div
                  className="ouiBreadcrumbWall"
                >
                  <div
                    className="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--first"
                  >
                    <OuiInnerText>
                      <span
                        aria-current="false"
                        className="ouiBreadcrumb"
                        title="src"
                      >
                        src
                      </span>
                    </OuiInnerText>
                  </div>
                </div>
                <div
                  className="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--last"
                >
                  <OuiInnerText>
                    <span
                      aria-current="page"
                      className="ouiBreadcrumb ouiBreadcrumb--last"
                      title="components"
                    >
                      components
                    </span>
                  </OuiInnerText>
                </div>
              </nav>
            </OuiBreadcrumbs>
            <OuiButton
              className="ouiControlBar__button"
              color="ghost"
              data-test-subj="dts"
              key="sound_the_alarm1"
              onClick={[Function]}
              size="s"
            >
              <OuiButtonDisplay
                baseClassName="ouiButton"
                className="ouiControlBar__button"
                color="ghost"
                data-test-subj="dts"
                disabled={false}
                element="button"
                isDisabled={false}
                onClick={[Function]}
                size="s"
                type="button"
              >
                <button
                  className="ouiButton ouiButton--ghost ouiButton--small ouiControlBar__button"
                  data-test-subj="dts"
                  disabled={false}
                  onClick={[Function]}
                  style={
                    Object {
                      "minWidth": undefined,
                    }
                  }
                  type="button"
                >
                  <OuiButtonContent
                    className="ouiButton__content"
                    iconSide="left"
                    textProps={
                      Object {
                        "className": "ouiButton__text",
                      }
                    }
                  >
                    <span
                      className="ouiButtonContent ouiButton__content"
                    >
                      <span
                        className="ouiButton__text"
                      >
                        Sound the Alarm
                      </span>
                    </span>
                  </OuiButtonContent>
                </button>
              </OuiButtonDisplay>
            </OuiButton>
            <div
              className="ouiControlBar__text"
              key="close_the_hatch"
            >
              Close the Hatch
            </div>
            <div
              className="ouiControlBar__divider"
              key="divider3"
            />
            <OuiIcon
              aria-label="Sample Icon"
              className="ouiControlBar__icon"
              color="danger"
              key="sample_icon4"
              type="alert"
            >
              <span
                aria-label="Sample Icon"
                className="ouiControlBar__icon"
                color="danger"
                data-ouiicon-type="alert"
              />
            </OuiIcon>
            <div
              className="ouiControlBar__spacer"
              key="spacer5"
            />
            <button
              className="ouiControlBar__tab"
              key="flight_8156"
              onClick={[Function]}
            >
              Flight 815
            </button>
          </div>
        </section>
      </OuiI18n>
      <OuiScreenReaderOnly>
        <p
          aria-live="assertive"
          className="ouiScreenReaderOnly"
        >
          <OuiI18n
            default="There is a new region landmark with page level controls at the end of the document."
            token="ouiControlBar.screenReaderAnnouncement"
          >
            There is a new region landmark with page level controls at the end of the document.
          </OuiI18n>
        </p>
      </OuiScreenReaderOnly>
    </Portal>
  </OuiPortal>
</OuiControlBar>
`;

exports[`OuiControlBar props position is rendered 1`] = `
<OuiControlBar
  controls={
    Array [
      Object {
        "breadcrumbs": Array [
          Object {
            "text": "src",
          },
          Object {
            "text": "components",
          },
        ],
        "controlType": "breadcrumbs",
        "id": "current_file_path",
        "responsive": false,
      },
      Object {
        "controlType": "button",
        "data-test-subj": "dts",
        "id": "sound_the_alarm",
        "label": "Sound the Alarm",
        "onClick": [Function],
      },
      Object {
        "controlType": "text",
        "id": "close_the_hatch",
        "text": "Close the Hatch",
      },
      Object {
        "controlType": "divider",
      },
      Object {
        "aria-label": "Sample Icon",
        "color": "danger",
        "controlType": "icon",
        "iconType": "alert",
        "id": "sample_icon",
      },
      Object {
        "controlType": "spacer",
      },
      Object {
        "controlType": "tab",
        "id": "flight_815",
        "label": "Flight 815",
        "onClick": [Function],
      },
    ]
  }
  leftOffset={0}
  position="absolute"
  rightOffset={0}
  showContent={false}
  showOnMobile={false}
  size="l"
>
  <OuiI18n
    default="Page level controls"
    token="ouiControlBar.screenReaderHeading"
  >
    <section
      aria-label="Page level controls"
      className="ouiControlBar ouiControlBar--large ouiControlBar--absolute"
      style={
        Object {
          "left": 0,
          "maxHeight": undefined,
          "right": 0,
        }
      }
    >
      <OuiScreenReaderOnly>
        <h2
          className="ouiScreenReaderOnly"
        >
          Page level controls
        </h2>
      </OuiScreenReaderOnly>
      <div
        className="ouiControlBar__controls"
      >
        <OuiBreadcrumbs
          breadcrumbs={
            Array [
              Object {
                "text": "src",
              },
              Object {
                "text": "components",
              },
            ]
          }
          className="ouiControlBar__breadcrumbs"
          key="current_file_path"
          responsive={false}
        >
          <nav
            aria-label="breadcrumb"
            className="ouiBreadcrumbs ouiControlBar__breadcrumbs ouiBreadcrumbs--truncate"
          >
            <div
              className="ouiBreadcrumbWall"
            >
              <div
                className="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--first"
              >
                <OuiInnerText>
                  <span
                    aria-current="false"
                    className="ouiBreadcrumb"
                    title="src"
                  >
                    src
                  </span>
                </OuiInnerText>
              </div>
            </div>
            <div
              className="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--last"
            >
              <OuiInnerText>
                <span
                  aria-current="page"
                  className="ouiBreadcrumb ouiBreadcrumb--last"
                  title="components"
                >
                  components
                </span>
              </OuiInnerText>
            </div>
          </nav>
        </OuiBreadcrumbs>
        <OuiButton
          className="ouiControlBar__button"
          color="ghost"
          data-test-subj="dts"
          key="sound_the_alarm1"
          onClick={[Function]}
          size="s"
        >
          <OuiButtonDisplay
            baseClassName="ouiButton"
            className="ouiControlBar__button"
            color="ghost"
            data-test-subj="dts"
            disabled={false}
            element="button"
            isDisabled={false}
            onClick={[Function]}
            size="s"
            type="button"
          >
            <button
              className="ouiButton ouiButton--ghost ouiButton--small ouiControlBar__button"
              data-test-subj="dts"
              disabled={false}
              onClick={[Function]}
              style={
                Object {
                  "minWidth": undefined,
                }
              }
              type="button"
            >
              <OuiButtonContent
                className="ouiButton__content"
                iconSide="left"
                textProps={
                  Object {
                    "className": "ouiButton__text",
                  }
                }
              >
                <span
                  className="ouiButtonContent ouiButton__content"
                >
                  <span
                    className="ouiButton__text"
                  >
                    Sound the Alarm
                  </span>
                </span>
              </OuiButtonContent>
            </button>
          </OuiButtonDisplay>
        </OuiButton>
        <div
          className="ouiControlBar__text"
          key="close_the_hatch"
        >
          Close the Hatch
        </div>
        <div
          className="ouiControlBar__divider"
          key="divider3"
        />
        <OuiIcon
          aria-label="Sample Icon"
          className="ouiControlBar__icon"
          color="danger"
          key="sample_icon4"
          type="alert"
        >
          <span
            aria-label="Sample Icon"
            className="ouiControlBar__icon"
            color="danger"
            data-ouiicon-type="alert"
          />
        </OuiIcon>
        <div
          className="ouiControlBar__spacer"
          key="spacer5"
        />
        <button
          className="ouiControlBar__tab"
          key="flight_8156"
          onClick={[Function]}
        >
          Flight 815
        </button>
      </div>
    </section>
  </OuiI18n>
</OuiControlBar>
`;

exports[`OuiControlBar props rightOffset is rendered 1`] = `
<OuiControlBar
  controls={
    Array [
      Object {
        "breadcrumbs": Array [
          Object {
            "text": "src",
          },
          Object {
            "text": "components",
          },
        ],
        "controlType": "breadcrumbs",
        "id": "current_file_path",
        "responsive": false,
      },
      Object {
        "controlType": "button",
        "data-test-subj": "dts",
        "id": "sound_the_alarm",
        "label": "Sound the Alarm",
        "onClick": [Function],
      },
      Object {
        "controlType": "text",
        "id": "close_the_hatch",
        "text": "Close the Hatch",
      },
      Object {
        "controlType": "divider",
      },
      Object {
        "aria-label": "Sample Icon",
        "color": "danger",
        "controlType": "icon",
        "iconType": "alert",
        "id": "sample_icon",
      },
      Object {
        "controlType": "spacer",
      },
      Object {
        "controlType": "tab",
        "id": "flight_815",
        "label": "Flight 815",
        "onClick": [Function],
      },
    ]
  }
  leftOffset={0}
  position="fixed"
  rightOffset={200}
  showContent={false}
  showOnMobile={false}
  size="l"
>
  <OuiPortal>
    <Portal
      containerInfo={
        <div>
          <section
            aria-label="Page level controls"
            class="ouiControlBar ouiControlBar--large ouiControlBar--fixed"
            style="left: 0px; right: 200px;"
          >
            <h2
              class="ouiScreenReaderOnly"
            >
              Page level controls
            </h2>
            <div
              class="ouiControlBar__controls"
            >
              <nav
                aria-label="breadcrumb"
                class="ouiBreadcrumbs ouiControlBar__breadcrumbs ouiBreadcrumbs--truncate"
              >
                <div
                  class="ouiBreadcrumbWall"
                >
                  <div
                    class="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--first"
                  >
                    <span
                      aria-current="false"
                      class="ouiBreadcrumb"
                      title="src"
                    >
                      src
                    </span>
                  </div>
                </div>
                <div
                  class="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--last"
                >
                  <span
                    aria-current="page"
                    class="ouiBreadcrumb ouiBreadcrumb--last"
                    title="components"
                  >
                    components
                  </span>
                </div>
              </nav>
              <button
                class="ouiButton ouiButton--ghost ouiButton--small ouiControlBar__button"
                data-test-subj="dts"
                type="button"
              >
                <span
                  class="ouiButtonContent ouiButton__content"
                >
                  <span
                    class="ouiButton__text"
                  >
                    Sound the Alarm
                  </span>
                </span>
              </button>
              <div
                class="ouiControlBar__text"
              >
                Close the Hatch
              </div>
              <div
                class="ouiControlBar__divider"
              />
              <span
                aria-label="Sample Icon"
                class="ouiControlBar__icon"
                color="danger"
                data-ouiicon-type="alert"
              />
              <div
                class="ouiControlBar__spacer"
              />
              <button
                class="ouiControlBar__tab"
              >
                Flight 815
              </button>
            </div>
          </section>
          <p
            aria-live="assertive"
            class="ouiScreenReaderOnly"
          >
            There is a new region landmark with page level controls at the end of the document.
          </p>
        </div>
      }
    >
      <OuiI18n
        default="Page level controls"
        token="ouiControlBar.screenReaderHeading"
      >
        <section
          aria-label="Page level controls"
          className="ouiControlBar ouiControlBar--large ouiControlBar--fixed"
          style={
            Object {
              "left": 0,
              "maxHeight": undefined,
              "right": 200,
            }
          }
        >
          <OuiScreenReaderOnly>
            <h2
              className="ouiScreenReaderOnly"
            >
              Page level controls
            </h2>
          </OuiScreenReaderOnly>
          <div
            className="ouiControlBar__controls"
          >
            <OuiBreadcrumbs
              breadcrumbs={
                Array [
                  Object {
                    "text": "src",
                  },
                  Object {
                    "text": "components",
                  },
                ]
              }
              className="ouiControlBar__breadcrumbs"
              key="current_file_path"
              responsive={false}
            >
              <nav
                aria-label="breadcrumb"
                className="ouiBreadcrumbs ouiControlBar__breadcrumbs ouiBreadcrumbs--truncate"
              >
                <div
                  className="ouiBreadcrumbWall"
                >
                  <div
                    className="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--first"
                  >
                    <OuiInnerText>
                      <span
                        aria-current="false"
                        className="ouiBreadcrumb"
                        title="src"
                      >
                        src
                      </span>
                    </OuiInnerText>
                  </div>
                </div>
                <div
                  className="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--last"
                >
                  <OuiInnerText>
                    <span
                      aria-current="page"
                      className="ouiBreadcrumb ouiBreadcrumb--last"
                      title="components"
                    >
                      components
                    </span>
                  </OuiInnerText>
                </div>
              </nav>
            </OuiBreadcrumbs>
            <OuiButton
              className="ouiControlBar__button"
              color="ghost"
              data-test-subj="dts"
              key="sound_the_alarm1"
              onClick={[Function]}
              size="s"
            >
              <OuiButtonDisplay
                baseClassName="ouiButton"
                className="ouiControlBar__button"
                color="ghost"
                data-test-subj="dts"
                disabled={false}
                element="button"
                isDisabled={false}
                onClick={[Function]}
                size="s"
                type="button"
              >
                <button
                  className="ouiButton ouiButton--ghost ouiButton--small ouiControlBar__button"
                  data-test-subj="dts"
                  disabled={false}
                  onClick={[Function]}
                  style={
                    Object {
                      "minWidth": undefined,
                    }
                  }
                  type="button"
                >
                  <OuiButtonContent
                    className="ouiButton__content"
                    iconSide="left"
                    textProps={
                      Object {
                        "className": "ouiButton__text",
                      }
                    }
                  >
                    <span
                      className="ouiButtonContent ouiButton__content"
                    >
                      <span
                        className="ouiButton__text"
                      >
                        Sound the Alarm
                      </span>
                    </span>
                  </OuiButtonContent>
                </button>
              </OuiButtonDisplay>
            </OuiButton>
            <div
              className="ouiControlBar__text"
              key="close_the_hatch"
            >
              Close the Hatch
            </div>
            <div
              className="ouiControlBar__divider"
              key="divider3"
            />
            <OuiIcon
              aria-label="Sample Icon"
              className="ouiControlBar__icon"
              color="danger"
              key="sample_icon4"
              type="alert"
            >
              <span
                aria-label="Sample Icon"
                className="ouiControlBar__icon"
                color="danger"
                data-ouiicon-type="alert"
              />
            </OuiIcon>
            <div
              className="ouiControlBar__spacer"
              key="spacer5"
            />
            <button
              className="ouiControlBar__tab"
              key="flight_8156"
              onClick={[Function]}
            >
              Flight 815
            </button>
          </div>
        </section>
      </OuiI18n>
      <OuiScreenReaderOnly>
        <p
          aria-live="assertive"
          className="ouiScreenReaderOnly"
        >
          <OuiI18n
            default="There is a new region landmark with page level controls at the end of the document."
            token="ouiControlBar.screenReaderAnnouncement"
          >
            There is a new region landmark with page level controls at the end of the document.
          </OuiI18n>
        </p>
      </OuiScreenReaderOnly>
    </Portal>
  </OuiPortal>
</OuiControlBar>
`;

exports[`OuiControlBar props showContent is rendered 1`] = `
<OuiControlBar
  controls={
    Array [
      Object {
        "breadcrumbs": Array [
          Object {
            "text": "src",
          },
          Object {
            "text": "components",
          },
        ],
        "controlType": "breadcrumbs",
        "id": "current_file_path",
        "responsive": false,
      },
      Object {
        "controlType": "button",
        "data-test-subj": "dts",
        "id": "sound_the_alarm",
        "label": "Sound the Alarm",
        "onClick": [Function],
      },
      Object {
        "controlType": "text",
        "id": "close_the_hatch",
        "text": "Close the Hatch",
      },
      Object {
        "controlType": "divider",
      },
      Object {
        "aria-label": "Sample Icon",
        "color": "danger",
        "controlType": "icon",
        "iconType": "alert",
        "id": "sample_icon",
      },
      Object {
        "controlType": "spacer",
      },
      Object {
        "controlType": "tab",
        "id": "flight_815",
        "label": "Flight 815",
        "onClick": [Function],
      },
    ]
  }
  leftOffset={0}
  position="fixed"
  rightOffset={0}
  showContent={true}
  showOnMobile={false}
  size="l"
>
  <OuiPortal>
    <Portal
      containerInfo={
        <div>
          <section
            aria-label="Page level controls"
            class="ouiControlBar ouiControlBar-isOpen ouiControlBar--large ouiControlBar--fixed"
            style="left: 0px; right: 0px;"
          >
            <h2
              class="ouiScreenReaderOnly"
            >
              Page level controls
            </h2>
            <div
              class="ouiControlBar__controls"
            >
              <nav
                aria-label="breadcrumb"
                class="ouiBreadcrumbs ouiControlBar__breadcrumbs ouiBreadcrumbs--truncate"
              >
                <div
                  class="ouiBreadcrumbWall"
                >
                  <div
                    class="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--first"
                  >
                    <span
                      aria-current="false"
                      class="ouiBreadcrumb"
                      title="src"
                    >
                      src
                    </span>
                  </div>
                </div>
                <div
                  class="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--last"
                >
                  <span
                    aria-current="page"
                    class="ouiBreadcrumb ouiBreadcrumb--last"
                    title="components"
                  >
                    components
                  </span>
                </div>
              </nav>
              <button
                class="ouiButton ouiButton--ghost ouiButton--small ouiControlBar__button"
                data-test-subj="dts"
                type="button"
              >
                <span
                  class="ouiButtonContent ouiButton__content"
                >
                  <span
                    class="ouiButton__text"
                  >
                    Sound the Alarm
                  </span>
                </span>
              </button>
              <div
                class="ouiControlBar__text"
              >
                Close the Hatch
              </div>
              <div
                class="ouiControlBar__divider"
              />
              <span
                aria-label="Sample Icon"
                class="ouiControlBar__icon"
                color="danger"
                data-ouiicon-type="alert"
              />
              <div
                class="ouiControlBar__spacer"
              />
              <button
                class="ouiControlBar__tab"
              >
                Flight 815
              </button>
            </div>
            <div
              class="ouiControlBar__content"
            >
              Content
            </div>
          </section>
          <p
            aria-live="assertive"
            class="ouiScreenReaderOnly"
          >
            There is a new region landmark with page level controls at the end of the document.
          </p>
        </div>
      }
    >
      <OuiI18n
        default="Page level controls"
        token="ouiControlBar.screenReaderHeading"
      >
        <section
          aria-label="Page level controls"
          className="ouiControlBar ouiControlBar-isOpen ouiControlBar--large ouiControlBar--fixed"
          style={
            Object {
              "left": 0,
              "maxHeight": undefined,
              "right": 0,
            }
          }
        >
          <OuiScreenReaderOnly>
            <h2
              className="ouiScreenReaderOnly"
            >
              Page level controls
            </h2>
          </OuiScreenReaderOnly>
          <div
            className="ouiControlBar__controls"
          >
            <OuiBreadcrumbs
              breadcrumbs={
                Array [
                  Object {
                    "text": "src",
                  },
                  Object {
                    "text": "components",
                  },
                ]
              }
              className="ouiControlBar__breadcrumbs"
              key="current_file_path"
              responsive={false}
            >
              <nav
                aria-label="breadcrumb"
                className="ouiBreadcrumbs ouiControlBar__breadcrumbs ouiBreadcrumbs--truncate"
              >
                <div
                  className="ouiBreadcrumbWall"
                >
                  <div
                    className="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--first"
                  >
                    <OuiInnerText>
                      <span
                        aria-current="false"
                        className="ouiBreadcrumb"
                        title="src"
                      >
                        src
                      </span>
                    </OuiInnerText>
                  </div>
                </div>
                <div
                  className="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--last"
                >
                  <OuiInnerText>
                    <span
                      aria-current="page"
                      className="ouiBreadcrumb ouiBreadcrumb--last"
                      title="components"
                    >
                      components
                    </span>
                  </OuiInnerText>
                </div>
              </nav>
            </OuiBreadcrumbs>
            <OuiButton
              className="ouiControlBar__button"
              color="ghost"
              data-test-subj="dts"
              key="sound_the_alarm1"
              onClick={[Function]}
              size="s"
            >
              <OuiButtonDisplay
                baseClassName="ouiButton"
                className="ouiControlBar__button"
                color="ghost"
                data-test-subj="dts"
                disabled={false}
                element="button"
                isDisabled={false}
                onClick={[Function]}
                size="s"
                type="button"
              >
                <button
                  className="ouiButton ouiButton--ghost ouiButton--small ouiControlBar__button"
                  data-test-subj="dts"
                  disabled={false}
                  onClick={[Function]}
                  style={
                    Object {
                      "minWidth": undefined,
                    }
                  }
                  type="button"
                >
                  <OuiButtonContent
                    className="ouiButton__content"
                    iconSide="left"
                    textProps={
                      Object {
                        "className": "ouiButton__text",
                      }
                    }
                  >
                    <span
                      className="ouiButtonContent ouiButton__content"
                    >
                      <span
                        className="ouiButton__text"
                      >
                        Sound the Alarm
                      </span>
                    </span>
                  </OuiButtonContent>
                </button>
              </OuiButtonDisplay>
            </OuiButton>
            <div
              className="ouiControlBar__text"
              key="close_the_hatch"
            >
              Close the Hatch
            </div>
            <div
              className="ouiControlBar__divider"
              key="divider3"
            />
            <OuiIcon
              aria-label="Sample Icon"
              className="ouiControlBar__icon"
              color="danger"
              key="sample_icon4"
              type="alert"
            >
              <span
                aria-label="Sample Icon"
                className="ouiControlBar__icon"
                color="danger"
                data-ouiicon-type="alert"
              />
            </OuiIcon>
            <div
              className="ouiControlBar__spacer"
              key="spacer5"
            />
            <button
              className="ouiControlBar__tab"
              key="flight_8156"
              onClick={[Function]}
            >
              Flight 815
            </button>
          </div>
          <div
            className="ouiControlBar__content"
          >
            Content
          </div>
        </section>
      </OuiI18n>
      <OuiScreenReaderOnly>
        <p
          aria-live="assertive"
          className="ouiScreenReaderOnly"
        >
          <OuiI18n
            default="There is a new region landmark with page level controls at the end of the document."
            token="ouiControlBar.screenReaderAnnouncement"
          >
            There is a new region landmark with page level controls at the end of the document.
          </OuiI18n>
        </p>
      </OuiScreenReaderOnly>
    </Portal>
  </OuiPortal>
</OuiControlBar>
`;

exports[`OuiControlBar props size is rendered 1`] = `
<OuiControlBar
  controls={
    Array [
      Object {
        "breadcrumbs": Array [
          Object {
            "text": "src",
          },
          Object {
            "text": "components",
          },
        ],
        "controlType": "breadcrumbs",
        "id": "current_file_path",
        "responsive": false,
      },
      Object {
        "controlType": "button",
        "data-test-subj": "dts",
        "id": "sound_the_alarm",
        "label": "Sound the Alarm",
        "onClick": [Function],
      },
      Object {
        "controlType": "text",
        "id": "close_the_hatch",
        "text": "Close the Hatch",
      },
      Object {
        "controlType": "divider",
      },
      Object {
        "aria-label": "Sample Icon",
        "color": "danger",
        "controlType": "icon",
        "iconType": "alert",
        "id": "sample_icon",
      },
      Object {
        "controlType": "spacer",
      },
      Object {
        "controlType": "tab",
        "id": "flight_815",
        "label": "Flight 815",
        "onClick": [Function],
      },
    ]
  }
  leftOffset={0}
  position="fixed"
  rightOffset={0}
  showContent={false}
  showOnMobile={false}
  size="s"
>
  <OuiPortal>
    <Portal
      containerInfo={
        <div>
          <section
            aria-label="Page level controls"
            class="ouiControlBar ouiControlBar--small ouiControlBar--fixed"
            style="left: 0px; right: 0px;"
          >
            <h2
              class="ouiScreenReaderOnly"
            >
              Page level controls
            </h2>
            <div
              class="ouiControlBar__controls"
            >
              <nav
                aria-label="breadcrumb"
                class="ouiBreadcrumbs ouiControlBar__breadcrumbs ouiBreadcrumbs--truncate"
              >
                <div
                  class="ouiBreadcrumbWall"
                >
                  <div
                    class="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--first"
                  >
                    <span
                      aria-current="false"
                      class="ouiBreadcrumb"
                      title="src"
                    >
                      src
                    </span>
                  </div>
                </div>
                <div
                  class="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--last"
                >
                  <span
                    aria-current="page"
                    class="ouiBreadcrumb ouiBreadcrumb--last"
                    title="components"
                  >
                    components
                  </span>
                </div>
              </nav>
              <button
                class="ouiButton ouiButton--ghost ouiButton--small ouiControlBar__button"
                data-test-subj="dts"
                type="button"
              >
                <span
                  class="ouiButtonContent ouiButton__content"
                >
                  <span
                    class="ouiButton__text"
                  >
                    Sound the Alarm
                  </span>
                </span>
              </button>
              <div
                class="ouiControlBar__text"
              >
                Close the Hatch
              </div>
              <div
                class="ouiControlBar__divider"
              />
              <span
                aria-label="Sample Icon"
                class="ouiControlBar__icon"
                color="danger"
                data-ouiicon-type="alert"
              />
              <div
                class="ouiControlBar__spacer"
              />
              <button
                class="ouiControlBar__tab"
              >
                Flight 815
              </button>
            </div>
          </section>
          <p
            aria-live="assertive"
            class="ouiScreenReaderOnly"
          >
            There is a new region landmark with page level controls at the end of the document.
          </p>
        </div>
      }
    >
      <OuiI18n
        default="Page level controls"
        token="ouiControlBar.screenReaderHeading"
      >
        <section
          aria-label="Page level controls"
          className="ouiControlBar ouiControlBar--small ouiControlBar--fixed"
          style={
            Object {
              "left": 0,
              "maxHeight": undefined,
              "right": 0,
            }
          }
        >
          <OuiScreenReaderOnly>
            <h2
              className="ouiScreenReaderOnly"
            >
              Page level controls
            </h2>
          </OuiScreenReaderOnly>
          <div
            className="ouiControlBar__controls"
          >
            <OuiBreadcrumbs
              breadcrumbs={
                Array [
                  Object {
                    "text": "src",
                  },
                  Object {
                    "text": "components",
                  },
                ]
              }
              className="ouiControlBar__breadcrumbs"
              key="current_file_path"
              responsive={false}
            >
              <nav
                aria-label="breadcrumb"
                className="ouiBreadcrumbs ouiControlBar__breadcrumbs ouiBreadcrumbs--truncate"
              >
                <div
                  className="ouiBreadcrumbWall"
                >
                  <div
                    className="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--first"
                  >
                    <OuiInnerText>
                      <span
                        aria-current="false"
                        className="ouiBreadcrumb"
                        title="src"
                      >
                        src
                      </span>
                    </OuiInnerText>
                  </div>
                </div>
                <div
                  className="ouiBreadcrumbWrapper ouiBreadcrumbWrapper--last"
                >
                  <OuiInnerText>
                    <span
                      aria-current="page"
                      className="ouiBreadcrumb ouiBreadcrumb--last"
                      title="components"
                    >
                      components
                    </span>
                  </OuiInnerText>
                </div>
              </nav>
            </OuiBreadcrumbs>
            <OuiButton
              className="ouiControlBar__button"
              color="ghost"
              data-test-subj="dts"
              key="sound_the_alarm1"
              onClick={[Function]}
              size="s"
            >
              <OuiButtonDisplay
                baseClassName="ouiButton"
                className="ouiControlBar__button"
                color="ghost"
                data-test-subj="dts"
                disabled={false}
                element="button"
                isDisabled={false}
                onClick={[Function]}
                size="s"
                type="button"
              >
                <button
                  className="ouiButton ouiButton--ghost ouiButton--small ouiControlBar__button"
                  data-test-subj="dts"
                  disabled={false}
                  onClick={[Function]}
                  style={
                    Object {
                      "minWidth": undefined,
                    }
                  }
                  type="button"
                >
                  <OuiButtonContent
                    className="ouiButton__content"
                    iconSide="left"
                    textProps={
                      Object {
                        "className": "ouiButton__text",
                      }
                    }
                  >
                    <span
                      className="ouiButtonContent ouiButton__content"
                    >
                      <span
                        className="ouiButton__text"
                      >
                        Sound the Alarm
                      </span>
                    </span>
                  </OuiButtonContent>
                </button>
              </OuiButtonDisplay>
            </OuiButton>
            <div
              className="ouiControlBar__text"
              key="close_the_hatch"
            >
              Close the Hatch
            </div>
            <div
              className="ouiControlBar__divider"
              key="divider3"
            />
            <OuiIcon
              aria-label="Sample Icon"
              className="ouiControlBar__icon"
              color="danger"
              key="sample_icon4"
              type="alert"
            >
              <span
                aria-label="Sample Icon"
                className="ouiControlBar__icon"
                color="danger"
                data-ouiicon-type="alert"
              />
            </OuiIcon>
            <div
              className="ouiControlBar__spacer"
              key="spacer5"
            />
            <button
              className="ouiControlBar__tab"
              key="flight_8156"
              onClick={[Function]}
            >
              Flight 815
            </button>
          </div>
        </section>
      </OuiI18n>
      <OuiScreenReaderOnly>
        <p
          aria-live="assertive"
          className="ouiScreenReaderOnly"
        >
          <OuiI18n
            default="There is a new region landmark with page level controls at the end of the document."
            token="ouiControlBar.screenReaderAnnouncement"
          >
            There is a new region landmark with page level controls at the end of the document.
          </OuiI18n>
        </p>
      </OuiScreenReaderOnly>
    </Portal>
  </OuiPortal>
</OuiControlBar>
`;