Merge pull request #300 from nikolaswise/master

Moving Along - Small Bugs etc
Esri · Aug 3, 2015 · 2af1165 · 2af1165
2 parents 1c1f30f + 1135a06
commit 2af1165
Show file tree

Hide file tree

Showing 21 changed files with 148 additions and 122 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,11 +1,23 @@
 ## 0.10.5
 
+### Removed
+- Calcite color icons are not a thing we're including. Removing the doc space for this.
+
 ### Added
 - `.link-light-blue`
+- Set `video` to 100% max width
+- Document hero subnav.
 
 ### Fixed
 - Style links inside of panels
 - Pre and Post scoping properly
+- Loader bar container div relative
+
+### Modified
+- `.panel` uses `$off-white` instead of `$lightest-gray`
+- Add proper icons to accordion
+- Overflow-x scroll and no-wrap on third-nav
+- Expanding nav and search pattern
 
 ## 0.10.4
 

diff --git a/docs/source/icons/_icon-font-colors.md b/docs/source/icons/_icon-font-colors.md
@@ -0,0 +1 @@
+A set of helper classes are available to simply change the color of an icon without affecting text within the same element.
diff --git a/docs/source/icons/_icon-font.md b/docs/source/icons/_icon-font.md
@@ -3,40 +3,3 @@ The monochromatic icon set is delivered as an icon font. Icon fonts have several
 Monochromatic icons are generally 'interface' icons, and are named after the *action* you'd like to illustrate, instead of the *noun* the icon represents. For example, the delete icon has a class of `icon-delete` (the action) and not `icon-trash` (the noun). The reason for this is that if we decide another icon describes the action or idea better than the current one, we can change it without breaking existing code.
 
 Icons in the icon font will be scaled to the text size of whatever element you add the class to. Below are all of the icons available in the icon font.
-
-<div class="block-group block-group-3-up">
-{% for icon in data.font.icons %}
-<div class="block">
-<span class="font-size-5 icon-ui-{{icon.properties.name}}" aria-label="{{icon.properties.name}}"></span>
-<p class="trailer-1 leader-half"><code>icon-ui-{{icon.properties.name}}</code></p>
-</div>
-{% endfor %}
-</div>
-
-#### Icon Font Colors
-<div class="block-group block-group-3-up">
-<div class="block">
-<span class="font-size-5 icon-ui-check-mark icon-ui-green" aria-label="check-mark "></span>
-<p class="trailer-1 leader-half"><code>icon-ui-check-mark icon-ui-green</code></p>
-</div>
-<div class="block">
-<span class="font-size-5 icon-ui-check-mark icon-ui-blue" aria-label="check-mark "></span>
-<p class="trailer-1 leader-half"><code>icon-ui-check-mark icon-ui-blue</code></p>
-</div>
-<div class="block">
-<span class="font-size-5 icon-ui-check-mark icon-ui-purple" aria-label="check-mark "></span>
-<p class="trailer-1 leader-half"><code>icon-ui-check-mark icon-ui-purple</code></p>
-</div>
-<div class="block">
-<span class="font-size-5 icon-ui-check-mark icon-ui-orange" aria-label="check-mark "></span>
-<p class="trailer-1 leader-half"><code>icon-ui-check-mark icon-ui-orange</code></p>
-</div>
-<div class="block">
-<span class="font-size-5 icon-ui-check-mark icon-ui-gray" aria-label="check-mark "></span>
-<p class="trailer-1 leader-half"><code>icon-ui-check-mark icon-ui-gray</code></p>
-</div>
-<div class="block">
-<span class="font-size-5 icon-ui-check-mark icon-ui-red" aria-label="check-mark "></span>
-<p class="trailer-1 leader-half"><code>icon-ui-check-mark icon-ui-red</code></p>
-</div>
-</div>
diff --git a/docs/source/icons/_social-icons.md b/docs/source/icons/_social-icons.md
@@ -5,12 +5,3 @@ A set of social icons are provided as part of calcite-web. Just use the `icon-so
 ```
 
 Below are the current social icons. More sizes are planned. For now only 30x30 pixel square icons are available.
