playbook_ui_docs 14.16.0.pre.rc.6 → 14.17.0.pre.alpha.PBNTR925railstablecustomheaders7161

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb

@@ -1,10 +1,10 @@
 <% 
-  options = [
+   options = [
     {
       label: "Jasper Furniss",
       value: "Jasper Furniss",
       territory: "PHL",
-      title: "Senior UX Engineer",
+      title: "Lead UX Engineer",
       id: "jasper-furniss",
       status: "Offline"
     },
@@ -17,22 +17,22 @@
       status: "Away"
     },
     {
-      label: "Jason Cypret",
-      value: "Jason Cypret",
+      label: "Carlos Lima",
+      value: "Carlos Lima",
       territory: "PHL",
-      title: "VP of User Experience",
-      id: "jason-cypret",
+      title: "Nitro Developer",
+      id: "carlos-lima",
       status: "Online"
     },
     {
       label: "Courtney Long",
       value: "Courtney Long",
       territory: "PHL",
-      title: "UX Design Mentor",
+      title: "Lead UX Designer",
       id: "courtney-long",
       status: "Online"
     }
-  ]
+  ];
 
 %>
 

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -22,6 +22,72 @@
 
 %>
 
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "100",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "101",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "102",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "103",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "104",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "105",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "106",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "107",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "108",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "109",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "110",
+          },
+        ],
+      },
+    ],
+}] %>
+
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
@@ -47,6 +113,7 @@
   <%= form.date_picker :example_date_picker_1, props: { label: true } %>
   <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true } %>
+  <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form-default", tree_data: treeData, margin_bottom: "sm", label: "Example Multi Level Select field" } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -21,6 +21,72 @@
   ]
 %>
 
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "100",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "101",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "102",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "103",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "104",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "105",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "106",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "107",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "108",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "109",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "110",
+          },
+        ],
+      },
+    ],
+}] %>
+
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
   <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
@@ -38,6 +104,7 @@
   <%= form.date_picker :example_date_picker_2, props: { label: true, required: true, validation_message: "Please, select a date.", allow_input: true } %>
   <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
+  <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form", tree_data: treeData, margin_bottom: "sm", required: true, label: "Example Multi Level Select field" } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_color.html.erb

@@ -1,5 +1,11 @@
-<%= pb_rails("flex", props: {orientation: "column"}) do %>
-    <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "primary", padding_bottom: "sm", size: "2x" }) %>
-    <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "data_4", padding_bottom: "sm", size: "2x" }) %>
+<%= pb_rails("flex", props: { margin_bottom: "sm" }) do %>
+    <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "primary", size: "2x" }) %>
+    <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "data_4", size: "2x" }) %>
     <%= pb_rails("icon", props: { icon: "roofing", fixed_width: true, color: "product_5_background", size: "2x" }) %>
