feat(core-react): Add type

packages/core-react/README.md

@@ -12,4 +12,4 @@ This package contains Ray's React components.
 npm install --save @wework/ray-core-react
 ```
 
-### [Full Documentation](https://ray.wework.com) | [Source Code](https://github.com/wework/ray)
+### [React Storybook](https://ray.wework.com/core-react/storybook) | [Full Documentation](https://ray.wework.com) | [Source Code](https://github.com/wework/ray)

packages/core-react/src/components/Type/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+export default function Type({ Tag, style, className, ...rest }) {
+  const classes = clsx(className, `ray-text--${style}`);
+
+  return <Tag className={classes} {...rest} />;
+}
+
+Type.propTypes = {
+  Tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  style: PropTypes.oneOf([
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'body',
+    'body-large',
+    'body-small',
+    'body-x-small',
+    'display-1',
+    'display-2'
+  ]),
+  className: PropTypes.string
+};
+
+Type.defaultProps = {
+  Tag: 'div',
+  style: 'body'
+};

packages/core-react/src/components/Type/type.test.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Type from '.';
+
+const SAMPLE_TEXT = 'All their equipment and instruments are alive.';
+
+describe('Type', () => {
+  test('it renders type with ray body class', () => {
+    const wrapper = mount(<Type>{SAMPLE_TEXT}</Type>);
+
+    expect(wrapper.find(Type).length).toBe(1);
+  });
+
+  test('it renders type with added attributes', () => {
+    const wrapper = mount(
+      <Type className="custom-class" data-stuff="hello">
+        {SAMPLE_TEXT}
+      </Type>
+    );
+
+    expect(wrapper.html()).toBe(
+      '<div class="custom-class ray-text--body" data-stuff="hello">All their equipment and instruments are alive.</div>'
+    );
+  });
+
+  test('it renders type with a style', () => {
+    const wrapper = mount(<Type style="h3">{SAMPLE_TEXT}</Type>);
+
+    expect(wrapper.html()).toBe(
+      '<div class="ray-text--h3">All their equipment and instruments are alive.</div>'
+    );
+  });
+
+  test('it renders type with a custom tag', () => {
+    const wrapper = mount(
+      <Type Tag="h1" style="display-1">
+        {SAMPLE_TEXT}
+      </Type>
+    );
+
+    expect(wrapper.html()).toBe(
+      '<h1 class="ray-text--display-1">All their equipment and instruments are alive.</h1>'
+    );
+  });
+
+  test('it throws a proptype error if style is invalid', () => {
+    expect(() => {
+      mount(<Type style="bad-style">{SAMPLE_TEXT}</Type>);
+    }).toThrow();
+  });
+});

packages/core-react/stories/type.stories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import Type from '../src/components/Type';
+
+const styles = [
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'body',
+  'body-large',
+  'body-small',
+  'body-x-small',
+  'display-1',
+  'display-2'
+];
+
+storiesOf('Type', module).add('default', () => (
+  <>
+    {styles.map(style => (
+      <Type key={style} style={style}>
+        All their equipment and instruments are alive.
+      </Type>
+    ))}
+  </>
+));

packages/core-react/test/setup.js

@@ -2,3 +2,17 @@ import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
 Enzyme.configure({ adapter: new Adapter() });
+
+(function throwErrorOnPropTypeFailure() {
+  /* eslint-disable no-console */
+  const originalConsoleError = console.error;
+
+  console.error = message => {
+    if (/(Failed prop type)/.test(message)) {
+      throw new Error(message);
+    }
+
+    originalConsoleError(message);
+  };
+  /* eslint-enable no-console */
+})();