From e17cbd3efbcaf2c9bc6368757b5f9650cb74f407 Mon Sep 17 00:00:00 2001
From: ludwiczakpawel <ludwiczakpawel@gmail.com>
Date: Thu, 14 May 2020 11:38:57 +0200
Subject: [PATCH] NOT MERGE Add tabs to Crayons and to the notifications page
 (#7737)

* tabs

* frontned

* notifications tabs

* ntofiications

* .

* doc

* names instead of slugs

* flare tag line height

* .

* js
---
 .../initializers/initNotifications.js         |  25 ++--
 app/assets/stylesheets/components/forms.scss  |   2 +-
 .../stylesheets/components/navigation.scss    |  45 ------
 app/assets/stylesheets/components/tabs.scss   | 136 ++++++++++++++++++
 app/assets/stylesheets/config/_colors.scss    |  13 ++
 app/assets/stylesheets/crayons.scss           |   1 +
 app/assets/stylesheets/notifications.scss     |  14 --
 app/assets/stylesheets/themes/hacker.scss     |  13 ++
 app/assets/stylesheets/themes/minimal.scss    |  13 ++
 app/assets/stylesheets/themes/night.scss      |  31 ++--
 app/assets/stylesheets/themes/pink.scss       |  13 ++
 app/views/notifications/index.html.erb        | 106 ++++----------
 app/views/pages/crayons.html.erb              | 114 +++++++++++++--
 13 files changed, 349 insertions(+), 177 deletions(-)
 create mode 100644 app/assets/stylesheets/components/tabs.scss

diff --git a/app/assets/javascripts/initializers/initNotifications.js b/app/assets/javascripts/initializers/initNotifications.js
index 0c4da187c..b4bf99196 100644
--- a/app/assets/javascripts/initializers/initNotifications.js
+++ b/app/assets/javascripts/initializers/initNotifications.js
@@ -129,23 +129,14 @@ function listenForNotificationsBellClick() {
 }
 
 function initFilter() {
-  var navFilterMenu = document.getElementsByClassName("notifications-filter__dropdown__menu");
-  var navFilterSelect = document.getElementById("notifications-filter__select");
-
-  for (var i = 0; i < navFilterMenu.length; i++) {
-    document.getElementById("notifications-filter__menu-overlay").classList.remove("showing");
-  }
-
-  if (navFilterSelect) {
-    navFilterSelect.onclick = function(){
-      document.getElementById("notifications-filter__menu-overlay").classList.add("showing");
-    }
-  }
-
-  for (var i = 0; i < navFilterMenu.length; i++) {
-    navFilterMenu[i].onclick = function(event){
-      document.getElementById("notifications-filter__menu-overlay").classList.remove("showing");
-    }
+  const notificationsFilterSelect = document.getElementById(
+    'notifications-filter__select',
+  );
+  const changeNotifications = (event) => {
+    window.location.href = event.target.value;
+  };
+  if (notificationsFilterSelect) {
+    notificationsFilterSelect.addEventListener('change', changeNotifications);
   }
 }
 
diff --git a/app/assets/stylesheets/components/forms.scss b/app/assets/stylesheets/components/forms.scss
index ec47b5d97..626c2b3fd 100644
--- a/app/assets/stylesheets/components/forms.scss
+++ b/app/assets/stylesheets/components/forms.scss
@@ -114,7 +114,7 @@
 // Selects
 .crayons-select {
   line-height: var(--lh-base);
-  padding: 0.5em;
+  padding: calc(0.5em - var(--border-width)) 0.5em;
   padding-right: var(--su-7);
   font-family: inherit;
   font-size: var(--fs-base);
diff --git a/app/assets/stylesheets/components/navigation.scss b/app/assets/stylesheets/components/navigation.scss
index a2cad414b..70ba03aab 100644
--- a/app/assets/stylesheets/components/navigation.scss
+++ b/app/assets/stylesheets/components/navigation.scss
@@ -117,48 +117,3 @@
     }
   }
 }
