select.stories.storyshot

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

exports[`Storyshots Components/Select 2-column 1`] = `
<div
  style="height: 200px"
>
  

  <div
    class="fd-container"
  >
    
  
    <div
      class="fd-row"
    >
      
    
      <div
        class="fd-col fd-col--6"
      >
        
    
        <label
          class="fd-form-label"
          id="twoColumn1Label"
        >
          Choose an option
        </label>
        <br />
        
      
        <div
          class="fd-popover"
        >
          
        
          <div
            class="fd-popover__control"
          >
            
          
            <div
              class="fd-select"
            >
              
            
              <button
                aria-expanded="true"
                aria-haspopup="listbox"
                aria-labelledby="twoColumn1Label twoColumn1Value"
                class="fd-select__control"
                id="twoColumnSelectCombobox"
                onclick="
                    toggleElAttrs('h0C62325', ['aria-hidden']);
                    toggleElAttrs('twoColumnSelectCombobox', ['aria-expanded']);
                "
                tabindex="0"
              >
                
              
                <span
                  class="fd-select__text-content"
                  is="twoColumn1Value"
                >
                  Select Product
                </span>
                
              
                <span
                  class="fd-button fd-button--transparent fd-select__button"
                >
                  
                    
                  <i
                    class="sap-icon--slim-arrow-down"
                  />
                  
                
                </span>
                
            
              </button>
              
          
            </div>
            
        
          </div>
          
        
          <div
            aria-hidden="false"
            class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
            id="h0C62325"
          >
            
          
            <ul
              aria-activedescendant="twoColumnSelectCombobox-currentlyFocusedItem"
              aria-labelledby="twoColumn1Label"
              class="fd-list fd-list--dropdown"
              role="listbox"
            >
              
                
              <li
                aria-selected="true"
                class="fd-list__item is-selected"
                id="twoColumnSelectCombobox-currentlyFocusedItem"
                role="option"
                tabindex="0"
              >
                
                    
                <span
                  class="fd-list__title"
                >
                  Product 1
                </span>
                
                    
                <span
                  class="fd-list__secondary"
                >
                  1000 EUR
                </span>
                
                
              </li>
              
                
              <li
                class="fd-list__item"
                role="option"
                tabindex="-1"
              >
                
                    
                <span
                  class="fd-list__title"
                >
                  Product 2
                </span>
                
                    
                <span
                  class="fd-list__secondary"
                >
                  750 EUR
                </span>
                
                
              </li>
              
                
              <li
                class="fd-list__item"
                role="option"
                tabindex="-1"
              >
                
                    
                <span
                  class="fd-list__title"
                >
                  Product 3
                </span>
                
                    
                <span
                  class="fd-list__secondary"
                >
                  780 EUR
                </span>
                
                
              </li>
              
                
              <li
                class="fd-list__item"
                role="option"
                tabindex="-1"
              >
                
                    
                <span
                  class="fd-list__title"
                >
                  Product 4
                </span>
                
                    
                <span
                  class="fd-list__secondary"
                >
                  40 EUR
                </span>
                
                
              </li>
              
          
            </ul>
            
        
          </div>
          
      
        </div>
        
    
      </div>
      
    
      <div
        class="fd-col fd-col--6"
      >
        
    
        <label
          class="fd-form-label"
          id="twoColumn2Label"
        >
          Choose an option
        </label>
        <br />
        
      
        <div
          class="fd-popover"
        >
          
        
          <div
            class="fd-popover__control"
          >
            
          
            <div
              class="fd-select fd-select--compact"
            >
              
            
              <button
                aria-expanded="true"
                aria-haspopup="listbox"
                aria-labelledby="twoColumn2Label twoColumn2Value"
                class="fd-select__control"
                id="twoColumnSelectCombobox2"
                onclick="
                    toggleElAttrs('h07jj326', ['aria-hidden']);
                    toggleElAttrs('twoColumnSelectCombobox2', ['aria-expanded']);
                "
                tabindex="0"
              >
                
                
                <span
                  class="fd-select__text-content"
                  id="twoColumn2Value"
                >
                  Select Product
                </span>
                
                
                <span
                  class="fd-button fd-button--transparent fd-select__button"
                >
                  
                        
                  <i
                    class="sap-icon--slim-arrow-down"
                  />
                  
                
                </span>
                
            
              </button>
              
          
            </div>
            
        
          </div>
          
        
          <div
            aria-hidden="false"
            class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
            id="h07jj326"
          >
            
          
            <ul
              aria-activedescendant="twoColumnSelectCombobox2-currentlyFocusedItem"
              aria-labelledby="twoColumn2Label"
              class="fd-list fd-list--dropdown fd-list--compact"
              role="listbox"
            >
              
            
              <li
                aria-selected="true"
                class="fd-list__item is-selected"
                id="twoColumnSelectCombobox2-currentlyFocusedItem"
                role="option"
                tabindex="0"
              >
                
              
                <span
                  class="fd-list__title"
                >
                  Product 1
                </span>
                
              
                <span
                  class="fd-list__secondary"
                >
                  1000 EUR
                </span>
                
            
              </li>
              
            
              <li
                class="fd-list__item"
                role="option"
                tabindex="-1"
              >
                
              
                <span
                  class="fd-list__title"
                >
                  Product 2
                </span>
                
              
                <span
                  class="fd-list__secondary"
                >
                  750 EUR
                </span>
                
            
              </li>
              
            
              <li
                class="fd-list__item"
                role="option"
                tabindex="-1"
              >
                
              
                <span
                  class="fd-list__title"
                >
                  Product 3
                </span>
                
              
                <span
                  class="fd-list__secondary"
                >
                  780 EUR
                </span>
                
            
              </li>
              
            
              <li
                class="fd-list__item"
                role="option"
                tabindex="-1"
              >
                
              
                <span
                  class="fd-list__title"
                >
                  Product 4
                </span>
                
              
                <span
                  class="fd-list__secondary"
                >
                  40 EUR
                </span>
                
            
              </li>
              
          
            </ul>
            
        
          </div>
          
      
        </div>
        
    
      </div>
      
  
    </div>
    

  </div>
  

</div>
`;

