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

exports[`OuiPageHeaderContent is rendered 1`] = `
<div
  aria-label="aria-label"
  class="ouiPageHeaderContent"
  data-test-subj="test subject string"
>
  <div
    class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
  >
    <div
      class="ouiFlexItem"
    />
  </div>
</div>
`;

exports[`OuiPageHeaderContent props alignItems bottom is rendered 1`] = `
<div
  class="ouiPageHeaderContent"
>
  <div
    class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexEnd ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
  >
    <div
      class="ouiFlexItem"
    >
      <h1
        class="ouiTitle ouiTitle--large"
      >
        Page title
      </h1>
    </div>
    <div
      class="ouiFlexItem ouiFlexItem--flexGrowZero"
    >
      <div
        class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
      >
        <div
          class="ouiFlexItem ouiFlexItem--flexGrowZero"
        >
          <button>
            Button 1
          </button>
        </div>
        <div
          class="ouiFlexItem ouiFlexItem--flexGrowZero"
        >
          <button>
            Button 2
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`OuiPageHeaderContent props alignItems center is rendered 1`] = `
<div
  class="ouiPageHeaderContent"
>
  <div
    class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsCenter ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
  >
    <div
      class="ouiFlexItem"
    >
      <h1
        class="ouiTitle ouiTitle--large"
      >
        Page title
      </h1>
    </div>
    <div
      class="ouiFlexItem ouiFlexItem--flexGrowZero"
    >
      <div
        class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
      >
        <div
          class="ouiFlexItem ouiFlexItem--flexGrowZero"
        >
          <button>
            Button 1
          </button>
        </div>
        <div
          class="ouiFlexItem ouiFlexItem--flexGrowZero"
        >
          <button>
            Button 2
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`OuiPageHeaderContent props alignItems stretch is rendered 1`] = `
<div
  class="ouiPageHeaderContent"
>
  <div
    class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
  >
    <div
      class="ouiFlexItem"
    >
      <h1
        class="ouiTitle ouiTitle--large"
      >
        Page title
      </h1>
    </div>
    <div
      class="ouiFlexItem ouiFlexItem--flexGrowZero"
    >
      <div
        class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
      >
        <div
          class="ouiFlexItem ouiFlexItem--flexGrowZero"
        >
          <button>
            Button 1
          </button>
        </div>
        <div
          class="ouiFlexItem ouiFlexItem--flexGrowZero"
        >
          <button>
            Button 2
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`OuiPageHeaderContent props alignItems top is rendered 1`] = `
<div
  class="ouiPageHeaderContent"
>
  <div
    class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
  >
    <div
      class="ouiFlexItem"
    >
      <h1
        class="ouiTitle ouiTitle--large"
      >
        Page title
      </h1>
    </div>
    <div
      class="ouiFlexItem ouiFlexItem--flexGrowZero"
    >
      <div
        class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
      >
        <div
          class="ouiFlexItem ouiFlexItem--flexGrowZero"
        >
          <button>
            Button 1
          </button>
        </div>
        <div
          class="ouiFlexItem ouiFlexItem--flexGrowZero"
        >
          <button>
            Button 2
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`OuiPageHeaderContent props children is rendered 1`] = `
<div
  class="ouiPageHeaderContent"
>
  <div
    class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
  >
    <div
      class="ouiFlexItem"
    />
  </div>
  <div
    class="ouiPageHeaderContent__bottom"
  >
    <div
      class="ouiSpacer ouiSpacer--l"
    />
    <p>
      Anything
    </p>
  </div>
</div>
`;

exports[`OuiPageHeaderContent props children is rendered 2`] = `
<div
  class="ouiPageHeaderContent"
>
  <div
    class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
  >
    <div
      class="ouiFlexItem"
    />
  </div>
  <div
    class="ouiPageHeaderContent__bottom"
  >
    <div
      class="ouiSpacer ouiSpacer--l"
    />
    Child
  </div>
</div>
`;

exports[`OuiPageHeaderContent props children is rendered even if content props are passed 1`] = `
<div
  class="ouiPageHeaderContent"
>
  <div
    class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
  >
    <div
      class="ouiFlexItem"
    >
      <h1
        class="ouiTitle ouiTitle--large"
      >
        Page title
      </h1>
    </div>
    <div
      class="ouiFlexItem ouiFlexItem--flexGrowZero"
    >
      <div
        class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
      >
        <div
          class="ouiFlexItem ouiFlexItem--flexGrowZero"
        >
          <button>
            Button 1
          </button>
        </div>
        <div
          class="ouiFlexItem ouiFlexItem--flexGrowZero"
        >
          <button>
            Button 2
          </button>
        </div>
      </div>
    </div>
  </div>
  <div
    class="ouiPageHeaderContent__bottom"
  >
    <div
      class="ouiSpacer ouiSpacer--l"
    />
    Child
    <div
      class="ouiSpacer ouiSpacer--l"
    />
    <div
      class="ouiTabs ouiTabs--condensed ouiTabs--large"
      role="tablist"
    >
      <button
        aria-selected="true"
        class="ouiTab ouiTab-isSelected"
        role="tab"
        type="button"
      >
        <span
          class="ouiTab__content"
        >
          Tab 1
        </span>
      </button>
      <button
        aria-selected="false"
        class="ouiTab"
        role="tab"
        type="button"
      >
        <span
          class="ouiTab__content"
        >
          Tab 2
        </span>
      </button>
    </div>
  </div>
</div>
`;