-
-.crayons-tabs {
-  display: flex;
-
-  .crayons-link {
-    padding: 0 0.5em;
-    position: relative;
-    display: inline-block;
-
-    &--current {
-      background: transparent;
-
-      &::after {
-        position: absolute;
-        left: 0.5em;
-        right: 0.5em;
-        bottom: -2px;
-        height: 2px;
-        content: '';
-        background-color: var(--accent-brand);
-      }
-    }
-  }
-
-  &--item {
-    padding: var(--su-3);
-    text-align: center;
-    width: 100%;
-
-    &--current {
-      border-bottom: 4px solid var(--accent-brand);
-
-      .crayons-tabs__label {
-        color: var(--link-color);
-        font-size: var(--fs-base);
-        font-weight: var(--fw-bold);
-      }
-    }
-
-    &:hover,
-    &:focus {
-      background-color: var(--base-10);
-    }
-  }
-}
diff --git a/app/assets/stylesheets/components/tabs.scss b/app/assets/stylesheets/components/tabs.scss
new file mode 100644
index 000000000..a53ddd497
--- /dev/null
+++ b/app/assets/stylesheets/components/tabs.scss
@@ -0,0 +1,136 @@
+@import '../config/import';
+
+.crayons-tabs {
+  // Setup
+  --border-width: 3px;
+  --tab-vertical-padding: var(--su-3);
+  --tab-horizontal-padding: var(--su-2);
+  --font-size: var(--fs-base);
+  display: flex;
+
+  @media (min-width: $breakpoint-s) {
+    --tab-vertical-padding: var(--su-2);
+  }
+
+  &--scrollable {
+    overflow-y: auto;
+    flex-wrap: nowrap;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  &__item {
+    padding: var(--tab-vertical-padding) var(--tab-horizontal-padding);
+    display: inline-block;
+    text-align: center;
+    outline: none;
+    font-size: var(--font-size);
+    line-height: var(--su-6);
+    text-decoration: none;
+    cursor: pointer;
+    color: var(--tab-color);
+    position: relative;
+    border-radius: var(--radius);
+    transition: all var(--transition-props);
+    width: 100%;
+
+    @media (min-width: $breakpoint-s) {
+      width: auto;
+      margin: 0 var(--su-1);
+    }
+
+    &::after {
+      display: none;
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: var(--border-width);
+      content: '';
+      background: var(--tab-bg-current);
+      border-radius: var(--radius);
+      transition: all var(--transition-props);
+
+      @media (min-width: $breakpoint-s) {
+        left: var(--tab-horizontal-padding);
+        right: var(--tab-horizontal-padding);
+      }
+    }
+
+    &:hover {
+      background: var(--tab-bg-hover);
+      color: var(--tab-color-hover);
+
+      &:after {
+        left: 0;
+        right: 0;
+        border-radius: 0 0 var(--radius) var(--radius);
+      }
+    }
+
+    &--current {
+      font-weight: var(--fw-medium);
+      color: var(--tab-color-current);
+
+      &::after {
+        display: block;
+      }
+    }
+  }
+
+  &--pills {
+    .crayons-tabs__item--current {
+      background: var(--tab-bg-current);
+      color: var(--tab-pill-color-current);
+
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  &--stacked {
+    flex-direction: column;
+    @media (min-width: $breakpoint-s) {
+      flex-direction: row;
+    }
+
+    .crayons-tabs__item {
+      margin: 0;
+
+      @media (min-width: $breakpoint-s) {
+        margin: 0 var(--su-1);
+      }
+    }
+  }
+
+  &--wrapped {
+    flex-wrap: wrap;
+
+    .crayons-tabs__item {
+      margin: var(--su-1);
+      width: auto;
+    }
+  }
+
+  &--muted {
+    .crayons-tabs__item {
+      color: var(--tab-muted-color);
+
+      &:hover {
+        color: var(--tab-muted-color-hover);
+        background: var(--tab-muted-bg-hover);
+      }
+
+      &:after {
+        background: var(--tab-muted-bg-current);
+      }
+    }
+
+    &.crayons-tabs--pills {
+      .crayons-tabs__item--current {
+        color: var(--tab-muted-color-current);
+        background: var(--tab-muted-bg-current);
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/config/_colors.scss b/app/assets/stylesheets/config/_colors.scss
index 741cfeb09..3dcf8dead 100644
--- a/app/assets/stylesheets/config/_colors.scss
+++ b/app/assets/stylesheets/config/_colors.scss
@@ -190,6 +190,19 @@
   --indicator-default-bg: var(--button-secondary-bg);
   --indicator-default-color: var(--button-secondary-color);
 
+  // Tabs
+  --tab-color: var(--base-80);
+  --tab-color-hover: var(--accent-brand);
+  --tab-color-current: var(--base-100);
+  --tab-bg-hover: var(--accent-brand-a10);
+  --tab-bg-current: var(--accent-brand);
+  --tab-muted-color: var(--base-80);
+  --tab-muted-color-hover: var(--base-90);
+  --tab-muted-color-current: var(--base-100);
+  --tab-muted-bg-hover: var(--base-a10);
+  --tab-muted-bg-current: var(--base-20);
+  --tab-pill-color-current: var(--base-inverted);
+  
   // Tags
   --tag-color: var(--base-70);
   --tag-color-hover: var(--base-100);
diff --git a/app/assets/stylesheets/crayons.scss b/app/assets/stylesheets/crayons.scss
index 4a6c49e04..01b05590a 100644
--- a/app/assets/stylesheets/crayons.scss
+++ b/app/assets/stylesheets/crayons.scss
@@ -20,4 +20,5 @@
 @import 'components/notices';
 @import 'components/snackbars';
 @import 'components/stories';
+@import 'components/tabs';
 @import 'components/tags';
diff --git a/app/assets/stylesheets/notifications.scss b/app/assets/stylesheets/notifications.scss
index f26c1e03b..f349975ca 100644
--- a/app/assets/stylesheets/notifications.scss
+++ b/app/assets/stylesheets/notifications.scss
@@ -432,20 +432,6 @@
   }
 }
 
-// Notifications filtering on mobile.
-.notifications-filter__tabs {
-  display: none;
-
-  // @media screen and (min-width: 950px) {
-  //   display: none;
-  // }
-
-  &.showing {
-    display: flex;
-  }
-  background: var(--base-inverted);
-}
-
 .notifications-filter__list {
   li {
     margin-bottom: var(--su-1);
diff --git a/app/assets/stylesheets/themes/hacker.scss b/app/assets/stylesheets/themes/hacker.scss
index 480c87ec3..98c80c103 100644
--- a/app/assets/stylesheets/themes/hacker.scss
+++ b/app/assets/stylesheets/themes/hacker.scss
@@ -180,6 +180,19 @@
   --indicator-default-bg: var(--button-secondary-bg);
   --indicator-default-color: var(--button-secondary-color);
 
+  // Tabs
+  --tab-color: var(--base-80);
+  --tab-color-hover: var(--accent-brand);
+  --tab-color-current: var(--base-100);
+  --tab-bg-hover: var(--accent-brand-a10);
+  --tab-bg-current: var(--accent-brand);
+  --tab-muted-color: var(--base-80);
+  --tab-muted-color-hover: var(--base-90);
+  --tab-muted-color-current: var(--base-100);
+  --tab-muted-bg-hover: var(--base-a10);
+  --tab-muted-bg-current: var(--base-20);
+  --tab-pill-color-current: var(--base-inverted);
+  
   // Tags
   --tag-color: var(--base-70);
   --tag-color-hover: var(--base-100);
diff --git a/app/assets/stylesheets/themes/minimal.scss b/app/assets/stylesheets/themes/minimal.scss
index b8ec1cebb..7fe73e5f5 100644
--- a/app/assets/stylesheets/themes/minimal.scss
+++ b/app/assets/stylesheets/themes/minimal.scss
@@ -178,6 +178,19 @@
   --indicator-default-bg: var(--button-secondary-bg);
   --indicator-default-color: var(--button-secondary-color);
 
+  // Tabs
+  --tab-color: var(--base-80);
+  --tab-color-hover: var(--accent-brand);
+  --tab-color-current: var(--base-100);
+  --tab-bg-hover: var(--accent-brand-a10);
+  --tab-bg-current: var(--accent-brand);
+  --tab-muted-color: var(--base-80);
+  --tab-muted-color-hover: var(--base-90);
+  --tab-muted-color-current: var(--base-100);
+  --tab-muted-bg-hover: var(--base-a10);
+  --tab-muted-bg-current: var(--base-20);
+  --tab-pill-color-current: var(--base-inverted);
+  
   // Tags
   --tag-color: var(--base-70);
   --tag-color-hover: var(--base-100);
diff --git a/app/assets/stylesheets/themes/night.scss b/app/assets/stylesheets/themes/night.scss
index 15ac0becd..043c6338d 100644
--- a/app/assets/stylesheets/themes/night.scss
+++ b/app/assets/stylesheets/themes/night.scss
@@ -36,10 +36,10 @@
   --base-inverted: #000;
 
   // Accent colors
-  --accent-brand: #3b49df;
-  --accent-brand-darker: #1827ce;
-  --accent-brand-lighter: #8d95f2;
-  --accent-brand-a10: #{rgba(#3b49df, 0.1)};
+  --accent-brand: #7b78ff;
+  --accent-brand-darker: #5855f3;
+  --accent-brand-lighter: #9896ff;
+  --accent-brand-a10: #{rgba(#7b78ff, 0.1)};
 
   // Success
   --accent-success: #26d9ca;
@@ -104,13 +104,13 @@
   --link-bg-current: var(--base-inverted);
 
   // Primary buttons
-  --button-primary-bg: var(--accent-success);
-  --button-primary-bg-hover: var(--accent-success-darker);
-  --button-primary-color: var(--base-0);
+  --button-primary-bg: var(--accent-brand);
+  --button-primary-bg-hover: var(--accent-brand-darker);
+  --button-primary-color: var(--base-inverted);
   --button-primary-color-hover: var(--base-inverted);
   //-- Inverted
-  --button-primary-inverted-bg: var(--accent-success);
-  --button-primary-inverted-bg-hover: var(--accent-success-darker);
+  --button-primary-inverted-bg: var(--accent-brand);
+  --button-primary-inverted-bg-hover: var(--accent-brand-darker);
   --button-primary-inverted-color: var(--base-0);
   --button-primary-inverted-color-hover: var(--base-0);
 
@@ -180,6 +180,19 @@
   --indicator-default-bg: var(--button-secondary-bg);
   --indicator-default-color: var(--button-secondary-color);
 
+  // Tabs
+  --tab-color: var(--base-80);
+  --tab-color-hover: var(--accent-brand-lighter);
+  --tab-color-current: var(--base-100);
+  --tab-bg-hover: var(--accent-brand-a10);
+  --tab-bg-current: var(--accent-brand);
+  --tab-muted-color: var(--base-80);
+  --tab-muted-color-hover: var(--base-90);
+  --tab-muted-color-current: var(--base-100);
+  --tab-muted-bg-hover: var(--base-a10);
+  --tab-muted-bg-current: var(--base-20);
+  --tab-pill-color-current: var(--base-inverted);
+  
   // Tags
   --tag-color: var(--base-70);
   --tag-color-hover: var(--base-100);
diff --git a/app/assets/stylesheets/themes/pink.scss b/app/assets/stylesheets/themes/pink.scss
index 76fa78772..e147f766f 100644
--- a/app/assets/stylesheets/themes/pink.scss
+++ b/app/assets/stylesheets/themes/pink.scss
@@ -178,6 +178,19 @@
   --indicator-dimmed-bg: var(--base-30);
   --indicator-dimmed-color: var(--base-70);
 
+  // Tabs
+  --tab-color: var(--base-80);
+  --tab-color-hover: var(--accent-brand);
+  --tab-color-current: var(--base-100);
+  --tab-bg-hover: var(--accent-brand-a10);
+  --tab-bg-current: var(--accent-brand);
+  --tab-muted-color: var(--base-80);
+  --tab-muted-color-hover: var(--base-90);
+  --tab-muted-color-current: var(--base-100);
+  --tab-muted-bg-hover: var(--base-a10);
+  --tab-muted-bg-current: var(--base-20);
+  --tab-pill-color-current: var(--base-inverted);
+  
   // Tags
   --tag-color: var(--base-70);
   --tag-color-hover: var(--base-100);
diff --git a/app/views/notifications/index.html.erb b/app/views/notifications/index.html.erb
index 16de20f6c..c20a3b8ca 100644
--- a/app/views/notifications/index.html.erb
+++ b/app/views/notifications/index.html.erb
@@ -29,7 +29,7 @@
             <% if @organizations.present? %>
               <header class="crayons-card__subheader">
                 <h4 class="crayons-card__subheader__title">
-                  @<%= @user.username %>
+                  <%= @user.name %>
                 </h4>
               </header>
             <% end %>
@@ -66,7 +66,7 @@
               <% @organizations.each do |org| %>
                 <header class="crayons-card__subheader">
                   <h4 class="crayons-card__subheader__title">
-                    @<%= org.slug %>
+                    <%= org.name %>
                   </h4>
                 </header>
                 <ul class="notifications-filter__list">
@@ -95,95 +95,43 @@
     </div>
     <div class="articles-list" id="articles-list">
 
-      <section class="notifications-filter__dropdown">
+      <section class="notifications-filter__dropdown s:flex-col">
         <% if @organizations.present? %>
-          <% if @selected_organization %>
-            <div aria-label="notifications-filter-menu">
-              <button type="button" id="notifications-filter__select" class="notifications-filter__dropdown__select">
-                  @<%= @selected_organization.slug %>
-                <%= inline_svg_tag("arrow-down-fill.svg", aria: true, class: "crayons-icon", title: "Arrow Down") %>
-              </button>
-            </div>
-          <% else %>
-            <div aria-label="notifications-filter-menu">
-              <button type="button" id="notifications-filter__select" class="notifications-filter__dropdown__select">
-                  @<%= current_user.username %>
-                <%= inline_svg_tag("arrow-down-fill.svg", aria: true, class: "crayons-icon", title: "Arrow Down") %>
-              </button>
-            </div>
-          <% end %>
-          <div class="notifications-filter__dropdown__menu-overlay" id="notifications-filter__menu-overlay">
-            <nav class="notifications-filter__dropdown__menu" aria-label="notifications-filter-menu">
-              <header class="notifications-filter__dropdown__header">
-                <h3 class="notifications-filter__dropdown__title">
-                  Filter
-                </h3>
-              </header>
-              <a href="/notifications" class="notifications-filter__dropdown__option <%= "selected" if params[:org_id].blank? %>">
-                <div class="notifications-filter__dropdown__label">
-                  <span class="notifications-filter__dropdown__label--title">
-                    <%= @user.name %>
-                  </span>
-                  <span class="notifications-filter__dropdown__label--subtitle">
-                    @<%= @user.username %> · Personal
-                  </span>
-                </div>
-                <div class="notifications-filter__icon">
-                  <%= inline_svg_tag("checkmark.svg", aria: true, class: "crayons-icon", title: "Checkmark") %>
-                </div>
-              </a>
+          <div class="p-2 s:inline-flex">
+            <select id="notifications-filter__select" class="crayons-select">
+              <option value="/notifications"><%= @user.name %></option>
               <% @organizations.each do |org| %>
-                <a href="/notifications/org/<%= org.id %>" class="notifications-filter__dropdown__option <%= "selected" if params[:org_id].to_i == org.id %>">
-                  <div class="notifications-filter__dropdown__label">
-                    <span class="notifications-filter__dropdown__label--title">
-                      <%= org.name %>
-                    </span>
-                    <span class="notifications-filter__dropdown__label--subtitle">
-                      @<%= org.slug %> · Organization
-                    </span>
-                  </div>
-                  <div class="notifications-filter__icon">
-                    <%= inline_svg_tag("checkmark.svg", aria: true, class: "crayons-icon", title: "Checkmark") %>
-                  </div>
-                </a>
+                <option value="/notifications/org/<%= org.id %>" <%= "selected" if params[:org_id].to_i == org.id %>><%= org.name %></option>
               <% end %>
-            </nav>
+            </select>
           </div>
         <% end %>
 
-        <div class="crayons-tabs notifications-filter__tabs <%= "showing" if params[:org_id].blank? %>">
-          <a class="crayons-tabs--item <%= "crayons-tabs--item--current" if params[:filter].blank? %>" href="/notifications">
-            <span class="crayons-tabs__label">
+        <div class="s:inline-flex">
+          <nav class="crayons-tabs notifications-filter__tabs <%= "hidden" if params[:org_id].present? %>">
+            <a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].blank? %>" href="/notifications">
               All
-            </span>
-          </a>
-          <a class="crayons-tabs--item <%= "crayons-tabs--item--current" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].blank? %>" href="/notifications/comments">
-            <span class="crayons-tabs__label">
+            </a>
+            <a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].blank? %>" href="/notifications/comments">
               Comments
-            </span>
-          </a>
-          <a class="crayons-tabs--item <%= "crayons-tabs--item--current" if params[:filter].to_s.casecmp("posts").zero? && params[:org_id].blank? %>" href="/notifications/posts">
-            <span class="crayons-tabs__label">
+            </a>
+            <a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].to_s.casecmp("posts").zero? && params[:org_id].blank? %>" href="/notifications/posts">
               Posts
-            </span>
-          </a>
-        </div>
-        <% if @organizations.present? %>
-          <% @organizations.each do |org| %>
-            <div class="crayons-tabs notifications-filter__tabs <%= "showing" if params[:org_id].to_i == org.id %>">
-              <a class="crayons-tabs--item <%= "crayons-tabs--item--current" if params[:filter].to_s.casecmp("org").zero? && params[:org_id].to_i == org.id %>" href="/notifications/org/<%= org.id %>">
-                <span class="crayons-tabs__label">
+            </a>
+          </nav>
+          <% if @organizations.present? %>
+            <% @organizations.each do |org| %>
+              <nav class="crayons-tabs notifications-filter__tabs <%= "hidden" unless params[:org_id].to_i == org.id %>">
+                <a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].to_s.casecmp("org").zero? && params[:org_id].to_i == org.id %>" href="/notifications/org/<%= org.id %>">
                   All
-                </span>
-              </a>
-              <a class="crayons-tabs--item <%= "crayons-tabs--item--current" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].to_i == org.id %>" href="/notifications/comments/<%= org.id %>">
-                <span class="crayons-tabs__label">
+                </a>
+                <a class="crayons-tabs__item <%= "crayons-tabs__item--current" if params[:filter].to_s.casecmp("comments").zero? && params[:org_id].to_i == org.id %>" href="/notifications/comments/<%= org.id %>">
                   Comments
-                </span>
-              </a>
-            </div>
+                </a>
+              </nav>
+            <% end %>
           <% end %>
-        <% end %>
+        </div>
       </section>
       <%= render "notifications_list", params: params %>
     </div>
diff --git a/app/views/pages/crayons.html.erb b/app/views/pages/crayons.html.erb
index 6fc2b1bfe..8445c6b66 100644
--- a/app/views/pages/crayons.html.erb
+++ b/app/views/pages/crayons.html.erb
@@ -1101,22 +1101,112 @@
 
 <div class="container">
   <div class="body">
-    <h2>Navigation: Tabs</h2>
-    <p>Use tabs as 2nd level navigation or filtering options.</p>
-    <p>Tabs can be created by also using <code>.crayons-link</code> elements but wrapped with extra container <code>.crayons-tabs</code>.</p>
+    <h2>Tabs</h2>
+    <p>...</p>
   </div>
-  <div class="crayons-tabs">
-    <a href="#" class="crayons-link crayons-link--current">Feed</a>
-    <a href="#" class="crayons-link">Popular</a>
-    <a href="#" class="crayons-link">Latest</a>
+
+  <div>
+    <nav class="crayons-tabs mb-9">
+      <a href="#" class="crayons-tabs__item">Week</a>
+      <a href="#" class="crayons-tabs__item crayons-tabs__item--current">Month</a>
+      <a href="#" class="crayons-tabs__item">Year</a>
+      <a href="#" class="crayons-tabs__item">Infinity</a>
+    </nav>
+
+    <nav class="crayons-tabs crayons-tabs--pills mb-9">
+      <a href="#" class="crayons-tabs__item">Week</a>
+      <a href="#" class="crayons-tabs__item crayons-tabs__item--current">Month</a>
+      <a href="#" class="crayons-tabs__item">Year</a>
+      <a href="#" class="crayons-tabs__item">Infinity</a>
+    </nav>
+
+    <nav class="crayons-tabs crayons-tabs--muted mb-9">
+      <a href="#" class="crayons-tabs__item">Week</a>
+      <a href="#" class="crayons-tabs__item crayons-tabs__item--current">Month</a>
+      <a href="#" class="crayons-tabs__item">Year</a>
+      <a href="#" class="crayons-tabs__item">Infinity</a>
+    </nav>
+
+    <nav class="crayons-tabs crayons-tabs--pills crayons-tabs--muted mb-9">
+      <a href="#" class="crayons-tabs__item">Week</a>
+      <a href="#" class="crayons-tabs__item crayons-tabs__item--current">Month</a>
+      <a href="#" class="crayons-tabs__item">Year</a>
+      <a href="#" class="crayons-tabs__item">Infinity</a>
+    </nav>
+
+    <nav class="crayons-tabs crayons-tabs--scrollable mb-9">
+      <a href="#" class="crayons-tabs__item">Feed</a>
+      <a href="#" class="crayons-tabs__item">Week</a>
+      <a href="#" class="crayons-tabs__item crayons-tabs__item--current">Month</a>
+      <a href="#" class="crayons-tabs__item">Year</a>
+      <a href="#" class="crayons-tabs__item">Infinity</a>
+      <a href="#" class="crayons-tabs__item">Latest</a>
+    </nav>
+
+    <nav class="crayons-tabs crayons-tabs--stacked crayons-tabs--pills mb-9">
+      <a href="#" class="crayons-tabs__item">Week</a>
+      <a href="#" class="crayons-tabs__item crayons-tabs__item--current">Month</a>
+      <a href="#" class="crayons-tabs__item">Year</a>
+      <a href="#" class="crayons-tabs__item">Infinity</a>
+    </nav>
+
+    <nav class="crayons-tabs crayons-tabs--wrapped crayons-tabs--pills mb-9">
+      <a href="#" class="crayons-tabs__item">Feed</a>
+      <a href="#" class="crayons-tabs__item">Week</a>
+      <a href="#" class="crayons-tabs__item crayons-tabs__item--current">Month</a>
+      <a href="#" class="crayons-tabs__item">Year</a>
+      <a href="#" class="crayons-tabs__item">Infinity</a>
+      <a href="#" class="crayons-tabs__item">Latest</a>
+      <a href="#" class="crayons-tabs__item">Year</a>
+      <a href="#" class="crayons-tabs__item">Infinity</a>
+      <a href="#" class="crayons-tabs__item">Latest</a>
+      <a href="#" class="crayons-tabs__item">Year</a>
+      <a href="#" class="crayons-tabs__item">Infinity</a>
+      <a href="#" class="crayons-tabs__item">Latest</a>
+      <a href="#" class="crayons-tabs__item">Year</a>
+      <a href="#" class="crayons-tabs__item">Infinity</a>
+      <a href="#" class="crayons-tabs__item">Latest</a>
+      <a href="#" class="crayons-tabs__item">Year</a>
+      <a href="#" class="crayons-tabs__item">Infinity</a>
+      <a href="#" class="crayons-tabs__item">Latest</a>
+      <a href="#" class="crayons-tabs__item">Year</a>
+      <a href="#" class="crayons-tabs__item">Infinity</a>
+      <a href="#" class="crayons-tabs__item">Latest</a>
+    </nav>
+
   </div>
 
   <pre><%= '
-  <div class="crayons-tabs">
-    <a href="#" class="crayons-link crayons-link--current">Feed</a>
-    <a href="#" class="crayons-link">Popular</a>
-    <a href="#" class="crayons-link">Latest</a>
-  </div>
+  <nav class="crayons-tabs">
+    <a href="#" class="crayons-tabs__item">Week</a>
+    <a href="#" class="crayons-tabs__item crayons-tabs__item--current">Month</a>
+    <a href="#" class="crayons-tabs__item">Year</a>
+    <a href="#" class="crayons-tabs__item">Infinity</a>
+  </nav>
+
+  <nav class="crayons-tabs crayons-tabs--pills">
+    ...
+  </nav>
+
+  <nav class="crayons-tabs crayons-tabs--muted">
+    ...
+  </nav>
+
+  <nav class="crayons-tabs crayons-tabs--pills crayons-tabs--pills">
+    ...
+  </nav>
+
+  <nav class="crayons-tabs crayons-tabs--scrollable">
+    ...
+  </nav>
+
+  <nav class="crayons-tabs crayons-tabs--stacked">
+    ...
+  </nav>
+
+  <nav class="crayons-tabs crayons-tabs--wrapped">
+    ...
+  </nav>
   '.rstrip %></pre>
 </div>