shellbar.stories.storyshot

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

exports[`Storyshots Components/Shellbar Extra large 1`] = `
<div
  style="height:300px"
>
  
    
  <div
    class="fd-shellbar fd-shellbar--xl"
  >
    
        
    <div
      class="fd-shellbar__group fd-shellbar__group--product"
    >
      
            
      <span
        class="fd-shellbar__logo"
      >
        <img
          alt="SAP"
          height="24"
          src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png"
          srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x"
          width="48"
        />
      </span>
      
            
      <span
        class="fd-shellbar__title"
      >
        Corporate Portal
      </span>
      
        
    </div>
    
        
    <div
      class="fd-shellbar__group fd-shellbar__group--actions"
    >
      
            
      <div
        class="fd-shellbar__action fd-shellbar__action--desktop"
      >
                
                
        <div
          class="fd-popover__control"
        >
          
                    
          <div
            aria-controls="UIO6J688"
            aria-expanded="false"
            aria-haspopup="true"
            aria-label="Image label"
          >
            
                        
            <div
              class="fd-input-group fd-shellbar__input-group"
            >
              
                            
              <input
                aria-label="search"
                class="fd-input fd-input-group__input fd-shellbar__input-group__input"
                id="UIO6J6881"
                placeholder="Search..."
                type="text"
                value="Search"
              />
              
                            
              <span
                class="fd-input-group__addon fd-shellbar__input-group__addon fd-input-group__addon--button"
              >
                
                                
                <button
                  aria-label="navigation-down-arrow-button"
                  class="fd-shellbar__button fd-button"
                >
                  
                                    
                  <i
                    class="sap-icon--navigation-down-arrow"
                  />
                  
                                
                </button>
                
                            
              </span>
              
                        
            </div>
            
                    
          </div>
          
                
        </div>
        
            
      </div>
      
            
      <div
        class="fd-shellbar__action fd-shellbar__action--desktop"
      >
        
                
        <button
          aria-label="Search"
          class="fd-button fd-shellbar__button"
        >
          
                    
          <i
            class="sap-icon--search"
          />
          
                
        </button>
        
            
      </div>
      
                
      <div
        class="fd-shellbar__action fd-shellbar__action--desktop"
      >
        
                    
        <button
          aria-label="Notifications"
          class="fd-button fd-shellbar__button"
        >
          
                            
          <i
            class="sap-icon--bell"
          />
          
                            
          <span
            aria-label="Unread count"
            class="fd-counter fd-counter--notification fd-shellbar__counter--notification"
          >
            251234
          </span>
          
                    
        </button>
        
                
      </div>
      
                
      <div
        class="fd-shellbar__action fd-shellbar__action--desktop"
      >
        
                    
        <button
          aria-label="Pool"
          class="fd-button fd-shellbar__button"
        >
          
                            
          <i
            class="sap-icon--pool"
          />
          
                    
        </button>
        
                
      </div>
      
                
      <div
        class="fd-shellbar__action fd-shellbar__action--mobile"
      >
        
                    
        <div
          class="fd-shellbar-collapse"
        >
          
                        
          <div
            class="fd-popover fd-popover--right"
          >
            
                            
            <div
              class="fd-popover__control"
            >
              
                                
              <div
                aria-controls="CWaGGD78"
                aria-expanded="false"
                aria-haspopup="true"
                class="fd-shellbar-collapse--control"
                onclick="onPopoverClick('CWaGGD78')"
                role="button"
              >
                
                                    
                <button
                  aria-controls="undefined"
                  aria-expanded="false"
                  aria-haspopup="true"
                  class="fd-button fd-shellbar__button"
                >
                  
                                            
                  <i
                    class="sap-icon--overflow"
                  />
                  
                                            
                  <span
                    aria-label="Unread count"
                    class="fd-counter fd-counter--notification fd-shellbar__counter--notification"
                  >
                    25
                  </span>
                  
                                    
                </button>
                
                                
              </div>
              
                            
            </div>
            
                            
            <div
              aria-hidden="true"
              class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right"
              id="CWaGGD78"
            >
              
                                
              <nav
                class="fd-menu"
              >
                
                                    
                <ul
                  class="fd-menu__list fd-menu__list--no-shadow"
                >
                  
                                        
                  <li
                    class="fd-menu__item"
                  >
                    
                                            
                    <a
                      class="fd-menu__link"
                      role="button"
                    >
                      
                                                
                      <span
                        class="fd-menu__title"
                      >
                        Search
                      </span>
                      
                                            
                    </a>
                    
                                        
                  </li>
                  
                                        
                  <li
                    class="fd-menu__item"
                  >
                    
                                            
                    <a
                      class="fd-menu__link"
                      role="button"
                    >
                      
                                                
                      <span
                        class="fd-menu__title"
                      >
                        Notifications Out
                      </span>
                      
                                            
                    </a>
                    
                                        
                  </li>
                  
                                        
                  <li
                    class="fd-menu__item"
                  >
                    
                                            
                    <a
                      class="fd-menu__link"
                      role="button"
                    >
                      
                                                
                      <span
                        class="fd-menu__title"
                      >
                        Pool
                      </span>
                      
                                            
                    </a>
                    
                                        
                  </li>
                  
                                    
                </ul>
                
                                
              </nav>
              
                            
            </div>
            
                        
          </div>
          
                    
        </div>
        
                
      </div>
      
                
      <div
        class="fd-shellbar__action"
      >
        
                    
        <div
          class="fd-popover fd-popover--right"
        >
          
                        
          <div
            class="fd-popover__control"
          >
            
                            
            <div
              aria-controls="DD35G276"
              aria-expanded="false"
              aria-haspopup="true"
              class="fd-button fd-shellbar__button fd-user-menu__control"
              onclick="onPopoverClick('DD35G276')"
              role="button"
            >
              
                                
              <span
                class="fd-avatar fd-avatar--xs fd-avatar--circle fd-shellbar__avatarier--circle fd-shellbar__avatar--circle"
              >
                WW
              </span>
              
                            
            </div>
            
                        
          </div>
          
                        
          <div
            aria-hidden="true"
            class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right"
            id="DD35G276"
          >
            
                            
            <nav
              class="fd-menu"
            >
              
                                
              <ul
                class="fd-menu__list fd-menu__list--no-shadow"
              >
                
                                    
                <li
                  class="fd-menu__item"
                >
                  
                                        
                  <a
                    class="fd-menu__link"
                    role="button"
                  >
                    
                                            
                    <span
                      class="fd-menu__title"
                    >
                      Settings
                    </span>
                    
                                        
                  </a>
                  
                                    
                </li>
                
                                    
                <li
                  class="fd-menu__item"
                >
                  
                                        
                  <a
                    class="fd-menu__link"
                    role="button"
                  >
                    
                                            
                    <span
                      class="fd-menu__title"
                    >
                      Sign Out
                    </span>
                    
                                        
                  </a>
                  
                                    
                </li>
                
                                
              </ul>
              
                        
            </nav>
            
                        
          </div>
          
                    
        </div>
        
                
      </div>
      
            
    </div>
    
        
  </div>
  
    
</div>
`;

