chore(styleguide): Un-nest components from categories

[#114127017]

styleguide/Gemfile

@@ -6,3 +6,5 @@ gem 'rspec'
 gem 'capybara'
 gem 'selenium-webdriver'
 gem 'babel-transpiler'
+gem 'awesome_print'
+

styleguide/Gemfile.lock

@@ -1,6 +1,7 @@
 GEM
   remote: https://rubygems.org/
   specs:
+    awesome_print (1.6.1)
     babel-source (5.8.19)
     babel-transpiler (0.7.0)
       babel-source (>= 4.0, < 6)
@@ -58,9 +59,13 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  awesome_print
   babel-transpiler
   capybara
   hologram (~> 1.4.0)
   pry
   rspec
   selenium-webdriver
+
+BUNDLED WITH
+   1.10.5

styleguide/hologram/doc_assets/_header.html

@@ -61,8 +61,8 @@
       </div>
       <% require('./hologram/lib/navigation') %>
       <% require('./hologram/lib/pretty_nav') %>
-      <% nav = PrettyNav.new(generate_nav_from_categories(@categories)).to_hash %>
-      <div class="phxl pvl">
+        <% nav = PrettyNav.new(generate_nav_from_categories(@categories)).to_hash %>
+        <div class="phxl pvl">
         <a href="/" class="type-neutral-1 mvn h2">
           <span class="logo-type-company em-low">Pivotal</span>
           <span class="logo-type-app">Styleguide</span>

styleguide/hologram/lib/navigation.rb

@@ -29,10 +29,10 @@ def generate_nav_from_categories(categories)
 
   categories.each do |category, page|
     nav_path = NavPath.from_category(category)
+
     if nav_path
       nav_tree[nav_path.language] ||= {}
-      nav_tree[nav_path.language][nav_path.component_type] ||= {}
-      nav_tree[nav_path.language][nav_path.component_type][nav_path.component] = page
+      nav_tree[nav_path.language][nav_path.component] ||= page
     end
   end
 

styleguide/hologram/lib/pretty_nav.rb

@@ -17,23 +17,16 @@ def initialize(nav_hash)
 
   def to_hash
     new_hash = {}
+    @nav_hash.each do |language, components|
+      pretty_components = {}
 
-    @nav_hash.each do |language, categories|
-      pretty_categories = {}
-
-      categories.each do |category, components|
-        pretty_components = {}
-
-        components.each do |component, path|
-          pretty_components[prettify(component)] = path
-        end
-
-        pretty_categories[prettify(category)] = pretty_components
+      components.each do |component, path|
+	      pretty_components[prettify(component)] = path
       end
 
       pretty_language = prettify_language(language)
 
-      new_hash[pretty_language] = pretty_categories
+      new_hash[pretty_language] = pretty_components
     end
 
     new_hash

styleguide/spec/hologram/lib/navigation_spec.rb

@@ -29,13 +29,10 @@
     }
 
     expect(generate_nav_from_categories(categories)).to eq({
-          'react' => {
-            'objects' => {
-              'bagel' => 'react_objects_bagel.html',
-            }
-          }
-        }
-      )
+      'react' => {
+        'bagel' => 'react_objects_bagel.html',
+      }
+    })
   end
 
   it 'maps components to their urls' do
@@ -45,14 +42,11 @@
     }
 
     expect(generate_nav_from_categories(categories)).to eq({
-          'react' => {
-            'objects' => {
-              'bagel' => 'react_objects_bagel.html',
-              'candle' => 'react_objects_candle.html',
-            }
-          }
-        }
-      )
+      'react' => {
+	      'bagel' => 'react_objects_bagel.html',
+	      'candle' => 'react_objects_candle.html',
+      }
+    })
   end
 
   it 'separates components by component type' do
@@ -62,16 +56,11 @@
     }
 
     expect(generate_nav_from_categories(categories)).to eq({
-          'react' => {
-            'objects' => {
-              'bagel' => 'react_objects_bagel.html',
-            },
-            'bandolier' => {
-              'keyboard' => 'react_bandolier_keyboard.html',
-            },
-          },
-        }
-      )
+      'react' => {
+	      'bagel' => 'react_objects_bagel.html',
+	      'keyboard' => 'react_bandolier_keyboard.html',
+      },
+     })
   end
 
   it 'separates component types by language' do
@@ -81,17 +70,12 @@
     }
 
     expect(generate_nav_from_categories(categories)).to eq({
-          'react' => {
-            'objects' => {
-              'bagel' => 'react_objects_bagel.html',
-            },
-          },
-          'css' => {
-            'guilt' => {
-              'skateboard' => 'css_guilt_skateboard.html',
-            },
-          },
-        }
-      )
+      'react' => {
+	      'bagel' => 'react_objects_bagel.html',
+      },
+      'css' => {
+	      'skateboard' => 'css_guilt_skateboard.html',
+      }
+    })
   end
 end

styleguide/spec/hologram/lib/pretty_nav_spec.rb

@@ -5,18 +5,14 @@
   it 'capitalizes labels' do
     ugly_nav = {
       'react' => {
-        'objects' => {
-          'bagel' => 'react_objects_bagel.html',
-        }
+	      'bagel' => 'react_bagel.html',
       }
     }
 
     expect(PrettyNav.new(ugly_nav).to_hash).to eq(
         {
           'React' => {
-            'Objects' => {
-              'Bagel' => 'react_objects_bagel.html',
-            }
+	          'Bagel' => 'react_bagel.html',
           }
         }
       )
