@sproutsocial/racine 8.1.0-avatar-update-beta.0 → 8.1.3
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 +24 -0
- package/__flow__/Avatar/index.js +5 -34
- package/__flow__/Avatar/index.stories.js +0 -29
- 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 +13 -37
- package/commonjs/IconViewBoxes.js +4 -0
- 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/BigCommerce.svg +6 -0
- 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 +13 -36
- package/lib/IconViewBoxes.js +4 -0
- package/lib/OverflowList/index.js +1 -3
- package/lib/include-icons.js +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,29 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 8.1.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 90dbdfc: update autosizer import
|
|
8
|
+
|
|
9
|
+
## 8.1.2
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- e5bb567: update bigcommerce icon name
|
|
14
|
+
|
|
15
|
+
## 8.1.1
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- b470c46: Fix big commerce icon and naming convention
|
|
20
|
+
|
|
21
|
+
## 8.1.0
|
|
22
|
+
|
|
23
|
+
### Minor Changes
|
|
24
|
+
|
|
25
|
+
- cda796b: adds bigcommerce icon
|
|
26
|
+
|
|
3
27
|
## 8.0.0
|
|
4
28
|
|
|
5
29
|
### Major Changes
|
package/__flow__/Avatar/index.js
CHANGED
|
@@ -1,11 +1,7 @@
|
|
|
1
1
|
// @flow
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import { useState, useCallback, useMemo, memo } from "react";
|
|
4
|
-
import styled
|
|
5
|
-
import classnames from "classnames";
|
|
6
|
-
|
|
7
|
-
import type { TypeTheme } from "../types/theme.flow";
|
|
8
|
-
|
|
4
|
+
import styled from "styled-components";
|
|
9
5
|
import Box from "../Box";
|
|
10
6
|
import Image from "../Image";
|
|
11
7
|
import Text from "../Text";
|
|
@@ -17,24 +13,11 @@ export type TypeProps = {
|
|
|
17
13
|
name: string,
|
|
18
14
|
/** URL of the avatar image. If a URL is not provided, the component will fall back to showing the user's initials */
|
|
19
15
|
src?: string,
|
|
20
|
-
type?: "neutral" | "purple" | "green" | "blue" | "yellow" | "red" | "orange",
|
|
21
|
-
variant?: "dark" | "light",
|
|
22
|
-
bg?: string,
|
|
23
|
-
color?: string,
|
|
24
16
|
size?: string,
|
|
25
17
|
};
|
|
26
18
|
|
|
27
19
|
const AvatarText = styled(({ fontSize, ...rest }) => <Text {...rest} />)`
|
|
28
20
|
font-size: ${(props) => props.fontSize}px;
|
|
29
|
-
color: ${(props) => props.color}px;
|
|
30
|
-
`;
|
|
31
|
-
const Container: StyledComponent<any, TypeTheme, *> = styled(Box)`
|
|
32
|
-
${({ theme, type, variant, bg }) => css`
|
|
33
|
-
color: ${theme.colors[type][variant === "dark" ? "200" : "900"]};
|
|
34
|
-
background: ${bg
|
|
35
|
-
? bg
|
|
36
|
-
: theme.colors[type][variant === "dark" ? "900" : "200"]};
|
|
37
|
-
`}
|
|
38
21
|
`;
|
|
39
22
|
|
|
40
23
|
const getInitials = (name: string, fallback: string = "?"): string => {
|
|
@@ -51,11 +34,7 @@ export const Avatar = ({
|
|
|
51
34
|
appearance = "circle",
|
|
52
35
|
name,
|
|
53
36
|
src,
|
|
54
|
-
variant = "light",
|
|
55
|
-
type = "neutral",
|
|
56
37
|
size = "40px",
|
|
57
|
-
bg,
|
|
58
|
-
color,
|
|
59
38
|
...rest
|
|
60
39
|
}: TypeProps) => {
|
|
61
40
|
const [imageFailedLoading, setImageFailedLoading] = useState(false);
|
|
@@ -69,8 +48,7 @@ export const Avatar = ({
|
|
|
69
48
|
const fontSize = Math.floor(Number(size.replace("px", "")) * 0.4);
|
|
70
49
|
|
|
71
50
|
return (
|
|
72
|
-
<
|
|
73
|
-
className={classnames(variant)}
|
|
51
|
+
<Box
|
|
74
52
|
size={size}
|
|
75
53
|
overflow="hidden"
|
|
76
54
|
borderRadius={appearance === "leaf" ? "40% 0 40% 0" : "50%"}
|
|
@@ -80,20 +58,13 @@ export const Avatar = ({
|
|
|
80
58
|
justifyContent="center"
|
|
81
59
|
alignItems="center"
|
|
82
60
|
title={name}
|
|
83
|
-
bg=
|
|
84
|
-
variant={variant}
|
|
85
|
-
type={type}
|
|
61
|
+
bg="neutral.200"
|
|
86
62
|
data-qa-user-avatar={name}
|
|
87
63
|
// $FlowIssue - upgrade v0.112.0
|
|
88
64
|
{...rest}
|
|
89
65
|
>
|
|
90
66
|
{!src || imageFailedLoading ? (
|
|
91
|
-
<AvatarText
|
|
92
|
-
lineHeight={size}
|
|
93
|
-
fontWeight="semibold"
|
|
94
|
-
fontSize={fontSize}
|
|
95
|
-
color={color}
|
|
96
|
-
>
|
|
67
|
+
<AvatarText lineHeight={size} fontWeight="semibold" fontSize={fontSize}>
|
|
97
68
|
{initials}
|
|
98
69
|
</AvatarText>
|
|
99
70
|
) : (
|
|
@@ -106,7 +77,7 @@ export const Avatar = ({
|
|
|
106
77
|
m={0}
|
|
107
78
|
/>
|
|
108
79
|
)}
|
|
109
|
-
</
|
|
80
|
+
</Box>
|
|
110
81
|
);
|
|
111
82
|
};
|
|
112
83
|
|
|
@@ -11,35 +11,6 @@ defaultStory.story = {
|
|
|
11
11
|
name: "Default",
|
|
12
12
|
};
|
|
13
13
|
|
|
14
|
-
export const customColors = () => (
|
|
15
|
-
<Avatar name="Joe Smith" bg="purple.500" color="red.200" />
|
|
16
|
-
);
|
|
17
|
-
|
|
18
|
-
customColors.story = {
|
|
19
|
-
name: "Override colors",
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
export const withVariants = () => (
|
|
23
|
-
<div display="inline-block">
|
|
24
|
-
<Avatar mt={5} name="Kent C. Dodds" type="neutral" variant="dark" />
|
|
25
|
-
<Avatar mt={5} name="Kent C. Dodds" type="neutral" variant="light" />
|
|
26
|
-
<Avatar mt={5} name="Kent C. Dodds" type="green" variant="dark" />
|
|
27
|
-
<Avatar mt={5} name="Kent C. Dodds" type="green" variant="light" />
|
|
28
|
-
<Avatar mt={5} name="Kent C. Dodds" type="purple" variant="dark" />
|
|
29
|
-
<Avatar mt={5} name="Kent C. Dodds" type="purple" variant="light" />
|
|
30
|
-
<Avatar mt={5} name="Kent C. Dodds" type="red" variant="light" />
|
|
31
|
-
<Avatar mt={5} name="Kent C. Dodds" type="red" variant="dark" />
|
|
32
|
-
<Avatar mt={5} name="Kent C. Dodds" type="yellow" variant="light" />
|
|
33
|
-
<Avatar mt={5} name="Kent C. Dodds" type="yellow" variant="dark" />
|
|
34
|
-
<Avatar mt={5} name="Kent C. Dodds" type="blue" variant="light" />
|
|
35
|
-
<Avatar mt={5} name="Kent C. Dodds" type="blue" variant="dark" />
|
|
36
|
-
</div>
|
|
37
|
-
);
|
|
38
|
-
|
|
39
|
-
withVariants.story = {
|
|
40
|
-
name: "With color types",
|
|
41
|
-
};
|
|
42
|
-
|
|
43
14
|
export const withImage = () => (
|
|
44
15
|
<Avatar name="Kent C. Dodds" src="https://github.com/kentcdodds.png" />
|
|
45
16
|
);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
// @flow
|
|
2
|
-
export type EnumIconNames = "active-listener" | "add-item" | "add-keyword" | "add-team-member" | "add-variable" | "address-card-solid" | "adobe-experience-manager" | "ads" | "android" | "apple" | "approval-indicator-outline" | "approval-indicator" | "archive" | "arrow-down-line" | "arrow-down" | "arrow-left-line" | "arrow-left" | "arrow-right-line" | "arrow-right" | "arrow-up-line" | "arrow-up" | "arrows" | "asset-library-outline" | "asset-library" | "assign" | "atom" | "audio" | "back-to-top" | "bambu-icon-outline" | "bambu-icon" | "barcode" | "basketball" | "bell-outline" | "bitly" | "bold" | "book" | "bot" | "browser" | "business" | "calendar-outline" | "calendar" | "camera-outline" | "camera-story" | "camera" | "campaign" | "canva" | "carousel" | "cart-plus-outline" | "cart-plus" | "check" | "chevron-down-filled" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up-down-filled" | "chevron-up-filled" | "chevron-up" | "circle-check-outline" | "circle-check" | "circle" | "circle+" | "circles" | "circlex" | "click-to-view" | "clicks" | "clipboard-outline" | "clipboard" | "clock" | "closed-captioning" | "cloud" | "code" | "columns" | "comment-alt-outline" | "comment-alt" | "comment-lines-alt-outline" | "comment" | "compact-density" | "compact-indicator" | "comparison" | "competitor" | "compose" | "content-suggestions" | "credit-card" | "crop" | "crown" | "dashboard" | "discovery" | "dislike-outline" | "dislike" | "dm-link-outline" | "dm-link" | "dotdotdot" | "download" | "drafts-outline" | "drafts" | "dropbox" | "duplicate-outline" | "duplicate" | "emoji-outline" | "emoji" | "empty-image" | "engagement-per-post" | "engagements" | "error" | "exchange-alt" | "expanded-indicator" | "export" | "extended-circles" | "external-link-alt" | "external-link" | "extreme-negative-sentiment" | "eye-outline" | "eye-slash-outline" | "eye-slash" | "eye" | "facebook-audience-network" | "facebook-branded-content-outline" | "facebook-branded-content" | "facebook-groups" | "facebook" | "fb-reactions-angry" | "fb-reactions-haha" | "fb-reactions-like" | "fb-reactions-love" | "fb-reactions-sad" | "fb-reactions-wow" | "feedly" | "feeds" | "female" | "file-chart-line" | "file-edit" | "file-times-solid" | "filter" | "flag-outline" | "flag" | "folder-open" | "folder" | "follow-outline" | "follow" | "follower-increase" | "following" | "font" | "full-access" | "gear" | "gears" | "glassdoor" | "glasses" | "globe" | "google-analytics-color" | "google-business-messages" | "google-drive" | "google-my-business" | "grip" | "h1" | "h2" | "hamburger" | "hashtag" | "headset" | "heart-outline" | "heart" | "heartbeat" | "help" | "hiking" | "history" | "home" | "hourglass" | "hubspot" | "image-caption" | "image" | "images" | "impressions-per-post" | "impressions" | "inactive-listener" | "inbox-action" | "inbox-views" | "inbox" | "indicator" | "industry" | "info" | "instagram" | "internal-activity-outline" | "internal-activity" | "italic" | "key" | "keyboard" | "laptop-phone" | "large-density" | "lift" | "like-outline" | "like" | "link" | "linkedin-audience-network" | "linkedin" | "list-ol" | "listening" | "lists" | "location-outline" | "location" | "lock" | "male" | "marketo" | "mention" | "message-preview-outline" | "message-preview" | "message" | "messages-outline" | "messages" | "messenger" | "metric-table" | "microsoft-dynamics" | "minus" | "mobile" | "monitor" | "moon" | "negative-sentiment" | "neutral-positive-sentiment" | "neutral-sentiment" | "new-trend" | "newspaper" | "no-access" | "notepad" | "notifications-publishing-outline" | "notifications-publishing" | "notifications" | "offline" | "online" | "paid-promotion-outline" | "paid-promotion" | "paid" | "paint" | "palette" | "paperclip" | "pause" | "pencil-outline" | "pencil" | "person" | "phone" | "pinterest-boards-outline" | "pinterest-boards" | "pinterest" | "play-circle" | "play" | "plus" | "positive-sentiment" | "power-up" | "profile-connect" | "profile-disconnect" | "publishing-outline" | "publishing" | "puzzle-piece" | "qr-code" | "queue" | "recommendation" | "reddit-alien" | "reddit" | "referrals" | "refresh" | "rejected" | "reply-outline" | "reply" | "reporting-period" | "reporting" | "reports-home" | "reports" | "retweet" | "rss" | "sales" | "salesforce" | "save-assets" | "saved-messages" | "saved-reply-outline" | "saved-reply" | "search" | "sent-message-outline" | "sent-message" | "share" | "shopify" | "show-navigation" | "slack" | "small-density" | "smiley" | "some-access" | "sparkles" | "spike-alert" | "star-half-alt-solid" | "star-of-life" | "star-outline" | "star" | "sticky-note-outline" | "sticky-note" | "stories" | "story" | "suggestions" | "sun" | "tag-outline" | "tag" | "targeting-outline" | "targeting" | "tasks-outline" | "tasks" | "team-conversation-outline" | "team-conversation" | "team" | "text-asset" | "text" | "times" | "trash-can-outline" | "trash-can" | "trend-down" | "trend-neutral" | "trend-up" | "trends" | "triangle-black" | "triangle" | "tripadvisor-circle-outline" | "tripadvisor-circle" | "tripadvisor" | "trophy-outline" | "tumblr" | "twitter-audience-network" | "twitter" | "unfollow-outline" | "unfollow" | "unlink" | "unlock" | "upload" | "user-circle" | "users" | "verified" | "video-camera-story" | "video-camera" | "vip" | "weight" | "whatsapp" | "window-maximize" | "window-minimize" | "window-regular" | "window-restore" | "x" | "yelp-full-star" | "yelp-half-star" | "yelp" | "youtube" | "zendesk";
|
|
2
|
+
export type EnumIconNames = "active-listener" | "add-item" | "add-keyword" | "add-team-member" | "add-variable" | "address-card-solid" | "adobe-experience-manager" | "ads" | "android" | "apple" | "approval-indicator-outline" | "approval-indicator" | "archive" | "arrow-down-line" | "arrow-down" | "arrow-left-line" | "arrow-left" | "arrow-right-line" | "arrow-right" | "arrow-up-line" | "arrow-up" | "arrows" | "asset-library-outline" | "asset-library" | "assign" | "atom" | "audio" | "back-to-top" | "bambu-icon-outline" | "bambu-icon" | "barcode" | "basketball" | "bell-outline" | "big-commerce" | "bigcommerce" | "BigCommerce" | "bitly" | "bold" | "book" | "bot" | "browser" | "business" | "calendar-outline" | "calendar" | "camera-outline" | "camera-story" | "camera" | "campaign" | "canva" | "carousel" | "cart-plus-outline" | "cart-plus" | "check" | "chevron-down-filled" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up-down-filled" | "chevron-up-filled" | "chevron-up" | "circle-check-outline" | "circle-check" | "circle" | "circle+" | "circles" | "circlex" | "click-to-view" | "clicks" | "clipboard-outline" | "clipboard" | "clock" | "closed-captioning" | "cloud" | "code" | "columns" | "comment-alt-outline" | "comment-alt" | "comment-lines-alt-outline" | "comment" | "compact-density" | "compact-indicator" | "comparison" | "competitor" | "compose" | "content-suggestions" | "credit-card" | "crop" | "crown" | "dashboard" | "discovery" | "dislike-outline" | "dislike" | "dm-link-outline" | "dm-link" | "dotdotdot" | "download" | "drafts-outline" | "drafts" | "dropbox" | "duplicate-outline" | "duplicate" | "emoji-outline" | "emoji" | "empty-image" | "engagement-per-post" | "engagements" | "error" | "exchange-alt" | "expanded-indicator" | "export" | "extended-circles" | "external-link-alt" | "external-link" | "extreme-negative-sentiment" | "eye-outline" | "eye-slash-outline" | "eye-slash" | "eye" | "facebook-audience-network" | "facebook-branded-content-outline" | "facebook-branded-content" | "facebook-groups" | "facebook" | "fb-reactions-angry" | "fb-reactions-haha" | "fb-reactions-like" | "fb-reactions-love" | "fb-reactions-sad" | "fb-reactions-wow" | "feedly" | "feeds" | "female" | "file-chart-line" | "file-edit" | "file-times-solid" | "filter" | "flag-outline" | "flag" | "folder-open" | "folder" | "follow-outline" | "follow" | "follower-increase" | "following" | "font" | "full-access" | "gear" | "gears" | "glassdoor" | "glasses" | "globe" | "google-analytics-color" | "google-business-messages" | "google-drive" | "google-my-business" | "grip" | "h1" | "h2" | "hamburger" | "hashtag" | "headset" | "heart-outline" | "heart" | "heartbeat" | "help" | "hiking" | "history" | "home" | "hourglass" | "hubspot" | "image-caption" | "image" | "images" | "impressions-per-post" | "impressions" | "inactive-listener" | "inbox-action" | "inbox-views" | "inbox" | "indicator" | "industry" | "info" | "instagram" | "internal-activity-outline" | "internal-activity" | "italic" | "key" | "keyboard" | "laptop-phone" | "large-density" | "lift" | "like-outline" | "like" | "link" | "linkedin-audience-network" | "linkedin" | "list-ol" | "listening" | "lists" | "location-outline" | "location" | "lock" | "male" | "marketo" | "mention" | "message-preview-outline" | "message-preview" | "message" | "messages-outline" | "messages" | "messenger" | "metric-table" | "microsoft-dynamics" | "minus" | "mobile" | "monitor" | "moon" | "negative-sentiment" | "neutral-positive-sentiment" | "neutral-sentiment" | "new-trend" | "newspaper" | "no-access" | "notepad" | "notifications-publishing-outline" | "notifications-publishing" | "notifications" | "offline" | "online" | "paid-promotion-outline" | "paid-promotion" | "paid" | "paint" | "palette" | "paperclip" | "pause" | "pencil-outline" | "pencil" | "person" | "phone" | "pinterest-boards-outline" | "pinterest-boards" | "pinterest" | "play-circle" | "play" | "plus" | "positive-sentiment" | "power-up" | "profile-connect" | "profile-disconnect" | "publishing-outline" | "publishing" | "puzzle-piece" | "qr-code" | "queue" | "recommendation" | "reddit-alien" | "reddit" | "referrals" | "refresh" | "rejected" | "reply-outline" | "reply" | "reporting-period" | "reporting" | "reports-home" | "reports" | "retweet" | "rss" | "sales" | "salesforce" | "save-assets" | "saved-messages" | "saved-reply-outline" | "saved-reply" | "search" | "sent-message-outline" | "sent-message" | "share" | "shopify" | "show-navigation" | "slack" | "small-density" | "smiley" | "some-access" | "sparkles" | "spike-alert" | "star-half-alt-solid" | "star-of-life" | "star-outline" | "star" | "sticky-note-outline" | "sticky-note" | "stories" | "story" | "suggestions" | "sun" | "tag-outline" | "tag" | "targeting-outline" | "targeting" | "tasks-outline" | "tasks" | "team-conversation-outline" | "team-conversation" | "team" | "text-asset" | "text" | "times" | "trash-can-outline" | "trash-can" | "trend-down" | "trend-neutral" | "trend-up" | "trends" | "triangle-black" | "triangle" | "tripadvisor-circle-outline" | "tripadvisor-circle" | "tripadvisor" | "trophy-outline" | "tumblr" | "twitter-audience-network" | "twitter" | "unfollow-outline" | "unfollow" | "unlink" | "unlock" | "upload" | "user-circle" | "users" | "verified" | "video-camera-story" | "video-camera" | "vip" | "weight" | "whatsapp" | "window-maximize" | "window-minimize" | "window-regular" | "window-restore" | "woocommerce" | "x" | "yelp-full-star" | "yelp-half-star" | "yelp" | "youtube" | "zendesk";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
module.exports = {"active-listener":"0 0 16 16","add-item":"0 0 16 16","add-keyword":"0 0 16 16","add-team-member":"0 0 18 13","add-variable":"0 0 18 14","address-card-solid":"0 0 18 16","adobe-experience-manager":"0 0 16 18","ads":"0 0 9 16","android":"0 0 14 16","apple":"0 0 14 16","approval-indicator-outline":"0 0 14 16","approval-indicator":"0 0 14 16","archive":"0 0 16 16","arrow-down-line":"0 0 14 16","arrow-down":"0 0 16 16","arrow-left-line":"0 0 16 18","arrow-left":"0 0 16 16","arrow-right-line":"0 0 16 18","arrow-right":"0 0 16 16","arrow-up-line":"0 0 14 16","arrow-up":"0 0 16 16","arrows":"0 0 16 16","asset-library-outline":"0 0 16 16","asset-library":"0 0 16 16","assign":"0 0 18 15","atom":"0 0 14 16","audio":"0 0 16 14","back-to-top":"0 0 15 16","bambu-icon-outline":"0 0 16 16","bambu-icon":"0 0 16 16","barcode":"0 0 18 16","basketball":"0 0 16 16","bell-outline":"0 0 14 16","bitly":"0 0 16 16","bold":"0 0 16 16","book":"0 0 14 16","bot":"0 0 16 16","browser":"0 0 16 16","business":"0 0 16 16","calendar-outline":"0 0 14 16","calendar":"0 0 14 16","camera-outline":"0 0 18 16","camera-story":"0 0 18 16","camera":"0 0 18 16","campaign":"0 0 16 14","canva":"0 0 16 18","carousel":"0 0 16 18","cart-plus-outline":"0 0 17 15","cart-plus":"0 0 17 15","check":"0 0 16 16","chevron-down-filled":"0 0 16 21","chevron-down":"0 0 16 18","chevron-left":"0 0 10 16","chevron-right":"0 0 10 17","chevron-up-down-filled":"0 0 12 20","chevron-up-filled":"0 0 16 21","chevron-up":"0 0 16 18","circle-check-outline":"0 0 16 16","circle-check":"0 0 16 16","circle":"0 0 16 16","circle+":"0 0 16 16","circles":"0 0 16 16","circlex":"0 0 16 16","click-to-view":"0 0 12 16","clicks":"0 0 10 16","clipboard-outline":"0 0 12 16","clipboard":"0 0 12 16","clock":"0 0 16 16","closed-captioning":"0 0 16 16","cloud":"0 0 16 13","code":"0 0 18 16","columns":"0 0 16 16","comment-alt-outline":"0 0 16 15","comment-alt":"0 0 16 15","comment-lines-alt-outline":"0 0 16 16","comment":"0 0 16 13","compact-density":"0 0 16 16","compact-indicator":"0 0 16 16","comparison":"0 0 16 14","competitor":"0 0 14 16","compose":"0 0 16 16","content-suggestions":"0 0 16 16","credit-card":"0 0 16 14","crop":"0 0 16 16","crown":"0 0 16 16","dashboard":"0 0 16 14","discovery":"0 0 16 16","dislike-outline":"0 0 15 16","dislike":"0 0 16 16","dm-link-outline":"0 0 16 16","dm-link":"0 0 16 16","dotdotdot":"0 0 16 16","download":"0 0 16 16","drafts-outline":"0 0 12 16","drafts":"0 0 12 16","dropbox":"0 0 18 16","duplicate-outline":"0 0 14 16","duplicate":"0 0 14 16","emoji-outline":"0 0 16 16","emoji":"0 0 16 16","empty-image":"0 0 16 18","engagement-per-post":"0 0 16 16","engagements":"0 0 16 15","error":"0 0 16 16","exchange-alt":"0 0 16 16","expanded-indicator":"0 0 16 16","export":"0 0 14 17","extended-circles":"0 0 16 16","external-link-alt":"0 0 16 16","external-link":"0 0 16 16","extreme-negative-sentiment":"0 0 16 16","eye-outline":"0 0 18 16","eye-slash-outline":"0 0 20 16","eye-slash":"0 0 20 16","eye":"0 0 18 16","facebook-audience-network":"0 0 16 16","facebook-branded-content-outline":"0 0 18 15","facebook-branded-content":"0 0 18 15","facebook-groups":"0 0 16 16","facebook":"0 0 16 16","fb-reactions-angry":"0 0 16 16","fb-reactions-haha":"0 0 16 16","fb-reactions-like":"0 0 16 16","fb-reactions-love":"0 0 16 16","fb-reactions-sad":"0 0 16 16","fb-reactions-wow":"0 0 16 16","feedly":"0 0 16 15","feeds":"0 0 16 15","female":"0 0 11 18","file-chart-line":"0 0 12 16","file-edit":"0 0 12 16","file-times-solid":"0 0 12 16","filter":"0 0 16 16","flag-outline":"0 0 16 16","flag":"0 0 16 16","folder-open":"0 0 16 15","folder":"0 0 16 16","follow-outline":"0 0 20 16","follow":"0 0 20 16","follower-increase":"0 0 19 16","following":"0 0 20 16","font":"0 0 18 16","full-access":"0 0 16 16","gear":"0 0 16 16","gears":"0 0 16 16","glassdoor":"0 0 16 16","glasses":"0 0 18 14","globe":"0 0 16 16","google-analytics-color":"0 0 14 18","google-business-messages":"0 0 16 16","google-drive":"0 0 16 14","google-my-business":"0 0 16 14","grip":"0 0 8 18","h1":"0 0 16 16","h2":"0 0 16 16","hamburger":"0 0 16 18","hashtag":"0 0 16 16","headset":"0 0 16 16","heart-outline":"0 0 16 16","heart":"0 0 16 16","heartbeat":"0 0 18 16","help":"0 0 16 16","hiking":"0 0 16 16","history":"0 0 16 16","home":"0 0 16 15","hourglass":"0 0 12 16","hubspot":"0 0 16 16","image-caption":"0 0 16 14","image":"0 0 16 16","images":"0 0 16 15","impressions-per-post":"0 0 16 16","impressions":"0 0 18 16","inactive-listener":"0 0 16 12","inbox-action":"0 0 16 16","inbox-views":"0 0 16 13","inbox":"0 0 16 14","indicator":"0 0 16 16","industry":"0 0 14 16","info":"0 0 16 16","instagram":"0 0 16 16","internal-activity-outline":"0 0 16 16","internal-activity":"0 0 16 16","italic":"0 0 16 16","key":"0 0 16 16","keyboard":"0 0 18 16","laptop-phone":"0 0 16 16","large-density":"0 0 16 16","lift":"0 0 23 16","like-outline":"0 0 15 16","like":"0 0 16 16","link":"0 0 16 16","linkedin-audience-network":"0 0 16 16","linkedin":"0 0 16 16","list-ol":"0 0 16 16","listening":"0 0 14 16","lists":"0 0 16 16","location-outline":"0 0 12 16","location":"0 0 12 16","lock":"0 0 14 16","male":"0 0 16 20","marketo":"0 0 16 18","mention":"0 0 16 16","message-preview-outline":"0 0 18 16","message-preview":"0 0 18 16","message":"0 0 16 16","messages-outline":"0 0 16 16","messages":"0 0 16 16","messenger":"0 0 16 16","metric-table":"0 0 16 16","microsoft-dynamics":"0 0 16 16","minus":"0 0 16 16","mobile":"0 0 10 16","monitor":"0 0 12 16","moon":"0 0 15 16","negative-sentiment":"0 0 16 16","neutral-positive-sentiment":"0 0 16 16","neutral-sentiment":"0 0 16 16","new-trend":"0 0 12 16","newspaper":"0 0 16 16","no-access":"0 0 16 16","notepad":"0 0 12 16","notifications-publishing-outline":"0 0 16 16","notifications-publishing":"0 0 16 16","notifications":"0 0 14 16","offline":"0 0 18 15","online":"0 0 18 15","paid-promotion-outline":"0 0 16 16","paid-promotion":"0 0 16 16","paid":"0 0 14 16","paint":"0 0 18 16","palette":"0 0 16 16","paperclip":"0 0 14 16","pause":"0 0 16 18","pencil-outline":"0 0 16 16","pencil":"0 0 16 16","person":"0 0 14 16","phone":"0 0 16 16","pinterest-boards-outline":"0 0 14 16","pinterest-boards":"0 0 14 16","pinterest":"0 0 16 16","play-circle":"0 0 16 16","play":"0 0 14 16","plus":"0 0 16 18","positive-sentiment":"0 0 16 16","power-up":"0 0 10 16","profile-connect":"0 0 16 16","profile-disconnect":"0 0 16 16","publishing-outline":"0 0 16 16","publishing":"0 0 16 16","puzzle-piece":"0 0 18 16","qr-code":"0 0 16 16","queue":"0 0 16 16","recommendation":"0 0 16 16","reddit-alien":"0 0 16 16","reddit":"0 0 16 16","referrals":"0 0 16 16","refresh":"0 0 16 16","rejected":"0 0 16 16","reply-outline":"0 0 16 16","reply":"0 0 16 16","reporting-period":"0 0 14 16","reporting":"0 0 16 16","reports-home":"0 0 16 16","reports":"0 0 16 15","retweet":"0 0 18 16","rss":"0 0 16 16","sales":"0 0 9 16","salesforce":"0 0 20 16","save-assets":"0 0 16 16","saved-messages":"0 0 16 16","saved-reply-outline":"0 0 16 12","saved-reply":"0 0 16 12","search":"0 0 16 16","sent-message-outline":"0 0 16 14","sent-message":"0 0 16 14","share":"0 0 16 14","shopify":"0 0 16 18","show-navigation":"0 0 18 14","slack":"0 0 16 16","small-density":"0 0 16 16","smiley":"0 0 16 16","some-access":"0 0 16 16","sparkles":"0 0 16 16","spike-alert":"0 0 16 16","star-half-alt-solid":"0 0 18 16","star-of-life":"0 0 16 16","star-outline":"0 0 18 16","star":"0 0 18 16","sticky-note-outline":"0 0 16 16","sticky-note":"0 0 16 16","stories":"0 0 16 17","story":"0 0 16 16","suggestions":"0 0 11 16","sun":"0 0 16 16","tag-outline":"0 0 16 16","tag":"0 0 16 16","targeting-outline":"0 0 16 16","targeting":"0 0 16 16","tasks-outline":"0 0 12 16","tasks":"0 0 12 16","team-conversation-outline":"0 0 16 18","team-conversation":"0 0 16 18","team":"0 0 18 16","text-asset":"0 0 16 16","text":"0 0 8 16","times":"0 0 16 22","trash-can-outline":"0 0 14 16","trash-can":"0 0 14 16","trend-down":"0 0 18 18","trend-neutral":"0 0 20 18","trend-up":"0 0 18 18","trends":"0 0 16 17","triangle-black":"0 0 16 16","triangle":"0 0 16 16","tripadvisor-circle-outline":"0 0 16 16","tripadvisor-circle":"0 0 16 16","tripadvisor":"0 0 16 16","trophy-outline":"0 0 18 16","tumblr":"0 0 16 16","twitter-audience-network":"0 0 17 16","twitter":"0 0 17 16","unfollow-outline":"0 0 20 16","unfollow":"0 0 20 16","unlink":"0 0 16 16","unlock":"0 0 14 16","upload":"0 0 16 17","user-circle":"0 0 16 16","users":"0 0 18 16","verified":"0 0 16 16","video-camera-story":"0 0 18 15","video-camera":"0 0 18 16","vip":"0 0 16 16","weight":"0 0 16 16","whatsapp":"0 0 16 16","window-maximize":"0 0 16 16","window-minimize":"0 0 16 16","window-regular":"0 0 16 16","window-restore":"0 0 16 16","x":"0 0 16 18","yelp-full-star":"0 0 16 16","yelp-half-star":"0 0 16 16","yelp":"0 0 14 16","youtube":"0 0 16 15","zendesk":"0 0 16 16"};
|
|
1
|
+
module.exports = {"active-listener":"0 0 16 16","add-item":"0 0 16 16","add-keyword":"0 0 16 16","add-team-member":"0 0 18 13","add-variable":"0 0 18 14","address-card-solid":"0 0 18 16","adobe-experience-manager":"0 0 16 18","ads":"0 0 9 16","android":"0 0 14 16","apple":"0 0 14 16","approval-indicator-outline":"0 0 14 16","approval-indicator":"0 0 14 16","archive":"0 0 16 16","arrow-down-line":"0 0 14 16","arrow-down":"0 0 16 16","arrow-left-line":"0 0 16 18","arrow-left":"0 0 16 16","arrow-right-line":"0 0 16 18","arrow-right":"0 0 16 16","arrow-up-line":"0 0 14 16","arrow-up":"0 0 16 16","arrows":"0 0 16 16","asset-library-outline":"0 0 16 16","asset-library":"0 0 16 16","assign":"0 0 18 15","atom":"0 0 14 16","audio":"0 0 16 14","back-to-top":"0 0 15 16","bambu-icon-outline":"0 0 16 16","bambu-icon":"0 0 16 16","barcode":"0 0 18 16","basketball":"0 0 16 16","bell-outline":"0 0 14 16","big-commerce":"0 0 16 16","bigcommerce":"0 0 16 16","BigCommerce":"0 0 17 17","bitly":"0 0 16 16","bold":"0 0 16 16","book":"0 0 14 16","bot":"0 0 16 16","browser":"0 0 16 16","business":"0 0 16 16","calendar-outline":"0 0 14 16","calendar":"0 0 14 16","camera-outline":"0 0 18 16","camera-story":"0 0 18 16","camera":"0 0 18 16","campaign":"0 0 16 14","canva":"0 0 16 18","carousel":"0 0 16 18","cart-plus-outline":"0 0 17 15","cart-plus":"0 0 17 15","check":"0 0 16 16","chevron-down-filled":"0 0 16 21","chevron-down":"0 0 16 18","chevron-left":"0 0 10 16","chevron-right":"0 0 10 17","chevron-up-down-filled":"0 0 12 20","chevron-up-filled":"0 0 16 21","chevron-up":"0 0 16 18","circle-check-outline":"0 0 16 16","circle-check":"0 0 16 16","circle":"0 0 16 16","circle+":"0 0 16 16","circles":"0 0 16 16","circlex":"0 0 16 16","click-to-view":"0 0 12 16","clicks":"0 0 10 16","clipboard-outline":"0 0 12 16","clipboard":"0 0 12 16","clock":"0 0 16 16","closed-captioning":"0 0 16 16","cloud":"0 0 16 13","code":"0 0 18 16","columns":"0 0 16 16","comment-alt-outline":"0 0 16 15","comment-alt":"0 0 16 15","comment-lines-alt-outline":"0 0 16 16","comment":"0 0 16 13","compact-density":"0 0 16 16","compact-indicator":"0 0 16 16","comparison":"0 0 16 14","competitor":"0 0 14 16","compose":"0 0 16 16","content-suggestions":"0 0 16 16","credit-card":"0 0 16 14","crop":"0 0 16 16","crown":"0 0 16 16","dashboard":"0 0 16 14","discovery":"0 0 16 16","dislike-outline":"0 0 15 16","dislike":"0 0 16 16","dm-link-outline":"0 0 16 16","dm-link":"0 0 16 16","dotdotdot":"0 0 16 16","download":"0 0 16 16","drafts-outline":"0 0 12 16","drafts":"0 0 12 16","dropbox":"0 0 18 16","duplicate-outline":"0 0 14 16","duplicate":"0 0 14 16","emoji-outline":"0 0 16 16","emoji":"0 0 16 16","empty-image":"0 0 16 18","engagement-per-post":"0 0 16 16","engagements":"0 0 16 15","error":"0 0 16 16","exchange-alt":"0 0 16 16","expanded-indicator":"0 0 16 16","export":"0 0 14 17","extended-circles":"0 0 16 16","external-link-alt":"0 0 16 16","external-link":"0 0 16 16","extreme-negative-sentiment":"0 0 16 16","eye-outline":"0 0 18 16","eye-slash-outline":"0 0 20 16","eye-slash":"0 0 20 16","eye":"0 0 18 16","facebook-audience-network":"0 0 16 16","facebook-branded-content-outline":"0 0 18 15","facebook-branded-content":"0 0 18 15","facebook-groups":"0 0 16 16","facebook":"0 0 16 16","fb-reactions-angry":"0 0 16 16","fb-reactions-haha":"0 0 16 16","fb-reactions-like":"0 0 16 16","fb-reactions-love":"0 0 16 16","fb-reactions-sad":"0 0 16 16","fb-reactions-wow":"0 0 16 16","feedly":"0 0 16 15","feeds":"0 0 16 15","female":"0 0 11 18","file-chart-line":"0 0 12 16","file-edit":"0 0 12 16","file-times-solid":"0 0 12 16","filter":"0 0 16 16","flag-outline":"0 0 16 16","flag":"0 0 16 16","folder-open":"0 0 16 15","folder":"0 0 16 16","follow-outline":"0 0 20 16","follow":"0 0 20 16","follower-increase":"0 0 19 16","following":"0 0 20 16","font":"0 0 18 16","full-access":"0 0 16 16","gear":"0 0 16 16","gears":"0 0 16 16","glassdoor":"0 0 16 16","glasses":"0 0 18 14","globe":"0 0 16 16","google-analytics-color":"0 0 14 18","google-business-messages":"0 0 16 16","google-drive":"0 0 16 14","google-my-business":"0 0 16 14","grip":"0 0 8 18","h1":"0 0 16 16","h2":"0 0 16 16","hamburger":"0 0 16 18","hashtag":"0 0 16 16","headset":"0 0 16 16","heart-outline":"0 0 16 16","heart":"0 0 16 16","heartbeat":"0 0 18 16","help":"0 0 16 16","hiking":"0 0 16 16","history":"0 0 16 16","home":"0 0 16 15","hourglass":"0 0 12 16","hubspot":"0 0 16 16","image-caption":"0 0 16 14","image":"0 0 16 16","images":"0 0 16 15","impressions-per-post":"0 0 16 16","impressions":"0 0 18 16","inactive-listener":"0 0 16 12","inbox-action":"0 0 16 16","inbox-views":"0 0 16 13","inbox":"0 0 16 14","indicator":"0 0 16 16","industry":"0 0 14 16","info":"0 0 16 16","instagram":"0 0 16 16","internal-activity-outline":"0 0 16 16","internal-activity":"0 0 16 16","italic":"0 0 16 16","key":"0 0 16 16","keyboard":"0 0 18 16","laptop-phone":"0 0 16 16","large-density":"0 0 16 16","lift":"0 0 23 16","like-outline":"0 0 15 16","like":"0 0 16 16","link":"0 0 16 16","linkedin-audience-network":"0 0 16 16","linkedin":"0 0 16 16","list-ol":"0 0 16 16","listening":"0 0 14 16","lists":"0 0 16 16","location-outline":"0 0 12 16","location":"0 0 12 16","lock":"0 0 14 16","male":"0 0 16 20","marketo":"0 0 16 18","mention":"0 0 16 16","message-preview-outline":"0 0 18 16","message-preview":"0 0 18 16","message":"0 0 16 16","messages-outline":"0 0 16 16","messages":"0 0 16 16","messenger":"0 0 16 16","metric-table":"0 0 16 16","microsoft-dynamics":"0 0 16 16","minus":"0 0 16 16","mobile":"0 0 10 16","monitor":"0 0 12 16","moon":"0 0 15 16","negative-sentiment":"0 0 16 16","neutral-positive-sentiment":"0 0 16 16","neutral-sentiment":"0 0 16 16","new-trend":"0 0 12 16","newspaper":"0 0 16 16","no-access":"0 0 16 16","notepad":"0 0 12 16","notifications-publishing-outline":"0 0 16 16","notifications-publishing":"0 0 16 16","notifications":"0 0 14 16","offline":"0 0 18 15","online":"0 0 18 15","paid-promotion-outline":"0 0 16 16","paid-promotion":"0 0 16 16","paid":"0 0 14 16","paint":"0 0 18 16","palette":"0 0 16 16","paperclip":"0 0 14 16","pause":"0 0 16 18","pencil-outline":"0 0 16 16","pencil":"0 0 16 16","person":"0 0 14 16","phone":"0 0 16 16","pinterest-boards-outline":"0 0 14 16","pinterest-boards":"0 0 14 16","pinterest":"0 0 16 16","play-circle":"0 0 16 16","play":"0 0 14 16","plus":"0 0 16 18","positive-sentiment":"0 0 16 16","power-up":"0 0 10 16","profile-connect":"0 0 16 16","profile-disconnect":"0 0 16 16","publishing-outline":"0 0 16 16","publishing":"0 0 16 16","puzzle-piece":"0 0 18 16","qr-code":"0 0 16 16","queue":"0 0 16 16","recommendation":"0 0 16 16","reddit-alien":"0 0 16 16","reddit":"0 0 16 16","referrals":"0 0 16 16","refresh":"0 0 16 16","rejected":"0 0 16 16","reply-outline":"0 0 16 16","reply":"0 0 16 16","reporting-period":"0 0 14 16","reporting":"0 0 16 16","reports-home":"0 0 16 16","reports":"0 0 16 15","retweet":"0 0 18 16","rss":"0 0 16 16","sales":"0 0 9 16","salesforce":"0 0 20 16","save-assets":"0 0 16 16","saved-messages":"0 0 16 16","saved-reply-outline":"0 0 16 12","saved-reply":"0 0 16 12","search":"0 0 16 16","sent-message-outline":"0 0 16 14","sent-message":"0 0 16 14","share":"0 0 16 14","shopify":"0 0 16 18","show-navigation":"0 0 18 14","slack":"0 0 16 16","small-density":"0 0 16 16","smiley":"0 0 16 16","some-access":"0 0 16 16","sparkles":"0 0 16 16","spike-alert":"0 0 16 16","star-half-alt-solid":"0 0 18 16","star-of-life":"0 0 16 16","star-outline":"0 0 18 16","star":"0 0 18 16","sticky-note-outline":"0 0 16 16","sticky-note":"0 0 16 16","stories":"0 0 16 17","story":"0 0 16 16","suggestions":"0 0 11 16","sun":"0 0 16 16","tag-outline":"0 0 16 16","tag":"0 0 16 16","targeting-outline":"0 0 16 16","targeting":"0 0 16 16","tasks-outline":"0 0 12 16","tasks":"0 0 12 16","team-conversation-outline":"0 0 16 18","team-conversation":"0 0 16 18","team":"0 0 18 16","text-asset":"0 0 16 16","text":"0 0 8 16","times":"0 0 16 22","trash-can-outline":"0 0 14 16","trash-can":"0 0 14 16","trend-down":"0 0 18 18","trend-neutral":"0 0 20 18","trend-up":"0 0 18 18","trends":"0 0 16 17","triangle-black":"0 0 16 16","triangle":"0 0 16 16","tripadvisor-circle-outline":"0 0 16 16","tripadvisor-circle":"0 0 16 16","tripadvisor":"0 0 16 16","trophy-outline":"0 0 18 16","tumblr":"0 0 16 16","twitter-audience-network":"0 0 17 16","twitter":"0 0 17 16","unfollow-outline":"0 0 20 16","unfollow":"0 0 20 16","unlink":"0 0 16 16","unlock":"0 0 14 16","upload":"0 0 16 17","user-circle":"0 0 16 16","users":"0 0 18 16","verified":"0 0 16 16","video-camera-story":"0 0 18 15","video-camera":"0 0 18 16","vip":"0 0 16 16","weight":"0 0 16 16","whatsapp":"0 0 16 16","window-maximize":"0 0 16 16","window-minimize":"0 0 16 16","window-regular":"0 0 16 16","window-restore":"0 0 16 16","woocommerce":"0 0 16 16","x":"0 0 16 18","yelp-full-star":"0 0 16 16","yelp-half-star":"0 0 16 16","yelp":"0 0 14 16","youtube":"0 0 16 15","zendesk":"0 0 16 16"};
|
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
// @flow
|
|
2
2
|
import List from "./styles";
|
|
3
3
|
import React, { useCallback, useMemo } from "react";
|
|
4
|
-
import { CellMeasurer, CellMeasurerCache } from "react-virtualized";
|
|
5
|
-
|
|
6
|
-
// imported separately so it can be mocked separately (otherwise height and width will always be 0 in jsdom)
|
|
7
|
-
import AutoSizer from "react-virtualized/dist/es/AutoSizer";
|
|
4
|
+
import { AutoSizer, CellMeasurer, CellMeasurerCache } from "react-virtualized";
|
|
8
5
|
|
|
9
6
|
import Box from "../Box";
|
|
10
7
|
|
|
@@ -3,11 +3,43 @@ import { render } from "../utils/react-testing-library";
|
|
|
3
3
|
import "jest-styled-components";
|
|
4
4
|
import List from "./";
|
|
5
5
|
|
|
6
|
-
jest.mock("react-virtualized/dist/es/AutoSizer", () => ({ children }) =>
|
|
7
|
-
children({ height: 600, width: 600 })
|
|
8
|
-
);
|
|
9
|
-
|
|
10
6
|
describe("List", () => {
|
|
7
|
+
// Logic to make Autosizer work in RTL
|
|
8
|
+
const originalOffsetHeight = Object.getOwnPropertyDescriptor(
|
|
9
|
+
HTMLElement.prototype,
|
|
10
|
+
"offsetHeight"
|
|
11
|
+
);
|
|
12
|
+
const originalOffsetWidth = Object.getOwnPropertyDescriptor(
|
|
13
|
+
HTMLElement.prototype,
|
|
14
|
+
"offsetWidth"
|
|
15
|
+
);
|
|
16
|
+
|
|
17
|
+
beforeAll(() => {
|
|
18
|
+
Object.defineProperty(HTMLElement.prototype, "offsetHeight", {
|
|
19
|
+
configurable: true,
|
|
20
|
+
value: 200,
|
|
21
|
+
});
|
|
22
|
+
Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
|
|
23
|
+
configurable: true,
|
|
24
|
+
value: 200,
|
|
25
|
+
});
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
afterAll(() => {
|
|
29
|
+
// $FlowIssue
|
|
30
|
+
Object.defineProperty(
|
|
31
|
+
HTMLElement.prototype,
|
|
32
|
+
"offsetHeight",
|
|
33
|
+
originalOffsetHeight
|
|
34
|
+
);
|
|
35
|
+
// $FlowIssue
|
|
36
|
+
Object.defineProperty(
|
|
37
|
+
HTMLElement.prototype,
|
|
38
|
+
"offsetWidth",
|
|
39
|
+
originalOffsetWidth
|
|
40
|
+
);
|
|
41
|
+
});
|
|
42
|
+
|
|
11
43
|
it("should render properly", async () => {
|
|
12
44
|
const { container, runA11yCheck } = render(<List />);
|
|
13
45
|
expect(container).toBeTruthy();
|
package/commonjs/Avatar/index.js
CHANGED
|
@@ -5,9 +5,7 @@ exports.default = exports.Avatar = void 0;
|
|
|
5
5
|
|
|
6
6
|
var React = _interopRequireWildcard(require("react"));
|
|
7
7
|
|
|
8
|
-
var _styledComponents =
|
|
9
|
-
|
|
10
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
8
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
9
|
|
|
12
10
|
var _Box = _interopRequireDefault(require("../Box"));
|
|
13
11
|
|
|
@@ -33,20 +31,8 @@ var AvatarText = (0, _styledComponents.default)(function (_ref) {
|
|
|
33
31
|
}).withConfig({
|
|
34
32
|
displayName: "Avatar__AvatarText",
|
|
35
33
|
componentId: "yx873f-0"
|
|
36
|
-
})(["font-size:", "px;
|
|
34
|
+
})(["font-size:", "px;"], function (props) {
|
|
37
35
|
return props.fontSize;
|
|
38
|
-
}, function (props) {
|
|
39
|
-
return props.color;
|
|
40
|
-
});
|
|
41
|
-
var Container = (0, _styledComponents.default)(_Box.default).withConfig({
|
|
42
|
-
displayName: "Avatar__Container",
|
|
43
|
-
componentId: "yx873f-1"
|
|
44
|
-
})(["", ""], function (_ref2) {
|
|
45
|
-
var theme = _ref2.theme,
|
|
46
|
-
type = _ref2.type,
|
|
47
|
-
variant = _ref2.variant,
|
|
48
|
-
bg = _ref2.bg;
|
|
49
|
-
return (0, _styledComponents.css)(["color:", ";background:", ";"], theme.colors[type][variant === "dark" ? "200" : "900"], bg ? bg : theme.colors[type][variant === "dark" ? "900" : "200"]);
|
|
50
36
|
});
|
|
51
37
|
|
|
52
38
|
var getInitials = function getInitials(name, fallback) {
|
|
@@ -62,20 +48,14 @@ var getInitials = function getInitials(name, fallback) {
|
|
|
62
48
|
.join("");
|
|
63
49
|
};
|
|
64
50
|
|
|
65
|
-
var Avatar = function Avatar(
|
|
66
|
-
var
|
|
67
|
-
appearance =
|
|
68
|
-
name =
|
|
69
|
-
src =
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
type = _ref3$type === void 0 ? "neutral" : _ref3$type,
|
|
74
|
-
_ref3$size = _ref3.size,
|
|
75
|
-
size = _ref3$size === void 0 ? "40px" : _ref3$size,
|
|
76
|
-
bg = _ref3.bg,
|
|
77
|
-
color = _ref3.color,
|
|
78
|
-
rest = _objectWithoutPropertiesLoose(_ref3, ["appearance", "name", "src", "variant", "type", "size", "bg", "color"]);
|
|
51
|
+
var Avatar = function Avatar(_ref2) {
|
|
52
|
+
var _ref2$appearance = _ref2.appearance,
|
|
53
|
+
appearance = _ref2$appearance === void 0 ? "circle" : _ref2$appearance,
|
|
54
|
+
name = _ref2.name,
|
|
55
|
+
src = _ref2.src,
|
|
56
|
+
_ref2$size = _ref2.size,
|
|
57
|
+
size = _ref2$size === void 0 ? "40px" : _ref2$size,
|
|
58
|
+
rest = _objectWithoutPropertiesLoose(_ref2, ["appearance", "name", "src", "size"]);
|
|
79
59
|
|
|
80
60
|
var _useState = (0, React.useState)(false),
|
|
81
61
|
imageFailedLoading = _useState[0],
|
|
@@ -89,8 +69,7 @@ var Avatar = function Avatar(_ref3) {
|
|
|
89
69
|
}, [setImageFailedLoading]); // Font size for initials is half the size of the avatar, rounded down.
|
|
90
70
|
|
|
91
71
|
var fontSize = Math.floor(Number(size.replace("px", "")) * 0.4);
|
|
92
|
-
return /*#__PURE__*/React.createElement(
|
|
93
|
-
className: (0, _classnames.default)(variant),
|
|
72
|
+
return /*#__PURE__*/React.createElement(_Box.default, _extends({
|
|
94
73
|
size: size,
|
|
95
74
|
overflow: "hidden",
|
|
96
75
|
borderRadius: appearance === "leaf" ? "40% 0 40% 0" : "50%",
|
|
@@ -100,16 +79,13 @@ var Avatar = function Avatar(_ref3) {
|
|
|
100
79
|
justifyContent: "center",
|
|
101
80
|
alignItems: "center",
|
|
102
81
|
title: name,
|
|
103
|
-
bg:
|
|
104
|
-
variant: variant,
|
|
105
|
-
type: type,
|
|
82
|
+
bg: "neutral.200",
|
|
106
83
|
"data-qa-user-avatar": name // $FlowIssue - upgrade v0.112.0
|
|
107
84
|
|
|
108
85
|
}, rest), !src || imageFailedLoading ? /*#__PURE__*/React.createElement(AvatarText, {
|
|
109
86
|
lineHeight: size,
|
|
110
87
|
fontWeight: "semibold",
|
|
111
|
-
fontSize: fontSize
|
|
112
|
-
color: color
|
|
88
|
+
fontSize: fontSize
|
|
113
89
|
}, initials) : /*#__PURE__*/React.createElement(_Image.default, {
|
|
114
90
|
alt: name,
|
|
115
91
|
width: "auto",
|
|
@@ -34,6 +34,9 @@ module.exports = {
|
|
|
34
34
|
"barcode": "0 0 18 16",
|
|
35
35
|
"basketball": "0 0 16 16",
|
|
36
36
|
"bell-outline": "0 0 14 16",
|
|
37
|
+
"big-commerce": "0 0 16 16",
|
|
38
|
+
"bigcommerce": "0 0 16 16",
|
|
39
|
+
"BigCommerce": "0 0 17 17",
|
|
37
40
|
"bitly": "0 0 16 16",
|
|
38
41
|
"bold": "0 0 16 16",
|
|
39
42
|
"book": "0 0 14 16",
|
|
@@ -339,6 +342,7 @@ module.exports = {
|
|
|
339
342
|
"window-minimize": "0 0 16 16",
|
|
340
343
|
"window-regular": "0 0 16 16",
|
|
341
344
|
"window-restore": "0 0 16 16",
|
|
345
|
+
"woocommerce": "0 0 16 16",
|
|
342
346
|
"x": "0 0 16 18",
|
|
343
347
|
"yelp-full-star": "0 0 16 16",
|
|
344
348
|
"yelp-half-star": "0 0 16 16",
|
|
@@ -9,8 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
|
|
10
10
|
var _reactVirtualized = require("react-virtualized");
|
|
11
11
|
|
|
12
|
-
var _AutoSizer = _interopRequireDefault(require("react-virtualized/dist/es/AutoSizer"));
|
|
13
|
-
|
|
14
12
|
var _Box = _interopRequireDefault(require("../Box"));
|
|
15
13
|
|
|
16
14
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -59,7 +57,7 @@ var VirtualizedList = function VirtualizedList(_ref) {
|
|
|
59
57
|
})));
|
|
60
58
|
});
|
|
61
59
|
}, [items, getItemProps, cache, itemWrapperProps]);
|
|
62
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
60
|
+
return /*#__PURE__*/_react.default.createElement(_reactVirtualized.AutoSizer, null, function (_ref4) {
|
|
63
61
|
var height = _ref4.height,
|
|
64
62
|
width = _ref4.width;
|
|
65
63
|
return /*#__PURE__*/_react.default.createElement(_styles.default, _extends({
|