exports[`Storyshots Components/Shellbar Medium-large 1`] = `
<div
  style="height:300px; max-width: 1024px;"
>
  
    
  <div
    class="fd-shellbar fd-shellbar--m"
  >
    
        
    <div
      class="fd-shellbar__group fd-shellbar__group--product"
    >
      
            
      <span
        class="fd-shellbar__logo"
      >
        <img
          alt="SAP"
          height="24"
          src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png"
          srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x"
          width="48"
        />
      </span>
      
            
      <span
        class="fd-shellbar__title"
      >
        Corporate Portal
      </span>
      
        
    </div>
    
        
    <div
      class="fd-shellbar__group fd-shellbar__group--actions"
    >
      
            
      <div
        class="fd-shellbar__action fd-shellbar__action--desktop"
      >
                
                
        <div
          class="fd-popover__control"
        >
          
                    
          <div
            aria-controls="UIBFJ688"
            aria-expanded="false"
            aria-haspopup="true"
            aria-label="Image label"
          >
            
                        
            <div
              class="fd-input-group fd-shellbar__input-group"
            >
              
                            
              <input
                aria-label="search"
                class="fd-input fd-input-group__input fd-shellbar__input-group__input"
                id="UIO6J6881"
                placeholder="Search..."
                type="text"
                value="Search"
              />
              
                            
              <span
                class="fd-input-group__addon fd-shellbar__input-group__addon fd-input-group__addon--button"
              >
                
                                
                <button
                  aria-label="navigation-down-arrow-button"
                  class="fd-shellbar__button fd-button"
                >
                  
                                    
                  <i
                    class="sap-icon--navigation-down-arrow"
                  />
                  
                                
                </button>
                
                            
              </span>
              
                        
            </div>
            
                    
          </div>
          
                
        </div>
        
            
      </div>
      
            
      <div
        class="fd-shellbar__action fd-shellbar__action--desktop"
      >
        
                
        <button
          aria-label="Search"
          class="fd-button fd-shellbar__button"
        >
          
                    
          <i
            class="sap-icon--search"
          />
          
                
        </button>
        
            
      </div>
      
                
      <div
        class="fd-shellbar__action fd-shellbar__action--desktop"
      >
        
                    
        <button
          aria-label="Notifications"
          class="fd-button fd-shellbar__button"
        >
          
                        
          <i
            class="sap-icon--bell"
          />
          
                        
          <span
            aria-label="Unread count"
            class="fd-counter fd-counter--notification fd-shellbar__counter--notification"
          >
            251234
          </span>
          
                    
        </button>
        
                
      </div>
      
                
      <div
        class="fd-shellbar__action fd-shellbar__action--desktop"
      >
        
                    
        <button
          aria-label="Pool"
          class="fd-button fd-shellbar__button"
        >
          
                         
          <i
            class="sap-icon--pool"
          />
          
                    
        </button>
        
                
      </div>
      
                
      <div
        class="fd-shellbar__action fd-shellbar__action--mobile"
      >
        
                    
        <div
          class="fd-shellbar-collapse"
        >
          
                        
          <div
            class="fd-popover fd-popover--right"
          >
            
                            
            <div
              class="fd-popover__control"
            >
              
                                
              <div
                aria-controls="CWaGNGD78"
                aria-expanded="false"
                aria-haspopup="true"
                class="fd-shellbar-collapse--control"
                onclick="onPopoverClick('CWaGNGD78')"
                role="button"
              >
                
                                    
                <button
                  aria-controls="undefined"
                  aria-expanded="false"
                  aria-haspopup="true"
                  class="fd-button fd-shellbar__button"
                >
                  
                                        
                  <i
                    class="sap-icon--overflow"
                  />
                  
                                        
                  <span
                    aria-label="Unread count"
                    class="fd-counter fd-counter--notification fd-shellbar__counter--notification"
                  >
                    25
                  </span>
                  
                                    
                </button>
                
                                
              </div>
              
                            
            </div>
            
                            
            <div
              aria-hidden="true"
              class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right"
              id="CWaGNGD78"
            >
              
                                
              <nav
                class="fd-menu"
              >
                
                                    
                <ul
                  class="fd-menu__list fd-menu__list--no-shadow"
                >
                  
                                        
                  <li
                    class="fd-menu__item"
                  >
                    
                                            
                    <a
                      class="fd-menu__link"
                      role="button"
                    >
                      
                                                
                      <span
                        class="fd-menu__title"
                      >
                        Search
                      </span>
                      
                                            
                    </a>
                    
                                        
                  </li>
                  
                                        
                  <li
                    class="fd-menu__item"
                  >
                    
                                            
                    <a
                      class="fd-menu__link"
                      role="button"
                    >
                      
                                                
                      <span
                        class="fd-menu__title"
                      >
                        Notifications Out
                      </span>
                      
                                            
                    </a>
                    
                                        
                  </li>
                  
                                        
                  <li
                    class="fd-menu__item"
                  >
                    
                                            
                    <a
                      class="fd-menu__link"
                      role="button"
                    >
                      
                                                
                      <span
                        class="fd-menu__title"
                      >
                        Pool
                      </span>
                      
                                            
                    </a>
                    
                                        
                  </li>
                  
                                    
                </ul>
                
                                
              </nav>
              
                            
            </div>
            
                        
          </div>
          
                    
        </div>
        
                
      </div>
      
                
      <div
        class="fd-shellbar__action"
      >
        
                    
        <div
          class="fd-popover fd-popover--right"
        >
          
                        
          <div
            class="fd-popover__control"
          >
            
                            
            <div
              aria-controls="DD35GBK6"
              aria-expanded="false"
              aria-haspopup="true"
              class="fd-button fd-shellbar__button fd-user-menu__control"
              onclick="onPopoverClick('DD35GBK6')"
              role="button"
            >
              
                                
              <span
                class="fd-avatar fd-avatar--xs fd-avatar--circle fd-shellbar__avatarier--circle fd-shellbar__avatar--circle"
              >
                WW
              </span>
              
                            
            </div>
            
                        
          </div>
          
                        
          <div
            aria-hidden="true"
            class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right"
            id="DD35GBK6"
          >
            
                            
            <nav
              class="fd-menu"
            >
              
                                
              <ul
                class="fd-menu__list fd-menu__list--no-shadow"
              >
                
                                    
                <li
                  class="fd-menu__item"
                >
                  
                                        
                  <a
                    class="fd-menu__link"
                    role="button"
                  >
                    
                                            
                    <span
                      class="fd-menu__title"
                    >
                      Settings
                    </span>
                    
                                        
                  </a>
                  
                                    
                </li>
                
                                    
                <li
                  class="fd-menu__item"
                >
                  
                                        
                  <a
                    class="fd-menu__link"
                    role="button"
                  >
                    
                                            
                    <span
                      class="fd-menu__title"
                    >
                      Sign Out
                    </span>
                    
                                        
                  </a>
                  
                                    
                </li>
                
                                
              </ul>
              
                        
            </nav>
            
                        
          </div>
          
                    
        </div>
        
                
      </div>
      
            
    </div>
    
        
  </div>
  
    
</div>
`;

