initial commit

src/app/molecules/people-selector/PeopleSelector.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './PeopleSelector.scss';
+
+import { blurOnBubbling } from '../../atoms/button/script';
+
+import Text from '../../atoms/text/Text';
+import Avatar from '../../atoms/avatar/Avatar';
+
+function PeopleSelector({
+  avatarSrc, name, color, peopleRole, onClick,
+}) {
+  return (
+    <div className="people-selector__container">
+      <button
+        className="people-selector"
+        onMouseUp={(e) => blurOnBubbling(e, '.people-selector')}
+        onClick={onClick}
+        type="button"
+      >
+        <Avatar imageSrc={avatarSrc} text={name.slice(0, 1)} bgColor={color} size="extra-small" />
+        <Text className="people-selector__name" variant="b1">{name}</Text>
+        {peopleRole !== null && <Text className="people-selector__role" variant="b3">{peopleRole}</Text>}
+      </button>
+    </div>
+  );
+}
+
+PeopleSelector.defaultProps = {
+  avatarSrc: null,
+  peopleRole: null,
+};
+
+PeopleSelector.propTypes = {
+  avatarSrc: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  color: PropTypes.string.isRequired,
+  peopleRole: PropTypes.string,
+  onClick: PropTypes.func.isRequired,
+};
+
+export default PeopleSelector;

src/app/molecules/people-selector/PeopleSelector.scss

@@ -0,0 +1,40 @@
+.people-selector {
+  width: 100%;
+  padding: var(--sp-extra-tight);
+  padding-left: var(--sp-normal);
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  
+  [dir=rtl] & {
+    padding: {
+      left: var(--sp-extra-tight);
+      right: var(--sp-normal);
+    }
+  }
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--bg-surface-hover);
+    }
+  }
+  &:focus {
+    outline: none;
+    background-color: var(--bg-surface-hover);
+  }
+  &:active {
+    background-color: var(--bg-surface-active);
+  }
+
+  &__name {
+    flex: 1;
+    min-width: 0;
+    margin: 0 var(--sp-tight);
+    color: var(--tc-surface-normal);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  &__role {
+    color: var(--tc-surface-low);
+  }
+}