From e4af76d73310b0e5b12c8926925be1dc495f49ba Mon Sep 17 00:00:00 2001 From: Mark Dalgleish Date: Thu, 25 Oct 2018 11:32:08 +1100 Subject: [PATCH] fix(Text): Make Text and Icon components responsive (#22) --- docs/src/App/App.js | 39 ++- docs/src/App/ComponentRoute/ComponentRoute.js | 15 +- docs/src/render.js | 11 + .../Alert/__snapshots__/Alert.test.js.snap | 64 ++-- .../Bullet/__snapshots__/Bullet.test.js.snap | 8 +- lib/components/Checkbox/Checkbox.docs.js | 11 + lib/components/Checkbox/Checkbox.js | 3 +- .../__snapshots__/Checkbox.test.js.snap | 300 ++++++++++-------- .../__snapshots__/ChecklistCard.test.js.snap | 156 ++++----- .../__snapshots__/FieldLabel.test.js.snap | 8 +- lib/components/FieldMessage/FieldMessage.js | 11 +- .../__snapshots__/FieldMessage.test.js.snap | 168 +++++----- lib/components/Radio/Radio.docs.js | 6 + .../Radio/__snapshots__/Radio.test.js.snap | 180 ++++++----- lib/components/Text/Text.js | 4 +- .../Text/__snapshots__/Text.test.js.snap | 48 +-- .../icons/ChevronIcon/ChevronIcon.docs.js | 7 + .../__snapshots__/ChevronIcon.test.js.snap | 156 ++++----- .../icons/ErrorIcon/ErrorIcon.docs.js | 7 + .../__snapshots__/ErrorIcon.test.js.snap | 60 ++-- lib/components/icons/Icon/Icon.css.js | 12 + lib/components/icons/Icon/Icon.js | 12 +- .../icons/InfoIcon/InfoIcon.docs.js | 7 + .../__snapshots__/InfoIcon.test.js.snap | 60 ++-- .../TickCircleIcon/TickCircleIcon.docs.js | 7 + .../__snapshots__/TickCircleIcon.test.js.snap | 60 ++-- .../icons/TickIcon/TickIcon.docs.js | 7 + .../__snapshots__/TickIcon.test.js.snap | 60 ++-- lib/components/private/examplesForIcon.js | 52 +++ .../private/getCheckboxRadioSize.js | 4 +- lib/test/utils/forEachTheme.js | 1 + lib/themes/jobStreet/atoms/atoms.js | 2 + .../jobStreet/atoms/font/fontFamily.css.js | 2 +- .../jobStreet/atoms/font/fontSize.css.js | 28 +- lib/themes/jobStreet/atoms/height.css.js | 4 + lib/themes/jobStreet/atoms/width.css.js | 4 + lib/themes/jobStreet/tokens/tokens.js | 26 +- lib/themes/seekAnz/atoms/atoms.js | 2 + .../seekAnz/atoms/font/fontFamily.css.js | 2 +- lib/themes/seekAnz/atoms/font/fontSize.css.js | 28 +- lib/themes/seekAnz/atoms/height.css.js | 4 + lib/themes/seekAnz/atoms/width.css.js | 4 + lib/themes/seekAnz/tokens/tokens.js | 26 +- lib/themes/seekAsia/atoms/atoms.js | 2 + .../seekAsia/atoms/font/fontFamily.css.js | 2 +- .../seekAsia/atoms/font/fontSize.css.js | 28 +- lib/themes/seekAsia/atoms/height.css.js | 4 + lib/themes/seekAsia/atoms/width.css.js | 4 + lib/themes/seekAsia/tokens/tokens.js | 26 +- .../fontSizeRulesForTokens.test.js.snap | 103 ++++++ .../sizeRulesForTokens.test.js.snap | 85 +++++ lib/themes/utils/createResponsiveRules.js | 15 + lib/themes/utils/fontSizeRulesForTokens.js | 60 ++++ .../utils/fontSizeRulesForTokens.test.js | 12 + lib/themes/utils/sizeRulesForTokens.js | 38 +++ lib/themes/utils/sizeRulesForTokens.test.js | 12 + lib/themes/wireframe/atoms/atoms.js | 2 + .../wireframe/atoms/font/fontFamily.css.js | 2 +- .../wireframe/atoms/font/fontSize.css.js | 28 +- lib/themes/wireframe/atoms/height.css.js | 4 + lib/themes/wireframe/atoms/width.css.js | 4 + lib/themes/wireframe/tokens/tokens.js | 26 +- 62 files changed, 1345 insertions(+), 788 deletions(-) create mode 100644 lib/components/icons/ChevronIcon/ChevronIcon.docs.js create mode 100644 lib/components/icons/ErrorIcon/ErrorIcon.docs.js create mode 100644 lib/components/icons/Icon/Icon.css.js create mode 100644 lib/components/icons/InfoIcon/InfoIcon.docs.js create mode 100644 lib/components/icons/TickCircleIcon/TickCircleIcon.docs.js create mode 100644 lib/components/icons/TickIcon/TickIcon.docs.js create mode 100644 lib/components/private/examplesForIcon.js create mode 100644 lib/themes/jobStreet/atoms/height.css.js create mode 100644 lib/themes/jobStreet/atoms/width.css.js create mode 100644 lib/themes/seekAnz/atoms/height.css.js create mode 100644 lib/themes/seekAnz/atoms/width.css.js create mode 100644 lib/themes/seekAsia/atoms/height.css.js create mode 100644 lib/themes/seekAsia/atoms/width.css.js create mode 100644 lib/themes/utils/__snapshots__/fontSizeRulesForTokens.test.js.snap create mode 100644 lib/themes/utils/__snapshots__/sizeRulesForTokens.test.js.snap create mode 100644 lib/themes/utils/createResponsiveRules.js create mode 100644 lib/themes/utils/fontSizeRulesForTokens.js create mode 100644 lib/themes/utils/fontSizeRulesForTokens.test.js create mode 100644 lib/themes/utils/sizeRulesForTokens.js create mode 100644 lib/themes/utils/sizeRulesForTokens.test.js create mode 100644 lib/themes/wireframe/atoms/height.css.js create mode 100644 lib/themes/wireframe/atoms/width.css.js diff --git a/docs/src/App/App.js b/docs/src/App/App.js index 314a3b8e1c0..04be5e42df4 100644 --- a/docs/src/App/App.js +++ b/docs/src/App/App.js @@ -14,6 +14,19 @@ import styles from './App.css.js'; const { ThemeProvider, Text, Box, BulletList, Bullet } = components; export default class App extends Component { + renderComponentRoute({ match }) { + return ; + } + + renderIconRoute({ match }) { + return ( + + ); + } + render() { return ( @@ -38,7 +51,7 @@ export default class App extends Component { Components - + {Object.keys(components) .filter(x => !/icon/i.test(x)) .sort() @@ -53,6 +66,24 @@ export default class App extends Component { ))} + + Icons + + + {Object.keys(components) + .filter(x => /icon/i.test(x) && x !== 'Icon') + .sort() + .map(iconName => ( + + + {iconName} + + + ))} +
@@ -64,7 +95,11 @@ export default class App extends Component { > +
diff --git a/docs/src/App/ComponentRoute/ComponentRoute.js b/docs/src/App/ComponentRoute/ComponentRoute.js index 07cf9349760..52b120075a0 100644 --- a/docs/src/App/ComponentRoute/ComponentRoute.js +++ b/docs/src/App/ComponentRoute/ComponentRoute.js @@ -43,14 +43,17 @@ const typeValueToString = option => { export default class ComponentRoute extends Component { static propTypes = { - match: PropTypes.object.isRequired + componentName: PropTypes.string.isRequired, + category: PropTypes.string }; render() { - const { match } = this.props; - const { componentName } = match.params; - const docs = require(`../../../../lib/components/${componentName}/${componentName}.docs.js`) - .default; + const { componentName, category } = this.props; + const docs = category + ? require(`../../../../lib/components/${category}/${componentName}/${componentName}.docs.js`) + .default + : require(`../../../../lib/components/${componentName}/${componentName}.docs.js`) + .default; const propTypes = parsePropTypes(docs.component); const options = Object.keys(propTypes).map(propName => ({ name: propName, @@ -61,7 +64,7 @@ export default class ComponentRoute extends Component { return ( - {match.params.componentName} + {componentName} {examples.length > 0 ? ( diff --git a/docs/src/render.js b/docs/src/render.js index 28d4d7df046..ed73869e1a8 100644 --- a/docs/src/render.js +++ b/docs/src/render.js @@ -41,12 +41,23 @@ export default ({ publicPath }) => { .filter(x => !/icon/i.test(x)) .sort(); + const iconNames = Object.keys(components) + .filter(x => /icon/i.test(x) && x !== 'Icon') + .sort(); + return { '/': template({ publicPath, url: '/' }), ...Object.assign( ...componentNames.map(componentName => { const location = `/components/${componentName}/`; + return { + [location]: template({ publicPath, location }) + }; + }), + ...iconNames.map(iconName => { + const location = `/icons/${iconName}/`; + return { [location]: template({ publicPath, location }) }; diff --git a/lib/components/Alert/__snapshots__/Alert.test.js.snap b/lib/components/Alert/__snapshots__/Alert.test.js.snap index 82a656cd757..2e71015d2ab 100644 --- a/lib/components/Alert/__snapshots__/Alert.test.js.snap +++ b/lib/components/Alert/__snapshots__/Alert.test.js.snap @@ -11,10 +11,10 @@ exports[`Alert Theme: jobStreet Tones critical 1`] = ` class="Alert__icon" > critical @@ -46,10 +46,10 @@ exports[`Alert Theme: jobStreet Tones info 1`] = ` class="Alert__icon" > @@ -68,7 +68,7 @@ exports[`Alert Theme: jobStreet Tones info 1`] = ` class="Text__block Box__root borderColor__default" > info @@ -89,10 +89,10 @@ exports[`Alert Theme: seekAnz Tones critical 1`] = ` class="Alert__icon" > critical @@ -124,10 +124,10 @@ exports[`Alert Theme: seekAnz Tones info 1`] = ` class="Alert__icon" > @@ -146,7 +146,7 @@ exports[`Alert Theme: seekAnz Tones info 1`] = ` class="Text__block Box__root borderColor__default" > info @@ -167,10 +167,10 @@ exports[`Alert Theme: seekAsia Tones critical 1`] = ` class="Alert__icon" > critical @@ -202,10 +202,10 @@ exports[`Alert Theme: seekAsia Tones info 1`] = ` class="Alert__icon" > @@ -224,7 +224,7 @@ exports[`Alert Theme: seekAsia Tones info 1`] = ` class="Text__block Box__root borderColor__default" > info @@ -245,10 +245,10 @@ exports[`Alert Theme: wireframe Tones critical 1`] = ` class="Alert__icon" > critical @@ -280,10 +280,10 @@ exports[`Alert Theme: wireframe Tones info 1`] = ` class="Alert__icon" > @@ -302,7 +302,7 @@ exports[`Alert Theme: wireframe Tones info 1`] = ` class="Text__block Box__root borderColor__default" > info diff --git a/lib/components/Bullet/__snapshots__/Bullet.test.js.snap b/lib/components/Bullet/__snapshots__/Bullet.test.js.snap index 39a745df524..e069155aef2 100644 --- a/lib/components/Bullet/__snapshots__/Bullet.test.js.snap +++ b/lib/components/Bullet/__snapshots__/Bullet.test.js.snap @@ -6,7 +6,7 @@ exports[`Bullet Theme: jobStreet Default 1`] = ` style="margin-left: 1.3em;" > Bullet @@ -19,7 +19,7 @@ exports[`Bullet Theme: seekAnz Default 1`] = ` style="margin-left: 1.3em;" > Bullet @@ -32,7 +32,7 @@ exports[`Bullet Theme: seekAsia Default 1`] = ` style="margin-left: 1.3em;" > Bullet @@ -45,7 +45,7 @@ exports[`Bullet Theme: wireframe Default 1`] = ` style="margin-left: 1.3em;" > Bullet diff --git a/lib/components/Checkbox/Checkbox.docs.js b/lib/components/Checkbox/Checkbox.docs.js index a56678dba92..95f54681300 100644 --- a/lib/components/Checkbox/Checkbox.docs.js +++ b/lib/components/Checkbox/Checkbox.docs.js @@ -9,6 +9,17 @@ export default { examples: [ { label: 'Standard Checkbox', + render: ({ id }) => ( + + ) + }, + { + label: 'Checkbox without Message Placeholder', render: ({ id }) => ( Label @@ -74,14 +74,15 @@ exports[`Checkbox Theme: jobStreet Checked 1`] = ` tabindex="-1" >
+
@@ -132,10 +133,10 @@ exports[`Checkbox Theme: jobStreet Children when checked 1`] = ` style="opacity: 0;" /> Label @@ -173,14 +174,15 @@ exports[`Checkbox Theme: jobStreet Children when checked 1`] = ` tabindex="-1" >
+
@@ -230,10 +232,10 @@ exports[`Checkbox Theme: jobStreet Children when unchecked 1`] = ` style="opacity: 0;" /> Label @@ -271,14 +273,15 @@ exports[`Checkbox Theme: jobStreet Children when unchecked 1`] = ` tabindex="-1" >
+
@@ -328,10 +331,10 @@ exports[`Checkbox Theme: jobStreet Unchecked 1`] = ` style="opacity: 0;" /> Label @@ -359,14 +362,15 @@ exports[`Checkbox Theme: jobStreet Unchecked 1`] = ` tabindex="-1" >
+
@@ -417,10 +421,10 @@ exports[`Checkbox Theme: jobStreet With message 1`] = ` style="opacity: 1;" /> Label @@ -458,24 +462,25 @@ exports[`Checkbox Theme: jobStreet With message 1`] = ` tabindex="-1" >
+
-
+
Message
@@ -528,10 +533,10 @@ exports[`Checkbox Theme: seekAnz Checked 1`] = ` style="opacity: 0;" /> Label @@ -559,14 +564,15 @@ exports[`Checkbox Theme: seekAnz Checked 1`] = ` tabindex="-1" >
+
@@ -617,10 +623,10 @@ exports[`Checkbox Theme: seekAnz Children when checked 1`] = ` style="opacity: 0;" /> Label @@ -658,14 +664,15 @@ exports[`Checkbox Theme: seekAnz Children when checked 1`] = ` tabindex="-1" >
+
@@ -715,10 +722,10 @@ exports[`Checkbox Theme: seekAnz Children when unchecked 1`] = ` style="opacity: 0;" /> Label @@ -756,14 +763,15 @@ exports[`Checkbox Theme: seekAnz Children when unchecked 1`] = ` tabindex="-1" >
+
@@ -813,10 +821,10 @@ exports[`Checkbox Theme: seekAnz Unchecked 1`] = ` style="opacity: 0;" /> Label @@ -844,14 +852,15 @@ exports[`Checkbox Theme: seekAnz Unchecked 1`] = ` tabindex="-1" >
+
@@ -902,10 +911,10 @@ exports[`Checkbox Theme: seekAnz With message 1`] = ` style="opacity: 1;" /> Label @@ -943,24 +952,25 @@ exports[`Checkbox Theme: seekAnz With message 1`] = ` tabindex="-1" >
+
-
+
Message
@@ -1013,10 +1023,10 @@ exports[`Checkbox Theme: seekAsia Checked 1`] = ` style="opacity: 0;" /> Label @@ -1044,14 +1054,15 @@ exports[`Checkbox Theme: seekAsia Checked 1`] = ` tabindex="-1" >
+
@@ -1102,10 +1113,10 @@ exports[`Checkbox Theme: seekAsia Children when checked 1`] = ` style="opacity: 0;" /> Label @@ -1143,14 +1154,15 @@ exports[`Checkbox Theme: seekAsia Children when checked 1`] = ` tabindex="-1" >
+
@@ -1200,10 +1212,10 @@ exports[`Checkbox Theme: seekAsia Children when unchecked 1`] = ` style="opacity: 0;" /> Label @@ -1241,14 +1253,15 @@ exports[`Checkbox Theme: seekAsia Children when unchecked 1`] = ` tabindex="-1" >
+
@@ -1298,10 +1311,10 @@ exports[`Checkbox Theme: seekAsia Unchecked 1`] = ` style="opacity: 0;" /> Label @@ -1329,14 +1342,15 @@ exports[`Checkbox Theme: seekAsia Unchecked 1`] = ` tabindex="-1" >
+
@@ -1387,10 +1401,10 @@ exports[`Checkbox Theme: seekAsia With message 1`] = ` style="opacity: 1;" /> Label @@ -1428,24 +1442,25 @@ exports[`Checkbox Theme: seekAsia With message 1`] = ` tabindex="-1" >
+
-
+
Message
@@ -1498,10 +1513,10 @@ exports[`Checkbox Theme: wireframe Checked 1`] = ` style="opacity: 0;" /> Label @@ -1529,14 +1544,15 @@ exports[`Checkbox Theme: wireframe Checked 1`] = ` tabindex="-1" >
+
@@ -1587,10 +1603,10 @@ exports[`Checkbox Theme: wireframe Children when checked 1`] = ` style="opacity: 0;" /> Label @@ -1628,14 +1644,15 @@ exports[`Checkbox Theme: wireframe Children when checked 1`] = ` tabindex="-1" >
+
@@ -1685,10 +1702,10 @@ exports[`Checkbox Theme: wireframe Children when unchecked 1`] = ` style="opacity: 0;" /> Label @@ -1726,14 +1743,15 @@ exports[`Checkbox Theme: wireframe Children when unchecked 1`] = ` tabindex="-1" >
+
@@ -1783,10 +1801,10 @@ exports[`Checkbox Theme: wireframe Unchecked 1`] = ` style="opacity: 0;" /> Label @@ -1814,14 +1832,15 @@ exports[`Checkbox Theme: wireframe Unchecked 1`] = ` tabindex="-1" >
+
@@ -1872,10 +1891,10 @@ exports[`Checkbox Theme: wireframe With message 1`] = ` style="opacity: 1;" /> Label @@ -1913,24 +1932,25 @@ exports[`Checkbox Theme: wireframe With message 1`] = ` tabindex="-1" >
+
-
+
Message
diff --git a/lib/components/ChecklistCard/__snapshots__/ChecklistCard.test.js.snap b/lib/components/ChecklistCard/__snapshots__/ChecklistCard.test.js.snap index 8eeddce4a40..eb7835ffa70 100644 --- a/lib/components/ChecklistCard/__snapshots__/ChecklistCard.test.js.snap +++ b/lib/components/ChecklistCard/__snapshots__/ChecklistCard.test.js.snap @@ -45,10 +45,10 @@ exports[`ChecklistCard Theme: jobStreet Default 1`] = ` style="opacity: 0;" /> Label 1 @@ -76,14 +76,15 @@ exports[`ChecklistCard Theme: jobStreet Default 1`] = ` tabindex="-1" >
+
@@ -137,10 +138,10 @@ exports[`ChecklistCard Theme: jobStreet Default 1`] = ` style="opacity: 0;" /> Label 2 @@ -168,14 +169,15 @@ exports[`ChecklistCard Theme: jobStreet Default 1`] = ` tabindex="-1" >
+
@@ -229,10 +231,10 @@ exports[`ChecklistCard Theme: jobStreet Default 1`] = ` style="opacity: 0;" /> Label 3 @@ -260,14 +262,15 @@ exports[`ChecklistCard Theme: jobStreet Default 1`] = ` tabindex="-1" >
+
@@ -321,10 +324,10 @@ exports[`ChecklistCard Theme: seekAnz Default 1`] = ` style="opacity: 0;" /> Label 1 @@ -352,14 +355,15 @@ exports[`ChecklistCard Theme: seekAnz Default 1`] = ` tabindex="-1" >
+
@@ -413,10 +417,10 @@ exports[`ChecklistCard Theme: seekAnz Default 1`] = ` style="opacity: 0;" /> Label 2 @@ -444,14 +448,15 @@ exports[`ChecklistCard Theme: seekAnz Default 1`] = ` tabindex="-1" >
+
@@ -505,10 +510,10 @@ exports[`ChecklistCard Theme: seekAnz Default 1`] = ` style="opacity: 0;" /> Label 3 @@ -536,14 +541,15 @@ exports[`ChecklistCard Theme: seekAnz Default 1`] = ` tabindex="-1" >
+
@@ -597,10 +603,10 @@ exports[`ChecklistCard Theme: seekAsia Default 1`] = ` style="opacity: 0;" /> Label 1 @@ -628,14 +634,15 @@ exports[`ChecklistCard Theme: seekAsia Default 1`] = ` tabindex="-1" >
+
@@ -689,10 +696,10 @@ exports[`ChecklistCard Theme: seekAsia Default 1`] = ` style="opacity: 0;" /> Label 2 @@ -720,14 +727,15 @@ exports[`ChecklistCard Theme: seekAsia Default 1`] = ` tabindex="-1" >
+
@@ -781,10 +789,10 @@ exports[`ChecklistCard Theme: seekAsia Default 1`] = ` style="opacity: 0;" /> Label 3 @@ -812,14 +820,15 @@ exports[`ChecklistCard Theme: seekAsia Default 1`] = ` tabindex="-1" >
+
@@ -873,10 +882,10 @@ exports[`ChecklistCard Theme: wireframe Default 1`] = ` style="opacity: 0;" /> Label 1 @@ -904,14 +913,15 @@ exports[`ChecklistCard Theme: wireframe Default 1`] = ` tabindex="-1" >
+
@@ -965,10 +975,10 @@ exports[`ChecklistCard Theme: wireframe Default 1`] = ` style="opacity: 0;" /> Label 2 @@ -996,14 +1006,15 @@ exports[`ChecklistCard Theme: wireframe Default 1`] = ` tabindex="-1" >
+
@@ -1057,10 +1068,10 @@ exports[`ChecklistCard Theme: wireframe Default 1`] = ` style="opacity: 0;" /> Label 3 @@ -1088,14 +1099,15 @@ exports[`ChecklistCard Theme: wireframe Default 1`] = ` tabindex="-1" >
+
diff --git a/lib/components/FieldLabel/__snapshots__/FieldLabel.test.js.snap b/lib/components/FieldLabel/__snapshots__/FieldLabel.test.js.snap index 2022a6f38e4..c071a0a6f28 100644 --- a/lib/components/FieldLabel/__snapshots__/FieldLabel.test.js.snap +++ b/lib/components/FieldLabel/__snapshots__/FieldLabel.test.js.snap @@ -5,7 +5,7 @@ exports[`FieldLabel Theme: jobStreet Default 1`] = ` class="Text__block Box__root borderColor__default" > Label @@ -17,7 +17,7 @@ exports[`FieldLabel Theme: seekAnz Default 1`] = ` class="Text__block Box__root borderColor__default" > Label @@ -29,7 +29,7 @@ exports[`FieldLabel Theme: seekAsia Default 1`] = ` class="Text__block Box__root borderColor__default" > Label @@ -41,7 +41,7 @@ exports[`FieldLabel Theme: wireframe Default 1`] = ` class="Text__block Box__root borderColor__default" > Label diff --git a/lib/components/FieldMessage/FieldMessage.js b/lib/components/FieldMessage/FieldMessage.js index 190f6eb825f..561f8d50cfc 100644 --- a/lib/components/FieldMessage/FieldMessage.js +++ b/lib/components/FieldMessage/FieldMessage.js @@ -44,15 +44,10 @@ export default withTheme( return message === false ? null : (
+ {/* This element acts as a min-height, preserving vertical space for the message: */} +
{renderIcon(theme, tone)} -
- {message} -
+
{message}
); diff --git a/lib/components/FieldMessage/__snapshots__/FieldMessage.test.js.snap b/lib/components/FieldMessage/__snapshots__/FieldMessage.test.js.snap index 8af339de348..da9d14a48cb 100644 --- a/lib/components/FieldMessage/__snapshots__/FieldMessage.test.js.snap +++ b/lib/components/FieldMessage/__snapshots__/FieldMessage.test.js.snap @@ -6,24 +6,25 @@ exports[`FieldMessage Theme: jobStreet Critical 1`] = ` tabindex="-1" >
+
-
+
Message
@@ -37,14 +38,15 @@ exports[`FieldMessage Theme: jobStreet Default 1`] = ` tabindex="-1" >
+ class="height__standardText" + /> +
Message
@@ -58,14 +60,15 @@ exports[`FieldMessage Theme: jobStreet Empty 1`] = ` tabindex="-1" >
+
@@ -79,24 +82,25 @@ exports[`FieldMessage Theme: jobStreet Positive 1`] = ` tabindex="-1" >
+
-
+
Message
@@ -110,24 +114,25 @@ exports[`FieldMessage Theme: seekAnz Critical 1`] = ` tabindex="-1" >
+
-
+
Message
@@ -141,14 +146,15 @@ exports[`FieldMessage Theme: seekAnz Default 1`] = ` tabindex="-1" >
+ class="height__standardText" + /> +
Message
@@ -162,14 +168,15 @@ exports[`FieldMessage Theme: seekAnz Empty 1`] = ` tabindex="-1" >
+
@@ -183,24 +190,25 @@ exports[`FieldMessage Theme: seekAnz Positive 1`] = ` tabindex="-1" >
+
-
+
Message
@@ -214,24 +222,25 @@ exports[`FieldMessage Theme: seekAsia Critical 1`] = ` tabindex="-1" >
+
-
+
Message
@@ -245,14 +254,15 @@ exports[`FieldMessage Theme: seekAsia Default 1`] = ` tabindex="-1" >
+ class="height__standardText" + /> +
Message
@@ -266,14 +276,15 @@ exports[`FieldMessage Theme: seekAsia Empty 1`] = ` tabindex="-1" >
+
@@ -287,24 +298,25 @@ exports[`FieldMessage Theme: seekAsia Positive 1`] = ` tabindex="-1" >
+
-
+
Message
@@ -318,24 +330,25 @@ exports[`FieldMessage Theme: wireframe Critical 1`] = ` tabindex="-1" >
+
-
+
Message
@@ -349,14 +362,15 @@ exports[`FieldMessage Theme: wireframe Default 1`] = ` tabindex="-1" >
+ class="height__standardText" + /> +
Message
@@ -370,14 +384,15 @@ exports[`FieldMessage Theme: wireframe Empty 1`] = ` tabindex="-1" >
+
@@ -391,24 +406,25 @@ exports[`FieldMessage Theme: wireframe Positive 1`] = ` tabindex="-1" >
+
-
+
Message
diff --git a/lib/components/Radio/Radio.docs.js b/lib/components/Radio/Radio.docs.js index ca192efb900..d686f7100c6 100644 --- a/lib/components/Radio/Radio.docs.js +++ b/lib/components/Radio/Radio.docs.js @@ -8,6 +8,12 @@ export default { examples: [ { label: 'Standard Radio Button', + render: ({ id }) => ( + + ) + }, + { + label: 'Radio Button without Message Placeholder', render: ({ id }) => ( Label @@ -65,14 +65,15 @@ exports[`Radio Theme: jobStreet Checked 1`] = ` tabindex="-1" >
+
@@ -128,7 +129,7 @@ exports[`Radio Theme: jobStreet Children when checked 1`] = ` class="Text__block Box__root borderColor__default" > Label @@ -155,14 +156,15 @@ exports[`Radio Theme: jobStreet Children when checked 1`] = ` tabindex="-1" >
+
@@ -217,7 +219,7 @@ exports[`Radio Theme: jobStreet Children when unchecked 1`] = ` class="Text__block Box__root borderColor__default" > Label @@ -244,14 +246,15 @@ exports[`Radio Theme: jobStreet Children when unchecked 1`] = ` tabindex="-1" >
+
@@ -306,7 +309,7 @@ exports[`Radio Theme: jobStreet Unchecked 1`] = ` class="Text__block Box__root borderColor__default" > Label @@ -323,14 +326,15 @@ exports[`Radio Theme: jobStreet Unchecked 1`] = ` tabindex="-1" >
+
@@ -386,7 +390,7 @@ exports[`Radio Theme: jobStreet With message 1`] = ` class="Text__block Box__root borderColor__default" > Label @@ -413,24 +417,25 @@ exports[`Radio Theme: jobStreet With message 1`] = ` tabindex="-1" >
+
-
+
Message
@@ -488,7 +493,7 @@ exports[`Radio Theme: seekAnz Checked 1`] = ` class="Text__block Box__root borderColor__default" > Label @@ -505,14 +510,15 @@ exports[`Radio Theme: seekAnz Checked 1`] = ` tabindex="-1" >
+
@@ -568,7 +574,7 @@ exports[`Radio Theme: seekAnz Children when checked 1`] = ` class="Text__block Box__root borderColor__default" > Label @@ -595,14 +601,15 @@ exports[`Radio Theme: seekAnz Children when checked 1`] = ` tabindex="-1" >
+
@@ -657,7 +664,7 @@ exports[`Radio Theme: seekAnz Children when unchecked 1`] = ` class="Text__block Box__root borderColor__default" > Label @@ -684,14 +691,15 @@ exports[`Radio Theme: seekAnz Children when unchecked 1`] = ` tabindex="-1" >
+
@@ -746,7 +754,7 @@ exports[`Radio Theme: seekAnz Unchecked 1`] = ` class="Text__block Box__root borderColor__default" > Label @@ -763,14 +771,15 @@ exports[`Radio Theme: seekAnz Unchecked 1`] = ` tabindex="-1" >
+
@@ -826,7 +835,7 @@ exports[`Radio Theme: seekAnz With message 1`] = ` class="Text__block Box__root borderColor__default" > Label @@ -853,24 +862,25 @@ exports[`Radio Theme: seekAnz With message 1`] = ` tabindex="-1" >
+
-
+
Message
@@ -928,7 +938,7 @@ exports[`Radio Theme: seekAsia Checked 1`] = ` class="Text__block Box__root borderColor__default" > Label @@ -945,14 +955,15 @@ exports[`Radio Theme: seekAsia Checked 1`] = ` tabindex="-1" >
+
@@ -1008,7 +1019,7 @@ exports[`Radio Theme: seekAsia Children when checked 1`] = ` class="Text__block Box__root borderColor__default" > Label @@ -1035,14 +1046,15 @@ exports[`Radio Theme: seekAsia Children when checked 1`] = ` tabindex="-1" >
+
@@ -1097,7 +1109,7 @@ exports[`Radio Theme: seekAsia Children when unchecked 1`] = ` class="Text__block Box__root borderColor__default" > Label @@ -1124,14 +1136,15 @@ exports[`Radio Theme: seekAsia Children when unchecked 1`] = ` tabindex="-1" >
+
@@ -1186,7 +1199,7 @@ exports[`Radio Theme: seekAsia Unchecked 1`] = ` class="Text__block Box__root borderColor__default" > Label @@ -1203,14 +1216,15 @@ exports[`Radio Theme: seekAsia Unchecked 1`] = ` tabindex="-1" >
+
@@ -1266,7 +1280,7 @@ exports[`Radio Theme: seekAsia With message 1`] = ` class="Text__block Box__root borderColor__default" > Label @@ -1293,24 +1307,25 @@ exports[`Radio Theme: seekAsia With message 1`] = ` tabindex="-1" >
+
-
+
Message
@@ -1368,7 +1383,7 @@ exports[`Radio Theme: wireframe Checked 1`] = ` class="Text__block Box__root borderColor__default" > Label @@ -1385,14 +1400,15 @@ exports[`Radio Theme: wireframe Checked 1`] = ` tabindex="-1" >
+
@@ -1448,7 +1464,7 @@ exports[`Radio Theme: wireframe Children when checked 1`] = ` class="Text__block Box__root borderColor__default" > Label @@ -1475,14 +1491,15 @@ exports[`Radio Theme: wireframe Children when checked 1`] = ` tabindex="-1" >
+
@@ -1537,7 +1554,7 @@ exports[`Radio Theme: wireframe Children when unchecked 1`] = ` class="Text__block Box__root borderColor__default" > Label @@ -1564,14 +1581,15 @@ exports[`Radio Theme: wireframe Children when unchecked 1`] = ` tabindex="-1" >
+
@@ -1626,7 +1644,7 @@ exports[`Radio Theme: wireframe Unchecked 1`] = ` class="Text__block Box__root borderColor__default" > Label @@ -1643,14 +1661,15 @@ exports[`Radio Theme: wireframe Unchecked 1`] = ` tabindex="-1" >
+
@@ -1706,7 +1725,7 @@ exports[`Radio Theme: wireframe With message 1`] = ` class="Text__block Box__root borderColor__default" > Label @@ -1733,24 +1752,25 @@ exports[`Radio Theme: wireframe With message 1`] = ` tabindex="-1" >
+
-
+
Message
diff --git a/lib/components/Text/Text.js b/lib/components/Text/Text.js index f8292056541..c9357d5794f 100644 --- a/lib/components/Text/Text.js +++ b/lib/components/Text/Text.js @@ -25,7 +25,7 @@ export default withTheme( }; static defaultProps = { - size: 'body', + size: 'standard', color: 'neutral', weight: 'regular', baseline: true @@ -61,7 +61,7 @@ export default withTheme( className={classnames({ [styles.block]: true, [theme.atoms.color[color]]: color, - [theme.atoms.fontFamily.body]: true, + [theme.atoms.fontFamily.text]: true, [theme.atoms.fontSize[size]]: size, [theme.atoms.fontWeight[weight]]: weight })} diff --git a/lib/components/Text/__snapshots__/Text.test.js.snap b/lib/components/Text/__snapshots__/Text.test.js.snap index ec35bb942f4..49385646c9f 100644 --- a/lib/components/Text/__snapshots__/Text.test.js.snap +++ b/lib/components/Text/__snapshots__/Text.test.js.snap @@ -5,7 +5,7 @@ exports[`Text Theme: jobStreet Baseline disabled 1`] = ` class="Text__block Box__root borderColor__default" > Children @@ -18,7 +18,7 @@ exports[`Text Theme: jobStreet Color 1`] = ` class="Text__block Box__root borderColor__default" > Children @@ -30,7 +30,7 @@ exports[`Text Theme: jobStreet Default 1`] = ` class="Text__block Box__root borderColor__default" > Children @@ -42,7 +42,7 @@ exports[`Text Theme: jobStreet List item 1`] = ` class="Text__block Text__listItem Box__root borderColor__default" > Children @@ -54,7 +54,7 @@ exports[`Text Theme: jobStreet Size 1`] = ` class="Text__block Box__root borderColor__default" > Children @@ -66,7 +66,7 @@ exports[`Text Theme: jobStreet Weight 1`] = ` class="Text__block Box__root borderColor__default" > Children @@ -78,7 +78,7 @@ exports[`Text Theme: seekAnz Baseline disabled 1`] = ` class="Text__block Box__root borderColor__default" > Children @@ -91,7 +91,7 @@ exports[`Text Theme: seekAnz Color 1`] = ` class="Text__block Box__root borderColor__default" > Children @@ -103,7 +103,7 @@ exports[`Text Theme: seekAnz Default 1`] = ` class="Text__block Box__root borderColor__default" > Children @@ -115,7 +115,7 @@ exports[`Text Theme: seekAnz List item 1`] = ` class="Text__block Text__listItem Box__root borderColor__default" > Children @@ -127,7 +127,7 @@ exports[`Text Theme: seekAnz Size 1`] = ` class="Text__block Box__root borderColor__default" > Children @@ -139,7 +139,7 @@ exports[`Text Theme: seekAnz Weight 1`] = ` class="Text__block Box__root borderColor__default" > Children @@ -151,7 +151,7 @@ exports[`Text Theme: seekAsia Baseline disabled 1`] = ` class="Text__block Box__root borderColor__default" > Children @@ -164,7 +164,7 @@ exports[`Text Theme: seekAsia Color 1`] = ` class="Text__block Box__root borderColor__default" > Children @@ -176,7 +176,7 @@ exports[`Text Theme: seekAsia Default 1`] = ` class="Text__block Box__root borderColor__default" > Children @@ -188,7 +188,7 @@ exports[`Text Theme: seekAsia List item 1`] = ` class="Text__block Text__listItem Box__root borderColor__default" > Children @@ -200,7 +200,7 @@ exports[`Text Theme: seekAsia Size 1`] = ` class="Text__block Box__root borderColor__default" > Children @@ -212,7 +212,7 @@ exports[`Text Theme: seekAsia Weight 1`] = ` class="Text__block Box__root borderColor__default" > Children @@ -224,7 +224,7 @@ exports[`Text Theme: wireframe Baseline disabled 1`] = ` class="Text__block Box__root borderColor__default" > Children @@ -237,7 +237,7 @@ exports[`Text Theme: wireframe Color 1`] = ` class="Text__block Box__root borderColor__default" > Children @@ -249,7 +249,7 @@ exports[`Text Theme: wireframe Default 1`] = ` class="Text__block Box__root borderColor__default" > Children @@ -261,7 +261,7 @@ exports[`Text Theme: wireframe List item 1`] = ` class="Text__block Text__listItem Box__root borderColor__default" > Children @@ -273,7 +273,7 @@ exports[`Text Theme: wireframe Size 1`] = ` class="Text__block Box__root borderColor__default" > Children @@ -285,7 +285,7 @@ exports[`Text Theme: wireframe Weight 1`] = ` class="Text__block Box__root borderColor__default" > Children diff --git a/lib/components/icons/ChevronIcon/ChevronIcon.docs.js b/lib/components/icons/ChevronIcon/ChevronIcon.docs.js new file mode 100644 index 00000000000..25dcd1ff1a7 --- /dev/null +++ b/lib/components/icons/ChevronIcon/ChevronIcon.docs.js @@ -0,0 +1,7 @@ +import ChevronIcon from './ChevronIcon'; +import examplesForIcon from '../../private/examplesForIcon'; + +export default { + component: ChevronIcon, + examples: examplesForIcon(ChevronIcon) +}; diff --git a/lib/components/icons/ChevronIcon/__snapshots__/ChevronIcon.test.js.snap b/lib/components/icons/ChevronIcon/__snapshots__/ChevronIcon.test.js.snap index a36dcdb8997..ca40406a876 100644 --- a/lib/components/icons/ChevronIcon/__snapshots__/ChevronIcon.test.js.snap +++ b/lib/components/icons/ChevronIcon/__snapshots__/ChevronIcon.test.js.snap @@ -2,10 +2,10 @@ exports[`ChevronIcon Theme: jobStreet Default 1`] = ` @@ -23,10 +23,10 @@ exports[`InfoIcon Theme: jobStreet Default 1`] = ` exports[`InfoIcon Theme: jobStreet Inline 1`] = ` @@ -44,10 +44,10 @@ exports[`InfoIcon Theme: jobStreet Inline 1`] = ` exports[`InfoIcon Theme: jobStreet Sized 1`] = ` @@ -65,10 +65,10 @@ exports[`InfoIcon Theme: jobStreet Sized 1`] = ` exports[`InfoIcon Theme: seekAnz Default 1`] = ` @@ -86,7 +86,7 @@ exports[`InfoIcon Theme: seekAnz Default 1`] = ` exports[`InfoIcon Theme: seekAnz Inline 1`] = ` @@ -128,10 +128,10 @@ exports[`InfoIcon Theme: seekAnz Sized 1`] = ` exports[`InfoIcon Theme: seekAsia Default 1`] = ` @@ -149,7 +149,7 @@ exports[`InfoIcon Theme: seekAsia Default 1`] = ` exports[`InfoIcon Theme: seekAsia Inline 1`] = ` @@ -191,10 +191,10 @@ exports[`InfoIcon Theme: seekAsia Sized 1`] = ` exports[`InfoIcon Theme: wireframe Default 1`] = ` @@ -212,7 +212,7 @@ exports[`InfoIcon Theme: wireframe Default 1`] = ` exports[`InfoIcon Theme: wireframe Inline 1`] = ` diff --git a/lib/components/icons/TickCircleIcon/TickCircleIcon.docs.js b/lib/components/icons/TickCircleIcon/TickCircleIcon.docs.js new file mode 100644 index 00000000000..de88545b92d --- /dev/null +++ b/lib/components/icons/TickCircleIcon/TickCircleIcon.docs.js @@ -0,0 +1,7 @@ +import TickCircleIcon from './TickCircleIcon'; +import examplesForIcon from '../../private/examplesForIcon'; + +export default { + component: TickCircleIcon, + examples: examplesForIcon(TickCircleIcon) +}; diff --git a/lib/components/icons/TickCircleIcon/__snapshots__/TickCircleIcon.test.js.snap b/lib/components/icons/TickCircleIcon/__snapshots__/TickCircleIcon.test.js.snap index 291a87ecd23..e16cbea4de5 100644 --- a/lib/components/icons/TickCircleIcon/__snapshots__/TickCircleIcon.test.js.snap +++ b/lib/components/icons/TickCircleIcon/__snapshots__/TickCircleIcon.test.js.snap @@ -2,10 +2,10 @@ exports[`TickCircleIcon Theme: jobStreet Default 1`] = ` { + return [ + { + label: 'Standard', + render: () => ( +
+ + Standard text +
+ ) + }, + { + label: 'Standard Inline', + render: () => ( + + Standard + + text + + ) + }, + { + label: 'Large', + render: () => ( +
+ + + Standard text + +
+ ) + }, + { + label: 'Large Inline', + render: () => ( + + Large + + text + + ) + } + ]; +}; diff --git a/lib/components/private/getCheckboxRadioSize.js b/lib/components/private/getCheckboxRadioSize.js index e9d21d84835..01290893452 100644 --- a/lib/components/private/getCheckboxRadioSize.js +++ b/lib/components/private/getCheckboxRadioSize.js @@ -1,5 +1,7 @@ export default theme => { - const scale = theme.tokens.type.body.size / 28; + // We currently don't support responsive checkboxes and + // radio buttons, but nobody actually needs it (so far) + const scale = theme.tokens.text.standard.mobile.size / 28; const rows = Math.round(theme.tokens.interactionRows * scale); return rows * theme.tokens.rowHeight; diff --git a/lib/test/utils/forEachTheme.js b/lib/test/utils/forEachTheme.js index 0494a47525d..4f1c088b3de 100644 --- a/lib/test/utils/forEachTheme.js +++ b/lib/test/utils/forEachTheme.js @@ -7,6 +7,7 @@ export default callback => { each(themes, theme => { describe(`Theme: ${theme.name}`, () => { callback({ + theme, ThemeProvider: props => }); }); diff --git a/lib/themes/jobStreet/atoms/atoms.js b/lib/themes/jobStreet/atoms/atoms.js index 867645e6564..0df290d5c44 100644 --- a/lib/themes/jobStreet/atoms/atoms.js +++ b/lib/themes/jobStreet/atoms/atoms.js @@ -14,6 +14,7 @@ export { default as color } from './color.css.js'; export { default as fill } from './fill.css.js'; export { default as fontFamily } from './font/fontFamily.css.js'; export { default as fontWeight } from './font/fontWeight.css.js'; +export { default as height } from './height.css.js'; export { default as marginTop } from './margin/marginTop.css.js'; export { default as marginRight } from './margin/marginRight.css.js'; export { default as marginBottom } from './margin/marginBottom.css.js'; @@ -23,3 +24,4 @@ export { default as paddingRight } from './padding/paddingRight.css.js'; export { default as paddingBottom } from './padding/paddingBottom.css.js'; export { default as paddingLeft } from './padding/paddingLeft.css.js'; export { default as transition } from './transition.css.js'; +export { default as width } from './width.css.js'; diff --git a/lib/themes/jobStreet/atoms/font/fontFamily.css.js b/lib/themes/jobStreet/atoms/font/fontFamily.css.js index 3caa250cb45..f5eb0e26173 100644 --- a/lib/themes/jobStreet/atoms/font/fontFamily.css.js +++ b/lib/themes/jobStreet/atoms/font/fontFamily.css.js @@ -1,5 +1,5 @@ export default { - '.body': { + '.text': { fontFamily: '"Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif' } }; diff --git a/lib/themes/jobStreet/atoms/font/fontSize.css.js b/lib/themes/jobStreet/atoms/font/fontSize.css.js index abdea594a70..69e9f8a1cac 100644 --- a/lib/themes/jobStreet/atoms/font/fontSize.css.js +++ b/lib/themes/jobStreet/atoms/font/fontSize.css.js @@ -1,28 +1,4 @@ -import basekick from 'basekick'; +import fontSizeRulesForTokens from '../../../utils/fontSizeRulesForTokens'; import tokens from '../../tokens/tokens'; -const size = (fontSize, rows) => - basekick({ - baseFontSize: 1, - typeSizeModifier: fontSize, - typeRowSpan: rows, - gridRowHeight: tokens.rowHeight, - descenderHeightScale: 0.13 - }); - -const bodyType = tokens.type.body; -const css = { - '.interaction': { - ...size(bodyType.size, bodyType.rows), - // eslint-disable-next-line no-warning-comments - // TODO: Make this a 'touchable' prop on Text? - paddingTop: '12px', - paddingBottom: '12px' - } -}; -Object.keys(tokens.type).forEach(typeName => { - const type = tokens.type[typeName]; - css[`.${typeName}`] = size(type.size, type.rows); -}); - -export default css; +export default fontSizeRulesForTokens({ tokens }); diff --git a/lib/themes/jobStreet/atoms/height.css.js b/lib/themes/jobStreet/atoms/height.css.js new file mode 100644 index 00000000000..bb5227f4c93 --- /dev/null +++ b/lib/themes/jobStreet/atoms/height.css.js @@ -0,0 +1,4 @@ +import sizeRulesForTokens from '../../utils/sizeRulesForTokens'; +import tokens from '../tokens/tokens'; + +export default sizeRulesForTokens({ tokens, property: 'height' }); diff --git a/lib/themes/jobStreet/atoms/width.css.js b/lib/themes/jobStreet/atoms/width.css.js new file mode 100644 index 00000000000..d0860559030 --- /dev/null +++ b/lib/themes/jobStreet/atoms/width.css.js @@ -0,0 +1,4 @@ +import sizeRulesForTokens from '../../utils/sizeRulesForTokens'; +import tokens from '../tokens/tokens'; + +export default sizeRulesForTokens({ tokens, property: 'width' }); diff --git a/lib/themes/jobStreet/tokens/tokens.js b/lib/themes/jobStreet/tokens/tokens.js index 6ad1b061dec..96e3ab8302e 100644 --- a/lib/themes/jobStreet/tokens/tokens.js +++ b/lib/themes/jobStreet/tokens/tokens.js @@ -2,14 +2,28 @@ export default { rowHeight: 4, columnWidth: 4, interactionRows: 11, - type: { - body: { - size: 14, - rows: 5 + responsiveBreakpoint: 768, + descenderHeightScale: 0.13, + text: { + standard: { + mobile: { + size: 14, + rows: 5 + }, + desktop: { + size: 14, + rows: 5 + } }, large: { - size: 16, - rows: 6 + mobile: { + size: 18, + rows: 6 + }, + desktop: { + size: 20, + rows: 7 + } } }, rowSpacing: { diff --git a/lib/themes/seekAnz/atoms/atoms.js b/lib/themes/seekAnz/atoms/atoms.js index 867645e6564..0df290d5c44 100644 --- a/lib/themes/seekAnz/atoms/atoms.js +++ b/lib/themes/seekAnz/atoms/atoms.js @@ -14,6 +14,7 @@ export { default as color } from './color.css.js'; export { default as fill } from './fill.css.js'; export { default as fontFamily } from './font/fontFamily.css.js'; export { default as fontWeight } from './font/fontWeight.css.js'; +export { default as height } from './height.css.js'; export { default as marginTop } from './margin/marginTop.css.js'; export { default as marginRight } from './margin/marginRight.css.js'; export { default as marginBottom } from './margin/marginBottom.css.js'; @@ -23,3 +24,4 @@ export { default as paddingRight } from './padding/paddingRight.css.js'; export { default as paddingBottom } from './padding/paddingBottom.css.js'; export { default as paddingLeft } from './padding/paddingLeft.css.js'; export { default as transition } from './transition.css.js'; +export { default as width } from './width.css.js'; diff --git a/lib/themes/seekAnz/atoms/font/fontFamily.css.js b/lib/themes/seekAnz/atoms/font/fontFamily.css.js index 3caa250cb45..f5eb0e26173 100644 --- a/lib/themes/seekAnz/atoms/font/fontFamily.css.js +++ b/lib/themes/seekAnz/atoms/font/fontFamily.css.js @@ -1,5 +1,5 @@ export default { - '.body': { + '.text': { fontFamily: '"Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif' } }; diff --git a/lib/themes/seekAnz/atoms/font/fontSize.css.js b/lib/themes/seekAnz/atoms/font/fontSize.css.js index 2377be0cd9c..69e9f8a1cac 100644 --- a/lib/themes/seekAnz/atoms/font/fontSize.css.js +++ b/lib/themes/seekAnz/atoms/font/fontSize.css.js @@ -1,28 +1,4 @@ -import basekick from 'basekick'; +import fontSizeRulesForTokens from '../../../utils/fontSizeRulesForTokens'; import tokens from '../../tokens/tokens'; -const size = (fontSize, rows) => - basekick({ - baseFontSize: 1, - typeSizeModifier: fontSize, - typeRowSpan: rows, - gridRowHeight: tokens.rowHeight, - descenderHeightScale: 0.16 - }); - -const bodyType = tokens.type.body; -const css = { - '.interaction': { - ...size(bodyType.size, bodyType.rows), - // eslint-disable-next-line no-warning-comments - // TODO: Make this a 'touchable' prop on Text? - paddingTop: '12px', - paddingBottom: '12px' - } -}; -Object.keys(tokens.type).forEach(typeName => { - const type = tokens.type[typeName]; - css[`.${typeName}`] = size(type.size, type.rows); -}); - -export default css; +export default fontSizeRulesForTokens({ tokens }); diff --git a/lib/themes/seekAnz/atoms/height.css.js b/lib/themes/seekAnz/atoms/height.css.js new file mode 100644 index 00000000000..bb5227f4c93 --- /dev/null +++ b/lib/themes/seekAnz/atoms/height.css.js @@ -0,0 +1,4 @@ +import sizeRulesForTokens from '../../utils/sizeRulesForTokens'; +import tokens from '../tokens/tokens'; + +export default sizeRulesForTokens({ tokens, property: 'height' }); diff --git a/lib/themes/seekAnz/atoms/width.css.js b/lib/themes/seekAnz/atoms/width.css.js new file mode 100644 index 00000000000..d0860559030 --- /dev/null +++ b/lib/themes/seekAnz/atoms/width.css.js @@ -0,0 +1,4 @@ +import sizeRulesForTokens from '../../utils/sizeRulesForTokens'; +import tokens from '../tokens/tokens'; + +export default sizeRulesForTokens({ tokens, property: 'width' }); diff --git a/lib/themes/seekAnz/tokens/tokens.js b/lib/themes/seekAnz/tokens/tokens.js index bd2506b7ce1..081df2afaa2 100644 --- a/lib/themes/seekAnz/tokens/tokens.js +++ b/lib/themes/seekAnz/tokens/tokens.js @@ -2,14 +2,28 @@ export default { rowHeight: 6, columnWidth: 5, interactionRows: 8, - type: { - body: { - size: 16, - rows: 4 + responsiveBreakpoint: 740, + descenderHeightScale: 0.16, + text: { + standard: { + mobile: { + size: 16, + rows: 4 + }, + desktop: { + size: 16, + rows: 4 + } }, large: { - size: 18, - rows: 4 + mobile: { + size: 18, + rows: 4 + }, + desktop: { + size: 18, + rows: 4 + } } }, rowSpacing: { diff --git a/lib/themes/seekAsia/atoms/atoms.js b/lib/themes/seekAsia/atoms/atoms.js index 867645e6564..0df290d5c44 100644 --- a/lib/themes/seekAsia/atoms/atoms.js +++ b/lib/themes/seekAsia/atoms/atoms.js @@ -14,6 +14,7 @@ export { default as color } from './color.css.js'; export { default as fill } from './fill.css.js'; export { default as fontFamily } from './font/fontFamily.css.js'; export { default as fontWeight } from './font/fontWeight.css.js'; +export { default as height } from './height.css.js'; export { default as marginTop } from './margin/marginTop.css.js'; export { default as marginRight } from './margin/marginRight.css.js'; export { default as marginBottom } from './margin/marginBottom.css.js'; @@ -23,3 +24,4 @@ export { default as paddingRight } from './padding/paddingRight.css.js'; export { default as paddingBottom } from './padding/paddingBottom.css.js'; export { default as paddingLeft } from './padding/paddingLeft.css.js'; export { default as transition } from './transition.css.js'; +export { default as width } from './width.css.js'; diff --git a/lib/themes/seekAsia/atoms/font/fontFamily.css.js b/lib/themes/seekAsia/atoms/font/fontFamily.css.js index b1958e64e71..f40d9409799 100644 --- a/lib/themes/seekAsia/atoms/font/fontFamily.css.js +++ b/lib/themes/seekAsia/atoms/font/fontFamily.css.js @@ -1,5 +1,5 @@ export default { - '.body': { + '.text': { fontFamily: 'Muli, -apple-system, system-ui, "Segoe UI", Roboto, "Noto Sans", Ubuntu, "Droid Sans", "Helvetica Neue", Arial, sans-serif' } diff --git a/lib/themes/seekAsia/atoms/font/fontSize.css.js b/lib/themes/seekAsia/atoms/font/fontSize.css.js index abdea594a70..69e9f8a1cac 100644 --- a/lib/themes/seekAsia/atoms/font/fontSize.css.js +++ b/lib/themes/seekAsia/atoms/font/fontSize.css.js @@ -1,28 +1,4 @@ -import basekick from 'basekick'; +import fontSizeRulesForTokens from '../../../utils/fontSizeRulesForTokens'; import tokens from '../../tokens/tokens'; -const size = (fontSize, rows) => - basekick({ - baseFontSize: 1, - typeSizeModifier: fontSize, - typeRowSpan: rows, - gridRowHeight: tokens.rowHeight, - descenderHeightScale: 0.13 - }); - -const bodyType = tokens.type.body; -const css = { - '.interaction': { - ...size(bodyType.size, bodyType.rows), - // eslint-disable-next-line no-warning-comments - // TODO: Make this a 'touchable' prop on Text? - paddingTop: '12px', - paddingBottom: '12px' - } -}; -Object.keys(tokens.type).forEach(typeName => { - const type = tokens.type[typeName]; - css[`.${typeName}`] = size(type.size, type.rows); -}); - -export default css; +export default fontSizeRulesForTokens({ tokens }); diff --git a/lib/themes/seekAsia/atoms/height.css.js b/lib/themes/seekAsia/atoms/height.css.js new file mode 100644 index 00000000000..bb5227f4c93 --- /dev/null +++ b/lib/themes/seekAsia/atoms/height.css.js @@ -0,0 +1,4 @@ +import sizeRulesForTokens from '../../utils/sizeRulesForTokens'; +import tokens from '../tokens/tokens'; + +export default sizeRulesForTokens({ tokens, property: 'height' }); diff --git a/lib/themes/seekAsia/atoms/width.css.js b/lib/themes/seekAsia/atoms/width.css.js new file mode 100644 index 00000000000..d0860559030 --- /dev/null +++ b/lib/themes/seekAsia/atoms/width.css.js @@ -0,0 +1,4 @@ +import sizeRulesForTokens from '../../utils/sizeRulesForTokens'; +import tokens from '../tokens/tokens'; + +export default sizeRulesForTokens({ tokens, property: 'width' }); diff --git a/lib/themes/seekAsia/tokens/tokens.js b/lib/themes/seekAsia/tokens/tokens.js index d2829fc5f1f..1eea85369c5 100644 --- a/lib/themes/seekAsia/tokens/tokens.js +++ b/lib/themes/seekAsia/tokens/tokens.js @@ -2,14 +2,28 @@ export default { rowHeight: 4, columnWidth: 4, interactionRows: 11, - type: { - body: { - size: 16, - rows: 5 + responsiveBreakpoint: 768, + descenderHeightScale: 0.13, + text: { + standard: { + mobile: { + size: 16, + rows: 6 + }, + desktop: { + size: 16, + rows: 6 + } }, large: { - size: 18, - rows: 6 + mobile: { + size: 18, + rows: 6 + }, + desktop: { + size: 20, + rows: 7 + } } }, rowSpacing: { diff --git a/lib/themes/utils/__snapshots__/fontSizeRulesForTokens.test.js.snap b/lib/themes/utils/__snapshots__/fontSizeRulesForTokens.test.js.snap new file mode 100644 index 00000000000..f0d203bd8e8 --- /dev/null +++ b/lib/themes/utils/__snapshots__/fontSizeRulesForTokens.test.js.snap @@ -0,0 +1,103 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`fontSizeRulesForTokens Theme: jobStreet Rules 1`] = ` +Object { + ".interaction": Object { + "fontSize": "14px", + "lineHeight": "20px", + "paddingBottom": "12px", + "paddingTop": "12px", + "transform": "translateY(0.3442857142857143em)", + }, + ".large": Object { + "fontSize": "18px", + "lineHeight": "24px", + "transform": "translateY(0.29666666666666663em)", + }, + ".standard": Object { + "fontSize": "14px", + "lineHeight": "20px", + "transform": "translateY(0.3442857142857143em)", + }, + "@media screen and (min-width: 768px)": Object { + ".large": Object { + "fontSize": "20px", + "lineHeight": "28px", + "transform": "translateY(0.32999999999999996em)", + }, + }, +} +`; + +exports[`fontSizeRulesForTokens Theme: seekAnz Rules 1`] = ` +Object { + ".interaction": Object { + "fontSize": "16px", + "lineHeight": "24px", + "paddingBottom": "12px", + "paddingTop": "12px", + "transform": "translateY(0.41000000000000003em)", + }, + ".large": Object { + "fontSize": "18px", + "lineHeight": "24px", + "transform": "translateY(0.32666666666666666em)", + }, + ".standard": Object { + "fontSize": "16px", + "lineHeight": "24px", + "transform": "translateY(0.41000000000000003em)", + }, +} +`; + +exports[`fontSizeRulesForTokens Theme: seekAsia Rules 1`] = ` +Object { + ".interaction": Object { + "fontSize": "16px", + "lineHeight": "24px", + "paddingBottom": "10px", + "paddingTop": "10px", + "transform": "translateY(0.38em)", + }, + ".large": Object { + "fontSize": "18px", + "lineHeight": "24px", + "transform": "translateY(0.29666666666666663em)", + }, + ".standard": Object { + "fontSize": "16px", + "lineHeight": "24px", + "transform": "translateY(0.38em)", + }, + "@media screen and (min-width: 768px)": Object { + ".large": Object { + "fontSize": "20px", + "lineHeight": "28px", + "transform": "translateY(0.32999999999999996em)", + }, + }, +} +`; + +exports[`fontSizeRulesForTokens Theme: wireframe Rules 1`] = ` +Object { + ".interaction": Object { + "fontSize": "16px", + "lineHeight": "24px", + "paddingBottom": "12px", + "paddingTop": "12px", + "transform": "translateY(0.41000000000000003em)", + }, + ".large": Object { + "fontSize": "18px", + "lineHeight": "24px", + "transform": "translateY(0.32666666666666666em)", + }, + ".standard": Object { + "fontSize": "16px", + "lineHeight": "24px", + "transform": "translateY(0.41000000000000003em)", + }, +} +`; diff --git a/lib/themes/utils/__snapshots__/sizeRulesForTokens.test.js.snap b/lib/themes/utils/__snapshots__/sizeRulesForTokens.test.js.snap new file mode 100644 index 00000000000..b5378a33696 --- /dev/null +++ b/lib/themes/utils/__snapshots__/sizeRulesForTokens.test.js.snap @@ -0,0 +1,85 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`sizeRulesForTokens Theme: jobStreet Rules 1`] = ` +Object { + ".largeText": Object { + "width": "24px", + }, + ".largeTextInline": Object { + "width": "18px", + }, + ".standardText": Object { + "width": "20px", + }, + ".standardTextInline": Object { + "width": "14px", + }, + "@media screen and (min-width: 768px)": Object { + ".largeText": Object { + "width": "28px", + }, + ".largeTextInline": Object { + "width": "20px", + }, + }, +} +`; + +exports[`sizeRulesForTokens Theme: seekAnz Rules 1`] = ` +Object { + ".largeText": Object { + "width": "24px", + }, + ".largeTextInline": Object { + "width": "18px", + }, + ".standardText": Object { + "width": "24px", + }, + ".standardTextInline": Object { + "width": "16px", + }, +} +`; + +exports[`sizeRulesForTokens Theme: seekAsia Rules 1`] = ` +Object { + ".largeText": Object { + "width": "24px", + }, + ".largeTextInline": Object { + "width": "18px", + }, + ".standardText": Object { + "width": "24px", + }, + ".standardTextInline": Object { + "width": "16px", + }, + "@media screen and (min-width: 768px)": Object { + ".largeText": Object { + "width": "28px", + }, + ".largeTextInline": Object { + "width": "20px", + }, + }, +} +`; + +exports[`sizeRulesForTokens Theme: wireframe Rules 1`] = ` +Object { + ".largeText": Object { + "width": "24px", + }, + ".largeTextInline": Object { + "width": "18px", + }, + ".standardText": Object { + "width": "24px", + }, + ".standardTextInline": Object { + "width": "16px", + }, +} +`; diff --git a/lib/themes/utils/createResponsiveRules.js b/lib/themes/utils/createResponsiveRules.js new file mode 100644 index 00000000000..4fb2bcdd96f --- /dev/null +++ b/lib/themes/utils/createResponsiveRules.js @@ -0,0 +1,15 @@ +import isEqual from 'lodash/isEqual'; + +export default ({ tokens, selector, mobileRules, desktopRules }) => { + const css = { + [selector]: mobileRules + }; + + if (!isEqual(mobileRules, desktopRules)) { + css[`@media screen and (min-width: ${tokens.responsiveBreakpoint}px)`] = { + [selector]: desktopRules + }; + } + + return css; +}; diff --git a/lib/themes/utils/fontSizeRulesForTokens.js b/lib/themes/utils/fontSizeRulesForTokens.js new file mode 100644 index 00000000000..60046db966d --- /dev/null +++ b/lib/themes/utils/fontSizeRulesForTokens.js @@ -0,0 +1,60 @@ +import basekick from 'basekick'; +import merge from 'lodash/merge'; +import createResponsiveRules from './createResponsiveRules'; + +export default ({ tokens }) => { + const size = (fontSize, rows) => + basekick({ + baseFontSize: 1, + typeSizeModifier: fontSize, + typeRowSpan: rows, + gridRowHeight: tokens.rowHeight, + descenderHeightScale: tokens.descenderHeightScale + }); + + const rules = []; + Object.keys(tokens.text).forEach(typeName => { + const type = tokens.text[typeName]; + + const mobileRules = size(type.mobile.size, type.mobile.rows); + const desktopRules = size(type.desktop.size, type.desktop.rows); + + rules.push( + createResponsiveRules({ + tokens, + selector: `.${typeName}`, + mobileRules, + desktopRules + }) + ); + + if (typeName === 'standard') { + const interactionHeight = tokens.interactionRows * tokens.rowHeight; + const mobileInteractionPadding = `${(interactionHeight - + type.mobile.rows * tokens.rowHeight) / + 2}px`; + const desktopInteractionPadding = `${(interactionHeight - + type.desktop.rows * tokens.rowHeight) / + 2}px`; + + rules.push( + createResponsiveRules({ + tokens, + selector: '.interaction', + mobileRules: { + ...mobileRules, + paddingTop: mobileInteractionPadding, + paddingBottom: mobileInteractionPadding + }, + desktopRules: { + ...mobileRules, + paddingTop: desktopInteractionPadding, + paddingBottom: desktopInteractionPadding + } + }) + ); + } + }); + + return merge({}, ...rules); +}; diff --git a/lib/themes/utils/fontSizeRulesForTokens.test.js b/lib/themes/utils/fontSizeRulesForTokens.test.js new file mode 100644 index 00000000000..3c272ed4943 --- /dev/null +++ b/lib/themes/utils/fontSizeRulesForTokens.test.js @@ -0,0 +1,12 @@ +import fontSizeRulesForTokens from './fontSizeRulesForTokens'; +import forEachTheme from '../../test/utils/forEachTheme'; + +describe('fontSizeRulesForTokens', () => { + forEachTheme(({ theme }) => { + test('Rules', () => { + expect( + fontSizeRulesForTokens({ tokens: theme.tokens }) + ).toMatchSnapshot(); + }); + }); +}); diff --git a/lib/themes/utils/sizeRulesForTokens.js b/lib/themes/utils/sizeRulesForTokens.js new file mode 100644 index 00000000000..cd4b9e74be9 --- /dev/null +++ b/lib/themes/utils/sizeRulesForTokens.js @@ -0,0 +1,38 @@ +import merge from 'lodash/merge'; +import createResponsiveRules from './createResponsiveRules'; + +export default ({ tokens, property }) => { + const rules = []; + + Object.keys(tokens.text).forEach(typeName => { + const type = tokens.text[typeName]; + + rules.push( + createResponsiveRules({ + tokens, + selector: `.${typeName}Text`, + mobileRules: { + [property]: `${type.mobile.rows * tokens.rowHeight}px` + }, + desktopRules: { + [property]: `${type.desktop.rows * tokens.rowHeight}px` + } + }) + ); + + rules.push( + createResponsiveRules({ + tokens, + selector: `.${typeName}TextInline`, + mobileRules: { + [property]: `${type.mobile.size}px` + }, + desktopRules: { + [property]: `${type.desktop.size}px` + } + }) + ); + }); + + return merge({}, ...rules); +}; diff --git a/lib/themes/utils/sizeRulesForTokens.test.js b/lib/themes/utils/sizeRulesForTokens.test.js new file mode 100644 index 00000000000..a19a1e825f1 --- /dev/null +++ b/lib/themes/utils/sizeRulesForTokens.test.js @@ -0,0 +1,12 @@ +import sizeRulesForTokens from './sizeRulesForTokens'; +import forEachTheme from '../../test/utils/forEachTheme'; + +describe('sizeRulesForTokens', () => { + forEachTheme(({ theme }) => { + test('Rules', () => { + expect( + sizeRulesForTokens({ tokens: theme.tokens, property: 'width' }) + ).toMatchSnapshot(); + }); + }); +}); diff --git a/lib/themes/wireframe/atoms/atoms.js b/lib/themes/wireframe/atoms/atoms.js index 867645e6564..0df290d5c44 100644 --- a/lib/themes/wireframe/atoms/atoms.js +++ b/lib/themes/wireframe/atoms/atoms.js @@ -14,6 +14,7 @@ export { default as color } from './color.css.js'; export { default as fill } from './fill.css.js'; export { default as fontFamily } from './font/fontFamily.css.js'; export { default as fontWeight } from './font/fontWeight.css.js'; +export { default as height } from './height.css.js'; export { default as marginTop } from './margin/marginTop.css.js'; export { default as marginRight } from './margin/marginRight.css.js'; export { default as marginBottom } from './margin/marginBottom.css.js'; @@ -23,3 +24,4 @@ export { default as paddingRight } from './padding/paddingRight.css.js'; export { default as paddingBottom } from './padding/paddingBottom.css.js'; export { default as paddingLeft } from './padding/paddingLeft.css.js'; export { default as transition } from './transition.css.js'; +export { default as width } from './width.css.js'; diff --git a/lib/themes/wireframe/atoms/font/fontFamily.css.js b/lib/themes/wireframe/atoms/font/fontFamily.css.js index 59ddd09f9d8..0ff085037c6 100644 --- a/lib/themes/wireframe/atoms/font/fontFamily.css.js +++ b/lib/themes/wireframe/atoms/font/fontFamily.css.js @@ -1,5 +1,5 @@ export default { - '.body': { + '.text': { fontFamily: 'Courier, monospace' } }; diff --git a/lib/themes/wireframe/atoms/font/fontSize.css.js b/lib/themes/wireframe/atoms/font/fontSize.css.js index 2377be0cd9c..69e9f8a1cac 100644 --- a/lib/themes/wireframe/atoms/font/fontSize.css.js +++ b/lib/themes/wireframe/atoms/font/fontSize.css.js @@ -1,28 +1,4 @@ -import basekick from 'basekick'; +import fontSizeRulesForTokens from '../../../utils/fontSizeRulesForTokens'; import tokens from '../../tokens/tokens'; -const size = (fontSize, rows) => - basekick({ - baseFontSize: 1, - typeSizeModifier: fontSize, - typeRowSpan: rows, - gridRowHeight: tokens.rowHeight, - descenderHeightScale: 0.16 - }); - -const bodyType = tokens.type.body; -const css = { - '.interaction': { - ...size(bodyType.size, bodyType.rows), - // eslint-disable-next-line no-warning-comments - // TODO: Make this a 'touchable' prop on Text? - paddingTop: '12px', - paddingBottom: '12px' - } -}; -Object.keys(tokens.type).forEach(typeName => { - const type = tokens.type[typeName]; - css[`.${typeName}`] = size(type.size, type.rows); -}); - -export default css; +export default fontSizeRulesForTokens({ tokens }); diff --git a/lib/themes/wireframe/atoms/height.css.js b/lib/themes/wireframe/atoms/height.css.js new file mode 100644 index 00000000000..bb5227f4c93 --- /dev/null +++ b/lib/themes/wireframe/atoms/height.css.js @@ -0,0 +1,4 @@ +import sizeRulesForTokens from '../../utils/sizeRulesForTokens'; +import tokens from '../tokens/tokens'; + +export default sizeRulesForTokens({ tokens, property: 'height' }); diff --git a/lib/themes/wireframe/atoms/width.css.js b/lib/themes/wireframe/atoms/width.css.js new file mode 100644 index 00000000000..d0860559030 --- /dev/null +++ b/lib/themes/wireframe/atoms/width.css.js @@ -0,0 +1,4 @@ +import sizeRulesForTokens from '../../utils/sizeRulesForTokens'; +import tokens from '../tokens/tokens'; + +export default sizeRulesForTokens({ tokens, property: 'width' }); diff --git a/lib/themes/wireframe/tokens/tokens.js b/lib/themes/wireframe/tokens/tokens.js index bd2506b7ce1..e426ca1a270 100644 --- a/lib/themes/wireframe/tokens/tokens.js +++ b/lib/themes/wireframe/tokens/tokens.js @@ -2,14 +2,28 @@ export default { rowHeight: 6, columnWidth: 5, interactionRows: 8, - type: { - body: { - size: 16, - rows: 4 + responsiveBreakpoint: 768, + descenderHeightScale: 0.16, + text: { + standard: { + mobile: { + size: 16, + rows: 4 + }, + desktop: { + size: 16, + rows: 4 + } }, large: { - size: 18, - rows: 4 + mobile: { + size: 18, + rows: 4 + }, + desktop: { + size: 18, + rows: 4 + } } }, rowSpacing: {