add semi-bold text weight

cloudflare · Apr 18, 2017 · f885ae8 · f885ae8
1 parent 174d6ba
commit f885ae8
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 5 deletions.
diff --git a/packages/cf-component-text/example/basic/component.js b/packages/cf-component-text/example/basic/component.js
@@ -6,6 +6,7 @@ const TextComponent = () => (
  <p>Specify a <code>size</code></p>
  <Text size="normal">Hello World</Text>
  <Text size="small">Hello World</Text>
+ <Text size="normal" weight="semi-bold">Hello World</Text>
  <Text size="normal" weight="bold">Hello World</Text>
 
  <p>and/or an <code>align</code></p>

diff --git a/packages/cf-component-text/src/Text.js b/packages/cf-component-text/src/Text.js
@@ -1,6 +1,8 @@
 import React, { PropTypes } from 'react';
 import { createComponent } from 'cf-style-container';
-import capitalize from 'capitalize';
+import capitalizeWord from 'capitalize';
+
+const capitalize = str => str.split('-').map(w => capitalizeWord(w)).join('');
 
 const styles = ({ theme, size, weight, align, type, case: textCase }) => ({
  color: type && theme[`color${capitalize(type)}`],
@@ -28,7 +30,7 @@ class Text extends React.Component {
 
 Text.propTypes = {
  size: PropTypes.oneOf(['normal', 'small']),
- weight: PropTypes.oneOf(['normal', 'bold']),
+ weight: PropTypes.oneOf(['normal', 'semi-bold', 'bold']),
  align: PropTypes.oneOf(['start', 'center', 'justify', 'end']),
  type: PropTypes.oneOf(['info', 'success', 'warning', 'error', 'muted']),
  case: PropTypes.oneOf(['capitalize', 'titlecase', 'lowercase', 'uppercase']),

diff --git a/packages/cf-component-text/src/TextTheme.js b/packages/cf-component-text/src/TextTheme.js
@@ -2,7 +2,8 @@ export default baseTheme => ({
  fontSizeNormal: '1em',
  fontSizeSmall: '.8em',
  fontWeightNormal: 400,
- fontWeightBold: 600,
+ fontWeightBold: 700,
+ fontWeightSemiBold: 600,
  lineHeightSmall: 1.3,
  textAlignStart: 'left',
  textAlignCenter: 'center',

diff --git a/packages/cf-component-text/test/Text.js b/packages/cf-component-text/test/Text.js
@@ -31,7 +31,7 @@ test('should render small size', () => {
 test('should render bold size', () => {
  const Text = applyTheme(TextUnstyled, () => ({
  fontSizeNormal: '1rem',
- fontWeightBold: 600
+ fontWeightBold: 700
  }));
 
  const component = renderer.create(
@@ -40,6 +40,18 @@ test('should render bold size', () => {
  expect(component.toJSON()).toMatchSnapshot();
 });
 
+test('should render semi-bold size', () => {
+ const Text = applyTheme(TextUnstyled, () => ({
+ fontSizeNormal: '1rem',
+ fontWeightSemiBold: 600
+ }));
+
+ const component = renderer.create(
+ felaTestContext(<Text size="normal" weight="semi-bold">Hello</Text>)
+ );
+ expect(component.toJSON()).toMatchSnapshot();
+});
+
 test('should render align', () => {
  const Text = applyTheme(TextUnstyled, () => ({
  textAlignCenter: 'center'

diff --git a/packages/cf-component-text/test/__snapshots__/Text.js.snap b/packages/cf-component-text/test/__snapshots__/Text.js.snap
@@ -10,7 +10,7 @@ exports[`should render align 1`] = `
 
 exports[`should render bold size 1`] = `
 <div
- className="cf-z310y"
+ className="cf-e0qi9f"
 >
  Hello
 </div>
@@ -32,6 +32,14 @@ exports[`should render normal size 1`] = `
 </div>
 `;
 
+exports[`should render semi-bold size 1`] = `
+<div
+ className="cf-z310y"
+>
+ Hello
+</div>
+`;
+
 exports[`should render small size 1`] = `
 <div
  className="cf-xk5sq7"