feat(exoflex): add Typography components (#182)

* feat: add Typography components

* docs: add example for Typography

* refactor: replace Label with Typography components

* refactor: rename SecondaryBody to Label

* refactor: rename Body to Paragraph

packages/exoflex/example/src/examples/TypographyExample.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { ScrollView, StyleSheet } from 'react-native';
+import { Typography } from 'exoflex';
+
+let {
+  Heading,
+  Subheading,
+  LargeTitle,
+  Title,
+  Subtitle,
+  Paragraph,
+  Label,
+  Caption,
+} = Typography;
+
+function TypographyExample() {
+  return (
+    <ScrollView contentContainerStyle={styles.root}>
+      <Heading style={styles.spacing}>Heading</Heading>
+      <Subheading style={styles.spacing}>Subheading</Subheading>
+      <LargeTitle style={styles.spacing}>LargeTitle</LargeTitle>
+      <Title style={styles.spacing}>Title</Title>
+      <Subtitle style={styles.spacing}>Subtitle</Subtitle>
+      <Paragraph style={styles.spacing}>Paragraph</Paragraph>
+      <Label style={styles.spacing}>Label</Label>
+      <Caption style={styles.spacing}>Caption</Caption>
+      <Heading style={styles.spacing} weight="medium">
+        Medium Heading
+      </Heading>
+      <Subheading style={styles.spacing} weight="medium">
+        Medium Subheading
+      </Subheading>
+      <LargeTitle style={styles.spacing} weight="medium">
+        Medium LargeTitle
+      </LargeTitle>
+      <Title style={styles.spacing} weight="medium">
+        Medium Title
+      </Title>
+      <Subtitle style={styles.spacing} weight="medium">
+        Medium Subtitle
+      </Subtitle>
+      <Paragraph style={styles.spacing} weight="medium">
+        Medium Paragraph
+      </Paragraph>
+      <Label style={styles.spacing} weight="medium">
+        Medium Label
+      </Label>
+      <Caption style={styles.spacing} weight="medium">
+        Medium Caption
+      </Caption>
+    </ScrollView>
+  );
+}
+
+TypographyExample.title = 'Typography';
+
+let styles = StyleSheet.create({
+  root: {
+    padding: 16,
+    backgroundColor: '#eeeeee',
+  },
+  spacing: {
+    margin: 4,
+  },
+});
+
+export default TypographyExample;

packages/exoflex/example/src/examples/index.tsx

@@ -19,6 +19,7 @@ import RadioButtonGroupExample from './RadioButtonGroupExample';
 import SwitchExample from './SwitchExample';
 import TextInputExample from './TextInputExample';
 import ToastExample from './ToastExample';
+import TypographyExample from './TypographyExample';
 
 import Welcome from '../Welcome';
 
@@ -41,6 +42,7 @@ export let EXAMPLES = {
   switch: SwitchExample,
   textinput: TextInputExample,
   toast: ToastExample,
+  typography: TypographyExample,
 };
 
 export let ROUTES = Object.entries(EXAMPLES).reduce(

packages/exoflex/src/components/Card/CardTitle.tsx

@@ -7,8 +7,7 @@ import {
   ViewStyle,
 } from 'react-native';
 
-import Label from '../Label';
-import Text from '../Text';
+import { Label, Paragraph } from '../Typography';
 
 type Props = {
   title: string;
@@ -29,7 +28,11 @@ function CardTitle({
   return (
     <View {...otherProps} style={[styles.root, style]}>
       <View>
-        {!!title && <Title style={titleStyle}>{title}</Title>}
+        {!!title && (
+          <Paragraph weight="500" numberOfLines={1} style={titleStyle}>
+            {title}
+          </Paragraph>
+        )}
         {!!subtitle && (
           <Label style={[styles.subtitle, subtitleStyle]}>{subtitle}</Label>
         )}
@@ -40,24 +43,18 @@ function CardTitle({
 
 CardTitle.displayName = 'Card.Title';
 
-type TitleProps = {
-  children: string;
-  style?: StyleProp<TextStyle>;
-};
-
-// TODO: Discuss Typograhpy with designer
-let Title = ({ ...otherProps }: TitleProps) => (
-  <Text weight="500" numberOfLines={1} {...otherProps} />
-);
-
 let styles = StyleSheet.create({
   root: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
     padding: 12,
   },
-  subtitle: { marginTop: 2 },
+  subtitle: {
+    marginTop: 2,
+    // TODO: This color should use colors.text with 0.6 opacity.
+    color: '#757575',
+  },
 });
 
 export default CardTitle;

packages/exoflex/src/components/TextInput/ErrorMessage.tsx

@@ -1,7 +1,7 @@
 import React, { ComponentProps } from 'react';
 import { StyleSheet } from 'react-native';
 
-import Label from '../Label';
+import { Label } from '../Typography';
 
 type Props = ComponentProps<Label>;
 

packages/exoflex/src/components/TextInput/TextInputOutlined.tsx

@@ -3,7 +3,7 @@ import { View, TextInput, StyleSheet } from 'react-native';
 import { IconButton } from 'react-native-paper';
 
 import ErrorMessage from './ErrorMessage';
-import Label from '../Label';
+import { Label } from '../Typography';
 import useTheme from '../../helpers/useTheme';
 import { ChildTextInputProps } from './types';
 
@@ -47,7 +47,7 @@ function TextInputOutlined(
         containerStyle,
       ]}
     >
-      {!!label && <Label style={labelStyle}>{label}</Label>}
+      {!!label && <Label style={[styles.label, labelStyle]}>{label}</Label>}
       <TextInput
         ref={ref}
         editable={!disabled && editable}
@@ -99,6 +99,10 @@ let styles = StyleSheet.create({
     position: 'absolute',
     bottom: -18,
   },
+  label: {
+    // TODO: This color should use colors.text with 0.6 opacity.
+    color: '#757575',
+  },
 });
 
 export default forwardRef(TextInputOutlined);

packages/exoflex/src/components/Typography/Caption.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import Text, { Props as TextProps } from '../Text';
+
+type Props = TextProps;
+
+function Caption({ style, ...otherProps }: Props) {
+  return <Text {...otherProps} style={[styles.root, style]} />;
+}
+
+Caption.defaultProps = Text.defaultProps;
+
+let styles = StyleSheet.create({
+  root: {
+    fontSize: 10,
+  },
+});
+
+export default Caption;

packages/exoflex/src/components/Typography/Heading.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import Text, { Props as TextProps } from '../Text';
+
+type Props = TextProps;
+
+function Heading({ style, ...otherProps }: Props) {
+  return (
+    <Text
+      accessibilityRole="header"
+      aria-level="1"
+      style={[styles.root, style]}
+      {...otherProps}
+    />
+  );
+}
+
+Heading.defaultProps = Text.defaultProps;
+
+let styles = StyleSheet.create({
+  root: {
+    fontSize: 42,
+  },
+});
+
+export default Heading;

packages/exoflex/src/components/Typography/Label.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import Text, { Props as TextProps } from '../Text';
+
+type Props = TextProps;
+
+function Label({ style, ...otherProps }: Props) {
+  return <Text {...otherProps} style={[styles.root, style]} />;
+}
+
+Label.defaultProps = Text.defaultProps;
+
+let styles = StyleSheet.create({
+  root: {
+    fontSize: 12,
+  },
+});
+
+export default Label;

packages/exoflex/src/components/Typography/LargeTitle.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import Text, { Props as TextProps } from '../Text';
+
+type Props = TextProps;
+
+function LargeTitle({ style, ...otherProps }: Props) {
+  return (
+    <Text
+      accessibilityRole="header"
+      aria-level="3"
+      {...otherProps}
+      style={[styles.root, style]}
+    />
+  );
+}
+
+LargeTitle.defaultProps = Text.defaultProps;
+
+let styles = StyleSheet.create({
+  root: {
+    fontSize: 28,
+  },
+});
+
+export default LargeTitle;

packages/exoflex/src/components/Typography/Paragraph.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import Text, { Props as TextProps } from '../Text';
+
+type Props = TextProps;
+
+function Paragraph({ style, ...otherProps }: Props) {
+  return <Text {...otherProps} style={[styles.root, style]} />;
+}
+
+Paragraph.defaultProps = Text.defaultProps;
+
+let styles = StyleSheet.create({
+  root: {
+    fontSize: 14,
+  },
+});
+
+export default Paragraph;

packages/exoflex/src/components/Typography/Subheading.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import Text, { Props as TextProps } from '../Text';
+
+type Props = TextProps;
+
+function Subheading({ style, ...otherProps }: Props) {
+  return (
+    <Text
+      accessibilityRole="header"
+      aria-level="2"
+      {...otherProps}
+      style={[styles.root, style]}
+    />
+  );
+}
+
+Subheading.defaultProps = Text.defaultProps;
+
+let styles = StyleSheet.create({
+  root: {
+    fontSize: 36,
+  },
+});
+
+export default Subheading;

packages/exoflex/src/components/Typography/Subtitle.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import Text, { Props as TextProps } from '../Text';
+
+type Props = TextProps;
+
+function Subtitle({ style, ...otherProps }: Props) {
+  return (
+    <Text
+      accessibilityRole="header"
+      aria-level="5"
+      {...otherProps}
+      style={[styles.root, style]}
+    />
+  );
+}
+
+Subtitle.defaultProps = Text.defaultProps;
+
+let styles = StyleSheet.create({
+  root: {
+    fontSize: 16,
+  },
+});
+
+export default Subtitle;