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

wix-style-react

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"); } }; }();

import React from 'react';
import * as icons from 'wix-ui-icons-common';

import Avatar from '../../src/Avatar';
import { storySettings } from './storySettings';
import styles from './AvatarStory.scss';

import LiveCodeExample from '../utils/Components/LiveCodeExample';
import { Layout, Cell } from '../../src/Layout';

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

export default {
  category: storySettings.category,
  storyName: storySettings.storyName,
  component: Avatar,
  componentPath: '../../src/Avatar/Avatar.js',

  componentProps: {
    dataHook: 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: React.createElement(icon)
      };
    })
  },
  examples: React.createElement(
    Layout,
    null,
    React.createElement(
      Cell,
      { span: 6 },
      React.createElement(LiveCodeExample, {
        compact: true,
        title: 'Image',
        initialCode: '\n<Avatar \n  imgProps={{src: \'https://randomuser.me/api/portraits/women/39.jpg\'}}\n/>'
      })
    ),
    React.createElement(
      Cell,
      { span: 6 },
      React.createElement(LiveCodeExample, {
        compact: true,
        title: 'Image Error (Icon Placeholder)',
        initialCode: '\n<Avatar \n  imgProps={{src: \'https://1234.me/4321.jpg\'}}\n/>'
      })
    ),
    React.createElement(
      Cell,
      { span: 6 },
      React.createElement(LiveCodeExample, {
        compact: true,
        title: 'Image Error (Initials Placeholder)',
        initialCode: '\n<Avatar \n  name="John Doe"\n  imgProps={{src: \'https://1234.me/4321.jpg\'}}\n/>'
      })
    ),
    React.createElement(
      Cell,
      null,
      React.createElement(LiveCodeExample, {
        compact: true,
        scope: { styles: styles },
        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  '
      })
    ),
    React.createElement(
      Cell,
      null,
      React.createElement(LiveCodeExample, {
        compact: true,
        scope: { styles: styles },
        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  '
      })
    ),
    React.createElement(
      Cell,
      { span: 6 },
      React.createElement(LiveCodeExample, {
        compact: true,
        title: 'Placeholder (No name)',
        initialCode: '<Avatar />'
      })
    ),
    React.createElement(
      Cell,
      null,
      React.createElement(LiveCodeExample, {
        compact: true,
        title: 'Custom text',
        initialCode: '<Avatar name="John H. Doe" text="JhD"/>'
      })
    )
  )
};