feat(loaders): introduce Inline component (#289)

packages/loaders/src/Inline.example.md

@@ -0,0 +1,39 @@
+```jsx
+const { zdColorGreen600, zdColorRed600, zdColorBlue600 } = require('@zendeskgarden/css-variables');
+
+<Grid aria-busy="true" aria-live="polite">
+  <Row>
+    <p>
+      All areas that contain these loaders must include the{' '}
+      <code>[aria-busy="true",aria-live="polite"]</code>
+      attributes for
+      <a href="https://www.w3.org/TR/wai-aria-1.0/states_and_properties#aria-busy">
+        an accessible experience
+      </a>
+      .
+    </p>
+  </Row>
+  <Row>
+    <Col md>
+      <Inline />
+    </Col>
+    <Col md>
+      <Inline size={32} />
+    </Col>
+    <Col md>
+      <Inline size={64} />
+    </Col>
+  </Row>
+  <Row>
+    <Col md>
+      <Inline color={zdColorGreen600} />
+    </Col>
+    <Col md>
+      <Inline size={32} color={zdColorRed600} />
+    </Col>
+    <Col md>
+      <Inline size={64} color={zdColorBlue600} />
+    </Col>
+  </Row>
+</Grid>;
+```

packages/loaders/src/Inline.js

@@ -0,0 +1,85 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { keyframes } from 'styled-components';
+import { isRtl } from '@zendeskgarden/react-theming';
+import { zdColorGrey600 } from '@zendeskgarden/css-variables';
+
+const COMPONENT_ID = 'loaders.inline';
+
+const pulseAnimation = keyframes`
+  0%, 100% {
+    opacity: .2;
+  }
+
+  50% {
+    opacity: .8;
+  }
+`;
+
+const StyledCircle = styled.circle.attrs({
+  fill: 'currentColor',
+  cy: 2,
+  r: 2
+})``;
+
+const StyledTypingSvg = styled.svg.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': PACKAGE_VERSION,
+  viewBox: '0 0 16 4',
+  width: ({ size }) => size,
+  height: ({ size }) => size * 0.25
+})`
+  color: ${({ color }) => color};
+
+  ${StyledCircle} {
+    opacity: 0.2;
+
+    &:nth-child(1) {
+      animation: ${pulseAnimation} 1s infinite;
+      animation-delay: ${props => (isRtl(props) ? 'unset' : '0.4s')};
+    }
+
+    &:nth-child(2) {
+      animation: ${pulseAnimation} 1s infinite;
+      animation-delay: 0.2s;
+    }
+
+    &:nth-child(3) {
+      animation: ${pulseAnimation} 1s infinite;
+      animation-delay: ${props => (isRtl(props) ? '0.4s' : 'unset')};
+    }
+  }
+`;
+
+/**
+ * All other props are spread onto the root `<svg>` element
+ */
+const Inline = ({ size, color, ...other }) => {
+  return (
+    <StyledTypingSvg size={size} color={color} {...other}>
+      <StyledCircle cx="14" />
+      <StyledCircle cx="8" />
+      <StyledCircle cx="2" />
+    </StyledTypingSvg>
+  );
+};
+
+Inline.propTypes = {
+  /* Width of the loader in px */
+  size: PropTypes.number,
+  color: PropTypes.string
+};
+
+Inline.defaultProps = {
+  size: 16,
+  color: zdColorGrey600
+};
+
+export default Inline;

packages/loaders/src/Inline.spec.js

@@ -0,0 +1,28 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React from 'react';
+import Inline from './Inline';
+import { mountWithTheme } from '@zendeskgarden/react-testing';
+
+describe('Inline Loader', () => {
+  it('displays correct styling by default', () => {
+    expect(mountWithTheme(<Inline />)).toMatchSnapshot();
+  });
+
+  it('displays correct styling in RTL mode', () => {
+    expect(mountWithTheme(<Inline />, { rtl: true })).toMatchSnapshot();
+  });
+
+  it('customizes size when provided', () => {
+    expect(mountWithTheme(<Inline size={32} />)).toMatchSnapshot();
+  });
+
+  it('customizes color when provided', () => {
+    expect(mountWithTheme(<Inline color="red" />)).toMatchSnapshot();
+  });
+});