avatar.stories.storyshot

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

exports[`Storyshots Components/Avatar Accent Colors 1`] = `
<section>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--accent-color-1 fd-avatar--m"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--accent-color-2 fd-avatar--m"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--accent-color-3 fd-avatar--m"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--accent-color-4 fd-avatar--m"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--accent-color-5 fd-avatar--m"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--accent-color-6 fd-avatar--m"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--accent-color-7 fd-avatar--m"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--accent-color-8 fd-avatar--m"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--accent-color-9 fd-avatar--m"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--accent-color-10 fd-avatar--m"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

</section>
`;

exports[`Storyshots Components/Avatar Background Image 1`] = `
<section>
  

  <span
    aria-label="John Doe"
    class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail"
    role="img"
    style="background-image: url('/assets/images/avatars/1.svg')"
  />
  

  <span
    aria-label="John Doe"
    class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail"
    role="img"
    style="background-image: url('/assets/images/avatars/2.svg')"
  />
  

  <span
    aria-label="John Doe"
    class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--thumbnail"
    role="img"
    style="background-image: url('/assets/images/avatars/3.svg')"
  />
  

  <span
    aria-label="John Doe"
    class="fd-avatar fd-avatar--l fd-avatar--circle fd-avatar--thumbnail"
    role="img"
    style="background-image: url('/assets/images/avatars/4.svg')"
  />
  

  <span
    aria-label="John Doe"
    class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--thumbnail"
    role="img"
    style="background-image: url('/assets/images/avatars/5.svg')"
  />
  

</section>
`;

exports[`Storyshots Components/Avatar Borders 1`] = `
<section>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--xs fd-avatar--transparent fd-avatar--border"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--s fd-avatar--transparent fd-avatar--border"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--m fd-avatar--transparent fd-avatar--border"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--l fd-avatar--transparent fd-avatar--border"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--xl fd-avatar--transparent fd-avatar--border"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Wendy Wallace"
    class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--transparent fd-avatar--border"
  >
    WW

  </span>
  

  <span
    aria-label="Wendy Wallace"
    class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--transparent fd-avatar--border"
  >
    WW

  </span>
  

  <span
    aria-label="Wendy Wallace"
    class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--transparent fd-avatar--border"
  >
    WW

  </span>
  

  <span
    aria-label="Wendy Wallace"
    class="fd-avatar fd-avatar--l fd-avatar--circle fd-avatar--transparent fd-avatar--border"
  >
    WW

  </span>
  

  <span
    aria-label="Wendy Wallace"
    class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--transparent fd-avatar--border"
  >
    WW

  </span>
  

</section>
`;

exports[`Storyshots Components/Avatar Circle 1`] = `
<section>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--xs fd-avatar--circle"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--s fd-avatar--circle"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--m fd-avatar--circle"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--l fd-avatar--circle"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--xl fd-avatar--circle"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Wendy Wallace"
    class="fd-avatar fd-avatar--xs fd-avatar--circle"
  >
    WW
  </span>
  

  <span
    aria-label="Wendy Wallace"
    class="fd-avatar fd-avatar--s fd-avatar--circle"
  >
    WW
  </span>
  

  <span
    aria-label="Wendy Wallace"
    class="fd-avatar fd-avatar--m fd-avatar--circle"
  >
    WW
  </span>
  

  <span
    aria-label="Wendy Wallace"
    class="fd-avatar fd-avatar--l fd-avatar--circle"
  >
    WW
  </span>
  

  <span
    aria-label="Wendy Wallace"
    class="fd-avatar fd-avatar--xl fd-avatar--circle"
  >
    WW
  </span>
  

</section>
`;

exports[`Storyshots Components/Avatar Icon 1`] = `
<section>
  

  <span
    class="fd-avatar fd-avatar--xs"
    role="presentation"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--washing-machine"
      role="presentation"
    />
    

  </span>
  

  <span
    class="fd-avatar fd-avatar--s"
    role="presentation"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--washing-machine"
      role="presentation"
    />
    

  </span>
  

  <span
    class="fd-avatar fd-avatar--m"
    role="presentation"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--washing-machine"
      role="presentation"
    />
    

  </span>
  

  <span
    class="fd-avatar fd-avatar--l"
    role="presentation"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--washing-machine"
      role="presentation"
    />
    

  </span>
  

  <span
    class="fd-avatar fd-avatar--xl"
    role="presentation"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--washing-machine"
      role="presentation"
    />
    

  </span>
  

</section>
`;

