LoadingDots: Add alignment styles

This update adds an `align` prop to the LoadingDots component, allowing it to align to the `left`, `center`, and `right`.

InfiniteScroller has also been adjusted so that the LoadingDots align `center` by default.

src/components/InfiniteScroller/index.js

@@ -140,7 +140,7 @@ class InfiniteScroller extends Component {
     )
 
     const loadingMarkup = loading || (
-      <LoadingDots />
+      <LoadingDots align='center' />
     )
     const contentMarkup = isLoading ? loadingMarkup : children
 

src/components/InfiniteScroller/tests/InfiniteScroller.test.js

@@ -147,6 +147,7 @@ describe('Loading', () => {
     const o = wrapper.find(LoadingDots)
 
     expect(o.length).toBe(1)
+    expect(o.node.props.align).toBe('center')
   })
 
   test('Can render custom loading markup', () => {

src/components/LoadingDots/README.md

@@ -7,3 +7,10 @@ A LoadingDots component is a cycling ellipsis animation, typically used in chat/
 ```html
 <LoadingDots />
 ```
+
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| align | string | Determines the horizontal alignment of this component. Accepts `left`, `center`, `right`. |

src/components/LoadingDots/index.js

@@ -3,12 +3,17 @@ import PropTypes from 'prop-types'
 import classNames from '../../utilities/classNames'
 
 export const propTypes = {
+  align: PropTypes.oneOf(['left', 'center', 'right', '']),
   className: PropTypes.string
 }
 
 const LoadingDots = props => {
-  const { className, ...rest } = props
-  const componentClassName = classNames('c-LoadingDots', className)
+  const { align, className, ...rest } = props
+  const componentClassName = classNames(
+    'c-LoadingDots',
+    align && `is-${align}`,
+    className
+  )
 
   return (
     <div className={componentClassName} {...rest}>

src/components/LoadingDots/tests/LoadingDots.test.js

@@ -16,3 +16,21 @@ test('Renders 3 dots', () => {
 
   expect(wrapper.children().length).toBe(3)
 })
+
+describe('Align', () => {
+  test('Does not apply an alignment class by default', () => {
+    const wrapper = shallow(<LoadingDots />)
+
+    expect(wrapper.hasClass('is-left')).not.toBeTruthy()
+    expect(wrapper.hasClass('is-center')).not.toBeTruthy()
+    expect(wrapper.hasClass('is-right')).not.toBeTruthy()
+  })
+
+  test('Can apply alignment class', () => {
+    const wrapper = shallow(<LoadingDots align='center' />)
+
+    expect(wrapper.hasClass('is-left')).not.toBeTruthy()
+    expect(wrapper.hasClass('is-center')).toBeTruthy()
+    expect(wrapper.hasClass('is-right')).not.toBeTruthy()
+  })
+})

src/styles/components/LoadingDots.scss

@@ -3,6 +3,19 @@
   $gap: 3px;
   $size: 5px;
   display: flex;
+  width: ($size * 3) + ($gap * 2);
+
+  // Modifiers
+  &.is-left {
+    margin-right: auto;
+  }
+  &.is-center {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  &.is-right {
+    margin-left: auto;
+  }
 
   &__dot {
     background-color: _color(grey, 800);
@@ -75,4 +88,4 @@
       opacity: 1;
     }
   }
-}
+}

stories/LoadingDots.js

@@ -1,6 +1,18 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
-import { LoadingDots } from '../src/index.js'
+import { LoadingDots, Text } from '../src/index.js'
 
 storiesOf('LoadingDots', module)
   .add('default', () => <LoadingDots />)
+  .add('align', () => (
+    <div>
+      <Text>Left:</Text>
+      <LoadingDots align='left' />
+      <br />
+      <Text>Center:</Text>
+      <LoadingDots align='center' />
+      <br />
+      <Text>Left:</Text>
+      <LoadingDots align='right' />
+    </div>
+  ))