playbook_ui_docs 14.24.0.pre.alpha.testingwithoutlazyload9529 → 14.24.0.pre.rc.0

data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.md

@@ -1 +0,0 @@
-By default, the Date kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true as shown here. 

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

@@ -1,90 +0,0 @@
-import React from 'react'
-import Dropdown from '../_dropdown'
-
-const DropdownCustomActiveStyleOptions = (props) => {
-
-
-  const options = [
-    {
-      label: "United States",
-      value: "unitedStates",
-      id: "us"
-    },
-    {
-      label: "Canada",
-      value: "canada",
-      id: "ca"
-    },
-    {
-      label: "Pakistan",
-      value: "pakistan",
-      id: "pk"
-    }
-  ];  
-
-
-  return (
-  <div>
-    <Dropdown
-        activeStyle={{
-          backgroundColor: "bg_light",
-          fontColor: "primary",
-        }}
-        label="Background Color: bg_light; Font Color: primary"
-        marginBottom="sm"
-        options={options}
-        {...props}
-    >
-      <Dropdown.Trigger/>
-      <Dropdown.Container>
-        {options.map((option) => (
-          <Dropdown.Option key={option.id} 
-              option={option}
-          />
-        ))}
-      </Dropdown.Container>
-    </Dropdown>
-    <Dropdown
-        activeStyle={{
-          backgroundColor: "white",
-          fontColor: "primary",
-        }}
-        label="Background Color: white; Font Color: primary"
-        marginBottom="sm"
-        options={options}
-        {...props}
-    />
-    <Dropdown
-        activeStyle={{
-          backgroundColor: "bg_light",
-          fontColor: "text_lt_default",
-        }}
-        autocomplete
-        label="Background Color: bg_light; Font Color: text_lt_default"
-        marginBottom="sm"
-        options={options}
-        {...props}
-    />
-    <Dropdown
-        activeStyle={{
-          fontColor: "text_lt_lighter",
-        }}
-        label="Font Color: text_lt_lighter"
-        marginBottom="sm"
-        options={options}
-        {...props}
-    >
-      <Dropdown.Trigger/>
-      <Dropdown.Container>
-        {options.map((option) => (
-          <Dropdown.Option key={option.id} 
-              option={option}
-          />
-        ))}
-      </Dropdown.Container>
-    </Dropdown>
-  </div>
-  )
-}
-
-export default  DropdownCustomActiveStyleOptions

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

