playbook_ui_docs 15.0.0.pre.alpha.PLAY2316advancedtablerightsidedoubleborder10545 → 15.0.0.pre.alpha.PLAY2316advancedtablerightsidedoubleborder10726

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6d0bb358da95f68c8d5d8f49c3f0e5b5118a644ad37143ec73d0491b4369dfd4
-  data.tar.gz: 4c852a11ed1b65857e2e71e782a3a04c8fd7545763ce3cb4db904aa803a881c4
+  metadata.gz: df963e3ed4bc831a25fad881219c945d9f230e2930b1f7a35143f9fe5f103b96
+  data.tar.gz: 22bb0eefa9869115fccf925343b7650208b93e41614756cf236f4109a1be4c84
 SHA512:
-  metadata.gz: 964a1f872e5a03137515d7cfca346c13373b5606c743a081253a9c2ae09b01b80732486744a6bd0d3fac440301619ca812fd91a79c66105e1059e65305bf89f4
-  data.tar.gz: ee64a7989bbdc952f32f2bb4bad6c96777ebed1a0d6d2a9f57bb58a48cb1285be131c1fb5c7d49639e219fff0e1f9c3ece115177339298ab9fdab3497134ba22
+  metadata.gz: 80cb33e096877cf72ed3df4f51e75053ded8439401314c961740a0559d027356e05f9e5e44dce3218966de9c790406eb69ee01a3e1ff0d7bd90a5370dc482c50
+  data.tar.gz: c5ad1c755cbe421ee9c9cf625963033ee86c77fa1ed8e58b086062b05067f0831273f511a80292cb9c5195b97c798fd01fa69204afe741a4970547b5981a7b95

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

@@ -39,5 +39,7 @@
     ],
   },
 ] %>
-
-<%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true } }) %>
+<%# Adjusting for test purposes. Will revert prior to commit. %>
+<%= pb_rails("card", props: {})  do %>
+  <%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", table_data: @table_data, column_definitions: column_definitions, table_props: { container: false, vertical_border: true } }) %>
+<% end %>

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

@@ -1,4 +1,5 @@
 import React from "react"
+import Card from "../../pb_card/_card"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
@@ -44,19 +45,21 @@ const AdvancedTableColumnHeadersVerticalBorder = (props) => {
       ],
     },
   ];
-  
+
   const tableProps = {
-    verticalBorder: true
+    sticky: true,
   }
-
+// Adjusted for testing purposes. Will revert prior to commit.
   return (
     <>
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          tableData={MOCK_DATA}
-          tableProps={tableProps}
-          {...props}
-      />
+      <Card>
+        <AdvancedTable
+            columnDefinitions={columnDefinitions}
+            tableData={MOCK_DATA}
+            tableProps={tableProps}
+            {...props}
+        />
+      </Card>
     </>
   )
 }

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb

@@ -4,6 +4,9 @@
 <%= pb_rails("card", props: {highlight: {position: "top", color:"warning"}, margin_bottom: "sm"}) do %>
   Top Position & Warning Color
 <% end %>
+<%= pb_rails("card", props: {highlight: {position: "right_side", color:"product_5_highlight"}, margin_bottom: "sm"}) do %>
+  Right Side Position & Product 5 Highlight Color
+<% end %>
 <%= pb_rails("card", props: {highlight: {position: "side", color:"category_2"}, margin_bottom: "sm"}) do %>
   Side Position & Category 2 Color
 <% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx

@@ -21,6 +21,14 @@ const CardHighlight = (props) => {
         {'Top Position & Warning Color'}
       </Card>
 
+      <Card
+          {...props}
+          highlight={{ position: 'right_side', color: 'product_5_highlight' }}
+          marginBottom="sm"
+      >
+        {'Right Side Position & Product 5 Highlight Color'}
+      </Card>
+
       <Card
           {...props}
           highlight={{ position: 'side', color: 'category_2' }}

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

@@ -13,7 +13,7 @@
 }) %>
 
 <%= pb_rails("contact", props: {
-  contact_type: "wrong number",
+  contact_type: "work",
   contact_value: "3245627482",
 }) %>
 
