feat(bar): make Bar 'size' prop accept %, px

src/components/Bar/Bar.js

@@ -1,12 +1,11 @@
 import React from 'react';
 import propTypes from 'prop-types';
 import styled from 'styled-components';
-import { blockSizes } from '../common/system';
 
 const StyledBar = styled.div`
   display: inline-block;
   box-sizing: border-box;
-  height: ${props => blockSizes[props.size]};
+  height: ${({ size }) => size};
   width: 5px;
   border-top: 2px solid ${({ theme }) => theme.borderLightest};
   border-left: 2px solid ${({ theme }) => theme.borderLightest};
@@ -17,16 +16,17 @@ const StyledBar = styled.div`
 // TODO: add horizontal variant
 // TODO: allow user to specify number of bars (like 3 horizontal bars for drag handle)
 const Bar = React.forwardRef(function Bar(props, ref) {
-  const { size, ...otherProps } = props;
+  const { size: sizeProp, ...otherProps } = props;
+  const size = typeof sizeProp === 'number' ? `${sizeProp}px` : sizeProp;
 
   return <StyledBar size={size} ref={ref} {...otherProps} />;
 });
 
 Bar.defaultProps = {
-  size: 'md'
+  size: '100%'
 };
 Bar.propTypes = {
-  size: propTypes.oneOf(['sm', 'md', 'lg'])
+  size: propTypes.oneOf([propTypes.string, propTypes.number])
 };
 
 export default Bar;

src/components/Bar/Bar.spec.js

@@ -1,30 +1,18 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import { blockSizes } from '../common/system';
+import { renderWithTheme } from '../../../test/utils';
 
 import Bar from './Bar';
 
 describe('<Bar />', () => {
   it('should render bar', () => {
-    const { container } = render(<Bar />);
+    const { container } = renderWithTheme(<Bar />);
     const barEl = container.firstChild;
 
     expect(barEl).toBeInTheDocument();
   });
 
-  it('should handle bar with correct size', () => {
-    const { container, rerender } = render(<Bar size='sm' />);
-    const barEl = container.firstChild;
-
-    expect(barEl).toHaveStyleRule('height', blockSizes.sm);
-
-    rerender(<Bar size='lg' />);
-
-    expect(barEl).toHaveStyleRule('height', blockSizes.lg);
-  });
-
   it('should handle custom style', () => {
-    const { container } = render(
+    const { container } = renderWithTheme(
       <Bar style={{ backgroundColor: 'papayawhip' }} />
     );
     const barEl = container.firstChild;
@@ -34,9 +22,25 @@ describe('<Bar />', () => {
 
   it('should handle custom props', () => {
     const customProps = { title: 'potatoe' };
-    const { container } = render(<Bar {...customProps} />);
+    const { container } = renderWithTheme(<Bar {...customProps} />);
     const barEl = container.firstChild;
 
     expect(barEl).toHaveAttribute('title', 'potatoe');
   });
+
+  describe('prop: size', () => {
+    it('should set proper size', () => {
+      const { container } = renderWithTheme(<Bar size='85%' />);
+      const avatarEl = container.firstChild;
+
+      expect(avatarEl).toHaveStyleRule('height', '85%');
+    });
+
+    it('when passed a number, sets size in px', () => {
+      const { container } = renderWithTheme(<Bar size={25} />);
+      const avatarEl = container.firstChild;
+
+      expect(avatarEl).toHaveStyleRule('height', '25px');
+    });
+  });
 });

src/components/Bar/Bar.stories.js

@@ -20,12 +20,12 @@ storiesOf('Bar', module)
   .add('default', () => (
     <AppBar>
       <Toolbar>
-        <Bar />
+        <Bar size={35} />
         <Button variant='menu'>Edit</Button>
         <Button variant='menu' disabled>
           Save
         </Button>
-        <Bar />
+        <Bar size={35} />
       </Toolbar>
     </AppBar>
   ));