@wix/design-system/dist/esm/Avatar/test/Avatar.visual.js

@wix/design-system

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/Avatar/test/Avatar.visual.jsx",
  _this = this;
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from 'react';
import { storiesOf } from '@storybook/react';
import Avatar from '..';
import { PhotoCamera, Facebook } from '@wix/wix-ui-icons-common';
import Box from '../../Box';
var customIndication = /*#__PURE__*/React.createElement(Box, {
  align: "center",
  verticalAlign: "middle",
  backgroundColor: "#3b5998",
  color: "white",
  minHeight: "100%",
  __self: this,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 9,
    columnNumber: 3
  }
}, /*#__PURE__*/React.createElement(Facebook, {
  size: "18",
  __self: this,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 16,
    columnNumber: 5
  }
}));
var allSizesAvatarWithProps = function allSizesAvatarWithProps(props) {
  return /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      width: '600px',
      justifyContent: 'space-around'
    },
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 21,
      columnNumber: 3
    }
  }, /*#__PURE__*/React.createElement(Avatar, _extends({
    size: "size18"
  }, props, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 24,
      columnNumber: 5
    }
  })), /*#__PURE__*/React.createElement(Avatar, _extends({
    size: "size24"
  }, props, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 25,
      columnNumber: 5
    }
  })), /*#__PURE__*/React.createElement(Avatar, _extends({
    size: "size30"
  }, props, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 26,
      columnNumber: 5
    }
  })), /*#__PURE__*/React.createElement(Avatar, _extends({
    size: "size36"
  }, props, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 27,
      columnNumber: 5
    }
  })), /*#__PURE__*/React.createElement(Avatar, _extends({
    size: "size48"
  }, props, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 28,
      columnNumber: 5
    }
  })), /*#__PURE__*/React.createElement(Avatar, _extends({
    size: "size60"
  }, props, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 29,
      columnNumber: 5
    }
  })), /*#__PURE__*/React.createElement(Avatar, _extends({
    size: "size72"
  }, props, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 30,
      columnNumber: 5
    }
  })), /*#__PURE__*/React.createElement(Avatar, _extends({
    size: "size90"
  }, props, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 31,
      columnNumber: 5
    }
  })));
};
var baseProps = {
  name: 'Jhon Doe'
};
var renderAvatar = function renderAvatar(props) {
  return /*#__PURE__*/React.createElement(Avatar, _extends({}, baseProps, props, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 38,
      columnNumber: 31
    }
  }));
};
storiesOf("Avatar/Props", module).add('Presence', function () {
  return /*#__PURE__*/React.createElement("div", {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 41,
      columnNumber: 3
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      marginBottom: '30px'
    },
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 42,
      columnNumber: 5
    }
  }, renderAvatar({
    presence: 'online'
  }), renderAvatar({
    presence: 'offline'
  }), renderAvatar({
    presence: 'busy'
  })), allSizesAvatarWithProps(_objectSpread({
    presence: 'online'
  }, baseProps)));
});
storiesOf("Avatar/Props", module).add('Square', function () {
  return /*#__PURE__*/React.createElement("div", {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 52,
      columnNumber: 3
    }
  }, allSizesAvatarWithProps(_objectSpread({
    shape: 'square'
  }, baseProps)));
});
storiesOf("Avatar/Props", module).add('Indication', function () {
  return /*#__PURE__*/React.createElement("div", {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 56,
      columnNumber: 3
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      marginBottom: '30px'
    },
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 57,
      columnNumber: 5
    }
  }, renderAvatar({
    indication: /*#__PURE__*/React.createElement(PhotoCamera, {
      size: "24",
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 58,
        columnNumber: 35
      }
    })
  }), renderAvatar({
    indication: /*#__PURE__*/React.createElement("svg", {
      viewBox: "0 0 18 18",
      fill: "currentColor",
      width: "18",
      height: "18",
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 61,
        columnNumber: 11
      }
    }, /*#__PURE__*/React.createElement("path", {
      id: "addsmall-a",
      d: "M10 9L10 5 9 5 9 9 5 9 5 10 9 10 9 14 10 14 10 10 14 10 14 9z",
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 62,
        columnNumber: 13
      }
    }))
  })), allSizesAvatarWithProps(_objectSpread({
    indication: /*#__PURE__*/React.createElement(PhotoCamera, {
      size: "24",
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 71,
        columnNumber: 19
      }
    })
  }, baseProps)));
});
storiesOf("Avatar/Props", module).add('CustomIndication', function () {
  return /*#__PURE__*/React.createElement("div", {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 78,
      columnNumber: 3
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      marginBottom: '30px'
    },
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 79,
      columnNumber: 5
    }
  }, renderAvatar({
    customIndication: customIndication
  })), allSizesAvatarWithProps(_objectSpread({
    customIndication: customIndication
  }, baseProps)));
});
storiesOf("Avatar/Props", module).add('Presence and Indication', function () {
  return /*#__PURE__*/React.createElement("div", {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 92,
      columnNumber: 3
    }
  }, allSizesAvatarWithProps(_objectSpread({
    presence: 'online',
    indication: /*#__PURE__*/React.createElement(PhotoCamera, {
      size: "24",
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 95,
        columnNumber: 19
      }
    })
  }, baseProps)), /*#__PURE__*/React.createElement("br", {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 98,
      columnNumber: 5
    }
  }), allSizesAvatarWithProps(_objectSpread({
    presence: 'online',
    shape: 'square',
    indication: /*#__PURE__*/React.createElement(PhotoCamera, {
      size: "24",
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 102,
        columnNumber: 19
      }
    })
  }, baseProps)));
});
storiesOf("Avatar/Props", module).add('Presence and Custom Indication', function () {
  return /*#__PURE__*/React.createElement("div", {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 109,
      columnNumber: 3
    }
  }, allSizesAvatarWithProps(_objectSpread({
    presence: 'online',
    customIndication: customIndication
  }, baseProps)), /*#__PURE__*/React.createElement("br", {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 115,
      columnNumber: 5
    }
  }), allSizesAvatarWithProps(_objectSpread({
    presence: 'online',
    shape: 'square',
    customIndication: customIndication
  }, baseProps)));
});
storiesOf("Avatar/Props", module).add('Colors', function () {
  return /*#__PURE__*/React.createElement("div", {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 126,
      columnNumber: 3
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      width: '600px',
      justifyContent: 'space-around'
    },
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 127,
      columnNumber: 5
    }
  }, /*#__PURE__*/React.createElement(Avatar, {
    name: "Clifford Strickland",
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 134,
      columnNumber: 7
    }
  }), /*#__PURE__*/React.createElement(Avatar, {
    name: "Hallie Shelton",
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 135,
      columnNumber: 7
    }
  }), /*#__PURE__*/React.createElement(Avatar, {
    name: "Jennie Spencer",
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 136,
      columnNumber: 7
    }
  }), /*#__PURE__*/React.createElement(Avatar, {
    name: "Terry Myers",
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 137,
      columnNumber: 7
    }
  }), /*#__PURE__*/React.createElement(Avatar, {
    name: "Tillie Wilkins",
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 138,
      columnNumber: 7
    }
  }), /*#__PURE__*/React.createElement(Avatar, {
    name: "Douglas Page",
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 139,
      columnNumber: 7
    }
  }), /*#__PURE__*/React.createElement(Avatar, {
    name: "Daniel Christensen",
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 140,
      columnNumber: 7
    }
  }), /*#__PURE__*/React.createElement(Avatar, {
    name: "Cody Carr",
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 141,
      columnNumber: 7
    }
  }), /*#__PURE__*/React.createElement(Avatar, {
    name: "Evelyn Lindsey",
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 142,
      columnNumber: 7
    }
  })));
});
storiesOf("Avatar/Props", module).add('Grey color', function () {
  return /*#__PURE__*/React.createElement("div", {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 148,
      columnNumber: 3
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      width: '600px',
      justifyContent: 'space-around'
    },
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 149,
      columnNumber: 5
    }
  }, /*#__PURE__*/React.createElement(Avatar, {
    color: "A7",
    name: "Clifford Strickland",
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 156,
      columnNumber: 7
    }
  })));
});
storiesOf("Avatar/Props", module).add('Placeholder', function () {
  return /*#__PURE__*/React.createElement("div", {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 162,
      columnNumber: 3
    }
  }, allSizesAvatarWithProps({
    shape: 'square'
  }), /*#__PURE__*/React.createElement("br", {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 164,
      columnNumber: 5
    }
  }), allSizesAvatarWithProps({
    shape: 'circle'
  }), /*#__PURE__*/React.createElement("br", {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 166,
      columnNumber: 5
    }
  }), allSizesAvatarWithProps({
    shape: 'square',
    placeholder: /*#__PURE__*/React.createElement("div", {
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 167,
        columnNumber: 62
      }
    })
  }), /*#__PURE__*/React.createElement("br", {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 168,
      columnNumber: 5
    }
  }), allSizesAvatarWithProps({
    shape: 'circle',
    placeholder: /*#__PURE__*/React.createElement("div", {
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 169,
        columnNumber: 62
      }
    })
  }));
});
storiesOf("Avatar/Props", module).add('Loading', function () {
  return /*#__PURE__*/React.createElement("div", {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 174,
      columnNumber: 3
    }
  }, allSizesAvatarWithProps({
    loading: true
  }), /*#__PURE__*/React.createElement("br", {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 176,
      columnNumber: 5
    }
  }), allSizesAvatarWithProps({
    shape: 'square',
    loading: true
  }));
});

