playbook_ui_docs 15.4.0.pre.rc.4 → 15.5.0.pre.alpha.PLAY2554homeaddressstreetaccessibility12695

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.jsx

@@ -0,0 +1,180 @@
+import React, { useState } from "react";
+
+import Flex from '../../pb_flex/_flex'
+import Draggable from '../../pb_draggable/_draggable'
+import { DraggableProvider } from '../../pb_draggable/context'
+import Badge from '../../pb_badge/_badge'
+import Title from '../../pb_title/_title'
+import Caption from '../../pb_caption/_caption'
+import Card from '../../pb_card/_card'
+import FlexItem from '../../pb_flex/_flex_item'
+import Avatar from '../../pb_avatar/_avatar'
+import Body from '../../pb_body/_body'
+
+// Initial groups to drag between
+const containers = ["To Do", "In Progress", "Done"];
+
+// Initial items to be dragged
+const data = [
+  {
+    id: "11",
+    container: "To Do",
+    title: "Task 1",
+    description: "Bug fixes",
+    assignee_name: "Terry Miles",
+    assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
+  },
+  {
+    id: "12",
+    container: "To Do",
+    title: "Task 2",
+    description: "Documentation",
+    assignee_name: "Sophia Miles",
+    assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
+  },
+  {
+    id: "13",
+    container: "In Progress",
+    title: "Task 3",
+    description: "Add a variant",
+    assignee_name: "Alice Jones",
+    assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
+  },
+  {
+    id: "14",
+    container: "To Do",
+    title: "Task 4",
+    description: "Add jest tests",
+    assignee_name: "Mike James",
+    assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
+  },
+  {
+    id: "15",
+    container: "Done",
+    title: "Task 5",
+    description: "Alpha testing",
+    assignee_name: "James Guy",
+    assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
+  },
+  {
+    id: "16",
+    container: "In Progress",
+    title: "Task 6",
+    description: "Release",
+    assignee_name: "Sally Jones",
+    assignee_img: "https://randomuser.me/api/portraits/women/28.jpg",
+  },
+];
+
+const DraggableMultipleContainersDropzone = (props) => {
+  const [initialState, setInitialState] = useState(data);
+
+  const badgeProperties = (container) => {
+    switch (container) {
+      case "To Do":
+        return { text: "queue", color: "warning" };
+      case "In Progress":
+        return { text: "progress", color: "primary" };
+      default:
+        return { text: "done", color: "success" };
+    }
+  };
+
+  return (
+    <DraggableProvider 
+        dropZone={{type: "outline"}}
+        enableCrossContainerPreview
+        initialItems={data}
+        onDragEnd={(draggedItemId, finalContainer, originalContainer, itemAbove, itemBelow) => {
+          console.log(`Dragged Item ID: ${draggedItemId}`);
+          console.log(`Final Container: ${finalContainer}`);
+          console.log(`Original Container: ${originalContainer}`);
+          console.log('Item Above:', itemAbove);
+          console.log('Item Below:', itemBelow);
+        }}
+        onDrop={(draggedItemId, droppedContainer, originalContainer, item, itemAbove, itemBelow) => {
+          console.log(`Dragged Item ID: ${draggedItemId}`);
+          console.log(`Dropped Container: ${droppedContainer}`);
+          console.log(`Original Container: ${originalContainer}`);
+          console.log('Dropped Item:', item);
+          console.log('Item Above:', itemAbove);
+          console.log('Item Below:', itemBelow);
+        }}
+        onReorder={(items) => setInitialState(items)}
+    >
+      <Flex
+          justifyContent="center"
+          {...props}
+      >
+          {containers?.map((container) => (
+            <Draggable.Container 
+                container={container}
+                htmlOptions={{style:{ width: "200px", height: "70vh"}}}
+                key={container} 
+                padding="sm"
+            >
+                <Caption textAlign="center">{container}</Caption>
+                <Flex 
+                    alignItems="stretch"
+                    gap="sm"
+                    orientation="column" 
+                >
+                  {initialState
+                    .filter((item) => item.container === container)
+                    .map(
+                      ({
+                        assignee_img,
+                        assignee_name,
+                        description,
+                        id,
+                        title,
+                      }) => (
+                        <Draggable.Item 
+                            container={container}
+                            dragId={id} 
+                            key={id}
+                        >
+                          <Card
+                              padding="sm"
+                              {...props}
+                          >
+                            <Flex justify="between">
+                              <FlexItem>
+                                <Flex>
+                                  <Avatar
+                                      imageUrl={assignee_img}
+                                      name={assignee_name}
+                                      size="xxs"
+                                  />
+                                  <Title paddingLeft="xs" 
+                                      size={4}
+                                      text={title}
+                                      {...props}
+                                  />
+                                </Flex>
+                              </FlexItem>
+                              <Badge
+                                  marginLeft="sm"
+                                  rounded
+                                  text={badgeProperties(container).text}
+                                  variant={badgeProperties(container).color}
+                                  {...props}
+                              />
+                            </Flex>
+                            <Body paddingTop="xs"
+                                text={description} 
+                                {...props}
+                            />
+                          </Card>
+                        </Draggable.Item>
+                      )
+                    )}
+                </Flex>
+            </Draggable.Container>
+          ))}
+      </Flex>
+    </DraggableProvider>
+  );
+};
+
+export default DraggableMultipleContainersDropzone;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.md