@@ -1,4 +0,0 @@
-The `activeStyle` prop can be used to customize the appearance of the dropdown selection indicator. It accepts an object with the following keys: `backgroundColor` sets the background color of the selected item (and its hover state); `fontColor` sets the font color of the selected item.
-
-`backgroundColor` **Type**: String | **Values**: bg_light | white | **Default**: (no selection) is primary
-`fontColor` **Type**: String | **Values**: primary | all [Playbook Text Colors](https://playbook.powerapp.cloud/visual_guidelines/colors) | **Default**: (no selection) is white

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.html.erb

@@ -1,22 +0,0 @@
-<%= pb_rails("fixed_confirmation_toast", props: {
-  text: "Error Message",
-  status: "error",
-  icon: "none",
-  closeable: true
-})%>
-
-<br><br>
-
-<%= pb_rails("fixed_confirmation_toast", props: {
-  text: "Items Successfully Moved",
-  status: "success",
-  icon: "none"
-})%>
-
-<br><br>
-
-<%= pb_rails("fixed_confirmation_toast", props: {
-  text: "Scan to Assign Selected Items",
-  status: "neutral",
-  icon: "none"
-})%>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.jsx

@@ -1,43 +0,0 @@
-import React from 'react'
-
-import FixedConfirmationToast from '../_fixed_confirmation_toast'
-
-const FixedConfirmationToastNoIcon = (props) => {
-  return (
-    <div>
-      <div>
-        <FixedConfirmationToast
-            closeable
-            icon="none"
-            status="error"
-            text="Error Message"
-            {...props}
-        />
-      </div>
-
-      <br />
-
-      <div>
-        <FixedConfirmationToast
-            icon="none"
-            status="success"
-            text="Items Successfully Moved"
-            {...props}
-        />
-      </div>
-
-      <br />
-
-      <div>
-        <FixedConfirmationToast
-            icon="none"
-            status="neutral"
-            text="Scan to Assign Selected Items"
-            {...props}
-        />
-      </div>
-    </div>
-  )
-}
-
-export default FixedConfirmationToastNoIcon

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.md

@@ -1 +0,0 @@
-Setting `icon` prop to "none" will render the fixed confirmation toast without the left side icon. 

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

@@ -1,75 +0,0 @@
-<% treeData = [{
-  label: "Power Home Remodeling",
-  value: "powerHomeRemodeling",
-  id: "100",
-  expanded: true,
-  children: [
-    {
-      label: "People",
-      value: "people",
-      id: "101",
-      children: [
-        {
-          label: "Talent Acquisition",
-          value: "talentAcquisition",
-          id: "102",
-        },
-        {
-          label: "Business Affairs",
-          value: "businessAffairs",
-          id: "103",
-          children: [
-            {
-              label: "Initiatives",
-              value: "initiatives",
-              id: "104",
-            },
-            {
-              label: "Learning & Development",
-              value: "learningAndDevelopment",
-              id: "105",
-            },
-          ],
-        },
-        {
-          label: "People Experience",
-          value: "peopleExperience",
-          id: "106",
-        },
-      ],
-    },
-    {
-      label: "Contact Center",
-      value: "contactCenter",
-      id: "107",
-      children: [
-        {
-          label: "Appointment Management",
-          value: "appointmentManagement",
-          id: "108",
-        },
-        {
-          label: "Customer Service",
-          value: "customerService",
-          id: "109",
-        },
-        {
-          label: "Energy",
-          value: "energy",
-          id: "110",
-        },
-      ],
-    },
-  ],
-}] %>
-
-<% # Pre-selected node IDs to demonstrate the functionality %>
-<% preSelectedIds = ["102", "104", "109"] %>
-
-<%= pb_rails("multi_level_select", props: {
-  id: "multi-level-select-show-checked-children-rails",
-  name: "my_array",
-  tree_data: treeData,
-  selected_ids: preSelectedIds,
-  show_checked_children: false
-}) %>

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

@@ -1,94 +0,0 @@
-import React from "react";
-import MultiLevelSelect from "../_multi_level_select";
-
-const treeData = [
-  {
-    label: "Power Home Remodeling",
-    value: "powerHomeRemodeling",
-    id: "powerhome1",
-    expanded: true,
-    children: [
-      {
-        label: "People",
-        value: "people",
-        id: "people1",
-        children: [
-          {
-            label: "Talent Acquisition",
-            value: "talentAcquisition",
-            id: "talent1",
-          },
-          {
-            label: "Business Affairs",
-            value: "businessAffairs",
-            id: "business1",
-            children: [
-              {
-                label: "Initiatives",
-                value: "initiatives",
-                id: "initiative1",
-              },
-              {
-                label: "Learning & Development",
-                value: "learningAndDevelopment",
-                id: "development1",
-              },
-            ],
-          },
-          {
-            label: "People Experience",
-            value: "peopleExperience",
-            id: "experience1",
-          },
-        ],
-      },
-      {
-        label: "Contact Center",
-        value: "contactCenter",
-        id: "contact1",
-        children: [
-          {
-            label: "Appointment Management",
-            value: "appointmentManagement",
-            id: "appointment1",
-          },
-          {
-            label: "Customer Service",
-            value: "customerService",
-            id: "customer1",
-          },
-          {
-            label: "Energy",
-            value: "energy",
-            id: "energy1",
-          },
-        ],
-      },
-    ],
-  },
-];
-
-// Pre-selected node IDs to demonstrate the functionality
-const preSelectedIds = ["talent1", "initiative1", "customer1"];
-
-const MultiLevelSelectShowCheckedChildren = (props) => {
-  return (
-    <div>
-      <MultiLevelSelect
-          id='multiselect-checked-children'
-          onSelect={(selectedNodes) =>
-            console.log(
-              "Selected Items",
-              selectedNodes
-            )
-          }
-          selectedIds={preSelectedIds}
-          showCheckedChildren={false}
-          treeData={treeData}
-          {...props}
-      />
-    </div>
-  )
-};
-
-export default MultiLevelSelectShowCheckedChildren;

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

@@ -1,3 +0,0 @@
-If you wish to control the auto-expansion of nodes with selected descendants in your multi-level select, you can utilize `showCheckedChildren/show_checked_children`. This prop (set to 'true' by default) controls whether items will be expanded on first render. When set to true, a node with selected descendants will automatically render as expanded so the selected nodes are visible. If you do NOT wish for this to be the case, you can set this prop to false.
-
-The prop will still honor any `expanded` attribute set up within your tree data.

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control.jsx

@@ -1,112 +0,0 @@
-import React, { useState } from "react";
-import Flex from '../../pb_flex/_flex'
-import Pagination from '../../pb_pagination/_pagination'
-import Select from '../../pb_select/_select'
-import Table from '../../pb_table/_table'
-
-import { data } from "./data";
-
-const PaginationExternalControl = (props) => {
-  const [totalItems, setTotalItems] = useState(20);
-  const [itemsPerPage, setItemsPerPage] = useState(5);
-  const [currentPage, setCurrentPage] = useState(1);
-
-  const totalPages = Math.ceil(totalItems / itemsPerPage);
-
-  const handlePageChange = (page) => {
-    setCurrentPage(page);
-  };
-
-  const limitedData = data.slice(0, totalItems);
-  const startIndex = (currentPage - 1) * itemsPerPage;
-  const paginatedItems = limitedData.slice(startIndex, startIndex + itemsPerPage);
-
-  const handleTotalItemsChange = (event) => {
-    const value = Number(event.target.value);
-    setTotalItems(value);
-    setCurrentPage(1);
-  };
-
-  const handleItemsPerPageChange = (event) => {
-    const value = Number(event.target.value);
-    setItemsPerPage(value);
-    setCurrentPage(1);
-  };
-
-  return (
-    <>
-        <Flex gap="sm">
-            <Select
-                label="Total Items"
-                onChange={handleTotalItemsChange}
-                options={[
-                    { value: "5", text: "5" },
-                    { value: "10", text: "10" },
-                    { value: "20", text: "20" }
-                ]}
-                size="sm"
-                value={String(totalItems)}
-                {...props}
-            />
-
-            <Select
-                label="Items per Page"
-                onChange={handleItemsPerPageChange}
-                options={[
-                    { value: "3", text: "3" },
-                    { value: "5", text: "5" },
-                    { value: "10", text: "10" }
-                ]}
-                size="sm"
-                value={String(itemsPerPage)}
-                {...props}
-            />
-        </Flex>
-
-        <Pagination
-            current={currentPage}
-            key={`pagination-top-${currentPage}`}
-            marginBottom="xs"
-            onChange={handlePageChange}
-            range={5}
-            total={totalPages}
-            {...props}
-        />
-        <Table 
-            marginBottom="xs"
-            responsive="none" 
-            size="sm" 
-            {...props}
-        >
-            <Table.Head>
-            <Table.Row>
-                <Table.Header>{"Column 1"}</Table.Header>
-                <Table.Header>{"Column 2"}</Table.Header>
-                <Table.Header>{"Column 3"}</Table.Header>
-                <Table.Header>{"Column 4"}</Table.Header>
-                <Table.Header>{"Column 5"}</Table.Header>
-            </Table.Row>
-            </Table.Head>
-            <Table.Body>
-            {paginatedItems.map((row, index) => (
-                <Table.Row key={index}>
-                {row.map((cell, cellIndex) => (
-                    <Table.Cell key={cellIndex}>{cell}</Table.Cell>
-                ))}
-                </Table.Row>
-            ))}
-            </Table.Body>
-        </Table>
-        <Pagination
-            current={currentPage}
-            key={`pagination-bottom-${currentPage}`}
-            onChange={handlePageChange}
-            range={5}
-            total={totalPages}
-            {...props}
-        />
-    </>
-  )
-}
-
-export default PaginationExternalControl 

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control_react.md

@@ -1,3 +0,0 @@
-The Pagination component supports external control of the current page. This allows for programmatically reseting or changing the current page when filters or other criteria change, without needing to unmount and remount the component.
-
-In this example, changing the "Total Items" or "Items per Page" dropdowns will automatically reset the pagination to page 1, demonstrating how external control works. The pagination component will update its internal state to reflect the new `current` prop value.