// Size18 has to be tested separately because it's too small for sled to detect changes, for example
// previous tests do not fail when the initials are removed.
// Rendering a lot of components in one snapshot helps to avoid this issue.
storiesOf("Avatar/Props", module).add('Size18', function () {
  return /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      flexWrap: 'wrap'
    },
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 186,
      columnNumber: 5
    }
  }, _toConsumableArray(Array(50)).map(function (e, i) {
    return /*#__PURE__*/React.createElement("div", {
      key: i,
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 188,
        columnNumber: 9
      }
    }, /*#__PURE__*/React.createElement(Avatar, _extends({
      size: "size18"
    }, baseProps, {
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 189,
        columnNumber: 11
      }
    })), /*#__PURE__*/React.createElement(Avatar, _extends({
      size: "size18",
      shape: "square"
    }, baseProps, {
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 190,
        columnNumber: 11
      }
    })), /*#__PURE__*/React.createElement(Avatar, _extends({
      size: "size18",
      presence: "online"
    }, baseProps, {
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 191,
        columnNumber: 11
      }
    })), /*#__PURE__*/React.createElement(Avatar, _extends({
      size: "size18",
      presence: "offline"
    }, baseProps, {
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 192,
        columnNumber: 11
      }
    })), /*#__PURE__*/React.createElement(Avatar, _extends({
      size: "size18",
      presence: "busy"
    }, baseProps, {
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 193,
        columnNumber: 11
      }
    })));
  }));
});