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

exports[`OuiTabbedContent behavior when selected tab state isn't controlled by the owner, select the first tab by default 1`] = `
<div>
  <div
    class="ouiTabs"
    role="tablist"
  >
    <button
      aria-controls="generated-id"
      aria-selected="true"
      class="ouiTab ouiTab-isSelected"
      id="es"
      role="tab"
      type="button"
    >
      <span
        class="ouiTab__content"
      >
        Elasticsearch
      </span>
    </button>
    <button
      aria-controls="generated-id"
      aria-selected="false"
      class="ouiTab"
      data-test-subj="kibanaTab"
      id="kibana"
      role="tab"
      type="button"
    >
      <span
        class="ouiTab__content"
      >
        <strong>
          Kibana
        </strong>
      </span>
    </button>
  </div>
  <div
    aria-labelledby="es"
    id="generated-id"
    role="tabpanel"
  >
    <p>
      Elasticsearch content
    </p>
  </div>
</div>
`;

exports[`OuiTabbedContent behavior when uncontrolled, the selected tab should update if it receives new content 1`] = `
<OuiTabbedContent
  autoFocus="initial"
  tabs={
    Array [
      Object {
        "content": <p>
          Elasticsearch content
        </p>,
        "id": "es",
        "name": "Elasticsearch",
      },
      Object {
        "content": <p>
          updated Kibana content
        </p>,
        "data-test-subj": "kibanaTab",
        "id": "kibana",
        "name": <strong>
          Kibana
        </strong>,
      },
    ]
  }
>
  <div>
    <OuiTabs
      onFocus={[Function]}
    >
      <div
        className="ouiTabs"
        onFocus={[Function]}
        role="tablist"
      >
        <OuiTab
          aria-controls="generated-id"
          id="es"
          isSelected={false}
          key="es"
          onClick={[Function]}
        >
          <button
            aria-controls="generated-id"
            aria-selected={false}
            className="ouiTab"
            disabled={false}
            id="es"
            onClick={[Function]}
            role="tab"
            type="button"
          >
            <span
              className="ouiTab__content"
            >
              Elasticsearch
            </span>
          </button>
        </OuiTab>
        <OuiTab
          aria-controls="generated-id"
          data-test-subj="kibanaTab"
          id="kibana"
          isSelected={true}
          key="kibana"
          onClick={[Function]}
        >
          <button
            aria-controls="generated-id"
            aria-selected={true}
            className="ouiTab ouiTab-isSelected"
            data-test-subj="kibanaTab"
            disabled={false}
            id="kibana"
            onClick={[Function]}
            role="tab"
            type="button"
          >
            <span
              className="ouiTab__content"
            >
              <strong>
                Kibana
              </strong>
            </span>
          </button>
        </OuiTab>
      </div>
    </OuiTabs>
    <div
      aria-labelledby="kibana"
      id="generated-id"
      role="tabpanel"
    >
      <p>
        updated Kibana content
      </p>
    </div>
  </div>
</OuiTabbedContent>
`;

exports[`OuiTabbedContent is rendered with required props and tabs 1`] = `
<div
  aria-label="aria-label"
  class="testClass1 testClass2"
  data-test-subj="test subject string"
>
  <div
    class="ouiTabs"
    role="tablist"
  >
    <button
      aria-controls="generated-id"
      aria-selected="true"
      class="ouiTab ouiTab-isSelected"
      id="es"
      role="tab"
      type="button"
    >
      <span
        class="ouiTab__content"
      >
        Elasticsearch
      </span>
    </button>
    <button
      aria-controls="generated-id"
      aria-selected="false"
      class="ouiTab"
      data-test-subj="kibanaTab"
      id="kibana"
      role="tab"
      type="button"
    >
      <span
        class="ouiTab__content"
      >
        <strong>
          Kibana
        </strong>
      </span>
    </button>
  </div>
  <div
    aria-labelledby="es"
    id="generated-id"
    role="tabpanel"
  >
    <p>
      Elasticsearch content
    </p>
  </div>
</div>
`;

exports[`OuiTabbedContent props autoFocus initial is rendered 1`] = `
<div>
  <div
    class="ouiTabs"
    role="tablist"
  >
    <button
      aria-controls="generated-id"
      aria-selected="true"
      class="ouiTab ouiTab-isSelected"
      id="es"
      role="tab"
      type="button"
    >
      <span
        class="ouiTab__content"
      >
        Elasticsearch
      </span>
    </button>
    <button
      aria-controls="generated-id"
      aria-selected="false"
      class="ouiTab"
      data-test-subj="kibanaTab"
      id="kibana"
      role="tab"
      type="button"
    >
      <span
        class="ouiTab__content"
      >
        <strong>
          Kibana
        </strong>
      </span>
    </button>
  </div>
  <div
    aria-labelledby="es"
    id="generated-id"
    role="tabpanel"
  >
    <p>
      Elasticsearch content
    </p>
  </div>
</div>
`;

