Merge pull request #1646 from cozy/feat/avatars

Improve Circle and Avatar to use specific size
cozy · Nov 10, 2020 · 5f96151 · 5f96151
2 parents 18d5ce3 + 06da738
commit 5f96151
Show file tree

Hide file tree

Showing 10 changed files with 322 additions and 271 deletions.
diff --git a/react/Avatar/Readme.md b/react/Avatar/Readme.md
@@ -1,44 +1,58 @@
-Show an avatar with initials
-
-### Default
+### Default, with specific icon, with initials, with image, with specific style
 
 ```jsx
+import cozyLogo from '../../docs/cozy-logo_white_128.png'
 import Avatar from 'cozy-ui/transpiled/react/Avatar';
-<Avatar />
-```
 
-### with initials only
-
-#### with name
-
-```jsx
-import Avatar from 'cozy-ui/transpiled/react/Avatar';
-<Avatar text="CD" />
+<div className="u-flex">
+  <Avatar />
+  <Avatar text="CD" />
+  <Avatar image={cozyLogo} />
+  <Avatar icon="link" />
+  <Avatar text="CD" style={{color: 'black', backgroundColor: 'var(--seafoamGreen)' }} />
+</div>
 ```
 
-### with image instead of initials
+### With disabled color
 
 ```jsx
 import cozyLogo from '../../docs/cozy-logo_white_128.png'
 import Avatar from 'cozy-ui/transpiled/react/Avatar';
-<Avatar image={cozyLogo} />
+
+<div className="u-flex">
+  <Avatar disabled />
+  <Avatar text="CD" disabled />
+  <Avatar image={cozyLogo} disabled />
+  <Avatar icon="link" disabled />
+  <Avatar text="CD" disabled style={{color: 'black', backgroundColor: 'var(--seafoamGreen)' }} />
+</div>
 ```
 
-### with disabled color
+### With overlap
 
 ```jsx
 import cozyLogo from '../../docs/cozy-logo_white_128.png'
-import Avatar from 'cozy-ui/transpiled/react/Avatar';
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
+const style={
+  marginLeft: '-1rem'
+};
 
 <div className="u-flex">
-  <Avatar disabled />
-  <Avatar text="CD" disabled />
-  <Avatar image={cozyLogo} disabled />
+  <Avatar style={style} />
+  <Avatar text="CD" style={style} />
+  <Avatar image={cozyLogo} style={style} />
+  <Avatar icon="link" style={style} />
+  <Avatar disabled style={style} />
+  <Avatar text="CD" disabled style={style} />
+  <Avatar image={cozyLogo} disabled style={style} />
+  <Avatar icon="link" disabled style={style}/>
 </div>
 ```
 
 ### Available sizes: xsmall, small, medium (default), large, xlarge
 
+The size can also be specifically defined using a number of pixels.
+
 ```jsx
 import cozyLogo from '../../docs/cozy-logo_white_128.png'
 import Avatar from 'cozy-ui/transpiled/react/Avatar';
@@ -48,26 +62,38 @@ import Avatar from 'cozy-ui/transpiled/react/Avatar';
     <Avatar size="xsmall" />
     <Avatar text="CD" size="xsmall" />
     <Avatar image={cozyLogo} size="xsmall" />
+    <Avatar icon="link" size="xsmall" />
   </div>
   <div className="u-flex">
     <Avatar size="small" />
     <Avatar text="CD" size="small" />
     <Avatar image={cozyLogo} size="small" />
+    <Avatar icon="link" size="small" />
   </div>
   <div className="u-flex">
     <Avatar size="medium" />
     <Avatar text="CD" size="medium" />
     <Avatar image={cozyLogo} size="medium" />
+    <Avatar icon="link" size="medium" />
   </div>
   <div className="u-flex">
     <Avatar size="large" />
     <Avatar text="CD" size="large" />
     <Avatar image={cozyLogo} size="large" />
+    <Avatar icon="link" size="large" />
   </div>
   <div className="u-flex">
     <Avatar size="xlarge" />
     <Avatar text="CD" size="xlarge" />
     <Avatar image={cozyLogo} size="xlarge" />
+    <Avatar icon="link" size="xlarge" />
+  </div>
+  <hr />
+  <div className="u-flex">
+    <Avatar size={24} />
+    <Avatar text="CD" size={24} />
+    <Avatar image={cozyLogo} size={24} />
+    <Avatar icon="link" size={24} />
   </div>
 </div>
 ```
diff --git a/react/Avatar/index.jsx b/react/Avatar/index.jsx
@@ -1,11 +1,12 @@
 import React from 'react'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
+import assign from 'lodash/assign'
+
 import palette from '../palette'
 import styles from './styles.styl'
 import Icon from '../Icon'