exports[`OuiPageHeaderContent props description is rendered 1`] = `
<div
  class="ouiPageHeaderContent"
>
  <div
    class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
  >
    <div
      class="ouiFlexItem"
    >
      <div
        class="ouiText ouiText--medium ouiText--constrainedWidth"
      >
        <p>
          Description
        </p>
      </div>
    </div>
  </div>
</div>
`;

exports[`OuiPageHeaderContent props pageTitle is rendered 1`] = `
<div
  class="ouiPageHeaderContent"
>
  <div
    class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
  >
    <div
      class="ouiFlexItem"
    >
      <h1
        class="ouiTitle ouiTitle--large"
      >
        Page title
      </h1>
    </div>
  </div>
</div>
`;

exports[`OuiPageHeaderContent props responsive is rendered as false 1`] = `
<div
  class="ouiPageHeaderContent"
>
  <div
    class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiPageHeaderContent__top"
  >
    <div
      class="ouiFlexItem"
    />
  </div>
</div>
`;

exports[`OuiPageHeaderContent props responsive is rendered as reverse 1`] = `
<div
  class="ouiPageHeaderContent"
>
  <div
    class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
  >
    <div
      class="ouiFlexItem"
    />
  </div>
</div>
`;

exports[`OuiPageHeaderContent props rightSideItems is rendered 1`] = `
<div
  class="ouiPageHeaderContent"
>
  <div
    class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
  >
    <div
      class="ouiFlexItem"
    />
    <div
      class="ouiFlexItem ouiFlexItem--flexGrowZero"
    >
      <div
        class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems"
      >
        <div
          class="ouiFlexItem ouiFlexItem--flexGrowZero"
        >
          <button>
            Button 1
          </button>
        </div>
        <div
          class="ouiFlexItem ouiFlexItem--flexGrowZero"
        >
          <button>
            Button 2
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`OuiPageHeaderContent props rightSideItems is rendered with rightSideGroupProps 1`] = `
<div
  class="ouiPageHeaderContent"
>
  <div
    class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
  >
    <div
      class="ouiFlexItem"
    />
    <div
      class="ouiFlexItem ouiFlexItem--flexGrowZero"
    >
      <div
        aria-label="aria-label"
        class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiFlexGroup--wrap ouiPageHeaderContent__rightSideItems testClass1 testClass2"
        data-test-subj="test subject string"
      >
        <div
          class="ouiFlexItem ouiFlexItem--flexGrowZero"
        >
          <button>
            Button 1
          </button>
        </div>
        <div
          class="ouiFlexItem ouiFlexItem--flexGrowZero"
        >
          <button>
            Button 2
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`OuiPageHeaderContent props tabs is rendered 1`] = `
<div
  class="ouiPageHeaderContent"
>
  <div
    class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
  >
    <div
      class="ouiFlexItem"
    >
      <div
        class="ouiTabs ouiTabs--condensed ouiTabs--large"
        role="tablist"
      >
        <button
          aria-selected="true"
          class="ouiTab ouiTab-isSelected"
          role="tab"
          type="button"
        >
          <span
            class="ouiTab__content"
          >
            Tab 1
          </span>
        </button>
        <button
          aria-selected="false"
          class="ouiTab"
          role="tab"
          type="button"
        >
          <span
            class="ouiTab__content"
          >
            Tab 2
          </span>
        </button>
      </div>
    </div>
  </div>
</div>
`;

exports[`OuiPageHeaderContent props tabs is rendered with tabsProps 1`] = `
<div
  class="ouiPageHeaderContent"
>
  <div
    class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
  >
    <div
      class="ouiFlexItem"
    >
      <div
        aria-label="aria-label"
        class="ouiTabs ouiTabs--condensed ouiTabs--large testClass1 testClass2"
        data-test-subj="test subject string"
        role="tablist"
      >
        <button
          aria-selected="true"
          class="ouiTab ouiTab-isSelected"
          role="tab"
          type="button"
        >
          <span
            class="ouiTab__content"
          >
            Tab 1
          </span>
        </button>
        <button
          aria-selected="false"
          class="ouiTab"
          role="tab"
          type="button"
        >
          <span
            class="ouiTab__content"
          >
            Tab 2
          </span>
        </button>
      </div>
    </div>
  </div>
</div>
`;