@@ -21,3 +21,18 @@
   contact_type: "work-cell",
   contact_value: "349-185-9988",
 }) %>
+
+<%= pb_rails("contact", props: {
+  contact_type: "wrong-phone",
+  contact_value: "2124396666",
+}) %>
+
+<%= pb_rails("contact", props: {
+  contact_type: "extension",
+  contact_value: "1233",
+}) %>
+
+<%= pb_rails("contact", props: {
+  contact_type: "international",
+  contact_value: "+44 7700 900461",
+}) %>

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

@@ -28,6 +28,21 @@ const ContactDefault = (props) => {
           contactValue="3245627482"
           {...props}
       />
+      <Contact
+          contactType="wrong-phone"
+          contactValue="2124396666"
+          {...props}
+      />
+      <Contact
+          contactType='extension'
+          contactValue="1234"
+          {...props}
+      />
+      <Contact
+          contactType="international"
+          contactValue="+44 7700 900461"
+          {...props}
+      />
     </div>
   )
 }

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

@@ -0,0 +1,5 @@
+The Contact kit automatically formats US phone numbers when the `contactType` / `contact_type` is one of: `home` (default), `work`, `cell`, `work-cell`, `wrong-phone`.
+
+- Use `email` to display emails.
+- Use `international` to display International phone numbers exactly as provided (no formatting applied).
+- Use `extension` to display four digit phone extensions.

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

@@ -26,3 +26,9 @@
   contact_value: "1233",
   contact_detail: "Ext",
 }) %>
+
+<%= pb_rails("contact", props: {
+  contact_type: "international",
+  contact_value: "+44 7700 900461",
+  contact_detail: "International",
+}) %>

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