@@ -0,0 +1,22 @@
+The multiple container functionality also supports customized dropzone styling as shown here. 
+
+In addition to this, the `enableCrossContainerPreview` prop can be used on the `DraggableProvider` as shown here to enable dropzone preview for cross-container dragging. 
+
+With `enableCrossContainerPreview`, the `onDrop` and `onDragEnd` event listeners will also provide several arguments to allow developers more context from the drag event.
+
+The `onDrop` callback is triggered when an item is successfully dropped into a container. It provides the following arguments:
+
+- `draggedItemId` - The ID of the item that was dragged
+- `droppedContainer` - The container where the item was dropped
+- `originalContainer` - The container where the drag started
+- `item` - The complete item object with all properties (including the updated container)
+- `itemAbove` - The item directly above the dropped item in the final position (null if at the top)
+- `itemBelow` - The item directly below the dropped item in the final position (null if at the bottom)
+
+The `onDragEnd` callback is triggered when a drag operation ends, whether it was dropped or cancelled. It provides the following arguments:
+
+- `draggedItemId` - The ID of the item that was dragged
+- `finalContainer` - The container where the item ended up (could be same as original if drag was cancelled)
+- `originalContainer` - The container where the drag started
+- `itemAbove` - The item directly above the dragged item in the final position (null if at the top)
+- `itemBelow` - The item directly below the dragged item in the final position (null if at the bottom)

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

@@ -5,11 +5,12 @@ examples:
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
-  - draggable_multiple_containers: Dragging Across Multiple Containers
   - draggable_drop_zones: Draggable Drop Zones
   - draggable_drop_zones_colors: Draggable Drop Zones Colors
   - draggable_drop_zones_line: Draggable Drop Zones Line
   - draggable_event_listeners: Draggable Event Listeners
+  - draggable_multiple_containers: Dragging Across Multiple Containers
+  - draggable_multiple_containers_dropzone: Dragging Across Multiple Containers with Dropzones
 
   rails:
   - draggable_default: Default
@@ -17,8 +18,8 @@ examples:
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
-  - draggable_multiple_containers: Dragging Across Multiple Containers
   - draggable_drop_zones: Draggable Drop Zones
   - draggable_drop_zones_colors: Draggable Drop Zones Colors
   - draggable_drop_zones_line: Draggable Drop Zones Line
   - draggable_event_listeners: Draggable Event Listeners
+  - draggable_multiple_containers: Dragging Across Multiple Containers

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

@@ -7,4 +7,5 @@ export { default as DraggableWithTable } from './_draggable_with_table.jsx'
 export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
 export { default as DraggableDropZonesColors } from './_draggable_drop_zones_colors.jsx'
 export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
