playbook_ui_docs 15.6.0.pre.alpha.play266913088 → 15.6.0.pre.rc.0

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_multi.jsx

@@ -1,80 +0,0 @@
-import React from "react"
-import AdvancedTable from '../_advanced_table'
-import colors from '../../tokens/exports/_colors.module.scss'
-import MOCK_DATA from "./advanced_table_mock_data.json"
-
-
-const AdvancedTableColumnStylingBackgroundMulti = (props) => {
-  const columnDefinitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      label: "Enrollment Data",
-      columns: [
-        {
-          label: "Enrollment Stats",
-          columns: [
-            {
-              accessor: "newEnrollments",
-              label: "New Enrollments",
-              columnStyling:{cellBackgroundColor: colors.error_subtle, headerBackgroundColor: colors.error_subtle},
-            },
-            {
-              accessor: "scheduledMeetings",
-              label: "Scheduled Meetings",
-            },
-          ],
-        },
-      ],
-    },
-    {
-      label: "Performance Data",
-      columns: [
-        {
-          label: "Completion Metrics",
-          columns: [
-            {
-              accessor: "completedClasses",
-              label: "Completed Classes",
-              columnStyling:{cellBackgroundColor: colors.info, headerBackgroundColor: colors.info, fontColor: colors.white, headerFontColor: colors.white},
-            },
-            {
-              accessor: "classCompletionRate",
-              label: "Class Completion Rate",
-            },
-          ],
-        },
-        {
-          label: "Attendance",
-          columns: [
-            {
-              accessor: "attendanceRate",
-              label: "Attendance Rate",
-              columnStyling:{cellBackgroundColor: colors.info_subtle},
-            },
-            {
-              accessor: "scheduledMeetings",
-              label: "Scheduled Meetings",
-            },
-          ],
-        },
-      ],
-    },
-  ];
-
-
-  return (
-    <div>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          tableData={MOCK_DATA}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default AdvancedTableColumnStylingBackgroundMulti

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_multi.md

@@ -1,3 +0,0 @@
-The `columnStyling` prop can also be used to set background color for entire columns for the multi header variant as well. 
-
-It should be noted that `headerFontColor` and `headerBackgroundColor` in the multi header variant will only apply to the immediate header for the given column as shown here.

data/app/pb_kits/playbook/pb_background/docs/_background_light.md

@@ -1 +0,0 @@
-By default, the Background kit sets background color to 'light' as seen here. 

data/app/pb_kits/playbook/pb_contact/docs/_contact_unstyled.html.erb

@@ -1,33 +0,0 @@
-<%= pb_rails("body", props: { color: "default" }) do %>
-  <%= pb_rails("contact", props: { 
-        contact_value: "2125551234",
-        icon_enabled: false,
-        unstyled: true
-  }) %>
-<% end %>
-
-<%= pb_rails("body", props: { color: "light" }) do %>
-  <%= pb_rails("contact", props: { 
-        contact_value: "12125551234",
-        icon_enabled: false,
-        unstyled: true
-  }) %>
-<% end %>
-
-<%= pb_rails("body", props: { color: "lighter" }) do %>
-  <%= pb_rails("contact", props: { 
-        contact_value: "4155551234",
-        icon_enabled: false,
-        unstyled: true
-  }) %>
-<% end %>
-
-<%= pb_rails("body", props: { color: "default" }) do %>
-  <%= pb_rails("contact", props: { 
-        contact_type: "extension",
-        contact_value: "1234",
-        icon_enabled: false,
-        unstyled: true
-  }) %>
-<% end %>
-

data/app/pb_kits/playbook/pb_contact/docs/_contact_unstyled.jsx

@@ -1,46 +0,0 @@
-import React from 'react'
-import Contact from "../../pb_contact/_contact"
-import Body from "../../pb_body/_body"
-
-const ContactUnstyled = (props) => {
-  return (
-    <div>
-      <Body color="default">
-        <Contact
-            contactValue="2125551234"
-            iconEnabled={false}
-            unstyled
-            {...props}
-        />
-      </Body>
-      <Body color="light">
-        <Contact
-            contactValue="12125551234"
-            iconEnabled={false}
-            unstyled
-            {...props}
-        />
-      </Body>
-      <Body color="lighter">
-        <Contact
-            contactValue="4155551234"
-            iconEnabled={false}
-            unstyled
-            {...props}
-        />
-      </Body>
-      <Body color="default">
-        <Contact
-            contactType="extension"
-            contactValue="1234"
-            iconEnabled={false}
-            unstyled
-            {...props}
-        />
-      </Body>
-    </div>
-  )
-}
-
-export default ContactUnstyled
-

data/app/pb_kits/playbook/pb_contact/docs/_contact_unstyled_rails.md

@@ -1,2 +0,0 @@
-Use the Contact kit with `icon_enabled: false` and `unstyled: true` to display phone numbers with full typography control. When `unstyled: true`, the Contact kit renders just the formatted text without a Body wrapper, allowing you to wrap it in your own Typography kit to control the color and styling.
-

data/app/pb_kits/playbook/pb_contact/docs/_contact_unstyled_react.md

@@ -1,2 +0,0 @@
-Use the Contact kit with `iconEnabled={false}` and `unstyled` to display phone numbers with full typography control. With `unstyled`, the Contact kit renders just the formatted text without a Body wrapper, allowing you to wrap it in your own Typography kit to control the color and styling.
-

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_closeable.html.erb

@@ -1,24 +0,0 @@
-<%= pb_rails("flex", props:{wrap:true}) do %>
-<%= pb_rails("button", props: { text: "Open Simple Dialog", data: {"open-dialog": "dialog-simple"}, margin_right:"md" }) %>
-<%= pb_rails("button", props: { text: "Open Complex Dialog", data: {"open-dialog": "dialog-complex2"} }) %>
-<% end %>
-
-<%= pb_rails("dialog", props: { 
-    id:"dialog-simple", 
-    size: "sm", 
-    title: "Header Title is the Title Prop", 
-    text: "Hello Body Text, Nice to meet ya.", 
-    cancel_button: "Cancel Button", 
-    closeable: false,
-    confirm_button: "Okay", 
-    confirm_button_id: "confirm-button-simple"
-}) %>
-
-<%= pb_rails("dialog", props: { 
-    id:"dialog-complex2", 
-    size: "sm"
-}) do %>
- <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex2", title:"Header Title inside Dialog Header", closeable: false } ) %>
-    <%= pb_rails("dialog/dialog_body", props:{text: "Hello Body Text, Nice to meet ya."}) %>
-    <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Cancel Button", confirm_button: "Okay", confirm_button_id:"confirm-complex2", id: "dialog-complex2"}) %>
-<% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_closeable.jsx

@@ -1,60 +0,0 @@
-import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
-
-
-const DialogCloseable = () => {
-  // Simple example 
-  const [isOpenSimple, setIsOpenSimple] = useState(false)
-  const closeSimple = () => setIsOpenSimple(false)
-  const openSimple = () => setIsOpenSimple(true)
-
-    // Complex example
-  const [isOpenComplex, setIsOpenComplex] = useState(false)
-  const closeComplex = () => setIsOpenComplex(false)
-  const openComplex = () => setIsOpenComplex(true)
-
-  return (
-    <>
-      <Button 
-          marginRight='md'
-          onClick={openSimple}
-      >
-        {'Open Simple Dialog'}
-      </Button>
-      <Button onClick={openComplex}>{'Open Complex Dialog'}</Button>
-
-      <Dialog
-          cancelButton="Cancel Button"
-          closeable={false}
-          confirmButton="Okay"
-          onCancel={closeSimple}
-          onClose={closeSimple}
-          onConfirm={closeSimple}
-          opened={isOpenSimple}
-          size="sm"
-          text="Hello Body Text, Nice to meet ya."
-          title="Header Title is the Title Prop"
-      />
-      <Dialog
-          onClose={closeComplex}
-          opened={isOpenComplex}
-          size="sm"
-      >
-        <Dialog.Header closeable={false}>{'Header Title inside Dialog.Header'}</Dialog.Header>
-        <Dialog.Body>{'Hello Body Text, Nice to meet ya.'}</Dialog.Body>
-        <Dialog.Footer>
-          <Button onClick={closeComplex}>{'Okay'}</Button>
-          <Button
-              onClick={closeComplex}
-              variant="link"
-          >
-            {'Cancel Button'}
-          </Button>
-        </Dialog.Footer>
-      </Dialog>
-    </>
-  )
-}
-
-export default DialogCloseable

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_closeable.md

@@ -1,3 +0,0 @@
-The `closeable` prop can be set to false to optionally render the Dialog header without the close “X” button. `closeable` is set to true by default. 
-
-This prop can be used with the simple as well as the complex version of the Dialog as can be seen here.

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible.html.erb

@@ -1,71 +0,0 @@
-<% 
-  typeahead_options = [
-    {
-      label: "United States",
-      value: "unitedStates",
-      id: "us"
-    },
-    {
-      label: "United Kingdom",
-      value: "unitedKingdom",
-      id: "gb"
-    },
-    {
-      label: "Canada",
-      value: "canada",
-      id: "ca"
-    },
-    {
-      label: "Australia",
-      value: "australia",
-      id: "au"
-    },
-    {
-      label: "Germany",
-      value: "germany",
-      id: "de"
-    },
-    {
-      label: "France",
-      value: "france",
-      id: "fr"
-    },
-    {
-      label: "Japan",
-      value: "japan",
-      id: "jp"
-    },
-    {
-      label: "Brazil",
-      value: "brazil",
-      id: "br"
-    }
-  ]
-%>
-
-<%= pb_rails("button", props: { text: "Open Dialog with Overflow Visible", data: {"open-dialog": "dialog-overflow-visible"} }) %>
-
-<%= pb_rails("dialog", props: { 
-    id: "dialog-overflow-visible", 
-    size: "md", 
-    overflow: "visible"
-}) do %>
-  <%= pb_rails("dialog/dialog_header", props: { id: "dialog-overflow-visible" } ) do %>
-    <%= pb_rails("body", props: { text: "Select Location" }) %>
-  <% end %>
-  <%= pb_rails("dialog/dialog_body") do %>
-    <%= pb_rails("typeahead", props: {
-      options: typeahead_options,
-      placeholder: "Select a location...",
-      id: "location-typeahead",
-      is_multi: false,
-    }) %>
-  <% end %>
-  <%= pb_rails("dialog/dialog_footer", props: {
-    cancel_button: "Cancel",
-    confirm_button: "Save",
-    confirm_button_id: "confirm-overflow-visible",
-    id: "dialog-overflow-visible"
-  }) %>
-<% end %>
-

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible.jsx

@@ -1,57 +0,0 @@
-import React, { useState } from 'react'
-
-import Body from '../../pb_body/_body'
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
-import Typeahead from '../../pb_typeahead/_typeahead'
-
-const DialogOverflowVisible = () => {
-  const [isOpen, setIsOpen] = useState(false)
-  const close = () => setIsOpen(false)
-  const open = () => setIsOpen(true)
-
-  const typeaheadOptions = [
-    { label: "United States", value: "unitedStates", id: "us" },
-    { label: "United Kingdom", value: "unitedKingdom", id: "gb" },
-    { label: "Canada", value: "canada", id: "ca" },
-    { label: "Australia", value: "australia", id: "au" },
-    { label: "Germany", value: "germany", id: "de" },
-    { label: "France", value: "france", id: "fr" },
-    { label: "Japan", value: "japan", id: "jp" },
-    { label: "Brazil", value: "brazil", id: "br" },
-  ]
-
-  return (
-    <>
-      <Button onClick={open}>{'Open Dialog with Overflow Visible'}</Button>
-      <Dialog
-          onClose={close}
-          opened={isOpen}
-          overflow="visible"
-          size="md"
-      >
-        <Dialog.Header>
-          <Body>{'Select Location'}</Body>
-        </Dialog.Header>
-        <Dialog.Body>
-          <Typeahead
-              options={typeaheadOptions}
-              placeholder="Select a location..."
-          />
-        </Dialog.Body>
-        <Dialog.Footer>
-          <Button onClick={close}>{'Save'}</Button>
-          <Button
-              onClick={close}
-              variant="link"
-          >
-            {'Cancel'}
-          </Button>
-        </Dialog.Footer>
-      </Dialog>
-    </>
-  )
-}
-
-export default DialogOverflowVisible
-

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible_rails.md

@@ -1 +0,0 @@
-Use the `overflow: "visible"` global prop to allow Typeahead dropdown menus to appear outside the dialog boundaries. By default, dialogs clip content that extends beyond their edges, but this prop enables pop-up elements to render above the dialog overlay. 

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_overflow_visible_react.md

@@ -1 +0,0 @@
-Use the `overflow="visible"` global prop to allow Date Picker and Typeahead dropdown menus to appear outside the dialog boundaries. By default, dialogs clip content that extends beyond their edges, but this prop enables pop-up elements to render above the dialog overlay. 

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

@@ -1,180 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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_dropdown/docs/_dropdown_quickpick_default_dates.html.erb

@@ -1,19 +0,0 @@
-
-<%= pb_rails("dropdown", props: {
-  id: "date-range-with-default",
-  label: "Date Range",
-  variant: "quickpick",
-  default_value: "This Year"
-}) %>
-
-<script>
-  document.addEventListener("DOMContentLoaded", () => {
-    const dropdown = document.getElementById("date-range-with-default");
-    if (dropdown) {
-      dropdown.addEventListener("pb:dropdown:selected", (e) => {
-        const option = e.detail;
-        console.log("Selected option:", option);
-      });
-    }
-  });
-</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_rails.html.erb

@@ -1,12 +0,0 @@
-<%= pb_rails("dropdown", props: {id: "date-range-quickpick-1", label: "Date Range", variant: "quickpick"}) %>
-
-
-<script>
-  const dropdown = document.getElementById("date-range-quickpick-1");
-  if (dropdown) {
-    dropdown.addEventListener("pb:dropdown:selected", (e) => {
-      const option = e.detail;
-      console.log("Selected option:", option);
-    });
-  }
-</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_rails.md

@@ -1,26 +0,0 @@
-The `quickpick` variant provides predefined date based options when `variant:"quickpick"` is used. 
-
-Open the Dropdown above to see the default options.
-
-The quickpick variant automatically generates hidden inputs for `start_date` and `end_date` which are populated when a date range is selected. These inputs are ready for form submission.
-
-You can customize the input names and IDs using the following props:
-- `start_date_name` - The name attribute for the start date input (default: `"start_date_name"`)
-- `start_date_id` - The ID attribute for the start date input (default: `"start_date_id"`)
-- `end_date_name` - The name attribute for the end date input (default: `"end_date_name"`)
-- `end_date_id` - The ID attribute for the end date input (default: `"end_date_id"`)
-
-Example with custom names:
-```ruby
-pb_rails("dropdown", props: {
-  variant: "quickpick",
-  start_date_name: "filter[start_date]",
-  start_date_id: "filter_start_date",
-  end_date_name: "filter[end_date]",
-  end_date_id: "filter_end_date"
-})
-```
-
-The Dropdown kit also comes with a custom event called "pb:dropdown:selected" which updates dynamically with the selection as it changes. See code snippet to see this in action.
-
-In addition, a data attribute called data-option-selected with the selection is also rendered on the parent dropdown div.