Replace SmallLabel with H4Text component

Author: tanx

src/component/label.js

@@ -84,24 +84,3 @@ SmallBalanceLabel.propTypes = {
   unit: PropTypes.string,
   style: TextPropTypes.style,
 };
-
-//
-// Small Label
-//
-
-const smallStyles = StyleSheet.create({
-  label: {
-    fontFamily: 'OpenSans SemiBold',
-    fontSize: font.sizeS,
-    lineHeight: font.lineHeightS,
-  },
-});
-
-export const SmallLabel = ({ children, style }) => (
-  <Text style={[smallStyles.label, style]}>{children}</Text>
-);
-
-SmallLabel.propTypes = {
-  children: PropTypes.string.isRequired,
-  style: TextPropTypes.style,
-};

src/component/text.js

@@ -67,7 +67,28 @@ export const H1Text = ({ children = '', style }) => (
 );
 
 H1Text.propTypes = {
-  children: PropTypes.string,
+  children: PropTypes.string.isRequired,
+  style: TextPropTypes.style,
+};
+
+//
+// H4 Text
+//
+
+const h4Styles = StyleSheet.create({
+  text: {
+    fontFamily: 'OpenSans SemiBold',
+    fontSize: font.sizeS,
+    lineHeight: font.lineHeightS,
+  },
+});
+
+export const H4Text = ({ children, style }) => (
+  <Text style={[h4Styles.text, style]}>{children}</Text>
+);
+
+H4Text.propTypes = {
+  children: PropTypes.string.isRequired,
   style: TextPropTypes.style,
 };
 

src/view/home.js

@@ -7,12 +7,12 @@ import MainContent from '../component/main-content';
 import Icon from '../component/icon';
 import { Header, Title } from '../component/header';
 import { colors } from '../component/style';
+import { H4Text } from '../component/text';
 import {
   BalanceLabel,
   BalanceLabelNumeral,
   BalanceLabelUnit,
   SmallBalanceLabel,
-  SmallLabel,
 } from '../component/label';
 import {
   Button,
@@ -97,7 +97,7 @@ const BalanceDisplay = ({
         <BalanceLabelNumeral>{channelBalanceLabel}</BalanceLabelNumeral>
         <BalanceLabelUnit>{unitLabel}</BalanceLabelUnit>
       </BalanceLabel>
-      <SmallLabel style={balanceStyles.smallLabel}>Pending Deposit</SmallLabel>
+      <H4Text style={balanceStyles.smallLabel}>Pending Deposit</H4Text>
       <SmallBalanceLabel unit={unitLabel}>{balanceLabel}</SmallBalanceLabel>
     </Button>
   </View>

stories/component/label.js

@@ -5,7 +5,6 @@ import {
   BalanceLabelNumeral,
   BalanceLabelUnit,
   SmallBalanceLabel,
-  SmallLabel,
 } from '../../src/component/label';
 import { colors } from '../../src/component/style';
 
@@ -31,7 +30,4 @@ storiesOf('Labels', module)
     <SmallBalanceLabel unit="SAT" style={{ color: colors.blackText }}>
       9,123,456,788
     </SmallBalanceLabel>
-  ))
-  .add('Small Label', () => (
-    <SmallLabel style={{ color: colors.blackText }}>Small Label</SmallLabel>
   ));