storyshots-frontend.test.js.snap

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

exports[`Frontend Storyshots Alert danger 1`] = `
<span>
  <h2>
    Danger
  </h2>
  <p>
    <div
      className="alert alert-danger"
      role="alert"
    >
      <strong>
        Holy guacamole!
      </strong>
       Best check yo self
    </div>
  </p>
  <p>
    <code>
      bsStyle="danger"
    </code>
  </p>
</span>
`;

exports[`Frontend Storyshots Alert info 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Alert
  </h2>
  <div
    className="well well-lg"
  >
    Use this for the default alert overlay. In the case where feedback is needed from the user before dismissing the alert, use a 
    <code>
      Notification
    </code>
    .
  </div>
  <p>
    <div
      className="alert alert-info"
      role="alert"
    >
      <strong>
        Holy guacamole!
      </strong>
       Best check yo self
    </div>
  </p>
  <p>
    <code>
      bsStyle="info"
    </code>
  </p>
  <hr />
  <h3>
    Props
  </h3>
  <table
    className="table table-striped table-bordered table-condensed table-hover"
  >
    <thead>
      <tr>
        <th>
          Name
        </th>
        <th>
          Type
        </th>
        <th>
          Default
        </th>
        <th>
          Description
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          bsClass
        </td>
        <td>
          string
        </td>
        <td>
          'alert'
        </td>
        <td>
          Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
        </td>
      </tr>
      <tr>
        <td>
          bsStyle
        </td>
        <td>
          one of: 
          <code>
            "success"
          </code>
          , 
          <code>
            "warning"
          </code>
          , 
          <code>
            "danger"
          </code>
          , 
          <code>
            "info"
          </code>
        </td>
        <td>
          'info'
        </td>
        <td>
          Component visual or contextual style variants.
        </td>
      </tr>
      <tr>
        <td>
          closeLabel
        </td>
        <td>
          string
        </td>
        <td>
          'Close alert'
        </td>
        <td />
      </tr>
      <tr>
        <td>
          onDismiss
        </td>
        <td>
          function
        </td>
        <td />
        <td>
          For Closeable alerts pass the 
          <code>
            onDismiss
          </code>
           function
        </td>
      </tr>
    </tbody>
  </table>
  <hr />
  <h3>
    Related components
  </h3>
  <code>
    Notification
  </code>
</span>
`;

exports[`Frontend Storyshots Alert success 1`] = `
<span>
  <h2>
    Success
  </h2>
  <p>
    <div
      className="alert alert-success"
      role="alert"
    >
      <strong>
        Holy guacamole!
      </strong>
       Best check yo self
    </div>
  </p>
  <p>
    <code>
      bsStyle="success"
    </code>
  </p>
</span>
`;

exports[`Frontend Storyshots Alert warning 1`] = `
<span>
  <h2>
    Warning
  </h2>
  <p>
    <div
      className="alert alert-warning"
      role="alert"
    >
      <strong>
        Holy guacamole!
      </strong>
       Best check yo self
    </div>
  </p>
  <p>
    <code>
      bsStyle="warning"
    </code>
  </p>
</span>
`;

exports[`Frontend Storyshots Badge default 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Badge
  </h2>
  <div
    className="well well-lg"
  >
    Highlight new or unread items, numbers of members or any other numerical value.
  </div>
  <p>
    Badge 
    <span
      className="badge"
    >
      23
    </span>
  </p>
  <hr />
  <h3>
    Props
  </h3>
  <table
    className="table table-striped table-bordered table-condensed table-hover"
  >
    <thead>
      <tr>
        <th>
          Name
        </th>
        <th>
          Type
        </th>
        <th>
          Default
        </th>
        <th>
          Description
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          bsClass
        </td>
        <td>
          string
        </td>
        <td>
          'badge'
        </td>
        <td>
          Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
        </td>
      </tr>
      <tr>
        <td>
          pullRight
        </td>
        <td>
          boolean
        </td>
        <td>
          false
        </td>
        <td>
          Component visual or contextual style variants.
        </td>
      </tr>
    </tbody>
  </table>
</span>
`;

exports[`Frontend Storyshots Badge in button 1`] = `
<button
  className="btn btn-primary"
  disabled={false}
  type="button"
>
  Messages 
  <span
    className="badge"
  >
    4
  </span>
</button>
`;

exports[`Frontend Storyshots Badge in nav item 1`] = `
<span>
  <h2>
    Sidebar navigation
  </h2>
  <div
    className="well well-lg"
  >
    Use this navigation layout with the project version 
    <code>
      Sidebar
    </code>
    .
  </div>
  <p>
    <ul
      className="sg-nav-pills nav nav-pills nav-stacked"
      role={null}
    >
      <li
        className="active"
        role="presentation"
        style={undefined}
      >
        <a
          href="#"
          onClick={[Function]}
          role="button"
        >
          <span
            className="u-pullRight badge"
          >
            42
          </span>
          Home
        </a>
      </li>
      <li
        className=""
        role="presentation"
        style={undefined}
      >
        <a
          href="#"
          onClick={[Function]}
          role="button"
        >
          Profile
        </a>
      </li>
      <li
        className=""
        role="presentation"
        style={undefined}
      >
        <a
          href="#"
          onClick={[Function]}
          role="button"
        >
          <span
            className="u-pullRight badge"
          >
            3
          </span>
          Messages
        </a>
      </li>
    </ul>
  </p>
  <hr />
  <h3>
    Related components
  </h3>
  <p>
    <code>
      Sidebar
    </code>
    , 
    <code>
      Tabs
    </code>
  </p>
</span>
`;

exports[`Frontend Storyshots Breadcrumbs default 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Breadcrumbs
  </h2>
  <div
    className="well well-lg"
  >
    Breadcrumbs are used to indicate the current page's location. All pages 2 levels deep or more should use breadcrumbs in frontend. ie. 
    <code>
      topdir/breadcrumbshere/breadcrumbshere/
    </code>
  </div>
  <p>
    Add 
    <code>
      active
    </code>
     attribute to active Breadcrumb.Item. Do not set both active and href attributes. 
    <code>
      active
    </code>
     overrides 
    <code>
      href
    </code>
     and 
    <code>
      span
    </code>
     element is rendered instead of a 
    <code>
      #
    </code>
    .
  </p>
  <ol
    aria-label="breadcrumbs"
    className="breadcrumb"
    role="navigation"
  >
    <li
      className=""
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
        target={undefined}
        title={undefined}
      >
        Home
      </a>
    </li>
    <li
      className=""
    >
      <a
        href="s#"
        onClick={[Function]}
        target={undefined}
        title={undefined}
      >
        Library
      </a>
    </li>
    <li
      className="active"
    >
      <span>
        Data
      </span>
    </li>
  </ol>
  <hr />
  <h3>
    Props
  </h3>
  <p>
    Breadcrumb component itself doesn't have any specific public properties
  </p>
</span>
`;

exports[`Frontend Storyshots Button block 1`] = `
<span>
  <h2>
    Button block
  </h2>
  <p>
    <button
      className="btn btn-default btn-block"
      disabled={false}
      onClick={[Function]}
      type="button"
    >
      Button block
    </button>
  </p>
  <p>
    <code>
      block=true
    </code>
  </p>
</span>
`;

exports[`Frontend Storyshots Button danger 1`] = `
<span>
  <h2>
    Danger button
  </h2>
  <p>
    <button
      className="btn btn-danger"
      disabled={false}
      onClick={[Function]}
      type="button"
    >
      Danger button
    </button>
  </p>
  <p>
    <code>
      bsStyle="danger"
    </code>
  </p>
</span>
`;

exports[`Frontend Storyshots Button default 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Buttons
  </h2>
  <p>
    <button
      className="btn btn-default"
      disabled={false}
      onClick={[Function]}
      type="button"
    >
      Unstyled button
    </button>
  </p>
  <p>
    <code>
      bsStyle="default"
    </code>
  </p>
  <hr />
  <h3>
    Button spacing
  </h3>
  <p>
    Because React doesn't output newlines between elements, buttons on the same line are displayed flush against each other. To preserve the spacing between multiple inline buttons, wrap your button group in ButtonToolbar.
  </p>
  <hr />
  <h3>
    Props
  </h3>
  <table
    className="table table-striped table-bordered table-condensed table-hover"
  >
    <thead>
      <tr>
        <th>
          Name
        </th>
        <th>
          Type
        </th>
        <th>
          Default
        </th>
        <th>
          Description
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          active
        </td>
        <td>
          boolean
        </td>
        <td>
          'false'
        </td>
        <td />
      </tr>
      <tr>
        <td>
          block
        </td>
        <td>
          boolean
        </td>
        <td>
          'false'
        </td>
        <td />
      </tr>
      <tr>
        <td>
          bsClass
        </td>
        <td>
          string
        </td>
        <td>
          'btn'
        </td>
        <td>
          Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
        </td>
      </tr>
      <tr>
        <td>
          bsSize
        </td>
        <td>
          one of: 
          <code>
            "lg"
          </code>
          , 
          <code>
            "large"
          </code>
          , 
          <code>
            "sm"
          </code>
          , 
          <code>
            "small"
          </code>
          , 
          <code>
            "xs"
          </code>
          , 
          <code>
            "xsmall"
          </code>
        </td>
        <td />
        <td>
          Component size variations
        </td>
      </tr>
      <tr>
        <td>
          bsStyle
        </td>
        <td>
          one of: 
          <code>
            "success"
          </code>
          , 
          <code>
            "warning"
          </code>
          , 
          <code>
            "danger"
          </code>
          , 
          <code>
            "info"
          </code>
          , 
          <code>
            "default"
          </code>
          , 
          <code>
            "primary"
          </code>
          , 
          <code>
            "link"
          </code>
        </td>
        <td>
          'default'
        </td>
        <td>
          Component visual or contextual style variants.
        </td>
      </tr>
      <tr>
        <td>
          componentClass
        </td>
        <td>
          elementType
        </td>
        <td />
        <td>
          You can use a custom element type for this component.
        </td>
      </tr>
      <tr>
        <td>
          disabled
        </td>
        <td>
          boolean
        </td>
        <td>
          'false'
        </td>
        <td />
      </tr>
      <tr>
        <td>
          href
        </td>
        <td>
          string
        </td>
        <td />
        <td />
      </tr>
      <tr>
        <td>
          type
        </td>
        <td>
          one of: 
          <code>
            'button'
          </code>
          , 
          <code>
            'reset'
          </code>
          , 
          <code>
            'submit'
          </code>
        </td>
        <td>
          'button'
        </td>
        <td>
          Defines HTML button type attribute
        </td>
      </tr>
    </tbody>
  </table>
</span>
`;

exports[`Frontend Storyshots Button group 1`] = `
<span>
  <h2>
    ButtonGroup
  </h2>
  <div
    className="well well-lg"
  >
    Group a series of 
    <code>
      Button
    </code>
    s together on a single line with the 
    <code>
      ButtonGroup
    </code>
    .
  </div>
  <div
    className="btn-group"
  >
    <button
      className="btn btn-default"
      disabled={false}
      onClick={[Function]}
      type="button"
    >
      Left
    </button>
    <button
      className="btn btn-default"
      disabled={false}
      onClick={[Function]}
      type="button"
    >
      Middle
    </button>
    <button
      className="btn btn-default"
      disabled={false}
      onClick={[Function]}
      type="button"
    >
      Right
    </button>
  </div>
  <hr />
  <h3>
    Props
  </h3>
  <table
    className="table table-striped table-bordered table-condensed table-hover"
  >
    <thead>
      <tr>
        <th>
          Name
        </th>
        <th>
          Type
        </th>
        <th>
          Default
        </th>
        <th>
          Description
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          block
        </td>
        <td>
          boolean
        </td>
        <td>
          'false'
        </td>
        <td />
      </tr>
      <tr>
        <td>
          bsClass
        </td>
        <td>
          string
        </td>
        <td>
          'btn-group'
        </td>
        <td>
          Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
        </td>
      </tr>
      <tr>
        <td>
          justified
        </td>
        <td>
          boolean
        </td>
        <td>
          'false'
        </td>
        <td />
      </tr>
      <tr>
        <td>
          vertical
        </td>
        <td>
          boolean
        </td>
        <td>
          'false'
        </td>
        <td />
      </tr>
    </tbody>
  </table>
</span>
`;

exports[`Frontend Storyshots Button info 1`] = `
<span>
  <h2>
    Info button
  </h2>
  <p>
    <button
      className="btn btn-info"
      disabled={false}
      onClick={[Function]}
      type="button"
    >
      Info button
    </button>
  </p>
  <p>
    <code>
      bsStyle="info"
    </code>
  </p>
</span>
`;

exports[`Frontend Storyshots Button nested 1`] = `
<span>
  <h2>
    Nested ButtonGroup
  </h2>
  <div
    className="well well-lg"
  >
    Use for adding 
    <code>
      Dropdown
    </code>
    s to 
    <code>
      ButtonGroup
    </code>
    s
  </div>
  <div
    className="btn-group"
  >
    <button
      className="btn btn-default"
      disabled={false}
      onClick={[Function]}
      type="button"
    >
      1
    </button>
    <button
      className="btn btn-default"
      disabled={false}
      onClick={[Function]}
      type="button"
    >
      2
    </button>
    <div
      className="dropdown btn-group"
    >
      <button
        aria-expanded={false}
        aria-haspopup={true}
        className="dropdown-toggle btn btn-default"
        disabled={false}
        id="bg-nested-dropdown"
        onClick={[Function]}
        onKeyDown={[Function]}
        role="button"
        type="button"
      >
        Dropdown
         
        <span
          className="caret"
        />
      </button>
      <ul
        aria-labelledby="bg-nested-dropdown"
        className="dropdown-menu"
        role="menu"
      >
        <li
          className=""
          role="presentation"
          style={undefined}
        >
          <a
            href="#"
            onClick={[Function]}
            onKeyDown={[Function]}
            role="menuitem"
            tabIndex="-1"
          >
            Dropdown link
          </a>
        </li>
        <li
          className=""
          role="presentation"
          style={undefined}
        >
          <a
            href="#"
            onClick={[Function]}
            onKeyDown={[Function]}
            role="menuitem"
            tabIndex="-1"
          >
            Dropdown link
          </a>
        </li>
      </ul>
    </div>
  </div>
</span>
`;

exports[`Frontend Storyshots Button primary 1`] = `
<span>
  <h2>
    Primary button
  </h2>
  <p>
    <button
      className="btn btn-primary"
      disabled={false}
      onClick={[Function]}
      type="button"
    >
      Primary button
    </button>
  </p>
  <p>
    <code>
      bsStyle="primary"
    </code>
  </p>
</span>
`;

exports[`Frontend Storyshots Button sizes 1`] = `
<span>
  <h2>
    Button sizes
  </h2>
  <p>
    <div
      className="btn-group"
    >
      <button
        className="btn btn-lg btn-primary"
        disabled={false}
        onClick={[Function]}
        type="button"
      >
        Large button
      </button>
      <button
        className="btn btn-lg btn-default"
        disabled={false}
        onClick={[Function]}
        type="button"
      >
        Large button
      </button>
    </div>
    <div
      className="btn-group"
    >
      <button
        className="btn btn-primary"
        disabled={false}
        onClick={[Function]}
        type="button"
      >
        Default button
      </button>
      <button
        className="btn btn-default"
        disabled={false}
        onClick={[Function]}
        type="button"
      >
        Default button
      </button>
    </div>
    <div
      className="btn-group"
    >
      <button
        className="btn btn-sm btn-primary"
        disabled={false}
        onClick={[Function]}
        type="button"
      >
        Small button
      </button>
      <button
        className="btn btn-sm btn-default"
        disabled={false}
        onClick={[Function]}
        type="button"
      >
        Small button
      </button>
    </div>
    <div
      className="btn-group"
    >
      <button
        className="btn btn-xs btn-primary"
        disabled={false}
        onClick={[Function]}
        type="button"
      >
        Extra small button
      </button>
      <button
        className="btn btn-xs btn-default"
        disabled={false}
        onClick={[Function]}
        type="button"
      >
        Extra small button
      </button>
    </div>
  </p>
  <p>
    <code>
      bsSize="lg", "large", "sm", "small", "xs", "xsmall"
    </code>
  </p>
</span>
`;

exports[`Frontend Storyshots Button success 1`] = `
<span>
  <h2>
    Success button
  </h2>
  <p>
    <button
      className="btn btn-success"
      disabled={false}
      onClick={[Function]}
      type="button"
    >
      Success button
    </button>
  </p>
  <p>
    <code>
      bsStyle="success"
    </code>
  </p>
</span>
`;

exports[`Frontend Storyshots Button toolbar 1`] = `
<span>
  <h2>
    Button toolbar
  </h2>
  <div
    className="well well-lg"
  >
     Combine sets of 
    <code>
      ButtonGroup
    </code>
    s into a 
    <code>
      ButtonToolbar
    </code>
     for more complex components.
  </div>
  <div
    className="btn-toolbar"
    role="toolbar"
  >
    <div
      className="btn-group"
    >
      <button
        className="btn btn-default"
        disabled={false}
        onClick={[Function]}
        type="button"
      >
        1
      </button>
      <button
        className="btn btn-default"
        disabled={false}
        onClick={[Function]}
        type="button"
      >
        2
      </button>
      <button
        className="btn btn-default"
        disabled={false}
        onClick={[Function]}
        type="button"
      >
        3
      </button>
      <button
        className="btn btn-default"
        disabled={false}
        onClick={[Function]}
        type="button"
      >
        4
      </button>
    </div>
    <div
      className="btn-group"
    >
      <button
        className="btn btn-default"
        disabled={false}
        onClick={[Function]}
        type="button"
      >
        5
      </button>
      <button
        className="btn btn-default"
        disabled={false}
        onClick={[Function]}
        type="button"
      >
        6
      </button>
      <button
        className="btn btn-default"
        disabled={false}
        onClick={[Function]}
        type="button"
      >
        7
      </button>
    </div>
    <div
      className="btn-group"
    >
      <button
        className="btn btn-default"
        disabled={false}
        onClick={[Function]}
        type="button"
      >
        8
      </button>
    </div>
  </div>
  <hr />
  <h3>
    Props
  </h3>
  <table
    className="table table-striped table-bordered table-condensed table-hover"
  >
    <thead>
      <tr>
        <th>
          Name
        </th>
        <th>
          Type
        </th>
        <th>
          Default
        </th>
        <th>
          Description
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          bsClass
        </td>
        <td>
          string
        </td>
        <td>
          'btn-toolbar'
        </td>
        <td>
          Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
        </td>
      </tr>
    </tbody>
  </table>
</span>
`;

exports[`Frontend Storyshots Button warning 1`] = `
<span>
  <h2>
    Warning button
  </h2>
  <p>
    <button
      className="btn btn-warning"
      disabled={false}
      onClick={[Function]}
      type="button"
    >
      Warning button
    </button>
  </p>
  <p>
    <code>
      bsStyle="warning"
    </code>
  </p>
</span>
`;

exports[`Frontend Storyshots Dropdown default 1`] = `
<div>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Dropdown
  </h2>
  <div
    className="well well-lg"
  >
    Use dropdowns where radio buttons would not make sense due to too many options (a maximum of 7 to 15).
  </div>
  <div
    className="dropdown btn-group btn-group-default"
  >
    <button
      aria-expanded={false}
      aria-haspopup={true}
      className="dropdown-toggle btn btn-default"
      disabled={false}
      id="dropdown-basic"
      onClick={[Function]}
      onKeyDown={[Function]}
      role="button"
      type="button"
    >
      Dropdown button
       
      <span
        className="caret"
      />
    </button>
    <ul
      aria-labelledby="dropdown-basic"
      className="dropdown-menu"
      role="menu"
    >
      <li
        className=""
        role="presentation"
        style={undefined}
      >
        <a
          href="#"
          onClick={[Function]}
          onKeyDown={[Function]}
          role="menuitem"
          tabIndex="-1"
        >
          Action
        </a>
      </li>
      <li
        className=""
        role="presentation"
        style={undefined}
      >
        <a
          href="#"
          onClick={[Function]}
          onKeyDown={[Function]}
          role="menuitem"
          tabIndex="-1"
        >
          Another action
        </a>
      </li>
      <li
        className="active"
        role="presentation"
        style={undefined}
      >
        <a
          href="#"
          onClick={[Function]}
          onKeyDown={[Function]}
          role="menuitem"
          tabIndex="-1"
        >
          Active Item
        </a>
      </li>
    </ul>
  </div>
  <hr />
  <h3>
    Props
  </h3>
  <p>
    The 
    <code>
      Dropdown
    </code>
     expects at least one component with 
    <code>
      bsRole="toggle"
    </code>
     and exactly one with 
    <code>
      bsRole="menu"
    </code>
  </p>
  <table
    className="table table-striped table-bordered table-condensed table-hover"
  >
    <thead>
      <tr>
        <th>
          Name
        </th>
        <th>
          Type
        </th>
        <th>
          Default
        </th>
        <th>
          Description
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          bsSize
        </td>
        <td>
          one of: 
          <code>
            "lg"
          </code>
          , 
          <code>
            "large"
          </code>
          , 
          <code>
            "sm"
          </code>
          , 
          <code>
            "small"
          </code>
          , 
          <code>
            "xs"
          </code>
          , 
          <code>
            "xsmall"
          </code>
        </td>
        <td />
        <td>
          Component size variations
        </td>
      </tr>
      <tr>
        <td>
          bsClass
        </td>
        <td>
          string
        </td>
        <td>
          'btn'
        </td>
        <td>
          Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
        </td>
      </tr>
      <tr>
        <td>
          componentClass
        </td>
        <td>
          elementType
        </td>
        <td>
          ButtonGroup
        </td>
        <td>
          You can use a custom element type for this component.
        </td>
      </tr>
      <tr>
        <td>
          defaultOpen
        </td>
        <td>
          boolean
        </td>
        <td />
        <td />
      </tr>
      <tr>
        <td>
          disabled
        </td>
        <td>
          boolean
        </td>
        <td />
        <td>
          Whether or not component was disabled.
        </td>
      </tr>
      <tr>
        <td>
          dropup
        </td>
        <td>
          boolean
        </td>
        <td />
        <td>
          The menu will open above the dropdown button, instead of below it.
        </td>
      </tr>
      <tr>
        <td>
          id 
          <span
            className="label label-default"
          >
            required
          </span>
        </td>
        <td>
          string|number
        </td>
        <td>
          An html id attribute, necessary for assistive technologies, such as screen readers.
        </td>
        <td>
          Defines HTML button type attribute
        </td>
      </tr>
      <tr>
        <td>
          noCaret
        </td>
        <td>
          boolean
        </td>
        <td />
        <td />
      </tr>
      <tr>
        <td>
          onSelect
        </td>
        <td>
          function
        </td>
        <td />
        <td>
          A callback fired when a menu item is selected.
          <pre>
            <code>
              (eventKey: any, event: Object) =&gt; any
            </code>
          </pre>
        </td>
      </tr>
      <tr>
        <td>
          onToggle
        </td>
        <td>
          function
        </td>
        <td />
        <td>
          A callback fired when the Dropdown wishes to change visibility. Called with the requested open value, the DOM event, and the source that fired it: 
          <pre>
            <code>
              'click','keydown','rootClose', or 'select''
            </code>
          </pre>
        </td>
      </tr>
      <tr>
        <td>
          open
        </td>
        <td>
          boolean
        </td>
        <td />
        <td>
           controlled by: 
          <code>
            onToggle
          </code>
          , 
          <br />
          initial prop: 
          <code>
            defaultOpen
          </code>
          <br />
          Whether or not the Dropdown is visible.
        </td>
      </tr>
      <tr>
        <td>
          pullRight
        </td>
        <td>
          boolean
        </td>
        <td />
        <td>
          Align the menu to the right side of the Dropdown toggle
        </td>
      </tr>
      <tr>
        <td>
          role
        </td>
        <td>
          string
        </td>
        <td />
        <td>
          If 
          <code>
            'menuitem'
          </code>
          , causes the dropdown to behave like a menu item rather than a menu button.
        </td>
      </tr>
      <tr>
        <td>
          rootCloseEvent
        </td>
        <td>
          one of: 
          <code>
            'click'
          </code>
          , 
          <code>
            'mousedown'
          </code>
        </td>
        <td />
        <td>
          Which event when fired outside the component will cause it to be closed
        </td>
      </tr>
      <tr>
        <td>
          title 
          <span
            className="label label-default"
          >
            required
          </span>
        </td>
        <td>
          node
        </td>
        <td />
        <td />
      </tr>
    </tbody>
  </table>
  <hr />
  <h2>
    MenuItem
  </h2>
  <p>
    This component represents a menu item in a 
    <code>
      Dropdown
    </code>
    .
  </p>
  <p>
    It supports the basic anchor properties href, target, title.
  </p>
  <p>
    It also supports different properties of the normal Bootstrap MenuItem.
  </p>
  <ul>
    <li>
      <code>
        header
      </code>
      : To add a header label to sections
    </li>
    <li>
      <code>
        divider
      </code>
      : Adds an horizontal divider between sections
    </li>
    <li>
      <code>
        disabled
      </code>
      : shows the item as disabled, and prevents onSelect from firing
    </li>
    <li>
      <code>
        eventKey
      </code>
      : passed to the callback
    </li>
    <li>
      <code>
        onSelect
      </code>
      : a callback that is called when the user clicks the item.
    </li>
  </ul>
  <p>
    The callback is called with the following arguments: 
    <code>
      event
    </code>
     and
    <code>
      eventKey
    </code>
  </p>
  <hr />
  <h3>
    Props
  </h3>
  <table
    className="table table-striped table-bordered table-condensed table-hover"
  >
    <thead>
      <tr>
        <th>
          Name
        </th>
        <th>
          Type
        </th>
        <th>
          Default
        </th>
        <th>
          Description
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          active
        </td>
        <td>
          boolean
        </td>
        <td />
        <td>
          Highlight the menu item as active.
        </td>
      </tr>
      <tr>
        <td>
          bsClass
        </td>
        <td>
          string
        </td>
        <td>
          'dropdown'
        </td>
        <td>
          Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
        </td>
      </tr>
      <tr>
        <td>
          disabled
        </td>
        <td>
          boolean
        </td>
        <td>
          false
        </td>
        <td>
          Disable the menu item, making it unselectable.
        </td>
      </tr>
      <tr>
        <td>
          divider
        </td>
        <td>
          all
        </td>
        <td>
          false
        </td>
        <td>
          Styles the menu item as a horizontal rule, providing visual separation between groups of menu items.
        </td>
      </tr>
      <tr>
        <td>
          eventKey
        </td>
        <td>
          any
        </td>
        <td />
        <td>
          Value passed to the 
          <code>
            onSelect
          </code>
           handler, useful for identifying the selected menu item.
        </td>
      </tr>
      <tr>
        <td>
          header
        </td>
        <td>
          boolean
        </td>
        <td>
          false
        </td>
        <td>
          Styles the menu item as a header label, useful for describing a group of menu items.
        </td>
      </tr>
      <tr>
        <td>
          href
        </td>
        <td>
          string
        </td>
        <td />
        <td>
          HTML href attribute corresponding to 
          <code>
            a.href
          </code>
          .
        </td>
      </tr>
      <tr>
        <td>
          onClick
        </td>
        <td>
          function
        </td>
        <td />
        <td>
          Callback fired when the menu item is clicked.
        </td>
      </tr>
      <tr>
        <td>
          onSelect
        </td>
        <td>
          function
        </td>
        <td />
        <td>
          Callback fired when the menu item is selected.
          <pre>
            <code>
              (eventKey: any, event: Object) =&gt; any
            </code>
          </pre>
        </td>
      </tr>
    </tbody>
  </table>
</div>
`;

exports[`Frontend Storyshots EditableText editing 1`] = `
<span>
  <h2>
    <img
      src="https://upload.wikimedia.org/wikipedia/commons/4/49/Zanata-Logo.svg"
      width="42px"
    />
     EditableText
  </h2>
  <div
    className="well well-lg"
  >
    Used on Glossary page and modals for editable glossary terms.
  </div>
  <input
    aria-label={undefined}
    autoComplete={undefined}
    autoFocus={false}
    className="textInput"
    id={undefined}
    onBlur={[Function]}
    onChange={undefined}
    onFocus={[Function]}
    onKeyDown={undefined}
    onSelect={undefined}
    placeholder="Add a description…"
    readOnly={false}
    type={undefined}
    value="Test text"
  />
  <hr />
  <h3>
    Props
  </h3>
  <table
    className="table table-striped table-bordered table-condensed table-hover"
  >
    <thead>
      <tr>
        <th>
          Name
        </th>
        <th>
          Type
        </th>
        <th>
          Default
        </th>
        <th>
          Description
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          children
        </td>
        <td>
          string
        </td>
        <td />
        <td>
          String value for this text field
        </td>
      </tr>
      <tr>
        <td>
          editable
        </td>
        <td>
          boolean
        </td>
        <td>
          false
        </td>
        <td>
          Toggle whether the text field is in editable or not.
        </td>
      </tr>
      <tr>
        <td>
          editing
        </td>
        <td>
          boolean
        </td>
        <td>
          false
        </td>
        <td>
          Toggle whether the text field is in editing mode or not.
        </td>
      </tr>
      <tr>
        <td>
          placeholder
        </td>
        <td>
          string
        </td>
        <td />
        <td>
          Field placeholder text
        </td>
      </tr>
      <tr>
        <td>
          emptyReadOnlyText
        </td>
        <td>
          string
        </td>
        <td />
        <td>
          String to display if it is editable and children is empty and there is not placeholder
        </td>
      </tr>
      <tr>
        <td>
          title
        </td>
        <td>
          string
        </td>
        <td />
        <td>
          Field tooltip
        </td>
      </tr>
    </tbody>
  </table>
</span>
`;

exports[`Frontend Storyshots EditableText not editing 1`] = `
<span>
  <h2>
    <img
      src="https://upload.wikimedia.org/wikipedia/commons/4/49/Zanata-Logo.svg"
      width="42px"
    />
     EditableText - disabled
  </h2>
  <div
    className="textInput textState text row"
    onClick={[Function]}
    title={undefined}
  >
    Test text
  </div>
</span>
`;

exports[`Frontend Storyshots Form default 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Forms
  </h2>
  <div
    className="well well-lg"
  >
    <ul>
      <li>
        <a
          href="https://react-bootstrap.github.io/components.html#forms"
        >
          Props for react-boostrap Form component
        </a>
      </li>
    </ul>
  </div>
  <form
    className=""
  >
    <div
      className="form-group"
    >
      <input
        className="form-control"
        id={undefined}
        placeholder="Text"
        type="text"
      />
      <input
        className="form-control"
        disabled={true}
        id={undefined}
        placeholder="disabled"
        type="text"
      />
    </div>
    <div
      className="form-group form-group-lg"
    >
      <input
        className="form-control"
        id={undefined}
        placeholder="large"
        type="text"
      />
    </div>
    <div
      className="form-group form-group-sm"
    >
      <input
        className="form-control"
        id={undefined}
        placeholder="small"
        type="text"
      />
    </div>
  </form>
  <hr />
  <h3>
    Input sizes
  </h3>
  <p>
    Use 
    <code>
      bsSize
    </code>
     on 
    <code>
      FormGroup
    </code>
     or 
    <code>
      InputGroup
    </code>
     to change the size of inputs. It also works with add-ons and most other options.
  </p>
</span>
`;

exports[`Frontend Storyshots Form validation states 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Form validation states
  </h2>
  <div
    className="well well-lg"
  >
    Set validationState to one of 'success', 'warning' or 'error' to show validation state. Set 
    <code>
      validationState
    </code>
     to null (or undefined) to hide validation state. Add 
    <code>
      FormControl.Feedback
    </code>
     for a feedback icon when validation state is set.
  </div>
  <form
    className=""
  >
    <div
      className="form-group has-success"
    >
      <label
        className="control-label"
        htmlFor="formValidationSuccess1"
      >
        Input with success
      </label>
      <input
        className="form-control"
        id="formValidationSuccess1"
        type="text"
      />
    </div>
    <div
      className="form-group has-warning"
    >
      <label
        className="control-label"
        htmlFor="formValidationWarning1"
      >
        Input with warning
      </label>
      <input
        className="form-control"
        id="formValidationWarning1"
        type="text"
      />
    </div>
    <div
      className="form-group has-error"
    >
      <label
        className="control-label"
        htmlFor="formValidationError1"
      >
        Input with error
      </label>
      <input
        className="form-control"
        id="formValidationError1"
        type="text"
      />
    </div>
    <div
      className="form-group has-feedback has-warning"
    >
      <label
        className="control-label"
        htmlFor="formValidationWarning3"
      >
        Input group with warning
      </label>
      <span
        className="input-group"
      >
        <span
          className="input-group-addon"
        >
          @
        </span>
        <input
          className="form-control"
          id="formValidationWarning3"
          type="text"
        />
      </span>
      <span
        className="form-control-feedback glyphicon glyphicon-warning-sign"
      />
    </div>
  </form>
  <h3>
    Checkboxes and radios
  </h3>
  <div
    className="checkbox has-success"
    style={undefined}
  >
    <label
      title=""
    >
      <input
        disabled={false}
        type="checkbox"
      />
      Checkbox with success
    </label>
  </div>
  <div
    className="radio has-warning"
    style={undefined}
  >
    <label
      title=""
    >
      <input
        disabled={false}
        type="radio"
      />
      Radio with warning
    </label>
  </div>
  <div
    className="checkbox has-error"
    style={undefined}
  >
    <label
      title=""
    >
      <input
        disabled={false}
        type="checkbox"
      />
      Checkbox with error
    </label>
  </div>
</span>
`;

exports[`Frontend Storyshots Foundation colours 1`] = `
<span>
  <h2>
    Main colors
  </h2>
  <small>
    Hover for hexcode
  </small>
  <br />
  <div
    className="sg-color sg-brand-primary sg-lg"
  >
    <span
      className="sg-color-swatch"
    >
      <span
        className="sg-animated"
      >
        #03A6D7
      </span>
    </span>
  </div>
  <div
    className="sg-color sg-gray-lighter sg-lg"
  >
    <span
      className="sg-color-swatch"
    >
      <span
        className="sg-animated"
      >
        #546677
      </span>
    </span>
  </div>
  <div
    className="sg-color sg-gray-light sg-lg"
  >
    <span
      className="sg-color-swatch"
    >
      <span
        className="sg-animated"
      >
        #629BAC
      </span>
    </span>
  </div>
  <div
    className="sg-color sg-muted sg-lg"
  >
    <span
      className="sg-color-swatch"
    >
      <span
        className="sg-animated"
      >
        #A2B3BE
      </span>
    </span>
  </div>
  <div
    className="sg-color sg-neutral sg-lg"
  >
    <span
      className="sg-color-swatch"
    >
      <span
        className="sg-animated"
      >
        #BDD4DC
      </span>
    </span>
  </div>
  <div
    className="sg-color sg-gray-dark sg-lg"
  >
    <span
      className="sg-color-swatch"
    >
      <span
        className="sg-animated"
      >
        #F5F5F5
      </span>
    </span>
  </div>
  <div
    className="sg-color sg-gray-darker sg-lg"
  >
    <span
      className="sg-color-swatch"
    >
      <span
        className="sg-animated"
      >
        #DDDDDD
      </span>
    </span>
  </div>
  <div
    className="sg-color sg-gray-darkest sg-lg"
  >
    <span
      className="sg-color-swatch"
    >
      <span
        className="sg-animated"
      >
        #555555
      </span>
    </span>
  </div>
  <h2>
    Status colours
  </h2>
  <div
    className="sg-color sg-brand-success"
  >
    <span
      className="sg-color-swatch"
    >
      <span
        className="sg-animated"
      >
        #62C876
      </span>
    </span>
  </div>
  <div
    className="sg-color sg-brand-unsure"
  >
    <span
      className="sg-color-swatch"
    >
      <span
        className="sg-animated"
      >
        #E9DD00
      </span>
    </span>
  </div>
  <div
    className="sg-color sg-brand-warning"
  >
    <span
      className="sg-color-swatch"
    >
      <span
        className="sg-animated"
      >
        #FFA800
      </span>
    </span>
  </div>
  <div
    className="sg-color sg-brand-danger"
  >
    <span
      className="sg-color-swatch"
    >
      <span
        className="sg-animated"
      >
        #FF3B3D
      </span>
    </span>
  </div>
  <div
    className="sg-color sg-brand-info"
  >
    <span
      className="sg-color-swatch"
    >
      <span
        className="sg-animated"
      >
        #4E9FDD
      </span>
    </span>
  </div>
</span>
`;

exports[`Frontend Storyshots Foundation grid 1`] = `
<span>
  <h2>
    Grids and flexbox
  </h2>
  <div
    className="well well-lg"
  >
     Grid being replaced with 
    <strong>
      flexbox
    </strong>
     throughout frontend where it provides a more suitable alternative to the restrictive 12 column grid layout
    <ul>
      <li>
        <a
          href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/"
        >
          https://css-tricks.com/snippets/css/a-guide-to-flexbox/
        </a>
      </li>
      <li>
        <a
          href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox"
        >
          https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
        </a>
      </li>
    </ul>
  </div>
  <div
    className="container"
  >
    <div
      className="row"
    >
      <div
        className="showGrid col-md-8 col-xs-12"
      >
        <code>
          &lt;
          Col xs={12} md={8}
           /&gt;
        </code>
      </div>
      <div
        className="showGrid col-md-4 col-xs-6"
      >
        <code>
          &lt;
          Col xs={6} md={4}
           /&gt;
        </code>
      </div>
    </div>
  </div>
  <br />
  <div
    className="panel panel-warning"
    id={undefined}
  >
    <div
      className="panel-heading"
    >
      Future improvements
    </div>
    <div
      className="panel-body"
    >
      <h4>
         
        <div
          className="checkbox"
          style={undefined}
        >
          <label
            title=""
          >
            <input
              disabled={false}
              readOnly={true}
              type="checkbox"
            />
            CSS Grid
          </label>
        </div>
      </h4>
      <p>
        The 
        <strong>
          CSS Grid
        </strong>
         will be a good future replacement for the bootstrap columns/flexbox combinations, but currently browser support is below 80%. (
        <a
          href="https://caniuse.com/#feat=css-grid"
        >
          CanIUse
        </a>
        )
      </p>
      <ul>
        <li>
          <a
            href="https://css-tricks.com/snippets/css/complete-guide-grid/"
          >
            https://css-tricks.com/snippets/css/complete-guide-grid/
          </a>
        </li>
        <li>
          <a
            href="https://open.nytimes.com/bootstrap-to-css-grid-87b3f5f830e4"
          >
            https://open.nytimes.com/bootstrap-to-css-grid-87b3f5f830e4
          </a>
        </li>
      </ul>
      <hr />
      <h4>
         
        <div
          className="checkbox"
          style={undefined}
        >
          <label
            title=""
          >
            <input
              disabled={false}
              readOnly={true}
              type="checkbox"
            />
            Utility classes
          </label>
        </div>
      </h4>
      <p>
        Add more css utility classes so that developers can add minor changes such as padding without working with the style.less file
      </p>
    </div>
  </div>
</span>
`;

exports[`Frontend Storyshots Foundation typography 1`] = `
<span>
  <h2>
    Font stack
  </h2>
  <div
    className="well"
  >
    <code>
      'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    </code>
  </div>
  <hr />
  <h2>
    Headings
  </h2>
  <h1
    className="page-header"
  >
    Page Header 
    <small>
      With Small Text
    </small>
  </h1>
  <h1>
    h1. Bootstrap heading 
    <small>
      Secondary text
    </small>
  </h1>
  <h2>
    h2. Bootstrap heading 
    <small>
      Secondary text
    </small>
  </h2>
  <h3>
    h3. Bootstrap heading 
    <small>
      Secondary text
    </small>
  </h3>
  <h4>
    h4. Bootstrap heading 
    <small>
      Secondary text
    </small>
  </h4>
  <h5>
    h5. Bootstrap heading 
    <small>
      Secondary text
    </small>
  </h5>
  <h6>
    h6. Bootstrap heading 
    <small>
      Secondary text
    </small>
  </h6>
  <hr />
  <h2>
    Text styles
  </h2>
  <p
    className="lead"
  >
    Lead paragraph: vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
  </p>
  <p>
    Nullam quis risus eget 
    <a
      href="#"
    >
      urna mollis ornare
    </a>
    vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
  </p>
  <p>
    <small>
      This line of text is meant to be treated as fine print.
    </small>
  </p>
  <p>
    The following snippet of text is 
    <strong>
      rendered as bold text
    </strong>
    .
  </p>
  <p>
    The following snippet of text is 
    <em>
      rendered as italicized text
    </em>
    .
  </p>
  <p>
    An abbreviation of the word attribute is
    <abbr
      title="attribute"
    >
      attr
    </abbr>
    .
  </p>
  <p
    className="u-textLeft"
  >
    Left aligned text.
  </p>
  <p
    className="u-textCenter"
  >
    Center aligned text.
  </p>
  <p
    className="u-textRight"
  >
    Right aligned text.
  </p>
  <p
    className="u-textJustify"
  >
    Justified text.
  </p>
  <p
    className="u-textMuted"
  >
    Muted: Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
  </p>
  <p
    className="u-textPrimary"
  >
    Primary: Nullam id dolor id nibh ultricies vehicula ut id elit.
  </p>
  <p
    className="u-textWarning"
  >
    Warning: Etiam porta sem malesuada magna mollis euismod.
  </p>
  <p
    className="u-textDanger"
  >
    Danger: Donec ullamcorper nulla non metus auctor fringilla.
  </p>
  <p
    className="u-textSuccess"
  >
    Success: Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
  </p>
  <p
    className="u-textInfo"
  >
    Info: Maecenas sed diam eget risus varius blandit sit amet non magna.
  </p>
</span>
`;

exports[`Frontend Storyshots Icon default 1`] = `
<span>
  <h2>
    <img
      src="https://upload.wikimedia.org/wikipedia/commons/4/49/Zanata-Logo.svg"
      width="42px"
    />
     Icons
  </h2>
  <div
    className="well well-lg"
  >
    Icons for use throughout frontend. Use 
    <code>
      className
    </code>
     prop to set size.
  </div>
  <hr />
  <h3>
    Props
  </h3>
  <table
    className="table table-striped table-bordered table-condensed table-hover"
  >
    <thead>
      <tr>
        <th>
          Name
        </th>
        <th>
          Type
        </th>
        <th>
          Default
        </th>
        <th>
          Description
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          name
        </td>
        <td>
          string
        </td>
        <td />
        <td>
          Icon name
        </td>
      </tr>
      <tr>
        <td>
          className
        </td>
        <td>
          string
        </td>
        <td />
        <td>
          Icon size
        </td>
      </tr>
    </tbody>
  </table>
  <hr />
  <span
    className="col-xs-12"
  >
    <h3>
      Icon list
    </h3>
    <p
      title="admin"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-admin\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      admin
    </p>
    <p
      title="all"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-all\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      all
    </p>
    <p
      title="assign"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-assign\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      assign
    </p>
    <p
      title="attach"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-attach\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      attach
    </p>
    <p
      title="block"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-block\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      block
    </p>
    <p
      title="chevron-down-double"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-chevron-down-double\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      chevron-down-double
    </p>
    <p
      title="chevron-down"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-chevron-down\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      chevron-down
    </p>
    <p
      title="chevron-left"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-chevron-left\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      chevron-left
    </p>
    <p
      title="chevron-right"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-chevron-right\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      chevron-right
    </p>
    <p
      title="chevron-up-double"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-chevron-up-double\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      chevron-up-double
    </p>
    <p
      title="chevron-up"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-chevron-up\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      chevron-up
    </p>
    <p
      title="circle"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-circle\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      circle
    </p>
    <p
      title="clock"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-clock\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      clock
    </p>
    <p
      title="code"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-code\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      code
    </p>
    <p
      title="comment"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-comment\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      comment
    </p>
    <p
      title="copy"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-copy\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      copy
    </p>
    <p
      title="cross-circle"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-cross-circle\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      cross-circle
    </p>
    <p
      title="cross"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-cross\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      cross
    </p>
    <p
      title="dashboard"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-dashboard\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      dashboard
    </p>
    <p
      title="document"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-document\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      document
    </p>
    <p
      title="dot"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-dot\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      dot
    </p>
    <p
      title="download"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-download\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      download
    </p>
    <p
      title="edit"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-edit\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      edit
    </p>
    <p
      title="ellipsis"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-ellipsis\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      ellipsis
    </p>
    <p
      title="export"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-export\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      export
    </p>
    <p
      title="external-link"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-external-link\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      external-link
    </p>
    <p
      title="filter"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-filter\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      filter
    </p>
    <p
      title="folder"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-folder\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      folder
    </p>
    <p
      title="glossary"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-glossary\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      glossary
    </p>
    <p
      title="help"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-help\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      help
    </p>
    <p
      title="history"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-history\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      history
    </p>
    <p
      title="import"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-import\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      import
    </p>
    <p
      title="inbox"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-inbox\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      inbox
    </p>
    <p
      title="info"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-info\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      info
    </p>
    <p
      title="keyboard"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-keyboard\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      keyboard
    </p>
    <p
      title="language"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-language\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      language
    </p>
    <p
      title="link"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-link\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      link
    </p>
    <p
      title="location"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-location\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      location
    </p>
    <p
      title="locked"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-locked\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      locked
    </p>
    <p
      title="logout"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-logout\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      logout
    </p>
    <p
      title="mail"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-mail\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      mail
    </p>
    <p
      title="maintain"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-maintain\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      maintain
    </p>
    <p
      title="menu"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-menu\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      menu
    </p>
    <p
      title="minus"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-minus\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      minus
    </p>
    <p
      title="next"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-next\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      next
    </p>
    <p
      title="notification"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-notification\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      notification
    </p>
    <p
      title="piestats"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-piestats\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      piestats
    </p>
    <p
      title="plus"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-plus\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      plus
    </p>
    <p
      title="previous"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-previous\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      previous
    </p>
    <p
      title="project"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-project\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      project
    </p>
    <p
      title="refresh"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-refresh\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      refresh
    </p>
    <p
      title="review"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-review\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      review
    </p>
    <p
      title="search"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-search\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      search
    </p>
    <p
      title="servmon"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-servmon\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      servmon
    </p>
    <p
      title="settings"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-settings\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      settings
    </p>
    <p
      title="star-outline"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-star-outline\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      star-outline
    </p>
    <p
      title="star"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-star\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      star
    </p>
    <p
      title="statistics"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-statistics\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      statistics
    </p>
    <p
      title="suggestions"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-suggestions\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      suggestions
    </p>
    <p
      title="tick-circle"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-tick-circle\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      tick-circle
    </p>
    <p
      title="tick"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-tick\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      tick
    </p>
    <p
      title="tm"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-tm\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      tm
    </p>
    <p
      title="translate"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-translate\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      translate
    </p>
    <p
      title="trash"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-trash\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      trash
    </p>
    <p
      title="undo"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-undo\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      undo
    </p>
    <p
      title="unlocked"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-unlocked\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      unlocked
    </p>
    <p
      title="upload"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-upload\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      upload
    </p>
    <p
      title="user"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-user\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      user
    </p>
    <p
      title="users"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-users\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      users
    </p>
    <p
      title="version"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-version\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      version
    </p>
    <p
      title="warning"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-warning\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      warning
    </p>
    <p
      title="zanata"
    >
      <span
        className=""
      >
        <svg
          className="s2"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-zanata\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       
      zanata
    </p>
  </span>
  <code>
    className="s1" name=name
  </code>
</span>
`;

exports[`Frontend Storyshots Icon sizes 1`] = `
<span>
  <h2>
    <img
      src="https://upload.wikimedia.org/wikipedia/commons/4/49/Zanata-Logo.svg"
      width="42px"
    />
     Icon sizes
  </h2>
  <h3>
    Size n2
  </h3>
  <span
    title="admin"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-admin\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="all"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-all\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="assign"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-assign\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="attach"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-attach\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="block"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-block\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-down-double"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-down-double\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-down"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-down\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-left"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-left\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-right"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-right\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-up-double"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-up-double\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-up"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-up\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="circle"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-circle\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="clock"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-clock\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="code"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-code\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="comment"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-comment\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="copy"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-copy\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="cross-circle"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-cross-circle\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="cross"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-cross\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="dashboard"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-dashboard\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="document"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-document\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="dot"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-dot\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="download"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-download\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="edit"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-edit\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="ellipsis"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-ellipsis\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="export"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-export\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="external-link"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-external-link\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="filter"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-filter\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="folder"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-folder\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="glossary"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-glossary\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="help"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-help\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="history"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-history\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="import"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-import\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="inbox"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-inbox\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="info"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-info\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="keyboard"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-keyboard\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="language"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-language\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="link"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-link\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="location"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-location\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="locked"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-locked\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="logout"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-logout\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="mail"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-mail\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="maintain"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-maintain\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="menu"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-menu\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="minus"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-minus\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="next"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-next\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="notification"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-notification\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="piestats"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-piestats\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="plus"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-plus\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="previous"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-previous\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="project"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-project\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="refresh"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-refresh\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="review"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-review\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="search"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-search\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="servmon"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-servmon\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="settings"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-settings\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="star-outline"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-star-outline\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="star"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-star\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="statistics"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-statistics\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="suggestions"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-suggestions\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="tick-circle"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-tick-circle\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="tick"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-tick\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="tm"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-tm\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="translate"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-translate\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="trash"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-trash\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="undo"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-undo\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="unlocked"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-unlocked\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="upload"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-upload\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="user"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-user\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="users"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-users\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="version"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-version\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="warning"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-warning\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="zanata"
  >
     
    <span
      className=""
    >
      <svg
        className="n2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-zanata\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <p>
    <code>
      className="n2" name=name
    </code>
  </p>
  <h3>
    Size n1
  </h3>
  <span
    title="admin"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-admin\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="all"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-all\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="assign"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-assign\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="attach"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-attach\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="block"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-block\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-down-double"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-down-double\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-down"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-down\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-left"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-left\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-right"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-right\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-up-double"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-up-double\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-up"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-up\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="circle"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-circle\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="clock"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-clock\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="code"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-code\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="comment"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-comment\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="copy"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-copy\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="cross-circle"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-cross-circle\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="cross"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-cross\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="dashboard"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-dashboard\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="document"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-document\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="dot"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-dot\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="download"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-download\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="edit"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-edit\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="ellipsis"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-ellipsis\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="export"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-export\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="external-link"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-external-link\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="filter"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-filter\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="folder"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-folder\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="glossary"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-glossary\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="help"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-help\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="history"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-history\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="import"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-import\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="inbox"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-inbox\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="info"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-info\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="keyboard"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-keyboard\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="language"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-language\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="link"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-link\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="location"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-location\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="locked"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-locked\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="logout"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-logout\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="mail"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-mail\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="maintain"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-maintain\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="menu"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-menu\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="minus"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-minus\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="next"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-next\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="notification"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-notification\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="piestats"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-piestats\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="plus"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-plus\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="previous"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-previous\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="project"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-project\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="refresh"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-refresh\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="review"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-review\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="search"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-search\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="servmon"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-servmon\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="settings"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-settings\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="star-outline"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-star-outline\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="star"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-star\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="statistics"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-statistics\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="suggestions"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-suggestions\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="tick-circle"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-tick-circle\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="tick"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-tick\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="tm"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-tm\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="translate"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-translate\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="trash"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-trash\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="undo"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-undo\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="unlocked"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-unlocked\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="upload"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-upload\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="user"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-user\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="users"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-users\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="version"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-version\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="warning"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-warning\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="zanata"
  >
     
    <span
      className=""
    >
      <svg
        className="n1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-zanata\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <p>
    <code>
      className="n1" name=name
    </code>
  </p>
  <h3>
    Size s0
  </h3>
  <span
    title="admin"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-admin\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="all"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-all\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="assign"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-assign\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="attach"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-attach\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="block"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-block\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-down-double"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-down-double\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-down"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-down\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-left"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-left\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-right"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-right\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-up-double"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-up-double\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-up"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-up\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="circle"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-circle\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="clock"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-clock\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="code"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-code\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="comment"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-comment\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="copy"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-copy\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="cross-circle"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-cross-circle\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="cross"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-cross\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="dashboard"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-dashboard\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="document"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-document\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="dot"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-dot\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="download"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-download\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="edit"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-edit\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="ellipsis"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-ellipsis\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="export"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-export\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="external-link"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-external-link\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="filter"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-filter\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="folder"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-folder\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="glossary"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-glossary\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="help"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-help\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="history"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-history\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="import"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-import\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="inbox"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-inbox\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="info"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-info\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="keyboard"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-keyboard\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="language"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-language\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="link"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-link\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="location"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-location\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="locked"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-locked\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="logout"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-logout\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="mail"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-mail\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="maintain"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-maintain\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="menu"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-menu\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="minus"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-minus\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="next"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-next\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="notification"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-notification\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="piestats"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-piestats\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="plus"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-plus\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="previous"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-previous\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="project"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-project\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="refresh"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-refresh\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="review"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-review\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="search"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-search\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="servmon"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-servmon\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="settings"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-settings\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="star-outline"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-star-outline\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="star"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-star\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="statistics"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-statistics\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="suggestions"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-suggestions\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="tick-circle"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-tick-circle\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="tick"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-tick\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="tm"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-tm\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="translate"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-translate\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="trash"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-trash\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="undo"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-undo\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="unlocked"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-unlocked\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="upload"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-upload\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="user"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-user\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="users"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-users\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="version"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-version\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="warning"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-warning\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="zanata"
  >
     
    <span
      className=""
    >
      <svg
        className="s0"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-zanata\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <p>
    <code>
      className="s0" name=name
    </code>
  </p>
  <h3>
    Size s1
  </h3>
  <span
    title="admin"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-admin\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="all"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-all\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="assign"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-assign\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="attach"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-attach\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="block"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-block\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-down-double"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-down-double\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-down"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-down\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-left"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-left\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-right"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-right\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-up-double"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-up-double\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-up"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-up\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="circle"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-circle\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="clock"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-clock\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="code"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-code\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="comment"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-comment\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="copy"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-copy\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="cross-circle"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-cross-circle\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="cross"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-cross\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="dashboard"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-dashboard\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="document"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-document\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="dot"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-dot\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="download"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-download\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="edit"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-edit\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="ellipsis"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-ellipsis\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="export"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-export\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="external-link"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-external-link\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="filter"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-filter\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="folder"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-folder\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="glossary"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-glossary\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="help"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-help\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="history"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-history\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="import"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-import\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="inbox"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-inbox\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="info"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-info\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="keyboard"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-keyboard\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="language"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-language\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="link"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-link\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="location"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-location\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="locked"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-locked\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="logout"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-logout\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="mail"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-mail\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="maintain"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-maintain\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="menu"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-menu\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="minus"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-minus\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="next"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-next\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="notification"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-notification\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="piestats"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-piestats\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="plus"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-plus\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="previous"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-previous\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="project"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-project\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="refresh"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-refresh\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="review"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-review\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="search"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-search\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="servmon"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-servmon\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="settings"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-settings\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="star-outline"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-star-outline\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="star"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-star\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="statistics"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-statistics\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="suggestions"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-suggestions\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="tick-circle"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-tick-circle\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="tick"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-tick\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="tm"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-tm\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="translate"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-translate\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="trash"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-trash\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="undo"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-undo\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="unlocked"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-unlocked\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="upload"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-upload\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="user"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-user\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="users"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-users\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="version"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-version\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="warning"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-warning\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="zanata"
  >
     
    <span
      className=""
    >
      <svg
        className="s1"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-zanata\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <p>
    <code>
      className="s1" name=name
    </code>
  </p>
  <h3>
    Size s2
  </h3>
  <span
    title="admin"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-admin\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="all"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-all\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="assign"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-assign\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="attach"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-attach\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="block"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-block\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-down-double"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-down-double\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-down"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-down\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-left"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-left\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-right"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-right\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-up-double"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-up-double\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-up"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-up\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="circle"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-circle\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="clock"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-clock\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="code"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-code\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="comment"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-comment\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="copy"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-copy\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="cross-circle"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-cross-circle\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="cross"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-cross\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="dashboard"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-dashboard\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="document"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-document\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="dot"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-dot\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="download"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-download\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="edit"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-edit\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="ellipsis"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-ellipsis\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="export"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-export\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="external-link"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-external-link\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="filter"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-filter\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="folder"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-folder\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="glossary"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-glossary\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="help"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-help\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="history"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-history\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="import"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-import\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="inbox"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-inbox\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="info"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-info\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="keyboard"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-keyboard\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="language"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-language\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="link"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-link\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="location"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-location\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="locked"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-locked\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="logout"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-logout\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="mail"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-mail\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="maintain"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-maintain\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="menu"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-menu\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="minus"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-minus\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="next"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-next\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="notification"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-notification\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="piestats"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-piestats\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="plus"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-plus\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="previous"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-previous\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="project"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-project\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="refresh"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-refresh\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="review"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-review\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="search"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-search\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="servmon"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-servmon\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="settings"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-settings\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="star-outline"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-star-outline\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="star"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-star\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="statistics"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-statistics\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="suggestions"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-suggestions\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="tick-circle"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-tick-circle\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="tick"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-tick\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="tm"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-tm\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="translate"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-translate\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="trash"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-trash\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="undo"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-undo\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="unlocked"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-unlocked\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="upload"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-upload\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="user"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-user\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="users"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-users\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="version"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-version\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="warning"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-warning\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="zanata"
  >
     
    <span
      className=""
    >
      <svg
        className="s2"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-zanata\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <p>
    <code>
      className="s2" name=name
    </code>
  </p>
  <h3>
    Size s3
  </h3>
  <span
    title="admin"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-admin\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="all"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-all\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="assign"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-assign\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="attach"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-attach\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="block"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-block\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-down-double"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-down-double\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-down"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-down\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-left"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-left\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-right"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-right\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-up-double"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-up-double\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-up"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-up\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="circle"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-circle\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="clock"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-clock\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="code"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-code\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="comment"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-comment\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="copy"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-copy\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="cross-circle"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-cross-circle\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="cross"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-cross\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="dashboard"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-dashboard\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="document"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-document\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="dot"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-dot\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="download"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-download\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="edit"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-edit\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="ellipsis"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-ellipsis\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="export"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-export\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="external-link"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-external-link\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="filter"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-filter\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="folder"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-folder\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="glossary"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-glossary\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="help"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-help\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="history"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-history\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="import"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-import\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="inbox"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-inbox\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="info"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-info\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="keyboard"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-keyboard\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="language"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-language\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="link"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-link\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="location"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-location\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="locked"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-locked\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="logout"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-logout\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="mail"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-mail\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="maintain"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-maintain\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="menu"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-menu\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="minus"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-minus\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="next"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-next\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="notification"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-notification\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="piestats"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-piestats\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="plus"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-plus\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="previous"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-previous\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="project"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-project\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="refresh"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-refresh\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="review"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-review\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="search"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-search\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="servmon"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-servmon\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="settings"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-settings\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="star-outline"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-star-outline\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="star"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-star\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="statistics"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-statistics\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="suggestions"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-suggestions\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="tick-circle"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-tick-circle\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="tick"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-tick\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="tm"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-tm\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="translate"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-translate\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="trash"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-trash\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="undo"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-undo\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="unlocked"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-unlocked\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="upload"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-upload\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="user"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-user\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="users"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-users\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="version"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-version\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="warning"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-warning\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="zanata"
  >
     
    <span
      className=""
    >
      <svg
        className="s3"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-zanata\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <p>
    <code>
      className="s3" name=name
    </code>
  </p>
  <h3>
    Size s4
  </h3>
  <span
    title="admin"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-admin\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="all"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-all\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="assign"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-assign\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="attach"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-attach\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="block"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-block\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-down-double"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-down-double\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-down"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-down\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-left"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-left\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-right"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-right\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-up-double"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-up-double\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="chevron-up"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-chevron-up\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="circle"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-circle\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="clock"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-clock\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="code"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-code\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="comment"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-comment\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="copy"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-copy\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="cross-circle"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-cross-circle\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="cross"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-cross\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="dashboard"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-dashboard\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="document"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-document\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="dot"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-dot\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="download"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-download\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="edit"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-edit\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="ellipsis"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-ellipsis\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="export"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-export\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="external-link"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-external-link\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="filter"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-filter\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="folder"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-folder\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="glossary"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-glossary\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="help"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-help\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="history"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-history\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="import"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-import\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="inbox"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-inbox\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="info"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-info\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="keyboard"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-keyboard\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="language"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-language\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="link"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-link\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="location"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-location\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="locked"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-locked\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="logout"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-logout\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="mail"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-mail\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="maintain"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-maintain\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="menu"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-menu\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="minus"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-minus\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="next"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-next\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="notification"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-notification\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="piestats"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-piestats\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="plus"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-plus\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="previous"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-previous\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="project"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-project\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="refresh"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-refresh\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="review"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-review\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="search"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-search\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="servmon"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-servmon\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="settings"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-settings\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="star-outline"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-star-outline\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="star"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-star\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="statistics"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-statistics\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="suggestions"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-suggestions\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="tick-circle"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-tick-circle\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="tick"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-tick\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="tm"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-tm\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="translate"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-translate\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="trash"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-trash\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="undo"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-undo\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="unlocked"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-unlocked\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="upload"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-upload\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="user"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-user\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="users"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-users\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="version"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-version\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="warning"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-warning\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <span
    title="zanata"
  >
     
    <span
      className=""
    >
      <svg
        className="s4"
        dangerouslySetInnerHTML={
          Object {
            "__html": "<use xlink:href=\\"#Icon-zanata\\" />",
          }
        }
        style={
          Object {
            "fill": "currentColor",
          }
        }
      />
    </span>
     
  </span>
  <p>
    <code>
      className="s4" name=name
    </code>
  </p>
</span>
`;

exports[`Frontend Storyshots Label in headings 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Labels in headings
  </h2>
  <div
    className="well well-lg"
  >
    Use labels to highlight information.
  </div>
  <h1>
    Label 
    <span
      className="label label-default"
    >
      New
    </span>
  </h1>
  <h2>
    Label 
    <span
      className="label label-default"
    >
      New
    </span>
  </h2>
  <h3>
    Label 
    <span
      className="label label-default"
    >
      New
    </span>
  </h3>
  <h4>
    Label 
    <span
      className="label label-default"
    >
      New
    </span>
  </h4>
  <h5>
    Label 
    <span
      className="label label-default"
    >
      New
    </span>
  </h5>
  <p>
    Label 
    <span
      className="label label-default"
    >
      New
    </span>
  </p>
  <hr />
  <h3>
    Props
  </h3>
  <table
    className="table table-striped table-bordered table-condensed table-hover"
  >
    <thead>
      <tr>
        <th>
          Name
        </th>
        <th>
          Type
        </th>
        <th>
          Default
        </th>
        <th>
          Description
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          bsClass
        </td>
        <td>
          string
        </td>
        <td>
          'label'
        </td>
        <td>
          Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
        </td>
      </tr>
      <tr>
        <td>
          bsStyle
        </td>
        <td>
          one of: 
          <code>
            "success"
          </code>
          , 
          <code>
            "warning"
          </code>
          , 
          <code>
            "danger"
          </code>
          , 
          <code>
            "info"
          </code>
          , 
          <code>
            "default"
          </code>
          , 
          <code>
            "primary"
          </code>
          , 
          <code>
            "link"
          </code>
        </td>
        <td>
          'default'
        </td>
        <td>
          Component visual or contextual style variants.
        </td>
      </tr>
    </tbody>
  </table>
</span>
`;

exports[`Frontend Storyshots Label validation states 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Label validation states
  </h2>
  <span
    className="label label-default"
  >
    Default
  </span>
  <p>
    <code>
      bsStyle="default"
    </code>
  </p>
  <span
    className="label label-primary"
  >
    Primary
  </span>
  <p>
    <code>
      bsStyle="primary"
    </code>
  </p>
  <span
    className="label label-success"
  >
    Success
  </span>
  <p>
    <code>
      bsStyle="success"
    </code>
  </p>
  <span
    className="label label-warning"
  >
    Warning
  </span>
  <p>
    <code>
      bsStyle="warning"
    </code>
  </p>
  <span
    className="label label-danger"
  >
    Danger
  </span>
  <p>
    <code>
      bsStyle="danger"
    </code>
  </p>
</span>
`;

exports[`Frontend Storyshots Link link page not in frontend app 1`] = `
<span>
  <h2>
    <img
      src="https://upload.wikimedia.org/wikipedia/commons/4/49/Zanata-Logo.svg"
      width="42px"
    />
     Link *not* in frontend
  </h2>
  <div
    className="well well-lg"
  >
    Use this link colour anywhere outside of frontend. ie. Editor, zanata.org
  </div>
  <a
    href="http://zanata.org/language/view/ja"
  >
    Japanese
  </a>
</span>
`;

exports[`Frontend Storyshots Link link within frontend app 1`] = `
<span>
  <h2>
    <img
      src="https://upload.wikimedia.org/wikipedia/commons/4/49/Zanata-Logo.svg"
      width="42px"
    />
     Link in frontend
  </h2>
  <div
    className="well well-lg"
  >
     Common link component which generates 
    <code>
      a href
    </code>
     or in-page navigation link based on useHref.
  </div>
  <a
    onClick={[Function]}
    style={Object {}}
  >
    Languages
  </a>
  <hr />
  <h3>
    Props
  </h3>
  <table
    className="table table-striped table-bordered table-condensed table-hover"
  >
    <thead>
      <tr>
        <th>
          Name
        </th>
        <th>
          Type
        </th>
        <th>
          Default
        </th>
        <th>
          Description
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          id
        </td>
        <td>
          string
        </td>
        <td />
        <td>
          ID attribute
        </td>
      </tr>
      <tr>
        <td>
          link
        </td>
        <td>
          string
        </td>
        <td />
        <td>
          HTML url or location#hash
        </td>
      </tr>
      <tr>
        <td>
          useHref
        </td>
        <td>
          bool
        </td>
        <td>
          false
        </td>
        <td>
          Toggle whether to use 
          <code>
            a href
          </code>
           or in-page navigation
        </td>
      </tr>
      <tr>
        <td>
          children
        </td>
        <td>
          node
        </td>
        <td />
        <td />
      </tr>
    </tbody>
  </table>
</span>
`;

exports[`Frontend Storyshots List group default 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    List group
  </h2>
  <div
    className="well well-lg"
  >
    List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
  </div>
  <ul
    className="list-group"
  >
    <li
      className="list-group-item"
    >
      Item 1
    </li>
    <li
      className="list-group-item"
    >
      Item 2
    </li>
    <li
      className="list-group-item"
    >
      ...
    </li>
  </ul>
  <hr />
  <h3>
    Props
  </h3>
  <h4>
    ListGroup
  </h4>
  <table
    className="table table-striped table-bordered table-condensed table-hover"
  >
    <thead>
      <tr>
        <th>
          Name
        </th>
        <th>
          Type
        </th>
        <th>
          Default
        </th>
        <th>
          Description
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          bsClass
        </td>
        <td>
          string
        </td>
        <td>
          'list-group'
        </td>
        <td>
          Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
        </td>
      </tr>
      <tr>
        <td>
          componentClass
        </td>
        <td>
          elementType
        </td>
        <td />
        <td>
          You can use a custom element type for this component. If not specified, it will be treated as 
          <code>
            'li'
          </code>
           if every child is a non-actionable 
          <code>
            ListGroupItem&gt;
          </code>
          , and 
          <code>
            'div'
          </code>
           otherwise.
        </td>
      </tr>
    </tbody>
  </table>
  <h4>
    ListGroupItem
  </h4>
  <table
    className="table table-striped table-bordered table-condensed table-hover"
  >
    <thead>
      <tr>
        <th>
          Name
        </th>
        <th>
          Type
        </th>
        <th>
          Default
        </th>
        <th>
          Description
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          active
        </td>
        <td>
          any
        </td>
        <td />
        <td />
      </tr>
      <tr>
        <td>
          bsClass
        </td>
        <td>
          string
        </td>
        <td>
          'list-group-item'
        </td>
        <td>
          Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
        </td>
      </tr>
      <tr>
        <td>
          bsStyle
        </td>
        <td>
          one of: 
          <code>
            "success"
          </code>
          , 
          <code>
            "warning"
          </code>
          , 
          <code>
            "danger"
          </code>
          , 
          <code>
            "info"
          </code>
          , 
          <code>
            "default"
          </code>
          , 
          <code>
            "primary"
          </code>
          , 
          <code>
            "link"
          </code>
        </td>
        <td>
          'default'
        </td>
        <td>
          Component visual or contextual style variants.
        </td>
      </tr>
      <tr>
        <td>
          disabled
        </td>
        <td>
          any
        </td>
        <td />
        <td />
      </tr>
      <tr>
        <td>
          header
        </td>
        <td>
          node
        </td>
        <td />
        <td />
      </tr>
      <tr>
        <td>
          href
        </td>
        <td>
          string
        </td>
        <td />
        <td />
      </tr>
      <tr>
        <td>
          listItem
        </td>
        <td>
          boolean
        </td>
        <td>
          false
        </td>
        <td />
      </tr>
      <tr>
        <td>
          onClick
        </td>
        <td>
          function
        </td>
        <td />
        <td />
      </tr>
      <tr>
        <td>
          type
        </td>
        <td>
          string
        </td>
        <td />
        <td />
      </tr>
    </tbody>
  </table>
</span>
`;

exports[`Frontend Storyshots List group with headings 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    With headings
  </h2>
  <div
    className="well well-lg"
  >
    Set the 
    <code>
      header
    </code>
     prop to create a structured item, with a heading and a body area.
  </div>
  <div
    className="list-group"
  >
    <span
      className="list-group-item"
    >
      <h4
        className="list-group-item-heading"
      >
        Heading 1
      </h4>
      <p
        className="list-group-item-text"
      >
        Some body text
      </p>
    </span>
    <a
      className="list-group-item"
      href="#"
    >
      <h4
        className="list-group-item-heading"
      >
        Heading 2
      </h4>
      <p
        className="list-group-item-text"
      >
        Linked item
      </p>
    </a>
  </div>
</span>
`;

exports[`Frontend Storyshots List group with links 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    With links
  </h2>
  <div
    className="well well-lg"
  >
    Set the 
    <code>
      href
    </code>
     or 
    <code>
      onClick
    </code>
     prop on 
    <code>
      ListGroupItem
    </code>
    , to create a linked or clickable element.
  </div>
  <div
    className="list-group"
  >
    <a
      className="list-group-item active"
      href="#"
    >
      Active
    </a>
    <a
      className="list-group-item"
      href="#"
    >
      Link
    </a>
    <a
      className="list-group-item disabled"
      href="#"
    >
      Disabled
    </a>
  </div>
</span>
`;

exports[`Frontend Storyshots LoaderText default 1`] = `
<span>
  <h2>
    <img
      src="https://upload.wikimedia.org/wikipedia/commons/4/49/Zanata-Logo.svg"
      width="42px"
    />
    LoaderText
  </h2>
  <div
    className="well well-lg"
  >
    Use this when there is content that needs to be loaded so that the user is given feedback.
  </div>
  <span
    className="loaderText"
  >
    <span>
      Updating
      <span
        className="loader"
      >
        <span>
          <div
            className=""
            dangerouslySetInnerHTML={
              Object {
                "__html": "<svg class=\\"icon-blank\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 32 32\\"></svg>
",
              }
            }
            style={
              Object {
                "fill": "#546677",
                "height": 64,
                "width": 64,
              }
            }
          />
        </span>
      </span>
    </span>
  </span>
</span>
`;

exports[`Frontend Storyshots Modal TMX export - file prep finished 1`] = `
<div
  className="static-modal"
/>
`;

exports[`Frontend Storyshots Modal TMX export - multiple languages 1`] = `
<div
  className="static-modal"
/>
`;

exports[`Frontend Storyshots Modal TMX export - one language 1`] = `
<div
  className="static-modal"
/>
`;

exports[`Frontend Storyshots Modal TMX export - preparing files 1`] = `
<div
  className="static-modal"
/>
`;

exports[`Frontend Storyshots Modal default 1`] = `
<div
  className="static-modal"
/>
`;

exports[`Frontend Storyshots Notification Error 1`] = `undefined`;

exports[`Frontend Storyshots Notification Info 1`] = `undefined`;

exports[`Frontend Storyshots Notification Warning 1`] = `undefined`;

exports[`Frontend Storyshots Pagination default 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Pagination
  </h2>
  <div
    className="well well-lg"
  >
    Multi-page pagination component. Set 
    <code>
      items
    </code>
     to the number of pages. 
    <code>
      activePage
    </code>
     prop dictates which page is active.
    <ul>
      <li>
        <a
          href="https://react-bootstrap.github.io/components.html#pagination-props"
        >
          Props for react-bootstrap pagination
        </a>
      </li>
    </ul>
  </div>
  <ul
    className="pagination pagination-md"
  >
    <li
      className="active"
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        1
      </a>
    </li>
    <li
      className=""
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        2
      </a>
    </li>
    <li
      className=""
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        3
      </a>
    </li>
    <li
      className=""
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        4
      </a>
    </li>
    <li
      className=""
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        5
      </a>
    </li>
    <li
      className=""
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        6
      </a>
    </li>
    <li
      className=""
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        7
      </a>
    </li>
    <li
      className=""
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        8
      </a>
    </li>
    <li
      className=""
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        9
      </a>
    </li>
    <li
      className=""
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        10
      </a>
    </li>
  </ul>
  <hr />
  <h3>
    More options
  </h3>
  <p>
    such as 
    <code>
      first
    </code>
    , 
    <code>
      last
    </code>
    , 
    <code>
      previous
    </code>
    , 
    <code>
      next
    </code>
    , 
    <code>
      boundaryLinks
    </code>
     and 
    <code>
      ellipsis
    </code>
    .
  </p>
</span>
`;

exports[`Frontend Storyshots Pagination large 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Pagination - large
  </h2>
  <ul
    className="pagination pagination-lg"
  >
    <li
      className="active"
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        1
      </a>
    </li>
    <li
      className=""
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        2
      </a>
    </li>
    <li
      className=""
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        3
      </a>
    </li>
    <li
      className=""
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        4
      </a>
    </li>
    <li
      className=""
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        5
      </a>
    </li>
    <li
      className=""
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        6
      </a>
    </li>
    <li
      className=""
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        7
      </a>
    </li>
    <li
      className=""
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        8
      </a>
    </li>
    <li
      className=""
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        9
      </a>
    </li>
    <li
      className=""
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        10
      </a>
    </li>
  </ul>
  <hr />
  <p>
    <code>
      bsSize='large'
    </code>
  </p>
</span>
`;

exports[`Frontend Storyshots Pagination small 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Pagination - small
  </h2>
  <ul
    className="pagination pagination-sm"
  >
    <li
      className="active"
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        1
      </a>
    </li>
    <li
      className=""
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        2
      </a>
    </li>
    <li
      className=""
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        3
      </a>
    </li>
    <li
      className=""
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        4
      </a>
    </li>
    <li
      className=""
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        5
      </a>
    </li>
    <li
      className=""
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        6
      </a>
    </li>
    <li
      className=""
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        7
      </a>
    </li>
    <li
      className=""
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        8
      </a>
    </li>
    <li
      className=""
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        9
      </a>
    </li>
    <li
      className=""
      style={undefined}
    >
      <a
        href="#"
        onClick={[Function]}
        role="button"
      >
        10
      </a>
    </li>
  </ul>
  <hr />
  <p>
    <code>
      bsSize='small'
    </code>
  </p>
</span>
`;

exports[`Frontend Storyshots Panel accordion 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Accordion
  </h2>
  <div
    className="well well-lg"
  >
    <code>
      Accordion
    </code>
     aliases 
    <code>
      PanelGroup accordion
    </code>
    <ul>
      <li>
        <a
          href="https://react-bootstrap.github.io/components.html#panels-props-group"
        >
          Props for react-bootstrap PanelGroup and Accordion
        </a>
      </li>
    </ul>
  </div>
  <div
    className="panel-group"
    role="tablist"
  >
    <div
      className="panel panel-default"
      id={null}
    >
      <div
        className="panel-heading"
      >
        <h4
          className="panel-title"
          role="presentation"
        >
          <a
            aria-controls={undefined}
            aria-expanded={false}
            aria-selected={false}
            className="collapsed"
            href={undefined}
            onClick={[Function]}
            role="tab"
          >
            Collapsible Group Item #1
          </a>
        </h4>
      </div>
      <div
        aria-expanded={null}
        aria-hidden={true}
        className="panel-collapse collapse"
        id={undefined}
        role="tabpanel"
      >
        <div
          className="panel-body"
        >
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
    <div
      className="panel panel-default"
      id={null}
    >
      <div
        className="panel-heading"
      >
        <h4
          className="panel-title"
          role="presentation"
        >
          <a
            aria-controls={undefined}
            aria-expanded={false}
            aria-selected={false}
            className="collapsed"
            href={undefined}
            onClick={[Function]}
            role="tab"
          >
            Collapsible Group Item #2
          </a>
        </h4>
      </div>
      <div
        aria-expanded={null}
        aria-hidden={true}
        className="panel-collapse collapse"
        id={undefined}
        role="tabpanel"
      >
        <div
          className="panel-body"
        >
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
    <div
      className="panel panel-default"
      id={null}
    >
      <div
        className="panel-heading"
      >
        <h4
          className="panel-title"
          role="presentation"
        >
          <a
            aria-controls={undefined}
            aria-expanded={false}
            aria-selected={false}
            className="collapsed"
            href={undefined}
            onClick={[Function]}
            role="tab"
          >
            Collapsible Group Item #3
          </a>
        </h4>
      </div>
      <div
        aria-expanded={null}
        aria-hidden={true}
        className="panel-collapse collapse"
        id={undefined}
        role="tabpanel"
      >
        <div
          className="panel-body"
        >
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
  </div>
</span>
`;

exports[`Frontend Storyshots Panel danger 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Panel - danger
  </h2>
  <div
    className="panel panel-danger"
    id={undefined}
  >
    <div
      className="panel-heading"
    >
      Panel header
    </div>
    <div
      className="panel-body"
    >
      Panel content
    </div>
  </div>
  <p>
    <code>
      bsStyle='danger'
    </code>
  </p>
</span>
`;

exports[`Frontend Storyshots Panel default 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Panel
  </h2>
  <div
    className="well well-lg"
  >
    By default, all the 
    <code>
      Panel
    </code>
     does is apply some basic border and padding to contain some content. You can pass on any additional properties you need, e.g. a custom onClick handler, as it is shown in the example code. They all will apply to the wrapper div element.
    <ul>
      <li>
        <a
          href="https://react-bootstrap.github.io/components.html#panels-props"
        >
          Props for react-bootstrap Panel
        </a>
      </li>
    </ul>
  </div>
  <div
    className="panel panel-default"
    id={undefined}
  >
    <div
      className="panel-body"
    >
      Basic panel example
    </div>
  </div>
</span>
`;

exports[`Frontend Storyshots Panel info 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Panel - info
  </h2>
  <div
    className="panel panel-info"
    id={undefined}
  >
    <div
      className="panel-heading"
    >
      Panel header
    </div>
    <div
      className="panel-body"
    >
      Panel content
    </div>
  </div>
  <p>
    <code>
      bsStyle='info'
    </code>
  </p>
</span>
`;

exports[`Frontend Storyshots Panel primary 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Panel - primary
  </h2>
  <div
    className="panel panel-primary"
    id={undefined}
  >
    <div
      className="panel-heading"
    >
      Panel header
    </div>
    <div
      className="panel-body"
    >
      Panel content
    </div>
  </div>
  <hr />
  <p>
    <code>
      bsStyle='primary'
    </code>
  </p>
</span>
`;

exports[`Frontend Storyshots Panel success 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Panel - success
  </h2>
  <div
    className="panel panel-success"
    id={undefined}
  >
    <div
      className="panel-heading"
    >
      Panel header
    </div>
    <div
      className="panel-body"
    >
      Panel content
    </div>
  </div>
  <p>
    <code>
      bsStyle='success'
    </code>
  </p>
</span>
`;

exports[`Frontend Storyshots Panel warning 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Panel - warning
  </h2>
  <div
    className="panel panel-warning"
    id={undefined}
  >
    <div
      className="panel-heading"
    >
      Panel header
    </div>
    <div
      className="panel-body"
    >
      Panel content
    </div>
  </div>
  <p>
    <code>
      bsStyle='warning'
    </code>
  </p>
</span>
`;

exports[`Frontend Storyshots Panel with heading 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Panel with header
  </h2>
  <div
    className="well well-lg"
  >
    Easily add a heading container to your panel with the 
    <code>
      header
    </code>
     prop.
  </div>
  <div
    className="panel panel-default"
    id={undefined}
  >
    <div
      className="panel-heading"
    >
      Panel header
    </div>
    <div
      className="panel-body"
    >
      Panel content
    </div>
  </div>
</span>
`;

exports[`Frontend Storyshots ProgressBar default 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Progress bar
  </h2>
  <div
    className="well well-lg"
  >
    Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
  </div>
  <p>
    Add a 
    <code>
      label
    </code>
     prop to show a visible percentage. For low percentages, consider adding a min-width to ensure the label's text is fully visible.
  </p>
  <div
    className="progress"
  >
    <div
      aria-valuemax={100}
      aria-valuemin={0}
      aria-valuenow={60}
      className="progress-bar"
      role="progressbar"
      style={
        Object {
          "width": "60%",
        }
      }
    >
      60%
    </div>
  </div>
  <p>
    Add a 
    <code>
      srOnly
    </code>
     prop to hide the label visually.
  </p>
  <div
    className="progress"
  >
    <div
      aria-valuemax={100}
      aria-valuemin={0}
      aria-valuenow={60}
      className="progress-bar"
      role="progressbar"
      style={
        Object {
          "width": "60%",
        }
      }
    />
  </div>
  <hr />
  <h3>
    Props
  </h3>
  <table
    className="table table-striped table-bordered table-condensed table-hover"
  >
    <thead>
      <tr>
        <th>
          Name
        </th>
        <th>
          Type
        </th>
        <th>
          Default
        </th>
        <th>
          Description
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          active
        </td>
        <td>
          boolean
        </td>
        <td>
          false
        </td>
        <td />
      </tr>
      <tr>
        <td>
          bsClass
        </td>
        <td>
          string
        </td>
        <td>
          'progress-bar'
        </td>
        <td>
          Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
        </td>
      </tr>
      <tr>
        <td>
          bsStyle
        </td>
        <td>
          one of: 
          <code>
            "success"
          </code>
          , 
          <code>
            "warning"
          </code>
          , 
          <code>
            "danger"
          </code>
          , 
          <code>
            "info"
          </code>
          , 
          <code>
            "default"
          </code>
          , 
          <code>
            "primary"
          </code>
          , 
          <code>
            "link"
          </code>
        </td>
        <td>
          'default'
        </td>
        <td>
          Component visual or contextual style variants.
        </td>
      </tr>
      <tr>
        <td>
          children
        </td>
        <td>
          onlyProgressBar
        </td>
        <td />
        <td />
      </tr>
      <tr>
        <td>
          label
        </td>
        <td>
          node
        </td>
        <td />
        <td />
      </tr>
      <tr>
        <td>
          max
        </td>
        <td>
          number
        </td>
        <td>
          100
        </td>
        <td />
      </tr>
      <tr>
        <td>
          min
        </td>
        <td>
          number
        </td>
        <td>
          0
        </td>
        <td />
      </tr>
      <tr>
        <td>
          now
        </td>
        <td>
          number
        </td>
        <td />
        <td />
      </tr>
      <tr>
        <td>
          srOnly
        </td>
        <td>
          boolean
        </td>
        <td>
          false
        </td>
        <td />
      </tr>
      <tr>
        <td>
          striped
        </td>
        <td>
          boolean
        </td>
        <td>
          false
        </td>
        <td />
      </tr>
    </tbody>
  </table>
</span>
`;

exports[`Frontend Storyshots ProgressBar stacked 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Progress bars - stacked
  </h2>
  <div
    className="well well-lg"
  >
    Nest 
    <code>
      ProgressBar
    </code>
    s to stack them.
  </div>
  <div
    className="progress"
  >
    <div
      aria-valuemax={100}
      aria-valuemin={0}
      aria-valuenow={35}
      className="progress-bar progress-bar-success progress-bar-striped"
      role="progressbar"
      style={
        Object {
          "width": "35%",
        }
      }
    />
    <div
      aria-valuemax={100}
      aria-valuemin={0}
      aria-valuenow={20}
      className="progress-bar progress-bar-warning"
      role="progressbar"
      style={
        Object {
          "width": "20%",
        }
      }
    />
    <div
      aria-valuemax={100}
      aria-valuemin={0}
      aria-valuenow={10}
      className="progress-bar progress-bar-danger active progress-bar-striped"
      role="progressbar"
      style={
        Object {
          "width": "10%",
        }
      }
    />
  </div>
</span>
`;

exports[`Frontend Storyshots ProgressBar translation states 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Progress bars - translation states
  </h2>
  <div
    className="well well-lg"
  >
    The boostrap style classes have been used for the translation progress bars and 
    <code>
      bsStyle
    </code>
     props are needed.
  </div>
  Translated
  <div
    className="progress"
  >
    <div
      aria-valuemax={100}
      aria-valuemin={0}
      aria-valuenow={40}
      className="progress-bar progress-bar-success"
      role="progressbar"
      style={
        Object {
          "width": "40%",
        }
      }
    />
  </div>
  <p>
    <code>
      bsStyle='success'
    </code>
  </p>
  Approved
  <div
    className="progress"
  >
    <div
      aria-valuemax={100}
      aria-valuemin={0}
      aria-valuenow={20}
      className="progress-bar progress-bar-info"
      role="progressbar"
      style={
        Object {
          "width": "20%",
        }
      }
    />
  </div>
  <p>
    <code>
      bsStyle='success'
    </code>
  </p>
  Needs Work
  <div
    className="progress"
  >
    <div
      aria-valuemax={100}
      aria-valuemin={0}
      aria-valuenow={60}
      className="progress-bar progress-bar-warning"
      role="progressbar"
      style={
        Object {
          "width": "60%",
        }
      }
    />
  </div>
  <p>
    <code>
      bsStyle='warning'
    </code>
  </p>
  Rejected
  <div
    className="progress"
  >
    <div
      aria-valuemax={100}
      aria-valuemin={0}
      aria-valuenow={80}
      className="progress-bar progress-bar-danger"
      role="progressbar"
      style={
        Object {
          "width": "80%",
        }
      }
    />
  </div>
  <p>
    <code>
      bsStyle='danger'
    </code>
  </p>
</span>
`;

exports[`Frontend Storyshots RejectionsForm Admin screen 1`] = `
<div
  className="container"
>
  <h1>
    Reject translations settings
  </h1>
  <form
    className="rejectionsForm form-inline"
  >
    <div
      className="u-flexGrow1 form-group"
    >
      <label
        className="control-label"
        htmlFor="formInlineCriteria"
      >
        Criteria
      </label>
      <br />
      <textarea
        aria-label={undefined}
        autoComplete={undefined}
        autoFocus={undefined}
        className="textInput"
        id={undefined}
        onBlur={undefined}
        onChange={[Function]}
        onFocus={[Function]}
        onKeyDown={undefined}
        onSelect={undefined}
        placeholder="Translation Errors (terminology, mistranslated, addition, omission, un-localized, do not translate, etc)"
        readOnly={true}
        style={
          Object {
            "height": 0,
          }
        }
        value=""
      />
    </div>
    <div
      className="form-group"
    >
      <label
        className="control-label"
        htmlFor="formInlinePriority"
      >
        Priority
      </label>
      <br />
      <div
        className="dropdown disabled btn-group btn-group-sm btn-group-default"
      >
        <button
          aria-expanded={false}
          aria-haspopup={true}
          className="dropdown-toggle btn btn-sm btn-default"
          disabled={true}
          id="review-criteriareview-criteria-dropdown-basic"
          onClick={[Function]}
          onKeyDown={[Function]}
          role="button"
          type="button"
        >
          <span
            className="u-textDanger"
          >
            Critical
          </span>
           
          <span
            className="caret"
          />
        </button>
        <ul
          aria-labelledby="review-criteriareview-criteria-dropdown-basic"
          className="dropdown-menu"
          role="menu"
        >
          <li
            className=""
            role="presentation"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="menuitem"
              tabIndex="-1"
            >
              <span
                className="u-textInfo"
              >
                Minor
              </span>
            </a>
          </li>
          <li
            className=""
            role="presentation"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="menuitem"
              tabIndex="-1"
            >
              <span
                className="u-textWarning"
              >
                Major
              </span>
            </a>
          </li>
          <li
            className="active"
            role="presentation"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="menuitem"
              tabIndex="-1"
            >
              <span
                className="u-textDanger"
              >
                Critical
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </form>
  <form
    className="rejectionsForm form-inline"
  >
    <div
      className="u-flexGrow1 form-group"
    >
      <label
        className="control-label"
        htmlFor="formInlineCriteria"
      >
        Criteria
      </label>
      <br />
      <textarea
        aria-label={undefined}
        autoComplete={undefined}
        autoFocus={undefined}
        className="textInput"
        id={undefined}
        onBlur={undefined}
        onChange={[Function]}
        onFocus={[Function]}
        onKeyDown={undefined}
        onSelect={undefined}
        placeholder="Language Quality (grammar, spelling, punctuation, typo, ambiguous wording, product name, sentence structuring, readability, word choice, not natural, too literal, style and tone, etc)"
        readOnly={false}
        style={
          Object {
            "height": 0,
          }
        }
        value=""
      />
    </div>
    <div
      className="form-group"
    >
      <label
        className="control-label"
        htmlFor="formInlinePriority"
      >
        Priority
      </label>
      <br />
      <div
        className="dropdown btn-group btn-group-sm btn-group-default"
      >
        <button
          aria-expanded={false}
          aria-haspopup={true}
          className="dropdown-toggle btn btn-sm btn-default"
          disabled={false}
          id="review-criteriareview-criteria-dropdown-basic"
          onClick={[Function]}
          onKeyDown={[Function]}
          role="button"
          type="button"
        >
          <span
            className="u-textWarning"
          >
            Major
          </span>
           
          <span
            className="caret"
          />
        </button>
        <ul
          aria-labelledby="review-criteriareview-criteria-dropdown-basic"
          className="dropdown-menu"
          role="menu"
        >
          <li
            className=""
            role="presentation"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="menuitem"
              tabIndex="-1"
            >
              <span
                className="u-textInfo"
              >
                Minor
              </span>
            </a>
          </li>
          <li
            className="active"
            role="presentation"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="menuitem"
              tabIndex="-1"
            >
              <span
                className="u-textWarning"
              >
                Major
              </span>
            </a>
          </li>
          <li
            className=""
            role="presentation"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="menuitem"
              tabIndex="-1"
            >
              <span
                className="u-textDanger"
              >
                Critical
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </form>
  <form
    className="rejectionsForm form-inline"
  >
    <div
      className="u-flexGrow1 form-group"
    >
      <label
        className="control-label"
        htmlFor="formInlineCriteria"
      >
        Criteria
      </label>
      <br />
      <textarea
        aria-label={undefined}
        autoComplete={undefined}
        autoFocus={undefined}
        className="textInput"
        id={undefined}
        onBlur={undefined}
        onChange={[Function]}
        onFocus={[Function]}
        onKeyDown={undefined}
        onSelect={undefined}
        placeholder="Consistency (inconsistent style or vocabulary, brand inconsistency, etc.)"
        readOnly={true}
        style={
          Object {
            "height": 0,
          }
        }
        value=""
      />
    </div>
    <div
      className="form-group"
    >
      <label
        className="control-label"
        htmlFor="formInlinePriority"
      >
        Priority
      </label>
      <br />
      <div
        className="dropdown disabled btn-group btn-group-sm btn-group-default"
      >
        <button
          aria-expanded={false}
          aria-haspopup={true}
          className="dropdown-toggle btn btn-sm btn-default"
          disabled={true}
          id="review-criteriareview-criteria-dropdown-basic"
          onClick={[Function]}
          onKeyDown={[Function]}
          role="button"
          type="button"
        >
          <span
            className="u-textWarning"
          >
            Major
          </span>
           
          <span
            className="caret"
          />
        </button>
        <ul
          aria-labelledby="review-criteriareview-criteria-dropdown-basic"
          className="dropdown-menu"
          role="menu"
        >
          <li
            className=""
            role="presentation"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="menuitem"
              tabIndex="-1"
            >
              <span
                className="u-textInfo"
              >
                Minor
              </span>
            </a>
          </li>
          <li
            className="active"
            role="presentation"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="menuitem"
              tabIndex="-1"
            >
              <span
                className="u-textWarning"
              >
                Major
              </span>
            </a>
          </li>
          <li
            className=""
            role="presentation"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="menuitem"
              tabIndex="-1"
            >
              <span
                className="u-textDanger"
              >
                Critical
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </form>
  <form
    className="rejectionsForm form-inline"
  >
    <div
      className="u-flexGrow1 form-group"
    >
      <label
        className="control-label"
        htmlFor="formInlineCriteria"
      >
        Criteria
      </label>
      <br />
      <textarea
        aria-label={undefined}
        autoComplete={undefined}
        autoFocus={undefined}
        className="textInput"
        id={undefined}
        onBlur={undefined}
        onChange={[Function]}
        onFocus={[Function]}
        onKeyDown={undefined}
        onSelect={undefined}
        placeholder="Style Guide & Glossary Violations"
        readOnly={true}
        style={
          Object {
            "height": 0,
          }
        }
        value=""
      />
    </div>
    <div
      className="form-group"
    >
      <label
        className="control-label"
        htmlFor="formInlinePriority"
      >
        Priority
      </label>
      <br />
      <div
        className="dropdown disabled btn-group btn-group-sm btn-group-default"
      >
        <button
          aria-expanded={false}
          aria-haspopup={true}
          className="dropdown-toggle btn btn-sm btn-default"
          disabled={true}
          id="review-criteriareview-criteria-dropdown-basic"
          onClick={[Function]}
          onKeyDown={[Function]}
          role="button"
          type="button"
        >
          <span
            className="u-textInfo"
          >
            Minor
          </span>
           
          <span
            className="caret"
          />
        </button>
        <ul
          aria-labelledby="review-criteriareview-criteria-dropdown-basic"
          className="dropdown-menu"
          role="menu"
        >
          <li
            className="active"
            role="presentation"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="menuitem"
              tabIndex="-1"
            >
              <span
                className="u-textInfo"
              >
                Minor
              </span>
            </a>
          </li>
          <li
            className=""
            role="presentation"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="menuitem"
              tabIndex="-1"
            >
              <span
                className="u-textWarning"
              >
                Major
              </span>
            </a>
          </li>
          <li
            className=""
            role="presentation"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="menuitem"
              tabIndex="-1"
            >
              <span
                className="u-textDanger"
              >
                Critical
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </form>
  <form
    className="rejectionsForm form-inline"
  >
    <div
      className="u-flexGrow1 form-group"
    >
      <label
        className="control-label"
        htmlFor="formInlineCriteria"
      >
        Criteria
      </label>
      <br />
      <textarea
        aria-label={undefined}
        autoComplete={undefined}
        autoFocus={undefined}
        className="textInput"
        id={undefined}
        onBlur={undefined}
        onChange={[Function]}
        onFocus={[Function]}
        onKeyDown={undefined}
        onSelect={undefined}
        placeholder="Format (mismatches, white-spaces, tag error or missing, special character, numeric format, truncated, etc.)"
        readOnly={true}
        style={
          Object {
            "height": 0,
          }
        }
        value=""
      />
    </div>
    <div
      className="form-group"
    >
      <label
        className="control-label"
        htmlFor="formInlinePriority"
      >
        Priority
      </label>
      <br />
      <div
        className="dropdown disabled btn-group btn-group-sm btn-group-default"
      >
        <button
          aria-expanded={false}
          aria-haspopup={true}
          className="dropdown-toggle btn btn-sm btn-default"
          disabled={true}
          id="review-criteriareview-criteria-dropdown-basic"
          onClick={[Function]}
          onKeyDown={[Function]}
          role="button"
          type="button"
        >
          <span
            className="u-textInfo"
          >
            Minor
          </span>
           
          <span
            className="caret"
          />
        </button>
        <ul
          aria-labelledby="review-criteriareview-criteria-dropdown-basic"
          className="dropdown-menu"
          role="menu"
        >
          <li
            className="active"
            role="presentation"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="menuitem"
              tabIndex="-1"
            >
              <span
                className="u-textInfo"
              >
                Minor
              </span>
            </a>
          </li>
          <li
            className=""
            role="presentation"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="menuitem"
              tabIndex="-1"
            >
              <span
                className="u-textWarning"
              >
                Major
              </span>
            </a>
          </li>
          <li
            className=""
            role="presentation"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="menuitem"
              tabIndex="-1"
            >
              <span
                className="u-textDanger"
              >
                Critical
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </form>
  <form
    className="rejectionsForm form-inline"
  >
    <div
      className="u-flexGrow1 form-group"
    >
      <label
        className="control-label"
        htmlFor="formInlineCriteria"
      >
        Criteria
      </label>
      <br />
      <textarea
        aria-label={undefined}
        autoComplete={undefined}
        autoFocus={undefined}
        className="textInput"
        id={undefined}
        onBlur={undefined}
        onChange={[Function]}
        onFocus={[Function]}
        onKeyDown={undefined}
        onSelect={undefined}
        placeholder="Other (reason may be in comment section/history if necessary)"
        readOnly={false}
        style={
          Object {
            "height": 0,
          }
        }
        value=""
      />
    </div>
    <div
      className="form-group"
    >
      <label
        className="control-label"
        htmlFor="formInlinePriority"
      >
        Priority
      </label>
      <br />
      <div
        className="dropdown btn-group btn-group-sm btn-group-default"
      >
        <button
          aria-expanded={false}
          aria-haspopup={true}
          className="dropdown-toggle btn btn-sm btn-default"
          disabled={false}
          id="review-criteriareview-criteria-dropdown-basic"
          onClick={[Function]}
          onKeyDown={[Function]}
          role="button"
          type="button"
        >
          <span
            className="u-textDanger"
          >
            Critical
          </span>
           
          <span
            className="caret"
          />
        </button>
        <ul
          aria-labelledby="review-criteriareview-criteria-dropdown-basic"
          className="dropdown-menu"
          role="menu"
        >
          <li
            className=""
            role="presentation"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="menuitem"
              tabIndex="-1"
            >
              <span
                className="u-textInfo"
              >
                Minor
              </span>
            </a>
          </li>
          <li
            className=""
            role="presentation"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="menuitem"
              tabIndex="-1"
            >
              <span
                className="u-textWarning"
              >
                Major
              </span>
            </a>
          </li>
          <li
            className="active"
            role="presentation"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="menuitem"
              tabIndex="-1"
            >
              <span
                className="u-textDanger"
              >
                Critical
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </form>
  <div
    className="rejection-btns"
  >
    <button
      className="btn-left btn btn-primary"
      disabled={false}
      type="button"
    >
      <span
        className=""
      >
        <svg
          className="s1"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-plus\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       Add review criteria
    </button>
    <button
      className="btn btn-info"
      disabled={false}
      type="button"
    >
      <span
        className=""
      >
        <svg
          className="s1"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-tick\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
       Save changes
    </button>
  </div>
</div>
`;

exports[`Frontend Storyshots RejectionsForm commentRequired 1`] = `
<form
  className="rejectionsForm form-inline"
>
  <div
    className="u-flexGrow1 form-group"
  >
    <label
      className="control-label"
      htmlFor="formInlineCriteria"
    >
      Criteria
    </label>
    <br />
    <textarea
      aria-label={undefined}
      autoComplete={undefined}
      autoFocus={undefined}
      className="textInput"
      id={undefined}
      onBlur={undefined}
      onChange={[Function]}
      onFocus={[Function]}
      onKeyDown={undefined}
      onSelect={undefined}
      placeholder="Format (mismatches, white-spaces, tag error or missing, special character, numeric format, truncated, etc.)"
      readOnly={false}
      style={
        Object {
          "height": 0,
        }
      }
      value=""
    />
  </div>
  <div
    className="form-group"
  >
    <label
      className="control-label"
      htmlFor="formInlinePriority"
    >
      Priority
    </label>
    <br />
    <div
      className="dropdown btn-group btn-group-sm btn-group-default"
    >
      <button
        aria-expanded={false}
        aria-haspopup={true}
        className="dropdown-toggle btn btn-sm btn-default"
        disabled={false}
        id="review-criteriareview-criteria-dropdown-basic"
        onClick={[Function]}
        onKeyDown={[Function]}
        role="button"
        type="button"
      >
        <span
          className="u-textInfo"
        >
          Minor
        </span>
         
        <span
          className="caret"
        />
      </button>
      <ul
        aria-labelledby="review-criteriareview-criteria-dropdown-basic"
        className="dropdown-menu"
        role="menu"
      >
        <li
          className="active"
          role="presentation"
          style={undefined}
        >
          <a
            href="#"
            onClick={[Function]}
            role="menuitem"
            tabIndex="-1"
          >
            <span
              className="u-textInfo"
            >
              Minor
            </span>
          </a>
        </li>
        <li
          className=""
          role="presentation"
          style={undefined}
        >
          <a
            href="#"
            onClick={[Function]}
            role="menuitem"
            tabIndex="-1"
          >
            <span
              className="u-textWarning"
            >
              Major
            </span>
          </a>
        </li>
        <li
          className=""
          role="presentation"
          style={undefined}
        >
          <a
            href="#"
            onClick={[Function]}
            role="menuitem"
            tabIndex="-1"
          >
            <span
              className="u-textDanger"
            >
              Critical
            </span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</form>
`;

exports[`Frontend Storyshots RejectionsForm read only 1`] = `
<form
  className="rejectionsForm form-inline"
>
  <div
    className="u-flexGrow1 form-group"
  >
    <label
      className="control-label"
      htmlFor="formInlineCriteria"
    >
      Criteria
    </label>
    <br />
    <textarea
      aria-label={undefined}
      autoComplete={undefined}
      autoFocus={undefined}
      className="textInput"
      id={undefined}
      onBlur={undefined}
      onChange={[Function]}
      onFocus={[Function]}
      onKeyDown={undefined}
      onSelect={undefined}
      placeholder="Format (mismatches, white-spaces, tag error or missing, special character, numeric format, truncated, etc.)"
      readOnly={true}
      style={
        Object {
          "height": 0,
        }
      }
      value=""
    />
  </div>
  <div
    className="form-group"
  >
    <label
      className="control-label"
      htmlFor="formInlinePriority"
    >
      Priority
    </label>
    <br />
    <div
      className="dropdown disabled btn-group btn-group-sm btn-group-default"
    >
      <button
        aria-expanded={false}
        aria-haspopup={true}
        className="dropdown-toggle btn btn-sm btn-default"
        disabled={true}
        id="review-criteriareview-criteria-dropdown-basic"
        onClick={[Function]}
        onKeyDown={[Function]}
        role="button"
        type="button"
      >
        <span
          className="u-textInfo"
        >
          Minor
        </span>
         
        <span
          className="caret"
        />
      </button>
      <ul
        aria-labelledby="review-criteriareview-criteria-dropdown-basic"
        className="dropdown-menu"
        role="menu"
      >
        <li
          className="active"
          role="presentation"
          style={undefined}
        >
          <a
            href="#"
            onClick={[Function]}
            role="menuitem"
            tabIndex="-1"
          >
            <span
              className="u-textInfo"
            >
              Minor
            </span>
          </a>
        </li>
        <li
          className=""
          role="presentation"
          style={undefined}
        >
          <a
            href="#"
            onClick={[Function]}
            role="menuitem"
            tabIndex="-1"
          >
            <span
              className="u-textWarning"
            >
              Major
            </span>
          </a>
        </li>
        <li
          className=""
          role="presentation"
          style={undefined}
        >
          <a
            href="#"
            onClick={[Function]}
            role="menuitem"
            tabIndex="-1"
          >
            <span
              className="u-textDanger"
            >
              Critical
            </span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</form>
`;

exports[`Frontend Storyshots Sidebar AboutPage 1`] = `
<div>
  <div
    className="sidebar accordion"
  >
    <div
      className="sidebar-wrapper"
    >
      <div
        className="sidebar-container"
      >
        <div
          className="sidebar-content"
        >
          <a
            className="accordion-section-title"
            onClick={[Function]}
          >
            <span
              className="iconProject"
            >
              <svg
                className="s2"
                dangerouslySetInnerHTML={
                  Object {
                    "__html": "<use xlink:href=\\"#Icon-project\\" />",
                  }
                }
                style={
                  Object {
                    "fill": "currentColor",
                  }
                }
              />
            </span>
            <span
              className="projtitle"
            >
              Zanata Server
            </span>
            <svg
              className="hide-desktop down"
            >
              <use
                xlinkHref="#Icon-chevron-down"
              />
            </svg>
          </a>
          <div
            className="accordion-section-content"
            id="accordion-1"
          >
            <ul
              className="nav nav-pills nav-stacked"
              role={null}
            >
              <li
                className="active"
                role="presentation"
                style={undefined}
              >
                <a
                  href="#"
                  onClick={[Function]}
                  role="button"
                >
                  <span
                    className="iconSidebar"
                  >
                    <svg
                      className="s1"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-users\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  People
                </a>
              </li>
              <li
                className=""
                role="presentation"
                style={undefined}
              >
                <a
                  href="#"
                  onClick={[Function]}
                  role="button"
                >
                  <span
                    className="iconSidebar"
                  >
                    <svg
                      className="s1"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-glossary\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  Glossary
                </a>
              </li>
              <li
                className=""
                role="presentation"
                style={undefined}
              >
                <a
                  href="#"
                  onClick={[Function]}
                  role="button"
                >
                  <span
                    className="iconSidebar"
                  >
                    <svg
                      className="s1"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-info\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  About
                </a>
              </li>
              <li
                className=""
                role="presentation"
                style={undefined}
              >
                <a
                  href="#"
                  onClick={[Function]}
                  role="button"
                >
                  <span
                    className="iconSidebar"
                  >
                    <svg
                      className="s1"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-settings\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  Settings 
                </a>
              </li>
            </ul>
            <div
              className="dropdown btn-group"
            >
              <button
                aria-expanded={false}
                aria-haspopup={true}
                className="btn-sm btn-default dropdown-toggle btn btn-default"
                disabled={false}
                id="optionsDropdown"
                onClick={[Function]}
                onKeyDown={[Function]}
                role="button"
                type="button"
              >
                Options
                 
                <span
                  className="caret"
                />
              </button>
              <ul
                aria-labelledby="optionsDropdown"
                className="dropdown-menu"
                role="menu"
              >
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Copy translations
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Merge translations
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Copy to new version
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Download config file
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Export project to TMX
                  </a>
                </li>
              </ul>
            </div>
            <div
              className="processing well"
            >
              <p
                className="task-title"
              >
                Task title
              </p>
              <p>
                <span>
                  Processing document 
                  <span
                    className="count"
                  >
                    1 of 10
                  </span>
                   
                  <span
                    className="count-pc"
                  >
                    12.50%
                  </span>
                </span>
              </p>
              <div
                className="progress-striped progress"
              >
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={12.5}
                  className="progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "12.5%",
                    }
                  }
                />
              </div>
              <button
                className="btn-danger btn-sm btn btn-default"
                disabled={false}
                type="button"
              >
                Stop
              </button>
            </div>
            <div
              id="sidebarVersion"
            >
              <div
                className="sidebarVersion-inline"
              >
                <span
                  className="sidebarVersion-title"
                >
                  <span
                    className=""
                  >
                    <svg
                      className="s2"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-version\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  <span
                    className="versionHeading"
                  >
                    VERSION
                  </span>
                </span>
                <div
                  className="dropdown btn-group"
                >
                  <button
                    aria-expanded={false}
                    aria-haspopup={true}
                    className="btn-sm btn-default dropdown-toggle btn btn-default"
                    disabled={false}
                    id="version-dropdown"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="button"
                    type="button"
                  >
                    master
                     
                    <span
                      className="caret"
                    />
                  </button>
                  <ul
                    aria-labelledby="version-dropdown"
                    className="dropdown-menu"
                    role="menu"
                  >
                    <li
                      className=""
                      role="presentation"
                      style={undefined}
                    >
                      <a
                        href="#"
                        onClick={[Function]}
                        onKeyDown={[Function]}
                        role="menuitem"
                        tabIndex="-1"
                      >
                        release
                      </a>
                    </li>
                    <li
                      className=""
                      role="presentation"
                      style={undefined}
                    >
                      <a
                        href="#"
                        onClick={[Function]}
                        onKeyDown={[Function]}
                        role="menuitem"
                        tabIndex="-1"
                      >
                        test-1
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
              <p
                className="sidebarVersion-settings"
              >
                <a
                  href=""
                >
                  Version settings
                </a>
              </p>
              <div
                className="sidebarVersion-percent"
              >
                <p>
                  <span
                    className="percent"
                  >
                    10%
                  </span>
                   translated
                </p>
              </div>
              <div
                className="progress"
              >
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={10}
                  className="progress-bar-success progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "10%",
                    }
                  }
                />
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={7}
                  className="progress-bar-warning progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "7%",
                    }
                  }
                />
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={3}
                  className="progress-bar-danger progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "3%",
                    }
                  }
                />
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={10}
                  className="progress-bar-info progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "10%",
                    }
                  }
                />
              </div>
              <ul
                className="v-links nav nav-pills nav-stacked"
                role={null}
              >
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    role="button"
                  >
                    Languages
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    role="button"
                  >
                    Documents
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    role="button"
                  >
                    Groups 
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    className="flexTab wideView"
  >
    <h2>
      About
    </h2>
    <p>
      This is one rocking project version. This is the best project version ever.
    </p>
    <a
      href="https://www.google.com"
    >
      <span
        className=""
      >
        <svg
          className="n1"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<use xlink:href=\\"#Icon-link\\" />",
            }
          }
          style={
            Object {
              "fill": "currentColor",
            }
          }
        />
      </span>
      Our awesome webpage
    </a>
  </div>
</div>
`;

exports[`Frontend Storyshots Sidebar DocumentsPage 1`] = `
<div>
  <div
    className="sidebar accordion"
  >
    <div
      className="sidebar-wrapper"
    >
      <div
        className="sidebar-container"
      >
        <div
          className="sidebar-content"
        >
          <a
            className="accordion-section-title"
            onClick={[Function]}
          >
            <span
              className="iconProject"
            >
              <svg
                className="s2"
                dangerouslySetInnerHTML={
                  Object {
                    "__html": "<use xlink:href=\\"#Icon-project\\" />",
                  }
                }
                style={
                  Object {
                    "fill": "currentColor",
                  }
                }
              />
            </span>
            <span
              className="projtitle"
            >
              Zanata Server
            </span>
            <svg
              className="hide-desktop down"
            >
              <use
                xlinkHref="#Icon-chevron-down"
              />
            </svg>
          </a>
          <div
            className="accordion-section-content"
            id="accordion-1"
          >
            <ul
              className="nav nav-pills nav-stacked"
              role={null}
            >
              <li
                className="active"
                role="presentation"
                style={undefined}
              >
                <a
                  href="#"
                  onClick={[Function]}
                  role="button"
                >
                  <span
                    className="iconSidebar"
                  >
                    <svg
                      className="s1"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-users\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  People
                </a>
              </li>
              <li
                className=""
                role="presentation"
                style={undefined}
              >
                <a
                  href="#"
                  onClick={[Function]}
                  role="button"
                >
                  <span
                    className="iconSidebar"
                  >
                    <svg
                      className="s1"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-glossary\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  Glossary
                </a>
              </li>
              <li
                className=""
                role="presentation"
                style={undefined}
              >
                <a
                  href="#"
                  onClick={[Function]}
                  role="button"
                >
                  <span
                    className="iconSidebar"
                  >
                    <svg
                      className="s1"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-info\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  About
                </a>
              </li>
              <li
                className=""
                role="presentation"
                style={undefined}
              >
                <a
                  href="#"
                  onClick={[Function]}
                  role="button"
                >
                  <span
                    className="iconSidebar"
                  >
                    <svg
                      className="s1"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-settings\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  Settings 
                </a>
              </li>
            </ul>
            <div
              className="dropdown btn-group"
            >
              <button
                aria-expanded={false}
                aria-haspopup={true}
                className="btn-sm btn-default dropdown-toggle btn btn-default"
                disabled={false}
                id="optionsDropdown"
                onClick={[Function]}
                onKeyDown={[Function]}
                role="button"
                type="button"
              >
                Options
                 
                <span
                  className="caret"
                />
              </button>
              <ul
                aria-labelledby="optionsDropdown"
                className="dropdown-menu"
                role="menu"
              >
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Copy translations
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Merge translations
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Copy to new version
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Download config file
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Export project to TMX
                  </a>
                </li>
              </ul>
            </div>
            <div
              className="processing well"
            >
              <p
                className="task-title"
              >
                Task title
              </p>
              <p>
                <span>
                  Processing document 
                  <span
                    className="count"
                  >
                    1 of 10
                  </span>
                   
                  <span
                    className="count-pc"
                  >
                    12.50%
                  </span>
                </span>
              </p>
              <div
                className="progress-striped progress"
              >
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={12.5}
                  className="progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "12.5%",
                    }
                  }
                />
              </div>
              <button
                className="btn-danger btn-sm btn btn-default"
                disabled={false}
                type="button"
              >
                Stop
              </button>
            </div>
            <div
              id="sidebarVersion"
            >
              <div
                className="sidebarVersion-inline"
              >
                <span
                  className="sidebarVersion-title"
                >
                  <span
                    className=""
                  >
                    <svg
                      className="s2"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-version\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  <span
                    className="versionHeading"
                  >
                    VERSION
                  </span>
                </span>
                <div
                  className="dropdown btn-group"
                >
                  <button
                    aria-expanded={false}
                    aria-haspopup={true}
                    className="btn-sm btn-default dropdown-toggle btn btn-default"
                    disabled={false}
                    id="version-dropdown"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="button"
                    type="button"
                  >
                    master
                     
                    <span
                      className="caret"
                    />
                  </button>
                  <ul
                    aria-labelledby="version-dropdown"
                    className="dropdown-menu"
                    role="menu"
                  >
                    <li
                      className=""
                      role="presentation"
                      style={undefined}
                    >
                      <a
                        href="#"
                        onClick={[Function]}
                        onKeyDown={[Function]}
                        role="menuitem"
                        tabIndex="-1"
                      >
                        release
                      </a>
                    </li>
                    <li
                      className=""
                      role="presentation"
                      style={undefined}
                    >
                      <a
                        href="#"
                        onClick={[Function]}
                        onKeyDown={[Function]}
                        role="menuitem"
                        tabIndex="-1"
                      >
                        test-1
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
              <p
                className="sidebarVersion-settings"
              >
                <a
                  href=""
                >
                  Version settings
                </a>
              </p>
              <div
                className="sidebarVersion-percent"
              >
                <p>
                  <span
                    className="percent"
                  >
                    10%
                  </span>
                   translated
                </p>
              </div>
              <div
                className="progress"
              >
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={10}
                  className="progress-bar-success progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "10%",
                    }
                  }
                />
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={7}
                  className="progress-bar-warning progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "7%",
                    }
                  }
                />
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={3}
                  className="progress-bar-danger progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "3%",
                    }
                  }
                />
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={10}
                  className="progress-bar-info progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "10%",
                    }
                  }
                />
              </div>
              <ul
                className="v-links nav nav-pills nav-stacked"
                role={null}
              >
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    role="button"
                  >
                    Languages
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    role="button"
                  >
                    Documents
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    role="button"
                  >
                    Groups 
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    className="flexTab wideView"
  >
    <h2>
      Documents
    </h2>
    <div
      className="toolbar"
    >
      <div
        className="searchBox form-group"
      >
        <span
          className="input-group"
        >
          <input
            className="form-control"
            id={undefined}
            type="text"
            value="Search documents"
          />
          <span
            className="input-group-addon"
          >
            <span
              className=""
              title="search"
            >
              <svg
                className="s1"
                dangerouslySetInnerHTML={
                  Object {
                    "__html": "<use xlink:href=\\"#Icon-search\\" />",
                  }
                }
                style={
                  Object {
                    "fill": "currentColor",
                  }
                }
              />
            </span>
          </span>
        </span>
      </div>
      <div
        className="sortItems"
      >
        <select
          className="form-control"
          id="sort-options"
          type={undefined}
        >
          return
          <option>
            Last modified
          </option>
          <option>
            Alphabetical
          </option>
        </select>
      </div>
      <div
        className="showItems u-pullRight"
      >
        <span>
          Show
        </span>
        <select
          className="form-control"
          id="page-size-options"
          type={undefined}
        >
          return
          <option>
            10
          </option>
          <option>
            25
          </option>
          <option>
            50
          </option>
          <option>
            100
          </option>
        </select>
      </div>
      <div
        className="pageCount col-xs-7 col-sm-8 col-md-12"
      >
        <ul
          className="pagination pagination-md"
        >
          <li
            className="disabled"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="button"
              style={
                Object {
                  "pointerEvents": "none",
                }
              }
              tabIndex={-1}
            >
              <span
                aria-label="Previous"
              >
                ‹
              </span>
            </a>
          </li>
          <li
            className="active"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="button"
            >
              1
            </a>
          </li>
          <li
            className="disabled"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="button"
              style={
                Object {
                  "pointerEvents": "none",
                }
              }
              tabIndex={-1}
            >
              <span
                aria-label="Next"
              >
                ›
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <table
      className="table table-striped table-hover"
    >
      <thead>
        <tr>
          <th>
            Name
          </th>
          <th>
            Translated
          </th>
          <th>
            Last modified
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <a
              href=""
            >
              MobyDick.txt
            </a>
          </td>
          <td>
            100%
          </td>
          <td>
            3 days ago
          </td>
        </tr>
        <tr>
          <td
            className="progRow"
            colSpan="3"
          >
            <div
              className="progress"
            >
              <div
                aria-valuemax={100}
                aria-valuemin={0}
                aria-valuenow={100}
                className="progress-bar-success progress-bar"
                role="progressbar"
                style={
                  Object {
                    "width": "100%",
                  }
                }
              />
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <a
              href=""
            >
              A-really-long-filename-to-test.txt
            </a>
          </td>
          <td>
            33%
          </td>
          <td>
            5 days ago
          </td>
        </tr>
        <tr>
          <td
            className="progRow"
            colSpan="3"
          >
            <div
              className="progress"
            >
              <div
                aria-valuemax={100}
                aria-valuemin={0}
                aria-valuenow={33}
                className="progress-bar-success progress-bar"
                role="progressbar"
                style={
                  Object {
                    "width": "33%",
                  }
                }
              />
              <div
                aria-valuemax={100}
                aria-valuemin={0}
                aria-valuenow={7}
                className="progress-bar-warning progress-bar"
                role="progressbar"
                style={
                  Object {
                    "width": "7%",
                  }
                }
              />
              <div
                aria-valuemax={100}
                aria-valuemin={0}
                aria-valuenow={3}
                className="progress-bar-danger progress-bar"
                role="progressbar"
                style={
                  Object {
                    "width": "3%",
                  }
                }
              />
              <div
                aria-valuemax={100}
                aria-valuemin={0}
                aria-valuenow={10}
                className="progress-bar-info progress-bar"
                role="progressbar"
                style={
                  Object {
                    "width": "10%",
                  }
                }
              />
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <a
              href=""
            >
              Day Of The Triffids.txt
            </a>
          </td>
          <td>
            10%
          </td>
          <td>
            12 days ago
          </td>
        </tr>
        <tr>
          <td
            className="progRow"
            colSpan="3"
          >
            <div
              className="progress"
            >
              <div
                aria-valuemax={100}
                aria-valuemin={0}
                aria-valuenow={10}
                className="progress-bar-success progress-bar"
                role="progressbar"
                style={
                  Object {
                    "width": "10%",
                  }
                }
              />
              <div
                aria-valuemax={100}
                aria-valuemin={0}
                aria-valuenow={7}
                className="progress-bar-warning progress-bar"
                role="progressbar"
                style={
                  Object {
                    "width": "7%",
                  }
                }
              />
              <div
                aria-valuemax={100}
                aria-valuemin={0}
                aria-valuenow={33}
                className="progress-bar-danger progress-bar"
                role="progressbar"
                style={
                  Object {
                    "width": "33%",
                  }
                }
              />
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
`;

exports[`Frontend Storyshots Sidebar GroupsPage 1`] = `
<div>
  <div
    className="sidebar accordion"
  >
    <div
      className="sidebar-wrapper"
    >
      <div
        className="sidebar-container"
      >
        <div
          className="sidebar-content"
        >
          <a
            className="accordion-section-title"
            onClick={[Function]}
          >
            <span
              className="iconProject"
            >
              <svg
                className="s2"
                dangerouslySetInnerHTML={
                  Object {
                    "__html": "<use xlink:href=\\"#Icon-project\\" />",
                  }
                }
                style={
                  Object {
                    "fill": "currentColor",
                  }
                }
              />
            </span>
            <span
              className="projtitle"
            >
              Zanata Server
            </span>
            <svg
              className="hide-desktop down"
            >
              <use
                xlinkHref="#Icon-chevron-down"
              />
            </svg>
          </a>
          <div
            className="accordion-section-content"
            id="accordion-1"
          >
            <ul
              className="nav nav-pills nav-stacked"
              role={null}
            >
              <li
                className="active"
                role="presentation"
                style={undefined}
              >
                <a
                  href="#"
                  onClick={[Function]}
                  role="button"
                >
                  <span
                    className="iconSidebar"
                  >
                    <svg
                      className="s1"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-users\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  People
                </a>
              </li>
              <li
                className=""
                role="presentation"
                style={undefined}
              >
                <a
                  href="#"
                  onClick={[Function]}
                  role="button"
                >
                  <span
                    className="iconSidebar"
                  >
                    <svg
                      className="s1"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-glossary\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  Glossary
                </a>
              </li>
              <li
                className=""
                role="presentation"
                style={undefined}
              >
                <a
                  href="#"
                  onClick={[Function]}
                  role="button"
                >
                  <span
                    className="iconSidebar"
                  >
                    <svg
                      className="s1"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-info\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  About
                </a>
              </li>
              <li
                className=""
                role="presentation"
                style={undefined}
              >
                <a
                  href="#"
                  onClick={[Function]}
                  role="button"
                >
                  <span
                    className="iconSidebar"
                  >
                    <svg
                      className="s1"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-settings\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  Settings 
                </a>
              </li>
            </ul>
            <div
              className="dropdown btn-group"
            >
              <button
                aria-expanded={false}
                aria-haspopup={true}
                className="btn-sm btn-default dropdown-toggle btn btn-default"
                disabled={false}
                id="optionsDropdown"
                onClick={[Function]}
                onKeyDown={[Function]}
                role="button"
                type="button"
              >
                Options
                 
                <span
                  className="caret"
                />
              </button>
              <ul
                aria-labelledby="optionsDropdown"
                className="dropdown-menu"
                role="menu"
              >
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Copy translations
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Merge translations
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Copy to new version
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Download config file
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Export project to TMX
                  </a>
                </li>
              </ul>
            </div>
            <div
              className="processing well"
            >
              <p
                className="task-title"
              >
                Task title
              </p>
              <p>
                <span>
                  Processing document 
                  <span
                    className="count"
                  >
                    1 of 10
                  </span>
                   
                  <span
                    className="count-pc"
                  >
                    12.50%
                  </span>
                </span>
              </p>
              <div
                className="progress-striped progress"
              >
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={12.5}
                  className="progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "12.5%",
                    }
                  }
                />
              </div>
              <button
                className="btn-danger btn-sm btn btn-default"
                disabled={false}
                type="button"
              >
                Stop
              </button>
            </div>
            <div
              id="sidebarVersion"
            >
              <div
                className="sidebarVersion-inline"
              >
                <span
                  className="sidebarVersion-title"
                >
                  <span
                    className=""
                  >
                    <svg
                      className="s2"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-version\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  <span
                    className="versionHeading"
                  >
                    VERSION
                  </span>
                </span>
                <div
                  className="dropdown btn-group"
                >
                  <button
                    aria-expanded={false}
                    aria-haspopup={true}
                    className="btn-sm btn-default dropdown-toggle btn btn-default"
                    disabled={false}
                    id="version-dropdown"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="button"
                    type="button"
                  >
                    master
                     
                    <span
                      className="caret"
                    />
                  </button>
                  <ul
                    aria-labelledby="version-dropdown"
                    className="dropdown-menu"
                    role="menu"
                  >
                    <li
                      className=""
                      role="presentation"
                      style={undefined}
                    >
                      <a
                        href="#"
                        onClick={[Function]}
                        onKeyDown={[Function]}
                        role="menuitem"
                        tabIndex="-1"
                      >
                        release
                      </a>
                    </li>
                    <li
                      className=""
                      role="presentation"
                      style={undefined}
                    >
                      <a
                        href="#"
                        onClick={[Function]}
                        onKeyDown={[Function]}
                        role="menuitem"
                        tabIndex="-1"
                      >
                        test-1
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
              <p
                className="sidebarVersion-settings"
              >
                <a
                  href=""
                >
                  Version settings
                </a>
              </p>
              <div
                className="sidebarVersion-percent"
              >
                <p>
                  <span
                    className="percent"
                  >
                    10%
                  </span>
                   translated
                </p>
              </div>
              <div
                className="progress"
              >
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={10}
                  className="progress-bar-success progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "10%",
                    }
                  }
                />
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={7}
                  className="progress-bar-warning progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "7%",
                    }
                  }
                />
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={3}
                  className="progress-bar-danger progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "3%",
                    }
                  }
                />
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={10}
                  className="progress-bar-info progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "10%",
                    }
                  }
                />
              </div>
              <ul
                className="v-links nav nav-pills nav-stacked"
                role={null}
              >
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    role="button"
                  >
                    Languages
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    role="button"
                  >
                    Documents
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    role="button"
                  >
                    Groups 
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    className="flexTab wideView"
  >
    <h2>
      Groups
    </h2>
    <div
      className="toolbar"
    >
      <div
        className="searchBox form-group"
      >
        <span
          className="input-group"
        >
          <input
            className="form-control"
            id={undefined}
            type="text"
            value="Search groups"
          />
          <span
            className="input-group-addon"
          >
            <span
              className=""
              title="search"
            >
              <svg
                className="s1"
                dangerouslySetInnerHTML={
                  Object {
                    "__html": "<use xlink:href=\\"#Icon-search\\" />",
                  }
                }
                style={
                  Object {
                    "fill": "currentColor",
                  }
                }
              />
            </span>
          </span>
        </span>
      </div>
      <div
        className="sortItems"
      >
        <select
          className="form-control"
          id="sort-options"
          type={undefined}
        >
          return
          <option>
            Last active
          </option>
          <option>
            Alphabetical
          </option>
        </select>
      </div>
      <div
        className="showItems u-pullRight"
      >
        <span>
          Show
        </span>
        <select
          className="form-control"
          id="page-size-options"
          type={undefined}
        >
          return
          <option>
            10
          </option>
          <option>
            25
          </option>
          <option>
            50
          </option>
          <option>
            100
          </option>
        </select>
      </div>
      <div
        className="pageCount col-xs-7 col-sm-8 col-md-12"
      >
        <ul
          className="pagination pagination-md"
        >
          <li
            className="disabled"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="button"
              style={
                Object {
                  "pointerEvents": "none",
                }
              }
              tabIndex={-1}
            >
              <span
                aria-label="Previous"
              >
                ‹
              </span>
            </a>
          </li>
          <li
            className="active"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="button"
            >
              1
            </a>
          </li>
          <li
            className="disabled"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="button"
              style={
                Object {
                  "pointerEvents": "none",
                }
              }
              tabIndex={-1}
            >
              <span
                aria-label="Next"
              >
                ›
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <table
      className="table table-striped table-hover"
    >
      <thead>
        <tr>
          <th>
            Name
          </th>
          <th>
            Members
          </th>
          <th>
            Last active
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            Zanata fanatics
          </td>
          <td>
            320
          </td>
          <td>
            3 days ago
          </td>
        </tr>
        <tr>
          <td>
            Japanese translator
          </td>
          <td>
            17
          </td>
          <td>
            5 days ago
          </td>
        </tr>
        <tr>
          <td>
            Word nerds
          </td>
          <td>
            58
          </td>
          <td>
            12 days ago
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
`;

exports[`Frontend Storyshots Sidebar LanguagesPage 1`] = `
<div>
  <div
    className="sidebar accordion"
  >
    <div
      className="sidebar-wrapper"
    >
      <div
        className="sidebar-container"
      >
        <div
          className="sidebar-content"
        >
          <a
            className="accordion-section-title"
            onClick={[Function]}
          >
            <span
              className="iconProject"
            >
              <svg
                className="s2"
                dangerouslySetInnerHTML={
                  Object {
                    "__html": "<use xlink:href=\\"#Icon-project\\" />",
                  }
                }
                style={
                  Object {
                    "fill": "currentColor",
                  }
                }
              />
            </span>
            <span
              className="projtitle"
            >
              Zanata Server
            </span>
            <svg
              className="hide-desktop down"
            >
              <use
                xlinkHref="#Icon-chevron-down"
              />
            </svg>
          </a>
          <div
            className="accordion-section-content"
            id="accordion-1"
          >
            <ul
              className="nav nav-pills nav-stacked"
              role={null}
            >
              <li
                className="active"
                role="presentation"
                style={undefined}
              >
                <a
                  href="#"
                  onClick={[Function]}
                  role="button"
                >
                  <span
                    className="iconSidebar"
                  >
                    <svg
                      className="s1"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-users\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  People
                </a>
              </li>
              <li
                className=""
                role="presentation"
                style={undefined}
              >
                <a
                  href="#"
                  onClick={[Function]}
                  role="button"
                >
                  <span
                    className="iconSidebar"
                  >
                    <svg
                      className="s1"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-glossary\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  Glossary
                </a>
              </li>
              <li
                className=""
                role="presentation"
                style={undefined}
              >
                <a
                  href="#"
                  onClick={[Function]}
                  role="button"
                >
                  <span
                    className="iconSidebar"
                  >
                    <svg
                      className="s1"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-info\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  About
                </a>
              </li>
              <li
                className=""
                role="presentation"
                style={undefined}
              >
                <a
                  href="#"
                  onClick={[Function]}
                  role="button"
                >
                  <span
                    className="iconSidebar"
                  >
                    <svg
                      className="s1"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-settings\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  Settings 
                </a>
              </li>
            </ul>
            <div
              className="dropdown btn-group"
            >
              <button
                aria-expanded={false}
                aria-haspopup={true}
                className="btn-sm btn-default dropdown-toggle btn btn-default"
                disabled={false}
                id="optionsDropdown"
                onClick={[Function]}
                onKeyDown={[Function]}
                role="button"
                type="button"
              >
                Options
                 
                <span
                  className="caret"
                />
              </button>
              <ul
                aria-labelledby="optionsDropdown"
                className="dropdown-menu"
                role="menu"
              >
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Copy translations
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Merge translations
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Copy to new version
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Download config file
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Export project to TMX
                  </a>
                </li>
              </ul>
            </div>
            <div
              className="processing well"
            >
              <p
                className="task-title"
              >
                Task title
              </p>
              <p>
                <span>
                  Processing document 
                  <span
                    className="count"
                  >
                    1 of 10
                  </span>
                   
                  <span
                    className="count-pc"
                  >
                    12.50%
                  </span>
                </span>
              </p>
              <div
                className="progress-striped progress"
              >
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={12.5}
                  className="progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "12.5%",
                    }
                  }
                />
              </div>
              <button
                className="btn-danger btn-sm btn btn-default"
                disabled={false}
                type="button"
              >
                Stop
              </button>
            </div>
            <div
              id="sidebarVersion"
            >
              <div
                className="sidebarVersion-inline"
              >
                <span
                  className="sidebarVersion-title"
                >
                  <span
                    className=""
                  >
                    <svg
                      className="s2"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-version\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  <span
                    className="versionHeading"
                  >
                    VERSION
                  </span>
                </span>
                <div
                  className="dropdown btn-group"
                >
                  <button
                    aria-expanded={false}
                    aria-haspopup={true}
                    className="btn-sm btn-default dropdown-toggle btn btn-default"
                    disabled={false}
                    id="version-dropdown"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="button"
                    type="button"
                  >
                    master
                     
                    <span
                      className="caret"
                    />
                  </button>
                  <ul
                    aria-labelledby="version-dropdown"
                    className="dropdown-menu"
                    role="menu"
                  >
                    <li
                      className=""
                      role="presentation"
                      style={undefined}
                    >
                      <a
                        href="#"
                        onClick={[Function]}
                        onKeyDown={[Function]}
                        role="menuitem"
                        tabIndex="-1"
                      >
                        release
                      </a>
                    </li>
                    <li
                      className=""
                      role="presentation"
                      style={undefined}
                    >
                      <a
                        href="#"
                        onClick={[Function]}
                        onKeyDown={[Function]}
                        role="menuitem"
                        tabIndex="-1"
                      >
                        test-1
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
              <p
                className="sidebarVersion-settings"
              >
                <a
                  href=""
                >
                  Version settings
                </a>
              </p>
              <div
                className="sidebarVersion-percent"
              >
                <p>
                  <span
                    className="percent"
                  >
                    10%
                  </span>
                   translated
                </p>
              </div>
              <div
                className="progress"
              >
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={10}
                  className="progress-bar-success progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "10%",
                    }
                  }
                />
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={7}
                  className="progress-bar-warning progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "7%",
                    }
                  }
                />
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={3}
                  className="progress-bar-danger progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "3%",
                    }
                  }
                />
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={10}
                  className="progress-bar-info progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "10%",
                    }
                  }
                />
              </div>
              <ul
                className="v-links nav nav-pills nav-stacked"
                role={null}
              >
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    role="button"
                  >
                    Languages
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    role="button"
                  >
                    Documents
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    role="button"
                  >
                    Groups 
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    className="flexTab wideView"
  >
    <h2>
      Languages
    </h2>
    <div
      className="toolbar"
    >
      <div
        className="searchBox form-group"
      >
        <span
          className="input-group"
        >
          <input
            className="form-control"
            id={undefined}
            type="text"
            value="Search languages"
          />
          <span
            className="input-group-addon"
          >
            <span
              className=""
              title="search"
            >
              <svg
                className="s1"
                dangerouslySetInnerHTML={
                  Object {
                    "__html": "<use xlink:href=\\"#Icon-search\\" />",
                  }
                }
                style={
                  Object {
                    "fill": "currentColor",
                  }
                }
              />
            </span>
          </span>
        </span>
      </div>
      <div
        className="sortItems"
      >
        <select
          className="form-control"
          id="sort-options"
          type={undefined}
        >
          return
          <option>
            Last active
          </option>
          <option>
            Alphabetical
          </option>
        </select>
      </div>
      <div
        className="showItems u-pullRight"
      >
        <span>
          Show
        </span>
        <select
          className="form-control"
          id="page-size-options"
          type={undefined}
        >
          return
          <option>
            10
          </option>
          <option>
            25
          </option>
          <option>
            50
          </option>
          <option>
            100
          </option>
        </select>
      </div>
      <div
        className="pageCount col-xs-7 col-sm-8 col-md-12"
      >
        <ul
          className="pagination pagination-md"
        >
          <li
            className="disabled"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="button"
              style={
                Object {
                  "pointerEvents": "none",
                }
              }
              tabIndex={-1}
            >
              <span
                aria-label="Previous"
              >
                ‹
              </span>
            </a>
          </li>
          <li
            className="active"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="button"
            >
              1
            </a>
          </li>
          <li
            className="disabled"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="button"
              style={
                Object {
                  "pointerEvents": "none",
                }
              }
              tabIndex={-1}
            >
              <span
                aria-label="Next"
              >
                ›
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <table
      className="table table-striped table-hover"
    >
      <thead>
        <tr>
          <th>
            Name
          </th>
          <th>
            Translated
          </th>
          <th>
            Last modified
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            Assamese
          </td>
          <td>
            100%
          </td>
          <td>
            3 days ago
          </td>
        </tr>
        <tr>
          <td
            className="progRow"
            colSpan="3"
          >
            <div
              className="progress"
            >
              <div
                aria-valuemax={100}
                aria-valuemin={0}
                aria-valuenow={100}
                className="progress-bar-success progress-bar"
                role="progressbar"
                style={
                  Object {
                    "width": "100%",
                  }
                }
              />
            </div>
          </td>
        </tr>
        <tr>
          <td>
            French
          </td>
          <td>
            33%
          </td>
          <td>
            5 days ago
          </td>
        </tr>
        <tr>
          <td
            className="progRow"
            colSpan="3"
          >
            <div
              className="progress"
            >
              <div
                aria-valuemax={100}
                aria-valuemin={0}
                aria-valuenow={33}
                className="progress-bar-success progress-bar"
                role="progressbar"
                style={
                  Object {
                    "width": "33%",
                  }
                }
              />
              <div
                aria-valuemax={100}
                aria-valuemin={0}
                aria-valuenow={7}
                className="progress-bar-warning progress-bar"
                role="progressbar"
                style={
                  Object {
                    "width": "7%",
                  }
                }
              />
              <div
                aria-valuemax={100}
                aria-valuemin={0}
                aria-valuenow={3}
                className="progress-bar-danger progress-bar"
                role="progressbar"
                style={
                  Object {
                    "width": "3%",
                  }
                }
              />
              <div
                aria-valuemax={100}
                aria-valuemin={0}
                aria-valuenow={10}
                className="progress-bar-info progress-bar"
                role="progressbar"
                style={
                  Object {
                    "width": "10%",
                  }
                }
              />
            </div>
          </td>
        </tr>
        <tr>
          <td>
            German
          </td>
          <td>
            10%
          </td>
          <td>
            12 days ago
          </td>
        </tr>
        <tr>
          <td
            className="progRow"
            colSpan="3"
          >
            <div
              className="progress"
            >
              <div
                aria-valuemax={100}
                aria-valuemin={0}
                aria-valuenow={10}
                className="progress-bar-success progress-bar"
                role="progressbar"
                style={
                  Object {
                    "width": "10%",
                  }
                }
              />
              <div
                aria-valuemax={100}
                aria-valuemin={0}
                aria-valuenow={7}
                className="progress-bar-warning progress-bar"
                role="progressbar"
                style={
                  Object {
                    "width": "7%",
                  }
                }
              />
              <div
                aria-valuemax={100}
                aria-valuemin={0}
                aria-valuenow={33}
                className="progress-bar-danger progress-bar"
                role="progressbar"
                style={
                  Object {
                    "width": "33%",
                  }
                }
              />
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
`;

exports[`Frontend Storyshots Sidebar PeoplePage 1`] = `
<div>
  <div
    className="sidebar accordion"
  >
    <div
      className="sidebar-wrapper"
    >
      <div
        className="sidebar-container"
      >
        <div
          className="sidebar-content"
        >
          <a
            className="accordion-section-title"
            onClick={[Function]}
          >
            <span
              className="iconProject"
            >
              <svg
                className="s2"
                dangerouslySetInnerHTML={
                  Object {
                    "__html": "<use xlink:href=\\"#Icon-project\\" />",
                  }
                }
                style={
                  Object {
                    "fill": "currentColor",
                  }
                }
              />
            </span>
            <span
              className="projtitle"
            >
              Zanata Server
            </span>
            <svg
              className="hide-desktop down"
            >
              <use
                xlinkHref="#Icon-chevron-down"
              />
            </svg>
          </a>
          <div
            className="accordion-section-content"
            id="accordion-1"
          >
            <ul
              className="nav nav-pills nav-stacked"
              role={null}
            >
              <li
                className="active"
                role="presentation"
                style={undefined}
              >
                <a
                  href="#"
                  onClick={[Function]}
                  role="button"
                >
                  <span
                    className="iconSidebar"
                  >
                    <svg
                      className="s1"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-users\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  People
                </a>
              </li>
              <li
                className=""
                role="presentation"
                style={undefined}
              >
                <a
                  href="#"
                  onClick={[Function]}
                  role="button"
                >
                  <span
                    className="iconSidebar"
                  >
                    <svg
                      className="s1"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-glossary\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  Glossary
                </a>
              </li>
              <li
                className=""
                role="presentation"
                style={undefined}
              >
                <a
                  href="#"
                  onClick={[Function]}
                  role="button"
                >
                  <span
                    className="iconSidebar"
                  >
                    <svg
                      className="s1"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-info\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  About
                </a>
              </li>
              <li
                className=""
                role="presentation"
                style={undefined}
              >
                <a
                  href="#"
                  onClick={[Function]}
                  role="button"
                >
                  <span
                    className="iconSidebar"
                  >
                    <svg
                      className="s1"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-settings\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  Settings 
                </a>
              </li>
            </ul>
            <div
              className="dropdown btn-group"
            >
              <button
                aria-expanded={false}
                aria-haspopup={true}
                className="btn-sm btn-default dropdown-toggle btn btn-default"
                disabled={false}
                id="optionsDropdown"
                onClick={[Function]}
                onKeyDown={[Function]}
                role="button"
                type="button"
              >
                Options
                 
                <span
                  className="caret"
                />
              </button>
              <ul
                aria-labelledby="optionsDropdown"
                className="dropdown-menu"
                role="menu"
              >
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Copy translations
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Merge translations
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Copy to new version
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Download config file
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Export project to TMX
                  </a>
                </li>
              </ul>
            </div>
            <div
              className="processing well"
            >
              <p
                className="task-title"
              >
                Task title
              </p>
              <p>
                <span>
                  Processing document 
                  <span
                    className="count"
                  >
                    1 of 10
                  </span>
                   
                  <span
                    className="count-pc"
                  >
                    12.50%
                  </span>
                </span>
              </p>
              <div
                className="progress-striped progress"
              >
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={12.5}
                  className="progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "12.5%",
                    }
                  }
                />
              </div>
              <button
                className="btn-danger btn-sm btn btn-default"
                disabled={false}
                type="button"
              >
                Stop
              </button>
            </div>
            <div
              id="sidebarVersion"
            >
              <div
                className="sidebarVersion-inline"
              >
                <span
                  className="sidebarVersion-title"
                >
                  <span
                    className=""
                  >
                    <svg
                      className="s2"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-version\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  <span
                    className="versionHeading"
                  >
                    VERSION
                  </span>
                </span>
                <div
                  className="dropdown btn-group"
                >
                  <button
                    aria-expanded={false}
                    aria-haspopup={true}
                    className="btn-sm btn-default dropdown-toggle btn btn-default"
                    disabled={false}
                    id="version-dropdown"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="button"
                    type="button"
                  >
                    master
                     
                    <span
                      className="caret"
                    />
                  </button>
                  <ul
                    aria-labelledby="version-dropdown"
                    className="dropdown-menu"
                    role="menu"
                  >
                    <li
                      className=""
                      role="presentation"
                      style={undefined}
                    >
                      <a
                        href="#"
                        onClick={[Function]}
                        onKeyDown={[Function]}
                        role="menuitem"
                        tabIndex="-1"
                      >
                        release
                      </a>
                    </li>
                    <li
                      className=""
                      role="presentation"
                      style={undefined}
                    >
                      <a
                        href="#"
                        onClick={[Function]}
                        onKeyDown={[Function]}
                        role="menuitem"
                        tabIndex="-1"
                      >
                        test-1
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
              <p
                className="sidebarVersion-settings"
              >
                <a
                  href=""
                >
                  Version settings
                </a>
              </p>
              <div
                className="sidebarVersion-percent"
              >
                <p>
                  <span
                    className="percent"
                  >
                    10%
                  </span>
                   translated
                </p>
              </div>
              <div
                className="progress"
              >
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={10}
                  className="progress-bar-success progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "10%",
                    }
                  }
                />
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={7}
                  className="progress-bar-warning progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "7%",
                    }
                  }
                />
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={3}
                  className="progress-bar-danger progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "3%",
                    }
                  }
                />
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={10}
                  className="progress-bar-info progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "10%",
                    }
                  }
                />
              </div>
              <ul
                className="v-links nav nav-pills nav-stacked"
                role={null}
              >
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    role="button"
                  >
                    Languages
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    role="button"
                  >
                    Documents
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    role="button"
                  >
                    Groups 
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    className="flexTab wideView"
  >
    <h2>
      People
    </h2>
    <div>
      <button
        className="btn btn-primary"
        disabled={false}
        id="btn-people-add-new"
        type="button"
      >
        <span
          className="plusicon"
          title="plus"
        >
          <svg
            className="n1"
            dangerouslySetInnerHTML={
              Object {
                "__html": "<use xlink:href=\\"#Icon-plus\\" />",
              }
            }
            style={
              Object {
                "fill": "currentColor",
              }
            }
          />
        </span>
          Add someone
      </button>
    </div>
    <div
      className="toolbar"
    >
      <div
        className="searchBox form-group"
      >
        <span
          className="input-group"
        >
          <input
            className="form-control"
            id={undefined}
            type="text"
            value="Search people"
          />
          <span
            className="input-group-addon"
          >
            <span
              className=""
              title="search"
            >
              <svg
                className="s1"
                dangerouslySetInnerHTML={
                  Object {
                    "__html": "<use xlink:href=\\"#Icon-search\\" />",
                  }
                }
                style={
                  Object {
                    "fill": "currentColor",
                  }
                }
              />
            </span>
          </span>
        </span>
      </div>
      <div
        className="sortItems"
      >
        <select
          className="form-control"
          id="sort-options"
          type={undefined}
        >
          return
          <option>
            Last active
          </option>
          <option>
            Alphabetical
          </option>
        </select>
      </div>
      <div
        className="showItems u-pullRight"
      >
        <span>
          Show
        </span>
        <select
          className="form-control"
          id="page-size-options"
          type={undefined}
        >
          return
          <option>
            10
          </option>
          <option>
            25
          </option>
          <option>
            50
          </option>
          <option>
            100
          </option>
        </select>
      </div>
      <div
        className="pageCount col-xs-7 col-sm-8 col-md-12"
      >
        <ul
          className="pagination pagination-md"
        >
          <li
            className="disabled"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="button"
              style={
                Object {
                  "pointerEvents": "none",
                }
              }
              tabIndex={-1}
            >
              <span
                aria-label="Previous"
              >
                ‹
              </span>
            </a>
          </li>
          <li
            className="active"
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="button"
            >
              1
            </a>
          </li>
          <li
            className=""
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="button"
            >
              2
            </a>
          </li>
          <li
            className=""
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="button"
            >
              3
            </a>
          </li>
          <li
            className=""
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="button"
            >
              4
            </a>
          </li>
          <li
            className=""
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="button"
            >
              5
            </a>
          </li>
          <li
            className=""
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="button"
            >
              6
            </a>
          </li>
          <li
            className=""
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="button"
            >
              7
            </a>
          </li>
          <li
            className=""
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="button"
            >
              8
            </a>
          </li>
          <li
            className=""
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="button"
            >
              9
            </a>
          </li>
          <li
            className=""
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="button"
            >
              10
            </a>
          </li>
          <li
            className=""
            style={undefined}
          >
            <a
              href="#"
              onClick={[Function]}
              role="button"
            >
              <span
                aria-label="Next"
              >
                ›
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <table
      className="table table-striped table-hover"
    >
      <thead>
        <tr>
          <th>
            Name
          </th>
          <th>
            Role
          </th>
          <th>
             
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            Admin
          </td>
          <td>
            Maintainer
          </td>
          <td>
            <button
              className="btn btn-default"
              disabled={false}
              type="button"
            >
              <span
                className=""
              >
                <svg
                  className="s0"
                  dangerouslySetInnerHTML={
                    Object {
                      "__html": "<use xlink:href=\\"#Icon-settings\\" />",
                    }
                  }
                  style={
                    Object {
                      "fill": "currentColor",
                    }
                  }
                />
              </span>
              Manage permissions
            </button>
          </td>
        </tr>
        <tr>
          <td>
            Tux
          </td>
          <td>
            Reviewer
          </td>
          <td>
            <button
              className="btn btn-default"
              disabled={false}
              type="button"
            >
              <span
                className=""
              >
                <svg
                  className="s0"
                  dangerouslySetInnerHTML={
                    Object {
                      "__html": "<use xlink:href=\\"#Icon-settings\\" />",
                    }
                  }
                  style={
                    Object {
                      "fill": "currentColor",
                    }
                  }
                />
              </span>
              Manage permissions
            </button>
          </td>
        </tr>
        <tr>
          <td>
            Alix
          </td>
          <td>
            Translator
          </td>
          <td>
            <button
              className="btn btn-default"
              disabled={false}
              type="button"
            >
              <span
                className=""
              >
                <svg
                  className="s0"
                  dangerouslySetInnerHTML={
                    Object {
                      "__html": "<use xlink:href=\\"#Icon-settings\\" />",
                    }
                  }
                  style={
                    Object {
                      "fill": "currentColor",
                    }
                  }
                />
              </span>
              Manage permissions
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
`;

exports[`Frontend Storyshots Sidebar default 1`] = `
<div>
  <div
    className="sidebar accordion"
  >
    <div
      className="sidebar-wrapper"
    >
      <div
        className="sidebar-container"
      >
        <div
          className="sidebar-content"
        >
          <a
            className="accordion-section-title"
            onClick={[Function]}
          >
            <span
              className="iconProject"
            >
              <svg
                className="s2"
                dangerouslySetInnerHTML={
                  Object {
                    "__html": "<use xlink:href=\\"#Icon-project\\" />",
                  }
                }
                style={
                  Object {
                    "fill": "currentColor",
                  }
                }
              />
            </span>
            <span
              className="projtitle"
            >
              Zanata Server
            </span>
            <svg
              className="hide-desktop down"
            >
              <use
                xlinkHref="#Icon-chevron-down"
              />
            </svg>
          </a>
          <div
            className="accordion-section-content"
            id="accordion-1"
          >
            <ul
              className="nav nav-pills nav-stacked"
              role={null}
            >
              <li
                className="active"
                role="presentation"
                style={undefined}
              >
                <a
                  href="#"
                  onClick={[Function]}
                  role="button"
                >
                  <span
                    className="iconSidebar"
                  >
                    <svg
                      className="s1"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-users\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  People
                </a>
              </li>
              <li
                className=""
                role="presentation"
                style={undefined}
              >
                <a
                  href="#"
                  onClick={[Function]}
                  role="button"
                >
                  <span
                    className="iconSidebar"
                  >
                    <svg
                      className="s1"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-glossary\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  Glossary
                </a>
              </li>
              <li
                className=""
                role="presentation"
                style={undefined}
              >
                <a
                  href="#"
                  onClick={[Function]}
                  role="button"
                >
                  <span
                    className="iconSidebar"
                  >
                    <svg
                      className="s1"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-info\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  About
                </a>
              </li>
              <li
                className=""
                role="presentation"
                style={undefined}
              >
                <a
                  href="#"
                  onClick={[Function]}
                  role="button"
                >
                  <span
                    className="iconSidebar"
                  >
                    <svg
                      className="s1"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-settings\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  Settings 
                </a>
              </li>
            </ul>
            <div
              className="dropdown btn-group"
            >
              <button
                aria-expanded={false}
                aria-haspopup={true}
                className="btn-sm btn-default dropdown-toggle btn btn-default"
                disabled={false}
                id="optionsDropdown"
                onClick={[Function]}
                onKeyDown={[Function]}
                role="button"
                type="button"
              >
                Options
                 
                <span
                  className="caret"
                />
              </button>
              <ul
                aria-labelledby="optionsDropdown"
                className="dropdown-menu"
                role="menu"
              >
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Copy translations
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Merge translations
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Copy to new version
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Download config file
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="menuitem"
                    tabIndex="-1"
                  >
                    Export project to TMX
                  </a>
                </li>
              </ul>
            </div>
            <div
              className="processing well"
            >
              <p
                className="task-title"
              >
                Task title
              </p>
              <p>
                <span>
                  Processing document 
                  <span
                    className="count"
                  >
                    1 of 10
                  </span>
                   
                  <span
                    className="count-pc"
                  >
                    12.50%
                  </span>
                </span>
              </p>
              <div
                className="progress-striped progress"
              >
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={12.5}
                  className="progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "12.5%",
                    }
                  }
                />
              </div>
              <button
                className="btn-danger btn-sm btn btn-default"
                disabled={false}
                type="button"
              >
                Stop
              </button>
            </div>
            <div
              id="sidebarVersion"
            >
              <div
                className="sidebarVersion-inline"
              >
                <span
                  className="sidebarVersion-title"
                >
                  <span
                    className=""
                  >
                    <svg
                      className="s2"
                      dangerouslySetInnerHTML={
                        Object {
                          "__html": "<use xlink:href=\\"#Icon-version\\" />",
                        }
                      }
                      style={
                        Object {
                          "fill": "currentColor",
                        }
                      }
                    />
                  </span>
                  <span
                    className="versionHeading"
                  >
                    VERSION
                  </span>
                </span>
                <div
                  className="dropdown btn-group"
                >
                  <button
                    aria-expanded={false}
                    aria-haspopup={true}
                    className="btn-sm btn-default dropdown-toggle btn btn-default"
                    disabled={false}
                    id="version-dropdown"
                    onClick={[Function]}
                    onKeyDown={[Function]}
                    role="button"
                    type="button"
                  >
                    master
                     
                    <span
                      className="caret"
                    />
                  </button>
                  <ul
                    aria-labelledby="version-dropdown"
                    className="dropdown-menu"
                    role="menu"
                  >
                    <li
                      className=""
                      role="presentation"
                      style={undefined}
                    >
                      <a
                        href="#"
                        onClick={[Function]}
                        onKeyDown={[Function]}
                        role="menuitem"
                        tabIndex="-1"
                      >
                        release
                      </a>
                    </li>
                    <li
                      className=""
                      role="presentation"
                      style={undefined}
                    >
                      <a
                        href="#"
                        onClick={[Function]}
                        onKeyDown={[Function]}
                        role="menuitem"
                        tabIndex="-1"
                      >
                        test-1
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
              <p
                className="sidebarVersion-settings"
              >
                <a
                  href=""
                >
                  Version settings
                </a>
              </p>
              <div
                className="sidebarVersion-percent"
              >
                <p>
                  <span
                    className="percent"
                  >
                    10%
                  </span>
                   translated
                </p>
              </div>
              <div
                className="progress"
              >
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={10}
                  className="progress-bar-success progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "10%",
                    }
                  }
                />
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={7}
                  className="progress-bar-warning progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "7%",
                    }
                  }
                />
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={3}
                  className="progress-bar-danger progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "3%",
                    }
                  }
                />
                <div
                  aria-valuemax={100}
                  aria-valuemin={0}
                  aria-valuenow={10}
                  className="progress-bar-info progress-bar"
                  role="progressbar"
                  style={
                    Object {
                      "width": "10%",
                    }
                  }
                />
              </div>
              <ul
                className="v-links nav nav-pills nav-stacked"
                role={null}
              >
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    role="button"
                  >
                    Languages
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    role="button"
                  >
                    Documents
                  </a>
                </li>
                <li
                  className=""
                  role="presentation"
                  style={undefined}
                >
                  <a
                    href="#"
                    onClick={[Function]}
                    role="button"
                  >
                    Groups 
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    className="flexTab"
  >
    <p>
      This sidebar example has the active tag applied to both the People and Languages pages to provide examples of how this design handles sidebar links.
    </p>
    <p>
      The sidebar nav has been implemented using  
      <a
        href="https://react-bootstrap.github.io/components.html#navs"
      >
        react bootstrap components
      </a>
      .
    </p>
  </div>
</div>
`;

exports[`Frontend Storyshots Table default 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Table
  </h2>
  <div
    className="well well-lg"
  >
    Use tables to display data - not for layouts. Use the 
    <code>
      striped
    </code>
    , 
    <code>
      bordered
    </code>
    , 
    <code>
      condensed
    </code>
     and 
    <code>
      hover
    </code>
     props to customise the table.
  </div>
  <table
    className="table table-striped table-bordered table-condensed table-hover"
  >
    <thead>
      <tr>
        <th>
          #
        </th>
        <th>
          First Name
        </th>
        <th>
          Last Name
        </th>
        <th>
          Username
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          1
        </td>
        <td>
          Mark
        </td>
        <td>
          Otto
        </td>
        <td>
          @mdo
        </td>
      </tr>
      <tr>
        <td>
          2
        </td>
        <td>
          Jacob
        </td>
        <td>
          Thornton
        </td>
        <td>
          @fat
        </td>
      </tr>
      <tr>
        <td>
          3
        </td>
        <td
          colSpan="2"
        >
          Larry the Bird
        </td>
        <td>
          @twitter
        </td>
      </tr>
    </tbody>
  </table>
  <h3>
    Responsive tables
  </h3>
  <p>
    Add 
    <code>
      responsive
    </code>
     prop to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
  </p>
  <hr />
  <h3>
    Props
  </h3>
  <table
    className="table table-striped table-bordered table-condensed table-hover"
  >
    <thead>
      <tr>
        <th>
          Name
        </th>
        <th>
          Type
        </th>
        <th>
          Default
        </th>
        <th>
          Description
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          bordered
        </td>
        <td>
          boolean
        </td>
        <td>
          false
        </td>
        <td />
      </tr>
      <tr>
        <td>
          bsClass
        </td>
        <td>
          string
        </td>
        <td>
          'progress-bar'
        </td>
        <td>
          Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
        </td>
      </tr>
      <tr>
        <td>
          condensed
        </td>
        <td>
          boolean
        </td>
        <td>
          false
        </td>
        <td />
      </tr>
      <tr>
        <td>
          hover
        </td>
        <td>
          boolean
        </td>
        <td>
          false
        </td>
        <td />
      </tr>
      <tr>
        <td>
          responsive
        </td>
        <td>
          boolean
        </td>
        <td>
          false
        </td>
        <td />
      </tr>
      <tr>
        <td>
          striped
        </td>
        <td>
          boolean
        </td>
        <td>
          false
        </td>
        <td />
      </tr>
    </tbody>
  </table>
</span>
`;

exports[`Frontend Storyshots Tabs horizontal 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Tabs - horizontal
  </h2>
  <div
    className="well well-lg"
  >
    Add quick, dynamic tab functionality to transition through panes of local content.
    <hr />
    <ul>
      <li>
        <a
          href=""
        >
          Props for react-bootstrap Tabs
        </a>
      </li>
    </ul>
  </div>
  <div
    className={undefined}
    id="uncontrolled-tab-example"
    style={undefined}
  >
    <ul
      className="nav nav-tabs"
      role="tablist"
    >
      <li
        className=""
        role="presentation"
        style={undefined}
      >
        <a
          aria-controls="uncontrolled-tab-example-pane-1"
          aria-selected={false}
          href="#"
          id="uncontrolled-tab-example-tab-1"
          onClick={[Function]}
          onKeyDown={[Function]}
          role="tab"
          tabIndex={-1}
        >
          Tab 1
        </a>
      </li>
      <li
        className="active"
        role="presentation"
        style={undefined}
      >
        <a
          aria-controls="uncontrolled-tab-example-pane-2"
          aria-selected={true}
          href="#"
          id="uncontrolled-tab-example-tab-2"
          onClick={[Function]}
          onKeyDown={[Function]}
          role="tab"
          tabIndex={undefined}
        >
          Tab 2
        </a>
      </li>
      <li
        className="disabled"
        role="presentation"
        style={undefined}
      >
        <a
          aria-controls="uncontrolled-tab-example-pane-3"
          aria-selected={false}
          href="#"
          id="uncontrolled-tab-example-tab-3"
          onClick={[Function]}
          onKeyDown={[Function]}
          role="tab"
          style={
            Object {
              "pointerEvents": "none",
            }
          }
          tabIndex={-1}
        >
          Tab 3
        </a>
      </li>
    </ul>
    <div
      className="tab-content"
    >
      <div
        aria-hidden={true}
        aria-labelledby="uncontrolled-tab-example-tab-1"
        className="contentViewContainer tab-pane fade"
        id="uncontrolled-tab-example-pane-1"
        role="tabpanel"
      >
        Tab 1 content
      </div>
      <div
        aria-hidden={false}
        aria-labelledby="uncontrolled-tab-example-tab-2"
        className="contentViewContainer tab-pane active fade in"
        id="uncontrolled-tab-example-pane-2"
        role="tabpanel"
      >
        Tab 2 content
      </div>
      <div
        aria-hidden={true}
        aria-labelledby="uncontrolled-tab-example-tab-3"
        className="contentViewContainer tab-pane fade"
        id="uncontrolled-tab-example-pane-3"
        role="tabpanel"
      >
        Tab 3 content
      </div>
    </div>
  </div>
  <hr />
  <h3>
    Custom tab layouts
  </h3>
  <p>
    For more complex layouts the flexible 
    <code>
      TabContainer
    </code>
    , 
    <code>
      TabContent
    </code>
    , and 
    <code>
      TabPane
    </code>
     components along with any style of 
    <code>
      Nav
    </code>
     allow you to quickly piece together your own Tabs component with additional markup needed. Just create a set of 
    <code>
      NavItems
    </code>
     each with an 
    <code>
      eventKey
    </code>
     corresponding to the eventKey of a 
    <code>
      TabPane
    </code>
    . Wrap the whole thing in a 
    <code>
      TabContainer
    </code>
     and you have fully functioning custom tabs component. Check out the below example making use of the grid system and pills.
  </p>
</span>
`;

exports[`Frontend Storyshots Tabs vertical 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Tabs - vertical
  </h2>
  <div
    className="contentViewContainer row"
    id="left-tabs-example"
  >
    <div
      className="col-sm-4"
    >
      <ul
        className="nav nav-pills nav-stacked"
        role="tablist"
      >
        <li
          className="active"
          role="presentation"
          style={undefined}
        >
          <a
            aria-controls="left-tabs-example-pane-first"
            aria-selected={true}
            href="#"
            id="left-tabs-example-tab-first"
            onClick={[Function]}
            onKeyDown={[Function]}
            role="tab"
            tabIndex={undefined}
          >
            Tab 1
          </a>
        </li>
        <li
          className=""
          role="presentation"
          style={undefined}
        >
          <a
            aria-controls="left-tabs-example-pane-second"
            aria-selected={false}
            href="#"
            id="left-tabs-example-tab-second"
            onClick={[Function]}
            onKeyDown={[Function]}
            role="tab"
            tabIndex={-1}
          >
            Tab 2
          </a>
        </li>
      </ul>
    </div>
    <div
      className="col-sm-8"
    >
      <div
        className="tab-content"
      >
        <div
          aria-hidden={false}
          aria-labelledby="left-tabs-example-tab-first"
          className="tab-pane active fade in"
          id="left-tabs-example-pane-first"
          role="tabpanel"
        >
          Tab 1 content
        </div>
        <div
          aria-hidden={true}
          aria-labelledby="left-tabs-example-tab-second"
          className="tab-pane fade"
          id="left-tabs-example-pane-second"
          role="tabpanel"
        >
          Tab 2 content
        </div>
      </div>
    </div>
  </div>
  <hr />
  <p>
    <code>
      Nav bsStyle="pills" stacked
    </code>
  </p>
</span>
`;

exports[`Frontend Storyshots TextInput default 1`] = `
<span>
  <h2>
    <img
      src="https://upload.wikimedia.org/wikipedia/commons/4/49/Zanata-Logo.svg"
      width="42px"
    />
     TextInput
  </h2>
  <div
    className="well well-lg"
  >
    Basic text input field
  </div>
  <input
    aria-label="TextInput"
    autoComplete={undefined}
    autoFocus={undefined}
    className="textInput"
    id="demo"
    onBlur={undefined}
    onChange={undefined}
    onFocus={[Function]}
    onKeyDown={[Function]}
    onSelect={undefined}
    placeholder="TextInput…"
    readOnly={false}
    type={undefined}
    value={undefined}
  />
</span>
`;

exports[`Frontend Storyshots Tooltip default 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Tooltip
  </h2>
  <div
    className="well well-lg"
  >
    Tooltip component for a more stylish alternative to that anchor tag 
    <code>
      title
    </code>
     attribute. Attach and position tooltips with 
    <code>
      OverlayTrigger
    </code>
    .
    <hr />
    <ul>
      <li>
        <a
          href="https://react-bootstrap.github.io/components.html#tooltips-props"
        >
          Props for react-bootstrap Tooltips
        </a>
      </li>
    </ul>
  </div>
  <div
    className="btn-toolbar"
    role="toolbar"
  >
    <button
      className="btn btn-default"
      disabled={false}
      onBlur={[Function]}
      onClick={null}
      onFocus={[Function]}
      onMouseOut={[Function]}
      onMouseOver={[Function]}
      type="button"
    >
      Holy guacamole!
    </button>
    <button
      className="btn btn-default"
      disabled={false}
      onBlur={[Function]}
      onClick={null}
      onFocus={[Function]}
      onMouseOut={[Function]}
      onMouseOver={[Function]}
      type="button"
    >
      Holy guacamole!
    </button>
    <button
      className="btn btn-default"
      disabled={false}
      onBlur={[Function]}
      onClick={null}
      onFocus={[Function]}
      onMouseOut={[Function]}
      onMouseOver={[Function]}
      type="button"
    >
      Holy guacamole!
    </button>
    <button
      className="btn btn-default"
      disabled={false}
      onBlur={[Function]}
      onClick={null}
      onFocus={[Function]}
      onMouseOut={[Function]}
      onMouseOver={[Function]}
      type="button"
    >
      Holy guacamole!
    </button>
  </div>
</span>
`;

exports[`Frontend Storyshots TriCheckbox checkbox group 1`] = `
<div>
  <h3>
    Checkbox group with tri-state control
  </h3>
  <ul
    className="list-group"
  >
    <li
      className="list-group-item"
    >
      <input
        checked={false}
        className="triCheckbox"
        onChange={[Function]}
        type="checkbox"
      />
      <label>
        Fruits
      </label>
    </li>
    <li
      className="list-group-item"
    >
      <input
        checked={false}
        className="triCheckbox"
        name="リンゴ"
        onChange={[Function]}
        type="checkbox"
      />
      リンゴ
    </li>
    <li
      className="list-group-item"
    >
      <input
        checked={false}
        className="triCheckbox"
        name="apple"
        onChange={[Function]}
        type="checkbox"
      />
      apple
    </li>
    <li
      className="list-group-item"
    >
      <input
        checked={false}
        className="triCheckbox"
        name="梨"
        onChange={[Function]}
        type="checkbox"
      />
      梨
    </li>
    <li
      className="list-group-item"
    >
      <input
        checked={false}
        className="triCheckbox"
        name="pear"
        onChange={[Function]}
        type="checkbox"
      />
      pear
    </li>
  </ul>
</div>
`;

exports[`Frontend Storyshots TriCheckbox default 1`] = `
<div>
  <h2>
    <img
      src="https://upload.wikimedia.org/wikipedia/commons/4/49/Zanata-Logo.svg"
      width="42px"
    />
     TriCheckbox
  </h2>
  <div
    className="well well-lg"
  >
    Checkbox with intermediate setting to indicate part of a list of checkbox items is selected.
  </div>
  <h3>
    Setting Intermediate
  </h3>
  <div>
    <input
      checked={false}
      className=""
      onChange={[Function]}
      type="checkbox"
    />
    <button
      onClick={[Function]}
    >
      Make intermediate
    </button>
  </div>
</div>
`;

exports[`Frontend Storyshots TriCheckbox truth table 1`] = `
<div>
  <h2>
    Truth Table
  </h2>
  <table
    className="table table-striped table-bordered table-condensed table-hover"
  >
    <tbody>
      <tr>
        <th>
          checked
        </th>
        <th>
          intermediate
        </th>
        <th>
          expected
        </th>
        <th>
          appearance
        </th>
      </tr>
      <tr>
        <td>
          false
        </td>
        <td>
          false
        </td>
        <td>
          unchecked
        </td>
        <td>
          <div>
            <input
              checked={false}
              className=""
              onChange={[Function]}
              type="checkbox"
            />
          </div>
        </td>
      </tr>
      <tr>
        <td>
          false
        </td>
        <td>
          true
        </td>
        <td>
          intermediate
        </td>
        <td>
          <div>
            <input
              checked={false}
              className=""
              onChange={[Function]}
              type="checkbox"
            />
          </div>
        </td>
      </tr>
      <tr>
        <td>
          true
        </td>
        <td>
          false
        </td>
        <td>
          checked
        </td>
        <td>
          <div>
            <input
              checked={true}
              className=""
              onChange={[Function]}
              type="checkbox"
            />
          </div>
        </td>
      </tr>
      <tr>
        <td>
          true
        </td>
        <td>
          true
        </td>
        <td>
          intermediate
        </td>
        <td>
          <div>
            <input
              checked={true}
              className=""
              onChange={[Function]}
              type="checkbox"
            />
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
`;

exports[`Frontend Storyshots TriCheckbox with custom styles 1`] = `
<div>
  <h2>
    Passing custom styles through props
  </h2>
  <div
    className="col-xs-4"
  >
    <h3>
      unstyled
    </h3>
    <div>
      <input
        checked={true}
        className=""
        onChange={[Function]}
        type="checkbox"
      />
    </div>
    <div>
      <input
        checked={false}
        className=""
        onChange={[Function]}
        type="checkbox"
      />
    </div>
    <div>
      <input
        checked={false}
        className=""
        onChange={[Function]}
        type="checkbox"
      />
    </div>
  </div>
  <div
    className="col-xs-4"
  >
    <h3>
      default style
    </h3>
    <div>
      <input
        checked={true}
        className="triCheckbox"
        onChange={[Function]}
        type="checkbox"
      />
    </div>
    <div>
      <input
        checked={false}
        className="triCheckbox"
        onChange={[Function]}
        type="checkbox"
      />
    </div>
    <div>
      <input
        checked={false}
        className="triCheckbox"
        onChange={[Function]}
        type="checkbox"
      />
    </div>
  </div>
  <div
    className="col-xs-4"
  >
    <h3>
      s1 class
    </h3>
    <div>
      <input
        checked={true}
        className="triCheckbox s1"
        onChange={[Function]}
        type="checkbox"
      />
    </div>
    <div>
      <input
        checked={false}
        className="triCheckbox s1"
        onChange={[Function]}
        type="checkbox"
      />
    </div>
    <div>
      <input
        checked={false}
        className="triCheckbox s1"
        onChange={[Function]}
        type="checkbox"
      />
    </div>
  </div>
</div>
`;

exports[`Frontend Storyshots VersionTMMergeModal disabled TM 1`] = `
<div
  className="static-modal"
/>
`;

exports[`Frontend Storyshots VersionTMMergeModal no version selected 1`] = `
<div
  className="static-modal"
/>
`;

exports[`Frontend Storyshots VersionTMMergeModal version selected 1`] = `
<div
  className="static-modal"
/>
`;

exports[`Frontend Storyshots Well default 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Well
  </h2>
  <div
    className="well well-lg"
  >
    Use the well as a simple effect on an element to give it an inset effect.
  </div>
  <div
    className="well"
  >
    Look I'm in a well! 
    <a
      href="#"
    >
      I am a link in a well!
    </a>
  </div>
  <hr />
  <h3>
    Props
  </h3>
  <table
    className="table table-striped table-bordered table-condensed table-hover"
  >
    <thead>
      <tr>
        <th>
          Name
        </th>
        <th>
          Type
        </th>
        <th>
          Default
        </th>
        <th>
          Description
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          bsClass
        </td>
        <td>
          string
        </td>
        <td>
          'btn'
        </td>
        <td>
          Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.
        </td>
      </tr>
      <tr>
        <td>
          bsSize
        </td>
        <td>
          one of: 
          <code>
            "lg"
          </code>
          , 
          <code>
            "large"
          </code>
          , 
          <code>
            "sm"
          </code>
          , 
          <code>
            "small"
          </code>
          , 
          <code>
            "xs"
          </code>
          , 
          <code>
            "xsmall"
          </code>
        </td>
        <td />
        <td>
          Component size variations
        </td>
      </tr>
    </tbody>
  </table>
</span>
`;

exports[`Frontend Storyshots Well large 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Well - large
  </h2>
  <div
    className="well well-lg"
  >
    Look I'm in a large well!
  </div>
  <p>
    <code>
      bsSize="large"
    </code>
  </p>
</span>
`;

exports[`Frontend Storyshots Well small 1`] = `
<span>
  <h2>
    <img
      src="https://i.imgur.com/v4qLk4p.png"
      width="42px"
    />
    Well - small
  </h2>
  <div
    className="well well-sm"
  >
    Look I'm in a small well!
  </div>
  <p>
    <code>
      bsSize="small"
    </code>
  </p>
</span>
`;