playbook_ui_docs 14.1.0.pre.alpha.PA1477timestampkit3536 → 14.1.0.pre.alpha.PBNTR417addcolorsupdatedefaultcolor3608

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a9a56199c55751b0622186a61c0072d89817f864fecd9cf1181b13d2555c84bf
-  data.tar.gz: c88fde11c878878b9b14e115b9fcbfcdb63bea5d5f2c296aa422b1aa09164221
+  metadata.gz: 03003e7a5730643b9389fcb6a713c2904707265b33e7dc2ec70ee8f6c4cf92da
+  data.tar.gz: 3f626f86fbacd8850ad2bece6ced718bb80a7eed53bed0633acd7dde78ef0abf
 SHA512:
-  metadata.gz: feb420d2480a3dfe7acc94e307ac4f98c613fa20957af19d990dc40d770c46aadcac3799c9cb30000c05d21bae6c4253f619868150ef0fcab35a4f7c5eb6b348
-  data.tar.gz: 98f2d9232423d8d2ff37a4607123f8caa31e7ae3b5d951707c100e48fc60defad52497a0e063de1ca0689be93f8d0796c40fbc4362d1e15f199ee5d071224ad4
+  metadata.gz: b500436c1333f7f4b944b55d522beb6ceb19b87bfa985281aad0ede5dc0678851663536164c727833e29c6fad129229d1f8af103fffba6e470440b1a42f40122
+  data.tar.gz: 2df17ac6cbd8c42efd4b62fd789b2935d3fb06178e06e0c8ae0e65a10419648bc455ecc2d2bfe7e5b68cf021695b8f5f8ff65fa484d2b4914eb176c3a1bd1931

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

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

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

@@ -4,20 +4,39 @@ import Badge from '../_badge'
 const BadgeNotification = (props) => {
   return (
     <>
-      <Badge
-          rounded
-          text="1"
-          variant="notification"
-          {...props}
-      />
+      <div>
+        <Badge
+            rounded
+            text="1"
+            variant="notification"
+            {...props}
+        />
 
-      &nbsp;
+        &nbsp;
 
-      <Badge
-          text="4"
-          variant="notification"
-          {...props}
-      />
+        <Badge
+            text="4"
+            variant="notification"
+            {...props}
+        />
+      </div>
+
+      <div>
+        <Badge
+            rounded
+            text="1"
+            variant="notificationError"
+            {...props}
+        />
+
+        &nbsp;
+
+        <Badge
+            text="4"
+            variant="notificationError"
+            {...props}
+        />
+      </div>
     </>
   )
 }

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx

@@ -5,21 +5,17 @@ const DialogDefault = () => {
   const [isOpen, setIsOpen] = useState(false)
   const close = () => setIsOpen(false)
   const open = () => setIsOpen(true)
-  const [isLoading, setIsLoading] = useState(false)
 
   return (
     <>
       <Button onClick={open}>{'Open Dialog'}</Button>
       <Dialog
           cancelButton="Cancel Button"
-          className="wrapper"
           confirmButton="Okay"
-          loading={isLoading}
           onCancel={close}
           onClose={close}
-          onConfirm={() => setIsLoading(!isLoading)}
+          onConfirm={close}
           opened={isOpen}
-          portalClassName="portal"
           size="sm"
           text="Hello Body Text, Nice to meet ya."
           title="Header Title is the Title Prop"

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react'
+import { Button, Dialog } from 'playbook-ui'
+
+const DialogLoading = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const close = () => {
+    if (!isLoading) {
+      setIsOpen(false)
+    }
+  }
+  const open = () => setIsOpen(true)
+  const [isLoading, setIsLoading] = useState(false)
+  const submit = async () => {
+    setIsLoading(true)
+
+    try {
+      await new Promise((r) => setTimeout(r, 3000))
+      setIsOpen(false)
+    } catch (error) {
+      console.error("An error occurred.")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <>
+      <Button onClick={open}>{'Open Dialog'}</Button>
+      <Dialog
+          cancelButton="Cancel"
+          className="wrapper"
+          confirmButton="Okay"
+          loading={isLoading}
+          onCancel={close}
+          onClose={close}
+          onConfirm={submit}
+          opened={isOpen}
+          size="sm"
+          text="Make a 3 second request?"
+          title="Loading Example"
+      />
+    </>
+  )
+}
+
+export default DialogLoading

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

@@ -22,6 +22,7 @@ examples:
   - dialog_stacked_alert: Stacked Button Alert
   - dialog_full_height: Full Height
   - dialog_full_height_placement: Full Height Placement
+  - dialog_loading: Loading
 
   swift:
   - dialog_default_swift: Simple

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

@@ -8,3 +8,4 @@ export { default as DialogStatus } from './_dialog_status.jsx'
 export { default as DialogStackedAlert } from './_dialog_stacked_alert.jsx'
 export { default as DialogFullHeight } from './_dialog_full_height.jsx'
 export { default as DialogFullHeightPlacement } from './_dialog_full_height_placement.jsx'
+export { default as DialogLoading } from './_dialog_loading.jsx'

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

@@ -35,6 +35,7 @@
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
   <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
+  <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true, required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.html.erb

@@ -0,0 +1,117 @@
+<%= pb_rails("title", props: { text: "Status Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
+
+<%= pb_rails("form_pill", props: {
+    text: "Neutral",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "primary",
+    text: "Primary",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "success",
+    text: "Success",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "warning",
+    text: "Warning",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "error",
+    text: "Error",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "info",
+    text: "Info",
+    tabindex: 0,
+}) %>
+
+<%= pb_rails("title", props: { text: "Data Colors", tag: "h4", size: 4, margin_bottom: "sm", margin_top: "md" }) %>
+
+<%= pb_rails("form_pill", props: {
+    color: "data_1",
+    text: "Data 1",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "data_2",
+    text: "Data 2",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "data_3",
+    text: "Data 3",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "data_4",
+    text: "Data 4",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "data_5",
+    text: "Data 5",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "data_6",
+    text: "Data 6",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "data_7",
+    text: "Data 7",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "data_8",
+    text: "Data 8",
+    tabindex: 0,
+}) %>
+
+<%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4, margin_bottom: "sm", margin_top: "md" }) %>
+
+<%= pb_rails("form_pill", props: {
+    color: "windows",
+    text: "Windows",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "siding",
+    text: "Siding",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "roofing",
+    text: "Roofing",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "doors",
+    text: "Doors",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "gutters",
+    text: "Gutters",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "solar",
+    text: "Solar",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "insulation",
+    text: "Insulation",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "accessories",
+    text: "Accessories",
+    tabindex: 0,
+}) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.jsx

@@ -0,0 +1,227 @@
+import React from 'react'
+import { FormPill, Title } from 'playbook-ui'
+
+const FormPillColors = (props) => {
+  return (
+    <div>
+      <Title
+          marginBottom="sm"
+          size={4}
+          text="Status Colors"
+          {...props}
+      />
+      <FormPill
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Neutral"
+          {...props}
+      />
+      <FormPill
+          color="primary"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Primary"
+          {...props}
+      />
+      <FormPill
+          color="success"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Success"
+          {...props}
+      />
+      <FormPill
+          color="warning"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Warning"
+          {...props}
+      />
+      <FormPill
+          color="error"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Error"
+          {...props}
+      />
+      <FormPill
+          color="info"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Info"
+          {...props}
+      />
+      <Title
+          marginBottom="sm"
+          marginTop="md"
+          size={4}
+          text="Data Colors"
+          {...props}
+      />
+      <FormPill
+          color="data_1"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 1"
+          {...props}
+      />
+      <FormPill
+          color="data_2"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 2"
+          {...props}
+      />
+      <FormPill
+          color="data_3"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 3"
+          {...props}
+      />
+      <FormPill
+          color="data_4"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 4"
+          {...props}
+      />
+      <FormPill
+          color="data_5"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 5"
+          {...props}
+      />
+      <FormPill
+          color="data_6"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 6"
+          {...props}
+      />
+      <FormPill
+          color="data_7"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 7"
+          {...props}
+      />
+      <FormPill
+          color="data_8"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 8"
+          {...props}
+      />
+      <Title
+          marginBottom="sm"
+          marginTop="md"
+          size={4}
+          text="Product Colors"
+          {...props}
+      />
+      <FormPill
+          color="windows"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Windows"
+          {...props}
+      />
+      <FormPill
+          color="siding"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Siding"
+          {...props}
+      />
+      <FormPill
+          color="roofing"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Roofing"
+          {...props}
+      />
+      <FormPill
+          color="doors"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Doors"
+          {...props}
+      />
+      <FormPill
+          color="gutters"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Gutters"
+          {...props}
+      />
+      <FormPill
+          color="solar"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Solar"
+          {...props}
+      />
+      <FormPill
+          color="insulation"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Insulation"
+          {...props}
+      />
+      <FormPill
+          color="accessories"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Accessories"
+          {...props}
+      />
+    </div>
+  )
+}
+export default FormPillColors

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.md

@@ -0,0 +1 @@
+The Status, Data, and Product colors highlighted above can be passed to the `color` prop. Neutral is the default color. Form pills with a text tag, an avatar, or an icon with text tag can all receive the `color` prop. 

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

@@ -5,11 +5,13 @@ examples:
   - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
-  # - form_pill_icon: Form Pill Icon
+  - form_pill_icon: Form Pill Icon
+  - form_pill_colors: Form Pill Colors
 
   react:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
-  # - form_pill_icon: Form Pill Icon
+  - form_pill_icon: Form Pill Icon
+  - form_pill_colors: Form Pill Colors

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

@@ -3,3 +3,4 @@ export { default as FormPillSize } from './_form_pill_size.jsx'
 export { default as FormPillTag } from './_form_pill_tag.jsx'
 export { default as FormPillExample } from './_form_pill_example.jsx'
 export { default as FormPillIcon } from './_form_pill_icon.jsx'
+export { default as FormPillColors } from './_form_pill_colors.jsx'

data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { GanttChart } from "playbook-ui";
+
+const mockOptions = {
+  title: {
+    text: "Simple Gantt Chart",
+  },
+
+  xAxis: [
+    {
+      min: Date.UTC(2014, 10, 17),
+      max: Date.UTC(2014, 10, 30),
+    },
+  ],
+
+  series: [
+    {
+      name: "Project 1",
+      data: [
+        {
+          name: "Start prototype",
+          start: Date.UTC(2014, 10, 18),
+          end: Date.UTC(2014, 10, 25),
+        },
+        {
+          name: "Develop",
+          start: Date.UTC(2014, 10, 20),
+          end: Date.UTC(2014, 10, 25),
+        },
+        {
+          name: "Run acceptance tests",
+          start: Date.UTC(2014, 10, 23),
+          end: Date.UTC(2014, 10, 26),
+        },
+        {
+          name: "Test prototype",
+          start: Date.UTC(2014, 10, 27),
+          end: Date.UTC(2014, 10, 29),
+        },
+      ],
+    },
+  ],
+};
+
+const GanttChartDefault = (props) => (
+  <div>
+    <GanttChart customOptions={mockOptions} 
+        {...props} 
+    />
+  </div>
+);
+
+export default GanttChartDefault;

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

@@ -0,0 +1,7 @@
+examples:
+  
+  
+  react:
+  - gantt_chart_default: Default
+  
+  

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

@@ -0,0 +1 @@
+export { default as GanttChartDefault } from './_gantt_chart_default.jsx'

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.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: {
+    id: "multi-level-select-default-rails",
+    name: "my_array",
+    tree_data: treeData,
+    color: "primary"
+}) %>