Skip to content
This repository was archived by the owner on Jan 21, 2019. It is now read-only.

IW-1234 Add avatar with badges to react design system #90

Merged
merged 10 commits into from
Jan 11, 2019
Merged

IW-1234 Add avatar with badges to react design system #90

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
442c7da
IW-1234 add inline-react-svg bable plugin
Jan 11, 2019
7dd367d
IW-1234 add avatar with badge component
Jan 11, 2019
778f6ff
IW-1234 update snapshots
Jan 11, 2019
701cfd3
IW-1234 import wds avatar styles
Jan 11, 2019
07fbcb4
IW-1234 add Avatar to import test
Jan 11, 2019
2808c7c
IW-1234 add Avatar to style guide and add prop docs
Jan 11, 2019
2270a37
IW-1234 update yarn lock
Jan 11, 2019
60ae64e
IW-1234 rebuild design system
Jan 11, 2019
caf2092
IW-1234 linting changes
Jan 11, 2019
7b6256c
Silence console.error in test and use default props for example
vforge Jan 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 76 additions & 0 deletions components/Avatar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
.wds-avatar {
display: inline-block;
position: relative;
}
.wds-avatar a {
height: 100%;
width: 100%;
}

.wds-avatar__image {
height: 100%;
min-width: 100%;
width: 100%;
display: inline-block;
border-radius: 50%;
box-sizing: border-box;
}

.wds-avatar__inner-border {
border-radius: 50%;
box-sizing: border-box;
position: absolute;
}

.wds-avatar__badge {
line-height: 0;
position: absolute;
}
.wds-avatar__badge svg {
height: 100%;
min-width: 100%;
width: 100%;
}

.wds-avatar {
height: 48px;
min-width: 48px;
width: 48px;
}
.wds-avatar a {
color: #bed1cf;
}
.wds-avatar a:hover {
color: #bed1cf;
}
.wds-avatar .wds-avatar__image {
background-color: #fff;
border: solid 3px #bed1cf;
fill: #bed1cf;
}
.wds-avatar .wds-avatar__image:hover {
border-color: #bed1cf;
fill: #bed1cf;
}
.wds-avatar .wds-avatar__inner-border:hover + .wds-avatar__image {
fill: #bed1cf;
border-color: #bed1cf;
}
.wds-avatar .wds-avatar__inner-border {
height: 42px;
min-width: 42px;
width: 42px;
border: solid 3px #fff;
left: 3px;
top: 3px;
}
.wds-avatar .wds-avatar__badge {
height: 20.1872px;
min-width: 20.1872px;
width: 20.1872px;
left: -4.4860444444px;
top: -5.7677714286px;
}
.wds-avatar svg.wds-avatar__image {
padding: 2px;
}
260 changes: 260 additions & 0 deletions components/Avatar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,260 @@
'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = _interopDefault(require('react'));
var PropTypes = _interopDefault(require('prop-types'));

var DefaultAvatar = function DefaultAvatar(props) {
return React.createElement("svg", props, React.createElement("path", {
d: "M75 76.667c11.03 0 20-8.97 20-20V50c0-11.03-8.97-20-20-20s-20 8.97-20 20v6.667c0 11.03 8.97 20 20 20zm-16.667 6.666C45.467 83.333 35 93.8 35 106.667c0 1.84-.874 23.546.966 23.546 0 0 22.608 12.983 35.606 13.978 12.998.995 42.383-8.007 42.383-8.007 1.84 0 1.045-27.677 1.045-29.517 0-12.867-10.467-23.334-23.333-23.334H58.333z"
}));
};

DefaultAvatar.defaultProps = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "6 6 138 138"
};

var AvatarImage = function AvatarImage(_ref) {
var src = _ref.src,
alt = _ref.alt;
var className = "wds-avatar__image";
return src ? React.createElement("img", {
src: src,
alt: alt,
title: alt,
className: className
}) : React.createElement(DefaultAvatar, {
className: "wds-avatar__image",
title: className
});
};

AvatarImage.propTypes = {
alt: PropTypes.string,
src: PropTypes.string
};
AvatarImage.defaultProps = {
alt: undefined,
src: undefined
};