exports[`Storyshots Components/Select 2-column with icons 1`] = `
<div
  style="height: 200px"
>
  
    
  <label
    class="fd-form-label"
    id="twoColumnsAndIconsLabel"
  >
    Choose an option
  </label>
  <br />
  
    
  <div
    class="fd-popover"
  >
    
    
    <div
      class="fd-popover__control"
    >
      
        
      <div
        class="fd-select"
      >
        
            
        <button
          aria-expanded="true"
          aria-haspopup="listbox"
          aria-labelledby="twoColumnsAndIconsLabel twoColumnsAndIconsValue"
          class="fd-select__control"
          id="twoColumnsAndIconSelectCombobox"
          onclick="
                    toggleElAttrs('h090G325', ['aria-hidden']);
                    toggleElAttrs('twoColumnsAndIconSelectCombobox', ['aria-expanded']);
                "
          tabindex="0"
        >
          
                
          <span
            class="fd-select__text-content"
            is="twoColumnsAndIconsValue"
          >
            Select Product
          </span>
          
                
          <span
            class="fd-button fd-button--transparent fd-select__button"
          >
            
                    
            <i
              class="sap-icon--slim-arrow-down"
            />
            
                
          </span>
          
            
        </button>
        
        
      </div>
      
    
    </div>
    
    
    <div
      aria-hidden="false"
      class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
      id="h090G325"
    >
      
        
      <ul
        aria-activedescendant="twoColumnsAndIconSelectCombobox-currentlyFocusedItem"
        aria-labelledby="twoColumnsAndIconsLabel"
        class="fd-list fd-list--dropdown"
        role="listbox"
      >
        
            
        <li
          aria-selected="true"
          class="fd-list__item is-selected"
          id="twoColumnsAndIconSelectCombobox-currentlyFocusedItem"
          role="option"
          tabindex="0"
        >
          
                
          <i
            class="fd-list__icon sap-icon--marketing-campaign"
            role="presentation"
          />
          
                
          <span
            class="fd-list__title"
          >
            Marketing
          </span>
          
                
          <span
            class="fd-list__secondary"
          >
            1000 EUR
          </span>
          
            
        </li>
        
            
        <li
          class="fd-list__item"
          role="option"
          tabindex="-1"
        >
          
                
          <i
            class="fd-list__icon sap-icon--save"
            role="presentation"
          />
          
                
          <span
            class="fd-list__title"
          >
            Backups
          </span>
          
                
          <span
            class="fd-list__secondary"
          >
            500 EUR
          </span>
          
            
        </li>
        
            
        <li
          class="fd-list__item"
          role="option"
          tabindex="-1"
        >
          
                
          <i
            class="fd-list__icon sap-icon--shipping-status"
            role="presentation"
          />
          
                
          <span
            class="fd-list__title"
          >
            Shipping
          </span>
          
                
          <span
            class="fd-list__secondary"
          >
            125 EUR
          </span>
          
            
        </li>
        
            
        <li
          class="fd-list__item"
          role="option"
          tabindex="-1"
        >
          
                
          <i
            class="fd-list__icon sap-icon--headset"
            role="presentation"
          />
          
                
          <span
            class="fd-list__title"
          >
            Consulting
          </span>
          
                
          <span
            class="fd-list__secondary"
          >
            200 EUR
          </span>
          
            
        </li>
        
        
      </ul>
      
    
    </div>
    
    
  </div>
  

</div>
`;

exports[`Storyshots Components/Select Blank 1`] = `
<div
  style="height: 250px"
>
  

  <div
    class="fd-container"
  >
    
  
    <div
      class="fd-row"
    >
      
        
      <div
        class="fd-col fd-col--6"
      >
        
            
        <label
          class="fd-form-label"
          id="h45336F3"
        >
          
                Choose an option
            
        </label>
        
            
        <br />
        
            
        <div
          class="fd-popover"
        >
          
                
          <div
            class="fd-popover__control"
          >
            
                    
            <div
              class="fd-select"
            >
              
                        
              <button
                aria-expanded="true"
                aria-haspopup="listbox"
                aria-labelledby="h45336F3 h45336F3Value"
                class="fd-select__control"
                id="acqw4q3r3d"
                onclick="
                                toggleElAttrs('d2qrdad2', ['aria-hidden']);
                                toggleElAttrs('acqw4q3r3d', ['aria-expanded']);
                            "
                tabindex="0"
              >
                
                            
                <span
                  class="fd-select__text-content"
                  id="h45336F3Value"
                />
                
                            
                <span
                  class="fd-button fd-button--transparent fd-select__button"
                >
                  
                                
                  <i
                    class="sap-icon--slim-arrow-down"
                  />
                   
                            
                </span>
                
                        
              </button>
              
                    
            </div>
            
                
          </div>
          
                
          <div
            aria-hidden="false"
            class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
            id="d2qrdad2"
          >
            
                    
            <ul
              aria-activedescendant="blankSelectCombobox-currentlyFocusedItem"
              aria-labelledby="h45336F3"
              class="fd-list fd-list--dropdown"
              role="listbox"
            >
              
                        
              <li
                aria-label="None selected"
                aria-selected="true"
                class="fd-list__item is-selected"
                id="blankSelectCombobox-currentlyFocusedItem"
                role="option"
                tabindex="0"
              >
                
                            
                <span
                  class="fd-list__title"
                >
                  
                        
                </span>
              </li>
              
                        
              <li
                class="fd-list__item"
                role="option"
                tabindex="-1"
              >
                
                            
                <span
                  class="fd-list__title"
                >
                  List item 1
                </span>
                
                        
              </li>
              
                        
              <li
                class="fd-list__item"
                role="option"
                tabindex="-1"
              >
                
                            
                <span
                  class="fd-list__title"
                >
                  List item 2
                </span>
                
                        
              </li>
              
                        
              <li
                class="fd-list__item"
                role="option"
                tabindex="-1"
              >
                
                            
                <span
                  class="fd-list__title"
                >
                  List item 3
                </span>
                
                        
              </li>
              
                        
              <li
                class="fd-list__item"
                role="option"
                tabindex="-1"
              >
                
                            
                <span
                  class="fd-list__title"
                >
                  List item 4
                </span>
                
                        
              </li>
              
                    
            </ul>
            
                
          </div>
          
            
        </div>
        
        
      </div>
      
        
      <div
        class="fd-col fd-col--6"
      >
        
            
        <label
          class="fd-form-label"
          id="h45336F4"
        >
          
                Choose an option
            
        </label>
        
            
        <br />
        
            
        <div
          class="fd-popover"
        >
          
                
          <div
            class="fd-popover__control"
          >
            
                    
            <div
              class="fd-select fd-select--compact"
            >
              
                        
              <button
                aria-expanded="true"
                aria-haspopup="listbox"
                aria-labelledby="h45336F4 h45336F4Value"
                class="fd-select__control"
                id="oj89qyeuawbd"
                onclick="
                                toggleElAttrs('oj89qyeuawbd', ['aria-expanded']);
                                toggleElAttrs('m8ae7ahrb', ['aria-hidden']);
                            "
                tabindex="0"
              >
                
                            
                <span
                  class="fd-select__text-content"
                  id="h45336F4Value"
                />
                
                            
                <span
                  class="fd-button fd-button--transparent fd-select__button"
                >
                  
                                
                  <i
                    class="sap-icon--slim-arrow-down"
                  />
                   
                            
                </span>
                
                        
              </button>
              
                    
            </div>
            
                
          </div>
          
                
          <div
            aria-hidden="false"
            class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
            id="m8ae7ahrb"
          >
            
                    
            <ul
              aria-activedescendant="blankSelectComboboxComp-currentlyFocusedItem"
              aria-labelledby="h45336F4"
              class="fd-list fd-list--dropdown fd-list--compact"
              role="listbox"
            >
              
                        
              <li
                aria-label="item"
                aria-selected="true"
                class="fd-list__item is-selected"
                id="blankSelectComboboxComp-currentlyFocusedItem"
                role="option"
                tabindex="0"
              >
                
                            
                <span
                  class="fd-list__title"
                >
                  
                        
                </span>
              </li>
              
                        
              <li
                class="fd-list__item"
                role="option"
                tabindex="-1"
              >
                
                            
                <span
                  class="fd-list__title"
                >
                  List item 2
                </span>
                
                        
              </li>
              
                        
              <li
                class="fd-list__item"
                role="option"
                tabindex="-1"
              >
                
                            
                <span
                  class="fd-list__title"
                >
                  List item 3
                </span>
                
                        
              </li>
              
                        
              <li
                class="fd-list__item"
                role="option"
                tabindex="-1"
              >
                
                            
                <span
                  class="fd-list__title"
                >
                  List item 4
                </span>
                
                        
              </li>
              
                    
            </ul>
            
                
          </div>
          
            
        </div>
        
        
      </div>
      
    
    </div>
    

  </div>
  

</div>
`;