-export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'
+export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'
+export { default as DraggableMultipleContainersDropzone } from './_draggable_multiple_containers_dropzone.jsx'

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
+import EmptyState from '../_empty_state'
+import Flex from '../../pb_flex/_flex'
 
 const EmptyStateAlignment = (props) => (
   <Flex align="center"

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
+import EmptyState from '../_empty_state'
+import Flex from '../../pb_flex/_flex'
 
 const EmptyStateDefault = (props) => (
   <Flex align="center"

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
+import EmptyState from '../_empty_state'
+import Flex from '../../pb_flex/_flex'
 
 const EmptyStateOrientation = (props) => (
   <Flex align="center"

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
+import EmptyState from '../_empty_state'
+import Flex from '../../pb_flex/_flex'
 
 const EmptyStateSize = (props) => (
   <Flex align="center"

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

@@ -15,6 +15,7 @@ const FlexItemExample = (props) => {
         <FlexItem
             displayFlex
             gap="xs"
+            htmlOptions={{style: {padding:"2px"}}}
             {...props}
         >
           <FlexItem>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
+import Card from '../../pb_card/_card'
+import Caption from '../../pb_caption/_caption'
+import FormPill from '../_form_pill'
+import Typeahead from '../../pb_typeahead/_typeahead'
 
 const names = [
   { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.html.erb

@@ -1,3 +1,4 @@
+<%= pb_rails("caption", props: { text: "with all" }) %>
 <%= pb_rails("home_address_street", props: {
   address: "70 Prospect Ave",
   address_cont: "Apt M18",
@@ -9,3 +10,126 @@
   zipcode: "19382",
   territory: "PHL",
 }) %>
+
+<%= pb_rails("caption", props: { margin_top: "sm", text: "First two lines blank: without address and address cont and housestyle" }) %>
+<%= pb_rails("home_address_street", props: {
+  city: "West Chester",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>
+
+<%= pb_rails("caption", props: { margin_top: "sm", text: "First line half blank Second line full: with housestyle and without address and address cont" }) %>
+<%= pb_rails("home_address_street", props: {
+  city: "West Chester",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  house_style: "Colonial",
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>
+
+<%= pb_rails("caption", props: { margin_top: "sm", text: "First line full Second line blank: with address and housestyle and without address cont" }) %>
+<%= pb_rails("home_address_street", props: {
+  address: "70 Prospect Ave",
+  city: "West Chester",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  house_style: "Colonial",
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>
+
+<%= pb_rails("caption", props: { margin_top: "sm", text: "First line half blank Second line full: without address and with housestyle and address cont" }) %>
+<%= pb_rails("home_address_street", props: {
+  address_cont: "Apt M18",
+  city: "West Chester",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  house_style: "Colonial",
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>
+
+<%= pb_rails("caption", props: { margin_top: "sm", text: "First line blank Second line full: with address cont and without address and housestyle" }) %>
+<%= pb_rails("home_address_street", props: {
+  address_cont: "Apt M18",
+  city: "West Chester",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>
+
+<%= pb_rails("caption", props: { margin_top: "sm", text: "Emphasis, Modified, Target and Formatted doc examples below" }) %>
+<%= pb_rails("home_address_street", props: {
+  address: "70 Prospect Ave",
+  city: "West Chester",
+  emphasis: "none",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  house_style: "Colonial",
+  margin_bottom: "sm",
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>
+
+<%= pb_rails("home_address_street", props: {
+  city: "West Chester",
+  emphasis: "city",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  margin_bottom: "sm",
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>
+
+<%= pb_rails("home_address_street", props: {
+  city: "West Chester",
+  emphasis: "none",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  margin_bottom: "sm",
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>
+
+<%= pb_rails("home_address_street", props: {
+  address: "70 Prospect Ave",
+  city: "West Chester",
+  margin_bottom: "sm",
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>
+
+<%= pb_rails("home_address_street", props: {
+  city: "West Chester",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  margin_bottom: "sm",
+  state: "PA",
+  target: "_blank",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>
+
+<%= pb_rails("home_address_street", props: {
+  address: "70 pRoSpEcT ave",
+  city: "West Chester",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  preserve_case: true,
+  state: "pa",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx

@@ -1,21 +1,156 @@
 import React from 'react'
 
 import HomeAddressStreet from '../_home_address_street'
+import Caption from '../../pb_caption/_caption'
 
 const HomeAddressStreetDefault = (props) => {
   return (
-    <HomeAddressStreet
-        address="70 Prospect Ave"
-        addressCont="Apt M18"
-        city="West Chester"
-        homeId="8250263"
-        homeUrl="https://powerhrg.com/"
-        houseStyle="Colonial"
-        state="PA"
-        territory="PHL"
-        zipcode="19382"
-        {...props}
-    />
+    <>
+      <Caption text="with all" />
+      <HomeAddressStreet
+          address="70 Prospect Ave"
+          addressCont="Apt M18"
+          city="West Chester"
+          homeId="8250263"
+          homeUrl="https://powerhrg.com/"
+          houseStyle="Colonial"
+          state="PA"
+          territory="PHL"
+          zipcode="19382"
+          {...props}
+      />
+      <Caption marginTop="sm"
+          text="First two lines blank: without address and address cont and housestyle"
+      />
+      <HomeAddressStreet
+          city="West Chester"
+          homeId="8250263"
+          homeUrl="https://powerhrg.com/"
+          state="PA"
+          territory="PHL"
+          zipcode="19382"
+          {...props}
+      />
+      <Caption marginTop="sm"
+          text="First line half blank Second line full: with housestyle and without address and address cont"
+      />
+      <HomeAddressStreet
+          city="West Chester"
+          homeId="8250263"
+          homeUrl="https://powerhrg.com/"
+          houseStyle="Colonial"
+          state="PA"
+          territory="PHL"
+          zipcode="19382"
+          {...props}
+      />
+      <Caption marginTop="sm"
+          text="First line full Second line blank: with address and housestyle and without address cont and address cont"
+      />
+      <HomeAddressStreet
+          address="70 Prospect Ave"
+          city="West Chester"
+          homeId="8250263"
+          homeUrl="https://powerhrg.com/"
+          houseStyle="Colonial"
+          state="PA"
+          territory="PHL"
+          zipcode="19382"
+          {...props}
+      />
+      <Caption marginTop="sm"
+          text="First line half blank Second line full: without address and with housestyle and address cont and address cont"
+      />
+      <HomeAddressStreet
+          city="West Chester"
+          homeId="8250263"
+          homeUrl="https://powerhrg.com/"
+          houseStyle="Colonial"
+          state="PA"
+          territory="PHL"
+          zipcode="19382"
+          {...props}
+      />
+      <Caption marginTop="sm"
+          text="First line blank Second line full: with address cont and without address and housestyle and address cont"
+      />
+      <HomeAddressStreet
+          addressCont="Apt M18"
+          city="West Chester"
+          homeId="8250263"
+          homeUrl="https://powerhrg.com/"
+          state="PA"
+          territory="PHL"
+          zipcode="19382"
+          {...props}
+      />
+      <Caption marginTop="sm"
+          text="Emphasis, Modified, Target and Formatted doc examples below and address cont"
+      />
+      <HomeAddressStreet
+          address="70 Prospect Ave"
+          city="West Chester"
+          emphasis="none"
+          homeId="8250263"
+          homeUrl="https://powerhrg.com/"
+          houseStyle="Colonial"
+          marginBottom="sm"
+          state="PA"
+          territory="PHL"
+          zipcode="19382"
+          {...props}
+      />
+      <HomeAddressStreet
+          city="West Chester"
+          emphasis="city"
+          homeId="8250263"
+          homeUrl="https://powerhrg.com/"
+          marginBottom="sm"
+          state="PA"
+          territory="PHL"
+          zipcode="19382"
+          {...props}
+      />
+      <HomeAddressStreet
+          city="West Chester"
+          emphasis="none"
+          homeId="8250263"
+          homeUrl="https://powerhrg.com/"
+          marginBottom="sm"
+          state="PA"
+          territory="PHL"
+          zipcode="19382"
+          {...props}
+      />
+      <HomeAddressStreet
+          address="70 Prospect Ave"
+          city="West Chester"
+          marginBottom="sm"
+          state="PA"
+          territory="PHL"
+          zipcode="19382"
+      />
+      <HomeAddressStreet
+          city="West Chester"
+          homeId={8250263}
+          homeUrl="https://powerhrg.com/"
+          marginBottom="sm"
+          state="PA"
+          target="_blank"
+          territory="PHL"
+          zipcode="19382"
+      />
+      <HomeAddressStreet
+          address="70 pRoSpEcT ave"
+          city="West Chester"
+          homeId="8250263"
+          homeUrl="https://powerhrg.com/"
+          preserveCase
+          state="pa"
+          territory="PHL"
+          zipcode="19382"
+      />
+    </>
   )
 }
 

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { LoadingInline } from 'playbook-ui'
+import LoadingInline from '../_loading_inline'
 
 const LoadingInlineVariant = (props) => {
   return (

data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("caption", props: { margin_bottom: "sm", text: "Default Variant" }) %>
+<%= pb_rails("nav", props: { orientation: "horizontal" }) do %>
+  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+<% end %>
+<%= pb_rails("caption", props: { margin_bottom: "sm", margin_top:"lg", text: "Subtle Variant" }) %>
+<%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle" }) do %>
+  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+<% end %>
+<%= pb_rails("caption", props: { margin_bottom: "sm", margin_top:"lg", text: "Bold Variant" }) %>
+<%= pb_rails("nav", props: { orientation: "horizontal", variant: "bold" }) do %>
+  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+<% end %>