playbook_ui_docs 12.30.1.pre.alpha.play846responsivespacingglobalpropsneedsdefault924 → 12.31.0.pre.alpha.PLAY814removemomentjs933

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9563fd33f156c98dd84f913cee23bbc986f5e02529dff220d324522be2783271
-  data.tar.gz: ac523f3ec087831f17271ec02958e3621d8bef7f32d2c36fafae6a55beb9745d
+  metadata.gz: 75329ad1ed6730674dbd9518b683dbd61987b96da32ae848ebce3830a06c9fe6
+  data.tar.gz: d90e03c2576a034c215276c3aa863706690a1e1a78ffc6239e896c14d339b660
 SHA512:
-  metadata.gz: b340d90a69b359dcb398269d19978c986a67515244905072f420db805f15493b064772b97e6b5ca5ad50bc2a1a5b67396f40c0f653933691f7728638c9ee2c4f
-  data.tar.gz: 22914b97d57f4b986881b9ac8766805125ec69f38f8969e3f7d99e1d3eafc86257ae29ce19693214c9c09172bda6b0efcf968b435a3adc3275441774fdeb0057
+  metadata.gz: f36bbae48a2dfa3b39ece16b910d2d38e5c5da1753ecfb60706eecf689f6e1528edb7301379b0718c135363190bfe0d8e7ab2c0a40d453aeb186a5fcbb169935
+  data.tar.gz: c5d9a777c90782ea1c796bb0bdbd2d05fc1bfe49f589c7a47c3a734bd90d8dea961d473b602f2711784872f950659fb53b89073f8eb843b91c952015880b3354

data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.html.erb

