Skip to content

Commit df570e9

Browse files
tdeekenstdeekens
authored
feat(typography/text): to accept isItalic for text detail and body
This pull request adds the ability to specify an `isItalic` prop on our `Text.Detail` and `Text.Body` component. Sometime a recent design requires. ![2018-09-05 16 12 41](https://user-images.githubusercontent.com/1877073/45099247-1e00a600-b127-11e8-82a2-0ca5f63b392b.gif) I don't anticipate headings having a need for italic text soon. In the mean time I fixed the default messages which got escaped (since a recent version of React storybook).
1 parent d6e2d5c commit df570e9

File tree

5 files changed

+64
-22
lines changed

5 files changed

+64
-22
lines changed

‎src/components/typography/text/README.md

+19-17
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ Wraps the given text in the given HTML header `size`.
2424
| ------------- | ---------------- | :------: | -------------------- | ------- | -------------------------------------------------------------- |
2525
| `elementType` | `String` | ✅ | `['h1', 'h2', 'h3']` | - | - |
2626
| `children` | `PropTypes.node` | ✅ | - | - | - |
27-
| `truncate` | `Bool` | | - | `false` | Option for truncate content in case the screen has small width |
27+
| `truncate` | `Bool` | - | - | `false` | Option for truncate content in case the screen has small width |
2828

2929
#### Where to use
3030

@@ -44,10 +44,10 @@ Wraps the given text in the given HTML header `size`.
4444

4545
| Props | Type | Required | Values | Default |
4646
| ------------- | ---------------- | :------: | -------------- | ------- |
47-
| `elementType` | `String` | ✅ | `['h4', 'h5']` | |
48-
| `isBold` | `Boolean` | ✅ | | `false` |
49-
| `children` | `PropTypes.node` | ✅ | | |
50-
| `truncate` | `Bool` | | - | `false` |
47+
| `elementType` | `String` | ✅ | `['h4', 'h5']` | - |
48+
| `isBold` | `Boolean` | - | - | `false` |
49+
| `children` | `PropTypes.node` | ✅ | - | - |
50+
| `truncate` | `Bool` | - | - | `false` |
5151

5252
#### Where to use
5353

@@ -79,12 +79,13 @@ Wraps the given text in a `<p>` element, for normal content.
7979

8080
#### Properties
8181

82-
| Props | Type | Required | Values | Default |
83-
| ---------- | ---------------- | :------: | ---------------------------------------------------- | ------- |
84-
| `isBold` | `Boolean` | ✅ | | `false` |
85-
| `tone` | `String` | | `[''primary', 'secondary', 'positive', 'negative'']` | |
86-
| `children` | `PropTypes.node` | ✅ | | |
87-
| `truncate` | `Bool` | | - | `false` |
82+
| Props | Type | Required | Values | Default |
83+
| ---------- | ---------------- | :------: | -------------------------------------------------- | ------- |
84+
| `isBold` | `Boolean` | - | - | `false` |
85+
| `isItalic` | `Boolean` | - | - | `false` |
86+
| `tone` | `String` | - | `['primary', 'secondary', 'positive', 'negative']` | - |
87+
| `children` | `PropTypes.node` | ✅ | - | - |
88+
| `truncate` | `Bool` | - | - | `false` |
8889

8990
#### Where to use
9091

@@ -104,12 +105,13 @@ properly style the text.
104105

105106
#### Properties
106107

107-
| Props | Type | Required | Values | Default |
108-
| ---------- | ---------------- | :------: | --------------------------------------------------------------------------- | ------- |
109-
| `isBold` | `Boolean` | ✅ | | `false` |
110-
| `tone` | `String` | | `[''primary', 'secondary', 'positive', 'negative', 'inverted', 'warning'']` | |
111-
| `children` | `PropTypes.node` | ✅ | | |
112-
| `truncate` | `Bool` | | - | `false` |
108+
| Props | Type | Required | Values | Default |
109+
| ---------- | ---------------- | :------: | -------------------------------------------------------------------------- | ------- |
110+
| `isBold` | `Boolean` | - | - | `false` |
111+
| `isItalic` | `Boolean` | - | - | `false` |
112+
| `tone` | `String` | - | `['primary', 'secondary', 'positive', 'negative', 'inverted', 'warning'']` | - |
113+
| `children` | `PropTypes.node` | ✅ | - | - |
114+
| `truncate` | `Bool` | - | - | `false` |
113115

114116
#### Where to use
115117

‎src/components/typography/text/text.js

+5
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ const Body = props =>
6262
<span
6363
className={classnames(styles['body-text'], {
6464
[styles.bold]: props.isBold,
65+
[styles.italic]: props.isItalic,
6566
[styles[`${props.tone}`]]: props.tone,
6667
[styles.truncate]: props.truncate,
6768
})}
@@ -72,6 +73,7 @@ const Body = props =>
7273
<p
7374
className={classnames(styles['body-text'], {
7475
[styles.bold]: props.isBold,
76+
[styles.italic]: props.isItalic,
7577
[styles[`${props.tone}`]]: props.tone,
7678
[styles.truncate]: props.truncate,
7779
})}
@@ -82,6 +84,7 @@ const Body = props =>
8284
Body.displayName = 'TextBody';
8385
Body.propTypes = {
8486
isBold: PropTypes.bool,
87+
isItalic: PropTypes.bool,
8588
isInline: PropTypes.bool,
8689
tone: PropTypes.oneOf([
8790
'primary',
@@ -99,6 +102,7 @@ const Detail = props => (
99102
<small
100103
className={classnames({
101104
[styles.bold]: props.isBold,
105+
[styles.italic]: props.isItalic,
102106
[styles.inline]: props.isInline,
103107
[styles[`${props.tone}`]]: props.tone,
104108
[styles.truncate]: props.truncate,
@@ -110,6 +114,7 @@ const Detail = props => (
110114
Detail.displayName = 'TextDetail';
111115
Detail.propTypes = {
112116
isBold: PropTypes.bool,
117+
isItalic: PropTypes.bool,
113118
isInline: PropTypes.bool,
114119
tone: PropTypes.oneOf([
115120
'primary',

‎src/components/typography/text/text.mod.css

+4
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,10 @@ small {
7575
font-weight: bold;
7676
}
7777

78+
.italic {
79+
font-style: italic;
80+
}
81+
7882
.information {
7983
color: var(--color-blue);
8084
}

‎src/components/typography/text/text.spec.js

+30-1
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,20 @@ describe('<Body>', () => {
171171
expect(wrapper.text()).toMatch('Body');
172172
});
173173
});
174+
describe('with italic text', () => {
175+
beforeEach(() => {
176+
wrapper = shallow(<Text.Body isItalic={true}>{'Body'}</Text.Body>);
177+
});
178+
it('should render element tag p', () => {
179+
expect(wrapper.type()).toBe('p');
180+
});
181+
it('should have "italic" class', () => {
182+
expect(wrapper).toContainClass(styles.italic);
183+
});
184+
it('should render given text', () => {
185+
expect(wrapper.text()).toMatch('Body');
186+
});
187+
});
174188
describe('with tone', () => {
175189
beforeEach(() => {
176190
wrapper = shallow(<Text.Body tone="secondary">{'Detail'}</Text.Body>);
@@ -281,7 +295,22 @@ describe('<Detail>', () => {
281295
expect(wrapper).toHaveText('Detail');
282296
});
283297
});
284-
298+
describe('with italic text', () => {
299+
beforeEach(() => {
300+
wrapper = shallow(
301+
<Text.Detail isItalic={true}>{'Detail'}</Text.Detail>
302+
);
303+
});
304+
it('should render element tag small', () => {
305+
expect(wrapper.type()).toBe('small');
306+
});
307+
it('should have "italic" class', () => {
308+
expect(wrapper).toContainClass(styles.italic);
309+
});
310+
it('should render given text', () => {
311+
expect(wrapper).toHaveText('Detail');
312+
});
313+
});
285314
describe('with tone', () => {
286315
beforeEach(() => {
287316
wrapper = shallow(

‎src/components/typography/typography.story.js

+6-4
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ storiesOf('Typography/Text', module)
2121
elementType={select('Element type', ['h1', 'h2', 'h3'], 'h1')}
2222
truncate={boolean('truncate', false)}
2323
>
24-
{text('Text', 'Sample text <Headline>')}
24+
{text('Text', 'Sample text Headline')}
2525
</Text.Headline>
2626
</Section>
2727
))
@@ -40,7 +40,7 @@ storiesOf('Typography/Text', module)
4040
])}
4141
truncate={boolean('truncate', false)}
4242
>
43-
{text('Text', 'Sample text <Subheadline>')}
43+
{text('Text', 'Sample text Subheadline')}
4444
</Text.Subheadline>
4545
</Section>
4646
))
@@ -60,6 +60,7 @@ storiesOf('Typography/Text', module)
6060
<Section>
6161
<Text.Body
6262
isBold={boolean('bold', false)}
63+
isItalic={boolean('italic', false)}
6364
tone={select('Text tone', [
6465
'none',
6566
'primary',
@@ -71,14 +72,15 @@ storiesOf('Typography/Text', module)
7172
])}
7273
truncate={boolean('truncate', false)}
7374
>
74-
{text('Text', 'Sample text <Body>')}
75+
{text('Text', 'Sample text Body')}
7576
</Text.Body>
7677
</Section>
7778
))
7879
.add('Detail', () => (
7980
<Section>
8081
<Text.Detail
8182
isBold={boolean('bold', false)}
83+
isItalic={boolean('italic', false)}
8284
tone={select('Text tone', [
8385
'none',
8486
'primary',
@@ -90,7 +92,7 @@ storiesOf('Typography/Text', module)
9092
])}
9193
truncate={boolean('truncate', false)}
9294
>
93-
{text('Text', 'Sample text')}
95+
{text('Text', 'Sample text Detail')}
9496
</Text.Detail>
9597
</Section>
9698
));

0 commit comments

Comments
 (0)