feat(styleguide): removed parent name from children

- adjusted hologram names and titles

[Finishes #80907306 #80907982]

Signed-off-by: Bebe Peng <bpeng@pivotal.io>

src/pivotal-ui/components/backgrounds.css.scss

@@ -13,7 +13,7 @@ Background color classes can be applied to any element. See [colors](/utilities.
 
 /*doc
 ---
-title: Background Overlays
+title: Overlays
 name: background_overlays
 parent: background
 ---
@@ -46,7 +46,7 @@ parent: background
 
 /*doc
 ---
-title: Full Bleed Background
+title: Full Bleed
 name: background_full_bleed
 parent: background
 ---

src/pivotal-ui/components/button.css.scss

@@ -25,8 +25,8 @@ a form or triggering some javascript event, then use a `<button>` element.
 
 /*doc
 ---
-title: Full width Buttons
-name: full_width_button
+title: Full width
+name: button_full_width
 parent: button
 ---
 
@@ -57,7 +57,7 @@ Create block level buttons—those that span the full width of a parent— by ad
 
 /*doc
 ---
-title: Button Styles
+title: Styles
 name: button_styles
 parent: button
 ---
@@ -109,7 +109,7 @@ Button                                                             | Disabled
 
 /*doc
 ---
-title: Button Sizes
+title: Sizes
 name: button_sizes
 parent: button
 ---
@@ -128,4 +128,4 @@ size modifier class for the desired size.
 .btn-lg {
   // line-height: ensure even-numbered height of button next to large input
   @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-medium, $line-height-large, $border-radius-small);
-}
+}

src/pivotal-ui/components/code.css.scss

@@ -98,8 +98,8 @@ Scrollable with too little content:
 
 /*doc
 ---
-title: Inline Code
-name: inline_code
+title: Inline
+name: code_inline
 parent: code
 ---
 
@@ -111,8 +111,8 @@ parent: code
 
 /*doc
 ---
-title: Inline Code Dark
-name: inline_code_dark
+title: Inline Dark
+name: code_inline_dark
 parent: code
 ---
 
@@ -131,7 +131,7 @@ parent: code
 /*doc
 ---
 title: Terminal Window
-name: terminal_window
+name: code_terminal_window
 parent: code
 ---
 

src/pivotal-ui/components/colors.css.scss

@@ -1,7 +1,7 @@
 /*doc
 ---
 title: Colors
-name: colors
+name: color
 categories:
   - All
   - Elements
@@ -546,8 +546,8 @@ $tabs-active-bg-color: $gray-2;
 /*doc
 ---
 title: Shadows & Glows
-name: shadows
-parent: colors
+name: color_shadows_glows
+parent: color
 ---
 <div class="row">
 <div class="contrast-bar">

src/pivotal-ui/components/embeds.css.scss

@@ -1,7 +1,7 @@
 /*doc
 ---
 title: Embeds
-name: embeds
+name: embed
 categories:
   - All
   - Elements
@@ -10,9 +10,9 @@ categories:
 
 /*doc
 ---
-title: Responsive Embeds
-name: embeds_responsive
-parent: embeds
+title: Responsive
+name: embed_responsive
+parent: embed
 ---
 
 Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
@@ -63,4 +63,4 @@ Rules are directly applied to `<iframe>`, `<embed>`, and `<object>` elements; op
 </div>
 ```
 
-*/
+*/

src/pivotal-ui/components/forms.css.scss

@@ -1,7 +1,7 @@
 /*doc
 ---
 title: Forms
-name: forms
+name: form
 categories:
  - All
  - Forms
@@ -11,8 +11,8 @@ categories:
 /*doc
 ---
 title: Inputs & Labels
-name: input
-parent: forms
+name: form_input
+parent: form
 ---
 
 An input with the label top aligned (this is the default layout).
@@ -106,8 +106,8 @@ label {
 /*doc
 ---
 title: Fancy Select
-name: fancy-select
-parent: forms
+name: form_fancy_select
+parent: form
 ---
 
 This is a fancy select!
@@ -209,8 +209,8 @@ This is a fancy select!
 /*doc
 ---
 title: Fancy Number Input
-name: fancy-number
-parent: forms
+name: form_fancy_number
+parent: form
 ---
 
 This is a fancy number input!
@@ -286,8 +286,8 @@ This is a fancy number input!
 /*doc
 ---
 title: Text Area
-name: textarea
-parent: forms
+name: form_textarea
+parent: form
 ---
 
 Text areas are used for larger amounts of input.
@@ -363,9 +363,9 @@ input[type="radio"] {
 
 /*doc
 ---
-title: Inline Forms
-name: inline_forms
-parent: forms
+title: Inline
+name: form_inline
+parent: form
 ---
 
 Add `.form-inline` to your `<form>` for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.
@@ -400,8 +400,8 @@ Screen readers will have trouble with your forms if you don't include a label fo
 
 /*doc
 ---
-title: Inline Forms with Labels
-name: inline_forms_with_labels
+title: Inline with Labels
+name: form_inline_with_labels
 parent: forms
 ---
 
@@ -435,9 +435,9 @@ Add `.form-inline.inline-labels` to your `<form>` for left-aligned and inline-bl
 
 /*doc
 ---
-title: HTML5 controls
-name: html5_controls
-parent: forms
+title: HTML5 Controls
+name: form_html5_controls
+parent: form
 ---
 
 Examples of standard form controls supported in an example form layout.
@@ -524,7 +524,7 @@ Use this with fields that require telephone numbers to pop up the dialpad on mob
 /*doc
 ---
 title: Validation
-name: validation
+name: form_validation
 categories:
  - All
  - Forms
@@ -612,8 +612,8 @@ input.ng-invalid.ng-dirty {
 /*
 ---
 title: Disabled Inputs
-name: disabled
-parent: forms
+name: form_disabled_inputs
+parent: form
 ---
 ### Disabled Inputs
 
@@ -637,8 +637,8 @@ Inputs will occasionally need to be disabled. You can do that by adding the `dis
 /*doc
 ---
 title: Selects
-name: selects
-parent: forms
+name: form_selects
+parent: form
 ---
 Selects are excellent to use because they will automatically
 behave as expected cross browser on different devices. Prefer
@@ -657,8 +657,8 @@ be changed via the [control sizing options](#control_sizing).
 /*doc
 ---
 title: Sizing
-name: sizing
-parent: forms
+name: form_sizing
+parent: form
 ---
 Set heights using classes like `.input-lg`, and set widths using grid column classes like `.col-lg-*`.
 
@@ -705,8 +705,8 @@ Wrap inputs in grid columns, or any custom parent element, to easily enforce des
 /*doc
 ---
 title: Help Text
-name: help_text
-parent: forms
+name: form_help_text
+parent: form
 ---
 Help text
 Block level help text for form controls.
@@ -722,8 +722,8 @@ Block level help text for form controls.
 /*doc
 ---
 title: Static Control
-name: static_control
-parent: forms
+name: form_static_control
+parent: form
 ---
 When you need to place plain text next to a form label within a horizontal form, use the `.form-control-static` class on a `<p>`.
 
@@ -743,9 +743,9 @@ When you need to place plain text next to a form label within a horizontal form,
 
 /*doc
 ---
-title: Vertical static controls
-name: static_controll
-parent: forms
+title: Vertical Static Controls
+name: form_static_control
+parent: form
 ---
 
 ```haml_example
@@ -788,8 +788,8 @@ p.form-control-static {
 /*doc
 ---
 title: Autoselect Text Input
-name: autoselect_text_input
-parent: forms
+name: form_autoselect_text_input
+parent: form
 ---
 
 This form is used to show information that a user may wish to copy and paste somewhere.
@@ -807,8 +807,8 @@ This form is used to show information that a user may wish to copy and paste som
 /*doc
 ---
 title: Focus Input
-name: focus-input
-parent: forms
+name: form_focus_input
+parent: form
 ---
 
 Add the focus-input directive to an element that should be focused if the focus-input expression changes such that it evalutes as true.
@@ -826,12 +826,12 @@ Add the focus-input directive to an element that should be focused if the focus-
 
 /*doc
 ---
-title: ContentEditable
-name: contenteditable
-parent: forms
+title: Content Editable
+name: form_content_editable
+parent: form
 ---
 
-This form looks and behaves mostly like a contenteditable field
+This form looks and behaves mostly like a content editable field
 
 ```haml_example
 %form.form-contenteditable{'name' => 'newEditableForm',
@@ -918,8 +918,8 @@ This form looks and behaves mostly like a contenteditable field
 /*doc
 ---
 title: Search Input
-name: search-input
-parent: forms
+name: form_search_input
+parent: form
 ---
 
 Use this input when creating a search component. 

src/pivotal-ui/components/grids.css.scss

@@ -1,7 +1,7 @@
 /*doc
 ---
 title: Grids
-name: grids
+name: grid
 categories:
   - All
   - Layout
@@ -53,8 +53,8 @@ offsets, or responsiveness.
 /*doc
 ---
 title: Gutter Sizes
-name: gutter_sizes
-parent: grids
+name: grid_gutter_sizes
+parent: grid
 ---
 
 ```haml_example
@@ -90,9 +90,9 @@ parent: grids
 
 /*doc
 ---
-title: Responsive Grids
-name: grids_responsive
-parent: grids
+title: Responsive
+name: grid_responsive
+parent: grid
 ---
 
 Having trouble debugging grids? You have a couple options. You can checkout the [grids responsive documentation on the bootstrap site](http://getbootstrap.com/css/#grid-responsive-resets). It is more comprehensive than what we have here. You can also set `$grids-debug: true` in the `grids.css.scss` file. This will allow you to visualize the changes taking place at different device widths.