@manuscripts/style-guide 2.0.4-LEAN-3858.0 → 2.0.4-LEAN-3858.1

package/dist/cjs/components/SystemUserAvatar.js

@@ -0,0 +1,77 @@
+"use strict";
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const icons_1 = require("./icons");
+const SystemUserAvatarContainer = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+`;
+const RoundedImage = styled_components_1.default.img `
+  width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
+  border-radius: 50%;
+  align-items: center;
+  justify-content: center;
+`;
+const StyledAvatar = (0, styled_components_1.default)(icons_1.SystemUserAvatarIcon) `
+  path {
+    fill: ${(props) => props.color || props.theme.colors.text.secondary};
+  }
+
+  &:hover path {
+    fill: ${(props) => props.color || props.theme.colors.text.info};
+  }
+`;
+const Avatar = (props) => {
+    const [srcError, setSrcError] = (0, react_1.useState)(false);
+    const handleSrcError = (0, react_1.useCallback)(() => {
+        setSrcError(true);
+    }, []);
+    return (react_1.default.createElement(SystemUserAvatarContainer, null, props.src && !srcError ? (react_1.default.createElement(RoundedImage, { src: props.src, size: props.size, onError: handleSrcError })) : (react_1.default.createElement(StyledAvatar, { height: props.size, width: props.size, color: props.color }))));
+};
+exports.Avatar = Avatar;

package/dist/cjs/components/icons/system-user-avatar.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const SystemUserAvatarIcon = (props) => (react_1.default.createElement("svg", { width: "44", height: "44", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+const SystemUserAvatarIcon = (props) => (react_1.default.createElement("svg", Object.assign({ width: "44", height: "44", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
     react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M35.437 30.3453L34.6649 30.2143C34.5844 29.9547 34.481 29.7042 34.3547 29.4652L34.8096 28.8287C35.0027 28.5576 34.9728 28.1876 34.7361 27.9532L34.0513 27.2684C33.9227 27.1398 33.7526 27.0685 33.5711 27.0685C33.4286 27.0685 33.293 27.1122 33.1781 27.1949L32.5393 27.6499C32.2912 27.5189 32.0315 27.4109 31.7627 27.3305L31.634 26.5676C31.5788 26.239 31.2962 26 30.963 26H29.9956C29.6624 26 29.3798 26.239 29.3246 26.5676L29.1913 27.3489C28.934 27.4293 28.6835 27.535 28.4445 27.6637L27.8126 27.2087C27.6977 27.126 27.5598 27.0823 27.4174 27.0823C27.2358 27.0823 27.0635 27.1535 26.9371 27.2822L26.25 27.967C26.0157 28.2014 25.9835 28.5713 26.1765 28.8425L26.6361 29.4882C26.5097 29.7295 26.4086 29.9799 26.3305 30.2396L25.5676 30.3683C25.239 30.4234 25 30.7061 25 31.0393V32.0067C25 32.3399 25.239 32.6225 25.5676 32.6777L26.3489 32.8109C26.4293 33.0683 26.535 33.3188 26.6637 33.5578L26.211 34.1874C26.018 34.4585 26.0478 34.8285 26.2845 35.0629L26.9693 35.7477C27.098 35.8763 27.268 35.9476 27.4495 35.9476C27.592 35.9476 27.7276 35.9039 27.8425 35.8212L28.4882 35.3616C28.7203 35.4834 28.9638 35.5822 29.2143 35.6603L29.343 36.4324C29.3981 36.761 29.6808 37 30.014 37H30.9837C31.3169 37 31.5995 36.761 31.6547 36.4324L31.7856 35.6603C32.0453 35.5799 32.2958 35.4765 32.5347 35.3501L33.1712 35.8051C33.2861 35.8878 33.424 35.9315 33.5665 35.9315C33.748 35.9315 33.9181 35.8602 34.0467 35.7316L34.7315 35.0468C34.9659 34.8124 34.9981 34.4424 34.805 34.1713L34.3501 33.5325C34.4764 33.2912 34.5821 33.0407 34.6603 32.7834L35.4324 32.6547C35.761 32.5995 35.9999 32.3169 35.9999 31.9837V31.0163C36.0045 30.6831 35.7656 30.4005 35.437 30.3453ZM28.1274 31.4989C28.1274 30.1891 29.1913 29.1251 30.5011 29.1251C31.8109 29.1251 32.8748 30.1891 32.8748 31.4989C32.8748 32.8087 31.8109 33.8726 30.5011 33.8726C29.1913 33.8726 28.1274 32.8087 28.1274 31.4989Z", fill: "#6E6E6E" }),
     react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.0138 21.4873C17.2969 21.9615 17.142 22.5755 16.6678 22.8586C14.7744 23.9892 13.6294 24.4712 12.8103 24.8161C12.7449 24.8436 12.6815 24.8703 12.6201 24.8964C11.8656 25.2161 11.4739 25.4057 10.8121 26.0811C10.615 26.2824 10.4074 26.7043 10.2533 27.3874C10.1058 28.0415 10.0346 28.8077 10.0102 29.5603C9.98602 30.3076 10.0086 31.0117 10.0377 31.5309C10.0522 31.7897 10.0682 32.0005 10.0804 32.1452C10.0808 32.1496 10.0811 32.154 10.0815 32.1582C10.1142 32.1931 10.1687 32.243 10.257 32.3052C10.45 32.4411 10.7422 32.5914 11.1489 32.7435C11.9617 33.0475 13.0936 33.3084 14.4579 33.5121C17.177 33.918 20.655 34.0729 23.9685 33.9684C24.5205 33.951 24.9821 34.3843 24.9995 34.9363C25.0169 35.4884 24.5835 35.95 24.0315 35.9674C20.6304 36.0746 17.0284 35.918 14.1627 35.4902C12.7346 35.277 11.4478 34.9906 10.4483 34.6167C9.9489 34.43 9.48654 34.2087 9.10561 33.9405C8.73164 33.6772 8.36481 33.3182 8.17468 32.8321C8.14227 32.7492 8.12106 32.6624 8.11162 32.5739L9.10598 32.4678C8.11162 32.5739 8.11164 32.5741 8.11162 32.5739L8.11094 32.5675L8.10947 32.5531L8.10439 32.5017C8.10014 32.4575 8.09428 32.394 8.08748 32.3134C8.07389 32.1524 8.05652 31.9226 8.04084 31.6427C8.00959 31.0847 7.98461 30.3188 8.0113 29.4955C8.03781 28.6777 8.11614 27.7727 8.30234 26.9473C8.482 26.1508 8.7925 25.2847 9.38351 24.6815C10.2981 23.7479 10.9514 23.4313 11.8397 23.0549C11.9021 23.0285 11.966 23.0015 12.0318 22.9739C12.8206 22.6419 13.8677 22.2011 15.6425 21.1414C16.1167 20.8583 16.7306 21.0132 17.0138 21.4873ZM26.9862 21.4873C27.2694 21.0132 27.8833 20.8583 28.3575 21.1414C29.7486 21.972 30.6922 22.4217 31.4007 22.7316C31.9067 22.9529 32.1375 23.5426 31.9162 24.0485C31.6949 24.5545 31.1053 24.7853 30.5993 24.564C29.8197 24.223 28.8008 23.7355 27.3322 22.8586C26.858 22.5755 26.7031 21.9615 26.9862 21.4873Z", fill: "#6E6E6E" }),
     react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M22 20C25.3137 20 28 17.3137 28 14C28 10.6863 25.3137 8 22 8C18.6863 8 16 10.6863 16 14C16 17.3137 18.6863 20 22 20ZM22 22C26.4183 22 30 18.4183 30 14C30 9.58172 26.4183 6 22 6C17.5817 6 14 9.58172 14 14C14 18.4183 17.5817 22 22 22Z", fill: "#6E6E6E" }),

package/dist/es/components/SystemUserAvatar.js

@@ -0,0 +1,47 @@
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { useCallback, useState } from 'react';
+import styled from 'styled-components';
+import { SystemUserAvatarIcon } from './icons';
+const SystemUserAvatarContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+`;
+const RoundedImage = styled.img `
+  width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
+  border-radius: 50%;
+  align-items: center;
+  justify-content: center;
+`;
+const StyledAvatar = styled(SystemUserAvatarIcon) `
+  path {
+    fill: ${(props) => props.color || props.theme.colors.text.secondary};
+  }
+
+  &:hover path {
+    fill: ${(props) => props.color || props.theme.colors.text.info};
+  }
+`;
+export const Avatar = (props) => {
+    const [srcError, setSrcError] = useState(false);
+    const handleSrcError = useCallback(() => {
+        setSrcError(true);
+    }, []);
+    return (React.createElement(SystemUserAvatarContainer, null, props.src && !srcError ? (React.createElement(RoundedImage, { src: props.src, size: props.size, onError: handleSrcError })) : (React.createElement(StyledAvatar, { height: props.size, width: props.size, color: props.color }))));
+};

