Repository: codypearce/material-bread
Pull request #247 (2019-08-06 19:52:30)

234 - base text theme
This PR addresses issue #234 by updating the `BaseText` component to have a `themeColor` prop in order to both respect the primary color as defined in the `textColor` theme property, as well as more easily change that color to secondary, hint, disabled, etc.

![Screen Shot 2019-08-06 at 3 51 27 PM](https://user-images.githubusercontent.com/4458812/62572604-17603e80-b862-11e9-853e-9bd8f35e3e1f.png)



Patch:
diff --git a/docs/src/content/components/typography/propData.js b/docs/src/content/components/typography/propData.js
index 4d94298..3a0b4d8 100644
--- a/docs/src/content/components/typography/propData.js
+++ b/docs/src/content/components/typography/propData.js
@@ -6,6 +6,12 @@ const propData = [
 
   ['style', 'Styles root element', 'object', ''],
   ['text', 'Renders a Text string', 'string', ''],
+  [
+    'themeColor',
+    'The color value defined within the `textColor` theme property',
+    'string',
+    'primary',
+  ],
 ];
 
 export default createTableData(propData);
diff --git a/package.json b/package.json
index bd7c080..692f6bf 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
   "jest": {
     "preset": "react-native",
     "transformIgnorePatterns": [
-      "/node_modules/(?!(react-native|react-native-swipe-gestures|react-native-vector-icons)/)"
+      "/node_modules/(?!(react-native|react-native-swipe-gestures|react-native-vector-icons|react-native-svg)/)"
     ],
     "testMatch": [
       "<rootDir>/**/*.test.js"
diff --git a/src/Components/Typography/BaseText/BaseText.js b/src/Components/Typography/BaseText/BaseText.js
index 1931a60..5fe8f32 100644
--- a/src/Components/Typography/BaseText/BaseText.js
+++ b/src/Components/Typography/BaseText/BaseText.js
@@ -1,12 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Text, StyleSheet } from 'react-native';
-
-const styles = StyleSheet.create({
-  default: {
-    color: 'rgba(0, 0, 0, 0.87)',
-  },
-});
+import { Text } from 'react-native';
 
 export default class BaseText extends Component {
   static propTypes = {
@@ -17,6 +11,7 @@ export default class BaseText extends Component {
     color: PropTypes.string,
     gutterBottom: PropTypes.bool,
     theme: PropTypes.object,
+    themeColor: PropTypes.string,
   };
 
   render() {
@@ -28,18 +23,18 @@ export default class BaseText extends Component {
       gutterBottom,
       children,
       theme,
+      themeColor = 'primary',
       ...props
     } = this.props;
 
     return (
       <Text
         style={[
-          styles.default,
           theme.text,
           typographyStyles,
           {
             textAlign: align ? align : 'left',
-            color: color ? color : 'rgba(0,0,0, 87)',
+            color: color ? color : theme.textColor[themeColor],
             marginBottom: gutterBottom ? 10 : 0,
           },
           style,
diff --git a/src/Components/Typography/Typography.stories.js b/src/Components/Typography/Typography.stories.js
index 9bdc558..2c1ead0 100644
--- a/src/Components/Typography/Typography.stories.js
+++ b/src/Components/Typography/Typography.stories.js
@@ -22,8 +22,10 @@ export default storiesOf('Components|Typography', module)
         <Heading type={6} text="h6" />
         <Subtitle type={1} text="Subtitle 1" />
         <Subtitle type={2} text="Subtitle 2" />
-        <BodyText type={1} text="Body 2" />
+        <BodyText type={1} text="Body 1" />
+        <BodyText type={1} text="Body 1 secondary" themeColor="secondary" />
         <BodyText type={2} text="Body 2" />
+        <BodyText type={2} text="Body 2 secondary" themeColor="secondary" />
         <Caption text="Caption" />
         <Overline text="Overline" />
       </View>


Test patch:
diff --git a/src/Components/Typography/BaseText/BaseTest.test.js b/src/Components/Typography/BaseText/BaseTest.test.js
new file mode 100644
index 0000000..fb577ba
--- /dev/null
+++ b/src/Components/Typography/BaseText/BaseTest.test.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import BaseText from './BaseText';
+
+import renderer from 'react-test-renderer';
+
+const props = {
+  theme: {
+    text: {},
+    textColor: {
+      primary: 'red',
+      secondary: 'blue',
+    },
+  },
+};
+
+describe('BaseText', () => {
+  const tree = renderer.create(<BaseText {...props} />);
+
+  test('renders', () => {
+    expect(tree.toJSON()).toMatchSnapshot();
+  });
+
+  test('renders with different theme color', () => {
+    tree.update(<BaseText {...props} themeColor="secondary" />);
+    expect(tree.toJSON()).toMatchSnapshot();
+  });
+});
diff --git a/src/Components/Typography/BaseText/__snapshots__/BaseTest.test.js.snap b/src/Components/Typography/BaseText/__snapshots__/BaseTest.test.js.snap
new file mode 100644
index 0000000..35c7cf1
--- /dev/null
+++ b/src/Components/Typography/BaseText/__snapshots__/BaseTest.test.js.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BaseText renders 1`] = `
+<Text
+  style={
+    Array [
+      Object {},
+      undefined,
+      Object {
+        "color": "red",
+        "marginBottom": 0,
+        "textAlign": "left",
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`BaseText renders with different theme color 1`] = `
+<Text
+  style={
+    Array [
+      Object {},
+      undefined,
+      Object {
+        "color": "blue",
+        "marginBottom": 0,
+        "textAlign": "left",
+      },
+      undefined,
+    ]
+  }
+/>
+`;