Add Progress Bar Component and Unit Tests (#57)

* Add Progress Bar Component and Unit Tests

* PR Fixes

* Add animation to progress bar

* Add correct aria attributes

Author: kwood15

demo/src/App.jsx

@@ -5,6 +5,8 @@ import {
   Section,
   Pill,
   Table,
+  LinkList,
+  ProgressBar,
   Form,
 } from 'nebula-react'
 
@@ -13,6 +15,15 @@ const App = () => (
     <Section size="md">
       <SiteWrap padding>
         <Section size="md">
+          <SiteWrap padding>
+            <h3>Link List with Divider</h3>
+            <h3>Progress Bar</h3>
+            <Section size="md">
+              <ProgressBar.Wrapper>
+                <ProgressBar.Indicator animated percent="50" />
+              </ProgressBar.Wrapper>
+            </Section>
+          </SiteWrap>
           <Table.Wrapper>
             <Table.Container spacing="sm" sortedBy={{ index: 3, descending: false }} stackAt="max-sm" onChange={value => console.log(value)}>
               <Table.Header>

src/components/ProgressBar/Indicator.js

@@ -0,0 +1,34 @@
+import { createElement as E } from 'react'
+import T from 'prop-types'
+
+import { classNames } from '../../utils/'
+import { NAMESPACE, BLOCK_TAGS } from '../../constants'
+
+const enhancePercentString = percent => `${percent && percent.endsWith('%') ? percent : `${percent}%`}`
+
+const ProgressBarIndicator = ({ tag, animated, percent, className, ...rest }) =>
+  E(
+    tag || 'div',
+    {
+      style: { width: enhancePercentString(percent) },
+      className: classNames(
+        `${NAMESPACE}c-progress-bar__indicator`,
+        { [`${NAMESPACE}c-progress-bar__indicator--animated`]: animated },
+        className
+      ),
+      role: 'progressbar',
+      'aria-valuenow': enhancePercentString(percent),
+      'aria-valuemin': '0%',
+      'aria-valuemax': '100%',
+      ...rest
+    },
+  )
+
+ProgressBarIndicator.propTypes = {
+  tag: T.oneOf(BLOCK_TAGS),
+  className: T.string,
+  percent: T.string,
+  animated: T.bool
+}
+
+export default ProgressBarIndicator

src/components/ProgressBar/Wrapper.js

@@ -0,0 +1,23 @@
+import { createElement as E } from 'react'
+import T from 'prop-types'
+
+import { classNames } from '../../utils/'
+import { NAMESPACE, BLOCK_TAGS } from '../../constants'
+
+const ProgressBarWrapper = ({ tag, className, children, ...rest }) =>
+  E(
+    tag || 'div',
+    {
+      className: classNames(`${NAMESPACE}c-progress-bar`, className),
+      ...rest
+    },
+    children
+  )
+
+ProgressBarWrapper.propTypes = {
+  tag: T.oneOf(BLOCK_TAGS),
+  className: T.string,
+  children: T.node.isRequired
+}
+
+export default ProgressBarWrapper

src/components/ProgressBar/__tests__/Indicator.jsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+
+import { NAMESPACE } from '../../../constants'
+import { ProgressBar } from '../'
+
+describe('<ProgressBar.Indicator />', () => {
+  it('takes a className that gets appended', () => {
+    const $ = shallow(<ProgressBar.Indicator className="test" />)
+    expect($.hasClass(`${NAMESPACE}c-progress-bar__indicator`)).toBe(true)
+    expect($.hasClass(`${NAMESPACE}c-progress-bar__indicator--animated`)).toBe(false)
+    expect($.hasClass('test')).toBe(true)
+  })
+
+  it('renders with an animated gradient', () => {
+    const $ = shallow(<ProgressBar.Indicator animated />)
+    expect($.hasClass(`${NAMESPACE}c-progress-bar__indicator`)).toBe(true)
+    expect($.hasClass(`${NAMESPACE}c-progress-bar__indicator--animated`)).toBe(true)
+  })
+
+  it('renders a defined tag type', () => {
+    const $ = shallow(<ProgressBar.Indicator tag="article" />)
+    expect($.type()).toBe('article')
+  })
+
+  it('renders a div by default', () => {
+    const $ = shallow(<ProgressBar.Indicator />)
+    expect($.type()).toBe('div')
+  })
+
+  it('renders with attributes', () => {
+    const $ = shallow(
+      <ProgressBar.Indicator style={{ position: 'relative' }} ariaHidden />
+    )
+    expect($.prop('style')).toEqual({
+      position: 'relative'
+    })
+    expect($.prop('ariaHidden')).toBe(true)
+  })
+
+  it('renders with the correct aria values', () => {
+    const $ = shallow(<ProgressBar.Indicator percent="50" />)
+    expect($.prop('role')).toBe('progressbar')
+    expect($.prop('aria-valuemin')).toBe('0%')
+    expect($.prop('aria-valuemax')).toBe('100%')
+    expect($.prop('aria-valuenow')).toBe('50%')
+  })
+
+  describe('percent prop', () => {
+    it('renders an inline style width as a percentage', () => {
+      const $ = shallow(<ProgressBar.Indicator percent="50" />)
+      expect($.prop('style')).toEqual({
+        width: '50%'
+      })
+    })
+
+    it('only appends the percentage unit if not passed', () => {
+      const $ = shallow(<ProgressBar.Indicator percent="50%" />)
+      expect($.prop('style')).toEqual({
+        width: '50%'
+      })
+    })
+  })
+})

src/components/ProgressBar/__tests__/Wrapper.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+
+import { NAMESPACE } from '../../../constants'
+import { ProgressBar } from '../'
+
+describe('<ProgressBar.Wrapper />', () => {
+  it('takes a className that gets appended', () => {
+    const $ = shallow(<ProgressBar.Wrapper className="test">_</ProgressBar.Wrapper>)
+    expect($.hasClass(`${NAMESPACE}c-progress-bar`)).toBe(true)
+    expect($.hasClass('test')).toBe(true)
+  })
+
+  it('renders a defined tag type', () => {
+    const $ = shallow(<ProgressBar.Wrapper tag="article">_</ProgressBar.Wrapper>)
+    expect($.type()).toBe('article')
+  })
+
+  it('renders a div by default', () => {
+    const $ = shallow(<ProgressBar.Wrapper>_</ProgressBar.Wrapper>)
+    expect($.type()).toBe('div')
+  })
+
+  it('renders with attributes', () => {
+    const $ = shallow(
+      <ProgressBar.Wrapper style={{ position: 'relative' }} ariaHidden>
+        _
+      </ProgressBar.Wrapper>
+    )
+    expect($.prop('style')).toEqual({
+      position: 'relative'
+    })
+    expect($.prop('ariaHidden')).toBe(true)
+  })
+
+  it('renders children', () => {
+    const $ = shallow(<ProgressBar.Wrapper>test child</ProgressBar.Wrapper>)
+    expect($.contains('test child')).toBe(true)
+  })
+})

src/components/ProgressBar/index.js

@@ -0,0 +1,9 @@
+import Wrapper from './Wrapper'
+import Indicator from './Indicator'
+
+const ProgressBar = {
+  Wrapper,
+  Indicator
+}
+
+export { ProgressBar }

src/index.js

@@ -18,9 +18,10 @@ import { Icon } from './components/Icon/'
 import { LinkList } from './components/LinkList/'
 import { LoadingIcon } from './components/LoadingIcon/'
 import { Modal } from './components/Modal/'
-import { Pagination } from './components/Pagination/'
 import { Navbar } from './components/Navbar/'
+import { Pagination } from './components/Pagination/'
 import { Pill } from './components/Pill/'
+import { ProgressBar } from './components/ProgressBar/'
 import { StatusCard } from './components/StatusCard/'
 import { Table } from './components/Table/'
 import { Tabs } from './components/Tabs/'
@@ -46,8 +47,9 @@ export {
   MatrixList,
   Modal,
   Navbar,
-  Pill,
   Pagination,
+  Pill,
+  ProgressBar,
   Section,
   SiteWrap,
   StatusCard,