exports[`OuiTabbedContent props autoFocus selected is rendered 1`] = `
<div>
  <div
    class="ouiTabs"
    role="tablist"
  >
    <button
      aria-controls="generated-id"
      aria-selected="true"
      class="ouiTab ouiTab-isSelected"
      id="es"
      role="tab"
      type="button"
    >
      <span
        class="ouiTab__content"
      >
        Elasticsearch
      </span>
    </button>
    <button
      aria-controls="generated-id"
      aria-selected="false"
      class="ouiTab"
      data-test-subj="kibanaTab"
      id="kibana"
      role="tab"
      type="button"
    >
      <span
        class="ouiTab__content"
      >
        <strong>
          Kibana
        </strong>
      </span>
    </button>
  </div>
  <div
    aria-labelledby="es"
    id="generated-id"
    role="tabpanel"
  >
    <p>
      Elasticsearch content
    </p>
  </div>
</div>
`;

exports[`OuiTabbedContent props display can be condensed 1`] = `
<div>
  <div
    class="ouiTabs ouiTabs--condensed"
    role="tablist"
  >
    <button
      aria-controls="generated-id"
      aria-selected="true"
      class="ouiTab ouiTab-isSelected"
      id="es"
      role="tab"
      type="button"
    >
      <span
        class="ouiTab__content"
      >
        Elasticsearch
      </span>
    </button>
    <button
      aria-controls="generated-id"
      aria-selected="false"
      class="ouiTab"
      data-test-subj="kibanaTab"
      id="kibana"
      role="tab"
      type="button"
    >
      <span
        class="ouiTab__content"
      >
        <strong>
          Kibana
        </strong>
      </span>
    </button>
  </div>
  <div
    aria-labelledby="es"
    id="generated-id"
    role="tabpanel"
  >
    <p>
      Elasticsearch content
    </p>
  </div>
</div>
`;

exports[`OuiTabbedContent props initialSelectedTab renders a selected tab 1`] = `
<div>
  <div
    class="ouiTabs"
    role="tablist"
  >
    <button
      aria-controls="generated-id"
      aria-selected="false"
      class="ouiTab"
      id="es"
      role="tab"
      type="button"
    >
      <span
        class="ouiTab__content"
      >
        Elasticsearch
      </span>
    </button>
    <button
      aria-controls="generated-id"
      aria-selected="true"
      class="ouiTab ouiTab-isSelected"
      data-test-subj="kibanaTab"
      id="kibana"
      role="tab"
      type="button"
    >
      <span
        class="ouiTab__content"
      >
        <strong>
          Kibana
        </strong>
      </span>
    </button>
  </div>
  <div
    aria-labelledby="kibana"
    id="generated-id"
    role="tabpanel"
  >
    <p>
      Kibana content
    </p>
  </div>
</div>
`;

exports[`OuiTabbedContent props selectedTab renders a selected tab 1`] = `
<div>
  <div
    class="ouiTabs"
    role="tablist"
  >
    <button
      aria-controls="generated-id"
      aria-selected="false"
      class="ouiTab"
      id="es"
      role="tab"
      type="button"
    >
      <span
        class="ouiTab__content"
      >
        Elasticsearch
      </span>
    </button>
    <button
      aria-controls="generated-id"
      aria-selected="true"
      class="ouiTab ouiTab-isSelected"
      data-test-subj="kibanaTab"
      id="kibana"
      role="tab"
      type="button"
    >
      <span
        class="ouiTab__content"
      >
        <strong>
          Kibana
        </strong>
      </span>
    </button>
  </div>
  <div
    aria-labelledby="kibana"
    id="generated-id"
    role="tabpanel"
  >
    <p>
      Kibana content
    </p>
  </div>
</div>
`;

exports[`OuiTabbedContent props size can be small 1`] = `
<div>
  <div
    class="ouiTabs ouiTabs--small"
    role="tablist"
  >
    <button
      aria-controls="generated-id"
      aria-selected="true"
      class="ouiTab ouiTab-isSelected"
      id="es"
      role="tab"
      type="button"
    >
      <span
        class="ouiTab__content"
      >
        Elasticsearch
      </span>
    </button>
    <button
      aria-controls="generated-id"
      aria-selected="false"
      class="ouiTab"
      data-test-subj="kibanaTab"
      id="kibana"
      role="tab"
      type="button"
    >
      <span
        class="ouiTab__content"
      >
        <strong>
          Kibana
        </strong>
      </span>
    </button>
  </div>
  <div
    aria-labelledby="es"
    id="generated-id"
    role="tabpanel"
  >
    <p>
      Elasticsearch content
    </p>
  </div>
</div>
`;