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

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx

@@ -0,0 +1,142 @@
+import React from 'react'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import Title from '../../pb_title/_title'
+
+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 CircleChartLegendPosition = (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
+      }
+    }
+  }
+
+  const optionsFirst = Highcharts.merge({}, circleChartTheme, chartOptionsFirst)
+  const optionsSecond = Highcharts.merge({}, circleChartTheme, chartOptionsSecond)
+  const optionsThird = Highcharts.merge({}, circleChartTheme, chartOptionsThird)
+
+  return (
+    <div>
+      <Title
+          paddingY="sm"
+          size={4}
+          tag="h4"
+          text="align | verticalAlign"
+          {...props}
+      />
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={optionsFirst}
+      />
+      
+      <Title
+          paddingY="sm"
+          size={4}
+          tag="h4"
+          text="layout"
+          {...props}
+      />
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={optionsSecond}
+      />
+      
+      <Title
+          paddingY="sm"
+          size={4}
+          tag="h4"
+          text="x | y"
+          {...props}
+      />
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={optionsThird}
+      />
+    </div>
+  )
+}
+
+export default CircleChartLegendPosition

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_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_circle_chart/docs/_circle_chart_live_data.jsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import Button from '../../pb_button/_button'
+
+const CircleChartLiveData = (props) => {
+  const [data, setData] = useState([
+    {
+      name: 'Waiting for Calls',
+      y: 41,
+    },
+    {
+      name: 'On Call',
+      y: 49,
+    },
+    {
+      name: 'After Call',
+      y: 10,
+    },
+  ])
+
+  const data2 = [
+    {
+      name: 'Waiting for Calls',
+      y: 48,
+    },
+    {
+      name: 'On Call',
+      y: 12,
+    },
+    {
+      name: 'After Call',
+      y: 140,
+    },
+  ]
+
+  const updateValue = () => {
+    setData(data2)
+  }
+
+  const chartOptions = {
+    series: [{ data: data }],
+  }
+
+  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
+
+  return (
+    <div>
+      <Button
+          onClick={updateValue}
+          text="Update Value"
+          {...props}
+      />
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
+
+export default CircleChartLiveData

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb

@@ -0,0 +1,22 @@
+<% data_rounded = [{
+    name: 'Waiting for Calls',
+    value: 20,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After Call',
+    value: 10,
+  }
+] %>
+
+
+<%= pb_rails("circle_chart", props: {
+    chart_data: data_rounded,
+    id: "default-test-rounded",
+    inner_size: "lg",
+    rounded: true,
+
+}) %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+
+const dataRounded = [
+  {
+    name: 'Waiting for Calls',
+    y: 41,
+  },
+  {
+    name: 'On Call',
+    y: 49,
+  },
+  {
+    name: 'After Call',
+    y: 10,
+  },
+]
+
+const CircleChartRounded = () => {
+  const chartOptions = {
+    series: [{ data: dataRounded }],
+    plotOptions: {
+      pie: {
+        borderColor: null,
+        borderWidth: 20,
+        innerSize: '100%',
+      },
+    },
+  }
+
+  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
+
+export default CircleChartRounded

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.html.erb

@@ -0,0 +1,37 @@
+ <% data = [{
+      name: 'Facebook',
+      value: 2498,
+    },
+    {
+      name: 'YouTube',
+      value: 2000,
+    },
+    {
+      name: 'WhatsApp',
+      value: 2000,
+
+    },
+    {
+      name: 'Facebook Messenger',
+      value: 1300,
+    },
+    {
+      name: 'WeChat',
+      value: 1165,
+    },
+    {
+      name: 'Instagram',
+      value: 1000,
+    },
+    {
+      name: 'Tik Tok',
+      value: 800,
+    },
+  ] %>
+
+<%= pb_rails("circle_chart", props: {
+    style: "pie",
+    chart_data: data,
+    id: "with-labels-example",
+    data_labels: true
+}) %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+
+const dataWithLabels = [
+  {
+    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,
+  },
+]
+
+const CircleChartWithLabels = () => {
+  const chartOptions = {
+    series: [{ data: dataWithLabels }],
+    plotOptions: {
+      pie: {
+        dataLabels: {
+          enabled: true,
+        }
+      }
+    }
+  }
+
+  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
+
+export default CircleChartWithLabels

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.html.erb

@@ -0,0 +1,22 @@
+<% data_1 = [{
+      name: 'Bugs',
+      value: 8,
+
+    },
+    {
+      name: 'Chores',
+      value: 1,
+
+    },
+    {
+      name: 'Stories',
+      value: 12,
+    }
+  ] %>
+
+<%= pb_rails("circle_chart", props: {
+    style: "pie",
+    chart_data: data_1,
+    legend: true,
+    id: "with-legend-example",
+}) %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+
+const dataWithLegend = [{
+  name: 'Bugs',
+  y: 8,
+},
+{
+  name: 'Chores',
+  y: 1,
+},
+{
+  name: 'Stories',
+  y: 12,
+}]
+
+const CircleChartWithLegendKit = () => {
+  const chartOptions = {
+    series: [{ data: dataWithLegend }],
+    plotOptions: {
+      pie: {
+        showInLegend: true
+      }
+    }
+  }
+
+  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
+
+export default CircleChartWithLegendKit

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.html.erb

@@ -0,0 +1,38 @@
+ <% data_5 = [{
+      name: 'Facebook',
+      value: 2498,
+    },
+    {
+      name: 'YouTube',
+      value: 2000,
+    },
+    {
+      name: 'WhatsApp',
+      value: 2000,
+
+    },
+    {
+      name: 'Facebook Messenger',
+      value: 1300,
+    },
+    {
+      name: 'WeChat',
+      value: 1165,
+    },
+    {
+      name: 'Instagram',
+      value: 1000,
+    },
+    {
+      name: 'Tik Tok',
+      value: 800,
+    },
+  ] %>
+
+
+<%= pb_rails("circle_chart", props: {
+    style: "pie",
+    title: "Active Users on Social Media",
+    chart_data: data_5,
+    id: "with-caption-example",
+}) %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+
+const dataWithTitle = [
+  {
+    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,
+  },
+]
+
+const CircleChartWithTitle = () => {
+  const chartOptions = {
+    title: { text: "Active Users on Social Media" },
+    series: [{ data: dataWithTitle }],
+  }
+
+  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
+
+export default CircleChartWithTitle

data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md

@@ -0,0 +1 @@
+**Important Note for the React Kit**: In order to leverage this kit, you must install `highcharts` and `highcharts-react-official` into your project as shown below. To then apply Playbook styles to your Highchart, import circleChartTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.

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

@@ -0,0 +1,26 @@
+examples:
+
+  rails:
+  - circle_chart_default: Default Style
+  - circle_chart_rounded: Rounded Corners
+  - circle_chart_block: Accepts Any Block
+  - circle_chart_colors: Color Overrides
+  - circle_chart_with_labels: Data Labels
+  - circle_chart_with_legend_kit: Legend
+  - circle_chart_legend_position: Legend Position
+  - circle_chart_with_title: Title
+  - circle_chart_inner_sizes: Inner Circle Size Options
+  - circle_chart_custom_tooltip: Tooltip Customization
+
+  react:
+  - circle_chart_default: Default Style
+  - circle_chart_live_data: Live Data
+  - circle_chart_rounded: Rounded Corners
+  - circle_chart_block: Accepts Any Block
+  - circle_chart_colors: Color Overrides
+  - circle_chart_with_labels: Data Labels
+  - circle_chart_with_legend_kit: Legend
+  - circle_chart_legend_position: Legend Position
+  - circle_chart_with_title: Title
+  - circle_chart_inner_sizes: Inner Circle Size Options
+  - circle_chart_custom_tooltip: Tooltip Customization

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

@@ -0,0 +1,11 @@
+export { default as CircleChartDefault } from './_circle_chart_default.jsx'
+export { default as CircleChartLiveData } from './_circle_chart_live_data.jsx'
+export { default as CircleChartRounded } from './_circle_chart_rounded.jsx'
+export { default as CircleChartBlock } from './_circle_chart_block.jsx'
+export { default as CircleChartColors } from './_circle_chart_colors.jsx'
+export { default as CircleChartWithLabels } from './_circle_chart_with_labels.jsx'
+export { default as CircleChartWithLegendKit } from './_circle_chart_with_legend_kit.jsx'
+export { default as CircleChartLegendPosition } from './_circle_chart_legend_position.jsx'
+export { default as CircleChartWithTitle } from './_circle_chart_with_title.jsx'
+export { default as CircleChartInnerSizes } from './_circle_chart_inner_sizes.jsx'
+export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"

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

@@ -3,13 +3,11 @@ 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,3 +1,2 @@
 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,29 +1,20 @@
-<%= 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: {
+  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("date_picker", props: {
-  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"
+  picker_id: "quick-pick-date-range-start",
+  placeholder: "Select a Start Date",
+  sync_start_with:"quick-pick-date-range",
 }) %>
 
 <%= pb_rails("date_picker", props: {
-  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"
-}) %>
+  picker_id: "quick-pick-date-range-end",
+  placeholder: "Select an End Date",
+  sync_end_with:"quick-pick-date-range",
+}) %>

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

@@ -1,4 +1,4 @@
-You can link a Quickpick Dropdown to standard DatePickers using the following props:
+You can link a Quickpick DatePicker 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/example.yml

@@ -12,8 +12,6 @@ examples:
   - dialog_full_height_placement: Full Height Placement
   - dialog_loading: Loading
   - dialog_turbo_frames: Within Turbo Frames
-  - dialog_overflow_visible: Overflow Visible
-  - dialog_closeable: Close Button in Header
 
 
   react:
@@ -27,8 +25,6 @@ examples:
   - dialog_full_height: Full Height
   - dialog_full_height_placement: Full Height Placement
   - dialog_loading: Loading
-  - dialog_overflow_visible: Overflow Visible
-  - dialog_closeable: Close Button in Header
 
   swift:
   - dialog_default_swift: Simple

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

@@ -8,6 +8,4 @@ export { default as DialogStatus } from './_dialog_status.jsx'
 export { default as DialogStackedAlert } from './_dialog_stacked_alert.jsx'
 export { default as DialogFullHeight } from './_dialog_full_height.jsx'
 export { default as DialogFullHeightPlacement } from './_dialog_full_height_placement.jsx'
-export { default as DialogLoading } from './_dialog_loading.jsx'
-export { default as DialogOverflowVisible } from './_dialog_overflow_visible.jsx'
-export { default as DialogCloseable } from './_dialog_closeable.jsx'
+export { default as DialogLoading } from './_dialog_loading.jsx'