playbook_ui_docs 14.4.0.pre.alpha.stephenagreerpatch13922 → 14.4.0.pre.rc.0

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.4.0.pre.alpha.stephenagreerpatch13922
+  version: 14.4.0.pre.rc.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-10-01 00:00:00.000000000 Z
+date: 2024-09-06 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
@@ -824,9 +816,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
@@ -1129,10 +1118,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
@@ -1167,8 +1152,6 @@ files:
 - app/pb_kits/playbook/pb_multiple_users/docs/example.yml
 - app/pb_kits/playbook/pb_multiple_users/docs/index.js
 - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_description.md
-- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_bubble.html.erb
-- app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_bubble.jsx
 - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default.html.erb
 - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default.jsx
 - app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default_swift.md
@@ -1409,11 +1392,9 @@ files:
 - app/pb_kits/playbook/pb_radio/docs/_radio_alignment.html.erb
 - app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx
 - app/pb_kits/playbook/pb_radio/docs/_radio_alignment_swift.md
+- app/pb_kits/playbook/pb_radio/docs/_radio_children.jsx
 - 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
 - app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx
@@ -1921,10 +1902,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_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_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: "Primary",
-    tabindex: 0,
-}) %>
-<%= pb_rails("form_pill", props: {
-    color: "neutral",
-    text: "Neutral",
-    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,
-}) %>