playbook_ui_docs 14.16.0.pre.rc.6 → 14.17.0.pre.rc.0

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_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
+}) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.jsx

@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from "react";
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative1",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "development1",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "contact1",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "customer1",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const MultiLevelSelectError = (props) => {
+  const [selectedItems, setSelectedItems] = useState([]);
+  const [errorState, setErrorState] = useState("Please make a valid selection");
+
+  useEffect(() => {
+    if (selectedItems.length === 0) {
+      setErrorState("Please make a valid selection");
+    } else {
+      setErrorState(null);
+    }
+  }, [selectedItems]);
+
+  return (
+    <div>
+      <MultiLevelSelect
+          error={errorState}
+          id="multiselect-error"
+          onSelect={(selectedNodes) => setSelectedItems(selectedNodes)}
+          treeData={treeData}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default MultiLevelSelectError;

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

@@ -0,0 +1,71 @@
+<% 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: {
+    id: "multi-level-select-label-rails",
+    label: "Select a department",
+    tree_data: treeData
+}) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx

@@ -0,0 +1,91 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative1",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "development1",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "contact1",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "customer1",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const MultiLevelSelectDefault = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id='multiselect-label'
+          label="Select a Department"
+          onSelect={(selectedNodes) =>
+          console.log(
+            "Selected Items",
+            selectedNodes
+          )
+        }
+          treeData={treeData}
+          {...props}
+      />
+    </div>
+  )
+};
+
+export default MultiLevelSelectDefault;

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

@@ -8,6 +8,8 @@ examples:
   - multi_level_select_with_form: With Form
   - multi_level_select_color: With Pills (Custom Color)
   - multi_level_select_reset: Reset Selection
+  - multi_level_select_label: With Label
+  - multi_level_select_error: Error
   - multi_level_select_disabled: Disabled Input
   - multi_level_select_disabled_options_default: Disabled Options (Default)
   - multi_level_select_disabled_options: Disabled Options (Return All Selected)
@@ -24,6 +26,8 @@ examples:
   - multi_level_select_color: With Pills (Custom Color)
   - multi_level_select_with_children: Checkboxes With Children
   - multi_level_select_with_children_with_radios: Single Select With Children
+  - multi_level_select_label: With Label
+  - multi_level_select_error: Error
   - multi_level_select_disabled: Disabled Input
   - multi_level_select_disabled_options_default: Disabled Options (Default)
   - multi_level_select_disabled_options: Disabled Options (Return All Selected)

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

@@ -8,7 +8,9 @@ export { default as MultiLevelSelectWithChildren } from './_multi_level_select_w
 export { default as MultiLevelSelectWithChildrenWithRadios } from './_multi_level_select_with_children_with_radios.jsx'
 export { default as MultiLevelSelectDisabled } from './_multi_level_select_disabled.jsx'
 export { default as MultiLevelSelectReactHook  } from './_multi_level_select_react_hook.jsx'
+export { default as MultiLevelSelectError } from './_multi_level_select_error.jsx'
 export { default as MultiLevelSelectDisabledOptions } from './_multi_level_select_disabled_options.jsx'
 export { default as MultiLevelSelectDisabledOptionsParent } from './_multi_level_select_disabled_options_parent.jsx'
 export { default as MultiLevelSelectDisabledOptionsParentDefault } from './_multi_level_select_disabled_options_parent_default.jsx'
-export { default as MultiLevelSelectDisabledOptionsDefault } from './_multi_level_select_disabled_options_default.jsx'
+export { default as MultiLevelSelectDisabledOptionsDefault } from './_multi_level_select_disabled_options_default.jsx'
+export { default as MultiLevelSelectLabel } from './_multi_level_select_label.jsx'

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb

@@ -1 +1 @@
-<%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here. You can format your text, add links, quotes, and bullets."}) %>
+<%= pb_rails("rich_text_editor", props: {input_options: { id: 'hidden_input_id', name: "hidden_input_name" }, value: "Add your text here. You can format your text, add links, quotes, and bullets."}) %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+
+import Table from '../../pb_table/_table'
+
+const TableWithHeaderStyleBorderless = (props) => {
+  return (
+    <>
+        <Table
+            headerStyle="borderless"
+            size="sm"
+            {...props}
+        >
+          <thead>
+              <tr>
+                  <th>{'Column 1'}</th>
+                  <th>{'Column 2'}</th>
+                  <th>{'Column 3'}</th>
+                  <th>{'Column 4'}</th>
+                  <th>{'Column 5'}</th>
+              </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>{'Value 1'}</td>
+              <td>{'Value 2'}</td>
+              <td>{'Value 3'}</td>
+              <td>{'Value 4'}</td>
+              <td>{'Value 5'}</td>
+            </tr>
+            <tr>
+              <td>{'Value 1'}</td>
+              <td>{'Value 2'}</td>
+              <td>{'Value 3'}</td>
+              <td>{'Value 4'}</td>
+              <td>{'Value 5'}</td>
+            </tr>
+            <tr>
+              <td>{'Value 1'}</td>
+              <td>{'Value 2'}</td>
+              <td>{'Value 3'}</td>
+              <td>{'Value 4'}</td>
+              <td>{'Value 5'}</td>
+            </tr>
+          </tbody>
+        </Table>
+    </>
+  )
+}
+
+export default TableWithHeaderStyleBorderless

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_react.md