exports[`Storyshots Components/Shellbar Primary 1`] = `
<div
  style="height:150px"
>
  
    
  <div
    class="fd-shellbar"
  >
    
        
    <div
      class="fd-shellbar__group fd-shellbar__group--product"
    >
      
            
      <span
        class="fd-shellbar__logo"
      >
        <img
          alt="SAP"
          height="24"
          src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png"
          srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x"
          width="48"
        />
      </span>
      
        
      <span
        class="fd-shellbar__title"
      >
        Corporate Portal
      </span>
      
        
    </div>
    
        
    <div
      class="fd-shellbar__group fd-shellbar__group--actions"
    >
      
            
      <div
        class="fd-shellbar__action"
      >
        
                
        <div
          class="fd-popover fd-popover--right"
        >
          
                    
          <div
            class="fd-popover__control"
          >
            
                        
            <div
              aria-controls="WV3AY276"
              aria-expanded="false"
              aria-haspopup="true"
              class="fd-button fd-shellbar__button fd-user-menu__control"
              role="button"
            >
              
                            
              <span
                class="fd-avatar fd-avatar--xs fd-avatar--circle fd-shellbar__avatar--circle"
              >
                WW
              </span>
              
                        
            </div>
            
                    
          </div>
          
                    
          <div
            aria-hidden="true"
            class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right"
            id="WV3AY276"
          >
            
                        
            <nav
              class="fd-menu"
            >
              
                            
              <ul
                class="fd-menu__list fd-menu__list--no-shadow"
              >
                
                                
                <li
                  class="fd-menu__item"
                >
                  
                                    
                  <a
                    class="fd-menu__link"
                    role="button"
                  >
                    
                                        
                    <span
                      class="fd-menu__title"
                    >
                      Settings
                    </span>
                    
                                    
                  </a>
                  
                                
                </li>
                
                                
                <li
                  class="fd-menu__item"
                >
                  
                                    
                  <a
                    class="fd-menu__link"
                    role="button"
                  >
                    
                                        
                    <span
                      class="fd-menu__title"
                    >
                      Sign Out
                    </span>
                    
                                    
                  </a>
                  
                                
                </li>
                
                            
              </ul>
              
                        
            </nav>
            
                    
          </div>
          
                
        </div>
        
            
      </div>
      
        
    </div>
    
    
  </div>
  

</div>
`;

