feat(styles): Add tabs element (#103)

* Add tabs scaffold * Add basic tabs styles * Add tabs element * Update tabs element * Update doc * Add usage example in a layout * Improve feedback * Add test scaffold * Update sidebar example * Update sidebar-nav-bot example * Update map-wrapper examples * Improve tabs documentation * Use Netlify for documentation (#104) * Test netlify * Don't redirect everything * Trigger deploy * Fix tabs mixin * Add tabs test * Fix border size * Fix padding * Remove text-align: center * Allow links inside tabs * Update tabs examples * Update examples with links * Fix test urls * Remove flex-shrink * Remove focus when tab is active * Update toolbar-tabs test * Fix linter * Fix xl tabs * Add tests for accesible tabs * Move .as-tabs class to ul element * Minor PR fixes
CartoDB · Jul 31, 2018 · 8b9571c · 8b9571c
1 parent 14103c8
commit 8b9571c
Show file tree

Hide file tree

Showing 23 changed files with 381 additions and 103 deletions.
diff --git a/_redirects b/_redirects
@@ -0,0 +1 @@
+/    /catalog/index.html   200
diff --git a/catalog/index.html b/catalog/index.html
@@ -25,14 +25,14 @@
     Catalog.render({
       title: 'Airship',
       responsiveSizes: [
-        {name: 'mobile', width: 375, height: 667},
-        {name: 'desktop', width: 1920, height: 1080},
+        { name: 'mobile', width: 375, height: 667 },
+        { name: 'desktop', width: 1920, height: 1080 },
       ],
       pages: [
         {
-          path: '/',             // The path where the page can be accessed
-          title: 'Introduction', // The page title
-          src: 'intro.md'   // Path to the Markdown document
+          path: '/',
+          title: 'Introduction',
+          src: 'intro.md'
         },
         {
           title: 'Layout',
@@ -86,6 +86,11 @@
               path: '/styles/typography',
               title: 'Typography',
               src: '../packages/styles/src/core/typography/README.md'
+            },
+            {
+              path: '/styles/tabs',
+              title: 'Tabs',
+              src: '../packages/styles/src/tabs/README.md'
             }
           ]
         }

diff --git a/examples/layouts/common/tabs.js b/examples/layouts/common/tabs.js
@@ -68,8 +68,8 @@ function showPanel(className, visible) {
 }
 
 function setActiveTab(target) {
-  document.querySelector('.as-toolbar-tabs .as-toolbar-tabs__item--active').classList.remove('as-toolbar-tabs__item--active');
-  target.classList.add('as-toolbar-tabs__item--active');
+  document.querySelector('.as-toolbar-tabs .as-tabs__item--active').classList.remove('as-tabs__item--active');
+  target.classList.add('as-tabs__item--active');
 }
 
 function _toggleDrawer() {

diff --git a/examples/layouts/generic.html b/examples/layouts/generic.html
@@ -28,15 +28,18 @@
 <body class="as-app as-app--nav-top">
   <header class="as-toolbar">
     <button onclick="_toggleDrawer()" class="as-toolbar__item as-toolbar__toggle">
-        <img src="https://material.io/tools/icons/static/icons/baseline-menu-24px.svg" alt="">
+      <img src="https://material.io/tools/icons/static/icons/baseline-menu-24px.svg" alt="">
     </button>
     <li class="as-toolbar__item">
-      <svg width="130px" height="36px" viewBox="0 0 92 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="filter: invert(1);">
+      <svg width="130px" height="36px" viewBox="0 0 92 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+        style="filter: invert(1);">
         <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
           <g transform="translate(-162.000000, -282.000000)" fill="#FFFFFF">
             <g transform="translate(162.000000, 282.000000)">
-              <path d="M74,36 C83.9411255,36 92,27.9411255 92,18 C92,8.0588745 83.9411255,0 74,0 C64.0588745,0 56,8.0588745 56,18 C56,27.9411255 64.0588745,36 74,36 Z" id="halo" fill-opacity="0.200000018" style="fill: #FFF;"></path>
-              <path d="M6.25280899,23.981602 C8.76747566,23.981602 10.220757,22.882802 11.2984713,21.390402 L8.9144367,19.684802 C8.22861851,20.521202 7.52647133,21.078802 6.33445401,21.078802 C4.73421159,21.078802 3.60751029,19.734002 3.60751029,18.012002 L3.60751029,17.979202 C3.60751029,16.306402 4.73421159,14.928802 6.33445401,14.928802 C7.4284973,14.928802 8.1796315,15.470002 8.83279168,16.273602 L11.2168263,14.420402 C10.204428,13.026402 8.70215964,12.042402 6.36711202,12.042402 C2.9053631,12.042402 0.358038428,14.666402 0.358038428,18.012002 L0.358038428,18.044802 C0.358038428,21.472402 2.98700813,23.981602 6.25280899,23.981602 L6.25280899,23.981602 Z M16.732047,23.752002 L20.0468349,23.752002 L20.8632851,21.685602 L25.2884453,21.685602 L26.1048955,23.752002 L29.5013284,23.752002 L24.6352851,12.190002 L21.5817613,12.190002 L16.732047,23.752002 Z M21.7940384,19.209202 L23.0840297,15.962002 L24.357692,19.209202 L21.7940384,19.209202 Z M35.6697093,23.752002 L38.8375361,23.752002 L38.8375361,20.275202 L40.2418305,20.275202 L42.5442201,23.752002 L46.1855881,23.752002 L43.4586443,19.750402 C44.8792677,19.143602 45.810021,17.979202 45.810021,16.208002 L45.810021,16.175202 C45.810021,15.043602 45.4671119,14.174402 44.7976227,13.502002 C44.0301595,12.731202 42.8218132,12.272002 41.0746097,12.272002 L35.6697093,12.272002 L35.6697093,23.752002 Z M38.8375361,17.782402 L38.8375361,15.010802 L40.9276487,15.010802 C41.9727049,15.010802 42.6421941,15.470002 42.6421941,16.388402 L42.6421941,16.421202 C42.6421941,17.257602 42.005363,17.782402 40.9439777,17.782402 L38.8375361,17.782402 Z M55.2605317,23.752002 L58.4283585,23.752002 L58.4283585,15.060002 L61.8574495,15.060002 L61.8574495,12.272002 L51.8477698,12.272002 L51.8477698,15.060002 L55.2605317,15.060002 L55.2605317,23.752002 Z M74,24 C77.3137085,24 80,21.3137085 80,18 C80,14.6862915 77.3137085,12 74,12 C70.6862915,12 68,14.6862915 68,18 C68,21.3137085 70.6862915,24 74,24 Z" style="fill: #FFF;"></path>
+              <path d="M74,36 C83.9411255,36 92,27.9411255 92,18 C92,8.0588745 83.9411255,0 74,0 C64.0588745,0 56,8.0588745 56,18 C56,27.9411255 64.0588745,36 74,36 Z"
+                id="halo" fill-opacity="0.200000018" style="fill: #FFF;"></path>
+              <path d="M6.25280899,23.981602 C8.76747566,23.981602 10.220757,22.882802 11.2984713,21.390402 L8.9144367,19.684802 C8.22861851,20.521202 7.52647133,21.078802 6.33445401,21.078802 C4.73421159,21.078802 3.60751029,19.734002 3.60751029,18.012002 L3.60751029,17.979202 C3.60751029,16.306402 4.73421159,14.928802 6.33445401,14.928802 C7.4284973,14.928802 8.1796315,15.470002 8.83279168,16.273602 L11.2168263,14.420402 C10.204428,13.026402 8.70215964,12.042402 6.36711202,12.042402 C2.9053631,12.042402 0.358038428,14.666402 0.358038428,18.012002 L0.358038428,18.044802 C0.358038428,21.472402 2.98700813,23.981602 6.25280899,23.981602 L6.25280899,23.981602 Z M16.732047,23.752002 L20.0468349,23.752002 L20.8632851,21.685602 L25.2884453,21.685602 L26.1048955,23.752002 L29.5013284,23.752002 L24.6352851,12.190002 L21.5817613,12.190002 L16.732047,23.752002 Z M21.7940384,19.209202 L23.0840297,15.962002 L24.357692,19.209202 L21.7940384,19.209202 Z M35.6697093,23.752002 L38.8375361,23.752002 L38.8375361,20.275202 L40.2418305,20.275202 L42.5442201,23.752002 L46.1855881,23.752002 L43.4586443,19.750402 C44.8792677,19.143602 45.810021,17.979202 45.810021,16.208002 L45.810021,16.175202 C45.810021,15.043602 45.4671119,14.174402 44.7976227,13.502002 C44.0301595,12.731202 42.8218132,12.272002 41.0746097,12.272002 L35.6697093,12.272002 L35.6697093,23.752002 Z M38.8375361,17.782402 L38.8375361,15.010802 L40.9276487,15.010802 C41.9727049,15.010802 42.6421941,15.470002 42.6421941,16.388402 L42.6421941,16.421202 C42.6421941,17.257602 42.005363,17.782402 40.9439777,17.782402 L38.8375361,17.782402 Z M55.2605317,23.752002 L58.4283585,23.752002 L58.4283585,15.060002 L61.8574495,15.060002 L61.8574495,12.272002 L51.8477698,12.272002 L51.8477698,15.060002 L55.2605317,15.060002 L55.2605317,23.752002 Z M74,24 C77.3137085,24 80,21.3137085 80,18 C80,14.6862915 77.3137085,12 74,12 C70.6862915,12 68,14.6862915 68,18 C68,21.3137085 70.6862915,24 74,24 Z"
+                style="fill: #FFF;"></path>
             </g>
           </g>
         </g>
@@ -65,13 +68,13 @@
     </nav>
   </header>
 
-  <nav class="as-toolbar-tabs">
-    <span onclick="showMap(event)" class="as-toolbar-tabs__item as-toolbar-tabs__item--active">MAP</span>
-    <span onclick="showLeft(event)" class="as-toolbar-tabs__item">LEFT</span>
-    <span onclick="showRight(event)" class="as-toolbar-tabs__item">RIGHT</span>
-    <span onclick="showLegends(event)" class="as-toolbar-tabs__item">LEGENDS</span>
-    <span onclick="showBottom(event)" class=" as-toolbar-tabs__item">BOTTOM</span>
-  </nav>
+  <div role="tablist" class="as-toolbar-tabs as-tabs as-tabs--xl" >
+    <button onclick="showMap(event)" role="tab" class="as-tabs__item as-tabs__item--active">MAP</button>
+    <button onclick="showLeft(event)" role="tab" class="as-tabs__item">LEFT</button>
+    <button onclick="showRight(event)" role="tab" class="as-tabs__item">RIGHT</button>
+    <button onclick="showLegends(event)" role="tab" class="as-tabs__item">LEGENDS</button>
+    <button onclick="showBottom(event)" role="tab" class="as-tabs__item">BOTTOM</button>
+  </div>
 
   <main class="as-app-content">
     <aside class="as-sidebar as-sidebar--left">
@@ -120,4 +123,5 @@
   <script defer src="./common/map.js"></script>
   <script defer src="./common/tabs.js"></script>
 </body>
+
 </html>
diff --git a/examples/layouts/map-wrapper/map-wrapper-bottom-legends.html b/examples/layouts/map-wrapper/map-wrapper-bottom-legends.html
@@ -24,11 +24,11 @@
 </head>
 
 <body class="as-app">
-  <nav class="as-toolbar-tabs">
-    <span onclick="showMap(event)" class="as-toolbar-tabs__item as-toolbar-tabs__item--active">MAP</span>
-    <span onclick="showLegends(event)" class="as-toolbar-tabs__item">LEGENDS</span>
-    <span onclick="showBottom(event)" class="as-toolbar-tabs__item">BOTTOM</span>
-  </nav>
+  <div role="tablist" class="as-toolbar-tabs as-tabs">
+    <button onclick="showMap(event)" role="tab" class="as-tabs__item as-tabs__item--active">MAP</button>
+    <button onclick="showLegends(event)" role="tab" class="as-tabs__item">LEGENDS</button>
+    <button onclick="showBottom(event)" role="tab" class="as-tabs__item">BOTTOM</button>
+  </div>
 
   <main class="as-app-content">
     <div class="as-map-wrapper">

diff --git a/examples/layouts/map-wrapper/map-wrapper-bottom.html b/examples/layouts/map-wrapper/map-wrapper-bottom.html
@@ -24,10 +24,10 @@
 </head>
 
 <body class="as-app">
-  <nav class="as-toolbar-tabs">
-    <span onclick="showMap(event)" class="as-toolbar-tabs__item as-toolbar-tabs__item--active">MAP</span>
-    <span onclick="showBottomPanel(event)" class="as-toolbar-tabs__item">PANEL</span>
-  </nav>
+  <div role="tablist" class="as-toolbar-tabs as-tabs">
+    <button onclick="showMap(event)" role="tab" class="as-tabs__item as-tabs__item--active">MAP</button>
+    <button onclick="showBottomPanel(event)" role="tab" class="as-tabs__item">PANEL</button>
+  </div>
 
   <main class="as-app-content">
     <div class="as-map-wrapper">

diff --git a/examples/layouts/map-wrapper/map-wrapper-legends.html b/examples/layouts/map-wrapper/map-wrapper-legends.html
@@ -24,10 +24,10 @@
 </head>
 
 <body class="as-app">
-  <nav class="as-toolbar-tabs">
-    <span onclick="showMap(event)" class="as-toolbar-tabs__item as-toolbar-tabs__item--active">MAP</span>
-    <span onclick="showLegends(event)" class="as-toolbar-tabs__item">LEGENDS</span>
-  </nav>
+  <div role="tablist" class="as-toolbar-tabs as-tabs">
+    <button onclick="showMap(event)" role="tab" class="as-tabs__item as-tabs__item--active">MAP</button>
+    <button onclick="showLegends(event)" role="tab" class="as-tabs__item">LEGENDS</button>
+  </div>
 
   <main class="as-app-content">
     <div class="as-map-wrapper">

diff --git a/examples/layouts/sidebar/sidebar-nav-bot.html b/examples/layouts/sidebar/sidebar-nav-bot.html
@@ -46,11 +46,11 @@ <h1>Right Sidebar</h1>
     </aside>
   </main>
 
-  <nav class="as-toolbar-tabs">
-    <span onclick="showMap(event)" class="as-toolbar-tabs__item as-toolbar-tabs__item--active">MAP</span>
-    <span onclick="showLeft(event)" class="as-toolbar-tabs__item">LEFT </span>
-    <span onclick="showRight(event)" class="as-toolbar-tabs__item">RIGHT</span>
-  </nav>
+  <div role="tablist" class="as-toolbar-tabs as-tabs">
+    <button onclick="showMap(event)" role="tab" class="as-tabs__item as-tabs__item--active">MAP</button>
+    <button onclick="showLeft(event)" role="tab" class="as-tabs__item">LEFT</button>
+    <button onclick="showRight(event)" role="tab" class="as-tabs__item">RIGHT</button>
+  </div>
 
   <script defer src="../common/map.js"></script>
   <script defer src="../common/tabs.js"></script>

diff --git a/examples/layouts/sidebar/sidebar.html b/examples/layouts/sidebar/sidebar.html
@@ -24,11 +24,11 @@
 </head>
 
 <body class="as-app as-app--nav-top">
-  <nav class="as-toolbar-tabs">
-    <span onclick="showMap(event)" class="as-toolbar-tabs__item as-toolbar-tabs__item--active">MAP</span>
-    <span onclick="showLeft(event)" class="as-toolbar-tabs__item">LEFT </span>
-    <span onclick="showRight(event)" class="as-toolbar-tabs__item">RIGHT</span>
-  </nav>
+  <div role="tablist" class="as-toolbar-tabs as-tabs">
+    <button onclick="showMap(event)" role="tab" class="as-tabs__item as-tabs__item--active">MAP</button>
+    <button onclick="showLeft(event)" role="tab" class="as-tabs__item">LEFT</button>
+    <button onclick="showRight(event)" role="tab" class="as-tabs__item">RIGHT</button>
+  </div>
 
   <main class="as-app-content">
     <aside class="as-sidebar as-sidebar--left as-sidebar--xl">

diff --git a/packages/styles/src/airship.scss b/packages/styles/src/airship.scss
@@ -1 +1,2 @@
 @import './core/core.scss';
+@import './tabs/tabs.scss';
diff --git a/packages/styles/src/core/layout/sidebar/README.md b/packages/styles/src/core/layout/sidebar/README.md
@@ -26,6 +26,12 @@ responsive: true
 lang: html
 ---
 <body class="as-app as-app--nav-top">
+  <div role="tablist" class="as-toolbar-tabs as-tabs">
+    <button onclick="showMap(event)" role="tab" class="as-tabs__item as-tabs__item--active">MAP</button>
+    <button onclick="showLeft(event)" role="tab" class="as-tabs__item">LEFT</button>
+    <button onclick="showRight(event)" role="tab" class="as-tabs__item">RIGHT</button>
+  </div>
+
   <main class="as-app-content">
     <aside class="as-sidebar as-sidebar--left as-sidebar--xl">
       <h1>Left Sidebar (XL)</h1>
@@ -61,7 +67,7 @@ responsive: true
 ```
 
 
-```code 
+```code
 lang: html
 ---
 <body class="as-app as-app--nav-top">
@@ -86,12 +92,12 @@ lang: html
       </p>
     </aside>
   </main>
-  
+
   <!-- Tabs on bottom! -->
-  <nav class="as-toolbar-tabs">
-    <span onclick="_showTab0(event)" class="as-toolbar-tabs__item">LEFT </span>
-    <span onclick="_showTab1(event)" class="as-toolbar-tabs__item as-toolbar-tabs__item--active">MAP</span>
-    <span onclick="_showTab2(event)" class="as-toolbar-tabs__item">RIGHT</span>
-  </nav>
-</body> 
-  ```
+  <div role="tablist" class="as-toolbar-tabs as-tabs">
+    <button onclick="showMap(event)" role="tab" class="as-tabs__item as-tabs__item--active">MAP</button>
+    <button onclick="showLeft(event)" role="tab" class="as-tabs__item">LEFT</button>
+    <button onclick="showRight(event)" role="tab" class="as-tabs__item">RIGHT</button>
+  </div>
+</body>
+  ```
diff --git a/packages/styles/src/core/layout/toolbar/_tabs.scss b/packages/styles/src/core/layout/toolbar/_tabs.scss
diff --git a/packages/styles/src/core/layout/toolbar/_toolbar.scss b/packages/styles/src/core/layout/toolbar/_toolbar.scss
@@ -1,5 +1,4 @@
 @import '_actions';
-@import '_tabs';
 
 .as-toolbar {
   --toolbar-bg-color: $color-brand-20;
@@ -39,3 +38,9 @@
     }
   }
 }
+
+.as-toolbar-tabs {
+  @media all and (min-width: $tablet-breakpoint) {
+    display: none !important;
+  }
+}
diff --git a/packages/styles/src/core/layout/toolbar/test/img/layout.tabs-mobile-reference.png b/packages/styles/src/core/layout/toolbar/test/img/layout.tabs-mobile-reference.png
diff --git a/packages/styles/src/core/layout/toolbar/test/tabs.html b/packages/styles/src/core/layout/toolbar/test/tabs.html
@@ -1,27 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Generic Layout</title>
-    <link rel="stylesheet" href="../../../../../dist/airship.css">
 
-    <style>
-      html,
-      body {
-        margin: 0;
-        padding: 0;
-      }
-    </style>
-  </head>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Generic Layout</title>
+  <link rel="stylesheet" href="../../../../../dist/airship.css">
+
+  <style>
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+    }
+  </style>
+</head>
+
+<body class="as-app">
+  <div class="as-toolbar-tabs as-tabs" role="tablist">
+    <button role="tab" class="as-tabs__item as-tabs__item--active">MAP</button>
+    <button role="tab" class="as-tabs__item">LEFT</button>
+    <button role="tab" class="as-tabs__item">RIGHT</button>
+    <button role="tab" class="as-tabs__item">PANELS</button>
+  </div>
+</body>
 
-  <body class="as-app">
-    <nav class="as-toolbar-tabs">
-      <span onclick="_showTab1(event)" class="as-toolbar-tabs__item as-toolbar-tabs__item--active">MAP</span>
-      <span onclick="_showTab0(event)" class="as-toolbar-tabs__item">LEFT</span>
-      <span onclick="_showTab2(event)" class="as-toolbar-tabs__item">RIGHT</span>
-      <span onclick="_showTab3(event)" class="as-toolbar-tabs__item">PANELS</span>
-    </nav>
-  </body>
 </html>
diff --git a/packages/styles/src/core/lib/_reset.scss b/packages/styles/src/core/lib/_reset.scss
@@ -149,3 +149,7 @@ table {
 main {
   display: block;
 }
+
+button {
+  border: none;
+}