Merge pull request #1097 from cozy/feat/circleSizes

feat: Add different sizes to Circle component
cozy · Jul 11, 2019 · b3bc5b1 · b3bc5b1
2 parents 17de5ac + fbe0767
commit b3bc5b1
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 55 deletions.
diff --git a/react/Avatar/Readme.md b/react/Avatar/Readme.md
@@ -22,27 +22,27 @@ Show an avatar with initials
 ### Available sizes: xsmall, small, medium (default), large, xlarge
 ```
 <div>
-  <div>
+  <div class="u-flex">
     <Avatar size="xsmall" />
     <Avatar text="CD" size="xsmall" />
     <Avatar image="https://cozy.io/fr/images/cozy-logo_white.png" size="xsmall" />
   </div>
-  <div>
+  <div class="u-flex">
     <Avatar size="small" />
     <Avatar text="CD" size="small" />
     <Avatar image="https://cozy.io/fr/images/cozy-logo_white.png" size="small" />
   </div>
-  <div>
+  <div class="u-flex">
     <Avatar size="medium" />
     <Avatar text="CD" size="medium" />
     <Avatar image="https://cozy.io/fr/images/cozy-logo_white.png" size="medium" />
   </div>
-  <div>
+  <div class="u-flex">
     <Avatar size="large" />
     <Avatar text="CD" size="large" />
     <Avatar image="https://cozy.io/fr/images/cozy-logo_white.png" size="large" />
   </div>
-  <div>
+  <div class="u-flex">
     <Avatar size="xlarge" />
     <Avatar text="CD" size="xlarge" />
     <Avatar image="https://cozy.io/fr/images/cozy-logo_white.png" size="xlarge" />

diff --git a/react/Avatar/styles.styl b/react/Avatar/styles.styl
@@ -1,22 +1,24 @@
 @require '../../stylus/components/avatar'
+@require '../../stylus/components/circle'
 
 .c-avatar
+    @extend $circle
     @extend $avatar
 
 .c-avatar--xsmall
-    @extend $avatar--xsmall
+    @extend $circle--xsmall
 
 .c-avatar--small
-    @extend $avatar--small
+    @extend $circle--small
 
 .c-avatar--large
-    @extend $avatar--large
+    @extend $circle--large
 
 .c-avatar--xlarge
-    @extend $avatar--xlarge
+    @extend $circle--xlarge
 
 .c-avatar-initials
-    @extend $avatar-initials
+    @extend $circle-text
 
 .c-avatar-image
     @extend $avatar-image
diff --git a/react/Circle/Readme.md b/react/Circle/Readme.md
@@ -9,3 +9,24 @@ Displays a simple circle with some text inside of it.
   </Circle>
 </div>
 ```