exports[`Storyshots Components/Shellbar Product menu and search 1`] = `
<div
  style="height:200px"
>
  
    
  <div
    class="fd-shellbar"
  >
    
        
    <div
      class="fd-shellbar__group fd-shellbar__group--product"
    >
      
            
      <span
        class="fd-shellbar__logo"
      >
        
                
        <img
          alt="SAP"
          height="24"
          src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png"
          srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x"
          width="48"
        />
        
            
      </span>
      
            
      <div
        class="fd-popover"
      >
        
                
        <div
          class="fd-popover__control"
        >
          
                    
          <button
            aria-controls="9GLB26941"
            aria-expanded="false"
            aria-haspopup="true"
            class="fd-button fd-button--transparent fd-button--menu fd-shellbar__button--menu"
            onclick="onPopoverClick('9GLB26941');"
          >
            
                        
            <span
              class="fd-shellbar__title"
            >
              Corporate Portal
            </span>
            
                        
            <i
              class="sap-icon--megamenu fd-shellbar__button--icon"
            />
            
                    
          </button>
          
                
        </div>
        
                
        <div
          aria-hidden="true"
          class="fd-popover__body fd-popover__body--no-arrow"
          id="9GLB26941"
        >
          
                    
          <nav
            class="fd-menu"
          >
            
                        
            <ul
              class="fd-menu__list fd-menu__list--no-shadow"
            >
              
                            
              <li
                class="fd-menu__item"
              >
                
                                
                <a
                  class="fd-menu__link"
                  role="button"
                >
                  
                                    
                  <span
                    class="fd-menu__title"
                  >
                    Application A
                  </span>
                  
                                
                </a>
                
                            
              </li>
              
                            
              <li
                class="fd-menu__item"
              >
                
                                
                <a
                  class="fd-menu__link"
                  role="button"
                >
                  
                                    
                  <span
                    class="fd-menu__title"
                  >
                    Application B
                  </span>
                  
                                
                </a>
                
                            
              </li>
              
                            
              <li
                class="fd-menu__item"
              >
                
                                
                <a
                  class="fd-menu__link"
                  role="button"
                >
                  
                                    
                  <span
                    class="fd-menu__title"
                  >
                    Application C
                  </span>
                  
                                
                </a>
                
                            
              </li>
              
                            
              <li
                class="fd-menu__item"
              >
                
                                
                <a
                  class="fd-menu__link"
                  role="button"
                >
                  
                                    
                  <span
                    class="fd-menu__title"
                  >
                    Application D
                  </span>
                  
                                
                </a>
                
                            
              </li>
              
                        
            </ul>
            
                    
          </nav>
          
                
        </div>
        
            
      </div>
      
        
      <div
        class="fd-shellbar__subtitle"
      >
        Subtitle
      </div>
      
        
    </div>
    
        
    <div
      class="fd-shellbar__group fd-shellbar__group--actions"
    >
      
            
      <div
        class="fd-shellbar__action fd-shellbar__action--desktop"
      >
                
                
        <div
          class="fd-popover__control"
        >
          
                    
          <div
            aria-controls="F4GcX348b"
            aria-expanded="false"
            aria-haspopup="true"
            aria-label="Image label"
            onclick="onPopoverClick('F4GcX348b')"
          >
            
                        
            <div
              class="fd-input-group fd-shellbar__input-group"
            >
              
                            
              <input
                aria-label="search-input"
                class="fd-input fd-input-group__input fd-shellbar__input-group__input"
                id="F4GcX348b1"
                placeholder="Search..."
                type="text"
                value="Search"
              />
              
                            
              <span
                class="fd-input-group__addon fd-shellbar__input-group__addon fd-input-group__addon--button"
              >
                
                                
                <button
                  aria-label="button-decline"
                  class="fd-shellbar__button fd-button"
                >
                  
                                        
                  <i
                    class="sap-icon--decline"
                  />
                  
                                
                </button>
                
                            
              </span>
              
                        
            </div>
            
                    
          </div>
          
                
        </div>
        
            
      </div>
      
            
      <div
        class="fd-shellbar__action fd-shellbar__action--desktop"
      >
        
                
        <button
          aria-label="Search"
          class="fd-button fd-shellbar__button"
        >
          
                        
          <i
            class="sap-icon--search"
          />
          
                
        </button>
        
            
      </div>
      
            
      <div
        class="fd-shellbar__action"
      >
        
                
        <div
          class="fd-popover fd-popover--right"
        >
          
                    
          <div
            class="fd-popover__control"
          >
            
                        
            <div
              aria-controls="ZY3AY276"
              aria-expanded="false"
              aria-haspopup="true"
              class="fd-button fd-shellbar__button fd-user-menu__control"
              onclick="onPopoverClick('ZY3AY276')"
              role="button"
            >
              
                            
              <span
                aria-label="William Wallingham"
                class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail fd-shellbar__avatar--circle"
                style="background-image: url('assets/images/avatars/1.svg');"
              >
                
                            
              </span>
              
                        
            </div>
            
                    
          </div>
          
                    
          <div
            aria-hidden="false"
            class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right"
            id="ZY3AY276"
          >
            
                        
            <nav
              class="fd-menu"
            >
              
                            
              <ul
                class="fd-menu__list fd-menu__list--no-shadow"
              >
                
                                
                <li
                  class="fd-menu__item"
                >
                  
                                    
                  <a
                    class="fd-menu__link"
                    role="button"
                  >
                    
                                        
                    <span
                      class="fd-menu__title"
                    >
                      Settings
                    </span>
                    
                                    
                  </a>
                  
                                
                </li>
                
                                
                <li
                  class="fd-menu__item"
                >
                  
                                    
                  <a
                    class="fd-menu__link"
                    role="button"
                  >
                    
                                        
                    <span
                      class="fd-menu__title"
                    >
                      Sign Out
                    </span>
                    
                                    
                  </a>
                  
                                
                </li>
                
                            
              </ul>
              
                        
            </nav>
            
                    
          </div>
          
                
        </div>
        
            
      </div>
      
        
    </div>
    
    
  </div>
  

</div>
`;

