Merge pull request #781 from mapbox/inline-icons

adjust icon sizing, add icon-wrapper class, closes #763
mapbox · May 25, 2017 · 8a97b51 · 8a97b51
2 parents ca41447 + 3e7293c
commit 8a97b51
Show file tree

Hide file tree

Showing 7 changed files with 166 additions and 13 deletions.
diff --git a/site/catalog/icons.js b/site/catalog/icons.js
@@ -0,0 +1,79 @@
+import React from 'react';
+import fs from 'fs';
+import path from 'path';
+
+const icons = fs.readdirSync(path.join(__dirname, '../../src/svgs'))
+  .filter((filename) => filename.endsWith('.svg'))
+  .map((filename) => path.basename(filename, '.svg'));
+
+const fontSizes = [
+  'txt-h1',
+  'txt-h2',
+  'txt-h3',
+  'txt-xl',
+  'txt-l',
+  'txt-m',
+  'txt-s',
+  'txt-xs'
+];
+
+const iconSizes = [
+  'icon',
+  'icon icon--s',
+  'icon icon--l',
+];
+
+const wrapperClass = 'icon-inliner';
+
+const getIconEl = (icon) => {
+  return (
+    <div key={icon} className='relative mb24 pb12 border-b border--gray-faint'>
+
+      <div className='mb12'>
+        <button className='btn round-full'>
+          <div className={wrapperClass}>
+            <svg className='icon'>
+              <use xlinkHref={`#icon-${icon}`} />
+            </svg>
+          </div>
+          Button label
+        </button>
+      </div>
+
+      {fontSizes.map((f) => iconSizes.map((c) => <div className={`mb12 ${f}`}>
+          <div className={f.includes('h') ? wrapperClass + ' icon-inliner--heading' : wrapperClass}>
+            <svg className={c}>
+              <use xlinkHref={`#icon-${icon}`} />
+            </svg>
+          </div>
+          <span>Curabitur blandit tempus porttitor.</span>
+          <div className={f.includes('h') ? wrapperClass + ' icon-inliner--heading' : wrapperClass}>
+            <svg className={c}>
+              <use xlinkHref={`#icon-${icon}`} />
+            </svg>
+          </div>
+        </div>))}
+    </div>
+  );
+
+};
+
+class Icons extends React.Component {
+  render() {
+    // Get a random icon from all icons. Because why not.
+    const iconEls = getIconEl(icons[Math.floor(Math.random() * icons.length)]);
+
+    return (
+      <div>
+        <h2 className='border-b border--2 border--gray-faint pb6 mt72 mb24 txt-l txt-bold'>
+          Icons
+        </h2>
+
+        {iconEls}
+
+      </div>
+    );
+  }
+}
+
+export { Icons };
diff --git a/site/catalog/index.js b/site/catalog/index.js
@@ -16,12 +16,14 @@ import { Textareas } from './textareas';
 import { Ranges } from './ranges';
 import { Links } from './links';
 import { Grids } from './grids';
