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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.5.0.pre.alpha.20241007playbookwebsiteaddrdbms4036
+  version: 14.5.0.pre.rc.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-10-14 00:00:00.000000000 Z
+date: 2024-09-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -653,14 +653,6 @@ files:
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md
 - app/pb_kits/playbook/pb_draggable/docs/example.yml
 - app/pb_kits/playbook/pb_draggable/docs/index.js
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx
-- app/pb_kits/playbook/pb_drawer/docs/example.yml
-- 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_default.html.erb
@@ -836,9 +828,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
@@ -1152,10 +1141,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
@@ -1419,7 +1404,6 @@ files:
 - app/pb_kits/playbook/pb_radio/docs/_radio_custom.html.erb
 - app/pb_kits/playbook/pb_radio/docs/_radio_custom.jsx
 - app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb
-- app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx
 - app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.md
 - app/pb_kits/playbook/pb_radio/docs/_radio_custom_swift.md
 - app/pb_kits/playbook/pb_radio/docs/_radio_default.html.erb
@@ -1911,8 +1895,6 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.jsx
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.html.erb
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context.html.erb

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx

@@ -1,117 +0,0 @@
-import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
-
-const DrawerBorders = () => {
-  // Individual state variables for each drawer size
-  const [openedBRightDrawer, setOpenedBRightDrawer] = useState(false);
-  const [openedBLeftDrawer, setOpenedBLeftDrawer] = useState(false);
-  const [openedBFullDrawer, setOpenedBFullDrawer] = useState(false);
-  const [openedBDefaultDrawer, setOpenedBDefaultDrawer] = useState(false);
-  const [openedBRoundedDrawer, setOpenedBRoundedDrawer] = useState(false);
-
-  // Toggle functions for each drawer
-  const toggleBRightDrawer = () => setOpenedBRightDrawer(!openedBRightDrawer);
-  const toggleBLeftDrawer = () => setOpenedBLeftDrawer(!openedBLeftDrawer);
-  const toggleBFullDrawer = () => setOpenedBFullDrawer(!openedBFullDrawer);
-  const toggleBDefaultDrawer = () => setOpenedBDefaultDrawer(!openedBDefaultDrawer);
-  const toggleBRoundedDrawer = () => setOpenedBRoundedDrawer(!openedBRoundedDrawer);
-
-  return (
-    <>
-      <Flex padding="md"
-          wrap
-      >
-        <Button marginRight="md"
-            onClick={toggleBRightDrawer}
-        >
-         Drawer with border right
-        </Button>
-        <Button marginRight="md"
-            onClick={toggleBLeftDrawer}
-        >
-         Drawer with border left
-        </Button>
-        <Button marginRight="md"
-            onClick={toggleBFullDrawer}
-        >
-          Drawer with border full
-        </Button>
-        <Button marginRight="md"    
-            onClick={toggleBDefaultDrawer}
-        >
-          Default Drawer
-        </Button>
-        <Button marginRight="md"
-            onClick={toggleBRoundedDrawer}
-        > 
-          Rounded Drawer
-        </Button>
-      </Flex>
-
-      {/* Drawers for each size */}
-      <Drawer
-          behavior="float"
-          border="right"
-          fullHeight
-          onClose={toggleBRightDrawer}
-          opened={openedBRightDrawer}
-          overlay={false}
-          placement="left"
-          size="lg"
-      >
-        This is a Drawer with border right  
-      </Drawer>
-      <Drawer
-          behavior="float"
-          border="left"
-          fullHeight
-          onClose={toggleBLeftDrawer}
-          opened={openedBLeftDrawer}
-          overlay={false}
-          placement="right"
-          size="lg"
-      >
-        This is a Drawer with border left
-      </Drawer>
-      <Drawer
-          behavior="float"
-          border="full"
-          fullHeight
-          onClose={toggleBFullDrawer}
-          opened={openedBFullDrawer}
-          overlay={false}
-          placement="right"
-          size="lg"
-      >
-        This is a Drawer with border full
-      </Drawer>
-      <Drawer
-          behavior="float"
-          fullHeight
-          onClose={toggleBDefaultDrawer}
-          opened={openedBDefaultDrawer}
-          overlay={false}
-          placement="right"
-          size="lg"
-      >   
-        This is a Default Drawer
-      </Drawer>
-      <Drawer
-          behavior="float"
-          borderRadius="rounded"
-          fullHeight
-          onClose={toggleBRoundedDrawer}
-          opened={openedBRoundedDrawer}
-          overlay={false}
-          placement="right"
-          size="lg"
-      >
-      <div style={{ paddingTop: '100px', paddingLeft: '12px' }}>
-        This is a Rounded Drawer
-      </div>
-      </Drawer>
-    </>
-  );
-};
-
-export default DrawerBorders;

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx

