@sproutsocial/racine 8.1.2 → 8.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/__flow__/Avatar/index.js +34 -5
- package/__flow__/Avatar/index.stories.js +29 -0
- package/__flow__/EnumIconNames.js +1 -1
- package/__flow__/IconViewBoxes.js +1 -1
- package/__flow__/OverflowList/index.js +1 -4
- package/__flow__/OverflowList/index.test.js +36 -4
- package/commonjs/Avatar/index.js +37 -13
- package/commonjs/IconViewBoxes.js +1 -1
- package/commonjs/OverflowList/index.js +1 -3
- package/commonjs/include-icons.js +1 -1
- package/dist/iconList.js +1 -1
- package/dist/icons.svg +1 -1
- package/icons/woocommerce.svg +5 -0
- package/includeIcons.js +1 -1
- package/lib/Avatar/index.js +36 -13
- package/lib/IconViewBoxes.js +1 -1
- package/lib/OverflowList/index.js +1 -3
- package/lib/include-icons.js +1 -1
- package/package.json +1 -1
- package/icons/BigCommerce.svg +0 -6
package/lib/Avatar/index.js
CHANGED
|
@@ -4,7 +4,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
4
4
|
|
|
5
5
|
import * as React from "react";
|
|
6
6
|
import { useState, useCallback, useMemo, memo } from "react";
|
|
7
|
-
import styled from "styled-components";
|
|
7
|
+
import styled, { css } from "styled-components";
|
|
8
|
+
import classnames from "classnames";
|
|
8
9
|
import Box from "../Box";
|
|
9
10
|
import Image from "../Image";
|
|
10
11
|
import Text from "../Text";
|
|
@@ -16,8 +17,20 @@ var AvatarText = styled(function (_ref) {
|
|
|
16
17
|
}).withConfig({
|
|
17
18
|
displayName: "Avatar__AvatarText",
|
|
18
19
|
componentId: "yx873f-0"
|
|
19
|
-
})(["font-size:", "px;"], function (props) {
|
|
20
|
+
})(["font-size:", "px;color:", "px;"], function (props) {
|
|
20
21
|
return props.fontSize;
|
|
22
|
+
}, function (props) {
|
|
23
|
+
return props.color;
|
|
24
|
+
});
|
|
25
|
+
var Container = styled(Box).withConfig({
|
|
26
|
+
displayName: "Avatar__Container",
|
|
27
|
+
componentId: "yx873f-1"
|
|
28
|
+
})(["", ""], function (_ref2) {
|
|
29
|
+
var theme = _ref2.theme,
|
|
30
|
+
type = _ref2.type,
|
|
31
|
+
variant = _ref2.variant,
|
|
32
|
+
bg = _ref2.bg;
|
|
33
|
+
return css(["color:", ";background:", ";"], theme.colors[type][variant === "dark" ? "200" : "900"], bg ? bg : theme.colors[type][variant === "dark" ? "900" : "200"]);
|
|
21
34
|
});
|
|
22
35
|
|
|
23
36
|
var getInitials = function getInitials(name, fallback) {
|
|
@@ -33,14 +46,20 @@ var getInitials = function getInitials(name, fallback) {
|
|
|
33
46
|
.join("");
|
|
34
47
|
};
|
|
35
48
|
|
|
36
|
-
export var Avatar = function Avatar(
|
|
37
|
-
var
|
|
38
|
-
appearance =
|
|
39
|
-
name =
|
|
40
|
-
src =
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
49
|
+
export var Avatar = function Avatar(_ref3) {
|
|
50
|
+
var _ref3$appearance = _ref3.appearance,
|
|
51
|
+
appearance = _ref3$appearance === void 0 ? "circle" : _ref3$appearance,
|
|
52
|
+
name = _ref3.name,
|
|
53
|
+
src = _ref3.src,
|
|
54
|
+
_ref3$variant = _ref3.variant,
|
|
55
|
+
variant = _ref3$variant === void 0 ? "light" : _ref3$variant,
|
|
56
|
+
_ref3$type = _ref3.type,
|
|
57
|
+
type = _ref3$type === void 0 ? "neutral" : _ref3$type,
|
|
58
|
+
_ref3$size = _ref3.size,
|
|
59
|
+
size = _ref3$size === void 0 ? "40px" : _ref3$size,
|
|
60
|
+
bg = _ref3.bg,
|
|
61
|
+
color = _ref3.color,
|
|
62
|
+
rest = _objectWithoutPropertiesLoose(_ref3, ["appearance", "name", "src", "variant", "type", "size", "bg", "color"]);
|
|
44
63
|
|
|
45
64
|
var _useState = useState(false),
|
|
46
65
|
imageFailedLoading = _useState[0],
|
|
@@ -54,7 +73,8 @@ export var Avatar = function Avatar(_ref2) {
|
|
|
54
73
|
}, [setImageFailedLoading]); // Font size for initials is half the size of the avatar, rounded down.
|
|
55
74
|
|
|
56
75
|
var fontSize = Math.floor(Number(size.replace("px", "")) * 0.4);
|
|
57
|
-
return /*#__PURE__*/React.createElement(
|
|
76
|
+
return /*#__PURE__*/React.createElement(Container, _extends({
|
|
77
|
+
className: classnames(variant),
|
|
58
78
|
size: size,
|
|
59
79
|
overflow: "hidden",
|
|
60
80
|
borderRadius: appearance === "leaf" ? "40% 0 40% 0" : "50%",
|
|
@@ -64,13 +84,16 @@ export var Avatar = function Avatar(_ref2) {
|
|
|
64
84
|
justifyContent: "center",
|
|
65
85
|
alignItems: "center",
|
|
66
86
|
title: name,
|
|
67
|
-
bg:
|
|
87
|
+
bg: bg,
|
|
88
|
+
variant: variant,
|
|
89
|
+
type: type,
|
|
68
90
|
"data-qa-user-avatar": name // $FlowIssue - upgrade v0.112.0
|
|
69
91
|
|
|
70
92
|
}, rest), !src || imageFailedLoading ? /*#__PURE__*/React.createElement(AvatarText, {
|
|
71
93
|
lineHeight: size,
|
|
72
94
|
fontWeight: "semibold",
|
|
73
|
-
fontSize: fontSize
|
|
95
|
+
fontSize: fontSize,
|
|
96
|
+
color: color
|
|
74
97
|
}, initials) : /*#__PURE__*/React.createElement(Image, {
|
|
75
98
|
alt: name,
|
|
76
99
|
width: "auto",
|
package/lib/IconViewBoxes.js
CHANGED
|
@@ -34,7 +34,6 @@ module.exports = {
|
|
|
34
34
|
"bell-outline": "0 0 14 16",
|
|
35
35
|
"big-commerce": "0 0 16 16",
|
|
36
36
|
"bigcommerce": "0 0 16 16",
|
|
37
|
-
"BigCommerce": "0 0 17 17",
|
|
38
37
|
"bitly": "0 0 16 16",
|
|
39
38
|
"bold": "0 0 16 16",
|
|
40
39
|
"book": "0 0 14 16",
|
|
@@ -340,6 +339,7 @@ module.exports = {
|
|
|
340
339
|
"window-minimize": "0 0 16 16",
|
|
341
340
|
"window-regular": "0 0 16 16",
|
|
342
341
|
"window-restore": "0 0 16 16",
|
|
342
|
+
"woocommerce": "0 0 16 16",
|
|
343
343
|
"x": "0 0 16 18",
|
|
344
344
|
"yelp-full-star": "0 0 16 16",
|
|
345
345
|
"yelp-half-star": "0 0 16 16",
|
|
@@ -2,9 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
2
2
|
|
|
3
3
|
import List from "./styles";
|
|
4
4
|
import React, { useCallback, useMemo } from "react";
|
|
5
|
-
import { CellMeasurer, CellMeasurerCache } from "react-virtualized";
|
|
6
|
-
|
|
7
|
-
import AutoSizer from "react-virtualized/dist/es/AutoSizer";
|
|
5
|
+
import { AutoSizer, CellMeasurer, CellMeasurerCache } from "react-virtualized";
|
|
8
6
|
import Box from "../Box";
|
|
9
7
|
|
|
10
8
|
var VirtualizedList = function VirtualizedList(_ref) {
|