-<% end %>
+<% end %>
+
+<%= pb_rails("flex", props: {}) do %>
+    <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "light", size: "2x" }) %>
+    <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "lighter", size: "2x" }) %>
+    <%= pb_rails("icon", props: { icon: "roofing", fixed_width: true, color: "link", size: "2x" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_color.jsx

@@ -1,32 +1,57 @@
 import React from "react"
 import Icon from "../_icon"
+import Flex from "../../pb_flex/_flex"
 
 const IconDefault = (props) => {
   return (
-    <div style={{ display: "flex", flexDirection: "column"}}>
-      <Icon
-          color="primary"
-          fixedWidth
-          icon="user"
-          paddingBottom="sm"
-          size="2x"
-          {...props}
-      />
-      <Icon
-          color="data_4"
-          fixedWidth
-          icon="recycle"
-          paddingBottom="sm"
-          size="2x"
-          {...props}
-      />
-      <Icon
-          color="product_5_background"
-          fixedWidth
-          icon="product-roofing"
-          size="2x"
-          {...props}
-      />
+    <div>
+      <Flex marginBottom="sm">
+        <Icon
+            color="primary"
+            fixedWidth
+            icon="user"
+            size="2x"
+            {...props}
+        />
+        <Icon
+            color="data_4"
+            fixedWidth
+            icon="recycle"
+            size="2x"
+            {...props}
+        />
+        <Icon
+            color="product_5_background"
+            fixedWidth
+            icon="product-roofing"
+            size="2x"
+            {...props}
+        />
+      </Flex>
+
+      <Flex>
+        <Icon
+            color="light"
+            fixedWidth
+            icon="user"
+            size="2x"
+            {...props}
+        />
+        <Icon
+            color="lighter"
+            fixedWidth
+            icon="recycle"
+            size="2x"
+            {...props}
+        />
+        <Icon
+            color="link"
+            fixedWidth
+            icon="product-roofing"
+            size="2x"
+            {...props}
+        />
+      </Flex>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_click.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import IconButton from '../../pb_icon_button/_icon_button'
+
+const IconButtonClick = (props) => (
+  <div>
+    <IconButton
+        {...props}
+        onClick={() => alert('Click!')}
+    />
+  </div>
+)
+
+export default IconButtonClick

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

@@ -7,3 +7,4 @@ examples:
   react:
   - icon_button_default: Default
   - icon_button_sizes: Sizes
+  - icon_button_click: Click Handler

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

@@ -1,2 +1,3 @@
 export { default as IconButtonDefault } from './_icon_button_default.jsx'
 export { default as IconButtonSizes } from './_icon_button_sizes.jsx'
+export { default as IconButtonClick } from './_icon_button_click.jsx'

data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx

@@ -0,0 +1,190 @@
+import React from 'react'
+
+import Layout from '../../pb_layout/_layout'
+import Flex from '../../pb_flex/_flex'
+import Body from '../../pb_body/_body'
+import Caption from '../../pb_caption/_caption'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
+
+const LayoutBracket = () => {
+  return (
+    <div>
+      <Layout
+          layout="bracket"
+      >
+        <Layout.RoundLabel>
+          <Caption>Wild Card</Caption>
+          <SectionSeparator marginY="sm"/>
+        </Layout.RoundLabel>
+        <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Packers</Body>
+              <Body>10</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Eagles</strong></Body>
+              <Body>22</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Vikings</Body>
+              <Body>9</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Rams</strong></Body>
+              <Body>27</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body><strong>Lions</strong></Body>
+            </Flex>
+            <Flex justify="between">
+              <Body>BYE</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body><strong>Commanders</strong></Body>
+              <Body>23</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body>Buccaneers</Body>
+              <Body>20</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body><strong>Chiefs</strong></Body>
+            </Flex>
+            <Flex justify="between">
+              <Body>BYE</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Chargers</Body>
+              <Body>12</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Texans</strong></Body>
+              <Body>32</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Broncos</Body>
+              <Body>7</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Bills</strong></Body>
+              <Body>31</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Steelers</Body>
+              <Body>14</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Ravens</strong></Body>
+              <Body>28</Body>
+            </Flex>
+          </Layout.Game>
+        </Layout.Round>
+        <Layout.RoundLabel>
+          <Caption>Divisional</Caption>
+          <SectionSeparator marginY="sm"/>
+        </Layout.RoundLabel>
+        <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Rams</Body>
+              <Body>22</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Eagles</strong></Body>
+              <Body>28</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body><strong>Commanders</strong></Body>
+              <Body>45</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body>Lions</Body>
+              <Body>31</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Texans</Body>
+              <Body>14</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Chiefs</strong></Body>
+              <Body>23</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Ravens</Body>
+              <Body>25</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Bills</strong></Body>
+              <Body>27</Body>
+            </Flex>
+          </Layout.Game>
+        </Layout.Round>
+        <Layout.RoundLabel>
+          <Caption>Conference</Caption>
+          <SectionSeparator marginY="sm"/>
+        </Layout.RoundLabel>
+        <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Commanders</Body>
+              <Body>23</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Eagles</strong></Body>
+              <Body>55</Body>
+            </Flex>
+          </Layout.Game>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Bills</Body>
+              <Body>29</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Chiefs</strong></Body>
+              <Body>32</Body>
+            </Flex>
+          </Layout.Game>
+        </Layout.Round>
+        <Layout.RoundLabel>
+          <Caption>Super Bowl</Caption>
+          <SectionSeparator marginY="sm"/>
+        </Layout.RoundLabel>
+        <Layout.Round>
+          <Layout.Game>
+            <Flex justify="between">
+              <Body>Chiefs</Body>
+              <Body>22</Body>
+            </Flex>
+            <Flex justify="between">
+              <Body><strong>Eagles</strong></Body>
+              <Body>40</Body>
+            </Flex>
+          </Layout.Game>
+        </Layout.Round>
+      </Layout>
+    </div>
+  )
+}
+
+export default LayoutBracket

data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md

@@ -0,0 +1,5 @@
+Use `<Layout.RoundLabel>`, `<Layout.Round>`, and `<Layout.Game>` to make a bracket layout.
+
+On mobile devices, `<Layout.RoundLabel>` will display (on desktop these components are hidden) and the bracket will be in one column.
+
+Ensure that each `<Layout.Game>` maintains a consistent height for the bracket lines to lay out properly.

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

@@ -18,4 +18,5 @@ examples:
   - layout_kanban: Kanban Layout
   - layout_content: Content Layout
   - layout_masonry: Masonry Layout
+  - layout_bracket: Bracket Layout
 

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

@@ -7,4 +7,5 @@ export { default as LayoutKanbanResponsive } from './_layout_kanban_responsive.j
 export { default as LayoutCollectionDetail } from './_layout_collection_detail.jsx'
 export { default as LayoutContent } from './_layout_content.jsx'
 export { default as LayoutMasonry } from './_layout_masonry.jsx'
+export { default as LayoutBracket } from './_layout_bracket.jsx'
 

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.html.erb

@@ -0,0 +1,72 @@
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "100",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "101",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "102",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "103",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "104",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "105",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "106",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "107",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "108",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "109",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "110",
+          },
+        ],
+      },
+    ],
+}] %>
+
+<%= pb_rails("multi_level_select", props: {
+    error: "Please make a valid selection",
+    id: "multi-level-select-error-rails",
+    name: "my_array",
+    tree_data: treeData
+}) %>