playbook_ui_docs 15.7.0.pre.alpha.play258013248 → 15.7.0.pre.alpha.play270013252

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,11 +0,0 @@
-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_gauge/docs/_description.md

@@ -1 +0,0 @@
-**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 gaugeTheme.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_gauge/docs/_gauge_colors.html.erb

@@ -1,12 +0,0 @@
-<% data = [
-  {
-    name: 'Name',
-    value: 67,
-  }
-]%>
-
-<%= pb_rails("gauge", props: {
-  id: "gauge-colors",
-  chart_data: data,
-  colors: ['data-7']
-}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
-import colors from '../../tokens/exports/_colors.module.scss'
-
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
-
-const data = [{ name: "Name", y: 67 }]
-
-const baseOptions = {
-  series: [{ data: data }],
-  plotOptions: {
-    solidgauge: {
-      borderColor: colors.data_7,
-    }
-  },
-};
-
-const GaugeColors = () => {
-  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  );
-};
-
-export default GaugeColors;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors_rails.md

@@ -1,2 +0,0 @@
-Custom data colors allow for color customization to match the needs of business requirements.
-Pass the prop `colors` and use **ONE** desired value `data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8` in an array. Hex colors are also available `eg: #CA0095`

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors_react.md

@@ -1,2 +0,0 @@
-Custom data colors allow for color customization to match the needs of business requirements.
-Pass the prop `plotOptions.solidgauge.borderColor` with a Playbook token like `colors.` + `data_1 | data_2 | data_3 | data_4 | data_5 | data_6 | data_7 | data_8`. Hex colors are also available `eg: #CA0095`

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.html.erb

@@ -1,32 +0,0 @@
-<%= pb_rails("flex", props: {wrap: true, padding: "xl", gap: "sm"}) do %>
-  <%= pb_rails("flex/flex_item", props: {flex: 1, grow: true }) do %>
-    <%= pb_rails("card", props: {max_width: "xs", padding: "md", }) do %>
-      <%= pb_rails("title", props: {padding_bottom: "sm", size: 4, text: "Abandoned Calls" })%>
-      <%= pb_rails("flex", props: {align: "stretch"}) do %>
-        <%= pb_rails("flex", props: {margin_right: "sm", orientation: "column"}) do %>
-          <%= pb_rails("body", props: {color: "light", padding_bottom: "sm",text: "Total Abandoned"}) %>
-          <%= pb_rails("flex", props: {align: "baseline", padding_bottom: "sx"}) do %>
-            <%= pb_rails("title", props: {size: 1, text: "39"})%>
-            <%= pb_rails("title", props: {color: "light", size: 3, text: "calls"}) %>
-          <% end %>
-          <%= pb_rails("caption", props: {size: "xs", text: "of 390" }) %>
-        <%end %>
-        <%= pb_rails("section_separator", props: {align_self: "stretch", margin_right: "sm", orientation: "vertical" }) %>
-        <%= pb_rails("flex", props: {orientation: "column", wrap: true}) do %>
-          <%= pb_rails("body", props: {color: "light", text: "% Abandoned"}) %>
-          <%= pb_rails("flex", props: {wrap: true}) do %>
-            <%= pb_rails("flex/flex_item", props: {fixed_size: "150px", overflow: "hidden", shrink: true}) do %>
-              <%= pb_rails("gauge", props: {
-                chart_data: [{ name: "Name", value: 10 }],
-                disable_animation: true,
-                height: '150',
-                id: "gauge-complex",
-                suffix: "%"
-              }) %>
-            <% end %>
-          <% end %>
-        <% end %>
-      <%end %>
-    <% end %>
-  <% end %>
-<% end %>