playbook_ui_docs 14.25.0.pre.alpha.testingcss10064 → 14.25.0.pre.rc.0

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

@@ -0,0 +1,99 @@
+import React, { useState } from "react";
+
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Flex from '../../pb_flex/_flex'
+
+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
+          onClose={toggleXsDrawer}
+          opened={openedXsDrawer}
+          placement="right"
+          size="xs"
+      >
+        XS 
+      </Drawer>
+
+      <Drawer
+          onClose={toggleSmDrawer}
+          opened={openedSmDrawer}
+          size="sm"
+      >
+        This is an SM Drawer
+      </Drawer>
+
+      <Drawer
+          onClose={toggleMdDrawer}
+          opened={openedMdDrawer}
+          placement="right"
+      >
+        This is an MD Drawer
+      </Drawer>
+
+      <Drawer
+          onClose={toggleLgDrawer}
+          opened={openedLgDrawer}
+          size="lg"
+      >
+        This is an LG Drawer
+      </Drawer>
+
+      <Drawer
+          onClose={toggleXlDrawer}
+          opened={openedXlDrawer}
+          placement="right"
+          size="xl"
+      >
+        This is an XL Drawer
+      </Drawer>
+    </>
+  );
+};
+
+export default DrawerSizes;

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

@@ -0,0 +1,20 @@
+examples:
+  
+  rails:
+  - drawer_default: Default
+  - drawer_behavior: Push Behavior
+  - drawer_menu: Within Element
+  - drawer_sizes: Sizes
+  - drawer_overlay: Overlay
+  - drawer_breakpoints: Breakpoints
+  - drawer_borders: Borders 
+  
+  
+  react:
+  - drawer_default: Default
+  - drawer_behavior: Push Behavior
+  - drawer_menu: Within Element
+  - drawer_sizes: Sizes
+  - drawer_overlay: Overlay
+  - drawer_breakpoints: Breakpoints
+  - drawer_borders: Borders 

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

@@ -0,0 +1,7 @@
+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'
+export { default as DrawerMenu } from './_drawer_menu.jsx'
+export { default as DrawerBehavior } from './_drawer_behavior.jsx'

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

@@ -2,8 +2,7 @@
 | Name | Type | Description | Default | Values |
 | --- | ----------- | --------- | --------- | --------- |
 | **text** | `String` |`Value for the toast message` | `nil` |   |
-| **font** | `PBFont` |`Value for the toast message font style` | `.title4` |   |
-| **animatedIcon** | `AnyView` |`Value for the option to use an animated icon` | `nil` |   |
-| **variant** | `Variant` | `Determines the type pf toast message being displayed` | `.custom()` |  `error` `success` `neutral` `custom()` |
+| **variant** | `Variant` | `Determines the type pf toast message being displayed` | `.custom()` |  `error`, `success`, 
+`neutral`, `custom()` |
 | **actionView** | `dismissAction` | Dismisses the toast message | `.default` | `default` `custom()` `withTimer()` |
 | **dismissAction** | `(() -> Void)` | `Triggers the dismiss action` |  |  |

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

@@ -8,7 +8,6 @@ examples:
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
   - fixed_confirmation_toast_custom_icon: Custom Icon
-  - fixed_confirmation_toast_no_icon: No Icon
   
   react:
   - fixed_confirmation_toast_default: Default
@@ -18,7 +17,6 @@ examples:
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
   - fixed_confirmation_toast_custom_icon: Custom Icon
-  - fixed_confirmation_toast_no_icon: No Icon
 
   swift:
   - fixed_confirmation_toast_default_swift: Default

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

@@ -5,4 +5,3 @@ export { default as FixedConfirmationToastPositions } from './_fixed_confirmatio
 export { default as FixedConfirmationToastAutoClose } from './_fixed_confirmation_toast_auto_close.jsx'
 export { default as FixedConfirmationToastChildren } from './_fixed_confirmation_toast_children.jsx'
 export { default as FixedConfirmationToastCustomIcon } from './_fixed_confirmation_toast_custom_icon.jsx'
