docs: use components for typography elements

src/components/Typography/Caption.js

@@ -1,11 +1,30 @@
 /* @flow */
 
-import createStyledText from './createStyledText';
+import React from 'react';
+import {
+  StyleSheet,
+} from 'react-native';
+import StyledText from './StyledText';
 
-export default createStyledText('Caption', {
-  fontSize: 14,
-  lineHeight: 20,
-  alpha: 0.54,
-  family: 'regular',
-  marginVertical: 2,
+type Props = {
+  style?: any;
+}
+
+const Caption = (props: Props) => (
+  <StyledText
+    {...props}
+    alpha={0.54}
+    family='regular'
+    style={[ styles.text, props.style ]}
+  />
+);
+
+export default Caption;
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 14,
+    lineHeight: 20,
+    marginVertical: 2,
+  },
 });

src/components/Typography/Headline.js

@@ -1,11 +1,30 @@
 /* @flow */
 
-import createStyledText from './createStyledText';
+import React from 'react';
+import {
+  StyleSheet,
+} from 'react-native';
+import StyledText from './StyledText';
 
-export default createStyledText('Headline', {
-  fontSize: 24,
-  lineHeight: 32,
-  alpha: 0.87,
-  family: 'regular',
-  marginVertical: 2,
+type Props = {
+  style?: any;
+}
+
+const Headline = (props: Props) => (
+  <StyledText
+    {...props}
+    alpha={0.87}
+    family='regular'
+    style={[ styles.text, props.style ]}
+  />
+);
+
+export default Headline;
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 24,
+    lineHeight: 32,
+    marginVertical: 2,
+  },
 });

src/components/Typography/Paragraph.js

@@ -1,11 +1,30 @@
 /* @flow */
 
-import createStyledText from './createStyledText';
+import React from 'react';
+import {
+  StyleSheet,
+} from 'react-native';
+import StyledText from './StyledText';
 
-export default createStyledText('Paragraph', {
-  fontSize: 14,
-  lineHeight: 20,
-  alpha: 0.87,
-  family: 'regular',
-  marginVertical: 2,
+type Props = {
+  style?: any;
+}
+
+const Paragraph = (props: Props) => (
+  <StyledText
+    {...props}
+    alpha={0.87}
+    family='regular'
+    style={[ styles.text, props.style ]}
+  />
+);
+
+export default Paragraph;
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 14,
+    lineHeight: 20,
+    marginVertical: 2,
+  },
 });

src/components/Typography/StyledText.js

@@ -0,0 +1,41 @@
+/* @flow */
+
+import color from 'color';
+import React, {
+  PureComponent,
+  PropTypes,
+} from 'react';
+import Text from './Text';
+import withTheme from '../../core/withTheme';
+import type { Theme } from '../../types/Theme';
+
+type Props = {
+  alpha: number;
+  family: 'regular' | 'medium' | 'light' | 'thin';
+  style?: any;
+  theme: Theme;
+}
+
+class StyledText extends PureComponent<void, Props, void> {
+  static propTypes = {
+    alpha: PropTypes.number.isRequired,
+    family: PropTypes.string.isRequired,
+    theme: PropTypes.object.isRequired,
+    style: Text.propTypes.style,
+  }
+
+  render() {
+    const { theme, alpha, family, style, ...rest } = this.props;
+    const textColor = color(theme.colors.text).alpha(alpha).rgbaString();
+    const fontFamily = theme.fonts[family];
+
+    return (
+      <Text
+        {...rest}
+        style={[ { color: textColor, fontFamily }, style, this.props.style ]}
+      />
+    );
+  }
+}
+
+export default withTheme(StyledText);

src/components/Typography/Subheading.js

@@ -1,11 +1,30 @@
 /* @flow */
 
-import createStyledText from './createStyledText';
+import React from 'react';
+import {
+  StyleSheet,
+} from 'react-native';
+import StyledText from './StyledText';
 
-export default createStyledText('Subheading', {
-  fontSize: 16,
-  lineHeight: 24,
-  alpha: 0.87,
-  family: 'regular',
-  marginVertical: 2,
+type Props = {
+  style?: any;
+}
+
+const Subheading = (props: Props) => (
+  <StyledText
+    {...props}
+    alpha={0.87}
+    family='regular'
+    style={[ styles.text, props.style ]}
+  />
+);
+
+export default Subheading;
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 16,
+    lineHeight: 24,
+    marginVertical: 2,
+  },
 });

src/components/Typography/Title.js

@@ -1,11 +1,30 @@
 /* @flow */
 
-import createStyledText from './createStyledText';
+import React from 'react';
+import {
+  StyleSheet,
+} from 'react-native';
+import StyledText from './StyledText';
 
-export default createStyledText('Title', {
-  fontSize: 20,
-  lineHeight: 30,
-  alpha: 0.87,
-  family: 'medium',
-  marginVertical: 2,
+type Props = {
+  style?: any;
+}
+
+const Title = (props: Props) => (
+  <StyledText
+    {...props}
+    alpha={0.87}
+    family='medium'
+    style={[ styles.text, props.style ]}
+  />
+);
+
+export default Title;
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 20,
+    lineHeight: 30,
+    marginVertical: 2,
+  },
 });

src/components/Typography/createStyledText.js

@@ -1,49 +0,0 @@
-/* @flow */
-
-import color from 'color';
-import React, {
-  PureComponent,
-  PropTypes,
-} from 'react';
-import Text from './Text';
-import withTheme from '../../core/withTheme';
-import type { Theme } from '../../types/Theme';
-
-type Props = {
-  style?: any;
-  theme: Theme;
-}
-
-type TextStyle = {
-  fontSize: number;
-  lineHeight: number;
-  alpha: number;
-  family: 'regular' | 'medium' | 'light' | 'thin';
-}
-
-export default function createStyledText<T>(name: string, textStyle: TextStyle): ReactClass<T> {
-  const { alpha, family, ...style } = textStyle;
-
-  class StyledText extends PureComponent<void, Props, void> {
-    static displayName = name;
-    static propTypes = {
-      theme: PropTypes.object.isRequired,
-      style: Text.propTypes.style,
-    }
-
-    render() {
-      const { theme } = this.props;
-      const textColor = color(theme.colors.text).alpha(alpha).rgbaString();
-      const fontFamily = theme.fonts[family];
-
-      return (
-        <Text
-          {...this.props}
-          style={[ { color: textColor, fontFamily }, style, this.props.style ]}
-        />
-      );
-    }
-  }
-
-  return withTheme(StyledText);
-}