fix(Text): Make Text and Icon components responsive (#22)

seek-oss · Oct 25, 2018 · e4af76d · e4af76d
1 parent 90663ec
commit e4af76d
Show file tree

Hide file tree

Showing 62 changed files with 1,345 additions and 788 deletions.
diff --git 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 <ComponentRoute componentName={match.params.componentName} />;
+  }
+
+  renderIconRoute({ match }) {
+    return (
+      <ComponentRoute
+        componentName={match.params.componentName}
+        category="icons"
+      />
+    );
+  }
+
   render() {
     return (
       <ThemeProvider theme={themes.wireframe}>
@@ -38,7 +51,7 @@ export default class App extends Component {
               <Text size="large" weight="strong" marginBottom="small">
                 Components
               </Text>
-              <BulletList>
+              <BulletList marginBottom="small">
                 {Object.keys(components)
                   .filter(x => !/icon/i.test(x))
                   .sort()
@@ -53,6 +66,24 @@ export default class App extends Component {
                     </Bullet>
                   ))}
               </BulletList>
+              <Text size="large" weight="strong" marginBottom="small">
+                Icons
+              </Text>
+              <BulletList>
+                {Object.keys(components)
+                  .filter(x => /icon/i.test(x) && x !== 'Icon')
+                  .sort()
+                  .map(iconName => (
+                    <Bullet key={iconName}>
+                      <Link
+                        style={{ color: 'inherit' }}
+                        to={`/icons/${iconName}`}
+                      >
+                        {iconName}
+                      </Link>
+                    </Bullet>
+                  ))}
+              </BulletList>
             </Box>
           </div>
           <div className={styles.content}>
@@ -64,7 +95,11 @@ export default class App extends Component {
             >
               <Route
                 path="/components/:componentName"
-                component={ComponentRoute}
+                render={this.renderComponentRoute}
+              />
+              <Route
+                path="/icons/:componentName"
+                render={this.renderIconRoute}
               />
             </Box>
           </div>

diff --git 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 (
       <Box>
         <Text size="large" weight="strong" paddingBottom="small">
-          {match.params.componentName}
+          {componentName}
         </Text>
 
         {examples.length > 0 ? (

diff --git 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
@@ -11,10 +11,10 @@ exports[`Alert Theme: jobStreet Tones critical 1`] = `
       class="Alert__icon"
     >
       <svg
-        class="fill__critical Box__root borderColor__default marginRight__small"
-        height="20"
+        class="width__standardText height__standardText fill__critical Box__root borderColor__default marginRight__small"
+        height="16"
         viewBox="0 0 512 512"
-        width="20"
+        width="16"
       >
         <path
           d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
@@ -25,7 +25,7 @@ exports[`Alert Theme: jobStreet Tones critical 1`] = `
       class="Text__block Box__root borderColor__default"
     >
       <span
-        class="Text__block color__critical fontFamily__body fontSize__body fontWeight__regular"
+        class="Text__block color__critical fontFamily__text fontSize__standard fontWeight__regular"
         style="transform: none;"
       >
         critical
@@ -46,10 +46,10 @@ exports[`Alert Theme: jobStreet Tones info 1`] = `
       class="Alert__icon"
     >
       <svg
-        class="fill__white Box__root borderColor__default marginRight__small"
-        height="20"
+        class="width__standardText height__standardText fill__white Box__root borderColor__default marginRight__small"
+        height="16"
         viewBox="0 0 30 30"
-        width="20"
+        width="16"
         x="0"
         y="0"
       >
@@ -68,7 +68,7 @@ exports[`Alert Theme: jobStreet Tones info 1`] = `
       class="Text__block Box__root borderColor__default"
     >
       <span
-        class="Text__block color__white fontFamily__body fontSize__body fontWeight__regular"
+        class="Text__block color__white fontFamily__text fontSize__standard fontWeight__regular"
         style="transform: none;"
       >
         info
@@ -89,10 +89,10 @@ exports[`Alert Theme: seekAnz Tones critical 1`] = `
       class="Alert__icon"
     >
       <svg
-        class="fill__critical Box__root borderColor__default marginRight__small"
-        height="24"
+        class="width__standardText height__standardText fill__critical Box__root borderColor__default marginRight__small"
+        height="16"
         viewBox="0 0 512 512"
-        width="24"
+        width="16"
       >
         <path
           d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
@@ -103,7 +103,7 @@ exports[`Alert Theme: seekAnz Tones critical 1`] = `
       class="Text__block Box__root borderColor__default"
     >
       <span
-        class="Text__block color__critical fontFamily__body fontSize__body fontWeight__regular"
+        class="Text__block color__critical fontFamily__text fontSize__standard fontWeight__regular"
         style="transform: none;"
       >
         critical
@@ -124,10 +124,10 @@ exports[`Alert Theme: seekAnz Tones info 1`] = `
       class="Alert__icon"
     >
       <svg
-        class="fill__white Box__root borderColor__default marginRight__small"
-        height="24"
+        class="width__standardText height__standardText fill__white Box__root borderColor__default marginRight__small"
+        height="16"
         viewBox="0 0 30 30"
-        width="24"
+        width="16"
         x="0"
         y="0"
       >
@@ -146,7 +146,7 @@ exports[`Alert Theme: seekAnz Tones info 1`] = `
       class="Text__block Box__root borderColor__default"
     >
       <span
-        class="Text__block color__white fontFamily__body fontSize__body fontWeight__regular"
+        class="Text__block color__white fontFamily__text fontSize__standard fontWeight__regular"
         style="transform: none;"
       >
         info
@@ -167,10 +167,10 @@ exports[`Alert Theme: seekAsia Tones critical 1`] = `
       class="Alert__icon"
     >
       <svg
-        class="fill__critical Box__root borderColor__default marginRight__small"
-        height="20"
+        class="width__standardText height__standardText fill__critical Box__root borderColor__default marginRight__small"
+        height="16"
         viewBox="0 0 512 512"
-        width="20"
+        width="16"
       >
         <path
           d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
@@ -181,7 +181,7 @@ exports[`Alert Theme: seekAsia Tones critical 1`] = `
       class="Text__block Box__root borderColor__default"
     >
       <span
-        class="Text__block color__critical fontFamily__body fontSize__body fontWeight__regular"
+        class="Text__block color__critical fontFamily__text fontSize__standard fontWeight__regular"
         style="transform: none;"
       >
         critical
@@ -202,10 +202,10 @@ exports[`Alert Theme: seekAsia Tones info 1`] = `
       class="Alert__icon"
     >
       <svg
-        class="fill__white Box__root borderColor__default marginRight__small"
-        height="20"
+        class="width__standardText height__standardText fill__white Box__root borderColor__default marginRight__small"
+        height="16"
         viewBox="0 0 30 30"
-        width="20"
+        width="16"
         x="0"
         y="0"
       >
@@ -224,7 +224,7 @@ exports[`Alert Theme: seekAsia Tones info 1`] = `
       class="Text__block Box__root borderColor__default"
     >
       <span
-        class="Text__block color__white fontFamily__body fontSize__body fontWeight__regular"
+        class="Text__block color__white fontFamily__text fontSize__standard fontWeight__regular"
         style="transform: none;"
       >
         info
@@ -245,10 +245,10 @@ exports[`Alert Theme: wireframe Tones critical 1`] = `
       class="Alert__icon"
     >
       <svg
-        class="fill__critical Box__root borderColor__default marginRight__small"
-        height="24"
+        class="width__standardText height__standardText fill__critical Box__root borderColor__default marginRight__small"
+        height="16"
         viewBox="0 0 512 512"
-        width="24"
+        width="16"
       >
         <path
           d="M489.308 156.341c-12.902-30.484-31.355-57.856-54.861-81.357-23.512-23.501-50.883-41.959-81.377-54.855-31.575-13.353-65.106-20.122-99.65-20.122s-68.066 6.769-99.635 20.122c-30.484 12.902-57.856 31.35-81.357 54.851-23.511 23.501-41.968 50.877-54.865 81.357-13.342 31.575-20.122 65.111-20.122 99.656 0 34.56 6.774 68.080 20.122 99.656 12.902 30.485 31.36 57.856 54.861 81.367s50.877 41.959 81.357 54.856c31.575 13.348 65.096 20.122 99.635 20.122 34.56 0 68.081-6.759 99.656-20.122 30.485-12.902 57.856-31.35 81.372-54.856 23.5-23.5 41.964-50.883 54.861-81.367 13.368-31.58 20.137-65.106 20.137-99.661 0-34.544-6.774-68.076-20.132-99.645zM232.99 371.167h41.334c3.687 0 6.687 2.995 6.687 6.692v41.063c0 3.702-2.995 6.697-6.692 6.697h-41.339c-3.696 0-6.692-2.995-6.692-6.692v-41.063c0-3.702 2.99-6.697 6.686-6.697zM226.304 312.051v-219.587c0-3.697 2.99-6.692 6.686-6.692h41.063c3.707 0 6.707 3 6.707 6.697v219.587c0 3.697-3 6.692-6.707 6.692h-41.063c-3.696 0-6.692-3-6.692-6.692z"
@@ -259,7 +259,7 @@ exports[`Alert Theme: wireframe Tones critical 1`] = `
       class="Text__block Box__root borderColor__default"
     >
       <span
-        class="Text__block color__critical fontFamily__body fontSize__body fontWeight__regular"
+        class="Text__block color__critical fontFamily__text fontSize__standard fontWeight__regular"
         style="transform: none;"
       >
         critical
@@ -280,10 +280,10 @@ exports[`Alert Theme: wireframe Tones info 1`] = `
       class="Alert__icon"
     >
       <svg
-        class="fill__white Box__root borderColor__default marginRight__small"
-        height="24"
+        class="width__standardText height__standardText fill__white Box__root borderColor__default marginRight__small"
+        height="16"
         viewBox="0 0 30 30"
-        width="24"
+        width="16"
         x="0"
         y="0"
       >
@@ -302,7 +302,7 @@ exports[`Alert Theme: wireframe Tones info 1`] = `
       class="Text__block Box__root borderColor__default"
     >
       <span
-        class="Text__block color__white fontFamily__body fontSize__body fontWeight__regular"
+        class="Text__block color__white fontFamily__text fontSize__standard fontWeight__regular"
         style="transform: none;"
       >
         info

diff --git 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;"
 >
   <span
-    class="Text__block color__neutral fontFamily__body fontSize__body fontWeight__regular"
+    class="Text__block color__neutral fontFamily__text fontSize__standard fontWeight__regular"
   >
     Bullet
   </span>
@@ -19,7 +19,7 @@ exports[`Bullet Theme: seekAnz Default 1`] = `
   style="margin-left: 1.3em;"
 >
   <span
-    class="Text__block color__neutral fontFamily__body fontSize__body fontWeight__regular"
+    class="Text__block color__neutral fontFamily__text fontSize__standard fontWeight__regular"
   >
     Bullet
   </span>
@@ -32,7 +32,7 @@ exports[`Bullet Theme: seekAsia Default 1`] = `
   style="margin-left: 1.3em;"
 >
   <span
-    class="Text__block color__neutral fontFamily__body fontSize__body fontWeight__regular"
+    class="Text__block color__neutral fontFamily__text fontSize__standard fontWeight__regular"
   >
     Bullet
   </span>
@@ -45,7 +45,7 @@ exports[`Bullet Theme: wireframe Default 1`] = `
   style="margin-left: 1.3em;"
 >
   <span
-    class="Text__block color__neutral fontFamily__body fontSize__body fontWeight__regular"
+    class="Text__block color__neutral fontFamily__text fontSize__standard fontWeight__regular"
   >
     Bullet
   </span>

diff --git 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 }) => (
+        <Checkbox
+          id={id}
+          checked={false}
+          onChange={handleChange}
+          label="Label"
+        />
+      )
+    },
+    {
+      label: 'Checkbox without Message Placeholder',
       render: ({ id }) => (
         <Checkbox
           id={id}

diff --git a/lib/components/Checkbox/Checkbox.js b/lib/components/Checkbox/Checkbox.js
@@ -208,8 +208,7 @@ export default withTheme(
                   )}
                 />
                 <TickIcon
-                  width="100%"
-                  height="100%"
+                  size="fill"
                   className={classnames(
                     styles.checkboxIcon,
                     theme.atoms.fill.white,