exports[`Storyshots Components/Shellbar Product switch 1`] = `
<div
  style="height:600px"
>
  
    
  <div
    class="fd-shellbar"
  >
    
        
    <div
      class="fd-shellbar__group fd-shellbar__group--product"
    >
      
        
      <span
        class="fd-shellbar__logo"
      >
        
            
        <svg
          height="143"
          style="height: 32px; width: 64px"
          viewBox="0 0 286 143"
          width="286"
          xmlns="http://www.w3.org/2000/svg"
        >
          <defs>
            <lineargradient
              id="a"
              x1="-91.234%"
              x2="98.574%"
              y1="50%"
              y2="50%"
            >
              <stop
                offset="0%"
                stop-color="#32B79D"
                stop-opacity=".59"
              />
              <stop
                offset="35.525%"
                stop-color="#33EAFF"
                stop-opacity=".59"
              />
              <stop
                offset="73.603%"
                stop-color="#7FCAFF"
                stop-opacity=".59"
              />
              <stop
                offset="100%"
                stop-color="#84A2FF"
                stop-opacity=".59"
              />
            </lineargradient>
          </defs>
          <g
            fill="url(#a)"
            fill-rule="evenodd"
            transform="translate(-19)"
          >
            <path
              d="M114.232.963h190.464c0 16.966-13.754 30.72-30.72 30.72H83.512c0-16.966 13.754-30.72 30.72-30.72zM80.44 56.259h116.736c0 16.966-13.754 30.72-30.72 30.72H49.72c0-16.966 13.754-30.72 30.72-30.72zM49.72 111.555h18.432c0 16.966-13.754 30.72-30.72 30.72H19c0-16.966 13.754-30.72 30.72-30.72z"
            />
          </g>
        </svg>
        
        
      </span>
      
            
      <span
        class="fd-shellbar__title"
      >
        Corporate Portal
      </span>
      
        
    </div>
    
        
    <div
      class="fd-shellbar__group fd-shellbar__group--copilot"
    >
      
            
      <button
        class="fd-button fd-shellbar__button"
      >
        <img
          alt="CoPilot"
          height="30"
          src="//unpkg.com/fundamental-styles/dist/images/copilot.png"
          width="30"
        />
        
            
      </button>
      
        
    </div>
    
        
    <div
      class="fd-shellbar__group fd-shellbar__group--actions"
    >
      
            
      <div
        class="fd-shellbar__action"
      >
        
                
        <div
          class="fd-popover fd-popover--right"
        >
          
                    
          <div
            class="fd-popover__control"
          >
            
                        
            <div
              aria-controls="MKFAY276"
              aria-expanded="false"
              aria-haspopup="true"
              class="fd-button fd-shellbar__button fd-user-menu__control"
              onclick="onPopoverClick('MKFAY276')"
              role="button"
            >
              
                            
              <span
                aria-label="William Wallingham"
                class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail fd-shellbar__avatar--circle"
                style="background-image: url('assets/images/avatars/1.svg');"
              >
                
                            
              </span>
              
                        
            </div>
            
                    
          </div>
          
                    
          <div
            aria-hidden="true"
            class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right"
            id="MKFAY276"
          >
            
                        
            <nav
              class="fd-menu"
            >
              
                            
              <ul
                class="fd-menu__list fd-menu__list--no-shadow"
              >
                
                                
                <li
                  class="fd-menu__item"
                >
                  
                                    
                  <a
                    class="fd-menu__link"
                    role="button"
                  >
                    
                                        
                    <span
                      class="fd-menu__title"
                    >
                      Settings
                    </span>
                    
                                    
                  </a>
                  
                                
                </li>
                
                                
                <li
                  class="fd-menu__item"
                >
                  
                                    
                  <a
                    class="fd-menu__link"
                    role="button"
                  >
                    
                                        
                    <span
                      class="fd-menu__title"
                    >
                      Sign Out
                    </span>
                    
                                    
                  </a>
                  
                                
                </li>
                
                            
              </ul>
              
                        
            </nav>
            
                    
          </div>
          
                
        </div>
        
            
      </div>
      
            
      <div
        class="fd-shellbar__action fd-shellbar__action--desktop"
      >
        
                
        <div
          class="fd-product-switch"
        >
          
                    
          <div
            class="fd-popover fd-popover--right"
          >
            
                        
            <div
              class="fd-popover__control"
            >
              
                            
              <button
                aria-controls="product-switch-body"
                aria-expanded="true"
                aria-haspopup="true"
                aria-label="Image label"
                class="fd-button fd-button--transparent fd-popover__control fd-product-switch__control"
                onclick="onPopoverClick('product-switch-body')"
              >
                
                                
                <i
                  class="sap-icon--grid"
                />
                
                            
              </button>
              
                        
            </div>
            
                        
            <div
              aria-hidden="false"
              class="fd-popover__body fd-popover__body--right"
              id="product-switch-body"
            >
              
                            
              <div
                class="fd-product-switch__body"
              >
                
                                
                <ul
                  class="fd-product-switch__list"
                >
                  
                                    
                  <li
                    class="fd-product-switch__item"
                  >
                    
                                        
                    <div
                      class="fd-product-switch__icon sap-icon--home"
                    />
                    
                                        
                    <div
                      class="fd-product-switch__text"
                    >
                      
                                            
                      <div
                        class="fd-product-switch__title"
                      >
                        Home
                      </div>
                      
                                            
                      <div
                        class="fd-product-switch__subtitle"
                      >
                        Central Home
                      </div>
                      
                                        
                    </div>
                    
                                    
                  </li>
                  
                                    
                  <li
                    class="fd-product-switch__item selected"
                  >
                    
                                        
                    <div
                      class="fd-product-switch__icon sap-icon--business-objects-experience"
                    />
                    
                                        
                    <div
                      class="fd-product-switch__text"
                    >
                      
                                            
                      <div
                        class="fd-product-switch__title"
                      >
                        Analytics Cloud
                      </div>
                      
                                            
                      <div
                        class="fd-product-switch__subtitle"
                      >
                        Analytics Cloud
                      </div>
                      
                                        
                    </div>
                    
                                    
                  </li>
                  
                                    
                  <li
                    class="fd-product-switch__item"
                  >
                    
                                        
                    <div
                      class="fd-product-switch__icon sap-icon--contacts"
                    />
                    
                                        
                    <div
                      class="fd-product-switch__text"
                    >
                      
                                            
                      <div
                        class="fd-product-switch__title"
                      >
                        Catalog
                      </div>
                      
                                            
                      <div
                        class="fd-product-switch__subtitle"
                      >
                        Ariba
                      </div>
                      
                                        
                    </div>
                    
                                    
                  </li>
                  
                                    
                  <li
                    class="fd-product-switch__item"
                  >
                    
                                        
                    <div
                      class="fd-product-switch__icon sap-icon--credit-card"
                    />
                    
                                        
                    <div
                      class="fd-product-switch__text"
                    >
                      
                                            
                      <div
                        class="fd-product-switch__title"
                      >
                        Guided Buying
                      </div>
                      
                                        
                    </div>
                    
                                    
                  </li>
                  
                                    
                  <li
                    class="fd-product-switch__item"
                  >
                    
                                        
                    <div
                      class="fd-product-switch__icon sap-icon--cart-3"
                    />
                    
                                        
                    <div
                      class="fd-product-switch__text"
                    >
                      
                                            
                      <div
                        class="fd-product-switch__title"
                      >
                        Strategic Procurement
                      </div>
                      
                                        
                    </div>
                    
                                    
                  </li>
                  
                                    
                  <li
                    class="fd-product-switch__item"
                  >
                    
                                        
                    <div
                      class="fd-product-switch__icon sap-icon--flight"
                    />
                    
                                        
                    <div
                      class="fd-product-switch__text"
                    >
                      
                                            
                      <div
                        class="fd-product-switch__title"
                      >
                        Travel & Expense
                      </div>
                      
                                            
                      <div
                        class="fd-product-switch__subtitle"
                      >
                        Concur
                      </div>
                      
                                        
                    </div>
                    
                                    
                  </li>
                  
                                    
                  <li
                    class="fd-product-switch__item"
                  >
                    
                                        
                    <div
                      class="fd-product-switch__icon sap-icon--shipping-status"
                    />
                    
                                        
                    <div
                      class="fd-product-switch__text"
                    >
                      
                                            
                      <div
                        class="fd-product-switch__title"
                      >
                        Vendor Management
                      </div>
                      
                                            
                      <div
                        class="fd-product-switch__subtitle"
                      >
                        Fieldglass
                      </div>
                      
                                        
                    </div>
                    
                                    
                  </li>
                  
                                    
                  <li
                    class="fd-product-switch__item"
                  >
                    
                                        
                    <div
                      class="fd-product-switch__icon sap-icon--customer"
                    />
                    
                                        
                    <div
                      class="fd-product-switch__text"
                    >
                      
                                            
                      <div
                        class="fd-product-switch__title"
                      >
                        Human Capital Management
                      </div>
                      
                                        
                    </div>
                    
                                    
                  </li>
                  
                                    
                  <li
                    class="fd-product-switch__item"
                  >
                    
                                        
                    <div
                      class="fd-product-switch__icon sap-icon--sales-notification"
                    />
                    
                                        
                    <div
                      class="fd-product-switch__text"
                    >
                      
                                            
                      <div
                        class="fd-product-switch__title"
                      >
                        Sales Cloud
                      </div>
                      
                                            
                      <div
                        class="fd-product-switch__subtitle"
                      >
                        Sales Cloud
                      </div>
                      
                                        
                    </div>
                    
                                    
                  </li>
                  
                                    
                  <li
                    class="fd-product-switch__item"
                  >
                    
                                        
                    <div
                      class="fd-product-switch__icon sap-icon--retail-store"
                    />
                    
                                        
                    <div
                      class="fd-product-switch__text"
                    >
                      
                                            
                      <div
                        class="fd-product-switch__title"
                      >
                        Commerce Cloud
                      </div>
                      
                                            
                      <div
                        class="fd-product-switch__subtitle"
                      >
                        Commerce Cloud
                      </div>
                      
                                        
                    </div>
                    
                                    
                  </li>
                  
                                    
                  <li
                    class="fd-product-switch__item"
                  >
                    
                                        
                    <div
                      class="fd-product-switch__icon sap-icon--marketing-campaign"
                    />
                    
                                        
                    <div
                      class="fd-product-switch__text"
                    >
                      
                                            
                      <div
                        class="fd-product-switch__title"
                      >
                        Marketing Cloud
                      </div>
                      
                                            
                      <div
                        class="fd-product-switch__subtitle"
                      >
                        Marketing Cloud
                      </div>
                      
                                        
                    </div>
                    
                                    
                  </li>
                  
                                    
                  <li
                    class="fd-product-switch__item"
                  >
                    
                                        
                    <div
                      class="fd-product-switch__icon sap-icon--family-care"
                    />
                    
                                        
                    <div
                      class="fd-product-switch__text"
                    >
                      
                                            
                      <div
                        class="fd-product-switch__title"
                      >
                        Service Cloud
                      </div>
                      
                                        
                    </div>
                    
                                    
                  </li>
                  
                                    
                  <li
                    class="fd-product-switch__item"
                  >
                    
                                        
                    <div
                      class="fd-product-switch__icon sap-icon--customer-briefing"
                    />
                    
                                        
                    <div
                      class="fd-product-switch__text"
                    >
                      
                                            
                      <div
                        class="fd-product-switch__title"
                      >
                        Customer Data Cloud
                      </div>
                      
                                        
                    </div>
                    
                                    
                  </li>
                  
                                    
                  <li
                    class="fd-product-switch__item"
                  >
                    
                                        
                    <div
                      class="fd-product-switch__icon sap-icon--batch-payments"
                    />
                    
                                        
                    <div
                      class="fd-product-switch__text"
                    >
                      
                                            
                      <div
                        class="fd-product-switch__title"
                      >
                        S/4HANA
                      </div>
                      
                                        
                    </div>
                    
                                    
                  </li>
                  
                                
                </ul>
                
                            
              </div>
              
                        
            </div>
            
                    
          </div>
          
                
        </div>
        
            
      </div>
      
        
    </div>
    
    
  </div>
  

</div>
`;

