playbook_ui_docs 14.5.0.pre.alpha.play1586datearea4115 → 14.5.0.pre.alpha.psych4support3941

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.5.0.pre.alpha.play1586datearea4115
+  version: 14.5.0.pre.alpha.psych4support3941
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-10-17 00:00:00.000000000 Z
+date: 2024-10-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -663,8 +663,6 @@ files:
 - app/pb_kits/playbook/pb_drawer/docs/index.js
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md
@@ -838,9 +836,6 @@ files:
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx
-- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb
-- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx
-- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx
 - app/pb_kits/playbook/pb_form_pill/docs/example.yml
@@ -1141,8 +1136,6 @@ files:
 - 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
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.md
@@ -1156,10 +1149,6 @@ files:
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.md
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx
-- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/example.yml
 - app/pb_kits/playbook/pb_multi_level_select/docs/index.js
@@ -1783,9 +1772,6 @@ files:
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_default.jsx
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.html.erb
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.jsx
-- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb
-- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx
-- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.html.erb
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx

@@ -1,45 +0,0 @@
-import React, { useRef } from 'react'
-import { Button, Dropdown } from 'playbook-ui'
-
-const options = [
-    {
-        label: "United States",
-        value: "United States",
-    },
-    {
-        label: "Canada",
-        value: "Canada",
-    },
-    {
-        label: "Pakistan",
-        value: "Pakistan",
-    }
-]
-
-const DropdownClearSelection = (props) => {
-    const dropdownRef = useRef(null)
-
-    const handleReset = () => {
-        if (dropdownRef.current) {
-            dropdownRef.current.clearSelected()
-        }
-    }
-
-    return (
-        <>
-            <Dropdown
-                defaultValue={options[2]}
-                options={options}
-                ref={dropdownRef}
-                {...props}
-            />
-            <Button
-                marginTop="md"
-                onClick={handleReset}
-                text="Reset"
-            />
-        </>
-    )
-}
-
-export default DropdownClearSelection

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md

@@ -1 +0,0 @@
-To use an external control (like a reset button) to clear Dropdown selection, you can make use of the `useRef` hook. You must pass a ref to the Dropdown component and use that ref within the onClick for the external control in the way shown in the code snippet below.

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