@@ -25,18 +21,14 @@
   it 'puts CSS in all caps' do
     ugly_nav = {
       'css' => {
-        'grass' => {
-          'mower' => 'css_grass_mower.html',
-        }
+	      'mower' => 'css_mower.html',
       }
     }
 
     expect(PrettyNav.new(ugly_nav).to_hash).to eq(
         {
           'CSS' => {
-            'Grass' => {
-              'Mower' => 'css_grass_mower.html',
-            }
+              'Mower' => 'css_mower.html',
           }
         }
       )
@@ -45,18 +37,14 @@
   it 'splits component names and capitalizes' do
     ugly_nav = {
       'react' => {
-        'spanakopita' => {
-          'tastes-pretty-good' => 'react_spanakopita_tastes-pretty-good.html',
-        }
+	      'tastes-pretty-good' => 'react_tastes-pretty-good.html',
       }
     }
 
     expect(PrettyNav.new(ugly_nav).to_hash).to eq(
         {
           'React' => {
-            'Spanakopita' => {
-              'Tastes Pretty Good' => 'react_spanakopita_tastes-pretty-good.html',
-            }
+	          'Tastes Pretty Good' => 'react_tastes-pretty-good.html',
           }
         }
       )

styleguide/spec/js/styleguide-nav-spec.js

@@ -6,20 +6,12 @@ describe('StyleguideNav', () => {
   beforeEach(() => {
     const navTree = {
       CSS: {
-        base: {
-          eggplant: "purple.html"
-        },
-        objects: {
-          apples: "red.html"
-        }
+        eggplants: "purple.html",
+        apples: "red.html"
       },
       React: {
-        objects: {
-          carrots: "orange.html"
-        },
-        base: {
-          apples: "red.html"
-        }
+        carrots: "orange.html",
+        apples: "red.html"
       }
     };
 
@@ -35,7 +27,7 @@ describe('StyleguideNav', () => {
     ReactDOM.unmountComponentAtNode(root);
   });
 
-  it('creates top-level language tabs with react first', () => {
+  it('creates top-level language tabs with React first', () => {
     expect('.nav-tabs li:eq(0)').toContainText('React');
     expect('.nav-tabs li:eq(1)').toContainText('CSS');
   });
@@ -44,25 +36,18 @@ describe('StyleguideNav', () => {
     expect('.nav-tabs li.active').toContainText('React');
   });
 
-  it('creates second-level category collapses', () => {
-    expect(".tab-pane:eq(0)").toContainText('objects');
-    expect(".tab-pane:eq(1)").toContainText('base');
-    expect(".tab-pane:eq(1)").toContainText('objects');
-  });
-
-  it('sets default component type collapse of each tab to be defaultExpanded', () => {
-    expect(".tab-pane:eq(1) .nav-component-type:contains('objects') .panel-heading a").not.toHaveClass('collapsed');
-    expect(".tab-pane:eq(0) .nav-component-type:contains('objects') .panel-heading a").not.toHaveClass('collapsed');
-
-    expect(".tab-pane:eq(1) .nav-component-type:contains('base') .panel-heading a").toHaveClass('collapsed');
-    expect(".tab-pane:eq(0) .nav-component-type:contains('base') .panel-heading a").toHaveClass('collapsed');
+  it('creates second-level links', () => {
+    expect(".tab-pane:eq(0)").toContainText('apples');
+    expect(".tab-pane:eq(0)").toContainText('carrots');
+    expect(".tab-pane:eq(1)").toContainText('eggplants');
+    expect(".tab-pane:eq(1)").toContainText('apples');
   });
 
   it('creates component links', () => {
-    expect(".tab-pane:eq(0) a:contains('carrots')")
-      .toHaveAttr('href', 'orange.html');
+    expect(".tab-pane:eq(0) a:eq(0)")
+      .toHaveAttr('href', 'red.html');
 
-    expect(".tab-pane:eq(1) a:contains('eggplant')")
+    expect(".tab-pane:eq(1) a:eq(1)")
       .toHaveAttr('href', 'purple.html');
   });
 });

styleguide/src/intro-page.js

@@ -16,35 +16,12 @@ const IntroPage = React.createClass({
               <h1 className="title styleguide-title"> Ship Better UI, Faster</h1>
 
               <p className="styleguide-subtitle">
-                Pivotal UI is a collection of React Components that are styled for the Pivotal brand.
+                Pivotal UI is a collection of React and CSS components styled for the Pivotal brand.
               </p>
               <Button href="/getting-started.html" className="styleguide-btn-primary" large>Get Started</Button>
             </div>
           </div>
         </BasePane>
-        <TileLayout columns={{lg: 3, xs: 1}} noGutter>
-          <TileLayout.Item>
-            <IntroTile category="Base">
-              Discrete elements such as buttons, lists and
-              images. Also includes iconography and typography guidelines.
-            </IntroTile>
-          </TileLayout.Item>
-          <TileLayout.Item>
-            <IntroTile category="Components">
-              Groups of elements that comprise a unit. Elements
-              such as a form label, text input and autocomplete
-              can create a form.
-            </IntroTile>
-          </TileLayout.Item>
-          <TileLayout.Item>
-            <IntroTile category="Utilities">
-              Simple typographic, layout and color utilities.
-              Layout your pages with clean grids and whitespace
-              that are also responsive.
-            </IntroTile>
-          </TileLayout.Item>
-        </TileLayout>
-
         <div className="paxxl mbxxl">
           <h2 className="type-dark-2 h1">Examples Using Pivotal UI</h2>
           <TileLayout columns={{xl: 4, lg: 3, xs: 1}}>