exports[`Storyshots Components/Shellbar Side Navigation 1`] = `
<div
  style="height:600px"
>
  
    
  <div
    class="fd-shellbar fd-shellbar--side-nav"
  >
    
        
    <div
      class="fd-shellbar__group fd-shellbar__group--product"
    >
      
            
      <button
        aria-label="Side Nav control button"
        class="fd-button fd-button--transparent fd-shellbar__button fd-shellbar__side-nav-control"
      >
        
                
        <i
          class="sap-icon--menu2"
        />
        
            
      </button>
      
            
      <span
        class="fd-shellbar__logo"
      >
        <img
          alt="SAP"
          height="24"
          src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png"
          srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x"
          width="48"
        />
      </span>
      
            
      <span
        class="fd-shellbar__title"
      >
        Corporate Portal
      </span>
      
        
    </div>
    
        
    <div
      class="fd-shellbar__group fd-shellbar__group--actions"
    >
      
            
      <div
        class="fd-shellbar__action"
      >
        
                
        <div
          class="fd-popover fd-popover--right"
        >
          
                    
          <div
            class="fd-popover__control"
          >
            
                        
            <div
              aria-controls="MKFAY276"
              aria-expanded="false"
              aria-haspopup="true"
              class="fd-button fd-shellbar__button fd-user-menu__control"
              onclick="onPopoverClick('MKFAY276')"
              role="button"
            >
              
                            
              <span
                aria-label="William Wallingham"
                class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail fd-shellbar__avatar--circle"
                style="background-image: url('assets/images/avatars/1.svg');"
              >
                
                            
              </span>
              
                        
            </div>
            
                    
          </div>
          
                    
          <div
            aria-hidden="true"
            class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right"
            id="MKFAY276"
          >
            
                        
            <nav
              class="fd-menu"
            >
              
                            
              <ul
                class="fd-menu__list fd-menu__list--no-shadow"
              >
                
                                
                <li
                  class="fd-menu__item"
                >
                  
                                    
                  <a
                    class="fd-menu__link"
                    role="button"
                  >
                    
                                        
                    <span
                      class="fd-menu__title"
                    >
                      Settings
                    </span>
                    
                                    
                  </a>
                  
                                
                </li>
                
                                
                <li
                  class="fd-menu__item"
                >
                  
                                    
                  <a
                    class="fd-menu__link"
                    role="button"
                  >
                    
                                        
                    <span
                      class="fd-menu__title"
                    >
                      Sign Out
                    </span>
                    
                                    
                  </a>
                  
                                
                </li>
                
                            
              </ul>
              
                        
            </nav>
            
                    
          </div>
          
                
        </div>
        
            
      </div>
      
        
    </div>
    
    
  </div>
  

</div>
`;