-
-<div class="block-group block-group-3-up">
-{% for icon in data.icons.social %}
-<div class="block">
-<a href="" class="icon-social-{{icon}}" aria-label="{{icon}}"></a>
-<p class="trailer-1 leader-half"><code>.icon-social-{{icon}}</code></p>
-</div>
-{% endfor %}
-</div>
diff --git a/docs/source/layouts/_doc.html b/docs/source/layouts/_doc.html
@@ -29,6 +29,7 @@ <h4 class="side-nav-title">{{ group.group }}</h4>
 
   <a id="skip-to-content" tabindex="0"></a>
   <main class="column-17 phone-column-6 tablet-column-12 pre-1 content-face" role="main">
+
     {% for group in data.table_of_contents[section].navigation %}
       <h1 class="text-rule" id="{{group.group | replace(" ", "-") | lower}}" tabindex="0">{{group.group}}</h1>
       {% for page in group.pages %}
@@ -39,6 +40,57 @@ <h2 id="{{page.link}}" tabindex="0">{{page.title}}</h2>
 
           {% markdown %}{% include data.table_of_contents[section].base + '/_' + page.link %}{% endmarkdown %}
 
+          {% if page.title == 'Social Icons' %}
+            <div class="block-group block-group-3-up">
+              {% for icon in data.icons.social %}
+                <div class="block">
+                  <a href="" class="icon-social-{{icon}}" aria-label="{{icon}}"></a>
+                  <p class="trailer-1 leader-half"><code>.icon-social-{{icon}}</code></p>
+                </div>
+              {% endfor %}
+            </div>
+          {% endif %}
+
+          {% if page.title == 'Icon Font' %}
+            <div class="block-group block-group-3-up">
+              {% for icon in data.font.icons %}
+                <div class="block">
+                  <span class="font-size-5 icon-ui-{{icon.properties.name}}" aria-label="{{icon.properties.name}}"></span>
+                  <p class="trailer-1 leader-half"><code>icon-ui-{{icon.properties.name}}</code></p>
+                </div>
+              {% endfor %}
+            </div>
+          {% endif %}
+
+          {% if page.title == 'Icon Font Colors' %}
+            <div class="block-group block-group-3-up">
+              <div class="block">
+                <span class="font-size-5 icon-ui-check-mark icon-ui-green" aria-label="check-mark "></span>
+                  <p class="trailer-1 leader-half"><code>icon-ui-check-mark icon-ui-green</code></p>
+              </div>
+              <div class="block">
+                <span class="font-size-5 icon-ui-check-mark icon-ui-blue" aria-label="check-mark "></span>
+                  <p class="trailer-1 leader-half"><code>icon-ui-check-mark icon-ui-blue</code></p>
+              </div>
+              <div class="block">
+                <span class="font-size-5 icon-ui-check-mark icon-ui-purple" aria-label="check-mark "></span>
+                  <p class="trailer-1 leader-half"><code>icon-ui-check-mark icon-ui-purple</code></p>
+              </div>
+              <div class="block">
+                <span class="font-size-5 icon-ui-check-mark icon-ui-orange" aria-label="check-mark "></span>
+                  <p class="trailer-1 leader-half"><code>icon-ui-check-mark icon-ui-orange</code></p>
+              </div>
+              <div class="block">
+                <span class="font-size-5 icon-ui-check-mark icon-ui-gray" aria-label="check-mark "></span>
+                  <p class="trailer-1 leader-half"><code>icon-ui-check-mark icon-ui-gray</code></p>
+              </div>
+              <div class="block">
+              <span class="font-size-5 icon-ui-check-mark icon-ui-red" aria-label="check-mark "></span>
+              <p class="trailer-1 leader-half"><code>icon-ui-check-mark icon-ui-red</code></p>
+              </div>
+            </div>
+          {% endif %}
+
           {% if page.modifiers %}
             <h3 class="leader-2" tabindex="0">Modifiers</h3>
             <div class="styleguide-modifiers">

