@sproutsocial/racine 8.2.0-link-styles-beta.0 → 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 +36 -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__/Link/styles.js +1 -2
- 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 +3 -0
- package/commonjs/Link/styles.js +2 -2
- 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/big-commerce.svg +4 -0
- package/icons/bigcommerce.svg +4 -0
- package/icons/woocommerce.svg +5 -0
- package/includeIcons.js +1 -1
- package/lib/Avatar/index.js +36 -13
- package/lib/IconViewBoxes.js +3 -0
- package/lib/Link/styles.js +3 -3
- package/lib/OverflowList/index.js +1 -3
- package/lib/include-icons.js +1 -1
- package/package.json +1 -1
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
|
@@ -32,6 +32,8 @@ module.exports = {
|
|
|
32
32
|
"barcode": "0 0 18 16",
|
|
33
33
|
"basketball": "0 0 16 16",
|
|
34
34
|
"bell-outline": "0 0 14 16",
|
|
35
|
+
"big-commerce": "0 0 16 16",
|
|
36
|
+
"bigcommerce": "0 0 16 16",
|
|
35
37
|
"bitly": "0 0 16 16",
|
|
36
38
|
"bold": "0 0 16 16",
|
|
37
39
|
"book": "0 0 14 16",
|
|
@@ -337,6 +339,7 @@ module.exports = {
|
|
|
337
339
|
"window-minimize": "0 0 16 16",
|
|
338
340
|
"window-regular": "0 0 16 16",
|
|
339
341
|
"window-restore": "0 0 16 16",
|
|
342
|
+
"woocommerce": "0 0 16 16",
|
|
340
343
|
"x": "0 0 16 18",
|
|
341
344
|
"yelp-full-star": "0 0 16 16",
|
|
342
345
|
"yelp-half-star": "0 0 16 16",
|
package/lib/Link/styles.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import styled, { css } from "styled-components";
|
|
2
2
|
import { focusRing, disabled } from "../utils/mixins";
|
|
3
3
|
import Text from "../Text";
|
|
4
|
-
import { TYPOGRAPHY, COMMON
|
|
4
|
+
import { TYPOGRAPHY, COMMON } from "../utils/system-props";
|
|
5
5
|
var Container = styled(Text).withConfig({
|
|
6
6
|
displayName: "styles__Container",
|
|
7
7
|
componentId: "adcw4a-0"
|
|
8
|
-
})(["border:0;font-family:", ";text-decoration:", ";appearance:none;cursor:pointer;", " font-weight:", ";color:", ";&:hover{color:", ";text-decoration:underline;}&:active{color:", ";}&:focus{", "}&:focus:active{box-shadow:none;}", " ", " ", " ", "
|
|
8
|
+
})(["border:0;font-family:", ";text-decoration:", ";appearance:none;cursor:pointer;", " font-weight:", ";color:", ";&:hover{color:", ";text-decoration:underline;}&:active{color:", ";}&:focus{", "}&:focus:active{box-shadow:none;}", " ", " ", " ", ""], function (props) {
|
|
9
9
|
return props.theme.fontFamily;
|
|
10
10
|
}, function (props) {
|
|
11
11
|
return props.underline ? "underline" : "none";
|
|
@@ -23,5 +23,5 @@ var Container = styled(Text).withConfig({
|
|
|
23
23
|
return !props.href && css(["background:none;"]);
|
|
24
24
|
}, function (props) {
|
|
25
25
|
return props.disabled && disabled;
|
|
26
|
-
}, COMMON, TYPOGRAPHY
|
|
26
|
+
}, COMMON, TYPOGRAPHY);
|
|
27
27
|
export default Container;
|
|
@@ -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) {
|