-export { default as FixedConfirmationToastNoIcon } from './_fixed_confirmation_toast_no_icon.jsx'

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("title", props: {size: 4, text: "Gap"}) %>
+<%= pb_rails("title", props: {size: 4, text: "Row"}) %>
 <br/>
 <div class="flex-doc-example">
   <%= pb_rails("flex", props:{ gap: "xxs", wrap:true}) do %>
@@ -31,14 +31,3 @@
    <%= pb_rails("flex/flex_item") do %>4<% end %>
   <% end %>
 </div>
-
-<br/><br/>
-<%= pb_rails("title", props: {size: 4, text: "Responsive"}) %>
-<br/>
-<div class="flex-doc-example">
-  <%= pb_rails("flex", props: { gap: { xs: "none", sm: "sm", md: "md", lg: "lg", xl: "xl" }, wrap: true }) do %>
-   <% 40.times do |i| %>
-    <%= pb_rails("flex/flex_item") do %> <%=i%> <% end %>
-   <% end %>
-  <% end %>
-</div>

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
-import Title from '../../pb_title/_title'
 
 const FlexGap = (props) => {
   const count = () => {
@@ -14,8 +13,6 @@ const FlexGap = (props) => {
 
   return (
     <>
-      <Title size={4}>Gap</Title>
-      <br />
       <div className="flex-doc-example">
         <Flex
             gap="xxs"
@@ -30,10 +27,8 @@ const FlexGap = (props) => {
         </Flex>
       </div>
 
-      <br /><br />
-
-      <Title size={4}>Column Gap</Title>
       <br />
+
       <div className="flex-doc-example">
         <Flex
             columnGap="lg"
@@ -53,9 +48,6 @@ const FlexGap = (props) => {
           </FlexItem>
         </Flex>
       </div>
-      <br /><br />
-
-      <Title size={4}>Row Gap</Title>
       <br />
       <div className="flex-doc-example">
         <Flex
@@ -77,23 +69,6 @@ const FlexGap = (props) => {
           </FlexItem>
         </Flex>
       </div>
-
-      <br /><br />
-      <Title size={4}>Responsive</Title>
-      <br />
-      <div className="flex-doc-example">
-        <Flex
-            gap={{ xs: "none", sm: "sm", md: "md", lg: "lg", xl: "xl" }}
-            wrap
-            {...props}
-        >
-          {count().map((v, key) => (
-            <FlexItem key={key}>
-              {v}
-            </FlexItem>
-            ))}
-        </Flex>
-      </div>
     </>
   )
 }

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.md

@@ -0,0 +1,9 @@
+##### Prop
+
+*  `gap` | `row_gap` | `rowGap` | `column_gap` | `columnGap` | **Type**: String | **Values**: xxs | xs | sm | md | lg | xl | none
+
+- Setting the gap prop sets the row_gap || rowGap and the column_gap || columnGap props to the same size and creates equal space within a flex container.
+
+- Setting the row_gap || rowGap prop creates space between rows in a flex container.
+
+- Setting the column_gap || columnGap prop creates space between columns in a flex container.

data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx

@@ -26,7 +26,7 @@ const MapDefault = (props) => {
         new maplibregl.Marker({
           color: mapTheme.marker,
         }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit pb_title_4">Hello World!</h4>`)) // add popup
+        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
         .addTo(map);
 
         // disable map zoom when using scroll

data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx

@@ -29,7 +29,7 @@ const MapWithCustomButton = (props) => {
         new maplibregl.Marker({
           color: mapTheme.marker,
         }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit pb_title_4">Hello World!</h4>`)) // add popup
+        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
         .addTo(map);
 
         // disable map zoom when using scroll

data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx

@@ -26,7 +26,7 @@ const MapWithPlugin = (props) => {
         new maplibregl.Marker({
           color: mapTheme.marker,
         }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit pb_title_4">Hello World!</h4>`)) // add popup
+        .setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
         .addTo(map);
 
         //add maplibre default zoom controls

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

@@ -6,4 +6,3 @@ examples:
   react:
   - pagination_default: Default
   - pagination_page_change: Page Change
-  - pagination_external_control: External Control

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

@@ -1,3 +1,2 @@
 export { default as PaginationDefault } from './_pagination_default.jsx'
 export { default as PaginationPageChange } from './_pagination_page_change.jsx'
-export { default as PaginationExternalControl } from './_pagination_external_control.jsx'

data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx

@@ -19,6 +19,7 @@ const RadioReactHook = () => {
           paddingRight="lg"
         >
         <Radio
+            alignment="left"
             label="Small"
             marginBottom='sm'
             name="size"
@@ -27,6 +28,7 @@ const RadioReactHook = () => {
         />
         <br />
         <Radio
+            alignment="left"
             label="Medium"
             marginBottom='sm'
             name="size"
@@ -35,6 +37,7 @@ const RadioReactHook = () => {
         />
         <br />
         <Radio
+            alignment="left"
             label="Large"
             marginBottom='sm'
             name="size"

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.jsx

@@ -5,9 +5,7 @@ import Detail from '../../pb_detail/_detail'
 import Icon from '../../pb_icon/_icon'
 
 const children = (
-  <Flex alignItems="center"
-      padding="xs"
-  >
+  <Flex padding="xs">
     <Icon color="primary"
         icon="arrow-down"
     />

data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md

@@ -1,18 +1,11 @@
 ### Props
 | Name | Type | Description | Default | Values |
 | --- | ----------- | --------- | --------- | --------- |
-| **name** | `String` | Sets the User's name | `""` |  |
-| **nameFont** | `Typography` | Font styling for the user's name | `.init(font: .title4, variant: .bold)` |  |
-| **image** | `Image?` | Sets image for the avatar | `nil` |  |
-| **orientation** | `Orientation` | Changes the orientation of the User | `.horizontal` | `.horizontal` `.vertical` |
-| **size** | `Size` | Changes the size of the User | `.medium` | `.xxSmall` `.xSmall` `.small` `.medium` `.large` `.xLarge` |
-| **territory** | `String?` | Adds the User's territory | `nil` |  |
-| **title** | `String?` | Adds a title | `nil` |  |
-| **subtitle** | `AnyView?` | Adds a subtitle view | `nil` |  |
-| **status** | `PBOnlineStatus.Status?` | An indicator for the current status of the user | `nil` | `.online` `.away` `.offline` |
+| **name** | `String` | Sets the User's name |  |  |
 | **displayAvatar** | `Bool` | Displays the User's avatar | `true` | `true` `false` |
-| **territoryTitleFont** | `PBFont` | Font for territory and title text | `.subcaption` | `.title1` `.body` `.caption` `.subcaption` `.badgeText` `.title4` |
-| **isActive** | `Bool` | Sets whether the user is active | `true` | `true` `false` |
-| **hasInactiveBadge** | `Bool` | Shows inactive badge when user is not active | `false` | `true` `false` |
-| **spacing** | `CGFloat` | Controls spacing between elements | `Spacing.small` | `.none` `.xxSmall` `.xSmall` `.small` `.medium` `.large` `.xLarge` |
-
+| **image** | `Image` | Sets image for the avatar |  |  |
+| **orientation** | `Orientation` | Changes the orientation of the User | `.horizontal` | `.horizontal` `.verticle` |
+| **size** | `UserAvatarSize` | Changes the size of the User | `.medium` | `.small` `.medium` `.large` |
+| **territory** | `String` | Adds the User's territory |  |  |
+| **title** | `String` | Adds a title |  |  |
+| **status** | `PBAvatar.PresenceStatus?` | An idicator for the current status of the user | `.none` | `.online` `.away` `.offline` |