exports[`Storyshots Components/Avatar Initials 1`] = `
<section>
  

  <span
    aria-label="Wendy Wallace"
    class="fd-avatar fd-avatar--xs"
  >
    WW
  </span>
  

  <span
    aria-label="Wendy Wallace"
    class="fd-avatar fd-avatar--s"
  >
    WW
  </span>
  

  <span
    aria-label="Wendy Wallace"
    class="fd-avatar fd-avatar--m"
  >
    WW
  </span>
  

  <span
    aria-label="Wendy Wallace"
    class="fd-avatar fd-avatar--l"
  >
    WW
  </span>
  

  <span
    aria-label="Wendy Wallace"
    class="fd-avatar fd-avatar--xl"
  >
    WW
  </span>
  

</section>
`;

exports[`Storyshots Components/Avatar Placeholder Background 1`] = `
<section>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--placeholder"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--placeholder"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--placeholder"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--l fd-avatar--circle fd-avatar--placeholder"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--placeholder"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

</section>
`;

exports[`Storyshots Components/Avatar Tile Icon Background 1`] = `
<section>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--tile"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--tile"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--tile"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--l fd-avatar--circle fd-avatar--tile"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--tile"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

</section>
`;

exports[`Storyshots Components/Avatar Transparent 1`] = `
<section>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--transparent"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--transparent"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--transparent"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--l fd-avatar--circle fd-avatar--transparent"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--transparent"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    

  </span>
  

  <span
    aria-label="Wendy Wallace"
    class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--transparent"
  >
    WW
  </span>
  

  <span
    aria-label="Wendy Wallace"
    class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--transparent"
  >
    WW
  </span>
  

  <span
    aria-label="Wendy Wallace"
    class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--transparent"
  >
    WW
  </span>
  

  <span
    aria-label="Wendy Wallace"
    class="fd-avatar fd-avatar--l fd-avatar--circle fd-avatar--transparent"
  >
    WW
  </span>
  

  <span
    aria-label="Wendy Wallace"
    class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--transparent"
  >
    WW
  </span>
  

</section>
`;

exports[`Storyshots Components/Avatar Zoom Icon 1`] = `
<section>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--accent-color-1"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    
    
    <i
      aria-label="Edit"
      class="fd-avatar__zoom-icon sap-icon--edit"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--accent-color-2"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    
    
    <i
      aria-label="Edit"
      class="fd-avatar__zoom-icon sap-icon--edit"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--accent-color-3"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    
    
    <i
      aria-label="Edit"
      class="fd-avatar__zoom-icon sap-icon--edit"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--l fd-avatar--circle fd-avatar--accent-color-4"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    
    
    <i
      aria-label="Edit"
      class="fd-avatar__zoom-icon sap-icon--edit"
    />
    

  </span>
  

  <span
    aria-label="Avatar"
    class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--accent-color-5"
  >
    
    
    <i
      class="fd-avatar__icon sap-icon--money-bills"
      role="presentation"
    />
    
    
    <i
      aria-label="Edit"
      class="fd-avatar__zoom-icon sap-icon--edit"
    />
    

  </span>
  

  <span
    aria-label="Wendy Wallace"
    class="fd-avatar fd-avatar--accent-color-6 fd-avatar--xs"
  >
    WW
    
    <i
      aria-label="Edit"
      class="fd-avatar__zoom-icon sap-icon--edit"
    />
    

  </span>
  

  <span
    aria-label="Wendy Wallace"
    class="fd-avatar fd-avatar--accent-color-7 fd-avatar--s"
  >
    WW
    
    <i
      aria-label="Edit"
      class="fd-avatar__zoom-icon sap-icon--edit"
    />
    

  </span>
  

  <span
    aria-label="Wendy Wallace"
    class="fd-avatar fd-avatar--accent-color-8 fd-avatar--m"
  >
    WW
    
    <i
      aria-label="Edit"
      class="fd-avatar__zoom-icon sap-icon--edit"
    />
    

  </span>
  

  <span
    aria-label="Wendy Wallace"
    class="fd-avatar fd-avatar--accent-color-9 fd-avatar--l"
  >
    WW
    
    <i
      aria-label="Edit"
      class="fd-avatar__zoom-icon sap-icon--edit"
    />
    

  </span>
  

  <span
    aria-label="Wendy Wallace"
    class="fd-avatar fd-avatar--accent-color-10 fd-avatar--xl"
  >
    WW
    
    <i
      aria-label="Edit"
      class="fd-avatar__zoom-icon sap-icon--edit"
    />
    

  </span>
  

</section>
`;