Pivotal
Styleguide
diff --git a/styleguide/hologram/lib/navigation.rb b/styleguide/hologram/lib/navigation.rb
index 9168224a5..f673de763 100644
--- a/styleguide/hologram/lib/navigation.rb
+++ b/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
diff --git a/styleguide/hologram/lib/pretty_nav.rb b/styleguide/hologram/lib/pretty_nav.rb
index cbbb728dc..0553adbf7 100644
--- a/styleguide/hologram/lib/pretty_nav.rb
+++ b/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
diff --git a/styleguide/spec/hologram/lib/navigation_spec.rb b/styleguide/spec/hologram/lib/navigation_spec.rb
index 1418772b2..5e9f647e2 100644
--- a/styleguide/spec/hologram/lib/navigation_spec.rb
+++ b/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
diff --git a/styleguide/spec/hologram/lib/pretty_nav_spec.rb b/styleguide/spec/hologram/lib/pretty_nav_spec.rb
index f0a61d351..a4d22dc5a 100644
--- a/styleguide/spec/hologram/lib/pretty_nav_spec.rb
+++ b/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',
}
}
)
diff --git a/styleguide/spec/js/styleguide-nav-spec.js b/styleguide/spec/js/styleguide-nav-spec.js
index 4f4bc8095..4cbfe7e61 100644
--- a/styleguide/spec/js/styleguide-nav-spec.js
+++ b/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');
});
});
diff --git a/styleguide/src/intro-page.js b/styleguide/src/intro-page.js
index 323943823..dbafb044f 100644
--- a/styleguide/src/intro-page.js
+++ b/styleguide/src/intro-page.js
@@ -16,35 +16,12 @@ const IntroPage = React.createClass({
Ship Better UI, Faster
- 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.
Get Started