playbook_ui 15.3.0 → 15.4.0.pre.alpha.PLAY1541responsivefloorPOC12370

data/app/pb_kits/playbook/pb_nav/_nav_item.test.js

@@ -5,6 +5,8 @@ import Nav from './_nav'
 import NavItem from './_item'
 
 const navTestId = 'nav'
+const navDisabledTestId = 'nav-disabled'
+const itemDisabledTestId = 'item-disabled'
 const itemTestId = 'item'
 const activeTestBorderlessId = 'activeborderless'
 const activeTestBorderId = 'active'
@@ -105,3 +107,193 @@ test('should have a left icon', () => {
     const icon = kit.querySelector(".pb_custom_icon.pb_nav_list_item_icon_left")
     expect(icon).toBeInTheDocument()
 })
+
+test('should apply disabled class when disabled (horizontal nav)', () => {
+    [
+     "default",
+     "subtle",
+     "bold"
+    ].forEach((variant) => {
+        render(
+            <Nav
+                aria={{ label: navDisabledTestId }}
+                className={navClassName}
+                data={{ testid: navDisabledTestId }}
+                orientation="horizontal"
+                variant={variant}
+            >
+            <NavItem
+                aria={{ label: `${itemDisabledTestId}-${variant}` }}
+                className={itemClassName}
+                data={{ testid: `${itemDisabledTestId}-${variant}` }}
+                disabled
+                link="#"
+                text="Files"
+            />
+           </Nav>
+        )
+        const kit = screen.getByTestId(`${itemDisabledTestId}-${variant}`)
+        expect(kit).toHaveClass('pb_nav_item_disabled')
+    })
+})
+
+test('should set aria-disabled when disabled (horizontal nav)', () => {
+    [
+        "default",
+        "subtle",
+        "bold"
+    ].forEach((variant) => {
+        render(
+            <Nav
+                aria={{ label: navDisabledTestId }}
+                className={navClassName}
+                data={{ testid: navDisabledTestId }}
+                orientation="horizontal"
+                variant={variant}
+            >
+            <NavItem
+                aria={{ label: `${itemDisabledTestId}-${variant}` }}
+                className={itemClassName}
+                data={{ testid: `${itemDisabledTestId}-${variant}` }}
+                disabled
+                link="#"
+                text="Files"
+            />
+           </Nav>
+        )
+        const item = screen.getByTestId(`${itemDisabledTestId}-${variant}`)
+        expect(item).toHaveAttribute('aria-disabled', 'true')
+    })
+})
+
+test('should set tabIndex to -1 when disabled (horizontal nav)', () => {
+    [
+        "default",
+        "subtle",
+        "bold"
+    ].forEach((variant) => {
+        render(
+            <Nav
+                aria={{ label: navDisabledTestId }}
+                className={navClassName}
+                data={{ testid: navDisabledTestId }}
+                orientation="horizontal"
+                variant={variant}
+            >
+            <NavItem
+                aria={{ label: `${itemDisabledTestId}-${variant}` }}
+                className={itemClassName}
+                data={{ testid: `${itemDisabledTestId}-${variant}` }}
+                disabled
+                link="#"
+                text="Files"
+            />
+           </Nav>
+        )
+        const kit = screen.getByTestId(`${itemDisabledTestId}-${variant}`)
+        expect(kit).toHaveAttribute('tabIndex', '-1')
+    })
+})
+
+test('should prevent onClick when disabled', () => {
+    const handleClick = jest.fn()
+    render(
+        <NavItem
+            data={{ testid: 'disabled-click-item' }}
+            disabled
+            link="#"
+            onClick={handleClick}
+            text="Disabled Item"
+        />
+    )
+    const kit = screen.getByTestId('disabled-click-item')
+    kit.click()
+    expect(handleClick).not.toHaveBeenCalled()
+})
+
+test('should apply disabled class when disabled (vertical nav)', () => {
+    [
+     "default",
+     "subtle",
+     "bold"
+    ].forEach((variant) => {
+        render(
+            <Nav
+                aria={{ label: navDisabledTestId }}
+                className={navClassName}
+                data={{ testid: navDisabledTestId }}
+                orientation="vertical"
+                variant={variant}
+            >
+            <NavItem
+                aria={{ label: `${itemDisabledTestId}-${variant}` }}
+                className={itemClassName}
+                data={{ testid: `${itemDisabledTestId}-${variant}` }}
+                disabled
+                link="#"
+                text="Files"
+            />
+           </Nav>
+        )
+        const kit = screen.getByTestId(`${itemDisabledTestId}-${variant}`)
+        expect(kit).toHaveClass('pb_nav_item_disabled')
+    })
+})
+
+test('should set aria-disabled when disabled (vertical nav)', () => {
+    [
+        "default",
+        "subtle",
+        "bold"
+    ].forEach((variant) => {
+        render(
+            <Nav
+                aria={{ label: navDisabledTestId }}
+                className={navClassName}
+                data={{ testid: navDisabledTestId }}
+                orientation="vertical"
+                variant={variant}
+            >
+            <NavItem
+                aria={{ label: `${itemDisabledTestId}-${variant}` }}
+                className={itemClassName}
+                data={{ testid: `${itemDisabledTestId}-${variant}` }}
+                disabled
+                link="#"
+                text="Files"
+            />
+           </Nav>
+        )
+        const item = screen.getByTestId(`${itemDisabledTestId}-${variant}`)
+        expect(item).toHaveAttribute('aria-disabled', 'true')
+    })
+})
+
+test('should set tabIndex to -1 when disabled (vertical nav)', () => {
+    [
+        "default",
+        "subtle",
+        "bold"
+    ].forEach((variant) => {
+        render(
+            <Nav
+                aria={{ label: navDisabledTestId }}
+                className={navClassName}
+                data={{ testid: navDisabledTestId }}
+                orientation="vertical"
+                variant={variant}
+            >
+            <NavItem
+                aria={{ label: `${itemDisabledTestId}-${variant}` }}
+                className={itemClassName}
+                data={{ testid: `${itemDisabledTestId}-${variant}` }}
+                disabled
+                link="#"
+                text="Files"
+            />
+           </Nav>
+        )
+        const kit = screen.getByTestId(`${itemDisabledTestId}-${variant}`)
+        expect(kit).toHaveAttribute('tabIndex', '-1')
+    })
+})

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss

@@ -44,7 +44,7 @@ $selector: ".pb_nav_list";
         transition-duration: 0.15s;
         transition-timing-function: $bezier;
         @media (hover: hover) {
-          &:hover {
+          &:hover:not(.pb_nav_item_disabled) {
             background-color: rgba($primary, 0.03);
             [class*="_icon"] {
               color: $primary;

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.md

@@ -1 +1 @@
-The `itemSpacing` prop can optionally be applied to the `Nav` parent element and accepts an object through which any of our [Spacing](https://playbook.powerapp.cloud/visual_guidelines/spacing) (padding, margin) global prop values can be passed as an object. All spacing values passed to `itemSpacing` will be applied to all navItems within the nav. Spacing (padding, margin) global props can still be used on nested navItems in conjunction with `itenSpacing` on the Nav for customized control. Any Spacing (padding,margin) global props applied directly to a navItem will override any competing `itemSpacing` value.
+The `itemSpacing` prop can optionally be applied to the `Nav` parent element and accepts an object through which any of our Spacing ([padding](https://playbook.powerapp.cloud/global_props/padding), [margin](https://playbook.powerapp.cloud/global_props/margin)) global prop values can be passed as an object. All spacing values passed to `itemSpacing` will be applied to all navItems within the nav. Spacing (padding, margin) global props can still be used on nested navItems in conjunction with `itenSpacing` on the Nav for customized control. Any Spacing (padding,margin) global props applied directly to a navItem will override any competing `itemSpacing` value.

data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("caption", props: { margin_bottom: "sm", text: "Default Variant" }) %>
+<%= pb_rails("nav", props: { orientation: "horizontal" }) do %>
+  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+<% end %>
+<%= pb_rails("caption", props: { margin_bottom: "sm", margin_top:"lg", text: "Subtle Variant" }) %>
+<%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle" }) do %>
+  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+<% end %>
+<%= pb_rails("caption", props: { margin_bottom: "sm", margin_top:"lg", text: "Bold Variant" }) %>
+<%= pb_rails("nav", props: { orientation: "horizontal", variant: "bold" }) do %>
+  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.jsx

@@ -0,0 +1,113 @@
+import React from 'react'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+import Caption from '../../pb_caption/_caption'
+
+const HorizontalNavDisabled = (props) => {
+  return (
+    <>
+    <Caption marginBottom="sm">Default Variant</Caption>
+    <Nav
+        link="#"
+        orientation="horizontal"
+        {...props}
+    >
+      <NavItem
+          link="#"
+          text="About"
+          {...props}
+      />
+      <NavItem
+          active
+          link="#"
+          text="Case Studies"
+          {...props}
+      />
+      <NavItem
+          disabled
+          link="#"
+          text="Service"
+          {...props}
+      />
+      <NavItem
+          link="#"
+          text="Contacts"
+          {...props}
+      />
+      </Nav>
+      <Caption  
+          marginBottom="sm" 
+          marginTop="lg"
+      >
+        Subtle Variant
+      </Caption>
+      <Nav
+          link="#"
+          orientation="horizontal"
+          variant="subtle"
+          {...props}
+      >
+        <NavItem
+            link="#"
+            text="About"
+            {...props}
+        />
+        <NavItem
+            active
+            link="#"
+            text="Case Studies"
+            {...props}
+        />
+        <NavItem
+            disabled
+            link="#"
+            text="Service"
+            {...props}
+        />
+        <NavItem
+            link="#"
+            text="Contacts"
+            {...props}
+        />
+      </Nav>
+      <Caption  
+          marginBottom="sm" 
+          marginTop="lg"
+      >
+        Bold Variant
+      </Caption>
+      <Nav
+          link="#"
+          orientation="horizontal"
+          variant="bold"
+          {...props}
+      >
+        <NavItem
+            link="#"
+            text="About"
+            {...props}
+        />
+        <NavItem
+            active
+            link="#"
+            text="Case Studies"
+            {...props}
+        />
+        <NavItem
+            disabled
+            link="#"
+            text="Service"
+            {...props}
+        />
+        <NavItem
+            link="#"
+            text="Contacts"
+            {...props}
+        />
+      </Nav>
+    </>
+  )
+}
+
+export default HorizontalNavDisabled

data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.md

@@ -0,0 +1 @@
+Use the `disabled` prop on a `navItem`/`nav_item` within a horizontal nav to set it as disabled. This will render the UI as disabled, prevent clicks and not allow for tabIndex to access the item. 

data/app/pb_kits/playbook/pb_nav/docs/_nav_with_spacing_control.md

@@ -1 +1 @@
-All Nav variants' navItems accept our [global Spacing](https://playbook.powerapp.cloud/visual_guidelines/spacing) (padding, margin) props for custom spacing requirements. This example uses paddingY="xxs" and margin="none" on the bold variant to show this in action!
+All Nav variants' navItems accept our global Spacing ([padding](https://playbook.powerapp.cloud/global_props/padding), [margin](https://playbook.powerapp.cloud/global_props/margin)) props for custom spacing requirements. This example uses paddingY="xxs" and margin="none" on the bold variant to show this in action!

data/app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.html.erb

@@ -0,0 +1,30 @@
+<%= pb_rails("flex", props: { justify: "between" }) do %>
+  <%= pb_rails("flex", props: { orientation:"column", wrap: true }) do %>
+    <%= pb_rails("caption", props: { margin_bottom: "sm", text: "Default Variant" }) %>
+    <%= pb_rails("nav") do %>
+      <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+      <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+      <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
+      <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+    <% end %>
+  <% end %>
+    <%= pb_rails("flex", props: { orientation:"column", wrap: true }) do %>
+    <%= pb_rails("caption", props: { margin_bottom: "sm", text: "Subtle Variant" }) %>
+    <%= pb_rails("nav", props:{variant: "subtle"}) do %>
+      <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+      <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+      <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
+      <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+    <% end %>
+  <% end %>
+    <%= pb_rails("flex", props: { orientation:"column", wrap: true }) do %>
+    <%= pb_rails("caption", props: { margin_bottom: "sm", text: "Bold Variant" }) %>
+    <%= pb_rails("nav", props:{variant: "bold"}) do %>
+      <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+      <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+      <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
+      <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+    <% end %>
+  <% end %>
+  
+<% end %>

data/app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.jsx

@@ -0,0 +1,117 @@
+import React from 'react'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+import Caption from '../../pb_caption/_caption'
+import Flex from '../../pb_flex/_flex'
+
+const VerticalNavDisabled = (props) => {
+  return (
+    <Flex justify="between" 
+        wrap
+    >
+        <Flex orientation="column">
+            <Caption marginBottom="sm">Default Variant</Caption>
+            <Nav
+                link="#"
+                {...props}
+            >
+            <NavItem
+                link="#"
+                text="About"
+                {...props}
+            />
+            <NavItem
+                active
+                link="#"
+                text="Case Studies"
+                {...props}
+            />
+            <NavItem
+                disabled
+                link="#"
+                text="Service"
+                {...props}
+            />
+            <NavItem
+                link="#"
+                text="Contacts"
+                {...props}
+            />
+            </Nav>
+        </Flex>
+        <Flex orientation="column">
+            <Caption  
+                marginBottom="sm" 
+            >
+                Subtle Variant
+            </Caption>
+            <Nav
+                link="#"
+                variant="subtle"
+                {...props}
+            >
+            <NavItem
+                link="#"
+                text="About"
+                {...props}
+            />
+            <NavItem
+                active
+                link="#"
+                text="Case Studies"
+                {...props}
+            />
+            <NavItem
+                disabled
+                link="#"
+                text="Service"
+                {...props}
+            />
+            <NavItem
+                link="#"
+                text="Contacts"
+                {...props}
+            />
+            </Nav>
+        </Flex>
+        <Flex orientation="column">
+            <Caption  
+                marginBottom="sm" 
+            >
+                Bold Variant
+            </Caption>
+            <Nav
+                link="#"
+                variant="bold"
+                {...props}
+            >
+                <NavItem
+                    link="#"
+                    text="About"
+                    {...props}
+                />
+                <NavItem
+                    active
+                    link="#"
+                    text="Case Studies"
+                    {...props}
+                />
+                <NavItem
+                    disabled
+                    link="#"
+                    text="Service"
+                    {...props}
+                />
+                <NavItem
+                    link="#"
+                    text="Contacts"
+                    {...props}
+                />
+            </Nav>
+        </Flex>
+    </Flex>
+  )
+}
+
+export default VerticalNavDisabled

data/app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.md

@@ -0,0 +1 @@
+Use the `disabled` prop on a `navItem`/`nav_item` within a vertical nav to set it as disabled. This will render the UI as disabled, prevent clicks and not allow for tabIndex to access the item. 

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

@@ -18,6 +18,8 @@ examples:
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
   - horizontal_nav_extendedunderline: Horizontal Nav With Extended Underline
+  - horizontal_nav_disabled: Horizontal Nav With Disabled Item
+  - vertical_nav_disabled: Vertical Nav With Disabled Item
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab
@@ -44,6 +46,8 @@ examples:
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
   - horizontal_nav_extendedunderline: Horizontal Nav With Extended Underline
+  - horizontal_nav_disabled: Horizontal Nav With Disabled Item
+  - vertical_nav_disabled: Vertical Nav With Disabled Item
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab

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

@@ -20,4 +20,6 @@ export { default as NavWithFontControl } from "./_nav_with_font_control.jsx"
 export { default as NavWithSpacingControl } from "./_nav_with_spacing_control.jsx"
 export { default as CollapsibleNavItemSpacing } from "./_collapsible_nav_item_spacing.jsx"
 export { default as CollapsibleNavNoIcon } from "./_collapsible_nav_no_icon.jsx"
-export { default as HorizontalNavExtendedunderline } from './_horizontal_nav_extendedunderline.jsx'
+export { default as HorizontalNavExtendedunderline } from './_horizontal_nav_extendedunderline.jsx'
+export { default as HorizontalNavDisabled } from './_horizontal_nav_disabled.jsx'
+export { default as VerticalNavDisabled } from './_vertical_nav_disabled.jsx'

data/app/pb_kits/playbook/pb_nav/item.html.erb

@@ -24,10 +24,12 @@
     <% end %>
   <% else %>
     <%= pb_content_tag( object.tag,
-        href: object.link && object.link,
-        target: object.link && object.target,
-        onkeydown: !object.link ? "if(event.key==='Enter'||event.key===' '){event.preventDefault(); this.click();}" : nil,
-        tabindex: object.link ? nil : 0,
+        aria: { disabled: object.disabled },
+        href: object.is_link ? object.link : nil,
+        target: object.is_link ? object.target : nil,
+        onclick: object.disabled ? "event.preventDefault(); event.stopPropagation(); return false;" : nil,
+        onkeydown: object.disabled ? nil : (!object.is_link ? "if(event.key==='Enter'||event.key===' '){event.preventDefault(); this.click();}" : nil),
+        tabindex: object.disabled ? -1 : (object.is_link ? nil : 0),
       ) do %>
       <% if object.image_url %>
         <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>

data/app/pb_kits/playbook/pb_nav/item.rb

@@ -4,6 +4,7 @@ module Playbook
   module PbNav
     class Item < Playbook::KitBase
       prop :active, type: Playbook::Props::Boolean, default: false
+      prop :disabled, type: Playbook::Props::Boolean, default: false
       prop :font_size, type: Playbook::Props::Enum,
                        values: %w[normal small],
                        default: "normal"
@@ -26,7 +27,7 @@ module Playbook
         if collapsible
           "#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{generate_classname('pb_collapsible_nav_item', active_class, collapsible_trail_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link_collapsible"
         else
-          "#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link"
+          "#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link#{disabled_class}"
         end
       end
 
@@ -81,7 +82,11 @@ module Playbook
       end
 
       def tag
-        link ? "a" : "div"
+        link && !disabled ? "a" : "div"
+      end
+
+      def is_link
+        link && !disabled
       end
 
       def collapsible_icons
@@ -98,6 +103,10 @@ module Playbook
         active ? "active" : nil
       end
 
+      def disabled_class
+        disabled ? " pb_nav_item_disabled" : nil
+      end
+
       def highlighted_border_class
         !highlighted_border && active ? "highlighted_border_none" : nil
       end

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md

@@ -2,4 +2,4 @@ The optional `layout` prop accepts the `position` and `size` of the overlay as a
 
 The `position` key accepts `bottom` (default), `top`, `y` (for both top and bottom) `right`, `left`, or `x` (for both left and right), which sets the side(s) where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
 
-The `size` value is `full` (100%) by default, but accepts our [spacing tokens](https://playbook.powerapp.cloud/visual_guidelines/spacing) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s).
+The `size` value is `full` (100%) by default, but accepts our spacing tokens([padding](https://playbook.powerapp.cloud/global_props/padding), [margin](https://playbook.powerapp.cloud/global_props/margin)) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s).

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

@@ -1,3 +1,5 @@
-This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
+**In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.**
+
+This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
 See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.md

@@ -0,0 +1 @@
+In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb

@@ -36,7 +36,7 @@
 }
 %>
 
-<%= pb_rails("title", props: {size: 4, text: "align | vertical_align", padding_top: "sm", padding_bottom: "sm"})%>
+<%= pb_rails("title", props: {size: 4, text: "align | verticalAlign", padding_top: "sm", padding_bottom: "sm"})%>
 
 
 <%= pb_rails("pb_bar_graph", props: {options: chart_options_right}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.md

@@ -0,0 +1,11 @@
+Highcharts provides many options for customizing the legend display. This example showcases the following:
+
+`align` can be used to align the legend left, right or center (defaults to center)
+
+`verticalAlign` can be used to place the legend above the graph. Options are top, middle, bottom with default set to bottom
+
+`layout` determines the position of the legend items. Options are horizontal, vertical or proximate with default set to horizontal `layout: proximate` will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.
+
+`x` offsets the legend relative to its horizontal alignment. Negative x moves it to the left, positive x moves it to the right (defaults to 0)
+
+`y` offsets the legend relative to its vertical alignment. Negative y moves it up, positive y moves it down (defaults to 0)

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

@@ -1,3 +1,5 @@
-This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
+**In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.**
+
+This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
 See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md

@@ -1,4 +1,5 @@
-Custom tooltip formatting is configured through the tooltip object in the options passed to the kit: 
+Tooltip options from Highcharts:
+
 `headerFormat` **Type**: String | when set to null will disable the header.
 `pointFormat` **Type**: String | defines the HTML template for each data point and supports custom HTML when `useHTML` is enabled.
 `useHTML` **Type**: boolean (default false) | enables HTML rendering in tooltips.

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.md

@@ -0,0 +1 @@
+In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.