exports[`Storyshots Components/Select Compact 1`] = `
<div
  style="height: 200px"
>
  
    
  <label
    class="fd-form-label"
    id="compactSelectLabel"
  >
    Choose an option
  </label>
  <br />
  
    
  <div
    class="fd-popover"
  >
    
        
    <div
      class="fd-popover__control"
    >
      
            
      <div
        class="fd-select fd-select--compact"
      >
        
                
        <button
          aria-expanded="true"
          aria-haspopup="listbox"
          aria-labelledby="compactSelectLabel compactSelectValue"
          class="fd-select__control"
          id="compactSelectCombobox"
          onclick="
                        toggleElAttrs('h0C6A326', ['aria-hidden']);
                        toggleElAttrs('compactSelectCombobox', ['aria-expanded']);
                    "
          tabindex="0"
        >
          
                    
          <span
            class="fd-select__text-content"
            id="compactSelectValue"
          >
            Select
          </span>
          
                    
          <span
            class="fd-button fd-button--transparent fd-select__button"
          >
            
                        
            <i
              class="sap-icon--slim-arrow-down"
            />
            
                    
          </span>
          
                
        </button>
        
            
      </div>
      
        
    </div>
    
        
    <div
      aria-hidden="false"
      class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
      id="h0C6A326"
    >
      
            
      <ul
        aria-activedescendant="compactSelectCombobox-currentlyFocusedItem"
        aria-labelledby="compactSelectLabel"
        class="fd-list fd-list--dropdown fd-list--compact"
        role="listbox"
      >
        
                
        <li
          aria-selected="true"
          class="fd-list__item is-selected"
          id="compactSelectCombobox-currentlyFocusedItem"
          role="option"
          tabindex="0"
        >
          
                
          <span
            class="fd-list__title"
          >
            
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                
          </span>
          
                
        </li>
        
                
        <li
          class="fd-list__item"
          role="option"
          tabindex="-1"
        >
          
                
          <span
            class="fd-list__title"
          >
            List item 2
          </span>
          
                
        </li>
        
                
        <li
          class="fd-list__item"
          role="option"
          tabindex="-1"
        >
          
                
          <span
            class="fd-list__title"
          >
            List item 3
          </span>
          
                
        </li>
        
                
        <li
          class="fd-list__item"
          role="option"
          tabindex="-1"
        >
          
                
          <span
            class="fd-list__title"
          >
            List item 4
          </span>
          
                
        </li>
        
            
      </ul>
      
        
    </div>
    
    
  </div>
  

</div>
`;

exports[`Storyshots Components/Select Cozy 1`] = `
<div
  style="height: 250px"
>
  
    
  <label
    class="fd-form-label"
    id="cozySelectLabel"
  >
    Choose an option
  </label>
  <br />
  
    
  <div
    class="fd-popover"
  >
    
        
    <div
      class="fd-popover__control"
    >
      
            
      <div
        class="fd-select"
      >
        
                
        <button
          aria-expanded="true"
          aria-haspopup="listbox"
          aria-labelledby="cozySelectLabel cozySelectValue"
          class="fd-select__control"
          id="cozySelectCombobox"
          onclick="
                        toggleElAttrs('h0C6A325', ['aria-hidden']);
                        toggleElAttrs('cozySelectCombobox', ['aria-expanded']);
                    "
          tabindex="0"
          value="List Item 1"
        >
          
                    
          <span
            class="fd-select__text-content"
            is="cozySelectValue"
          >
            List Item 1
          </span>
          
                    
          <span
            class="fd-button fd-button--transparent fd-select__button"
          >
            
                        
            <i
              class="sap-icon--slim-arrow-down"
            />
             
                    
          </span>
          
                
        </button>
        
            
      </div>
      
        
    </div>
    
        
    <div
      aria-hidden="false"
      class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
      id="h0C6A325"
    >
      
            
      <ul
        aria-activedescendant="cozySelectCombobox-currentlyFocusedItem"
        aria-labelledby="cozySelectLabel"
        class="fd-list fd-list--dropdown"
        role="listbox"
      >
        
                
        <li
          class="fd-list__item"
          id="cozySelectCombobox-currentlyFocusedItem"
          role="option"
          tabindex="0"
        >
          
                
          <span
            class="fd-list__title"
          >
            Select
          </span>
          
                
        </li>
        
                
        <li
          aria-selected="true"
          class="fd-list__item is-selected"
          role="option"
          tabindex="0"
        >
          
                
          <span
            class="fd-list__title"
          >
            List item 1
          </span>
          
                
        </li>
        
                
        <li
          class="fd-list__item"
          role="option"
          tabindex="0"
        >
          
                
          <span
            class="fd-list__title"
          >
            List item 2
          </span>
          
            
        </li>
        
                
        <li
          class="fd-list__item"
          role="option"
          tabindex="0"
        >
          
                
          <span
            class="fd-list__title"
          >
            List item 3
          </span>
          
                
        </li>
        
                
        <li
          class="fd-list__item"
          role="option"
          tabindex="0"
        >
          
                
          <span
            class="fd-list__title"
          >
            List item 4
          </span>
          
                
        </li>
        
            
      </ul>
      
        
    </div>
    
    
  </div>
  

</div>
`;

exports[`Storyshots Components/Select Disabled 1`] = `
<section>
  <label
    class="fd-form-label"
    id="disabledLabel"
  >
    Choose an option
  </label>
  <br />
  

  <div
    class="fd-popover"
  >
    
    
    <div
      aria-disabled="true"
      class="fd-popover__control"
    >
      
        
      <div
        class="fd-select"
      >
        
            
        <button
          aria-disabled="true"
          aria-labelledby="disabledLabel disabledValue"
          class="fd-select__control"
        >
          
                
          <span
            class="fd-select__text-content"
            id="disabledValue"
          >
            Mango
          </span>
          
                
          <span
            class="fd-button fd-button--transparent fd-select__button"
          >
            
                    
            <i
              class="sap-icon--slim-arrow-down"
            />
            
                
          </span>
          
            
        </button>
        
        
      </div>
      
    
    </div>
    

  </div>
  

</section>
`;

