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

exports[`OuiResizableContainer can adjust panel props 1`] = `
<div
  aria-label="aria-label"
  class="ouiResizableContainer ouiResizableContainer--horizontal testClass1 testClass2"
  data-test-subj="test subject string"
>
  <div
    class="ouiResizablePanel ouiResizablePanel--middle"
    id="resizable-panel_generated-id"
    style="width:50%;height:auto"
  >
    <div
      class="ouiPanel ouiPanel--borderRadiusNone ouiPanel--transparent ouiPanel--noShadow ouiResizablePanel__content ouiResizablePanel__content--scrollable"
    >
      Testing
    </div>
  </div>
  <button
    aria-label="Press left or right to adjust panels size"
    class="ouiResizableButton ouiResizableButton--horizontal"
    data-test-subj="ouiResizableButton"
    id="resizable-button_generated-id"
    type="button"
  />
  <div
    class="ouiResizablePanel ouiResizablePanel--middle"
    id="resizable-panel_generated-id"
    style="width:50%;height:auto"
  >
    <div
      class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusNone ouiPanel--plain ouiPanel--noShadow ouiResizablePanel__content ouiResizablePanel__content--scrollable"
    >
      123
    </div>
  </div>
</div>
`;

exports[`OuiResizableContainer can be controlled externally 1`] = `
<div
  aria-label="aria-label"
  class="ouiResizableContainer ouiResizableContainer--horizontal testClass1 testClass2"
  data-test-subj="test subject string"
>
  <div
    class="ouiResizablePanel ouiResizablePanel--middle"
    id="resizable-panel_generated-id"
    style="width:50%;height:auto"
  >
    <div
      class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusNone ouiPanel--transparent ouiPanel--noShadow ouiResizablePanel__content ouiResizablePanel__content--scrollable"
    >
      Testing
    </div>
  </div>
  <button
    aria-label="Press left or right to adjust panels size"
    class="ouiResizableButton ouiResizableButton--horizontal"
    data-test-subj="ouiResizableButton"
    id="resizable-button_generated-id"
    type="button"
  />
  <div
    class="ouiResizablePanel ouiResizablePanel--middle"
    id="resizable-panel_generated-id"
    style="width:50%;height:auto"
  >
    <div
      class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusNone ouiPanel--transparent ouiPanel--noShadow ouiResizablePanel__content ouiResizablePanel__content--scrollable"
    >
      123
    </div>
  </div>
</div>
`;

exports[`OuiResizableContainer can be vertical 1`] = `
<div
  aria-label="aria-label"
  class="ouiResizableContainer ouiResizableContainer--vertical testClass1 testClass2"
  data-test-subj="test subject string"
>
  <div
    class="ouiResizablePanel ouiResizablePanel--middle"
    id="resizable-panel_generated-id"
    style="width:100%;height:50%"
  >
    <div
      class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusNone ouiPanel--transparent ouiPanel--noShadow ouiResizablePanel__content ouiResizablePanel__content--scrollable"
    >
      Testing
    </div>
  </div>
  <button
    aria-label="Press up or down to adjust panels size"
    class="ouiResizableButton ouiResizableButton--vertical"
    data-test-subj="ouiResizableButton"
    id="resizable-button_generated-id"
    type="button"
  />
  <div
    class="ouiResizablePanel ouiResizablePanel--middle"
    id="resizable-panel_generated-id"
    style="width:100%;height:50%"
  >
    <div
      class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusNone ouiPanel--transparent ouiPanel--noShadow ouiResizablePanel__content ouiResizablePanel__content--scrollable"
    >
      123
    </div>
  </div>
</div>
`;

exports[`OuiResizableContainer can have more than two panels 1`] = `
<div
  aria-label="aria-label"
  class="ouiResizableContainer ouiResizableContainer--horizontal testClass1 testClass2"
  data-test-subj="test subject string"
>
  <div
    class="ouiResizablePanel ouiResizablePanel--middle"
    id="resizable-panel_generated-id"
    style="width:33%;height:auto"
  >
    <div
      class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusNone ouiPanel--transparent ouiPanel--noShadow ouiResizablePanel__content ouiResizablePanel__content--scrollable"
    >
      Testing
    </div>
  </div>
  <button
    aria-label="Press left or right to adjust panels size"
    class="ouiResizableButton ouiResizableButton--horizontal"
    data-test-subj="ouiResizableButton"
    id="resizable-button_generated-id"
    type="button"
  />
  <div
    class="ouiResizablePanel ouiResizablePanel--middle"
    id="resizable-panel_generated-id"
    style="width:33%;height:auto"
  >
    <div
      class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusNone ouiPanel--transparent ouiPanel--noShadow ouiResizablePanel__content ouiResizablePanel__content--scrollable"
    >
      123
    </div>
  </div>
  <button
    aria-label="Press left or right to adjust panels size"
    class="ouiResizableButton ouiResizableButton--horizontal"
    data-test-subj="ouiResizableButton"
    id="resizable-button_generated-id"
    type="button"
  />
  <div
    class="ouiResizablePanel ouiResizablePanel--middle"
    id="resizable-panel_generated-id"
    style="width:33%;height:auto"
  >
    <div
      class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusNone ouiPanel--transparent ouiPanel--noShadow ouiResizablePanel__content ouiResizablePanel__content--scrollable"
    >
      And again
    </div>
  </div>
</div>
`;