+import { Icons } from './icons';
 import { Flexbox } from './flexbox';
 
 class Catalog extends React.Component {
   render() {
     return (
-      <div className='pt24 '>
+      <div className='pt24'>
+
         <h1 className='txt-h2 txt-bold mb18'>Catalog</h1>
         <p className='col col--6-mm'>A catalog of Assembly variations for reference and debugging purposes.</p>
         <div id='Typography' className='mb48'>
@@ -75,6 +77,9 @@ class Catalog extends React.Component {
         <div id='Radios' className='mb48'>
           <Radios />
         </div>
+        <div id='Icons' className='mb48'>
+          <Icons />
+        </div>
         <div id='Triangles' className='mb48'>
           <Triangles />
         </div>

diff --git a/site/documentation/entry.js b/site/documentation/entry.js
@@ -87,7 +87,7 @@ class Entry extends React.Component {
               target='_blank'
               className='txt-s link inline-block link--gray'
             >
-              <svg className='align-t inline-block mr6 icon'><use xlinkHref='#icon-code'/></svg>
+              <svg className='align-t inline-block mr6 mt3 icon icon--s'><use xlinkHref='#icon-code'/></svg>
               {path.basename(props.parsedComment.source.filename)}: {props.parsedComment.source.line}
             </a>
           </div>

diff --git a/site/icons.js b/site/icons.js
@@ -18,6 +18,9 @@ class Icons extends React.Component {
           <svg className='icon mr12'>
             <use xlinkHref={`#icon-${icon}`} />
           </svg>
+          <svg className='icon icon--s mr12'>
+            <use xlinkHref={`#icon-${icon}`} />
+          </svg>
           <span className='color-gray'>{icon}</span>
         </div>
       );

diff --git a/site/routes.js b/site/routes.js
@@ -176,8 +176,8 @@ function buildRoutes() {
           'Switches',
           'Checkboxes',
           'Radios',
-          'Triangles',
-          'Miscellaneous'
+          'Icons',
+          'Triangles'
         ];
 
         // Build out secondary navigation

diff --git a/src/icons.css b/src/icons.css
@@ -19,7 +19,7 @@
  *
  * @memberof Icons
  * @example
- * <svg class='icon'><use xlink:href='#icon-bike'/></svg>
+ * <svg class='icon'><use xlink:href='#icon-paint'/></svg>
  */
 .icon {
   display: block;
@@ -33,21 +33,51 @@
  *
  * @memberof Icons
  * @example
- * <svg class='icon icon--s'><use xlink:href='#icon-bike'/></svg>
+ * <svg class='icon icon--s'><use xlink:href='#icon-document'/></svg>
  */
 .icon--s {
-  height: 12px !important;
-  width: 12px !important;
+  height: 15px !important;
+  width: 15px !important;
 }
 
 /**
  * Make an icon large.
  *
  * @memberof Icons
  * @example
- * <svg class='icon icon--l'><use xlink:href='#icon-bike'/></svg>
+ * <svg class='icon icon--l'><use xlink:href='#icon-star'/></svg>
  */
 .icon--l {
   height: 36px !important;
   width: 36px !important;
 }
+
+/**
+ * Add to a wrapping element around an icon in order to align the icon with text and ensure the icon doesn't unexpectedly shift text line height. Note that this rule depends on an expected text line height of 1.5 to 1.66, so it does not work with `txt-h{number}` classes. See the `icon-inliner--heading` modifier to center icons in heading text.
+ *
+ * @memberof Icons
+ * @example
+ * <p class='txt-l'><span class='icon-inliner'><svg class='icon'><use xlink:href='#icon-clipboard'/></svg></span> Copy</p>
+ * <p class='txt-xl'>Ring the <span class='icon-inliner'><svg class='icon icon--l'><use xlink:href='#icon-bell'/></svg></span></p>
+ * <p class='txt-s'>Keep your <span class='icon-inliner'><svg class='icon icon--s'><use xlink:href='#icon-home'/></svg></span> safe from <span class='icon-inliner'><svg class='icon icon--s'><use xlink:href='#icon-bug'/></svg></span></p>
+ **/
+.icon-inliner {
+  position: relative !important;
+  display: inline-flex !important;
+  vertical-align: top !important;
+  align-items: center !important;
+  justify-content: center !important;
+  height: 1em !important;
+  top: 0.3em;
+}
+
+/**
+ * Modify the `icon-inliner` class so it works inside headings, which have an expected line height of 1.2 rather than 1.5 to 1.66.
+ *
+ * @memberof Icons
+ * @example
+ * <h1 class='txt-h1'>I <span class='icon-inliner icon-inliner--heading'><svg class='icon icon--l'><use xlink:href='#icon-heart'/></svg></span> New York.</p>
+ **/
+.icon-inliner--heading {
+  top: 0.08em;
+}
diff --git a/test/__snapshots__/build-css.jest.js.snap b/test/__snapshots__/build-css.jest.js.snap
@@ -1319,13 +1319,31 @@ input:checked:disabled + .toggle{
   width:18px;
 }
 .icon--s{
-  height:12px !important;
-  width:12px !important;
+  height:15px !important;
+  width:15px !important;
 }
 .icon--l{
   height:36px !important;
   width:36px !important;
 }
+.icon-inliner{
+  position:relative !important;
+  display:-webkit-inline-flex !important;
+  display:-ms-inline-flexbox !important;
+  display:inline-flex !important;
+  vertical-align:top !important;
+  -webkit-align-items:center !important;
+      -ms-flex-align:center !important;
+          align-items:center !important;
+  -webkit-justify-content:center !important;
+      -ms-flex-pack:center !important;
+          justify-content:center !important;
+  height:1em !important;
+  top:0.3em;
+}
+.icon-inliner--heading{
+  top:0.08em;
+}
 .grid{
   display:-webkit-flex !important;
   display:-ms-flexbox !important;
@@ -17769,13 +17787,31 @@ input:checked:disabled + .toggle{
   width:18px;
 }
 .icon--s{
-  height:12px !important;
-  width:12px !important;
+  height:15px !important;
+  width:15px !important;
 }
 .icon--l{
   height:36px !important;
   width:36px !important;
 }
+.icon-inliner{
+  position:relative !important;
+  display:-webkit-inline-flex !important;
+  display:-ms-inline-flexbox !important;
+  display:inline-flex !important;
+  vertical-align:top !important;
+  -webkit-align-items:center !important;
+      -ms-flex-align:center !important;
+          align-items:center !important;
+  -webkit-justify-content:center !important;
+      -ms-flex-pack:center !important;
+          justify-content:center !important;
+  height:1em !important;
+  top:0.3em;
+}
+.icon-inliner--heading{
+  top:0.08em;
+}
 .grid{
   display:-webkit-flex !important;
   display:-ms-flexbox !important;