playbook_ui_docs 15.0.0.pre.alpha.PLAY2467contactkitinternational10329 → 15.0.0.pre.alpha.PLAY236510413

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1ddf5b71ec8cd139aab7b582651ee013d6197d1f9314ac23f36e79326dc3703b
-  data.tar.gz: 9656375b5312c3f24ddf341c06ad88419212afcab8e5512954f9c91f89438dca
+  metadata.gz: ed70a9f2f6f0296363a060d0e4a15dc37dcb06075567daaeac749b48a40931cf
+  data.tar.gz: e0b70fc2477490691b9e89a6df4a63ca1d35d8961cd041fd2b3c24535b218671
 SHA512:
-  metadata.gz: 3962e3967f6e929268089ca85de8dee4645b30f72dfe15250541b9c9ab9a7145cb132d9f1673ce754e37589ab87ceebf604b8320f4c15fecb2c1b19c813cc427
-  data.tar.gz: 44120daf66b8d884a2334b8967372936c2572ad65838dac76d275c8547e1c154e31049d2906f077a8e4b9954f6232584630bcb1c0f5daa90ba220cc7312c03a6
+  metadata.gz: 530287bf562782e712312b9615b37e75f80b37a52b5d923081c31ec3d970a1e650f26ecd8a68377012f4c62c9704913d3a860a40308d20c9847ed4f092d14e5d
+  data.tar.gz: b16a156ff3d1dea68223cc42fac42498c0e73042ec279bf3ffb02eef585046f7fd28cc4d82d0428cee5b28ae93adbdda06a186d4d5e821d15803d3209011fedf

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

@@ -13,7 +13,7 @@
 }) %>
 
 <%= pb_rails("contact", props: {
-  contact_type: "work",
+  contact_type: "wrong number",
   contact_value: "3245627482",
 }) %>
 
@@ -21,18 +21,3 @@
   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,21 +28,6 @@ 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_with_detail.html.erb

@@ -26,9 +26,3 @@
   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,12 +33,6 @@ const ContactDefault = (props) => {
           contactValue="1234"
           {...props}
       />
-      <Contact
-          contactDetail="International"
-          contactType="international"
-          contactValue="+44 7700 900461"
-          {...props}
-      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("loading_inline", props: {text: "Dotted Spinner", variant: "dotted"}) %>
+
+<br/>
+
+<%= pb_rails("loading_inline", props: {text: "Solid Spinner", variant: "solid"}) %>

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

@@ -0,0 +1,24 @@
+import React from 'react'
+import { LoadingInline } from 'playbook-ui'
+
+const LoadingInlineVariant = (props) => {
+  return (
+    <div>
+      <LoadingInline 
+          text=" Dotted Spinner" 
+          variant="dotted" 
+          {...props}
+      />
+
+      <br />
+  
+      <LoadingInline
+          text=" Solid Spinner"
+          variant="solid"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default LoadingInlineVariant

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

@@ -3,9 +3,11 @@ examples:
   rails:
   - loading_inline_default: Default
   - loading_inline_custom: Custom Text
+  - loading_inline_variant: Variant
 
   
   
   react:
   - loading_inline_default: Default
   - loading_inline_custom: Custom Text
+  - loading_inline_variant: Variant

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

@@ -1,2 +1,3 @@
 export { default as LoadingInlineDefault } from './_loading_inline_default.jsx'
 export { default as LoadingInlineCustom } from './_loading_inline_custom.jsx'
+export { default as LoadingInlineVariant } from './_loading_inline_variant.jsx'

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 chart options: 
+`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 }) %>

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

@@ -0,0 +1,131 @@
+import React from "react";
+import { PbCircleChart, Title } from "playbook-ui";
+
+const dataFirst = [
+  {
+    name: 'Waiting for Calls',
+    y: 41,
+  },
+  {
+    name: 'On Call',
+    y: 49,
+  },
+  {
+    name: 'After Call',
+    y: 10,
+  },
+]
+
+const dataSecond = [{
+  name: 'Bugs',
+  y: 8,
+},
+{
+  name: 'Chores',
+  y: 1,
+},
+{
+  name: 'Stories',
+  y: 12,
+}]
+
+const dataThird = [
+  {
+    name: 'Queued',
+    y: 7,
+  },
+  {
+    name: 'In Progress',
+    y: 6,
+  },
+  {
+    name: 'Validation',
+    y: 3,
+  },
+  {
+    name: 'Done',
+    y: 6,
+  },
+]
+
+
+const PbCircleChartDataLegendPosition = (props) => {
+const chartOptionsFirst = {
+    title: { text: "Alignment of Legend" },
+    series: [{ data: dataFirst }],
+    legend: {
+      align: 'right',
+      verticalAlign: 'top'
+    },
+    plotOptions: {
+      pie: {
+        showInLegend: true
+      }
+    }
+  }
+
+  const chartOptionsSecond = {
+    title: { text: "Layout of Legend" },
+    series: [{ data: dataSecond }],
+    legend: {
+      layout: 'vertical'
+    },
+    plotOptions: {
+      pie: {
+        showInLegend: true
+      }
+    }
+  }
+
+  const chartOptionsThird = {
+    title: { text: "Offset of Legend" },
+    series: [{ data: dataThird }],
+    legend: {
+      layout: 'vertical',
+      x: 100,
+      y: 10
+    },
+    plotOptions: {
+      pie: {
+        showInLegend: true
+      }
+    }
+  }
+
+  return (
+  <div>
+    <Title
+        paddingY="sm"
+        size={4}
+        tag="h4"
+        text="align | verticalAlign"
+    />
+    <PbCircleChart
+        options={chartOptionsFirst}
+        {...props}
+    /> 
+    <Title
+        paddingY="sm"
+        size={4}
+        tag="h4"
+        text="layout"
+    />
+    <PbCircleChart
+        options={chartOptionsSecond}
+        {...props}
+    />
+    <Title
+        paddingY="sm"
+        size={4}
+        tag="h4"
+        text="x | y"
+    />
+    <PbCircleChart
+        options={chartOptionsThird}
+        {...props}
+    />
+  </div>
+);
+}
+
+export default PbCircleChartDataLegendPosition;

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

@@ -0,0 +1,14 @@
+##### Prop
+
+`align` **Type**: String | **Values**: left | center | right (defaults to center)
+`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults to bottom)
+`layout` **Type**: String | **Values**: horizontal | vertical | proximate (defaults to horizontal)
+`x` **Type**: Number (defaults to 0)
+`y` **Type**: Number (defaults to 0)
+
+`layout` determines the position of the legend items
+`layout: proximate` will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.
+
+`x` offsets the legend relative to its horizontal alignment. Negative x moves it to the left, positive x moves it to the right
+
+`y` offsets the legend relative to its vertical alignment. Negative y moves it up, positive y moves it down.

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

@@ -0,0 +1,42 @@
+<% data = [
+  {
+    name: "Facebook",
+    y: 2498,
+  },
+  {
+    name: "YouTube",
+    y: 2000,
+  },
+  {
+    name: "WhatsApp",
+    y: 2000,
+  },
+  {
+    name: "Facebook Messenger",
+    y: 1300,
+  },
+  {
+    name: "WeChat",
+    y: 1165,
+  },
+  {
+    name: "Instagram",
+    y: 1000,
+  },
+  {
+    name: "Tik Tok",
+    y: 800,
+  },] %>
+
+<% chart_options = {
+  series: [{ data: data }],
+  plotOptions: {
+    pie: {
+      dataLabels: {
+        enabled: true,
+      },
+    },
+  },
+  } %>
+
+<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>