exports[`Storyshots Components/Select Form item 1`] = `
<div
  style="height:310px"
>
  
    
  <div
    class="fd-form-item"
  >
    
    
    <label
      class="fd-form-label"
      id="formSelectLabel"
    >
      Choose an option
    </label>
    <br />
    
        
    <div
      class="fd-popover"
    >
      
            
      <div
        class="fd-popover__control"
      >
        
                
        <div
          class="fd-select"
        >
          
                    
          <button
            aria-expanded="true"
            aria-haspopup="listbox"
            aria-labelledby="formSelectLabel formSelectValue"
            class="fd-select__control"
            id="asFormItemSelectCombobox"
            onclick="
                            toggleElAttrs('h0C6B625', ['aria-hidden']);
                            toggleElAttrs('asFormItemSelectCombobox', ['aria-expanded']);
                        "
            tabindex="0"
          >
            
                        
            <span
              class="fd-select__text-content"
              is="formSelectValue"
            >
              Select
            </span>
            
                        
            <span
              class="fd-button fd-button--transparent fd-select__button"
            >
              
                            
              <i
                class="sap-icon--slim-arrow-down"
              />
               
                        
            </span>
            
                    
          </button>
          
                
        </div>
        
            
      </div>
      
            
      <div
        aria-hidden="false"
        class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
        id="h0C6B625"
      >
        
                
        <ul
          aria-activedescendant="asFormItemSelectCombobox-currentlyFocusedItem"
          aria-labelledby="formSelectLabel"
          class="fd-list fd-list--dropdown"
          role="listbox"
        >
          
                    
          <li
            aria-selected="true"
            class="fd-list__item is-selected"
            id="asFormItemSelectCombobox-currentlyFocusedItem"
            role="option"
            tabindex="0"
          >
            
                    
            <span
              class="fd-list__title"
            >
              
                        List item 1 List item 1 List item 1 List item 1 List item 1 List item 1
                        List item 1 List item 1 List item 1 List item 1 List item 1 List item 1
                        List item 1 List item 1 List item 1 List item 1
                    
            </span>
            
                    
          </li>
          
                    
          <li
            class="fd-list__item"
            role="option"
            tabindex="-1"
          >
            
                    
            <span
              class="fd-list__title"
            >
              List item 2
            </span>
            
                
          </li>
          
                    
          <li
            class="fd-list__item"
            role="option"
            tabindex="-1"
          >
            
                    
            <span
              class="fd-list__title"
            >
              List item 3
            </span>
            
                    
          </li>
          
                    
          <li
            class="fd-list__item"
            role="option"
            tabindex="-1"
          >
            
                    
            <span
              class="fd-list__title"
            >
              List item 4
            </span>
            
                    
          </li>
          
                
        </ul>
        
            
      </div>
      
        
    </div>
    
    
  </div>
  

</div>
`;

exports[`Storyshots Components/Select Grouping 1`] = `
<div
  style="height: 450px"
>
  

  <label
    class="fd-form-label"
    id="itemGroupingLabel"
  >
    Choose an option
  </label>
  <br />
  
    
  <div
    class="fd-popover"
  >
    
    
    <div
      class="fd-popover__control"
    >
      
        
      <div
        class="fd-select"
      >
        
            
        <button
          aria-expanded="true"
          aria-haspopup="listbox"
          aria-labelledby="itemGroupingLabel itemGroupingValue"
          class="fd-select__control"
          id="itemGroupingSelectCombobox"
          onclick="
                    toggleElAttrs('f34HLM5G', ['aria-hidden']);
                    toggleElAttrs('itemGroupingSelectCombobox', ['aria-expanded']);
                "
          tabindex="0"
        >
          
                
          <span
            class="fd-select__text-content"
            id="itemGroupingValue"
          >
            Select Ingredient
          </span>
          
                
          <span
            class="fd-button fd-button--transparent fd-select__button"
          >
            
                    
            <i
              class="sap-icon--slim-arrow-down"
            />
            
                
          </span>
          
            
        </button>
        
        
      </div>
      
    
    </div>
    
    
    <div
      aria-hidden="false"
      class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown fd-popover__body--dropdown-fill"
      id="f34HLM5G"
    >
      
            
      <label
        class="fd-list__group-header"
        id="fruitsHeader"
      >
        
                
        <span
          class="fd-list__title"
        >
          Fruits
        </span>
        
            
      </label>
      
            
      <ul
        aria-activedescendant="itemGroupingSelectCombobox-currentlyFocusedItem"
        aria-labelledby="itemGroupingLabel fruitsHeader"
        class="fd-list fd-list--dropdown"
        role="listbox"
      >
        
                
        <li
          aria-selected="true"
          class="fd-list__item is-selected"
          id="itemGroupingSelectCombobox-currentlyFocusedItem"
          role="option"
          tabindex="0"
        >
          
                    
          <span
            class="fd-list__title"
          >
            Apple
          </span>
          
                
        </li>
        
                
        <li
          class="fd-list__item"
          role="option"
          tabindex="-1"
        >
          
                    
          <span
            class="fd-list__title"
          >
            Orange
          </span>
          
                
        </li>
        
                
        <li
          class="fd-list__item"
          role="option"
          tabindex="-1"
        >
          
                    
          <span
            class="fd-list__title"
          >
            Banana
          </span>
          
                
        </li>
        
                
        <li
          class="fd-list__item"
          role="option"
          tabindex="-1"
        >
          
                    
          <span
            class="fd-list__title"
          >
            Kiwi
          </span>
          
                
        </li>
        
            
      </ul>
      
            
      <label
        class="fd-list__group-header"
        id="vegHeader"
      >
        
                
        <span
          class="fd-list__title"
        >
          Vegetables
        </span>
        
            
      </label>
      
            
      <ul
        aria-labelledby="itemGroupingLabel vegHeader"
        class="fd-list fd-list--dropdown"
        role="listbox"
      >
        
                
        <li
          class="fd-list__item"
          role="option"
          tabindex="-1"
        >
          
                    
          <span
            class="fd-list__title"
          >
            Tomato
          </span>
          
                
        </li>
        
                
        <li
          class="fd-list__item"
          role="option"
          tabindex="-1"
        >
          
                    
          <span
            class="fd-list__title"
          >
            Onion
          </span>
          
                
        </li>
        
                
        <li
          class="fd-list__item"
          role="option"
          tabindex="-1"
        >
          
                    
          <span
            class="fd-list__title"
          >
            Spinach
          </span>
          
                
        </li>
        
                
        <li
          class="fd-list__item"
          role="option"
          tabindex="-1"
        >
          
                    
          <span
            class="fd-list__title"
          >
            Potato
          </span>
          
                
        </li>
        
            
      </ul>
      
    
    </div>
    
    
  </div>
  

</div>
`;

