playbook_ui_docs 14.19.0.pre.rc.2 → 14.20.0.pre.alpha.PLAY21817891

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

@@ -4,80 +4,80 @@ import MultiLevelSelect from "../_multi_level_select";
 const treeData = [
   {
     label: "HQ",
-    value: "HQ",
+    value: "hQ",
     id: "hq1",
   },
   {
     label: "Philadelphia",
-    value: "Philadelphia",
+    value: "philadelphia",
     id: "phl1",
     hideRadio: true,
     children: [
       {
         label: "Marketing & Sales PHL",
-        value: "Marketing & Sales PHL",
+        value: "marketingAndSalesPhl",
         id: "marketingPHL1",
       },
       {
         label: "Installation Office PHL",
-        value: "Installation Office PHL",
+        value: "installationOfficePhl",
         id: "installationPHL1",
       },
       {
         label: "Warehouse PHL",
-        value: "Warehouse PHL",
+        value: "warehousePhl",
         id: "warehousePHL1",
       },
     ]
   },
   {
     label: "New Jersey",
-    value: "New Jersey",
+    value: "newJersey",
     id: "nj2",
     hideRadio: true,
     children: [
       {
         label: "New Jersey",
-        value: "New Jersey",
+        value: "newJersey",
         id: "nj3",
         hideRadio: true,
         children: [
           {
             label: "Marketing & Sales NJ",
-            value: "Marketing & Sales NJ",
+            value: "marketingAndSalesNj",
             id: "marketingNJ1",
           },
           {
             label: "Installation Office NJ",
-            value: "Installation Office NJ",
+            value: "installationOfficeNj",
             id: "installationNJ1",
           },
           {
             label: "Warehouse NJ",
-            value: "Warehouse NJ",
+            value: "warehouseNj",
             id: "warehouseNJ1",
           },
         ],
       },
       {
         label: "Princeton",
-        value: "Princeton",
+        value: "princeton",
         id: "princeton1",
         hideRadio: true,
         children: [
           {
             label: "Marketing & Sales Princeton",
-            value: "Marketing & Sales Princeton",
+            value: "marketingAndSalesPrinceton",
             id: "marketingPR1",
           },
           {
             label: "Installation Office Princeton",
-            value: "Installation Office Princeton",
+            value: "installationOfficePrinceton",
             id: "installationPR1",
           },
           {
             label: "Warehouse Princeton",
-            value: "Warehouse Princeton",
+            value: "warehousePrinceton",
             id: "warehousePR1",
           },
         ]
@@ -86,46 +86,46 @@ const treeData = [
   },
   {
     label: "Maryland",
-    value: "Maryland",
+    value: "maryland",
     id: "MD1",
     hideRadio: true,
     children: [
       {
         label: "Marketing & Sales MD",
-        value: "Marketing & Sales MD",
+        value: "marketingAndSalesMd",
         id: "marketingMD1",
       },
       {
         label: "Installation Office MD",
-        value: "Installation Office MD",
+        value: "installationOfficeMd",
         id: "installationMD1",
       },
       {
         label: "Warehouse MD",
-        value: "Warehouse MD",
+        value: "warehouseMd",
         id: "warehouseMD1",
       },
     ]
   },
   {
     label: "Connecticut",
-    value: "Connecticut",
+    value: "connecticut",
     id: "CT1",
     hideRadio: true,
     children: [
       {
         label: "Marketing & Sales CT",
-        value: "Marketing & Sales CT",
+        value: "marketingAndSalesCt",
         id: "marketingCT1",
       },
       {
         label: "Installation Office CT",
-        value: "Installation Office CT",
+        value: "installationOfficeCt",
         id: "installationCT1",
       },
       {
         label: "Warehouse CT",
-        value: "Warehouse CT",
+        value: "warehouseCt",
         id: "warehouseCT1",
       },
     ]

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

@@ -5,25 +5,25 @@ import Badge from "../../pb_badge/_badge";
 const treeData = [
   {
     label: "Power Home Remodeling",
-    value: "Power Home Remodeling",
+    value: "powerHomeRemodeling",
     id: "powerhome1",
     expanded: true,
     children: [
       {
         label: "People",
-        value: "People",
+        value: "people",
         id: "people1",
         expanded: true,
         status: "active",
         children: [
           {
             label: "Talent Acquisition",
-            value: "Talent Acquisition",
+            value: "talentAcquisition",
             id: "talent1",
           },
           {
             label: "Business Affairs",
-            value: "Business Affairs",
+            value: "businessAffairs",
             id: "business1",
             status: "active",
             variant: "primary",
@@ -31,12 +31,12 @@ const treeData = [
             children: [
               {
                 label: "Initiatives",
-                value: "Initiatives",
+                value: "initiatives",
                 id: "initiative1",
               },
               {
                 label: "Learning & Development",
-                value: "Learning & Development",
+                value: "learningAndDevelopment",
                 id: "development1",
                 status: "Inactive",
               },
@@ -44,31 +44,31 @@ const treeData = [
           },
           {
             label: "People Experience",
-            value: "People Experience",
+            value: "peopleExperience",
             id: "experience1",
           },
         ],
       },
       {
         label: "Contact Center",
-        value: "Contact Center",
+        value: "contactCenter",
         id: "contact1",
         status: "Inactive",
         variant: "error",
         children: [
           {
             label: "Appointment Management",
-            value: "Appointment Management",
+            value: "appointmentManagement",
             id: "appointment1",
           },
           {
             label: "Customer Service",
-            value: "Customer Service",
+            value: "customerService",
             id: "customer1",
           },
           {
             label: "Energy",
-            value: "Energy",
+            value: "energy",
             id: "energy1",
           },
         ],

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

@@ -5,25 +5,25 @@ import Badge from "../../pb_badge/_badge";
 const treeData = [
   {
     label: "Power Home Remodeling",
-    value: "Power Home Remodeling",
+    value: "powerHomeRemodeling",
     id: "powerhome1",
     expanded: true,
     children: [
       {
         label: "People",
-        value: "People",
+        value: "people",
         id: "people1",
         expanded: true,
         status: "active",
         children: [
           {
             label: "Talent Acquisition",
-            value: "Talent Acquisition",
+            value: "talentAcquisition",
             id: "talent1",
           },
           {
             label: "Business Affairs",
-            value: "Business Affairs",
+            value: "businessAffairs",
             id: "business1",
             status: "active",
             variant: "primary",
@@ -31,12 +31,12 @@ const treeData = [
             children: [
               {
                 label: "Initiatives",
-                value: "Initiatives",
+                value: "initiatives",
                 id: "initiative1",
               },
               {
                 label: "Learning & Development",
-                value: "Learning & Development",
+                value: "learningAndDevelopment",
                 id: "development1",
                 status: "Inactive",
               },
@@ -44,31 +44,31 @@ const treeData = [
           },
           {
             label: "People Experience",
-            value: "People Experience",
+            value: "peopleExperience",
             id: "experience1",
           },
         ],
       },
       {
         label: "Contact Center",
-        value: "Contact Center",
+        value: "contactCenter",
         id: "contact1",
         status: "Inactive",
         variant: "error",
         children: [
           {
             label: "Appointment Management",
-            value: "Appointment Management",
+            value: "appointmentManagement",
             id: "appointment1",
           },
           {
             label: "Customer Service",
-            value: "Customer Service",
+            value: "customerService",
             id: "customer1",
           },
           {
             label: "Energy",
-            value: "Energy",
+            value: "energy",
             id: "energy1",
           },
         ],

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

@@ -2,62 +2,62 @@
 
   <% treeData = [{
   label: "Power Home Remodeling",
-  value: "Power Home Remodeling",
+  value: "powerHomeRemodeling",
   id: "powerhome1",
   expanded: true,
   children: [
     {
       label: "People",
-      value: "People",
+      value: "people",
       id: "people1",
       children: [
         {
           label: "Talent Acquisition",
-          value: "Talent Acquisition",
+          value: "talentAcquisition",
           id: "talent1",
         },
         {
           label: "Business Affairs",
-          value: "Business Affairs",
+          value: "businessAffairs",
           id: "business1",
           children: [
             {
               label: "Initiatives",
-              value: "Initiatives",
+              value: "initiatives",
               id: "initiative1",
             },
             {
               label: "Learning & Development",
-              value: "Learning & Development",
+              value: "learningAndDevelopment",
               id: "development1",
             },
           ],
         },
         {
           label: "People Experience",
-          value: "People Experience",
+          value: "peopleExperience",
           id: "experience1",
         },
       ],
     },
     {
       label: "Contact Center",
-      value: "Contact Center",
+      value: "contactCenter",
       id: "contact1",
       children: [
         {
           label: "Appointment Management",
-          value: "Appointment Management",
+          value: "appointmentManagement",
           id: "appointment1",
         },
         {
           label: "Customer Service",
-          value: "Customer Service",
+          value: "customerService",
           id: "customer1",
         },
         {
           label: "Energy",
-          value: "Energy",
+          value: "energy",
           id: "energy1",
         },
       ],

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx

@@ -9,7 +9,7 @@ const InlineCardsExample = forwardRef(function InlineCardsExample(ref) {
         <Flex
             columnGap="lg"
             orientation="row"
-            ref={ref} 
+            ref={ref}
         >
             {Array.from({ length: 15 }, (_, index) => (
                 <FlexItem key={index}>

data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("select", props: {
-  error: "Please make a valid selection",
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
   label: "Favorite Food",
   name: "food",
   options: [

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

@@ -8,7 +8,7 @@ const TableWithCollapsibleWithCustomClick = (props) => {
 
   const Content = () => {
     return (
-      <Card 
+      <Card
           borderNone
           borderRadius="none"
           padding="md"
@@ -37,7 +37,7 @@ return (
 
         </Table.Head>
         <Table.Body>
-          <Table.Row collapsible 
+          <Table.Row collapsible
               collapsibleContent={<Content/>}
               toggleCellId="cell-1"
               {...props}
@@ -47,7 +47,7 @@ return (
             <Table.Cell>{'Value 3'}</Table.Cell>
             <Table.Cell>{'Value 4'}</Table.Cell>
             <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell cursor="pointer" 
+            <Table.Cell cursor="pointer"
                 id="cell-1"
                 textAlign="right"
             >
@@ -59,7 +59,7 @@ return (
             </Table.Cell>
 
           </Table.Row>
-          <Table.Row collapsible 
+          <Table.Row collapsible
               collapsibleContent={<Content/>}
               toggleCellId="cell-2"
               {...props}
@@ -69,7 +69,7 @@ return (
             <Table.Cell>{'Value 3'}</Table.Cell>
             <Table.Cell>{'Value 4'}</Table.Cell>
             <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell cursor="pointer" 
+            <Table.Cell cursor="pointer"
                 id="cell-2"
                 textAlign="right"
             >
@@ -81,7 +81,7 @@ return (
             </Table.Cell>
 
           </Table.Row>
-          <Table.Row collapsible 
+          <Table.Row collapsible
               collapsibleContent={<Content/>}
               toggleCellId="cell-3"
               {...props}
@@ -91,7 +91,7 @@ return (
             <Table.Cell>{'Value 3'}</Table.Cell>
             <Table.Cell>{'Value 4'}</Table.Cell>
             <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell cursor="pointer" 
+            <Table.Cell cursor="pointer"
                 id="cell-3"
                 textAlign="right"
             >

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb

@@ -4,7 +4,7 @@
     border: true,
     icon: "user"
   },
-  error: "Please enter a valid email address",
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please enter a valid email address"),
   label: "Email Address",
   placeholder: "Enter email address",
   type: "email"

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb

@@ -1 +1,5 @@
-<%= pb_rails("textarea", props: { error: "This field has an error!", label: "Label", rows: 4}) %>
+<%= pb_rails("textarea", props: {
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " This field has an error!"),
+  label: "Label",
+  rows: 4
+}) %>

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

@@ -8,7 +8,14 @@
 
 %>
 
-<%= pb_rails("typeahead", props: { id: "typeahead-error-example", options: options, error: "Please make a valid selection", label: "Products", name: :foo, is_multi: false }) %>
+<%= pb_rails("typeahead", props: {
+  id: "typeahead-error-example",
+  options: options,
+  error: "Please make a valid selection",
+  label: "Products",
+  name: :foo,
+  is_multi: false
+}) %>
 
 <!-- This section is an example of the available JavaScript event hooks -->
 <%= javascript_tag defer: "defer" do %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.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 TypeaheadPreserveInput = (props) => {
+  return (
+    <Typeahead
+        label="Colors"
+        options={options}
+        preserveSearchInput
+        {...props}
+    />
+  )
+}
+
+export default TypeaheadPreserveInput

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.md

@@ -0,0 +1 @@
+By default, text is not preserved in the typeahead kit when you click off of the input field. You can utilize the `preserveSearchInput` prop in order to prevent text from being cleared when the field loses focus

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

@@ -34,3 +34,4 @@ examples:
     - typeahead_with_pills_color: With Pills (Custom Color)
     - typeahead_truncated_text: Truncated Text
     - typeahead_disabled: Disabled
+    - typeahead_preserve_input: Preserve Search Input

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

@@ -15,3 +15,4 @@ export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_colo
 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'
+export { default as TypeaheadPreserveInput } from './_typeahead_preserve_input.jsx'

data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("user", props: {
+  name: "Anna Black",
+  title: "Remodeling Consultant",
+  avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+  avatar_grayscale: true,
+}) %>

data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import User from '../../pb_user/_user'
+
+const UserGrayscale = (props) => {
+  return (
+    <User
+        avatarGrayscale
+        avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+        name="Anna Black"
+        title="Remodeling Consultant"
+        {...props}
+    />
+  )
+}
+
+export default UserGrayscale

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

@@ -10,6 +10,7 @@ examples:
   - user_subtitle: Subtitle
   - user_block_content_subtitle_rails: Block Content Subtitle
   - user_font_options: Font Options
+  - user_grayscale: Grayscale Avatar
 
   react:
   - user_default: Default
@@ -21,6 +22,7 @@ examples:
   - user_subtitle: Subtitle
   - user_block_content_subtitle_react: Block Content Subtitle
   - user_font_options: Font Options
+  - user_grayscale: Grayscale Avatar
 
   swift:
   - user_horizontal_swift: Horizontal

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

@@ -7,3 +7,4 @@ export { default as UserVerticalSize } from './_user_vertical_size.jsx'
 export { default as UserSubtitle } from './_user_subtitle.jsx'
 export { default as UserBlockContentSubtitleReact } from './_user_block_content_subtitle_react.jsx'
 export { default as UserFontOptions } from './_user_font_options.jsx'
+export { default as UserGrayscale } from './_user_grayscale.jsx'