@@ -1,43 +0,0 @@
-import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
-
-const useDrawer = (visible = false) => {
-  const [opened, setOpened] = useState(visible);
-  const toggle = () => setOpened(!opened);
-
-  return [opened, toggle];
-};
-
-const DrawerBreakpoints = () => {
-  const [smallDrawerOpened, toggleSmallDrawer] = useDrawer();
-
-  return (
-    <>
-      <Flex wrap>
-        <Button
-            id="sm"
-            marginRight="md"
-            onClick={toggleSmallDrawer}
-        >
-          {"Will open at small breakpoint"}
-        </Button>
-      </Flex>
-      <Flex>
-        <Drawer
-            behavior={"push"}
-            breakpoint="sm"
-            fullHeight
-            onClose={toggleSmallDrawer}
-            opened={smallDrawerOpened}
-            overlay={false}
-            placement={"right"}
-            size={"lg"}
-        >
-          Open because small breakpoint 
-        </Drawer>
-      </Flex>
-    </>
-  );
-};
-
-export default DrawerBreakpoints;

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb

@@ -1 +0,0 @@
-<%= pb_rails("drawer") %>

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx

@@ -1,63 +0,0 @@
-import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
-
-const useDrawer = (visible = false) => {
-  const [opened, setOpened] = useState(visible);
-  const toggle = () => setOpened(!opened);
-
-  return [opened, toggle];
-};
-
-const DrawerDefault = () => {
-  const [headerSeparatorDrawerOpened, toggleHeaderSeparatorDrawer] = useDrawer();
-  const [bothSeparatorsDrawerOpened, toggleBothSeparatorsDrawer] = useDrawer();
-
-  return (
-    <>
-      <Flex wrap>
-        <Button
-            id="sm"
-            marginRight="md"
-            onClick={toggleHeaderSeparatorDrawer}
-        >
-          {"Left Drawer"}
-        </Button>
-        <Button
-            marginRight="xl"
-            onClick={toggleBothSeparatorsDrawer}
-        >
-          {"Right Drawer"}
-        </Button>
-      </Flex>
-      <Flex>
-        {/* Left Drawer */}
-        <Drawer
-            behavior={"push"}
-            fullHeight
-            onClose={toggleHeaderSeparatorDrawer}
-            opened={headerSeparatorDrawerOpened}
-            overlay
-            placement={"left"}
-            size={"lg"}
-        >
-          Test me (Left Drawer)
-        </Drawer>
-
-        {/* Right Drawer */}
-        <Drawer
-            behavior={"push"}
-            fullHeight
-            onClose={toggleBothSeparatorsDrawer}
-            opened={bothSeparatorsDrawerOpened}
-            overlay
-            placement={"right"}
-            size={"lg"}
-        >
-          Test me (Right Drawer)
-        </Drawer>
-      </Flex>
-    </>
-  );
-};
-
-export default DrawerDefault;

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx

@@ -1,55 +0,0 @@
-import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
-
-const DrawerSizes = () => {
-  // Individual state variables for each drawer size
-  const [openedNoOverlayDrawer, setOpenedNoOverlayDrawer] = useState(false);
-  const [openedOverlayDrawer, setOpenedOverlayDrawer] = useState(false);
-
-  // Toggle functions for each drawer
-  const toggleNoOverlayDrawer = () => setOpenedNoOverlayDrawer(!openedNoOverlayDrawer);
-  const toggleOverlayDrawer = () => setOpenedOverlayDrawer(!openedOverlayDrawer);
-
-  return (
-    <>
-      <Flex wrap>
-        <Button marginRight="md"
-            onClick={toggleNoOverlayDrawer}
-        >
-          No Overlay Drawer
-        </Button>
-        <Button marginRight="md"
-            onClick={toggleOverlayDrawer}
-        >
-          Overlay Drawer
-        </Button>
-      </Flex>
-
-      {/* Drawers for each size */}
-      <Drawer
-          behavior="push"
-          fullHeight
-          onClose={toggleNoOverlayDrawer}
-          opened={openedNoOverlayDrawer}
-          overlay={false}
-          placement="right"
-          size="lg"
-      >
-        This is a Drawer with no overlay
-      </Drawer>
-      <Drawer
-          behavior="push"
-          fullHeight
-          onClose={toggleOverlayDrawer}
-          opened={openedOverlayDrawer}
-          overlay
-          placement="right"
-          size="lg"
-      >
-        This is a Drawer with an overlay 
-      </Drawer>
-    </>
-  );
-};
-
-export default DrawerSizes;

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx

@@ -1,113 +0,0 @@
-import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
-
-const DrawerSizes = () => {
-  // Individual state variables for each drawer size
-  const [openedXsDrawer, setOpenedXsDrawer] = useState(false);
-  const [openedSmDrawer, setOpenedSmDrawer] = useState(false);
-  const [openedMdDrawer, setOpenedMdDrawer] = useState(false);
-  const [openedLgDrawer, setOpenedLgDrawer] = useState(false);
-  const [openedXlDrawer, setOpenedXlDrawer] = useState(false);
-
-  // Toggle functions for each drawer
-  const toggleXsDrawer = () => setOpenedXsDrawer(!openedXsDrawer);
-  const toggleSmDrawer = () => setOpenedSmDrawer(!openedSmDrawer);
-  const toggleMdDrawer = () => setOpenedMdDrawer(!openedMdDrawer);
-  const toggleLgDrawer = () => setOpenedLgDrawer(!openedLgDrawer);
-  const toggleXlDrawer = () => setOpenedXlDrawer(!openedXlDrawer);
-
-  return (
-    <>
-      <Flex wrap>
-        <Button marginRight="md"
-            onClick={toggleXsDrawer}
-        >
-          XS Drawer
-        </Button>
-        <Button marginRight="md"
-            onClick={toggleSmDrawer}
-        >
-          SM Drawer
-        </Button>
-        <Button marginRight="md"
-            onClick={toggleMdDrawer}
-        >
-          MD Drawer
-        </Button>
-        <Button marginRight="md"
-            onClick={toggleLgDrawer}
-        >
-          LG Drawer
-        </Button>
-        <Button marginRight="md"
-            onClick={toggleXlDrawer}
-        >
-          XL Drawer
-        </Button>
-      </Flex>
-
-      {/* Drawers for each size */}
-      <Drawer
-          behavior="push"
-          fullHeight
-          onClose={toggleXsDrawer}
-          opened={openedXsDrawer}
-          overlay
-          placement="right"
-          size="xs"
-      >
-        XS 
-      </Drawer>
-
-      <Drawer
-          behavior="push"
-          fullHeight
-          onClose={toggleSmDrawer}
-          opened={openedSmDrawer}
-          overlay
-          placement="right"
-          size="sm"
-      >
-        This is an SM Drawer
-      </Drawer>
-
-      <Drawer
-          behavior="push"
-          fullHeight
-          onClose={toggleMdDrawer}
-          opened={openedMdDrawer}
-          overlay
-          placement="right"
-          size="md"
-      >
-        This is an MD Drawer
-      </Drawer>
-
-      <Drawer
-          behavior="push"
-          fullHeight
-          onClose={toggleLgDrawer}
-          opened={openedLgDrawer}
-          overlay
-          placement="right"
-          size="lg"
-      >
-        This is an LG Drawer
-      </Drawer>
-
-      <Drawer
-          behavior="push"
-          fullHeight
-          onClose={toggleXlDrawer}
-          opened={openedXlDrawer}
-          overlay
-          placement="right"
-          size="xl"
-      >
-        This is an XL Drawer
-      </Drawer>
-    </>
-  );
-};
-
-export default DrawerSizes;

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

@@ -1,12 +0,0 @@
-examples:
-  
-  rails:
-  - drawer_default: Default
-  
-  
-  react:
-  - drawer_default: Default
-  - drawer_sizes: Sizes
-  - drawer_overlay: Overlay
-  - drawer_borders: Borders 
-  - drawer_breakpoints: Open on Breakpoints 

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

@@ -1,5 +0,0 @@
-export { default as DrawerDefault } from './_drawer_default.jsx'
-export { default as DrawerSizes } from './_drawer_sizes.jsx'
-export { default as DrawerOverlay } from './_drawer_overlay.jsx'
-export { default as DrawerBorders } from './_drawer_borders.jsx'
-export { default as DrawerBreakpoints } from './_drawer_breakpoints.jsx'

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_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.