var WdsAvatarBadgeAdmin = function WdsAvatarBadgeAdmin(props) {
return React.createElement("svg", props, React.createElement("g", {
fill: "none",
fillRule: "evenodd"
}, React.createElement("path", {
fill: "#E3BD00",
d: "M0 9c0-1.149 1.247-2.04 1.661-3.04.43-1.035.195-2.544.975-3.324.78-.78 2.29-.546 3.324-.975C6.96 1.247 7.851 0 9 0s2.04 1.247 3.04 1.661c1.035.43 2.544.195 3.324.975.78.78.546 2.29.975 3.324C16.753 6.96 18 7.851 18 9s-1.247 2.04-1.661 3.04c-.43 1.035-.195 2.544-.975 3.324-.78.78-2.29.546-3.324.975C11.04 16.753 10.149 18 9 18s-2.04-1.247-3.04-1.661c-1.035-.43-2.544-.195-3.324-.975-.78-.78-.546-2.29-.975-3.324C1.247 11.04 0 10.149 0 9"
}), React.createElement("path", {
fill: "#FFF",
d: "M12.567 7.523L10.41 7.21l-.964-1.954c-.17-.341-.728-.341-.897 0L7.585 7.21l-2.157.313a.5.5 0 0 0-.277.853l1.561 1.521-.368 2.148a.5.5 0 0 0 .725.527l1.928-1.014 1.93 1.014a.5.5 0 0 0 .725-.526l-.369-2.148 1.561-1.521a.501.501 0 0 0-.277-.854z"
})));
};

WdsAvatarBadgeAdmin.defaultProps = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 18 18"
};

var WdsAvatarBadgeContentModerator = function WdsAvatarBadgeContentModerator(props) {
return React.createElement("svg", props, React.createElement("g", {
fill: "none",
fillRule: "evenodd"
}, React.createElement("path", {
fill: "#999",
d: "M0 9c0-1.149 1.247-2.04 1.661-3.04.43-1.035.195-2.544.975-3.324.78-.78 2.29-.546 3.324-.975C6.96 1.247 7.851 0 9 0s2.04 1.247 3.04 1.661c1.035.43 2.544.195 3.324.975.78.78.546 2.29.975 3.324C16.753 6.96 18 7.851 18 9s-1.247 2.04-1.661 3.04c-.43 1.035-.195 2.544-.975 3.324-.78.78-2.29.546-3.324.975C11.04 16.753 10.149 18 9 18s-2.04-1.247-3.04-1.661c-1.035-.43-2.544-.195-3.324-.975-.78-.78-.546-2.29-.975-3.324C1.247 11.04 0 10.149 0 9"
}), React.createElement("path", {
d: "M9.05 6.75l-3.9 3.9c-.1.1-.15.2-.15.35v1.5c0 .3.2.5.5.5H7c.15 0 .25-.05.35-.15l3.9-3.9-2.2-2.2zm3.8-.1l-1.5-1.5c-.2-.2-.5-.2-.7 0l-.9.9 2.2 2.2.9-.9c.2-.2.2-.5 0-.7z",
fill: "#FFF"
})));
};

WdsAvatarBadgeContentModerator.defaultProps = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 18 18"
};

var WdsAvatarBadgeDiscussionModerator = function WdsAvatarBadgeDiscussionModerator(props) {
return React.createElement("svg", props, React.createElement("g", {
fill: "none",
fillRule: "evenodd"
}, React.createElement("path", {
fill: "#999",
d: "M0 9c0-1.149 1.247-2.04 1.661-3.04.43-1.035.195-2.544.975-3.324.78-.78 2.29-.546 3.324-.975C6.96 1.247 7.851 0 9 0s2.04 1.247 3.04 1.661c1.035.43 2.544.195 3.324.975.78.78.546 2.29.975 3.324C16.753 6.96 18 7.851 18 9s-1.247 2.04-1.661 3.04c-.43 1.035-.195 2.544-.975 3.324-.78.78-2.29.546-3.324.975C11.04 16.753 10.149 18 9 18s-2.04-1.247-3.04-1.661c-1.035-.43-2.544-.195-3.324-.975-.78-.78-.546-2.29-.975-3.324C1.247 11.04 0 10.149 0 9"
}), React.createElement("path", {
fill: "#FFF",
d: "M12.821 8.232c0 1.782-1.754 3.232-3.91 3.232a4.71 4.71 0 0 1-.98-.104l-1.832.727a.328.328 0 0 1-.319-.043.323.323 0 0 1-.126-.293l.171-1.533C5.292 9.653 5 8.953 5 8.232 5 6.45 6.754 5 8.91 5c2.157 0 3.911 1.45 3.911 3.232z"
})));
};

WdsAvatarBadgeDiscussionModerator.defaultProps = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 18 18"
};