exports[`Storyshots Components/Select Large Select 1`] = `
<div
  style="height: 250px"
>
  
    
  <label
    class="fd-form-label"
    id="largeSelectPopoverSizeLabel"
  >
    Choose an option
  </label>
  <br />
  
    
  <div
    class="fd-popover"
  >
    
    
    <div
      class="fd-popover__control"
    >
      
        
      <div
        class="fd-select"
      >
        
            
        <button
          aria-expanded="true"
          aria-haspopup="listbox"
          aria-labelledby="largeSelectPopoverSizeLabel"
          class="fd-select__control"
          id="largeSelectPopoverBodySizeLabelCombobx"
          onclick="
                    toggleElAttrs('h0GTKE325', ['aria-hidden']);
                    toggleElAttrs('matchSelectPopoverBodySizeSelectCombobox', ['aria-expanded']);
                "
          tabindex="0"
        >
          
                
          <span
            class="fd-select__text-content"
            id="largeSelectPopoverSizeValue"
          >
            Larger Option Than Usual
          </span>
          
                
          <span
            class="fd-button fd-button--transparent fd-select__button"
          >
            
                    
            <i
              class="sap-icon--slim-arrow-down"
            />
            
                
          </span>
          
            
        </button>
        
        
      </div>
      
    
    </div>
    
    
    <div
      aria-hidden="false"
      class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
      id="h0GGFE325"
    >
      
        
      <ul
        aria-activedescendant="largeSelectPopoverBodySizeSelectCombobox-currentlyFocusedItem"
        aria-labelledby="largeSelectPopoverSizeLabel"
        class="fd-list fd-list--dropdown fd-list--large-dropdown"
        role="listbox"
      >
        
            
        <li
          aria-selected="true"
          class="fd-list__item is-selected"
          id="largeSelectPopoverBodySizeSelectCombobox-currentlyFocusedItem"
          role="option"
          tabindex="0"
        >
          
                
          <span
            class="fd-list__title"
          >
            
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                
          </span>
          
            
        </li>
        
            
        <li
          class="fd-list__item"
          role="option"
          tabindex="-1"
        >
          
                
          <span
            class="fd-list__title"
          >
            List item 2
          </span>
          
            
        </li>
        
            
        <li
          class="fd-list__item"
          role="option"
          tabindex="-1"
        >
          
                
          <span
            class="fd-list__title"
          >
            List item 3
          </span>
          
            
        </li>
        
            
        <li
          class="fd-list__item"
          role="option"
          tabindex="-1"
        >
          
                
          <span
            class="fd-list__title"
          >
            List item 4
          </span>
          
            
        </li>
        
        
      </ul>
      
    
    </div>
    
    
  </div>
  

</div>
`;

exports[`Storyshots Components/Select Mobile 1`] = `
<div
  class="fd-dialog fd-dialog-docs-static fd-select-docs-max-height fd-dialog--active"
  id="select-dialog-example"
>
  
    
  <div
    class="fd-dialog__content"
  >
    
        
    <header
      class="fd-dialog__header fd-bar fd-bar--header-with-subheader"
    >
      
            
      <div
        class="fd-bar__left"
      >
        
                
        <div
          class="fd-bar__element"
        >
          
                    
          <h3
            class="fd-dialog__title"
            id="mobileHeader"
          >
            
                        
            <span
              class="fd-select__text-content"
            >
              Select Ingredient
            </span>
            
                    
          </h3>
          
                
        </div>
        
            
      </div>
      
            
      <div
        class="fd-bar__right"
      >
        
                
        <div
          class="fd-bar__element"
        >
          
                    
          <button
            aria-label="close"
            class="fd-button fd-button--transparent"
            tabindex="-1"
          >
            
                        
            <i
              class="sap-icon--decline"
            />
            
                    
          </button>
          
                
        </div>
        
            
      </div>
      
        
    </header>
    
        
    <div
      class="fd-dialog__body fd-dialog__body--no-vertical-padding"
    >
      
            
      <div
        aria-live="assertive"
        class="fd-list__message fd-list__message--information"
        role="alert"
      >
        Choose one item
      </div>
      
            
      <ul
        aria-labelledby="mobileHeader"
        class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact fd-list--mobile"
        role="listbox"
      >
        
                
        <li
          aria-selected="true"
          class="fd-list__item is-selected"
          role="option"
          tabindex="0"
        >
          
                   
          <span
            class="fd-list__title"
          >
            Apple
          </span>
          
               
        </li>
        
               
        <li
          class="fd-list__item"
          role="option"
          tabindex="0"
        >
          
                   
          <span
            class="fd-list__title"
          >
            Orange
          </span>
          
               
        </li>
        
               
        <li
          class="fd-list__item"
          role="option"
          tabindex="0"
        >
          
                   
          <span
            class="fd-list__title"
          >
            Banana
          </span>
          
               
        </li>
        
                
        <li
          class="fd-list__item"
          role="option"
          tabindex="0"
        >
          
                   
          <span
            class="fd-list__title"
          >
            Kiwi
          </span>
          
                
        </li>
        
                
        <li
          class="fd-list__item"
          role="option"
          tabindex="0"
        >
          
                    
          <span
            class="fd-list__title"
          >
            Tomato
          </span>
          
                
        </li>
        
                
        <li
          class="fd-list__item"
          role="option"
          tabindex="0"
        >
          
                    
          <span
            class="fd-list__title"
          >
            Onion
          </span>
          
                
        </li>
        
                
        <li
          class="fd-list__item"
          role="option"
          tabindex="0"
        >
          
                    
          <span
            class="fd-list__title"
          >
            Spinach
          </span>
          
                
        </li>
        
                
        <li
          class="fd-list__item"
          role="option"
          tabindex="0"
        >
          
                    
          <span
            class="fd-list__title"
          >
            Potato
          </span>
          
                
        </li>
        
            
      </ul>
      
        
    </div>
    
    
  </div>
  

</div>
`;

exports[`Storyshots Components/Select No wrapping 1`] = `
<div
  style="height: 200px"
>
  
    
  <label
    class="fd-form-label"
    id="noWrappingLabel"
  >
    Choose an option
  </label>
  <br />
  
    
  <div
    class="fd-popover"
  >
    
    
    <div
      class="fd-popover__control"
    >
      
        
      <div
        class="fd-select fd-select--compact"
      >
        
            
        <button
          aria-expanded="true"
          aria-haspopup="listbox"
          aria-labelledby="noWrappingLabel noWrappingValue"
          class="fd-select__control"
          id="noWrappingSelectCombobox"
          onclick="
                    toggleElAttrs('h0GZH2325', ['aria-hidden']);
                    toggleElAttrs('noWrappingSelectCombobox', ['aria-expanded']);
                "
          tabindex="0"
        >
          
                
          <span
            class="fd-select__text-content"
            id="noWrappingValue"
          >
            Select
          </span>
          
                
          <span
            class="fd-button fd-button--transparent fd-select__button"
          >
            
                    
            <i
              class="sap-icon--slim-arrow-down"
            />
            
                
          </span>
          
            
        </button>
        
        
      </div>
      
    
    </div>
    
    
    <div
      aria-hidden="false"
      class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
      id="h0GZH2325"
    >
      
        
      <ul
        aria-activedescendant="noWrappingSelectCombobox-currentlyFocusedItem"
        aria-labelledby="noWrappingLabel"
        class="fd-list fd-list--dropdown fd-list--compact"
        role="listbox"
      >
        
            
        <li
          aria-selected="true"
          class="fd-list__item is-selected"
          id="noWrappingSelectCombobox-currentlyFocusedItem"
          role="option"
          tabindex="0"
        >
          
                
          <span
            class="fd-list__title fd-list__title--no-wrap"
          >
            
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                
          </span>
          
                
          <span
            class="fd-list__secondary"
          >
            A1
          </span>
          
            
        </li>
        
            
        <li
          class="fd-list__item"
          role="option"
          tabindex="-1"
        >
          
                
          <span
            class="fd-list__title"
          >
            List item 2
          </span>
          
                
          <span
            class="fd-list__secondary"
          >
            A2
          </span>
          
            
        </li>
        
            
        <li
          class="fd-list__item"
          role="option"
          tabindex="-1"
        >
          
                
          <span
            class="fd-list__title"
          >
            List item 3
          </span>
          
                
          <span
            class="fd-list__secondary"
          >
            A3
          </span>
          
            
        </li>
        
            
        <li
          class="fd-list__item"
          role="option"
          tabindex="-1"
        >
          
                
          <span
            class="fd-list__title"
          >
            List item 4
          </span>
          
                
          <span
            class="fd-list__secondary"
          >
            A4
          </span>
          
            
        </li>
        
        
      </ul>
      
    
    </div>
    
    
  </div>
  

</div>
`;