@@ -1,19 +0,0 @@
-<%
-  names = [
-    { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
-    { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
-    { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
-    { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
-    { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
-  ]
-%>
-
-<%= pb_rails("typeahead", props: {
-    html_options: { style: { maxWidth: "240px" }},
-    id: "typeahead-form-pill",
-    is_multi: true,
-    options: names,
-    label: "Names",
-    pills: true,
-    truncate: 1,
-}) %>

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

@@ -1,27 +0,0 @@
-import React from 'react'
-import Typeahead from '../../pb_typeahead/_typeahead'
-
-const names = [
-  { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
-  { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
-  { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
-  { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
-  { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
-]
-
-const FormPillTruncatedText = (props) => {
-  return (
-    <>
-      <Typeahead
-          htmlOptions={{ style: { maxWidth: "240px" }}}
-          isMulti
-          label="Names"
-          options={names}
-          truncate={1}
-          {...props}
-      />
-    </>
-  )
-}
-
-export default FormPillTruncatedText

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

@@ -1 +0,0 @@
-For pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.

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

@@ -1,93 +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-reset-example",
-    name: "my_array",
-    tree_data: treeData,
-    return_all_selected: true
-}) %>
-
-<%= pb_rails("button", props: { text: "Reset", margin_top: "lg", id:"multilevelselect-reset-button" }) %>
-
-
-<script>
-  window.addEventListener('DOMContentLoaded', () => {
-    const exampleResetButton = document.querySelector("#multilevelselect-reset-button");
-
-    exampleResetButton.addEventListener("click", () => {
-        clearMultiLevelSelectById('multi-level-select-reset-example');
-      });
-    function clearMultiLevelSelectById(id) {
-      const clearFunction = window[`clearMultiLevelSelect_${id}`];
-      if (clearFunction) {
-        clearFunction();
-      } else {
-        console.warn(`No clear function found for MultiLevelSelect with id: ${id}`);
-      }
-    }
-  })
-</script>

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

@@ -1 +0,0 @@
-In order to clear the multilevelselect selection using an external trigger (like a reset button), the `clearMultiLevelSelect` function can be used. See the code snippet below to see this in action. The function is scoped by id so an id MUST be used on the multilevelselect kit and passed to the function as shown for it to work. 

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

@@ -1,105 +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 MultiLevelSelectWithChildren = (props) => {
-  return (
-    <div>
-      <MultiLevelSelect
-          id="multiselect-with-children"
-          onSelect={(selectedNodes) =>
-            console.log("Selected Items", selectedNodes)
-          }
-          treeData={treeData}
-          {...props}
-      >
-        <MultiLevelSelect.Options>
-        {(item) => (
-          <Badge 
-              marginLeft="sm"
-              text={item.status} 
-              variant={item.status === "active" ? "success" : "warning"} 
-          />
-        )}
-        </MultiLevelSelect.Options>
-      </MultiLevelSelect>
-    </div>
-  );
-};
-
-export default MultiLevelSelectWithChildren;

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

@@ -1 +0,0 @@
-The MultiLevelSelect also provides a subcomponent structure which can be used to render children to the right of the Checkboxes and their labels. As seen in the code snippet below, these children have access to the current item being iterated over which can be used for conditional rendering.

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_timeline/docs/_timeline_with_children.html.erb

@@ -1,43 +0,0 @@
-<%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
-    <%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
-
-      <% item.date_area do %>
-        <%= pb_rails("timeline/date_area") do %>
-          <%= pb_rails("title", props: { text: "Any Kit Here", size: 2 }) %>
-        <% end %>
-      <% end %>
-    
-      <% item.node_area do %>
-        <%= pb_rails("timeline/node_area", props: { icon: 'check', icon_color: 'teal' }) %>
-      <% end %>
-    
-      <% item.detail_area do %>
-        <%= pb_rails("title_detail", props: {
-          title: "Jackson Heights",
-          detail: "37-27 74th Street"
-        }) %>
-      <% end %>
-    <% end %>
-    <%= pb_rails("timeline/item", props: { line_style: "dotted"}) do |item| %>
-
-      <% item.node_area do %>
-        <%= pb_rails("timeline/node_area") do %>
-          <%= pb_rails("pill", props: { text: "Any Kit" , variant: "success" }) %>
-        <% end %>
-      <% end %>
-    
-      <% item.detail_area do %>
-        <%= pb_rails("title_detail", props: {
-          title: "Greenpoint",
-          detail: "81 Gate St Brooklyn"
-        }) %>
-      <% end %>
-    <% end %>
-
-    <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1 }) do |item| %>
-      <%= pb_rails("title_detail", props: {
-          title: "Society Hill",
-          detail: "72 E St Astoria"
-      }) %>
-    <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx

@@ -1,72 +0,0 @@
-import React from 'react'
-
-import Timeline from '../_timeline'
-import TimelineItem from '../_item'
-import TimelineDateArea from '../_date_area'
-import TimelineNodeArea from '../_node_area'
-import TimelineDetailArea from '../_detail_area'
-import Title from '../../pb_title/_title'
-import Pill from '../../pb_pill/_pill'
-
-import TitleDetail from '../../pb_title_detail/_title_detail'
-
-const TimelineWithChildren = (props) => (
-  <div>
-    <Timeline orientation="horizontal"
-        showDate
-        {...props}
-    >
-      <TimelineItem lineStyle="solid"
-          {...props}
-      >
-        <TimelineDateArea>
-          <Title size={2}
-              text='Any Kit Here'
-          />
-        </TimelineDateArea>
-        <TimelineNodeArea icon="user"
-            iconColor="royal"
-        />
-        <TimelineDetailArea>
-          <TitleDetail detail="37-27 74th Street"
-              title="Jackson Heights"
-              {...props}
-          />
-        </TimelineDetailArea>
-      </TimelineItem>
-
-      <TimelineItem lineStyle="dotted"
-          {...props}
-      >
-        <TimelineNodeArea>
-          <Pill text="Any Kit"
-              variant="success"
-          />
-        </TimelineNodeArea>
-        <TimelineDetailArea>
-          <TitleDetail detail="81 Gate St Brooklyn"
-              title="Greenpoint"
-              {...props}
-          />
-        </TimelineDetailArea>
-      </TimelineItem>
-
-      <TimelineItem lineStyle="solid"
-          {...props}
-      >
-        <TimelineDateArea date={new Date(new Date().setDate(new Date().getDate() + 1))} />
-        <TimelineNodeArea icon="map-marker-alt"
-            iconColor="purple"
-        />
-        <TimelineDetailArea>
-          <TitleDetail detail="72 E St Astoria"
-              title="Society Hill"
-              {...props}
-          />
-        </TimelineDetailArea>
-      </TimelineItem>
-    </Timeline>
-  </div>
-)
-
-export default TimelineWithChildren

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md

@@ -1,4 +0,0 @@
-You can use whatever kit you want for the date area of the timeline item, the node area, and the content area at the bottom or left.
-
-Checkout the code in this example to see the children kits in action.
-