playbook_ui_docs 14.1.0.pre.alpha.PBNTR417addcolorsupdatedefaultcolor3608 → 14.1.0.pre.alpha.PBNTR449rtepreviewerrails3605

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.1.0.pre.alpha.PBNTR417addcolorsupdatedefaultcolor3608
+  version: 14.1.0.pre.alpha.PBNTR449rtepreviewerrails3605
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-08-28 00:00:00.000000000 Z
+date: 2024-08-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -810,9 +810,6 @@ files:
 - app/pb_kits/playbook/pb_form_group/docs/_form_group_typeahead.jsx
 - app/pb_kits/playbook/pb_form_group/docs/example.yml
 - app/pb_kits/playbook/pb_form_group/docs/index.js
-- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.html.erb
-- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.jsx
-- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.md
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.html.erb
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.jsx
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.md
@@ -1115,10 +1112,6 @@ files:
 - app/pb_kits/playbook/pb_message/docs/_message_timestamp.jsx
 - app/pb_kits/playbook/pb_message/docs/example.yml
 - app/pb_kits/playbook/pb_message/docs/index.js
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_rails.md
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_react.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md
@@ -1895,10 +1888,6 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.md
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.html.erb
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.jsx
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color_rails.md
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color_react.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.md
 - app/pb_kits/playbook/pb_typeahead/docs/example.yml

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

@@ -1,117 +0,0 @@
-<%= 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

@@ -1,227 +0,0 @@
-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

@@ -1 +0,0 @@
-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_multi_level_select/docs/_multi_level_select_color.html.erb

@@ -1,72 +0,0 @@
-<% 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"
-}) %>

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

@@ -1,91 +0,0 @@
-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 MultiLevelSelectColor = (props) => {
-  return (
-    <div>
-      <MultiLevelSelect
-          color="primary"
-          id='multiselect-color'
-          onSelect={(selectedNodes) =>
-            console.log(
-              "Selected Items",
-              selectedNodes
-            )
-          }
-          treeData={treeData}
-          {...props}
-      />
-    </div>
-  )
-};
-
-export default MultiLevelSelectColor;

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

@@ -1 +0,0 @@
-Change the form pill color by passing the optional `color` prop. Product, Data, and Status colors are available options. Check them out <a href="playbook.powerapp.cloud/kits/form_pill#form-pill-colors" target="_blank">here</a> in the Form Pill colors example.

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

@@ -1 +0,0 @@
-Change the form pill color by passing the optional `color` prop. Product, Data, and Status colors are available options. Check them out <a href="playbook.powerapp.cloud/kits/form_pill/react#form-pill-colors" target="_blank">here</a> in the Form Pill colors example.

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

@@ -1,31 +0,0 @@
-<%
-  options = [
-    { label: 'Windows', value: '#FFA500' },
-    { label: 'Siding', value: '#FF0000' },
-    { label: 'Doors', value: '#00FF00' },
-    { label: 'Roofs', value: '#0000FF' },
-  ]
-%>
-
-<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", color: "primary", default_options: [options.first], options: options, label: "Colors", name: :foo, pills: true }) %>
-
-<%= pb_rails("button", props: {id: "clear-pills", text: "Clear All Options", variant: "secondary"}) %>
-
-<!-- This section is an example of the available JavaScript event hooks -->
-<%= javascript_tag defer: "defer" do %>
-  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-select", function(event) {
-    console.log('Option selected')
-    console.dir(event.detail)
-  })
-  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-remove", function(event) {
-    console.log('Option removed')
-    console.dir(event.detail)
-  })
-  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-clear", function() {
-    console.log('All options cleared')
-  })
-
-  document.querySelector('#clear-pills').addEventListener('click', function() {
-    document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:clear'))
-  })
-<% end %>

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

@@ -1,26 +0,0 @@
-import React from 'react'
-import { Typeahead } from 'playbook-ui'
-
-const options = [
-  { label: 'Windows', value: '#FFA500' },
-  { label: 'Siding', value: '#FF0000' },
-  { label: 'Doors', value: '#00FF00' },
-  { label: 'Roofs', value: '#0000FF' },
-]
-
-const TypeaheadWithPills = (props) => {
-  return (
-    <>
-      <Typeahead
-          color="primary"
-          isMulti
-          label="Colors"
-          options={options}
-          placeholder=""
-          {...props}
-      />
-    </>
-  )
-}
-
-export default TypeaheadWithPills

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

@@ -1 +0,0 @@
-Change the form pill color by passing the optional `color` prop. Product, Data, and Status colors are available options. Check them out <a href="playbook.powerapp.cloud/kits/form_pill#form-pill-colors" target="_blank">here</a> in the Form Pill colors example.

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

@@ -1 +0,0 @@
-Change the form pill color by passing the optional `color` prop. Product, Data, and Status colors are available options. Check them out <a href="playbook.powerapp.cloud/kits/form_pill/react#form-pill-colors" target="_blank">here</a> in the Form Pill colors example.