wix-style-react/dist/stories/Avatar/Avatar.story.js

wix-style-react

'use strict';

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

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _wixUiIconsCommon = require('wix-ui-icons-common');

var icons = _interopRequireWildcard(_wixUiIconsCommon);

var _Avatar = require('../../src/Avatar');

var _Avatar2 = _interopRequireDefault(_Avatar);

var _storySettings = require('./storySettings');

var _AvatarStory = require('./AvatarStory.scss');

var _AvatarStory2 = _interopRequireDefault(_AvatarStory);

var _LiveCodeExample = require('../utils/Components/LiveCodeExample');

var _LiveCodeExample2 = _interopRequireDefault(_LiveCodeExample);

var _Layout = require('../../src/Layout');

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var IMG_REAL_URL = 'https://randomuser.me/api/portraits/women/39.jpg';
var IMG_INVALID_URL = 'https://1234.me/4321.jpg';

exports.default = {
  category: _storySettings.storySettings.category,
  storyName: _storySettings.storySettings.storyName,
  component: _Avatar2.default,
  componentPath: '../../src/Avatar/Avatar.js',

  componentProps: {
    dataHook: _storySettings.storySettings.dataHook,
    name: 'John Doe',
    placeholder: undefined,
    imgProps: undefined,
    size: undefined,
    color: undefined,
    text: undefined,
    title: 'Wix Account: John Doe (johndoe@gmail.com)',
    ariaLabel: 'Avatar for John Doe'
  },
  exampleProps: {
    size: ['size90', 'size72', 'size60', 'size48', 'size36', 'size30', 'size24', 'size18'],
    color: ['blue', 'green', 'grey', 'red', 'orange'],
    imgProps: [{ label: 'With Image', value: { src: IMG_REAL_URL } }, { label: 'With Invalid Image URL', value: { src: IMG_INVALID_URL } }],
    placeholder: Object.entries(icons).map(function (_ref) {
      var _ref2 = _slicedToArray(_ref, 2),
          name = _ref2[0],
          icon = _ref2[1];

      return {
        label: name,
        value: _react2.default.createElement(icon)
      };
    })
  },
  examples: _react2.default.createElement(
    _Layout.Layout,
    null,
    _react2.default.createElement(
      _Layout.Cell,
      { span: 6 },
      _react2.default.createElement(_LiveCodeExample2.default, {
        compact: true,
        title: 'Image',
        initialCode: '\n<Avatar \n  imgProps={{src: \'https://randomuser.me/api/portraits/women/39.jpg\'}}\n/>'
      })
    ),
    _react2.default.createElement(
      _Layout.Cell,
      { span: 6 },
      _react2.default.createElement(_LiveCodeExample2.default, {
        compact: true,
        title: 'Image Error (Icon Placeholder)',
        initialCode: '\n<Avatar \n  imgProps={{src: \'https://1234.me/4321.jpg\'}}\n/>'
      })
    ),
    _react2.default.createElement(
      _Layout.Cell,
      { span: 6 },
      _react2.default.createElement(_LiveCodeExample2.default, {
        compact: true,
        title: 'Image Error (Initials Placeholder)',
        initialCode: '\n<Avatar \n  name="John Doe"\n  imgProps={{src: \'https://1234.me/4321.jpg\'}}\n/>'
      })
    ),
    _react2.default.createElement(
      _Layout.Cell,
      null,
      _react2.default.createElement(_LiveCodeExample2.default, {
        compact: true,
        scope: { styles: _AvatarStory2.default },
        title: 'Sizes',
        initialCode: '\n<div className={styles.container}>\n  <Avatar size="size90" name={\'John Doe\'} />\n  <Avatar size="size72" name={\'John Doe\'} />\n  <Avatar size="size60" name={\'John Doe\'} />\n  <Avatar size="size48" name={\'John Doe\'} />\n  <Avatar size="size36" name={\'John Doe\'} />\n  <Avatar size="size30" name={\'John Doe\'} />\n  <Avatar size="size24" name={\'John Doe\'} />\n  <Avatar size="size18" name={\'John Doe\'} />\n</div>  \n  '
      })
    ),
    _react2.default.createElement(
      _Layout.Cell,
      null,
      _react2.default.createElement(_LiveCodeExample2.default, {
        compact: true,
        scope: { styles: _AvatarStory2.default },
        title: 'Colors',
        initialCode: '\n<div className={styles.container}>\n  <Avatar color="blue"   name={\'John Doe\'} />\n  <Avatar color="green"  name={\'John Doe\'} />\n  <Avatar color="grey"   name={\'John Doe\'} />\n  <Avatar color="red"    name={\'John Doe\'} />\n  <Avatar color="orange" name={\'John Doe\'} />  \n</div>  \n  '
      })
    ),
    _react2.default.createElement(
      _Layout.Cell,
      { span: 6 },
      _react2.default.createElement(_LiveCodeExample2.default, {
        compact: true,
        title: 'Placeholder (No name)',
        initialCode: '<Avatar />'
      })
    ),
    _react2.default.createElement(
      _Layout.Cell,
      null,
      _react2.default.createElement(_LiveCodeExample2.default, {
        compact: true,
        title: 'Custom text',
        initialCode: '<Avatar name="John H. Doe" text="JhD"/>'
      })
    )
  )
};