@atlaskit/avatar
Version:
An avatar is a visual representation of a user or entity.
115 lines (113 loc) • 6.95 kB
JavaScript
/* status.tsx generated by @compiled/babel-plugin v0.36.1 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.StatusWrapper = void 0;
require("./status.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _colors = require("@atlaskit/theme/colors");
var _iconWrapper = _interopRequireDefault(require("./internal/icon-wrapper"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var styles = {
root: "_kqswstnw"
};
var iconSizeMap = {
small: "_4t3i1crf _1bsb1crf",
medium: "_4t3idlk8 _1bsbdlk8",
large: "_4t3io7ao _1bsbo7ao",
xlarge: "_4t3if6fq _1bsbf6fq"
};
var iconOffsetMap = {
square: "_1xi2idpf _154iidpf",
small: "_1xi2idpf _154iidpf",
medium: "_1xi2idpf _154iidpf",
large: "_1xi2t94y _154it94y",
xlarge: "_1xi21v6z _154i1v6z"
};
var ApprovedIndicator = /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("circle", {
fill: "var(--ds-icon-success, ".concat(_colors.G400, ")"),
cx: "4",
cy: "4",
r: "4"
}), /*#__PURE__*/React.createElement("path", {
fill: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
d: "M2.47140452,3.52859548 C2.21105499,3.26824595 1.78894501,3.26824595 1.52859548,3.52859548 C1.26824595,3.78894501 1.26824595,4.21105499 1.52859548,4.47140452 L2.86192881,5.80473785 C3.12227834,6.06508738 3.54438833,6.06508738 3.80473785,5.80473785 L6.47140452,3.13807119 C6.73175405,2.87772166 6.73175405,2.45561167 6.47140452,2.19526215 C6.21105499,1.93491262 5.78894501,1.93491262 5.52859548,2.19526215 L3.33333333,4.39052429 L2.47140452,3.52859548 Z"
}));
var DeclinedIndicator = /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("circle", {
fill: "var(--ds-icon-danger, ".concat(_colors.R400, ")"),
cx: "4",
cy: "4",
r: "4"
}), /*#__PURE__*/React.createElement("path", {
fill: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
d: "M4.890661,4.0088336 L5.81806461,3.07802178 C6.06167933,2.83351177 6.06048933,2.43826992 5.81540668,2.19522442 C5.57032402,1.95217891 5.17415651,1.95336612 4.93054179,2.19787613 L4.00765946,3.12415007 L3.06906871,2.18377143 C2.82523777,1.93947602 2.42906937,1.93863765 2.18420182,2.18189887 C1.93933427,2.42516008 1.93849394,2.82040282 2.18232488,3.06469822 L3.12544091,4.00961077 L2.20275024,4.93569234 C1.95913552,5.18020236 1.96032551,5.5754442 2.20540817,5.81848971 C2.45049083,6.06153521 2.84665833,6.060348 3.09027306,5.81583799 L4.00844245,4.89429431 L4.9092123,5.79678001 C5.15304324,6.04107541 5.54921164,6.04191379 5.79407919,5.79865257 C6.03894674,5.55539135 6.03978708,5.16014862 5.79595614,4.91585321 L4.890661,4.0088336 Z"
}));
var LockedIndicator = /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("circle", {
fill: "var(--ds-text-subtlest, ".concat(_colors.N40, ")"),
cx: "4",
cy: "4",
r: "4"
}), /*#__PURE__*/React.createElement("path", {
fill: "var(--ds-surface-overlay, ".concat(_colors.N500, ")"),
d: "M4.13074827,1.21766493 L4.10368158,1.21766493 C3.36340745,1.21766493 2.76388015,1.80793503 2.76388015,2.5367787 L2.76388015,3.21632216 L3.44054754,3.21632216 L3.44054754,2.54344089 C3.44054754,2.17901906 3.74031119,1.88388401 4.11044825,1.88388401 L4.1239816,1.88388401 C4.49411866,1.88388401 4.79388232,2.17901906 4.79388232,2.54344089 L4.79388232,3.21632216 L5.47054971,3.21632216 L5.47054971,2.5367787 C5.47054971,1.80793503 4.8710224,1.21766493 4.13074827,1.21766493 M2.76388015,3.21632216 L3.44054754,3.21632216 L3.44054754,3.88254123 L2.76388015,3.88254123 L2.76388015,3.21632216 Z M4.79388232,3.21632216 L5.47054971,3.21632216 L5.47054971,3.88254123 L4.79388232,3.88254123 L4.79388232,3.21632216 Z M4.79401765,3.88254123 L3.44068287,3.88254123 L2.76401548,3.88254123 C2.39049508,3.88254123 2.08734809,4.18100738 2.08734809,4.54876031 L2.08734809,5.54808892 C2.08734809,6.10000287 2.53735205,6.54741753 3.09094491,6.54741753 L5.14375561,6.54741753 C5.69802683,6.54741753 6.14735243,6.10385072 6.14735243,5.54808892 L6.14735243,4.54876031 C6.14735243,4.18100738 5.84420544,3.88254123 5.47068504,3.88254123 L4.79401765,3.88254123 Z"
}));
function getStatus(status) {
switch (status) {
case 'approved':
return ApprovedIndicator;
case 'declined':
return DeclinedIndicator;
case 'locked':
return LockedIndicator;
}
}
/**
* __Avatar status__
*
* An avatar status shows contextual information, such as if someone approves or declines something.
*
* - [Examples](https://atlassian.design/components/avatar/avatar-status/examples)
* - [Code](https://atlassian.design/components/avatar/avatar-status/code)
*/
var AvatarStatus = function AvatarStatus(_ref) {
var borderColor = _ref.borderColor,
children = _ref.children,
status = _ref.status;
return /*#__PURE__*/React.createElement(_iconWrapper.default, {
bgColor: borderColor
}, status ? /*#__PURE__*/React.createElement("svg", {
height: "100%",
version: "1.1",
viewBox: "0 0 8 8",
width: "100%",
xmlns: "http://www.w3.org/2000/svg"
}, getStatus(status)) : children);
};
var _default = exports.default = AvatarStatus;
/**
* __Status wrapper__
*
* A status wrapper is used internally to position status on top of the avatar.
*/
var StatusWrapper = exports.StatusWrapper = function StatusWrapper(_ref2) {
var size = _ref2.size,
status = _ref2.status,
appearance = _ref2.appearance,
borderColor = _ref2.borderColor,
children = _ref2.children,
testId = _ref2.testId;
return /*#__PURE__*/React.createElement("span", {
"aria-hidden": "true",
"data-testid": testId && "".concat(testId, "--status"),
className: (0, _runtime.ax)([styles.root, iconSizeMap[size], iconOffsetMap[size], appearance === 'square' && iconOffsetMap['square']])
}, /*#__PURE__*/React.createElement(AvatarStatus, {
borderColor: borderColor,
status: !children ? status : undefined
}, children));
};