-
-import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
+import { createSizeStyle } from '../Circle'
 
 const nameToColor = (name = '') => {
   const colors = [
@@ -33,52 +34,64 @@ const nameToColor = (name = '') => {
   return colors[key]
 }
 
+const createBgColorStyle = ({ text, textId }) =>
+  text ? { backgroundColor: `${nameToColor(textId || text)}` } : {}
+
 export const Avatar = ({
   text,
   textId,
   image,
   size,
   className,
   style,
-  disabled
+  disabled,
+  icon
 }) => {
-  const colored = {
-    backgroundColor: `${nameToColor(textId || text)}`
-  }
+  const sizeStyle = createSizeStyle(size)
+  const bgColorStyle = createBgColorStyle({ text, textId })
+  const avatarStyle = assign(bgColorStyle, sizeStyle, style)
 
   return (
     <div
       className={cx(
         styles['c-avatar'],
-        size !== 'medium' ? styles[`c-avatar--${size}`] : '',
         text ? styles['c-avatar--text'] : '',
         image ? styles['c-avatar--image'] : '',
         disabled ? styles['c-avatar--disabled'] : '',
         className
       )}
-      style={text ? Object.assign(colored, style) : style}
+      style={avatarStyle}
     >
       {image && <img src={image} className={styles['c-avatar-image']} alt="" />}
       {!image && text && (
         <span className={styles['c-avatar-initials']}>{text}</span>
       )}
-      {!image && !text && <Icon icon={PeopleIcon} />}
+      {!image && !text && <Icon icon={icon} />}
     </div>
   )
 }
 
 Avatar.propTypes = {
   text: PropTypes.string,
   image: PropTypes.string,
-  size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']),
-  className: PropTypes.string
+  size: PropTypes.oneOfType([
+    PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']),
+    PropTypes.number
+  ]),
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  icon: PropTypes.string,
+  style: PropTypes.object
 }
 
 Avatar.defaultProps = {
   text: '',
   image: '',
   size: 'medium',
-  className: ''
+  className: '',
+  disabled: false,
+  icon: 'people',
+  style: {}
 }
 
 export default Avatar
diff --git a/react/Avatar/styles.styl b/react/Avatar/styles.styl
@@ -4,7 +4,6 @@
 .c-avatar
     @extend $circle
     @extend $avatar
-
 .c-avatar--text
     color white
 
@@ -19,18 +18,6 @@
         filter grayscale(1)
         opacity .3
 
-.c-avatar--xsmall
-    @extend $circle--xsmall
-
-.c-avatar--small
-    @extend $circle--small
-
-.c-avatar--large
-    @extend $circle--large
-
-.c-avatar--xlarge
-    @extend $circle--xlarge
-
 .c-avatar-initials
     @extend $circle-text
 

diff --git a/react/Circle/Readme.md b/react/Circle/Readme.md
@@ -2,18 +2,20 @@ Displays a simple circle with some text inside of it.
 
 ### Default
 
-```
+```jsx
 import Circle from 'cozy-ui/transpiled/react/Circle';
 <div>
   <Circle>
-    yo
+    Yo
   </Circle>
 </div>
 ```
 
 ### Available sizes: xsmall, small, medium (default), large, xlarge
 
-```
+The size can also be specifically defined using a number of pixels.
+
+```jsx
 import Circle from 'cozy-ui/transpiled/react/Circle';
 <div>
   <div>
@@ -31,5 +33,9 @@ import Circle from 'cozy-ui/transpiled/react/Circle';
   <div>
     <Circle size="xlarge">Yo</Circle>
   </div>
+  <hr />
+  <div>
+    <Circle size={24}>Yo</Circle>
+  </div>
 </div>
 ```
diff --git a/react/Circle/index.jsx b/react/Circle/index.jsx
@@ -1,28 +1,34 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import cx from 'classnames'
+
 import styles from './styles.styl'
 
+export const createSizeStyle = size => {
+  const sizeToPixel = Number.isInteger(size)
+    ? size
+    : { xsmall: 16, small: 32, medium: 40, large: 48, xlarge: 64 }[size]
+  return { '--circleSize': `${sizeToPixel}px` }
+}
+
 const Circle = ({ children, backgroundColor, size, className }) => {
+  const sizeStyle = createSizeStyle(size)
+  const bgColorStyle = { backgroundColor }
+  const circleStyle = Object.assign(bgColorStyle, sizeStyle)
+
   return (
-    <div
-      className={cx(
-        styles['c-circle'],
-        {
-          [styles[`c-circle--${size}`]]: size
-        },
-        className
-      )}
-      style={{ backgroundColor }}
-    >
+    <div className={cx(styles['c-circle'], className)} style={circleStyle}>
       <span className={styles['c-circle-text']}>{children}</span>
     </div>
   )
 }
 
 Circle.propTypes = {
   backgroundColor: PropTypes.string,
-  size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']),
+  size: PropTypes.oneOfType([
+    PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']),
+    PropTypes.number
+  ]),
   className: PropTypes.string
 }
 

diff --git a/react/Circle/styles.styl b/react/Circle/styles.styl
@@ -3,17 +3,5 @@
 .c-circle
     @extend $circle
 
-.c-circle--xsmall
-    @extend $circle--xsmall
-
-.c-circle--small
-    @extend $circle--small
-
-.c-circle--large
-    @extend $circle--large
-
-.c-circle--xlarge
-    @extend $circle--xlarge
-
 .c-circle-text
     @extend $circle-text
diff --git a/react/ContactsList/__snapshots__/ContactRow.spec.js.snap b/react/ContactsList/__snapshots__/ContactRow.spec.js.snap
@@ -9,9 +9,10 @@ exports[`ContactRow should match the contact snapshot 1`] = `
     className="styles__contact-identity___mL3IJ"
   >
     <div
-      className="styles__c-avatar___PpDI- styles__c-avatar--small___1Y_Pv styles__c-avatar--text___2dvna styles__contact-avatar___3lZPs"
+      className="styles__c-avatar___PpDI- styles__c-avatar--text___2dvna styles__contact-avatar___3lZPs"
       style={
         Object {
+          "--circleSize": "32px",
           "backgroundColor": "var(--brightSun)",
         }
       }