Adds dynamic listing for icons inside the doc and improves the code readability

andreamangano · andreamangano · commit 8b1b2e0eb56e · 2017-02-23T23:49:14.000+01:00
diff --git a/assets/icons-sprite.svg b/assets/icons-sprite.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+<symbol id="email" viewBox="0 0 100 100">
+  <rect x="55" y="45" width="11" height="10"/><rect x="34" y="45" width="11" height="10"/><rect x="45" y="55" width="10" height="11"/><rect x="66" y="34" width="11" height="11"/>
+  <path d="M88.11,12H1V88H99V12H88.11ZM88,44.56V77H12V34H23V23H77V34H88V44.56Z"/><rect x="23" y="34" width="11" height="11"/>
+
+</symbol>
+<symbol id="subscribe" viewBox="0 0 100 100"><title>*</title><path d="M79.4,34.91L60.78,16.29,69.6,7.47a4.74,4.74,0,0,1,6.86,0L87.73,18.74a4.74,4.74,0,0,1,0,6.86ZM45.1,84L35.3,94H99V84H45.1Zm9.8-62.81L1,75.58V94H19.62l53.9-54.29Z"/>
+</symbol></svg>
diff --git a/assets/scss/4-base/_icon.scss b/assets/scss/4-base/_icon.scss
@@ -0,0 +1,11 @@
+.icon {
+  display: block;
+  line-height: 0;
+
+  & > svg {
+    fill: currentColor;
+    stroke: currentColor;
+    height: 1em;
+    width: 1em;
+  }
+}
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -8,6 +8,7 @@
 @import './3-generic/layout-settings';
 
 @import './4-base/fonts/primary';
+@import './4-base/icon';
 @import './4-base/typography';
 @import './4-base/input';
 @import './4-base/button';
diff --git a/assets/sources/icons.ai b/assets/sources/icons.ai
diff --git a/views/docs/_faq.pug b/views/docs/_faq.pug
@@ -1,13 +1,10 @@
 +docs-section({
-    title: 'Faq'
-})
+    title: 'Faq'})
 
   +docs-block({
-      title: 'Faq item'
-  })
+    title: 'Faq item'})
     +faq(faq.entries[0])
 
   +docs-block({
-      title: 'Faq List'
-  })
+    title: 'Faq List'})
     +faqs({title: faq.title, entries: faq.entries})
diff --git a/views/docs/_footer.pug b/views/docs/_footer.pug
@@ -1,6 +1,5 @@
 +docs-section({
-    title: 'Footer'
-})
+  title: 'Footer'})
 
   +docs-block({})
     include ../partials/_footer
diff --git a/views/docs/_icons.pug b/views/docs/_icons.pug
@@ -1,7 +1,12 @@
 +docs-section({
-    title: 'Icons'
-})
+  title: 'Icons'})
 
   +docs-block({
-      title: 'Preview (Medium)'
-  })
+    title: 'Preview',
+    open: true})
+    +icons-grid({icons: icons})
+
+  +docs-block({
+    title: 'Small preview',
+    open: true})
+    +icons-grid({icons: icons, type: 'small'})
diff --git a/views/docs/_layout.pug b/views/docs/_layout.pug
@@ -2,44 +2,36 @@ include mixins/_index
 include ../mixins/_index
 
 doctype html
-
 html
-
   head
-
     title=Documentation
-
     meta(
-    name="viewport"
-    content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0")
-
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0")
     meta(charset="utf-8")
     meta(http-equiv="X-UA-Compatible" content="IE=edge")
-
     base(href="/")
-
     block head_css
-      link(
+    link(
       href="css/docs.css"
       rel="stylesheet"
       type="text/css")
 
   block body
     body.docs-layout
+      div(style="display: none;")
+        include ../../assets/icons-sprite.svg
       .docs-layout__content
-
         .docs-layout__nav
           .docs-logo
             .docs-logo__image
-              include ./../../assets/images/logo/vertical.svg
-
+              include ../../assets/images/logo/vertical.svg
           nav.docs-nav
             .docs-nav__list
               each item in navigation
                 li.docs-nav__item
                   a.docs-nav__link(
                   href=`/docs.html?${item.url}`)!=item.label
-
         .docs-layout__page-wrapper
           .docs-layout__page
             block page
diff --git a/views/docs/_logo.pug b/views/docs/_logo.pug
@@ -1,39 +1,30 @@
 +docs-section({
     title: 'Logo'
 })
-
   +docs-block({
-      open: true
-  })
+      open: true})
 
     .logo-grid
-
       .logo-grid__list
-
         .logo-grid__item-medium
-
           .logo-box.logo-box--vertical.logo-box--brand-text-color
             .logo-box__picture
               include ../../assets/images/logo/vertical.svg
             h6.logo-box__name Vertical
 
         .logo-grid__item-medium
-
           .logo-box.logo-box--compact.logo-box--brand-text-color
             .logo-box__picture
               include ../../assets/images/logo/compact.svg
             h6.logo-box__name Compact
 
         .logo-grid__item-medium
-
           .logo-box.logo-box--minimal
             .logo-box__picture
               include ../../assets/images/logo/pictogram-minimal.svg
             h6.logo-box__name Pictogram Minimal
 
-
         .logo-grid__item-medium
-
           .logo-box.logo-box--square.logo-box--brand-text-color
             .logo-box__picture
               include ../../assets/images/logo/pictogram-square.svg
diff --git a/views/docs/_palettes.pug b/views/docs/_palettes.pug
@@ -1,10 +1,8 @@
 +docs-section({
-    title: 'Colour Palettes'
-})
+    title: 'Colour Palettes'})
 
   each value, key in palettes
     +docs-block({
-        title: `${key} palette`,
-        open: true})
-
+      title: `${key} palette`,
+      open: true})
       +palette-grid(value)
diff --git a/views/docs/_typography.pug b/views/docs/_typography.pug
@@ -2,14 +2,12 @@
 //- TYPOGRAPHY SECTION
 //--------------------
 +docs-section({
-    title: 'Typography'
-})
+    title: 'Typography'})
 
   +docs-block({
       title: 'Hierarchy of Type',
       description: 'Description here...',
-      open: true
-  })
+      open: true})
 
     -var placeholder= 'Lorem ipsum dolor sit amet,</br>consectetur adipiscing elit.'
     .headings-grid
diff --git a/views/docs/mixins/_index.pug b/views/docs/mixins/_index.pug
@@ -31,6 +31,22 @@ mixin docs-block(config)
       .docs-block__preview
         block
 
+//------------
+//- ICONS GRID
+//------------
+mixin icons-grid(config)
+  - var classType = config.type ? `icons-grid--${config.type}` : '';
+  .icons-grid(
+  class=classType)
+    .icons-grid__list
+      each icon in config.icons
+        - var name = icon.replace(/\.[^\/.]+$/, '');
+        .icons-grid__item
+          .icons-grid__icon
+            .icons-grid__symbol
+              +icon({name: name})
+            .icons-grid__name= name
+
 //--------------
 //- PALETTE GRID
 //--------------
diff --git a/views/mixins/_icon.pug b/views/mixins/_icon.pug
@@ -0,0 +1,4 @@
+mixin icon(config)
+  .icon
+    svg(viewBox="0 0 100 100")
+      use(xlink:href=`#${config.name}`)
diff --git a/views/mixins/_index.pug b/views/mixins/_index.pug
@@ -1,2 +1,3 @@
+include _icon
 include _faq
 include _faqs