exports[`Storyshots Components/Select Popover style 1`] = `
<div
  style="height: 250px"
>
  
    
  <label
    class="fd-form-label"
    id="matchSelectPopoverBodySizeLabel"
  >
    Choose an option
  </label>
  <br />
  
    
  <div
    class="fd-popover"
  >
    
    
    <div
      class="fd-popover__control"
    >
      
        
      <div
        class="fd-select"
      >
        
            
        <button
          aria-expanded="true"
          aria-haspopup="listbox"
          aria-labelledby="matchSelectPopoverBodySizeLabel matchSelectPopoverBodySizeValue"
          class="fd-select__control"
          id="matchSelectPopoverBodySizeSelectCombobox"
          onclick="
                    toggleElAttrs('h0GTKE325', ['aria-hidden']);
                    toggleElAttrs('matchSelectPopoverBodySizeSelectCombobox', ['aria-expanded']);
                "
          tabindex="0"
        >
          
                
          <span
            class="fd-select__text-content"
            id="matchSelectPopoverBodySizeValue"
          >
            Much Longer than Usual
          </span>
          
                
          <span
            class="fd-button fd-button--transparent fd-select__button"
          >
            
                    
            <i
              class="sap-icon--slim-arrow-down"
            />
            
                
          </span>
          
            
        </button>
        
        
      </div>
      
    
    </div>
    
    
    <div
      aria-hidden="false"
      class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown fd-popover__body--dropdown-fill"
      id="h0GTKE325"
    >
      
        
      <ul
        aria-activedescendant="matchSelectPopoverBodySizeSelectCombobox-currentlyFocusedItem"
        aria-labelledby="matchSelectPopoverBodySizeLabel"
        class="fd-list fd-list--dropdown"
        role="listbox"
      >
        
            
        <li
          aria-selected="true"
          class="fd-list__item is-selected"
          id="matchSelectPopoverBodySizeSelectCombobox-currentlyFocusedItem"
          role="option"
          tabindex="0"
        >
          
                
          <span
            class="fd-list__title"
          >
            List item 1
          </span>
          
                
          <span
            class="fd-list__secondary"
          >
            A1
          </span>
          
            
        </li>
        
            
        <li
          class="fd-list__item"
          role="option"
          tabindex="-1"
        >
          
                
          <span
            class="fd-list__title"
          >
            List item 2
          </span>
          
                
          <span
            class="fd-list__secondary"
          >
            A2
          </span>
          
            
        </li>
        
            
        <li
          class="fd-list__item"
          role="option"
          tabindex="-1"
        >
          
                
          <span
            class="fd-list__title"
          >
            List item 3
          </span>
          
                
          <span
            class="fd-list__secondary"
          >
            A3
          </span>
          
            
        </li>
        
            
        <li
          class="fd-list__item"
          role="option"
          tabindex="-1"
        >
          
                
          <span
            class="fd-list__title"
          >
            List item 4
          </span>
          
                
          <span
            class="fd-list__secondary"
          >
            A4
          </span>
          
            
        </li>
        
        
      </ul>
      
    
    </div>
    
    
  </div>
  

</div>
`;

exports[`Storyshots Components/Select Read-only 1`] = `
<section>
  <label
    class="fd-form-label"
    id="readonlyLabel"
  >
    Chosen option
  </label>
  <br />
  

  <div
    class="fd-popover"
  >
    
    
    <div
      class="fd-popover__control"
    >
      
        
      <div
        class="fd-select"
      >
        
            
        <span
          aria-expanded="false"
          aria-haspopup="false"
          aria-labelledby="readonlyLabel readonlyValue"
          class="fd-select__control is-readonly"
          readonly=""
          tabindex="0"
        >
          
              
          <span
            class="fd-select__text-content"
            id="readonlyValue"
          >
            Selected Item 2
          </span>
          
            
        </span>
        
        
      </div>
      
    
    </div>
    

  </div>
  

</section>
`;