diff --git a/docs/source/layouts/_layout.html b/docs/source/layouts/_layout.html
@@ -95,38 +95,31 @@ <h2 class="side-nav-title padding-leader-half padding-trailer-half text-large">C
                 {% endif %}
               {% endfor %}
               </nav>
-              <div class="site-search js-site-search right">
-                <form class="site-search-form">
-                  <span class="icon-ui-search site-search-icon"></span>
-                  <input class="site-search-input" type="search" placeholder="Search">
-                  <span class="input-group-button">
-                    <button type="submit" class="btn btn-clear site-search-button">Go</button>
-                  </span>
-                </form>
-              </div>
+              <a href="#" class="icon-ui-search js-expanding-toggle top-nav-link right" data-expanding-nav="search">Search</a >
             </div>
             <div class="tablet-show">
               <a href="/" class="icon-ui-menu top-nav-title js-drawer-toggle" data-drawer="top-nav">Calcite Web</a>
             </div>
           </div>
         </div>
       </header>
-      <div class="expanding-nav js-expanding">
-        <section class="expanding-nav-menu js-expanding-nav" data-expanding-nav="one">
-          <div class="grid-container padding-trailer-half">
-            <div class="column-24">
-              <h1>Expanding Nav One</h1>
-            </div>
-          </div>
-        </section>
-        <section class="expanding-nav-menu js-expanding-nav" data-expanding-nav="two">
-          <div class="grid-container padding-trailer-half">
-            <div class="column-24">
-              <h1>Expanding Nav Two</h1>
-            </div>
-          </div>
-        </section>
-      </div>
+
+
+      <section class="expanding-nav js-expanding  panel panel-no-padding" data-expanding-nav="search">
+        <div class="grid-container padding-trailer-half padding-leader-1 padding-trailer-1">
+          <form method="GET" action="/search/" class="column-24">
+            <label>Search Calcite Web
+              <a href="#" class="icon-ui-close js-expanding-toggle right" data-expanding-nav="search"></a>
+              <div class="search-bar">
+                <input type='search' placeholder='Search'>
+                <button type="submit" class="search-submit icon-ui-search"></button>
+              </div>
+            </label>
+          </form>
+        </div>
+      </section>
+
+
       <!-- Secondary Nav Pattern -->
       <header class="sub-nav" role="banner">
         <div class="grid-container">
@@ -187,6 +180,7 @@ <h6>About Esri</h6>
             <section class="footer-social-nav leader-1">
               <a class="icon-social-twitter" aria-label="Esri on Twitter"  href="https://twitter.com/Esri/"></a>
               <a class="icon-social-facebook" aria-label="Esri on Facebook"  href="https://www.facebook.com/esrigis/"></a>
+              <a class="icon-social-instagram" aria-label="Esri on Instagram"  href="https://instagram.com/esrigram/"></a>
               <a class="icon-social-github" aria-label="Esri on GitHub"  href="http://esri.github.com/"></a>
               <a class="icon-social-contact" aria-label="Contact Esri"  href="http://www.esri.com/about-esri/contact/"></a>
             </section>

diff --git a/docs/source/patterns/_hero.md b/docs/source/patterns/_hero.md
@@ -0,0 +1 @@
+A `Hero` is an implementation of the Sub Nav pattern that allows for a big, splashy image and headline. A Hero can be accomplished entirely with markup, as below.
diff --git a/docs/source/patterns/sample-code/_expanding-nav.html b/docs/source/patterns/sample-code/_expanding-nav.html
@@ -0,0 +1,5 @@
+<a href="#" class="js-expanding-toggle" data-expanding-nav="foo">Open Expander</a >
+
+<section class="expanding-nav js-expanding" data-expanding-nav="foo">
+  <h1>Expander Expanded</h1>
+</section>
diff --git a/docs/source/patterns/sample-code/_footer.html b/docs/source/patterns/sample-code/_footer.html
@@ -33,6 +33,7 @@ <h6>About Esri</h6>
       <section class="footer-social-nav leader-1">
         <a class="icon-social-twitter" aria-label="Esri on Twitter"  href="https://twitter.com/Esri/"></a>
         <a class="icon-social-facebook" aria-label="Esri on Facebook"  href="https://www.facebook.com/esrigis/"></a>
