Add scroll component (#68)

* Add scroll component

* Swap width and height for maxWidth and maxHeight

Author: rbrtsmith

src/components/Scroll/__tests__/index.jsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+
+import { NAMESPACE } from '../../../constants'
+import { Scroll } from '../'
+
+describe('<Scroll />', () => {
+  it('passes in an optional className override', () => {
+    const $ = shallow(<Scroll className="something else">_</Scroll>)
+    expect($.hasClass(`${NAMESPACE}c-scroll`)).toBe(true)
+    expect($.hasClass('something else')).toBe(true)
+  })
+
+  it('renders a defined tag type', () => {
+    const $ = shallow(<Scroll tag="article">_</Scroll>)
+    expect($.type()).toBe('article')
+  })
+
+  it('renders a div by default', () => {
+    const $ = shallow(<Scroll>_</Scroll>)
+    expect($.type()).toBe('div')
+  })
+
+  it('renders with attributes', () => {
+    const $ = shallow(
+      <Scroll style={{ position: 'relative' }} ariaHidden>
+        _
+      </Scroll>
+    )
+    expect($.prop('style')).toEqual({
+      position: 'relative'
+    })
+    expect($.prop('ariaHidden')).toBe(true)
+  })
+
+  it('renders children', () => {
+    const $ = shallow(<Scroll>test child</Scroll>)
+    expect($.contains('test child')).toBe(true)
+  })
+
+  it('renders a maxWidth and maxHeight', () => {
+    const $ = shallow(<Scroll maxWidth="100px" maxHeight="500px">_</Scroll>)
+    expect($.prop('style')).toEqual({
+      maxWidth: '100px',
+      maxHeight: '500px'
+    })
+  })
+})

src/components/Scroll/index.jsx

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

src/index.js

@@ -23,6 +23,7 @@ import { Navbar } from './components/Navbar/'
 import { Pagination } from './components/Pagination/'
 import { Pill } from './components/Pill/'
 import { ProgressBar } from './components/ProgressBar/'
+import { Scroll } from './components/Scroll/'
 import { StatusCard } from './components/StatusCard/'
 import { Table } from './components/Table/'
 import { Tabs } from './components/Tabs/'
@@ -53,6 +54,7 @@ export {
   Pagination,
   Pill,
   ProgressBar,
+  Scroll,
   Section,
   SiteWrap,
   StatusCard,