playbook_ui_docs 15.6.0.pre.alpha.play265012993 → 15.6.0.pre.alpha.play266913088

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 16606eb98297d948891a2fce755e540ca430058f52c1e6305efa915fd4dc3f93
-  data.tar.gz: 89336ef4e872d6ea5ac0982c0a1c3c1fb57179f77a15252bda5639c1f75342da
+  metadata.gz: 5d69923b71d3c4116b4351555bdd26771da6b7c4ed1014c22d5dd0b2eeb977c5
+  data.tar.gz: 7fdcb789645ba26848a2e1d10e16afae5d777764da22426e9be2698ed4a00add
 SHA512:
-  metadata.gz: 4bb9d8e3f145e872a1ec0449bda6832abac9833885c572e46067dc25c6d55a72e6a7876370314823ac9c8fc3058253d4fd1afd938d2d8e15af6ba9f705b736bb
-  data.tar.gz: 8658e602a526dc87cfd4d08ee582ad4150c46b6a96c97b265b317a245b49f80cacbb67d73c107c24d9cf6cf22f32d5fb069fe36cbfc1ba42e207684fc7c3820e
+  metadata.gz: 4cdefcf684ae893fe5b5098cf73c63924050a96760c23c6c623c39907a2308a92c5f593eeb25ef451db189033f3e22430af96309da67771f82ea9602254fd05a
+  data.tar.gz: 128061d2e426203bdd4cc7caddb5cdba55dd287a47d9d72869a9351c571096cd54fa65e5a97b5eb74785aec7cdb0fc237446021703b6e5bd5184d124fe9df85c

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_colors_rails.html.erb

@@ -0,0 +1,43 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      column_styling: { 
+        cell_background_color: ->(row) { row[:newEnrollments].to_i > 20 ? "success_secondary" : "warning_secondary" }
+      }
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+      column_styling: { 
+        cell_background_color: "category_1",
+        font_color: "white"
+      }
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "background-control", table_data: @table_data, column_definitions: column_definitions }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { table_id: "background-control", column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_id: "background-control", table_data: @table_data, column_definitions: column_definitions }) %>
+<% end %>

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

@@ -0,0 +1 @@
+`column_styling` can also be used to control the background color on individual cells in a given column as shown here. 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.html.erb

@@ -8,16 +8,26 @@
       accessor: "newEnrollments",
       label: "New Enrollments",
       column_styling: { 
-        cell_background_color: ->(row) { row[:newEnrollments].to_i > 20 ? "success_secondary" : "warning_secondary" }
+        cell_background_color: "error_subtle",
+        header_background_color: "error_subtle"
       }
     },
     {
       accessor: "scheduledMeetings",
       label: "Scheduled Meetings",
+      column_styling: { 
+        cell_background_color: "info_subtle",
+      }
     },
     {
       accessor: "attendanceRate",
       label: "Attendance Rate",
+      column_styling: { 
+        cell_background_color: "info",
+        header_background_color: "info",
+        header_font_color: "white",
+        font_color: "white"
+      }
     },
     {
       accessor: "completedClasses",
@@ -26,10 +36,6 @@
     {
       accessor: "classCompletionRate",
       label: "Class Completion Rate",
-      column_styling: { 
-        cell_background_color: "category_1",
-        font_color: "white"
-      }
     },
     {
       accessor: "graduatedStudents",

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

@@ -1 +1,7 @@
-`column_styling` can also be used to control the background color on all cells in a given column via the use of the `cell_background_color` key/value pair. Use `cell_background_color` to achieve custom background colors for individual cells as seen here. Use `font_color` to achieve better contrast between cell content and background for darker backgrounds.
+`column_styling` can also be used to control the background color on all cells in a given column. Use the following key/values pairs to achieve this:
+
+1)  `cell_background_color`:  use this to control the background color of all cells in the given column
+2) `font_color`: use this to control font color for all cells in the given column if needed, for example if using a darker background color
+3) `header_background_color`: use this to control the background color of the column header
+4) `header_font_color`: use this to control font color for the header in the given column if needed, for example if using a darker background color.
+

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

@@ -0,0 +1,54 @@
+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 AdvancedTableColumnStylingBackground = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      columnStyling:{cellBackgroundColor: colors.error_subtle, headerBackgroundColor: colors.error_subtle},
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+      columnStyling:{cellBackgroundColor: colors.info_subtle},
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+      columnStyling:{cellBackgroundColor: colors.info, headerBackgroundColor: colors.info, fontColor: colors.white, headerFontColor: colors.white},
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableColumnStylingBackground

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

@@ -0,0 +1,9 @@
+The `columnStyling` prop can also be used to set background color for entire columns.As stated above, `columnStyling` is an object that has several optional key/value pairs, here are the options highlighted in this doc:
+
+1) `cellBackgroundColor`: use this to control the background color of all cells in the given column
+2) `headerBackgroundColor`: use this to control the background color of the column header
+3) `fontColor`: use this to control font color for all cells in the given column if needed, for example if using a darker background color.
+4) `headerFontColor`: use this to control font color for the header in the given column if needed, for example if using a darker background color.
+
+
+

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

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

@@ -0,0 +1,3 @@
+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_advanced_table/docs/example.yml

@@ -26,7 +26,8 @@ examples:
   - advanced_table_column_styling_rails: Column Styling
   - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
   - advanced_table_padding_control_rails: Padding Control using Column Styling
-  - advanced_table_background_control_rails: Background Control using Column Styling
+  - advanced_table_background_control_rails: Column Styling Background Color
+  - advanced_table_background_colors_rails: Column Styling Individual Cell Background Color
   - advanced_table_column_border_color_rails: Column Group Border Color
 
 
@@ -75,6 +76,8 @@ examples:
   - advanced_table_padding_control_per_row: Padding Control using Row Styling
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
+  - advanced_table_column_styling_background: Column Styling Background Color
+  - advanced_table_column_styling_background_multi: Column Styling Background Color with Multiple Headers
   - advanced_table_padding_control: Padding Control using Column Styling
   - advanced_table_column_border_color: Column Group Border Color
   - advanced_table_fullscreen: Fullscreen

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

@@ -45,4 +45,6 @@ export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced
 export { default as AdvancedTableSortPerColumn } from './_advanced_table_sort_per_column.jsx'
 export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'
 export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
-export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
+export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
+export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
+export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'

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

@@ -0,0 +1,33 @@
+<%= 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

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

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

@@ -0,0 +1,2 @@
+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_contact/docs/example.yml

@@ -3,11 +3,13 @@ examples:
   rails:
   - contact_default: Default
   - contact_with_detail: Detail Indicator
+  - contact_unstyled: Unstyled
 
 
   react:
   - contact_default: Default
   - contact_with_detail: Detail Indicator
+  - contact_unstyled: Unstyled
 
 
   swift:

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

@@ -1,2 +1,3 @@
 export { default as ContactDefault } from './_contact_default.jsx'
 export { default as ContactWithDetail } from './_contact_with_detail.jsx'
+export { default as ContactUnstyled } from './_contact_unstyled.jsx'

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb

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

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md

@@ -1,4 +1,4 @@
-You can link a Quickpick DatePicker to standard DatePickers using the following props:
+You can link a Quickpick Dropdown to standard DatePickers using the following props:
 
 **For the Quickpick DatePicker**:
 `controls_start_id`: ID of the DatePicker that should receive the start date.

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

@@ -0,0 +1,24 @@
+<%= 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

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

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

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