playbook_ui_docs 14.4.0.pre.alpha.javascriptassets3924 → 14.4.0.pre.alpha.pbntr523enablekitsforradiofix3825

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.4.0.pre.alpha.javascriptassets3924
+  version: 14.4.0.pre.alpha.pbntr523enablekitsforradiofix3825
 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-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
@@ -1904,8 +1896,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_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