@retailmenot/anchor/commonjs/avatar.js

A React UI Library by RetailMeNot

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var __chunk_1 = require('./anchor-chunk-24f232e7.js');
var __chunk_2 = require('./anchor-chunk-9d9a5df6.js');
var React = require('react');
var classNames = _interopDefault(require('classnames'));
var styled = require('@xstyled/styled-components');
var styled__default = _interopDefault(styled);
var system = require('@xstyled/system');

function _templateObject2() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    flex: 0 0 1.625rem;\n    width: 1.625rem;\n    height: 1.625rem;\n    font-family: base;\n    font-size: 0.75rem;\n    font-weight: bold;\n    color: text.base;\n    background-color: background.base;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: circular;\n    overflow: hidden;\n\n    img {\n        flex: 0 0 100%;\n        max-width: 100%;\n    }\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    border: solid 0.1875rem rgba(255, 255, 255, 0.4);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 2rem;\n    width: 2rem;\n    border-radius: circular;\n\n    svg {\n        justify-self: baseline;\n        height: 1.5rem;\n        margin-bottom: -0.375rem;\n    }\n    ", "\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
/* eslint-disable max-len */

var DefaultAvatar = function DefaultAvatar() {
  return React.createElement("svg", {
    width: "36",
    height: "36",
    viewBox: "0 0 22 22",
    xmlns: "http://www.w3.org/2000/svg"
  }, React.createElement("path", {
    d: "M22 20.427c0 .869-.704 1.573-1.571 1.573H1.57A1.572 1.572 0 0 1 0 20.427V18.95c0-3.527 2.805-6.392 6.254-6.392h.038v-.001c1.315.993 2.934 1.604 4.708 1.604s3.393-.611 4.708-1.604v.001h.038c3.449 0 6.254 2.865 6.254 6.392v1.476zM11 0a6.29 6.29 0 0 1 6.286 6.294A6.29 6.29 0 0 1 11 12.59a6.29 6.29 0 0 1-6.286-6.295A6.29 6.29 0 0 1 11 0z",
    fill: "#A6A6A6"
  }));
};
/* eslint-enable max-len */


var StyledAvatar = styled__default('div')(_templateObject(), system.space);
var InnerBorder = styled__default('div')(_templateObject2());
var Avatar = function Avatar(_a) {
  var className = _a.className,
      src = _a.src,
      label = _a.label,
      alt = _a.alt,
      props = __chunk_2.__rest(_a, ["className", "src", "label", "alt"]);

  return React.createElement(StyledAvatar, Object.assign({
    className: classNames('anchor-avatar', className)
  }, props), React.createElement(InnerBorder, {
    className: "anchor-avatar-container"
  }, label && label.substr(0, 2).toUpperCase(), src && React.createElement("img", {
    src: src,
    alt: alt ? alt : 'Anchor Avatar'
  }), !label && !src && React.createElement(DefaultAvatar, null)));
};

exports.Avatar = Avatar;
//# sourceMappingURL=avatar.js.map