exports[`Storyshots Components/Select States 1`] = `
<div
  style="height: 200px"
>
  

  <div
    class="fd-container"
  >
    
    
    <div
      class="fd-row"
    >
      
        
      <div
        class="fd-col fd-col--3"
      >
        
            
        <label
          class="fd-form-label"
          id="a4546C40"
        >
          
                Choose an option
            
        </label>
        <br />
        
            
        <div
          class="fd-popover"
        >
          
                
          <div
            class="fd-popover__control"
          >
            
                    
            <div
              class="fd-select"
            >
              
                        
              <button
                aria-expanded="true"
                aria-haspopup="listbox"
                aria-labelledby="a4546C40 a4546C40Value"
                class="fd-select__control is-success"
                id="semanticStatesSuccessSelectCombobox"
                onclick="
                                toggleElAttrs('h07jjhYH', ['aria-hidden']);
                                toggleElAttrs('semanticStatesSuccessSelectCombobox', ['aria-expanded']);
                                toggleElAttrs('successFormMessage', ['aria-hidden']);
                            "
                tabindex="0"
              >
                
                            
                <span
                  class="fd-select__text-content"
                  id="a4546C40Value"
                >
                  Success
                </span>
                
                            
                <span
                  class="fd-button fd-button--transparent fd-select__button"
                >
                  
                                
                  <i
                    class="sap-icon--slim-arrow-down"
                  />
                  
                            
                </span>
                
                        
              </button>
              
                    
            </div>
            
                
          </div>
          
                
          <div
            aria-hidden="false"
            class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
            id="h07jjhYH"
          >
            
                    
            <div
              aria-live="assertive"
              class="fd-list__message fd-list__message--success"
              role="alert"
            >
              Success message
            </div>
            
                    
            <ul
              aria-activedescendant="semanticStatesSuccessSelectCombobox-currentlyFocusedItem"
              aria-labelledby="a4546C40"
              class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact"
              role="listbox"
            >
              
                        
              <li
                aria-selected="true"
                class="fd-list__item is-selected"
                id="semanticStatesSuccessSelectCombobox-currentlyFocusedItem"
                role="option"
                tabindex="0"
              >
                
                            
                <span
                  class="fd-list__title"
                >
                  
                                List Item 1
                            
                </span>
                
                            
                <span
                  class="fd-list__secondary"
                >
                  A1
                </span>
                
                        
              </li>
              
                        
              <li
                class="fd-list__item"
                role="option"
                tabindex="-1"
              >
                
                            
                <span
                  class="fd-list__title"
                >
                  List item 2
                </span>
                
                            
                <span
                  class="fd-list__secondary"
                >
                  A2
                </span>
                
                        
              </li>
              
                        
              <li
                class="fd-list__item"
                role="option"
                tabindex="-1"
              >
                
                            
                <span
                  class="fd-list__title"
                >
                  List item 3
                </span>
                
                            
                <span
                  class="fd-list__secondary"
                >
                  A3
                </span>
                
                        
              </li>
              
                        
              <li
                class="fd-list__item"
                role="option"
                tabindex="-1"
              >
                
                            
                <span
                  class="fd-list__title"
                >
                  List item 4
                </span>
                
                            
                <span
                  class="fd-list__secondary"
                >
                  A4
                </span>
                
                        
              </li>
              
                    
            </ul>
            
                
          </div>
          
                
          <div
            aria-hidden="true"
            class="fd-popover__body fd-popover__body--no-arrow"
            id="successFormMessage"
          >
            
                    
            <span
              class="fd-form-message fd-form-message--static fd-form-message--success"
            >
              Success message
            </span>
            
                
          </div>
          
            
        </div>
        
        
      </div>
      
        
      <div
        class="fd-col fd-col--3"
      >
        
            
        <label
          class="fd-form-label"
          id="b4546C40"
        >
          
                Choose an option
            
        </label>
        
            
        <br />
        
            
        <div
          class="fd-popover"
        >
          
                
          <div
            class="fd-popover__control"
          >
            
                    
            <div
              class="fd-select"
            >
              
                        
              <button
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="b4546C40 b4546C40Value"
                class="fd-select__control is-error"
                id="semanticStatesErrorSelectCombobox"
                onclick="
                                toggleElAttrs('semanticStatesErrorSelectCombobox', ['aria-expanded']);
                                toggleElAttrs('h07j9978H', ['aria-hidden']);
                                toggleElAttrs('errorFormMessage', ['aria-hidden']);
                            "
                tabindex="0"
              >
                
                            
                <span
                  class="fd-select__text-content"
                  id="b4546C40Value"
                >
                  Error
                </span>
                
                            
                <span
                  class="fd-button fd-button--transparent fd-select__button"
                >
                  
                                
                  <i
                    class="sap-icon--slim-arrow-down"
                  />
                  
                            
                </span>
                
                        
              </button>
              
                    
            </div>
            
                
          </div>
          
                
          <div
            aria-hidden="true"
            class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
            id="h07j9978H"
          >
            
                    
            <div
              aria-live="assertive"
              class="fd-list__message fd-list__message--error"
              role="alert"
            >
              Error message
            </div>
            
                    
            <ul
              aria-activedescendant="semanticStatesErrorSelectCombobox-currentlyFocusedItem"
              aria-labelledby="b4546C40"
              class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact"
              role="listbox"
              tabindex="-1"
            >
              
                        
              <li
                class="fd-list__item"
                id="semanticStatesErrorSelectCombobox-currentlyFocusedItem"
                role="option"
                tabindex="-1"
              >
                
                            
                <span
                  class="fd-list__title"
                >
                  
                                List Item 1
                            
                </span>
                
                            
                <span
                  class="fd-list__secondary"
                >
                  A1
                </span>
                
                        
              </li>
              
                        
              <li
                class="fd-list__item"
                role="option"
                tabindex="-1"
              >
                
                            
                <span
                  class="fd-list__title"
                >
                  List item 2
                </span>
                
                            
                <span
                  class="fd-list__secondary"
                >
                  A2
                </span>
                
                        
              </li>
              
                        
              <li
                class="fd-list__item"
                role="option"
                tabindex="-1"
              >
                
                            
                <span
                  class="fd-list__title"
                >
                  List item 3
                </span>
                
                            
                <span
                  class="fd-list__secondary"
                >
                  A3
                </span>
                
                        
              </li>
              
                        
              <li
                class="fd-list__item"
                role="option"
                tabindex="-1"
              >
                
                            
                <span
                  class="fd-list__title"
                >
                  List item 4
                </span>
                
                            
                <span
                  class="fd-list__secondary"
                >
                  A4
                </span>
                
                        
              </li>
              
                    
            </ul>
            
                
          </div>
          
                
          <div
            aria-hidden="false"
            class="fd-popover__body fd-popover__body--no-arrow"
            id="errorFormMessage"
          >
            
                    
            <span
              class="fd-form-message fd-form-message--static fd-form-message--error"
            >
              Error message
            </span>
            
                
          </div>
          
            
        </div>
        
        
      </div>
      
        
      <div
        class="fd-col fd-col--3"
      >
        
            
        <label
          class="fd-form-label"
          id="b45336C4"
        >
          
                Choose an option
            
        </label>
        
            
        <br />
        
            
        <div
          class="fd-popover"
        >
          
                
          <div
            class="fd-popover__control"
          >
            
                    
            <div
              class="fd-select"
            >
              
                        
              <button
                aria-expanded="true"
                aria-haspopup="listbox"
                aria-labelledby="b45336C4 b45336C4Value"
                class="fd-select__control is-warning"
                id="semanticStatesWarningSelectCombobox"
                onclick="
                                toggleElAttrs('semanticStatesWarningSelectCombobox', ['aria-expanded']);
                                toggleElAttrs('h07j998hhH', ['aria-hidden']);
                                toggleElAttrs('warningFormMessage', ['aria-hidden']);
                            "
                tabindex="0"
              >
                
                            
                <span
                  class="fd-select__text-content"
                  is="b45336C4Value"
                >
                  Warning
                </span>
                
                            
                <span
                  class="fd-button fd-button--transparent fd-select__button"
                >
                  
                                
                  <i
                    class="sap-icon--slim-arrow-down"
                  />
                  
                            
                </span>
                
                        
              </button>
              
                    
            </div>
            
                
          </div>
          
                
          <div
            aria-hidden="false"
            class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
            id="h07j998hhH"
          >
            
                    
            <div
              aria-live="assertive"
              class="fd-list__message fd-list__message--warning"
              role="alert"
            >
              Warning message
            </div>
            
                    
            <ul
              aria-activedescendant="semanticStatesWarningSelectCombobox-currentlyFocusedItem"
              aria-labelledby="b45336C4"
              class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact"
              role="listbox"
            >
              
                        
              <li
                aria-selected="true"
                class="fd-list__item is-selected"
                id="semanticStatesWarningSelectCombobox-currentlyFocusedItem"
                role="option"
                tabindex="0"
              >
                
                            
                <span
                  class="fd-list__title"
                >
                  
                                List Item 1
                            
                </span>
                
                            
                <span
                  class="fd-list__secondary"
                >
                  A1
                </span>
                
                        
              </li>
              
                        
              <li
                class="fd-list__item"
                role="option"
                tabindex="-1"
              >
                
                            
                <span
                  class="fd-list__title"
                >
                  List item 2
                </span>
                
                            
                <span
                  class="fd-list__secondary"
                >
                  A2
                </span>
                
                        
              </li>
              
                        
              <li
                class="fd-list__item"
                role="option"
                tabindex="-1"
              >
                
                            
                <span
                  class="fd-list__title"
                >
                  List item 3
                </span>
                
                            
                <span
                  class="fd-list__secondary"
                >
                  A3
                </span>
                
                        
              </li>
              
                        
              <li
                class="fd-list__item"
                role="option"
                tabindex="-1"
              >
                
                            
                <span
                  class="fd-list__title"
                >
                  List item 4
                </span>
                
                            
                <span
                  class="fd-list__secondary"
                >
                  A4
                </span>
                
                        
              </li>
              
                    
            </ul>
            
                
          </div>
          
                
          <div
            aria-hidden="true"
            class="fd-popover__body fd-popover__body--no-arrow"
            id="warningFormMessage"
          >
            
                    
            <span
              class="fd-form-message fd-form-message--static fd-form-message--warning"
            >
              Warning message
            </span>
            
                
          </div>
          
            
        </div>
        
        
      </div>
      
        
      <div
        class="fd-col fd-col--3"
      >
        
            
        <label
          class="fd-form-label"
          id="h45336C4"
        >
          
                Choose an option
            
        </label>
        
            
        <br />
        
            
        <div
          class="fd-popover"
        >
          
                
          <div
            class="fd-popover__control"
          >
            
                    
            <div
              class="fd-select"
            >
              
                        
              <button
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="h45336C4 h45336C4Value"
                class="fd-select__control is-information"
                id="semanticStatesInformationSelectCombobox"
                onclick="
                                toggleElAttrs('semanticStatesInformationSelectCombobox', ['aria-expanded']);
                                toggleElAttrs('hkhh998hhH', ['aria-hidden']);
                                toggleElAttrs('informationFormMessage', ['aria-hidden']);
                            "
                tabindex="0"
              >
                
                            
                <span
                  class="fd-select__text-content"
                  id="h45336C4Value"
                >
                  Information
                </span>
                
                                
                <span
                  class="fd-button fd-button--transparent fd-select__button"
                >
                  
                                    
                  <i
                    class="sap-icon--slim-arrow-down"
                  />
                  
                                
                </span>
                
                        
              </button>
              
                    
            </div>
            
                
          </div>
          
                
          <div
            aria-hidden="true"
            class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
            id="hkhh998hhH"
          >
            
                    
            <div
              aria-live="assertive"
              class="fd-list__message fd-list__message--information"
              role="alert"
            >
              Information message
            </div>
            
                    
            <ul
              aria-activedescendant="semanticStatesInformationSelectCombobox-currentlyFocusedItem"
              aria-labelledby="h45336C4"
              class="fd-list fd-list--has-message fd-list--dropdown fd-list--compact"
              role="listbox"
            >
              
                        
              <li
                class="fd-list__item"
                id="semanticStatesInformationSelectCombobox-currentlyFocusedItem"
                role="option"
                tabindex="-1"
              >
                
                            
                <span
                  class="fd-list__title"
                >
                  
                                List Item 1
                            
                </span>
                
                            
                <span
                  class="fd-list__secondary"
                >
                  A1
                </span>
                
                        
              </li>
              
                        
              <li
                class="fd-list__item"
                role="option"
                tabindex="-1"
              >
                
                            
                <span
                  class="fd-list__title"
                >
                  List item 2
                </span>
                
                            
                <span
                  class="fd-list__secondary"
                >
                  A2
                </span>
                
                        
              </li>
              
                        
              <li
                class="fd-list__item"
                role="option"
                tabindex="-1"
              >
                
                            
                <span
                  class="fd-list__title"
                >
                  List item 3
                </span>
                
                            
                <span
                  class="fd-list__secondary"
                >
                  A3
                </span>
                
                        
              </li>
              
                        
              <li
                class="fd-list__item"
                role="option"
                tabindex="-1"
              >
                
                            
                <span
                  class="fd-list__title"
                >
                  List item 4
                </span>
                
                            
                <span
                  class="fd-list__secondary"
                >
                  A4
                </span>
                
                        
              </li>
              
                    
            </ul>
            
                
          </div>
          
                
          <div
            aria-hidden="false"
            class="fd-popover__body fd-popover__body--no-arrow"
            id="informationFormMessage"
          >
            
                    
            <span
              class="fd-form-message fd-form-message--static fd-form-message--information"
            >
              Information message
            </span>
            
                
          </div>
          
            
        </div>
        
        
      </div>
      
    
    </div>
    

  </div>
  

</div>
`;