@@ -0,0 +1,12 @@
+<div>
+  <%= pb_rails("badge", props: {
+    text: "1",
+    variant: "notification",
+    rounded: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "4",
+    variant: "notification"
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import Badge from '../_badge'
+
+const BadgeNotification = (props) => {
+  return (
+    <>
+      <Badge
+          rounded
+          text="1"
+          variant="notification"
+          {...props}
+      />
+
+      &nbsp;
+
+      <Badge
+          text="4"
+          variant="notification"
+          {...props}
+      />
+    </>
+  )
+}
+
+export default BadgeNotification

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

@@ -3,9 +3,10 @@ examples:
   - badge_default: Rectangle
   - badge_rounded: Rounded
   - badge_colors: Colors
- 
+  - badge_notification: Notification
 
   react:
   - badge_default: Rectangle
   - badge_rounded: Rounded
   - badge_colors: Colors
+  - badge_notification: Notification

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

@@ -1,3 +1,4 @@
 export { default as BadgeDefault } from './_badge_default'
 export { default as BadgeRounded } from './_badge_rounded'
 export { default as BadgeColors } from './_badge_colors'
+export { default as BadgeNotification } from './_badge_notification'

data/app/pb_kits/playbook/pb_button/docs/_button_hover.jsx

@@ -0,0 +1,40 @@
+import React from "react"
+import { Button } from "../../"
+
+const ButtonHover = (props) => (
+  <div>
+    <div>
+      <Button
+          hover={{ shadow: "deep" }}
+          marginRight='lg'
+          marginTop='xl'
+          onClick={() => alert("button clicked!")}
+          tabIndex={0}
+          text='Shadow Deep'
+          {...props}
+      />{" "}
+      <Button
+          hover={{ shadow: "deeper" }}
+          marginRight='lg'
+          marginTop='xl'
+          onClick={() => alert("button clicked!")}
+          tabIndex={0}
+          text='Shadow Deeper'
+          variant='secondary'
+          {...props}
+      />{" "}
+      <Button
+          hover={{ shadow: "deepest" }}
+          marginRight='lg'
+          marginTop='xl'
+          onClick={() => alert("button clicked!")}
+          tabIndex={0}
+          text='Shadow Deepest'
+          variant='link'
+          {...props}
+      />
+    </div>
+  </div>
+)
+
+export default ButtonHover

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

@@ -21,3 +21,4 @@ examples:
   - button_options: Button Additional Options (onClick)
   - button_size: Button Size
   - button_form: Button Form Attribute
+  - button_hover: Button Hover

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

@@ -8,3 +8,4 @@ export { default as ButtonAccessibility } from './_button_accessibility.jsx'
 export { default as ButtonOptions } from './_button_options.jsx'
 export { default as ButtonSize } from './_button_size.jsx'
 export { default as ButtonForm } from './_button_form.jsx'
+export { default as ButtonHover } from './_button_hover.jsx'

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Collapsible } from '../..'
 
 const CollapsibleDefault = () => (
-  <Collapsible >
+  <Collapsible>
     <Collapsible.Main>
       <div>{'Main Section'}</div>
     </Collapsible.Main>

data/app/pb_kits/playbook/pb_message/docs/_message_default.jsx

@@ -1,43 +1,33 @@
-import React from 'react'
+import React from "react"
 
-import Message from '../_message'
-import Image from '../../pb_image/_image'
+import Message from "../_message"
+import Image from "../../pb_image/_image"
 
 const MessageDefault = (props) => {
   return (
     <div>
       <Message
-          avatarName="Mike Bishop"
-          avatarStatus="online"
-          avatarUrl="https://randomuser.me/api/portraits/men/50.jpg"
-          label="Anna Black"
-          message="How can we assist you today?"
-          timestamp="20 seconds ago"
+          avatarName='Mike Bishop'
+          avatarStatus='online'
+          avatarUrl='https://randomuser.me/api/portraits/men/50.jpg'
+          borderRadius='rounded'
+          label='Anna Black'
+          message='How can we assist you today?'
+          timestamp='20 seconds ago'
           {...props}
       />
 
       <br />
       <br />
-
-      <Message
-          alignTimestamp="left"
-          avatarName="Wade Winningham"
-          avatarUrl="https://randomuser.me/api/portraits/men/14.jpg"
-          label="Patrick Welch"
-          message="We will escalate this issue to a Senior Support agent."
-          timestamp="9 minutes ago"
-          {...props}
-      />
-
       <br />
       <br />
 
       <Message
-          avatarName="Becca Jacobs"
-          avatarUrl="https://randomuser.me/api/portraits/women/50.jpg"
-          label="Lucille Sanchez"
-          message="Application for Kate Smith is waiting for your approval"
-          timestamp="2 days ago"
+          avatarName='Becca Jacobs'
+          avatarUrl='https://randomuser.me/api/portraits/women/50.jpg'
+          label='Lucille Sanchez'
+          message='Application for Kate Smith is waiting for your approval'
+          timestamp='2 days ago'
           {...props}
       />
 
@@ -45,10 +35,10 @@ const MessageDefault = (props) => {
       <br />
 
       <Message
-          avatarName="Timothy Wenhold"
-          label="Beverly Reyes"
-          message="We are so sorry you had a bad experience!"
-          timestamp="2 days ago"
+          avatarName='Timothy Wenhold'
+          label='Beverly Reyes'
+          message='We are so sorry you had a bad experience!'
+          timestamp='2 days ago'
           {...props}
       />
 
@@ -56,24 +46,23 @@ const MessageDefault = (props) => {
       <br />
 
       <Message
-          label="Keith Craig"
-          message="Please hold for one moment, I will check with my manager."
-          timestamp="2 days ago"
+          label='Keith Craig'
+          message='Please hold for one moment, I will check with my manager.'
+          timestamp='2 days ago'
           {...props}
       />
 
       <br />
       <br />
 
-      <Message
-          label="Keith Craig"
-          timestamp="2 days ago"
+      <Message label='Keith Craig'
+          timestamp='2 days ago'
           {...props}
       >
         <Image
-            alt="picture of a misty forest"
-            size="md"
-            url="https://unsplash.it/500/400/?image=634"
+            alt='picture of a misty forest'
+            size='md'
+            url='https://unsplash.it/500/400/?image=634'
         />
       </Message>
 
@@ -81,18 +70,17 @@ const MessageDefault = (props) => {
       <br />
 
       <Message
-          label="Keith Craig"
-          message="Please hold for one moment, I will check with my manager."
-          timestamp="2 days ago"
+          label='Keith Craig'
+          message='Please hold for one moment, I will check with my manager.'
+          timestamp='2 days ago'
           {...props}
       >
         <Image
-            alt="picture of a misty forest"
-            size="md"
-            url="https://unsplash.it/500/400/?image=634"
+            alt='picture of a misty forest'
+            size='md'
+            url='https://unsplash.it/500/400/?image=634'
         />
       </Message>
-
     </div>
   )
 }

data/app/pb_kits/playbook/pb_message/docs/_message_hover.jsx

@@ -0,0 +1,41 @@
+import React from "react"
+
+import Message from "../_message"
+
+const MessageHover = (props) => {
+  return (
+    <div>
+      <Message
+          avatarName='Mike Bishop'
+          avatarStatus='online'
+          avatarUrl='https://randomuser.me/api/portraits/men/50.jpg'
+          borderRadius='rounded'
+          hover={{ background: "success_subtle" }}
+          label='Anna Black'
+          message='How can we assist you today?'
+          padding="xs"
+          {...props}
+      />
+
+      <br />
+      <br />
+      <br />
+
+      <Message
+          avatarName='Becca Jacobs'
+          avatarUrl='https://randomuser.me/api/portraits/women/50.jpg'
+          borderRadius='rounded'
+          hover={{ shadow: "deepest" }}
+          label='Lucille Sanchez'
+          message='Application for Kate Smith is waiting for your approval'
+          padding="xs"
+          {...props}
+      />
+
+      <br />
+
+    </div>
+  )
+}
+
+export default MessageHover

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

@@ -8,4 +8,5 @@ examples:
   react:
   - message_default: Default
   - message_timestamp: With Timestamp Hover
+  - message_hover: Hover
 

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

@@ -1,2 +1,4 @@
 export { default as MessageDefault } from './_message_default.jsx'
 export { default as MessageTimestamp } from './_message_timestamp.jsx'
+export { default as MessageHover } from './_message_hover.jsx'
+

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

@@ -0,0 +1,76 @@
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "100",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "101",
+        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-seelcted_ids",
+    name: "my_data_array_selected",
+    return_all_selected: true,
+    selected_ids:["110","102"],
+    tree_data: treeData,
+}) %>
+ 

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

@@ -0,0 +1,88 @@
+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",
+        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 MultiLevelSelectSelectedIds = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id="multi-level-select-selected_ids"
+          onSelect={(selectedNodes) =>
+          console.log("Selected Items with Return All Selected Data", selectedNodes)
+          }
+          returnAllSelected
+          selectedIds={["energy1","talent1"]}
+          treeData={treeData}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default MultiLevelSelectSelectedIds;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md

@@ -0,0 +1,5 @@
+`selected_ids` (Rails) / `selectedIds` (React) is an optional prop that accepts an array of ids that, if present, will mark the corresponding nodes on the treeData as checked on page load. 
+
+Items that include `checked:true` on the treeData itself will also be selected on page load, even without being passed to `selectedIds`.
+
+When an item is marked as checked on page load by any means, the dropdown will expand to show the checked items for easier accessibility. 

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

@@ -2,9 +2,11 @@ examples:
   rails:
   - multi_level_select_default: Default
   - multi_level_select_return_all_selected: Return All Selected
+  - multi_level_select_selected_ids: Selected Ids
   - multi_level_select_with_form: With Form
   
   react:
   - multi_level_select_default: Default
   - multi_level_select_return_all_selected: Return All Selected
+  - multi_level_select_selected_ids: Selected Ids
   

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

@@ -1,2 +1,3 @@
 export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'
-export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
+export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
+export { default as MultiLevelSelectSelectedIds } from "./_multi_level_select_selected_ids.jsx"

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.html.erb

@@ -0,0 +1,14 @@
+<%= pb_rails("section_separator", props: { line_style: "dashed" }) do %>
+    <%= pb_rails("card", props: {
+        border_radius: "rounded",
+        justify_content: "center",
+        padding: "none"
+    })  do %>
+        <%= pb_rails("caption", props: {
+            text: "TODAY",
+            size: "xs",
+            padding_left: "xs",
+            padding_right: "xs" 
+        }) %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { SectionSeparator, Card, Caption } from '../../'
+
+const children = (
+    <Card
+        borderRadius="rounded"
+        justifyContent="center"
+        padding="none"
+    >
+        <Caption
+            paddingLeft="xs"
+            paddingRight="xs"
+            size="xs"
+            text="TODAY"
+        />
+    </Card>
+)
+
+const SectionSeparatorChildren = (props) => {
+    return (
+        <SectionSeparator
+            {...props}
+            lineStyle='dashed'
+        >
+            {children}
+        </SectionSeparator>
+    )
+}
+
+export default SectionSeparatorChildren

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.md

@@ -0,0 +1,3 @@
+Pass anything (including any of our kits) to the `children` prop to customize a separator's content.
+
+**NOTE:** passing `children` overrides any content passed to `text`

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("section_separator", props: { line_style: "dashed" }) %>

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { SectionSeparator } from '../../'
+
+const SectionSeparatorDashed = (props) => {
+    return (
+        <SectionSeparator
+            {...props}
+            lineStyle='dashed'
+        />
+    )
+}
+
+export default SectionSeparatorDashed

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.html.erb

@@ -1 +1 @@
-<%= pb_rails("section_separator", props: { text: "Title Separator" }) %>
+<%= pb_rails("section_separator", props: { text: "Text Separator" }) %>

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx

@@ -5,7 +5,7 @@ const SectionSeparatorText = (props) => {
   return (
     <SectionSeparator
         {...props}
-        text="Title Separator"
+        text="Text Separator"
     />
   )
 }

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

@@ -1,12 +1,15 @@
 examples:
 
   rails:
-  - section_separator_text: Text Separator
   - section_separator_line: Line Separator
+  - section_separator_dashed: Dashed Separator
+  - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
-
+  - section_separator_children: Children
 
   react:
-  - section_separator_text: Text Separator
   - section_separator_line: Line Separator
+  - section_separator_dashed: Dashed Separator
+  - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
+  - section_separator_children: Children

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

@@ -1,3 +1,5 @@
 export { default as SectionSeparatorLine } from './_section_separator_line.jsx'
 export { default as SectionSeparatorText } from './_section_separator_text.jsx'
 export { default as SectionSeparatorVertical } from './_section_separator_vertical.jsx'
+export { default as SectionSeparatorDashed } from './_section_separator_dashed.jsx'
+export { default as SectionSeparatorChildren } from './_section_separator_children.jsx'

data/app/pb_kits/playbook/pb_title/docs/_title_responsive.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("title", props: { text: "Responsive Title", tag: "h1", size: {xs: 3, sm: 2, md: 1} }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_responsive.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import Title from '../_title'
+
+const TitleResponsive = (props) => {
+  return (
+    <>
+      <Title
+          size={{xs: "3", sm: "2", md: "1"}}
+          text="Responsive Title"
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TitleResponsive

data/app/pb_kits/playbook/pb_title/docs/_title_responsive.md

@@ -0,0 +1 @@
+The `size` prop supports responsive sizes. To use them, pass an object to the size prop containing your size values relative to responsive break points (show code below). To test this here, resize your browser window to responsively change this Title's size.

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

@@ -3,8 +3,10 @@ examples:
   - title_default: Default UI
   - title_light_weight: Light Weight UI
   - title_colors: Colors
+  - title_responsive: Responsive
 
   react:
   - title_default: Default UI
   - title_light_weight: Light Weight UI
   - title_colors: Colors
+  - title_responsive: Responsive