+        <a class="icon-social-instagram" aria-label="Esri on Instagram"  href="https://instagram.com/esrigram/"></a>
         <a class="icon-social-github" aria-label="Esri on GitHub"  href="http://esri.github.com/"></a>
         <a class="icon-social-contact" aria-label="Contact Esri"  href="http://www.esri.com/about-esri/contact/"></a>
       </section>

diff --git a/docs/source/patterns/sample-code/_hero.html b/docs/source/patterns/sample-code/_hero.html
@@ -0,0 +1,17 @@
+<header class="sub-nav" role="banner">
+  <div class="grid-container">
+    <div class="column-24">
+      <nav class="breadcrumbs link-white leader-1">
+        <a href="#" class="crumb">Heros</a>
+        <a href="#" class="crumb">Animated</a>
+        <a href="#" class="crumb is-active">Adventure Time</a>
+      </nav>
+      <h1 class="sub-nav-title text-white leader-3">Heros</h1>
+      <p class="trailer-4 text-white">Don' forget Breakfast Princess, Emerald Princess, Engagement Ring Princess, Flame Princess, Ghost Princess, Hot Dog Princess, Lumpy Space Princess, Muscle Princess, Princess Bubblegum, Raggedy Princess, Skeleton Princess, Slime Princess, Turtle Princess, Wildberry Princess, Bee Princess, Bounce House Princess, Cotton Candy Princess, Crab Princess, Frozen Yogurt Princess, Elbow Princess, Embryo Princess, Gridface Princess, Jungle Princess, Laurel Princess, Lizard Princess, Old Lady Princess, Peanut Princess, Princess Beautiful, Princess Monster Wife, Princess Princess Princess, Purple Princess, Space Angel Princess, Strudel Princess, and Toast Princess.</p>
+      <nav class="sub-nav-list" role="navigation" aria-labelledby="subnav">
+        <a class="sub-nav-link is-active" href="#">Jake the Dog</a>
+        <a class="sub-nav-link" href="#">Finn the Human</a>
+      </nav>
+    </div>
+  </div>
+</header>
diff --git a/docs/source/table_of_contents.yml b/docs/source/table_of_contents.yml
@@ -282,9 +282,9 @@ icons:
         - title: 'Icon Font'
           id: '498a8593-caea-4ea3-8d50-1b60f923ff5b'
           link: icon-font
-        - title: 'Calcite Icons'
-          id: '6587644f-5306-43b7-b736-b02d0605516c'
-          link: calcite-icons
+        - title: 'Icon Font Colors'
+          id: '498a8593-caea-4ea3-8d50-1b60f923ff5b'
+          link: icon-font-colors
 
 color:
   title: 'Color'
@@ -491,10 +491,6 @@ patterns:
           id: '4fd8bd45-2b8e-4a40-af68-fa96e6de13af'
           link: top-nav
           modifiers: true
-        - title: 'Site Search'
-          id: b9892635-a78f-4239-bf21-a47dfd380fba
-          link: site-search
-          modifiers: true
         - title: 'User Sign In'
           id: 'b5e31f9b-4f04-40bc-9dde-e56f24b4604d'
           link: user-sign-in
@@ -507,6 +503,10 @@ patterns:
           id: '1636ba83-321f-4bbd-8f20-a9ff6c749f41'
           link: sub-nav
           modifiers: true
+        - title: 'Hero'
+          id: 'dd28ebbf-6703-4677-95e6-b7111ee278dc'
+          link: hero
+          modifiers: true
         - title: 'Third Nav'
           id: 'a54ce149-a63f-4e69-9fb4-671880061a40'
           link: third-nav
@@ -544,6 +544,7 @@ patterns:
         - title: 'Expanding Nav'
           id: '60b94e36-5263-494d-85a5-828b4379d6dd'
           link: expanding-nav
+          modifiers: true
 sass:
   title: 'Sass'
   base: sass