+
+### Available sizes: xsmall, small, medium (default), large, xlarge
+```
+<div>
+  <div>
+    <Circle size="xsmall">Yo</Circle>
+  </div>
+  <div>
+    <Circle size="small">Yo</Circle>
+  </div>
+  <div>
+    <Circle size="medium">Yo</Circle>
+  </div>
+  <div>
+    <Circle size="large">Yo</Circle>
+  </div>
+  <div>
+    <Circle size="xlarge">Yo</Circle>
+  </div>
+</div>
+```
diff --git a/react/Circle/index.jsx b/react/Circle/index.jsx
@@ -22,7 +22,7 @@ const Circle = ({ children, backgroundColor, size, className }) => {
 
 Circle.propTypes = {
   backgroundColor: PropTypes.string,
-  size: PropTypes.oneOf(['medium']),
+  size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']),
   className: PropTypes.string
 }
 

diff --git a/react/Circle/styles.styl b/react/Circle/styles.styl
@@ -3,8 +3,17 @@
 .c-circle
     @extend $circle
 
-.c-circle--medium
-    @extend $circle--medium
+.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/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap
@@ -41,35 +41,35 @@ exports[`Avatar should render examples: Avatar 3`] = `
 exports[`Avatar should render examples: Avatar 4`] = `
 "<div>
   <div>
-    <div>
+    <div class=\\"u-flex\\">
       <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--xsmall___3H2Io\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
           <use xlink:href=\\"#people\\"></use>
         </svg></div>
       <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--xsmall___3H2Io\\" style=\\"color: white;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div>
       <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--xsmall___3H2Io\\"><img src=\\"https://cozy.io/fr/images/cozy-logo_white.png\\" class=\\"styles__c-avatar-image___3yJnb\\" alt=\\"\\"></div>
     </div>
-    <div>
+    <div class=\\"u-flex\\">
       <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--small___1Y_Pv\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
           <use xlink:href=\\"#people\\"></use>
         </svg></div>
       <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--small___1Y_Pv\\" style=\\"color: white;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div>
       <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--small___1Y_Pv\\"><img src=\\"https://cozy.io/fr/images/cozy-logo_white.png\\" class=\\"styles__c-avatar-image___3yJnb\\" alt=\\"\\"></div>
     </div>
-    <div>
+    <div class=\\"u-flex\\">
       <div class=\\"styles__c-avatar___PpDI-\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
           <use xlink:href=\\"#people\\"></use>
         </svg></div>
       <div class=\\"styles__c-avatar___PpDI-\\" style=\\"color: white;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div>
       <div class=\\"styles__c-avatar___PpDI-\\"><img src=\\"https://cozy.io/fr/images/cozy-logo_white.png\\" class=\\"styles__c-avatar-image___3yJnb\\" alt=\\"\\"></div>
     </div>
-    <div>
+    <div class=\\"u-flex\\">
       <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--large___1Z_HZ\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
           <use xlink:href=\\"#people\\"></use>
         </svg></div>
       <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--large___1Z_HZ\\" style=\\"color: white;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div>
       <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--large___1Z_HZ\\"><img src=\\"https://cozy.io/fr/images/cozy-logo_white.png\\" class=\\"styles__c-avatar-image___3yJnb\\" alt=\\"\\"></div>
     </div>
-    <div>
+    <div class=\\"u-flex\\">
       <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--xlarge___3Qe0b\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
           <use xlink:href=\\"#people\\"></use>
         </svg></div>

diff --git a/stylus/components/avatar.styl b/stylus/components/avatar.styl
@@ -1,44 +1,12 @@
 @require '../tools/mixins'
 
 $avatar
-    display inline-flex
-    align-items center
-    justify-content center
-    border-radius 50%
-    overflow hidden
-    width rem(40)
-    height rem(40)
     background-color var(--paleGrey)
     color var(--silver)
-    font-size rem(18)
 
     svg
         width 50%
         height 50%
 
-$avatar--xsmall
-    width rem(16)
-    height rem(16)
-    font-size rem(7)
-
-$avatar--small
-    width rem(32)
-    height rem(32)
-    font-size rem(14)
-
-$avatar--large
-    width rem(48)
-    height rem(48)
-    font-size rem(21)
-
-$avatar--xlarge
-    width rem(64)
-    height rem(64)
-    font-size rem(27)
-
-$avatar-initials
-    font-weight bold
-    line-height 1
-
 $avatar-image
     width 100%
diff --git a/stylus/components/circle.styl b/stylus/components/circle.styl
@@ -6,13 +6,31 @@ $circle
     justify-content center
     border-radius 50%
     overflow hidden
-    color white
-    background-color var(--dodgerBlue)
-
-$circle--medium
     width rem(40)
     height rem(40)
-    font-size rem(20)
+    background-color var(--dodgerBlue)
+    color white
+    font-size rem(18)
+
+$circle--xsmall
+    width rem(16)
+    height rem(16)
+    font-size rem(7)
+
+$circle--small
+    width rem(32)
+    height rem(32)
+    font-size rem(14)
+
+$circle--large
+    width rem(48)
+    height rem(48)
+    font-size rem(21)
+
+$circle--xlarge
+    width rem(64)
+    height rem(64)
+    font-size rem(27)
 
 $circle-text
     font-weight bold