var WdsAvatarGlobalDiscussionsModerator = function WdsAvatarGlobalDiscussionsModerator(props) {
return React.createElement("svg", props, React.createElement("g", {
fill: "none",
fillRule: "evenodd"
}, React.createElement("path", {
fill: "#00B7E0",
d: "M0 9c0-1.149 1.247-2.04 1.661-3.04.43-1.035.195-2.544.975-3.324.78-.78 2.29-.546 3.324-.975C6.96 1.247 7.851 0 9 0s2.04 1.247 3.04 1.661c1.035.43 2.544.195 3.324.975.78.78.546 2.29.975 3.324C16.753 6.96 18 7.851 18 9s-1.247 2.04-1.661 3.04c-.43 1.035-.195 2.544-.975 3.324-.78.78-2.29.546-3.324.975C11.04 16.753 10.149 18 9 18s-2.04-1.247-3.04-1.661c-1.035-.43-2.544-.195-3.324-.975-.78-.78-.546-2.29-.975-3.324C1.247 11.04 0 10.149 0 9"
}), React.createElement("path", {
fill: "#FFF",
d: "M12.821 8.232c0 1.782-1.754 3.232-3.91 3.232a4.71 4.71 0 0 1-.98-.104l-1.832.727a.328.328 0 0 1-.319-.043.323.323 0 0 1-.126-.293l.171-1.533C5.292 9.653 5 8.953 5 8.232 5 6.45 6.754 5 8.91 5c2.157 0 3.911 1.45 3.911 3.232z"
})));
};

WdsAvatarGlobalDiscussionsModerator.defaultProps = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 18 18"
};

var WdsAvatarBadgeHelper = function WdsAvatarBadgeHelper(props) {
return React.createElement("svg", props, React.createElement("g", {
fill: "none",
fillRule: "evenodd"
}, React.createElement("path", {
fill: "#00B7E0",
d: "M0 9c0-1.149 1.247-2.04 1.661-3.04.43-1.035.195-2.544.975-3.324.78-.78 2.29-.546 3.324-.975C6.96 1.247 7.851 0 9 0s2.04 1.247 3.04 1.661c1.035.43 2.544.195 3.324.975.78.78.546 2.29.975 3.324C16.753 6.96 18 7.851 18 9s-1.247 2.04-1.661 3.04c-.43 1.035-.195 2.544-.975 3.324-.78.78-2.29.546-3.324.975C11.04 16.753 10.149 18 9 18s-2.04-1.247-3.04-1.661c-1.035-.43-2.544-.195-3.324-.975-.78-.78-.546-2.29-.975-3.324C1.247 11.04 0 10.149 0 9"
}), React.createElement("g", {
fill: "#FFF"
}, React.createElement("path", {
d: "M7.667 5h2.667v8H7.667z"
}), React.createElement("path", {
d: "M13 7.667v2.667H5V7.667z"
}))));
};

WdsAvatarBadgeHelper.defaultProps = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 18 18"
};

var WdsAvatarBadgeStaff = function WdsAvatarBadgeStaff(props) {
return React.createElement("svg", props, React.createElement("g", {
fill: "none",
fillRule: "evenodd"
}, React.createElement("path", {
fill: "#00B7E0",
d: "M1.661 5.96c.43-1.035.195-2.544.975-3.324.78-.78 2.29-.546 3.324-.975C6.96 1.247 7.851 0 9 0s2.04 1.247 3.04 1.661c1.035.43 2.544.195 3.324.975.78.78.546 2.29.975 3.324C16.753 6.96 18 7.851 18 9s-1.247 2.04-1.661 3.04c-.43 1.035-.195 2.544-.975 3.324-.78.78-2.29.546-3.324.975C11.04 16.753 10.149 18 9 18s-2.04-1.247-3.04-1.661c-1.035-.43-2.544-.195-3.324-.975-.78-.78-.546-2.29-.975-3.324C1.247 11.04 0 10.149 0 9s1.247-2.04 1.661-3.04z"
}), React.createElement("path", {
fill: "#FFF",
d: "M11.234 4L9.06 6.055 6.89 4.008 4 6.445V9.14L8.995 14 14 9.14l-.01-2.688L11.235 4zM5.245 6.703l1.608-1.356 3.739 3.526-1.484 1.485-3.863-3.655zm4.542.038l1.466-1.385L12.764 6.7l-1.467 1.468-1.51-1.426zM5 8.717v-.87l3.401 3.22-.487.486L5 8.717zm3.63 3.533l4.366-4.369.002.836-4.003 3.89-.365-.357z"
})));
};

WdsAvatarBadgeStaff.defaultProps = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 18 18"
};

