Skip to content

Commit d834a9c

Browse files
author
Matthew Davidson
committed
[NOJIRA] Add emphasize prop to RN text component.
Also improved the storybook structure
1 parent dc7d22f commit d834a9c

File tree

11 files changed

+342
-116
lines changed

11 files changed

+342
-116
lines changed

‎changelog.md

+7-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@
22

33
## UNRELEASED
44

5-
_Nothing yet..._
5+
**Added:**
6+
- react-native-bpk-component-text:
7+
- New `emphasize` prop
8+
9+
**Fixed:**
10+
- react-native-bpk-component-text:
11+
- Default color is now gray700
612

713
## 2017-09-12 - New React Native Text component
814

‎native/packages/react-native-bpk-component-text/readme.md

+11-10
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,14 @@ import { View, StyleSheet } from 'react-native';
1616
import BpkText from 'react-native-bpk-component-text';
1717
import * as TOKENS from 'bpk-tokens/tokens/ios/base.react.native.es6';
1818

19+
const styles = StyleSheet.create({
20+
container: {
21+
flex: 1,
22+
justifyContent: 'center',
23+
padding: TOKENS.spacingBase,
24+
}
25+
});
26+
1927
export default class App extends Component {
2028
render() {
2129
return (
@@ -30,19 +38,12 @@ export default class App extends Component {
3038
);
3139
}
3240
}
33-
34-
const styles = StyleSheet.create({
35-
container: {
36-
flex: 1,
37-
justifyContent: 'center',
38-
padding: TOKENS.spacingBase,
39-
}
40-
});
4141
```
4242

4343
## Props
4444

4545
| Property | PropType | Required | Default Value |
4646
| ----------- | -------------------------------------------- | -------- | ------------- |
47-
| children | - | true | - |
48-
| textStyle | oneOf('xxl', 'xl', 'lg', 'base', 'sm', 'xs') | false | base |
47+
| children | node | true | - |
48+
| textStyle | oneOf('xxl', 'xl', 'lg', 'base', 'sm', 'xs') | false | 'base' |
49+
| emphasize | bool | false | false |

‎native/packages/react-native-bpk-component-text/src/BpkText.android-test.js

+33
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,39 @@ describe('Android', () => {
4646
expect(tree).toMatchSnapshot();
4747
});
4848

49+
it('should render correctly with `emphasize` prop', () => {
50+
const tree = renderer.create(
51+
<BpkText emphasize>
52+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
53+
commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
54+
et magnis dis parturient montes, nascetur ridiculus mus.
55+
</BpkText>,
56+
).toJSON();
57+
expect(tree).toMatchSnapshot();
58+
});
59+
60+
it('should render correctly with `emphasize` & `textStyle` equal to `xxl`', () => {
61+
const tree = renderer.create(
62+
<BpkText emphasize textStyle="xxl">
63+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
64+
commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
65+
et magnis dis parturient montes, nascetur ridiculus mus.
66+
</BpkText>,
67+
).toJSON();
68+
expect(tree).toMatchSnapshot();
69+
});
70+
71+
it('should preserve user defined fontWeight', () => {
72+
const tree = renderer.create(
73+
<BpkText style={{ fontWeight: '900' }}>
74+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
75+
commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
76+
et magnis dis parturient montes, nascetur ridiculus mus.
77+
</BpkText>,
78+
).toJSON();
79+
expect(tree).toMatchSnapshot();
80+
});
81+
4982
it('should support overwriting styles', () => {
5083
const tree = renderer.create(
5184
<BpkText style={{ color: 'red' }}>

‎native/packages/react-native-bpk-component-text/src/BpkText.ios-test.js

+33
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,39 @@ describe('iOS', () => {
4646
expect(tree).toMatchSnapshot();
4747
});
4848

49+
it('should render correctly with `emphasize` prop', () => {
50+
const tree = renderer.create(
51+
<BpkText emphasize>
52+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
53+
commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
54+
et magnis dis parturient montes, nascetur ridiculus mus.
55+
</BpkText>,
56+
).toJSON();
57+
expect(tree).toMatchSnapshot();
58+
});
59+
60+
it('should render correctly with `emphasize` & `textStyle` equal to `xxl`', () => {
61+
const tree = renderer.create(
62+
<BpkText emphasize textStyle="xxl">
63+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
64+
commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
65+
et magnis dis parturient montes, nascetur ridiculus mus.
66+
</BpkText>,
67+
).toJSON();
68+
expect(tree).toMatchSnapshot();
69+
});
70+
71+
it('should ignore user defined fontWeight', () => {
72+
const tree = renderer.create(
73+
<BpkText style={{ fontWeight: '900' }}>
74+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
75+
commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
76+
et magnis dis parturient montes, nascetur ridiculus mus.
77+
</BpkText>,
78+
).toJSON();
79+
expect(tree).toMatchSnapshot();
80+
});
81+
4982
it('should support overwriting styles', () => {
5083
const tree = renderer.create(
5184
<BpkText style={{ color: 'red' }}>

‎native/packages/react-native-bpk-component-text/src/BpkText.js

+32-50
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,9 @@
1616
* limitations under the License.
1717
*/
1818

19-
import {
20-
Text,
21-
Platform,
22-
StyleSheet,
23-
} from 'react-native';
2419
import React from 'react';
2520
import PropTypes from 'prop-types';
21+
import { Text, Platform, StyleSheet } from 'react-native';
2622

2723
const IOS_TOKENS = require('bpk-tokens/tokens/ios/base.react.native.common.js');
2824
const ANDROID_TOKENS = require('bpk-tokens/tokens/android/base.react.native.common.js');
@@ -34,72 +30,58 @@ const tokens = Platform.select({
3430

3531
const TEXT_STYLES = ['xs', 'sm', 'base', 'lg', 'xl', 'xxl'];
3632

37-
const styleForTextStyle = (textStyle) => {
33+
const getAndroidFontFamily = fontWeight =>
34+
(fontWeight === '500' ? 'sans-serif-medium' : 'sans-serif');
35+
36+
const getStyleByTextStyle = (textStyle) => {
3837
const camelCasedStyle = textStyle[0].toUpperCase() + textStyle.slice(1);
3938

40-
const determineAndroidFontFamily = (fontWeight) => {
41-
switch (fontWeight) {
42-
case '500':
43-
return 'sans-serif-medium';
44-
case '400':
45-
default:
46-
return 'sans-serif';
47-
}
48-
};
49-
50-
return {
51-
fontSize: tokens[`text${camelCasedStyle}FontSize`],
52-
lineHeight: tokens[`text${camelCasedStyle}LineHeight`],
53-
fontWeight: Platform.OS === 'ios' ? tokens[`text${camelCasedStyle}FontWeight`] : undefined,
54-
color: tokens.colorGray900,
55-
fontFamily: Platform.OS === 'android' ?
56-
determineAndroidFontFamily(tokens[`text${camelCasedStyle}FontWeight`]) : 'System',
57-
};
39+
const color = tokens.colorGray700;
40+
const fontSize = tokens[`text${camelCasedStyle}FontSize`];
41+
const lineHeight = tokens[`text${camelCasedStyle}LineHeight`];
42+
const fontWeight = Platform.OS === 'ios' ? tokens[`text${camelCasedStyle}FontWeight`] : undefined;
43+
const androidFontFamily = getAndroidFontFamily(tokens[`text${camelCasedStyle}FontWeight`]);
44+
const fontFamily = Platform.OS === 'android' ? androidFontFamily : 'System';
45+
46+
return { fontSize, lineHeight, fontWeight, color, fontFamily };
5847
};
5948

6049
const styles = StyleSheet.create({
61-
xs: {
62-
...styleForTextStyle('xs'),
63-
},
64-
sm: {
65-
...styleForTextStyle('sm'),
66-
},
67-
base: {
68-
...styleForTextStyle('base'),
69-
},
70-
lg: {
71-
...styleForTextStyle('lg'),
72-
},
73-
xl: {
74-
...styleForTextStyle('xl'),
75-
},
76-
xxl: {
77-
...styleForTextStyle('xxl'),
78-
},
50+
xs: { ...getStyleByTextStyle('xs') },
51+
sm: { ...getStyleByTextStyle('sm') },
52+
base: { ...getStyleByTextStyle('base') },
53+
lg: { ...getStyleByTextStyle('lg') },
54+
xl: { ...getStyleByTextStyle('xl') },
55+
xxl: { ...getStyleByTextStyle('xxl') },
7956
});
8057

8158
const BpkText = (props) => {
82-
const { children, textStyle, style: innerStyle, ...rest } = props;
83-
const style = styles[textStyle];
84-
const finalStyles = [style];
59+
const { children, textStyle, style, emphasize, ...rest } = props;
8560

86-
if (innerStyle) {
87-
finalStyles.push(innerStyle);
61+
const emphasizedStyle = emphasize ? { fontWeight: '600' } : {};
62+
const styleClone = Object.assign({}, style);
63+
64+
if (Platform.OS === 'ios') {
65+
delete styleClone.fontWeight;
66+
67+
if (textStyle === 'xxl') {
68+
delete emphasizedStyle.fontWeight;
69+
}
8870
}
8971

90-
return (
91-
<Text style={finalStyles} {...rest}>{children}</Text>
92-
);
72+
return <Text style={[styles[textStyle], emphasizedStyle, styleClone]} {...rest}>{children}</Text>;
9373
};
9474

9575
BpkText.propTypes = {
9676
children: PropTypes.node.isRequired,
9777
textStyle: PropTypes.oneOf(TEXT_STYLES),
78+
emphasize: PropTypes.bool,
9879
style: Text.propTypes.style,
9980
};
10081

10182
BpkText.defaultProps = {
10283
textStyle: 'base',
84+
emphasize: false,
10385
style: {},
10486
};
10587

0 commit comments

Comments
 (0)