playbook_ui_docs 12.30.1.pre.alpha.hovertesting914 → 12.31.0.pre.alpha.customiconsfa928

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a2c84a0f873091b410667661f624c3442f12d15480ac3924edd26c5506fb94ee
-  data.tar.gz: 65413a134f6f67b7457d0c0bd9f7aac74b2f6941f6a51982f602b540826dfb36
+  metadata.gz: 3aa66131579acbc73e87e84da9eb38a5eb7d6488735b8c5b185292ffad622b5f
+  data.tar.gz: e927e333c8c0e7a09af654d9f601d3b17f4f70d8c49f7544238c0febcdd281da
 SHA512:
-  metadata.gz: 40d33fed824218bbe468c471ebe203a98d58f5b3ab767c15b160733241901902180d9a1bff66e0bbf9766754604438f06657fe8a16dab106cb81712b2691f685
-  data.tar.gz: 642057447b511fc6ab2fd0950c4f3bf204ea25770d15027dde879b9ab99c9b44a83263f4beb57d74dfbda518629b60438f57b320240def03c97b24f98e6f5cb8
+  metadata.gz: d21ca3a616d7609954e7dc97795ae39ce503fdd39b61d50c18353312a7c2482f171d328b0a93ce3c6a1da385b0a69dfec21c95b2ca82e42a05e16d927b9b9d85
+  data.tar.gz: c6af407024154b687ddde5b24aed494985534c191675bb00e5a56bca0cf76bcb84c4e896989c35e4f22f5e64857c8195afeecbe6629ae1cc28610c6e7755d319

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

@@ -3,34 +3,6 @@ import { Button } from "../../"
 
 const ButtonHover = (props) => (
   <div>
-    <div>
-      <Button
-          hover={{ background: "info" }}
-          marginRight='lg'
-          onClick={() => alert("button clicked!")}
-          tabIndex={0}
-          text='Color 1'
-          {...props}
-      />{" "}
-      <Button
-          hover={{ background: "success_subtle" }}
-          marginRight='lg'
-          onClick={() => alert("button clicked!")}
-          tabIndex={0}
-          text='Color 2'
-          variant='secondary'
-          {...props}
-      />{" "}
-      <Button
-          hover={{ background: "warning_subtle" }}
-          marginRight='lg'
-          onClick={() => alert("button clicked!")}
-          tabIndex={0}
-          text='Color 3'
-          variant='link'
-          {...props}
-      />
-    </div>
     <div>
       <Button
           hover={{ shadow: "deep" }}
@@ -62,68 +34,6 @@ const ButtonHover = (props) => (
           {...props}
       />
     </div>
-    <div>
-      <Button
-          hover={{ scale: "sm" }}
-          marginRight='lg'
-          marginTop='xl'
-          onClick={() => alert("button clicked!")}
-          tabIndex={0}
-          text='Scale Small'
-          {...props}
-      />{" "}
-      <Button
-          hover={{ scale: "md" }}
-          marginRight='lg'
-          marginTop='xl'
-          onClick={() => alert("button clicked!")}
-          tabIndex={0}
-          text='Scale Medium'
-          variant='secondary'
-          {...props}
-      />{" "}
-      <Button
-          hover={{ scale: "lg" }}
-          marginRight='lg'
-          marginTop='xl'
-          onClick={() => alert("button clicked!")}
-          tabIndex={0}
-          text='Scale Large'
-          variant='link'
-          {...props}
-      />
-    </div>
-    <div>
-      <Button
-          hover={{ background: "error_subtle", shadow: "deep" }}
-          marginRight='lg'
-          marginTop='xl'
-          onClick={() => alert("button clicked!")}
-          tabIndex={0}
-          text='Multiple Attributes'
-          {...props}
-      />{" "}
-      <Button
-          hover={{ background: "info_subtle", shadow: "deeper" }}
-          marginRight='lg'
-          marginTop='xl'
-          onClick={() => alert("button clicked!")}
-          tabIndex={0}
-          text='Multiple Attributes'
-          variant='secondary'
-          {...props}
-      />{" "}
-      <Button
-          hover={{ background: "success_subtle", shadow: "deepest" }}
-          marginRight='lg'
-          marginTop='xl'
-          onClick={() => alert("button clicked!")}
-          tabIndex={0}
-          text='Multiple Attributes'
-          variant='link'
-          {...props}
-      />
-    </div>
   </div>
 )
 

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

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

@@ -1,3 +1,4 @@
 export { default as TitleDefault } from './_title_default.jsx'
 export { default as TitleLightWeight } from './_title_light_weight.jsx'
 export { default as TitleColors } from './_title_colors.jsx'
+export { default as TitleResponsive } from './_title_responsive.jsx'