var WdsAvatarBadgeVSTF = function WdsAvatarBadgeVSTF(props) {
return React.createElement("svg", props, React.createElement("g", {
fill: "none",
fillRule: "evenodd"
}, React.createElement("path", {
fill: "#00B7E0",
d: "M0 9c0-1.149 1.247-2.04 1.661-3.04.43-1.035.195-2.544.975-3.324.78-.78 2.29-.546 3.324-.975C6.96 1.247 7.851 0 9 0s2.04 1.247 3.04 1.661c1.035.43 2.544.195 3.324.975.78.78.546 2.29.975 3.324C16.753 6.96 18 7.851 18 9s-1.247 2.04-1.661 3.04c-.43 1.035-.195 2.544-.975 3.324-.78.78-2.29.546-3.324.975C11.04 16.753 10.149 18 9 18s-2.04-1.247-3.04-1.661c-1.035-.43-2.544-.195-3.324-.975-.78-.78-.546-2.29-.975-3.324C1.247 11.04 0 10.149 0 9"
}), React.createElement("path", {
fill: "#FFF",
d: "M8.767 12.856a.268.268 0 0 0 .465 0l3.735-6.453A.268.268 0 0 0 12.735 6h-1.616a.268.268 0 0 0-.232.134L9 9.397l-.289-.5-1.596-2.763A.268.268 0 0 0 6.884 6H5.268a.268.268 0 0 0-.232.403l3.73 6.453z"
})));
};

WdsAvatarBadgeVSTF.defaultProps = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 18 18"
};

var Badge = function Badge(_ref) {
var badge = _ref.badge;
var badgeIcons = {
admin: {
icon: React.createElement(WdsAvatarBadgeAdmin, null),
title: 'Community Admin'
},
'content-moderator': {
icon: React.createElement(WdsAvatarBadgeContentModerator, null),
title: 'Content Moderator'
},
'discussion-moderator': {
icon: React.createElement(WdsAvatarBadgeDiscussionModerator, null),
title: 'Discussions Moderator'
},
'global-discussions-moderator': {
icon: React.createElement(WdsAvatarGlobalDiscussionsModerator, null),
title: 'Global Discussions Moderator'
},
helper: {
icon: React.createElement(WdsAvatarBadgeHelper, null),
title: 'FANDOM Helper'
},
staff: {
icon: React.createElement(WdsAvatarBadgeStaff, null),
title: 'FANDOM Staff'
},
vstf: {
icon: React.createElement(WdsAvatarBadgeVSTF, null),
title: 'VSTF'
}
};
var badgeIcon = badgeIcons[badge];
return badgeIcon ? React.createElement("span", {
title: badgeIcon.title,
className: "wds-avatar__badge"
}, badgeIcon.icon) : '';
};

Badge.propTypes = {
badge: PropTypes.string
};
Badge.defaultProps = {
badge: undefined
};

var getAvatarImage = function getAvatarImage(href, alt, src) {
var avatarImage = React.createElement(AvatarImage, {
alt: alt,
src: src
});
return href ? React.createElement("a", {
href: href
}, avatarImage) : avatarImage;
};

var Avatar = function Avatar(_ref) {
var href = _ref.href,
alt = _ref.alt,
src = _ref.src,
badge = _ref.badge;
return React.createElement("div", {
className: "wds-avatar"
}, getAvatarImage(href, alt, src), badge && React.createElement(Badge, {
badge: badge
}));
};

Avatar.propTypes = {
/** Alt text for avatar */
alt: PropTypes.string,

/** Badge to display for avatar. */
badge: PropTypes.oneOf(['admin', 'content-moderator', 'discussion-moderator', 'global-discussions-moderator', 'helper', 'staff', 'vstf']),

/** Link to user's profile */
href: PropTypes.string,

/** Image src for avatar */
src: PropTypes.string
};
Avatar.defaultProps = {
alt: 'User avatar',
badge: undefined,
href: undefined,
src: undefined
};

module.exports = Avatar;
30 changes: 15 additions & 15 deletions components/Select.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,21 @@
border-top-right-radius: 0;
margin-top: 0;
z-index: 10000;
}.wds-icon {
fill: currentColor;
height: 24px;
min-width: 24px;
width: 24px;
}
.wds-icon-small {
height: 18px;
min-width: 18px;
width: 18px;
}
.wds-icon-tiny {
height: 12px;
min-width: 12px;
width: 12px;
}@keyframes fandom-spinner-rotator {
from {
transform: rotate(0);
Expand Down Expand Up @@ -77,19 +92,4 @@
position: static;
top: 0;
width: auto;
}.wds-icon {
fill: currentColor;
height: 24px;
min-width: 24px;
width: 24px;
}
.wds-icon-small {
height: 18px;
min-width: 18px;
width: 18px;
}
.wds-icon-tiny {
height: 12px;
min-width: 12px;
width: 12px;
}
2 changes: 1 addition & 1 deletion docs/build/1.74cc6f0d.js → docs/build/1.3d6a5889.js
View file
Open in desktop

Large diffs are not rendered by default.

Loading