playbook_ui_docs 14.5.0.pre.alpha.20241007playbookwebsiteaddrdbms4036 → 14.5.0.pre.rc.0

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

@@ -1,106 +0,0 @@
-import React from "react";
-import MultiLevelSelect from "../_multi_level_select";
-import Badge from "../../pb_badge/_badge";
-
-const treeData = [
-  {
-    label: "Power Home Remodeling",
-    value: "Power Home Remodeling",
-    id: "powerhome1",
-    expanded: true,
-    children: [
-      {
-        label: "People",
-        value: "People",
-        id: "people1",
-        expanded: true,
-        status: "active",
-        children: [
-          {
-            label: "Talent Acquisition",
-            value: "Talent Acquisition",
-            id: "talent1",
-          },
-          {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "business1",
-            status: "active",
-            variant: "primary",
-
-            children: [
-              {
-                label: "Initiatives",
-                value: "Initiatives",
-                id: "initiative1",
-              },
-              {
-                label: "Learning & Development",
-                value: "Learning & Development",
-                id: "development1",
-                status: "Inactive",
-              },
-            ],
-          },
-          {
-            label: "People Experience",
-            value: "People Experience",
-            id: "experience1",
-          },
-        ],
-      },
-      {
-        label: "Contact Center",
-        value: "Contact Center",
-        id: "contact1",
-        status: "Inactive",
-        variant: "error",
-        children: [
-          {
-            label: "Appointment Management",
-            value: "Appointment Management",
-            id: "appointment1",
-          },
-          {
-            label: "Customer Service",
-            value: "Customer Service",
-            id: "customer1",
-          },
-          {
-            label: "Energy",
-            value: "Energy",
-            id: "energy1",
-          },
-        ],
-      },
-    ],
-  },
-];
-
-const MultiLevelSelectWithChildrenWithRadios = (props) => {
-  return (
-    <div>
-      <MultiLevelSelect
-          id="multiselect-with-children"
-          onSelect={(selectedNodes) =>
-            console.log("Selected Items", selectedNodes)
-          }
-          treeData={treeData}
-          variant="single"
-          {...props}
-      >
-        <MultiLevelSelect.Options>
-          {(item) => (
-            <Badge 
-                marginLeft="sm"
-                text={item.status} 
-                variant={item.status === "active" ? "success" : "warning"} 
-            />
-          )}
-        </MultiLevelSelect.Options>
-      </MultiLevelSelect>
-    </div>
-  );
-};
-
-export default MultiLevelSelectWithChildrenWithRadios;

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

@@ -1 +0,0 @@
-The MultiLevelSelect subcomponent structure is also available in the 'Single Select' variant. In this variant, the children will be rendered to the right of the Radios and their labels. 

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx

@@ -1,62 +0,0 @@
-import React from 'react'
-import Radio from '../_radio'
-import Select from '../../pb_select/_select'
-import Typeahead from '../../pb_typeahead/_typeahead'
-import Title from '../../pb_title/_title'
-
-const RadioChildren = (props) => {
-
-
-  const options = [
-    { label: 'Orange', value: 'Orange' },
-    { label: 'Red', value: 'Red' },
-    { label: 'Green', value: 'Green' },
-    { label: 'Blue', value: 'Blue' },
-  ]
-
-  return (
-    <div>
-      <Radio
-          customChildren
-          label="Select"
-          marginBottom="sm"
-          name="Group1"
-          tabIndex={0}
-          value="Select"
-          {...props}
-      >
-        <Select
-            marginBottom="none"
-            minWidth="xs"
-            options={options}
-        />
-      </Radio>
-      <Radio
-          customChildren
-          label="Typeahead"
-          marginBottom="sm"
-          name="Group1"
-          tabIndex={0}
-          value="Typeahead"
-          {...props}
-      >
-        <Typeahead 
-            marginBottom="none"
-            minWidth="xs"
-            options={options}
-        />
-      </Radio>
-      <Radio
-          customChildren
-          defaultChecked={false}
-          label="Typography"
-          name="Group1"
-          value="Typography"
-          {...props}
-      >
-        <Title text="Custom Typography" />
-      </Radio>
-    </div>
-  )
-}
-export default RadioChildren

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

@@ -1,88 +0,0 @@
-<%
-  options = [
-    { label: 'Orange', value: '#FFA500' },
-    { label: 'Red', value: '#FF0000' },
-    { label: 'Green', value: '#00FF00' },
-    { label: 'Blue', value: '#0000FF' },
-  ]
-%>
-
-<%= pb_rails("typeahead", props: {
-    id: "typeahead-default",
-    placeholder: "All Colors",
-    options: options,
-    label: "None",
-    name: :foo,
-    is_multi: false,
-    margin_bottom: "none",
-  })
-%>
-<%= pb_rails("typeahead", props: {
-    id: "typeahead-default",
-    placeholder: "All Colors",
-    options: options,
-    label: "XXS",
-    name: :foo,
-    is_multi: false,
-    margin_bottom: "xxs",
-  })
-%>
-<%= pb_rails("typeahead", props: {
-    id: "typeahead-default",
-    placeholder: "All Colors",
-    options: options,
-    label: "XS",
-    name: :foo,
-    is_multi: false,
-    margin_bottom: "xs",
-  })
-%>
-<%= pb_rails("typeahead", props: {
-    id: "typeahead-default",
-    placeholder: "All Colors",
-    options: options,
-    label: "Default - SM",
-    name: :foo,
-    is_multi: false,
-  })
-%>
-<%= pb_rails("typeahead", props: {
-    id: "typeahead-default",
-    placeholder: "All Colors",
-    options: options,
-    label: "MD",
-    name: :foo,
-    is_multi: false,
-    margin_bottom: "md",
-  })
-%>
-<%= pb_rails("typeahead", props: {
-    id: "typeahead-default",
-    placeholder: "All Colors",
-    options: options,
-    label: "LG",
-    name: :foo,
-    is_multi: false,
-    margin_bottom: "lg",
-  })
-%>
-<%= pb_rails("typeahead", props: {
-    id: "typeahead-default",
-    placeholder: "All Colors",
-    options: options,
-    label: "XL",
-    name: :foo,
-    is_multi: false,
-    margin_bottom: "xl",
-  })
-%>
-
-<%= javascript_tag defer: "defer" do %>
-  document.addEventListener("pb-typeahead-kit-typeahead-default-result-option-select", function(event) {
-    console.log('Single Option selected')
-    console.dir(event.detail)
-  })
-  document.addEventListener("pb-typeahead-kit-typeahead-default-result-clear", function() {
-    console.log('All options cleared')
-  })
-<% end %>

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

@@ -1,60 +0,0 @@
-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 TypeaheadMarginBottom = (props) => {
-  return (
-    <>
-      <Typeahead
-          label="None"
-          marginBottom="none"
-          options={options}
-          {...props}
-      />
-      <Typeahead
-          label="XXS"
-          marginBottom="xxs"
-          options={options}
-          {...props}
-      />   
-      <Typeahead
-          label="XS"
-          marginBottom="xs"
-          options={options}
-          {...props}
-      />   
-      <Typeahead
-          label="Default - SM"
-          options={options}
-          {...props}
-      />   
-      <Typeahead
-          label="MD"
-          marginBottom="md"
-          options={options}
-          {...props}
-      />
-      <Typeahead
-          label="LG"
-          marginBottom="lg"
-          options={options}
-          {...props}
-      />
-      <Typeahead
-          label="XL"
-          marginBottom="xl"
-          options={options}
-          {...props}
-      />
-    </>
-  )
-}
-
-export default TypeaheadMarginBottom