feat(avatar): add 'size' prop

react95-io · Apr 9, 2020 · cd2bbc6 · cd2bbc6
1 parent 3c58fb5
commit cd2bbc6
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 80 deletions.
diff --git a/src/components/Avatar/Avatar.js b/src/components/Avatar/Avatar.js
@@ -1,14 +1,16 @@
 import React from 'react';
 import propTypes from 'prop-types';
 import styled from 'styled-components';
-import { blockSizes } from '../common/system';
 
 const StyledAvatar = styled.div`
   display: inline-block;
   box-sizing: border-box;
   object-fit: contain;
-  height: calc(${() => blockSizes.md} - 2px);
-  width: calc(${() => blockSizes.md} - 2px);
+  ${({ size }) =>
+    `
+    height: ${size};
+    width: ${size};
+    `}
   border-radius: ${({ square }) => (square ? 0 : '50%')};
   overflow: hidden;
   ${({ noBorder, theme }) =>
@@ -39,28 +41,46 @@ const SlyledAvatarIMG = styled.img`
 `;
 
 const Avatar = React.forwardRef(function Avatar(props, ref) {
-  const { children, noBorder, square, src, alt, ...otherProps } = props;
+  const {
+    alt,
+    children,
+    noBorder,
+    size: sizeProp,
+    square,
+    src,
+    ...otherProps
+  } = props;
+
+  const size = typeof sizeProp === 'number' ? `${sizeProp}px` : sizeProp;
   return (
-    <StyledAvatar noBorder={noBorder} square={square} ref={ref} {...otherProps}>
+    <StyledAvatar
+      noBorder={noBorder}
+      ref={ref}
+      size={size}
+      square={square}
+      {...otherProps}
+    >
       {src ? <SlyledAvatarIMG src={src} alt={alt} /> : children}
     </StyledAvatar>
   );
 });
 
 Avatar.defaultProps = {
-  square: false,
-  noBorder: false,
-  src: undefined,
+  alt: '',
   children: null,
-  alt: ''
+  noBorder: false,
+  size: 35,
+  square: false,
+  src: undefined
 };
 
 Avatar.propTypes = {
-  square: propTypes.bool,
-  noBorder: propTypes.bool,
+  alt: propTypes.string,
   children: propTypes.node,
-  src: propTypes.string,
-  alt: propTypes.string
+  noBorder: propTypes.bool,
+  size: propTypes.oneOf([propTypes.string, propTypes.number]),
+  square: propTypes.bool,
+  src: propTypes.string
 };
 
 export default Avatar;
diff --git a/src/components/Avatar/Avatar.spec.js b/src/components/Avatar/Avatar.spec.js
@@ -65,4 +65,22 @@ describe('<Avatar />', () => {
 
     expect(content).toBeNull();
   });
+
+  describe('prop: size', () => {
+    it('should set proper size', () => {
+      const { container } = renderWithTheme(<Avatar size='85%' />);
+      const avatarEl = container.firstChild;
+
+      expect(avatarEl).toHaveStyleRule('width', '85%');
+      expect(avatarEl).toHaveStyleRule('height', '85%');
+    });
+
+    it('when passed a number, sets size in px', () => {
+      const { container } = renderWithTheme(<Avatar size={25} />);
+      const avatarEl = container.firstChild;
+
+      expect(avatarEl).toHaveStyleRule('width', '25px');
+      expect(avatarEl).toHaveStyleRule('height', '25px');
+    });
+  });
 });
diff --git a/src/components/Avatar/Avatar.stories.js b/src/components/Avatar/Avatar.stories.js
@@ -1,74 +1,36 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-
+import styled from 'styled-components';
 import Avatar from './Avatar';
-import AppBar from '../AppBar/AppBar';
-import Toolbar from '../Toolbar/Toolbar';
-import Button from '../Button/Button';
+
+const Wrapper = styled.div`
+  padding: 5rem;
+  background: ${({ theme }) => theme.material};
+  & > div > * {
+    margin-right: 1rem;
+  }
+`;
 
 storiesOf('Avatar', module)
-  .addDecorator(story => (
-    <div
-      style={{
-        padding: '5rem',
-        background: 'teal'
-      }}
-    >
-      {story()}
-    </div>
-  ))
+  .addDecorator(story => <Wrapper>{story()}</Wrapper>)
   .add('default', () => (
-    <AppBar>
-      <Toolbar
-        style={{ justifyContent: 'space-between', paddingRight: '1rem' }}
-      >
-        <Button flat accent>
-          Menu
-        </Button>
-        <Avatar src='https://sphoto.nasza-klasa.pl/33278012/1/square/2658174fbd.jpeg?v=1' />
-      </Toolbar>
-    </AppBar>
-  ))
-  .add('noBorder', () => (
-    <AppBar>
-      <Toolbar
-        style={{ justifyContent: 'space-between', paddingRight: '1rem' }}
-      >
-        <Button flat accent>
-          Menu
-        </Button>
-        <Avatar
-          src='https://sphoto.nasza-klasa.pl/33278012/1/square/2658174fbd.jpeg?v=1'
-          noBorder
-        />
-      </Toolbar>
-    </AppBar>
-  ))
-  .add('letter', () => (
-    <AppBar>
-      <Toolbar
-        style={{ justifyContent: 'space-between', paddingRight: '1rem' }}
-      >
-        <Button flat accent>
-          Menu
-        </Button>
-        <Avatar style={{ background: 'palevioletred' }}>AK</Avatar>
-      </Toolbar>
-    </AppBar>
-  ))
-  .add('square', () => (
-    <AppBar>
-      <Toolbar
-        style={{ justifyContent: 'space-between', paddingRight: '1rem' }}
-      >
-        <Button flat accent>
-          Menu
-        </Button>
-        <Avatar square>
-          <span role='img' aria-label='🚀'>
-            🚀
-          </span>
-        </Avatar>
-      </Toolbar>
-    </AppBar>
+    <div style={{ display: 'inline-flex' }}>
+      <Avatar
+        size={50}
+        src='https://sphoto.nasza-klasa.pl/33278012/1/square/2658174fbd.jpeg?v=1'
+      />
+      <Avatar
+        noBorder
+        size={50}
+        src='https://sphoto.nasza-klasa.pl/33278012/1/square/2658174fbd.jpeg?v=1'
+      />
+      <Avatar size={50} style={{ background: 'palevioletred' }}>
+        AK
+      </Avatar>
+      <Avatar square size={50}>
+        <span role='img' aria-label='🚀'>
+          🚀
+        </span>
+      </Avatar>
+    </div>
   ));