exports[`Storyshots Components/Shellbar Small 1`] = `
<div
  style="height:300px; max-width: 600px;"
>
  
    
  <div
    class="fd-shellbar fd-shellbar--s"
  >
    
        
    <div
      class="fd-shellbar__group fd-shellbar__group--product"
    >
      
            
      <span
        class="fd-shellbar__logo"
      >
        <img
          alt="SAP"
          height="24"
          src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png"
          srcset="//unpkg.com/fundamental-styles/dist/images/sap-logo@2x.png 1x, //unpkg.com/fundamental-styles/dist/images/sap-logo@3x.png 2x, //unpkg.com/fundamental-styles/dist/images/sap-logo@4x.png 3x"
          width="48"
        />
      </span>
      
            
      <span
        class="fd-shellbar__title"
      >
        Corporate Portal
      </span>
      
        
    </div>
    
        
    <div
      class="fd-shellbar__group fd-shellbar__group--actions"
    >
      
            
      <div
        class="fd-shellbar__action fd-shellbar__action--desktop"
      >
                
                
        <div
          class="fd-popover__control"
        >
          
                    
          <div
            aria-controls="UIBFJ688"
            aria-expanded="false"
            aria-haspopup="true"
            aria-label="Image label"
          >
            
                        
            <div
              class="fd-input-group fd-shellbar__input-group"
            >
              
                            
              <input
                aria-label="search"
                class="fd-input fd-input-group__input fd-shellbar__input-group__input"
                id="UIO6J6881"
                placeholder="Search..."
                type="text"
                value="Search"
              />
              
                            
              <span
                class="fd-input-group__addon fd-shellbar__input-group__addon fd-input-group__addon--button"
              >
                
                                
                <button
                  aria-label="navigation-down-arrow-button"
                  class="fd-shellbar__button fd-button"
                >
                  
                                    
                  <i
                    class="sap-icon--navigation-down-arrow"
                  />
                  
                                
                </button>
                
                            
              </span>
              
                        
            </div>
            
                    
          </div>
          
                
        </div>
        
            
      </div>
      
            
      <div
        class="fd-shellbar__action fd-shellbar__action--desktop"
      >
        
                
        <button
          aria-label="Search"
          class="fd-button fd-shellbar__button"
        >
          
                    
          <i
            class="sap-icon--search"
          />
          
                
        </button>
        
            
      </div>
      
                
      <div
        class="fd-shellbar__action fd-shellbar__action--desktop"
      >
        
                    
        <button
          aria-label="Notifications"
          class="fd-button fd-shellbar__button"
        >
          
                        
          <i
            class="sap-icon--bell"
          />
          
                        
          <span
            aria-label="Unread count"
            class="fd-counter fd-counter--notification fd-shellbar__counter--notification"
          >
            251234
          </span>
          
                    
        </button>
        
                
      </div>
      
                
      <div
        class="fd-shellbar__action fd-shellbar__action--desktop"
      >
        
                    
        <button
          aria-label="Pool"
          class="fd-button fd-shellbar__button"
        >
          
                        
          <i
            class="sap-icon--pool"
          />
          
                    
        </button>
        
                
      </div>
      
                
      <div
        class="fd-shellbar__action fd-shellbar__action--mobile"
      >
        
                    
        <div
          class="fd-shellbar-collapse"
        >
          
                        
          <div
            class="fd-popover fd-popover--right"
          >
            
                            
            <div
              class="fd-popover__control"
            >
              
                                
              <div
                aria-controls="CWaGNGD78"
                aria-expanded="false"
                aria-haspopup="true"
                class="fd-shellbar-collapse--control"
                onclick="onPopoverClick('CWaGNGD78')"
                role="button"
              >
                
                                    
                <button
                  aria-controls="undefined"
                  aria-expanded="false"
                  aria-haspopup="true"
                  class="fd-button fd-shellbar__button"
                >
                  
                                        
                  <i
                    class="sap-icon--overflow"
                  />
                  
                                        
                  <span
                    aria-label="Unread count"
                    class="fd-counter fd-counter--notification fd-shellbar__counter--notification"
                  >
                    25
                  </span>
                  
                                    
                </button>
                
                                
              </div>
              
                            
            </div>
            
                            
            <div
              aria-hidden="true"
              class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right"
              id="CWaGNGD78"
            >
              
                                
              <nav
                class="fd-menu"
              >
                
                                    
                <ul
                  class="fd-menu__list fd-menu__list--no-shadow"
                >
                  
                                        
                  <li
                    class="fd-menu__item"
                  >
                    
                                            
                    <a
                      class="fd-menu__link"
                      role="button"
                    >
                      
                                                
                      <span
                        class="fd-menu__title"
                      >
                        Search
                      </span>
                      
                                            
                    </a>
                    
                                        
                  </li>
                  
                                        
                  <li
                    class="fd-menu__item"
                  >
                    
                                            
                    <a
                      class="fd-menu__link"
                      role="button"
                    >
                      
                                                
                      <span
                        class="fd-menu__title"
                      >
                        Notifications Out
                      </span>
                      
                                                
                      <span
                        class="fd-counter fd-shellbar__counter--overflowed"
                      >
                        21
                      </span>
                      
                                            
                    </a>
                    
                                        
                  </li>
                  
                                        
                  <li
                    class="fd-menu__item"
                  >
                    
                                            
                    <a
                      class="fd-menu__link"
                      role="button"
                    >
                      
                                                
                      <span
                        class="fd-menu__title"
                      >
                        Pool
                      </span>
                      
                                                
                      <span
                        class="fd-counter fd-shellbar__counter--overflowed"
                      >
                        4
                      </span>
                      
                                            
                    </a>
                    
                                        
                  </li>
                  
                                    
                </ul>
                
                                
              </nav>
              
                            
            </div>
            
                        
          </div>
          
                    
        </div>
        
                
      </div>
      
                
      <div
        class="fd-shellbar__action"
      >
        
                    
        <div
          class="fd-popover fd-popover--right"
        >
          
                        
          <div
            class="fd-popover__control"
          >
            
                            
            <div
              aria-controls="DD35GBK6"
              aria-expanded="false"
              aria-haspopup="true"
              class="fd-button fd-shellbar__button fd-user-menu__control"
              onclick="onPopoverClick('DD35GBK6')"
              role="button"
            >
              
                                
              <span
                class="fd-avatar fd-avatar--xs fd-avatar--circle fd-shellbar__avatarier--circle fd-shellbar__avatar--circle"
              >
                WW
              </span>
              
                            
            </div>
            
                        
          </div>
          
                        
          <div
            aria-hidden="true"
            class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right"
            id="DD35GBK6"
          >
            
                            
            <nav
              class="fd-menu"
            >
              
                                
              <ul
                class="fd-menu__list fd-menu__list--no-shadow"
              >
                
                                    
                <li
                  class="fd-menu__item"
                >
                  
                                        
                  <a
                    class="fd-menu__link"
                    role="button"
                  >
                    
                                            
                    <span
                      class="fd-menu__title"
                    >
                      Settings
                    </span>
                    
                                        
                  </a>
                  
                                    
                </li>
                
                                    
                <li
                  class="fd-menu__item"
                >
                  
                                        
                  <a
                    class="fd-menu__link"
                    role="button"
                  >
                    
                                            
                    <span
                      class="fd-menu__title"
                    >
                      Sign Out
                    </span>
                    
                                        
                  </a>
                  
                                    
                </li>
                
                                
              </ul>
              
                            
            </nav>
            
                        
          </div>
          
                    
        </div>
        
                
      </div>
      
            
    </div>
    
        
  </div>
  
    
</div>
`;