@@ -33,6 +33,12 @@ const ContactDefault = (props) => {
           contactValue="1234"
           {...props}
       />
+      <Contact
+          contactDetail="International"
+          contactType="international"
+          contactValue="+44 7700 900461"
+          {...props}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb

@@ -4,8 +4,8 @@
 
 <%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_breached" }) %>
 
-<%= javascript_tag do %>
-    window.addEventListener("DOMContentLoaded", () => {
+<script>
+    window.addEventListener("load", () => {
 
     // variables for the kits you are targeting 
     const passphrase = document.querySelector(".passphrase_breached").querySelector("input")
@@ -142,4 +142,4 @@
     });
 
   })
-<% end %>
+</script>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.html.erb

@@ -10,8 +10,8 @@
 <%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_common" }) %>
 
 
-<%= javascript_tag do %>
-    window.addEventListener("DOMContentLoaded", () => {
+<script>
+    window.addEventListener("load", () => {
 
     const commonText = document.querySelector("#body_common")
 
@@ -133,4 +133,4 @@
     });
 
   })
-<% end %>
+</script>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.html.erb

@@ -4,8 +4,8 @@
 
 <div id="match"> </div>
 
-<%= javascript_tag do %>
-    window.addEventListener("DOMContentLoaded", () => {   
+<script>
+    window.addEventListener("load", () => {   
 
       const useState = (defaultValue) => {
           let value = defaultValue;
@@ -48,4 +48,4 @@
 
       }
     })
-<% end %>
+</script>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb

@@ -32,8 +32,8 @@
 
 
 
-<%= javascript_tag do %>
-    window.addEventListener("DOMContentLoaded", () => {
+<script>
+    window.addEventListener("load", () => {
 
 
     // variables for the passphrase kits you are targeting 
@@ -320,4 +320,4 @@
 
   
   })
-<% end %>
+</script>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb

@@ -7,8 +7,8 @@
 <%= pb_rails("text_input", props: { label: "Passphrase Strength", value: "0", disabled: true, id: "calc_strength_change" }) %>
 
 
-<%= javascript_tag do %>
-    window.addEventListener("DOMContentLoaded", () => {
+<script>
+    window.addEventListener("load", () => {
 
     // variables for the kits you are targeting 
     const passphrase = document.querySelector(".passphrase_change").querySelector("input")
@@ -120,4 +120,4 @@
     });
 
   })
-<% end %>
+</script>

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb

@@ -0,0 +1,31 @@
+<% data = [
+        {
+          name: "Waiting for Calls",
+          y: 41,
+        },
+        {
+          name: "On Call",
+          y: 49,
+        },
+        {
+          name: "After Call",
+          y: 10,
+        },
+      ] %>
+
+<% chart_options = {
+    series: [{
+      data: data,
+      innerSize: '100%',
+      borderWidth: '20',
+    }],
+  } %>
+
+<div style="position: relative;">
+  <%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>
+
+  <div class="pb-circle-chart-block"
+       style="position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; z-index: 1; text-align: center; pointer-events: none;">
+    <%= pb_rails("title", props: { size: 1, tag: "div", text: "83" }) %>
+  </div>
+</div>

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { PbCircleChart, Title } from "playbook-ui";
+
+const data= [
+        {
+          name: "Waiting for Calls",
+          y: 41,
+        },
+        {
+          name: "On Call",
+          y: 49,
+        },
+        {
+          name: "After Call",
+          y: 10,
+        },
+      ]
+
+
+const PbCircleChartBlockContent = (props) => {
+const chartOptions = {
+    series: [{
+      data: data,
+      innerSize: '100%',
+      borderWidth: 20,
+      borderColor: null,
+    }],
+    chart: {
+      events: {
+        render: function() {
+          const chart = this;
+          const blockElement = document.querySelector('.pb-circle-chart-block');
+          if (blockElement) {
+            blockElement.style.width = chart.chartWidth + 'px';
+            blockElement.style.height = chart.chartHeight + 'px';
+          }
+        },
+        redraw: function() {
+          const chart = this;
+          const blockElement = document.querySelector('.pb-circle-chart-block');
+          if (blockElement) {
+            blockElement.style.width = chart.chartWidth + 'px';
+            blockElement.style.height = chart.chartHeight + 'px';
+          }
+        }
+      }
+    }
+  }
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <PbCircleChart
+          options={chartOptions}
+          {...props}
+      />
+      <div 
+          className="pb-circle-chart-block"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            zIndex: 1,
+            textAlign: 'center',
+            pointerEvents: 'none'
+          }}
+      >
+        <Title
+            size={1}
+            tag="div"
+        >
+          {'83'}
+        </Title>
+      </div>
+    </div>
+  );
+};
+
+export default PbCircleChartBlockContent;

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb

@@ -0,0 +1,25 @@
+<% data = [
+        {
+          name: "Waiting for Calls",
+          y: 41,
+        },
+        {
+          name: "On Call",
+          y: 49,
+        },
+        {
+          name: "After Call",
+          y: 10,
+        },
+      ] %>
+
+<% chart_options = {
+    series: [{ data: data }],
+    plotOptions: {
+      pie: {
+        colors: ["#144075", "#1CA05C", "#F9BB00"],
+      },
+    },
+  } %>
+
+<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { PbCircleChart, colors } from "playbook-ui";
+
+const data= [
+        {
+          name: "Waiting for Calls",
+          y: 41,
+        },
+        {
+          name: "On Call",
+          y: 49,
+        },
+        {
+          name: "After Call",
+          y: 10,
+        },
+      ]
+
+
+const PbCircleChartColorOverrides = (props) => {
+const chartOptions = {
+    series: [{ data: data }],
+    plotOptions: {
+      pie: {
+        colors: ["#144075", colors.data_4, colors.data_2], // Custom colors via hex OR Playbook color tokens
+      },
+    },
+  };
+
+  return (
+  <div>
+    <PbCircleChart
+        options={chartOptions}
+        {...props}
+    />
+  </div>
+);
+}
+
+export default PbCircleChartColorOverrides;

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md

@@ -0,0 +1,5 @@
+Custom data colors allow for color customization to match the needs of business requirements.
+
+For React, import the colors from Playbook's tokens, then set custom colors in the plotOptions.pie.colors array using the desired color variables. 
+
+For Rails, only HEX colors can be used eg: `#CA0095`

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.html.erb

@@ -0,0 +1,27 @@
+
+<% data = [
+{
+    name: 'Waiting for Calls',
+    y: 41,
+  },
+  {
+    name: 'On Call',
+    y: 49,
+  },
+  {
+    name: 'After Call',
+    y: 10,
+  },
+] %>
+
+<% chart_options = {
+  series: [{ data: data }],
+  tooltip: {
+      headerFormat: nil,
+      pointFormat: '<p>Custom tooltip for {point.name} <br/>with value: {point.y}</p>',
+      useHTML: true,
+    },
+  } %>
+
+
+<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { PbCircleChart } from "playbook-ui";
+
+const data = [
+  {
+    name: 'Waiting for Calls',
+    y: 41,
+  },
+  {
+    name: 'On Call',
+    y: 49,
+  },
+  {
+    name: 'After Call',
+    y: 10,
+  },
+]
+
+const PbCircleChartCustomTooltip = (props) => {
+const chartOptions = {
+    series: [{ data: data }],
+    tooltip: {
+      headerFormat: null,
+      pointFormat: '<p>Custom tooltip for {point.name} <br/>with value: {point.y}</p>',
+      useHTML: true,
+    },
+  }
+
+  return (
+    <div>
+      <PbCircleChart
+          options={chartOptions}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default PbCircleChartCustomTooltip;

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md

@@ -0,0 +1,5 @@
+Custom tooltip formatting is configured through the tooltip object in the options passed to the kit: 
+`headerFormat` **Type**: String | when set to null will disable the header.
+`pointFormat` **Type**: String | defines the HTML template for each data point and supports custom HTML when `useHTML` is enabled.
+`useHTML` **Type**: boolean (default false) | enables HTML rendering in tooltips.
+`{point.name}` and `{point.y}` are useful values that can be referenced for each point in the graph.

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.html.erb

@@ -0,0 +1,93 @@
+<% data_first = [{
+  name: 'Bugs',
+  y: 8,
+},
+{
+  name: 'Chores',
+  y: 1,
+},
+{
+  name: 'Stories',
+  y: 12,
+}] %>
+
+<% data_second = [{
+  name: 'Bugs',
+  y: 8,
+},
+{
+  name: 'Chores',
+  y: 1,
+},
+{
+  name: 'Stories',
+  y: 12,
+}] %>
+
+<% data_third = [{
+    name: 'Queued',
+    y: 7,
+  },
+  {
+    name: 'In Progress',
+    y: 6,
+  },
+  {
+    name: 'Validation',
+    y: 3,
+  },
+  {
+    name: 'Done',
+    y: 6,
+  },
+] %>
+
+
+<% chart_options_first = {
+    title: { text: "Alignment of Legend" },
+    series: [{ data: data_first }],
+    legend: {
+      align: 'right',
+      verticalAlign: 'top'
+    },
+    plotOptions: {
+      pie: {
+        showInLegend: true
+      }
+    }
+  } %>
+
+  <% chart_options_second = {
+  title: { text: "Layout of Legend" },
+    series: [{ data: data_second }],
+    legend: {
+      layout: 'vertical'
+    },
+    plotOptions: {
+      pie: {
+        showInLegend: true
+      }
+    }
+  } %>
+
+  <% chart_options_third = {
+   title: { text: "Offset of Legend" },
+    series: [{ data: data_third }],
+    legend: {
+      layout: 'vertical',
+      x: 100,
+      y: 10
+    },
+    plotOptions: {
+      pie: {
+        showInLegend: true
+      }
+    }
+  } %>
+
+<%= pb_rails("title", props: { size: 4, text: "align | verticalAlign", padding_y:"sm" }) %>
+<%= pb_rails("pb_circle_chart", props: { options: chart_options_first }) %>
+<%= pb_rails("title", props: { size: 4, text: "layout", padding_y:"sm" }) %>
+<%= pb_rails("pb_circle_chart", props: { options: chart_options_second }) %>
+<%= pb_rails("title", props: { size: 4, text: "x | y", padding_y:"sm" }) %>
+<%= pb_rails("pb_circle_chart", props: { options: chart_options_third }) %>