RubyGems - playbook_ui_docs - Versions diffs - 15.7.0.pre.alpha.play263313229 → 15.7.0.pre.rc.0 - Mend

playbook_ui_docs 15.7.0.pre.alpha.play263313229 → 15.7.0.pre.rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (93) hide show

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

@@ -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 DELETED Viewed

@@ -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_contact/docs/_contact_unstyled.html.erb DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

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

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

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

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

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

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

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

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end_rails.html.erb DELETED Viewed

@@ -1,19 +0,0 @@
-<%= pb_rails("dropdown", props: {
-  id: "date-range-quickpick-end-today",
-  label: "Date Range",
-  variant: "quickpick",
-  range_ends_today: true
-}) %>
-<script>
-  document.addEventListener("DOMContentLoaded", () => {
-    const dropdown = document.getElementById("date-range-quickpick-end-today");
-    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_range_end_rails.md DELETED Viewed

	@@ -1 +0,0 @@
1	- The optional `range_ends_today` prop can be used with the `quickpick` variant to set end date on all ranges that start with 'this' to today's date. For instance, by default 'This Year' will set end day to 12/31/(current year), but if `range_ends_today` prop is used, end date on that range will be today's date.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_default_rails.html.erb DELETED Viewed

@@ -1,30 +0,0 @@
-<%= pb_rails("dropdown", props: {
-  id: "dropdown-quickpick-with-date-pickers-default",
-  label: "Date Range",
-  name: "date_range",
-  margin_bottom: "sm",
-  variant: "quickpick",
-  default_value: "This Month",
-  controls_start_id: "start-date-picker-default",
-  controls_end_id: "end-date-picker-default",
-  start_date_id: "quickpick_start_date_default",
-  start_date_name: "start_date",
-  end_date_id: "quickpick_end_date_default",
-  end_date_name: "end_date"
-}) %>
-<%= pb_rails("date_picker", props: {
-  picker_id: "start-date-picker-default",
-  label: "Start Date",
-  name: "start_date_picker",
-  placeholder: "Select Start Date",
-  sync_start_with: "dropdown-quickpick-with-date-pickers-default"
-}) %>
-<%= pb_rails("date_picker", props: {
-  picker_id: "end-date-picker-default",
-  label: "End Date",
-  name: "end_date_picker",
-  placeholder: "Select End Date",
-  sync_end_with: "dropdown-quickpick-with-date-pickers-default"
-}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_default_rails.md DELETED Viewed

@@ -1,3 +0,0 @@
-This example demonstrates the 3-input pattern with a default value. The dropdown is initialized with "This Month" selected, and both DatePickers are automatically populated with the corresponding start and end dates.
-The default value can be set using the `default_value` prop with any of the quickpick option labels.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_rails.html.erb DELETED Viewed

@@ -1,29 +0,0 @@
-<%= pb_rails("dropdown", props: {
-  id: "dropdown-quickpick-with-date-pickers",
-  label: "Date Range",
-  name: "date_range",
-  margin_bottom: "sm",
-  variant: "quickpick",
-  controls_start_id: "start-date-picker",
-  controls_end_id: "end-date-picker",
-  start_date_id: "quickpick_start_date",
-  start_date_name: "start_date",
-  end_date_id: "quickpick_end_date",
-  end_date_name: "end_date"
-}) %>
-<%= pb_rails("date_picker", props: {
-  picker_id: "start-date-picker",
-  label: "Start Date",
-  name: "start_date_picker",
-  placeholder: "Select Start Date",
-  sync_start_with: "dropdown-quickpick-with-date-pickers"
-}) %>
-<%= pb_rails("date_picker", props: {
-  picker_id: "end-date-picker",
-  label: "End Date",
-  name: "end_date_picker",
-  placeholder: "Select End Date",
-  sync_end_with: "dropdown-quickpick-with-date-pickers"
-}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers_rails.md DELETED Viewed

@@ -1,13 +0,0 @@
-The quickpick variant can be synced with two DatePickers for a 3-input pattern. When a quickpick option is selected from the dropdown, both DatePickers are automatically populated. When either DatePicker is manually changed, the dropdown is cleared.
-#### Props for 3-Input Pattern:
-- `controls_start_id` - ID of the start DatePicker to sync with
-- `controls_end_id` - ID of the end DatePicker to sync with
-#### DatePicker Props:
-- `sync_start_with` - ID of the dropdown to clear when start date changes
-- `sync_end_with` - ID of the dropdown to clear when end date changes
-This pattern allows users to quickly select common date ranges or manually pick specific dates.

data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb DELETED Viewed

@@ -1,14 +0,0 @@
-<%= pb_form_with(scope: :example, url: "", method: :get, validate: true) do |form| %>
-  <%= form.text_field :example_text_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label", required: true, required_indicator: true } %>
-  <%= form.email_field :example_email_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.number_field :example_number_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.search_field :example_search_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.password_field :example_password_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.url_field :example_url_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.actions do |action| %>
-    <%= action.submit %>
-    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.md DELETED Viewed

@@ -1,3 +0,0 @@
-The `required_indicator` prop adds a red asterisk (*) to the input label, visually marking the field as required. This works with both `label: true` for auto-generated labels and `label: "Custom Text"` for custom labels.
-While it's typically used alongside the `required` prop for HTML5 validation, you can use `required_indicator` independently if you're handling validation differently (e.g., client-side or backend validation).