diff --git a/lib/js/calcite-web.js b/lib/js/calcite-web.js
@@ -331,25 +331,23 @@
   // show and hide exanding nav located under topnav
   calcite.expandingNav = function (domNode) {
     var toggles = findElements('.js-expanding-toggle', domNode);
-    var expanders = findElements('.js-expanding', domNode);
-    var sections = document.querySelectorAll('.js-expanding-nav');
+    var sections = document.querySelectorAll('.js-expanding');
 
     toggles.forEach(function (toggle) {
       addEvent(toggle, click(), function (e) {
         preventDefault(e);
 
         var sectionId = toggle.getAttribute('data-expanding-nav');
-        var section = document.querySelector('.js-expanding-nav[data-expanding-nav="' + sectionId + '"]');
-        var expander = closest('js-expanding', section);
-        var isOpen = hasClass(expander, 'is-active');
+        var section = document.querySelector('.js-expanding[data-expanding-nav="' + sectionId + '"]');
+        var isOpen = hasClass(section, 'is-active');
         var shouldClose = hasClass(section, 'is-active');
 
         toggleActive(sections, section);
 
         if (isOpen && shouldClose) {
-          removeClass(expander, 'is-active');
+          removeClass(section, 'is-active');
         } else {
-          addClass(expander, 'is-active');
+          addClass(section, 'is-active');
         }
       });
     });

diff --git a/lib/sass/calcite-web/base/_reset.scss b/lib/sass/calcite-web/base/_reset.scss
@@ -58,6 +58,7 @@
     overflow: hidden;
   }
 
+  video,
   img {
     max-width: 100%;
     height: auto;

diff --git a/lib/sass/calcite-web/components/_breadcrumbs.scss b/lib/sass/calcite-web/components/_breadcrumbs.scss
@@ -28,6 +28,7 @@
 
     &.is-active {
       font-weight: 600;
+      text-decoration: underline;
       &:after {
         content: none;
       }

diff --git a/lib/sass/calcite-web/components/_loader.scss b/lib/sass/calcite-web/components/_loader.scss
@@ -13,6 +13,7 @@ $loader-delay: 0.16s;
 
 @mixin loader() {
   display: none;
+  position: relative;
   &.is-active {
     display: block;
   }

diff --git a/lib/sass/calcite-web/components/_panel.scss b/lib/sass/calcite-web/components/_panel.scss
@@ -6,8 +6,8 @@
 
 @mixin panel() {
   @include clearfix();
-  background-color: $lightest-gray;
-  border: 1px solid $lighter-gray;
+  background-color: $off-white;
+  border: 1px solid $lightest-gray;
   padding: $baseline;
   & > :last-child {
     margin-bottom: 0;

diff --git a/lib/sass/calcite-web/patterns/_accordion.scss b/lib/sass/calcite-web/patterns/_accordion.scss
@@ -6,15 +6,15 @@
 
 @mixin accordion(){
   @extend .side-nav;
+  @include icon-font();
 }
   @mixin accordion-section() {
     &.is-active {
       .accordion-content {
         display: block;
       }
       .accordion-title:before {
-        content: $dstri;
-        @include font-size(0);
+        content: "\e608";
       }
     }
   }
@@ -24,9 +24,18 @@
     cursor: pointer;
     @include transition(all, $transition);
     &:before {
-      content: $rtri;
-      padding-right: 0.5em;
-      @include font-size(-6);
+      @include font-size(-3);
+      content: "\e607";
+      font-family: 'CalciteWebCoreIcons';
+      padding-right: 0.33em;
+      speak: none;
+      font-style: normal;
+      font-weight: normal;
+      font-variant: normal;
+      text-transform: none;
+      line-height: 1;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
     }
     &:focus,
     &:hover {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		A set of helper classes are available to simply change the color of an icon without affecting text within the same element.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		A `Hero` is an implementation of the Sub Nav pattern that allows for a big, splashy image and headline. A Hero can be accomplished entirely with markup, as below.
-Original file line number
+Diff line change
@@ Expand Up / @@ -58,6 +58,7 @@ @@
         overflow: hidden;
       }
+      video,
       img {
         max-width: 100%;
         height: auto;
@@ Expand Down @@