@@ -0,0 +1 @@
+Customize your header by removing the header borders with the `headerStyle="borderless"` prop.

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.jsx

@@ -0,0 +1,59 @@
+import React from 'react'
+
+import Background from '../../pb_background/_background'
+import Card from '../../pb_card/_card'
+import Table from '../../pb_table/_table'
+
+const TableWithHeaderStyleFloating = (props) => {
+  return (
+    <>
+        <Card background="light" 
+            {...props}
+        >
+            <Table
+                headerStyle="floating"
+                size="sm"
+                {...props}
+            >
+              <Table.Head>
+                  <Background backgroundColor="light" 
+                      tag="tr"
+                      {...props}
+                  >
+                      <Table.Header>{'Column 1'}</Table.Header>
+                      <Table.Header>{'Column 2'}</Table.Header>
+                      <Table.Header>{'Column 3'}</Table.Header>
+                      <Table.Header>{'Column 4'}</Table.Header>
+                      <Table.Header>{'Column 5'}</Table.Header>
+                  </Background>
+              </Table.Head>
+              <Table.Body>
+                <Table.Row>
+                  <Table.Cell>{'Value 1'}</Table.Cell>
+                  <Table.Cell>{'Value 2'}</Table.Cell>
+                  <Table.Cell>{'Value 3'}</Table.Cell>
+                  <Table.Cell>{'Value 4'}</Table.Cell>
+                  <Table.Cell>{'Value 5'}</Table.Cell>
+                </Table.Row>
+                <Table.Row>
+                  <Table.Cell>{'Value 1'}</Table.Cell>
+                  <Table.Cell>{'Value 2'}</Table.Cell>
+                  <Table.Cell>{'Value 3'}</Table.Cell>
+                  <Table.Cell>{'Value 4'}</Table.Cell>
+                  <Table.Cell>{'Value 5'}</Table.Cell>
+                </Table.Row>
+                <Table.Row>
+                  <Table.Cell>{'Value 1'}</Table.Cell>
+                  <Table.Cell>{'Value 2'}</Table.Cell>
+                  <Table.Cell>{'Value 3'}</Table.Cell>
+                  <Table.Cell>{'Value 4'}</Table.Cell>
+                  <Table.Cell>{'Value 5'}</Table.Cell>
+                </Table.Row>
+              </Table.Body>
+            </Table>
+        </Card>
+    </>
+  )
+}
+
+export default TableWithHeaderStyleFloating

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md

@@ -0,0 +1 @@
+Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/react#table-with-background-kit) logic to give your table header a custom background color. Use the `headerStyle="floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `backgroundColor` passed to Background kit should match the `backgroundColor` for the element in which it is nested).

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

@@ -75,3 +75,5 @@ examples:
     - table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table
     - table_with_clickable_rows: Table with Clickable Rows
     - table_with_selectable_rows: Table with Selectable Rows
+    - table_with_header_style_borderless: Header Style Borderless
+    - table_with_header_style_floating: Header Style Floating

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

@@ -35,3 +35,5 @@ export { default as TableWithCollapsibleWithNestedRows } from './_table_with_col
 export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
 export { default as TableWithSelectableRows } from './_table_with_selectable_rows.jsx'
 export { default as TableWithClickableRows } from './_table_with_clickable_rows.jsx'
+export { default as TableWithHeaderStyleBorderless } from './_table_with_header_style_borderless.jsx'
+export { default as TableWithHeaderStyleFloating } from './_table_with_header_style_floating.jsx'

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_disabled.html.erb

@@ -0,0 +1,19 @@
+<%
+  options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-disabled",
+    disabled: true,
+    placeholder: "All Colors",
+    options: options,
+    label: "Colors",
+    name: :foo,
+    is_multi: false
+  })
+%>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_disabled.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import Typeahead from '../_typeahead'
+
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+]
+
+const TypeaheadDisabled = (props) => {
+  return (
+    <Typeahead
+        disabled
+        label="Colors"
+        options={options}
+        {...props}
+    />
+  )
+}
+
+export default TypeaheadDisabled

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

@@ -14,6 +14,7 @@ examples:
     - typeahead_truncated_text: Truncated Text
     - typeahead_dynamic_options: Dynamic Options
     - typeahead_dynamic_options_pure_rails: Dynamic Options (Pure Rails)
+    - typeahead_disabled: Disabled
 
   react:
     - typeahead_default: Default
@@ -32,3 +33,4 @@ examples:
     - typeahead_margin_bottom: Margin Bottom
     - typeahead_with_pills_color: With Pills (Custom Color)
     - typeahead_truncated_text: Truncated Text
+    - typeahead_disabled: Disabled

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

@@ -14,3 +14,4 @@ export { default as TypeaheadMarginBottom } from './_typeahead_margin_bottom.jsx
 export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'
 export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.jsx'
 export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
+export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'