playbook_ui 4.14.0 → 4.15.0

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { OnlineStatus } from '../../'
+
+const OnlineStatusDefault = () => (
+  <>
+    <OnlineStatus status="offline" />
+
+    <br />
+
+    <OnlineStatus status="online" />
+
+    <br />
+
+    <OnlineStatus status="away" />
+
+  </>
+)
+
+export default OnlineStatusDefault

data/app/pb_kits/playbook/pb_online_status/docs/example.yml

@@ -1,7 +1,7 @@
 examples:
-  
+
   rails:
   - online_status_default: Default
-  
+
   react:
-  
+  - online_status_default: Default

data/app/pb_kits/playbook/pb_online_status/docs/index.js

@@ -0,0 +1 @@
+export { default as OnlineStatusDefault } from './_online_status_default.jsx'

data/app/pb_kits/playbook/pb_popover/_popover.jsx

@@ -60,12 +60,12 @@ const Popover = ({
     {({ placement, ref, style }) => {
       return (
         <div
-            className={buildCss('pb_popover_kit', className)}
+            className={`${buildCss('pb_popover_kit')} ${className}`}
             data-placement={placement}
             ref={ref}
             style={style}
         >
-          <div className={buildCss('popover_tooltip', 'show')}>
+          <div className={`${buildCss('popover_tooltip')} show`}>
             <Card shadow="deeper">
               { children }
             </Card>

data/app/pb_kits/playbook/pb_popover/docs/example.yml

@@ -1,7 +1,6 @@
 examples:
   rails:
     - popover_default: Default
-    - popover_with_button: With Button
     - popover_list: With any children
     - popover_click_outside: Close on click outside
     - popover_click_inside: Close on click inside
@@ -9,7 +8,6 @@ examples:
 
   react:
     - popover_default: Default
-    - popover_with_button: With Button
     - popover_list: With any children
     - popover_click_outside: Close on click outside
     - popover_click_inside: Close on click inside

data/app/pb_kits/playbook/pb_popover/docs/index.js

@@ -1,5 +1,4 @@
 export { default as PopoverDefault } from './_popover_default.jsx'
-export { default as PopoverWithButton } from './_popover_with_button.jsx'
 export { default as PopoverList } from './_popover_list.jsx'
 export { default as PopoverClickOutside } from './_popover_click_outside.jsx'
 export { default as PopoverClickInside } from './_popover_click_inside.jsx'

data/app/pb_kits/playbook/pb_progress_step/_progress_step.html.erb

@@ -0,0 +1,6 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+    <%= capture(&object.children) %>
+<% end %>

data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx

@@ -0,0 +1,35 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildCss } from '../utilities/props'
+
+type ProgressStepProps = {
+  className?: String,
+  data?: String,
+  id?: String,
+  children?: Array<React.ReactChild>,
+  orientation?: 'horizontal' | 'vertical',
+  icon?: Boolean,
+  dark?: Boolean,
+}
+
+const ProgressStep = ({
+  className,
+  children,
+  orientation = 'horizontal',
+  icon = false,
+  dark = false,
+}: ProgressStepProps) => {
+  const iconStyle = icon === true ? 'icon' : ''
+  const darkStyle = dark === true ? 'dark' : ''
+  const progressStepCss = buildCss('pb_progress_step_kit', orientation, iconStyle, darkStyle)
+
+  return (
+    <div className={classnames(progressStepCss, className)}>
+      {children}
+    </div>
+  )
+}
+
+export default ProgressStep

data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss

@@ -0,0 +1,388 @@
+@import "../tokens/colors";
+@import "../tokens/spacing";
+@import "../tokens/opacity";
+@import "../tokens/typography";
+
+$pb_progress_step_circle_size: 14px;
+$pb_progress_step_connector_width: 3px;
+$pb_progress_step_connector_height_from_top: $pb_progress_step_circle_size/2 - $pb_progress_step_connector_width/2 + 2;
+$pb_progress_step_connector_height_from_left: $pb_progress_step_circle_size/2 - $pb_progress_step_connector_width/2;
+
+@mixin pb_progress_step_circle($background_color, $border_color, $border_width, $icon_color) {
+    display: flex;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    padding-right: 0;
+    overflow: hidden;
+    height: $pb_progress_step_circle_size;
+    width: $pb_progress_step_circle_size;
+    background-color: $background_color;
+    color: $icon_color;
+    font-size: $font_smallest;
+    border-radius: $pb_progress_step_circle_size/2;
+    border: $border_width solid $border_color;
+    margin: 2px;
+}
+
+@mixin pb_progress_step_line($width, $height, $color, $margin) {
+    width: $width;
+    height: $height;
+    background-color: $color;
+    margin: $margin;
+    flex-grow: 1;
+}
+
+@mixin pb_progress_step_item_wrapper_horizontal {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+
+@mixin pb_progress_step_item_wrapper_flex($flex_direction, $align_items, $align_self) {
+    display: flex;
+    flex-direction: $flex_direction;
+    align-items: $align_items;
+    align-self: $align_self;
+}
+
+[class^=pb_progress_step_kit] {
+    &[class*=_icon] {
+        [class^=pb_progress_step_item_kit_complete] {
+            [class=pb_progress_step_item_step_circle] {
+                svg {
+                    width: $pb_progress_step_circle_size;
+                    height: $pb_progress_step_circle_size - 2;
+                    color: $white;
+                }
+            }
+        }
+    }
+    &[class*=_horizontal] {
+        @include pb_progress_step_item_wrapper_horizontal;
+        >div {
+            &:first-child {
+                [class^=pb_progress_step_item] {
+                    &[class*=_connector_first], &[class*=_step_connector_first] {
+                        opacity: 0;
+                    }
+                }
+            }
+            &:last-child {
+                [class^=pb_progress_step_item] {
+                    &[class*=_connector_second], &[class*=_step_connector_second] {
+                        opacity: 0;
+                    }
+                }
+            }
+        }
+        [class*=pb_progress_step_item_kit] {
+            &[class*=_complete] {
+                flex-basis: 100%;
+                [class=pb_progress_step_item_wrapper] {
+                    @include pb_progress_step_item_wrapper_horizontal;
+                    [class^=pb_progress_step_item] {
+                        &[class*=_connector_first], &[class*=_connector_second] {
+                            @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $primary, $pb_progress_step_connector_height_from_top 0 0 0);
+                        }
+                    }
+                    [class=pb_progress_step_item_step_wrapper] {
+                        @include pb_progress_step_item_wrapper_flex(column, center, auto);
+                        [class=pb_progress_step_item_step] {
+                            @include pb_progress_step_item_wrapper_horizontal;
+                            [class^=pb_progress_step_item] {
+                                &[class*=_step_connector_first], &[class*=_step_connector_second] {
+                                    @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $primary, $pb_progress_step_connector_height_from_top 0 0 0);
+                                }
+                                &[class*=_step_circle] {
+                                    @include pb_progress_step_circle($primary, $primary, 2px, $primary);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            &[class*=_active] {
+                flex-basis: 100%;
+                [class=pb_progress_step_item_wrapper] {
+                    @include pb_progress_step_item_wrapper_horizontal;
+                    [class^=pb_progress_step_item] {
+                        &[class*=_connector_first] {
+                            @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $primary, $pb_progress_step_connector_height_from_top 0 0 0);
+                        }
+                        &[class*=_connector_second] {
+                            @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_light, $pb_progress_step_connector_height_from_top 0 0 0);
+                        }
+                    }
+                    [class=pb_progress_step_item_step_wrapper] {
+                        @include pb_progress_step_item_wrapper_flex(column, center, auto);
+                        [class=pb_progress_step_item_step] {
+                            @include pb_progress_step_item_wrapper_horizontal;
+                            [class^=pb_progress_step_item] {
+                                &[class*=_step_connector_first] {
+                                    @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $primary, $pb_progress_step_connector_height_from_top 0 0 0);
+                                }
+                                &[class*=_step_circle] {
+                                    @include pb_progress_step_circle($white, $primary, 2px, $white);
+                                    svg {
+                                        display: none;
+                                    }
+                                }
+                                &[class*=_step_connector_second] {
+                                    @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_light, $pb_progress_step_connector_height_from_top 0 0 0);
+                                }
+                            }
+                        }
+                    }
+                } 
+            }
+            &[class*=_inactive] {
+                flex-basis: 100%;
+                [class=pb_progress_step_item_wrapper] {
+                    @include pb_progress_step_item_wrapper_horizontal;
+                    [class^=pb_progress_step_item] {
+                        &[class*=_connector_first], &[class*=_connector_second] {
+                            @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_light, $pb_progress_step_connector_height_from_top 0 0 0);
+                        }
+                    }
+                    [class=pb_progress_step_item_step_wrapper] {
+                        @include pb_progress_step_item_wrapper_flex(column, center, auto);
+                        [class=pb_progress_step_item_step] {
+                            @include pb_progress_step_item_wrapper_horizontal;
+                            [class^=pb_progress_step_item] {
+                                &[class*=_step_connector_first], &[class*=_step_connector_second] {
+                                    @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_light, $pb_progress_step_connector_height_from_top 0 0 0);
+                                }
+                                &[class*=_step_circle] {
+                                    @include pb_progress_step_circle($border_light, $border_light, 2px, $border_light);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        &[class*=_dark] {
+            [class*=pb_progress_step_item_kit] {
+                &[class*=_active] {
+                    [class^=pb_progress_step_item] {
+                        &[class*=_connector_first] {
+                            @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $primary, $pb_progress_step_connector_height_from_top 0 0 0);
+                        }
+                        &[class*=_connector_second] {
+                            @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_dark, $pb_progress_step_connector_height_from_top 0 0 0);
+                        }
+                    }
+                    [class=pb_progress_step_item_step_wrapper] {
+                        [class=pb_progress_step_item_step] {
+                            [class^=pb_progress_step_item] {
+                                &[class*=_step_connector_first] {
+                                    @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $primary, $pb_progress_step_connector_height_from_top 0 0 0);
+                                }
+                                &[class*=_step_circle] {
+                                    @include pb_progress_step_circle($bg_dark, $primary, 2px, $bg_dark);
+                                    svg {
+                                        display: none;
+                                    }
+                                }
+                                &[class*=_step_connector_second] {
+                                    @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_dark, $pb_progress_step_connector_height_from_top 0 0 0);
+                                }
+                            }
+                        }
+                    }
+                }
+                &[class*=_inactive] {
+                    [class=pb_progress_step_item_wrapper] {
+                        [class^=pb_progress_step_item] {
+                            &[class*=_connector_first], &[class*=_connector_second] {
+                                @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_dark, $pb_progress_step_connector_height_from_top 0 0 0);
+                            }
+                        }
+                        [class=pb_progress_step_item_step_wrapper] {
+                            [class=pb_progress_step_item_step] {
+                                [class^=pb_progress_step_item] {
+                                    &[class*=_step_connector_first], &[class*=_step_connector_second] {
+                                        @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_dark, $pb_progress_step_connector_height_from_top 0 0 0);
+                                    }
+                                    &[class*=_step_circle] {
+                                        @include pb_progress_step_circle($border_dark, $border_dark, 0px, $border_dark);
+                                        svg {
+                                            display: none;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    &[class*=_vertical] {
+        @include pb_progress_step_item_wrapper_flex(column, flex-start, auto);
+        > div:first-child {
+            [class=pb_progress_step_item_wrapper] {
+                [class=pb_progress_step_item_connector_first] {
+                    opacity: 0;
+                    margin: 0 0 0 $pb_progress_step_connector_height_from_left;
+                }
+                [class=pb_progress_step_item_step_wrapper] {
+                    [class=pb_progress_step_item_step] {
+                        > div:first-child {
+                            opacity: 0;
+                        }
+                    }
+                }
+            }
+        }
+        >div:last-child {
+            [class=pb_progress_step_item_wrapper] {
+                [class=pb_progress_step_item_connector_second] {
+                    opacity: 0;
+                }
+                [class=pb_progress_step_item_step_wrapper] {
+                    [class=pb_progress_step_item_step] {
+                        > div:last-child {
+                            opacity: 0;
+                        }
+                    }
+                }
+            }
+        }
+        [class*=pb_progress_step_item_kit] {
+            &[class*=_complete] {
+                flex-basis: 100%;
+                [class=pb_progress_step_item_wrapper] {
+                    @include pb_progress_step_item_wrapper_flex(column, baseline, auto);
+                    [class=pb_progress_step_item_connector_second] {
+                        @include pb_progress_step_line($pb_progress_step_connector_width, $space_md, $primary, 0 0 0 $pb_progress_step_connector_height_from_top);
+                    }
+                    [class=pb_progress_step_item_step_wrapper] {
+                        @include pb_progress_step_item_wrapper_flex(row, flex-start, auto);
+                        [class=pb_progress_step_item_step] {
+                            @include pb_progress_step_item_wrapper_flex(column, center, stretch);
+                            margin-right: 4px;
+                            [class^=pb_progress_step_item] {
+                                &[class*=_step_connector_first] {
+                                    display: none;
+                                }
+                                &[class*=_step_circle] {
+                                    @include pb_progress_step_circle($primary, $primary, 2px, $primary);
+                                }
+                                &[class*=_step_connector_second] {
+                                    @include pb_progress_step_line($pb_progress_step_connector_width, 100%, $primary, 0);
+                                }
+                            }
+                        }
+                    }
+                } 
+            }
+            &[class*=_active] {
+                flex-basis: 100%;
+                [class=pb_progress_step_item_wrapper] {
+                    @include pb_progress_step_item_wrapper_flex(column, baseline, auto);
+                    [class=pb_progress_step_item_connector_second] {
+                        @include pb_progress_step_line($pb_progress_step_connector_width, $space_md, $border_light, 0 0 0 $pb_progress_step_connector_height_from_top);
+                    }
+                    [class=pb_progress_step_item_step_wrapper] {
+                        @include pb_progress_step_item_wrapper_flex(row, flex-start, auto);
+                        [class=pb_progress_step_item_step] {
+                            @include pb_progress_step_item_wrapper_flex(column, center, stretch);
+                            margin-right: 4px;
+                            [class^=pb_progress_step_item] {
+                                &[class*=_step_connector_first] {
+                                    display: none;
+                                }
+                                &[class*=_step_circle] {
+                                    @include pb_progress_step_circle($white, $primary, 2px, $white);
+                                    svg {
+                                        display: none;
+                                    }
+                                }
+                                &[class*=_step_connector_second] {
+                                    @include pb_progress_step_line($pb_progress_step_connector_width, 100%, $border_light, 0);
+                                }
+                            }
+                        }
+                    }
+                } 
+            }
+            &[class*=_inactive] {
+                flex-basis: 100%;
+                [class=pb_progress_step_item_wrapper] {
+                    @include pb_progress_step_item_wrapper_flex(column, baseline, auto);
+                    [class=pb_progress_step_item_connector_second] {
+                        @include pb_progress_step_line($pb_progress_step_connector_width, $space_md, $border_light, 0 0 0 $pb_progress_step_connector_height_from_top);
+                    }
+                    [class=pb_progress_step_item_step_wrapper] {
+                        @include pb_progress_step_item_wrapper_flex(row, flex-start, auto);
+                        [class=pb_progress_step_item_step] {
+                            @include pb_progress_step_item_wrapper_flex(column, center, stretch);
+                            margin-right: 4px;
+                            [class^=pb_progress_step_item] {
+                                &[class*=_step_connector_first] {
+                                    display: none;
+                                }
+                                &[class*=_step_circle] {
+                                    @include pb_progress_step_circle($border_light, $border_light, 2px, $border_light);
+                                }
+                                &[class*=_step_connector_second] {
+                                    @include pb_progress_step_line($pb_progress_step_connector_width, 100%, $border_light, 0);
+                                }
+                            }
+                        }
+                    }
+                }  
+            }
+        }
+        &[class*=_dark] {
+            [class^=pb_progress_step_item_kit] {
+                &[class*=_active] {
+                    [class=pb_progress_step_item_wrapper] {
+                        [class=pb_progress_step_item_connector_second] {
+                            @include pb_progress_step_line($pb_progress_step_connector_width, $space_md, $border_dark, 0 0 0 $pb_progress_step_connector_height_from_top);
+                        }
+                        [class=pb_progress_step_item_step_wrapper] {
+                            [class=pb_progress_step_item_step] {
+                                [class^=pb_progress_step_item] {
+                                    &[class*=_step_circle] {
+                                        @include pb_progress_step_circle(transparent, $primary, 2px, $bg_dark);
+                                        svg {
+                                            display: none;
+                                        }
+                                    }
+                                    &[class*=_step_connector_second] {
+                                        @include pb_progress_step_line($pb_progress_step_connector_width, 100%, $border_dark, 0);
+                                    }
+                                }
+                            }
+                        }
+                    } 
+                }
+                &[class*=_inactive] {
+                    [class=pb_progress_step_item_wrapper] {
+                        [class=pb_progress_step_item_connector_second] {
+                            @include pb_progress_step_line($pb_progress_step_connector_width, $space_md, $border_dark, 0 0 0 $pb_progress_step_connector_height_from_top);
+                        }
+                        [class=pb_progress_step_item_step_wrapper] {
+                            [class=pb_progress_step_item_step] {
+                                [class^=pb_progress_step_item] {
+                                    &[class*=_step_circle] {
+                                        @include pb_progress_step_circle($border_dark, $border_dark, 0px, $border_dark);
+                                        svg {
+                                            display: none;
+                                        }
+                                    }
+                                    &[class*=_step_connector_second] {
+                                        @include pb_progress_step_line($pb_progress_step_connector_width, 100%, $border_dark, 0);
+                                    }
+                                }
+                            }
+                        }
+                    }  
+                }
+            }
+        }
+    }
+}

data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.html.erb

@@ -0,0 +1,23 @@
+<%= content_tag(:div,
+  id: object.id,
+  data: object.data,
+  class: object.classname) do %>
+  
+  <div class="pb_progress_step_item_wrapper">
+    <div class="pb_progress_step_item_connector_first"></div>
+    <div class="pb_progress_step_item_step_wrapper">
+      <div class="pb_progress_step_item_step">
+        <div class="pb_progress_step_item_step_connector_first"></div>
+        <div class="pb_progress_step_item_step_circle">
+          <%= pb_rails("icon", props: { icon: "check", size: "xs" }) %>
+        </div>
+        <div class="pb_progress_step_item_step_connector_second"></div>
+      </div>
+      <div>
+        <%= capture(&object.children) %>
+      </div>
+    </div>
+    <div class="pb_progress_step_item_connector_second"></div>
+  </div>
+
+<% end %>

data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx

@@ -0,0 +1,44 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildCss } from '../utilities/props'
+import { Icon } from '..'
+
+type ProgressStepItemProps = {
+  className?: String,
+  status?: 'complete' | 'active' | 'inactive',
+  children?: React.Node,
+}
+
+const ProgressStepItem = ({
+  className,
+  status = 'inactive',
+  children,
+}: ProgressStepItemProps) => {
+  const progressStepItem = buildCss('pb_progress_step_item_kit', status)
+
+  return (
+    <div className={classnames(progressStepItem, className)}>
+      <div className="pb_progress_step_item_wrapper">
+        <div className="pb_progress_step_item_connector_first" />
+        <div className="pb_progress_step_item_step_wrapper">
+          <div className="pb_progress_step_item_step">
+            <div className="pb_progress_step_item_step_connector_first" />
+            <div className="pb_progress_step_item_step_circle">
+              <Icon
+                  icon="check"
+              />
+            </div>
+            <div className="pb_progress_step_item_step_connector_second" />
+          </div>
+          <div>
+            {children}
+          </div>
+        </div>
+        <div className="pb_progress_step_item_connector_second" />
+      </div>
+    </div>
+  )
+}
+export default ProgressStepItem

data/app/pb_kits/playbook/pb_progress_step/docs/_description.md

@@ -0,0 +1 @@
+Progress step kit is used to show the progress of a process. There are three types of steps in this kit: completed, active, and inactive. Completed steps are indicated by a solid, blue circle (with or without an icon). The current, or active, step is indicated by an outlined blue circle. The inactive, or future, step is indicated by a solid gray circle. 

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_dark.html.erb

@@ -0,0 +1,8 @@
+<%= pb_rails("progress_step", props: {orientation: "horizontal", icon: true, dark: true}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_dark.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import ProgressStep from '../_progress_step.jsx'
+import ProgressStepItem from '../_progress_step_item.jsx'
+
+const ProgressStepDark = () => (
+  <div>
+    <ProgressStep
+        dark
+        icon
+    >
+      <ProgressStepItem status="complete" />
+      <ProgressStepItem status="active" />
+      <ProgressStepItem status="inactive" />
+    </ProgressStep>
+  </div>
+)
+
+export default ProgressStepDark

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb

@@ -0,0 +1,33 @@
+<%= pb_rails("progress_step", props: {orientation: "horizontal", icon: true}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+  <% end %>
+<% end %>
+
+<br /><br />
+
+<%= pb_rails("progress_step", props: {orientation: "horizontal"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+  <% end %>
+<% end %>
+
+<br /><br />
+
+<%= pb_rails("progress_step", props: {orientation: "horizontal"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+      Child
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
+      Child
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+      Child
+  <% end %>
+<% end %>