exports[`Storyshots Components/Select Text wrapping 1`] = `
<div
  style="height: 300px"
>
  
    
  <label
    class="fd-form-label"
    id="textWrappingLabel"
  >
    Choose an option
  </label>
  <br />
  
    
  <div
    class="fd-popover"
  >
    
    
    <div
      class="fd-popover__control"
    >
      
        
      <div
        class="fd-select"
      >
        
            
        <button
          aria-expanded="true"
          aria-haspopup="listbox"
          aria-labelledby="textWrappingLabel textWrappingValue"
          class="fd-select__control"
          id="textWrappingSelectCombobox"
          onclick="
                    toggleElAttrs('h0GFF2325', ['aria-hidden']);
                    toggleElAttrs('textWrappingSelectCombobox', ['aria-expanded']);
                "
          tabindex="0"
        >
          
                
          <span
            class="fd-select__text-content"
            is="textWrappingValue"
          >
            Select
          </span>
          
                
          <span
            class="fd-button fd-button--transparent fd-select__button"
          >
            
                    
            <i
              class="sap-icon--slim-arrow-down"
            />
            
                
          </span>
          
            
        </button>
        
        
      </div>
      
    
    </div>
    
    
    <div
      aria-hidden="false"
      class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown"
      id="h0GFF2325"
    >
      
        
      <ul
        aria-activedescendant="textWrappingSelectCombobox-currentlyFocusedItem"
        aria-labelledby="textWrappingLabel"
        class="fd-list fd-list--dropdown"
        role="listbox"
      >
        
            
        <li
          aria-selected="true"
          class="fd-list__item is-selected"
          id="textWrappingSelectCombobox-currentlyFocusedItem"
          role="option"
          tabindex="0"
        >
          
                
          <span
            class="fd-list__title"
          >
            
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore 
                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
                    aliquip ex ea commodo consequat.
                
          </span>
          
                
          <span
            class="fd-list__secondary"
          >
            A1
          </span>
          
            
        </li>
        
            
        <li
          class="fd-list__item"
          role="option"
          tabindex="-1"
        >
          
                
          <span
            class="fd-list__title"
          >
            List item 2
          </span>
          
                
          <span
            class="fd-list__secondary"
          >
            A2
          </span>
          
            
        </li>
        
            
        <li
          class="fd-list__item"
          role="option"
          tabindex="-1"
        >
          
                
          <span
            class="fd-list__title"
          >
            List item 3
          </span>
          
                
          <span
            class="fd-list__secondary"
          >
            A3
          </span>
          
            
        </li>
        
            
        <li
          class="fd-list__item"
          role="option"
          tabindex="-1"
        >
          
                
          <span
            class="fd-list__title"
          >
            List item 4
          </span>
          
                
          <span
            class="fd-list__secondary"
          >
            A4
          </span>
          
            
        </li>
        
        
      </ul>
      
    
    </div>
    
    
  </div>
  

</div>
`;