exports[`OuiResizableContainer can have scrollable panels 1`] = `
<div
  aria-label="aria-label"
  class="ouiResizableContainer ouiResizableContainer--horizontal testClass1 testClass2"
  data-test-subj="test subject string"
>
  <div
    class="ouiResizablePanel ouiResizablePanel--middle"
    id="resizable-panel_generated-id"
    style="width:50%;height:auto"
  >
    <div
      class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusNone ouiPanel--transparent ouiPanel--noShadow ouiResizablePanel__content ouiResizablePanel__content--scrollable"
    >
      Testing
    </div>
  </div>
  <button
    aria-label="Press left or right to adjust panels size"
    class="ouiResizableButton ouiResizableButton--horizontal"
    data-test-subj="ouiResizableButton"
    id="resizable-button_generated-id"
    type="button"
  />
  <div
    class="ouiResizablePanel ouiResizablePanel--middle"
    id="resizable-panel_generated-id"
    style="width:50%;height:auto"
  >
    <div
      class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusNone ouiPanel--transparent ouiPanel--noShadow ouiResizablePanel__content ouiResizablePanel__content--scrollable"
    >
      123
    </div>
  </div>
</div>
`;

exports[`OuiResizableContainer can have toggleable panels 1`] = `
<div
  aria-label="aria-label"
  class="ouiResizableContainer ouiResizableContainer--horizontal testClass1 testClass2"
  data-test-subj="test subject string"
>
  <div
    class="ouiResizablePanel ouiResizablePanel--collapsible ouiResizablePanel--middle"
    id="resizable-panel_generated-id"
    style="width:20%;height:auto"
  >
    <div
      class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusNone ouiPanel--transparent ouiPanel--noShadow ouiResizablePanel__content ouiResizablePanel__content--scrollable"
    >
      Sidebar
    </div>
  </div>
  <button
    aria-label="Press left or right to adjust panels size"
    class="ouiResizableButton ouiResizableButton--horizontal"
    data-test-subj="ouiResizableButton"
    id="resizable-button_generated-id"
    type="button"
  />
  <div
    class="ouiResizablePanel ouiResizablePanel--middle"
    id="resizable-panel_generated-id"
    style="width:80%;height:auto"
  >
    <div
      class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusNone ouiPanel--transparent ouiPanel--noShadow ouiResizablePanel__content ouiResizablePanel__content--scrollable"
    >
      Sidebar content
    </div>
  </div>
</div>
`;

exports[`OuiResizableContainer is rendered 1`] = `
<div
  aria-label="aria-label"
  class="ouiResizableContainer ouiResizableContainer--horizontal testClass1 testClass2"
  data-test-subj="test subject string"
>
  <div
    class="ouiResizablePanel ouiResizablePanel--middle"
    id="resizable-panel_generated-id"
    style="width:50%;height:auto"
  >
    <div
      class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusNone ouiPanel--transparent ouiPanel--noShadow ouiResizablePanel__content ouiResizablePanel__content--scrollable"
    >
      Testing
    </div>
  </div>
  <button
    aria-label="Press left or right to adjust panels size"
    class="ouiResizableButton ouiResizableButton--horizontal"
    data-test-subj="ouiResizableButton"
    id="resizable-button_generated-id"
    type="button"
  />
  <div
    class="ouiResizablePanel ouiResizablePanel--middle"
    id="resizable-panel_generated-id"
    style="width:50%;height:auto"
  >
    <div
      class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusNone ouiPanel--transparent ouiPanel--noShadow ouiResizablePanel__content ouiResizablePanel__content--scrollable"
    >
      123
    </div>
  </div>
</div>
`;

exports[`OuiResizableContainer toggleable panels can be configurable 1`] = `
<div
  aria-label="aria-label"
  class="ouiResizableContainer ouiResizableContainer--horizontal testClass1 testClass2"
  data-test-subj="test subject string"
>
  <div
    class="ouiResizablePanel ouiResizablePanel--collapsible ouiResizablePanel--middle"
    id="resizable-panel_generated-id"
    style="width:20%;height:auto"
  >
    <div
      class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusNone ouiPanel--transparent ouiPanel--noShadow ouiResizablePanel__content ouiResizablePanel__content--scrollable"
    >
      Sidebar
    </div>
  </div>
  <button
    aria-label="Press left or right to adjust panels size"
    class="ouiResizableButton ouiResizableButton--horizontal"
    data-test-subj="ouiResizableButton"
    id="resizable-button_generated-id"
    type="button"
  />
  <div
    class="ouiResizablePanel ouiResizablePanel--middle"
    id="resizable-panel_generated-id"
    style="width:80%;height:auto"
  >
    <div
      class="ouiPanel ouiPanel--paddingMedium ouiPanel--borderRadiusNone ouiPanel--transparent ouiPanel--noShadow ouiResizablePanel__content ouiResizablePanel__content--scrollable"
    >
      Sidebar content
    </div>
  </div>
</div>
`;