package/dist/es/components/icons/system-user-avatar.js

@@ -1,5 +1,5 @@
 import React from 'react';
-const SystemUserAvatarIcon = (props) => (React.createElement("svg", { width: "44", height: "44", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+const SystemUserAvatarIcon = (props) => (React.createElement("svg", Object.assign({ width: "44", height: "44", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
     React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M35.437 30.3453L34.6649 30.2143C34.5844 29.9547 34.481 29.7042 34.3547 29.4652L34.8096 28.8287C35.0027 28.5576 34.9728 28.1876 34.7361 27.9532L34.0513 27.2684C33.9227 27.1398 33.7526 27.0685 33.5711 27.0685C33.4286 27.0685 33.293 27.1122 33.1781 27.1949L32.5393 27.6499C32.2912 27.5189 32.0315 27.4109 31.7627 27.3305L31.634 26.5676C31.5788 26.239 31.2962 26 30.963 26H29.9956C29.6624 26 29.3798 26.239 29.3246 26.5676L29.1913 27.3489C28.934 27.4293 28.6835 27.535 28.4445 27.6637L27.8126 27.2087C27.6977 27.126 27.5598 27.0823 27.4174 27.0823C27.2358 27.0823 27.0635 27.1535 26.9371 27.2822L26.25 27.967C26.0157 28.2014 25.9835 28.5713 26.1765 28.8425L26.6361 29.4882C26.5097 29.7295 26.4086 29.9799 26.3305 30.2396L25.5676 30.3683C25.239 30.4234 25 30.7061 25 31.0393V32.0067C25 32.3399 25.239 32.6225 25.5676 32.6777L26.3489 32.8109C26.4293 33.0683 26.535 33.3188 26.6637 33.5578L26.211 34.1874C26.018 34.4585 26.0478 34.8285 26.2845 35.0629L26.9693 35.7477C27.098 35.8763 27.268 35.9476 27.4495 35.9476C27.592 35.9476 27.7276 35.9039 27.8425 35.8212L28.4882 35.3616C28.7203 35.4834 28.9638 35.5822 29.2143 35.6603L29.343 36.4324C29.3981 36.761 29.6808 37 30.014 37H30.9837C31.3169 37 31.5995 36.761 31.6547 36.4324L31.7856 35.6603C32.0453 35.5799 32.2958 35.4765 32.5347 35.3501L33.1712 35.8051C33.2861 35.8878 33.424 35.9315 33.5665 35.9315C33.748 35.9315 33.9181 35.8602 34.0467 35.7316L34.7315 35.0468C34.9659 34.8124 34.9981 34.4424 34.805 34.1713L34.3501 33.5325C34.4764 33.2912 34.5821 33.0407 34.6603 32.7834L35.4324 32.6547C35.761 32.5995 35.9999 32.3169 35.9999 31.9837V31.0163C36.0045 30.6831 35.7656 30.4005 35.437 30.3453ZM28.1274 31.4989C28.1274 30.1891 29.1913 29.1251 30.5011 29.1251C31.8109 29.1251 32.8748 30.1891 32.8748 31.4989C32.8748 32.8087 31.8109 33.8726 30.5011 33.8726C29.1913 33.8726 28.1274 32.8087 28.1274 31.4989Z", fill: "#6E6E6E" }),
     React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.0138 21.4873C17.2969 21.9615 17.142 22.5755 16.6678 22.8586C14.7744 23.9892 13.6294 24.4712 12.8103 24.8161C12.7449 24.8436 12.6815 24.8703 12.6201 24.8964C11.8656 25.2161 11.4739 25.4057 10.8121 26.0811C10.615 26.2824 10.4074 26.7043 10.2533 27.3874C10.1058 28.0415 10.0346 28.8077 10.0102 29.5603C9.98602 30.3076 10.0086 31.0117 10.0377 31.5309C10.0522 31.7897 10.0682 32.0005 10.0804 32.1452C10.0808 32.1496 10.0811 32.154 10.0815 32.1582C10.1142 32.1931 10.1687 32.243 10.257 32.3052C10.45 32.4411 10.7422 32.5914 11.1489 32.7435C11.9617 33.0475 13.0936 33.3084 14.4579 33.5121C17.177 33.918 20.655 34.0729 23.9685 33.9684C24.5205 33.951 24.9821 34.3843 24.9995 34.9363C25.0169 35.4884 24.5835 35.95 24.0315 35.9674C20.6304 36.0746 17.0284 35.918 14.1627 35.4902C12.7346 35.277 11.4478 34.9906 10.4483 34.6167C9.9489 34.43 9.48654 34.2087 9.10561 33.9405C8.73164 33.6772 8.36481 33.3182 8.17468 32.8321C8.14227 32.7492 8.12106 32.6624 8.11162 32.5739L9.10598 32.4678C8.11162 32.5739 8.11164 32.5741 8.11162 32.5739L8.11094 32.5675L8.10947 32.5531L8.10439 32.5017C8.10014 32.4575 8.09428 32.394 8.08748 32.3134C8.07389 32.1524 8.05652 31.9226 8.04084 31.6427C8.00959 31.0847 7.98461 30.3188 8.0113 29.4955C8.03781 28.6777 8.11614 27.7727 8.30234 26.9473C8.482 26.1508 8.7925 25.2847 9.38351 24.6815C10.2981 23.7479 10.9514 23.4313 11.8397 23.0549C11.9021 23.0285 11.966 23.0015 12.0318 22.9739C12.8206 22.6419 13.8677 22.2011 15.6425 21.1414C16.1167 20.8583 16.7306 21.0132 17.0138 21.4873ZM26.9862 21.4873C27.2694 21.0132 27.8833 20.8583 28.3575 21.1414C29.7486 21.972 30.6922 22.4217 31.4007 22.7316C31.9067 22.9529 32.1375 23.5426 31.9162 24.0485C31.6949 24.5545 31.1053 24.7853 30.5993 24.564C29.8197 24.223 28.8008 23.7355 27.3322 22.8586C26.858 22.5755 26.7031 21.9615 26.9862 21.4873Z", fill: "#6E6E6E" }),
     React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M22 20C25.3137 20 28 17.3137 28 14C28 10.6863 25.3137 8 22 8C18.6863 8 16 10.6863 16 14C16 17.3137 18.6863 20 22 20ZM22 22C26.4183 22 30 18.4183 30 14C30 9.58172 26.4183 6 22 6C17.5817 6 14 9.58172 14 14C14 18.4183 17.5817 22 22 22Z", fill: "#6E6E6E" }),

package/dist/types/components/SystemUserAvatar.d.ts

@@ -0,0 +1,23 @@
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+interface SystemUserAvatarProps {
+    src?: string;
+    size: number;
+    color?: string;
+}
+export declare const Avatar: React.FC<SystemUserAvatarProps>;
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "2.0.4-LEAN-3858.0",
+  "version": "2.0.4-LEAN-3858.1",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",