playbook_ui 7.0.0 → 7.0.1.pre.alpha1

data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.html.erb

@@ -1 +0,0 @@
-<%= pb_rails("caption", props: { text: "Subcaption (link)", size: 'xs', variant: "link" }) %>

data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.jsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import { Caption } from '../../'
-
-const CaptionVariants = () => {
-  return (
-    <div>
-      <Caption
-          size="xs"
-          text="Subcaption (link)"
-          variant="link"
-      />
-    </div>
-  )
-}
-
-export default CaptionVariants

data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.md

@@ -1,3 +0,0 @@
-Wrap anchor tags around the kit to make it clickable.
-
-Link variant can only be applied to size `xs`.

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_options.html.erb

@@ -1,10 +0,0 @@
-<%= pb_rails("checkbox" , props: {
-  text: "Checkbox with Options",
-  input_options: {
-    id: "checkbox-id",
-    name: "checkbox-name",
-    value: "checkbox-value",
-    class: "checkbox-class",
-    checked: true
-  }
-}) %>

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx

@@ -1,130 +0,0 @@
-/* @flow */
-
-import React, { useEffect, useRef } from 'react'
-import { pbChart } from '../'
-import { globalProps } from '../utilities/globalProps'
-import classnames from 'classnames'
-import Highcharts from 'highcharts'
-
-import { buildAriaProps, buildDataProps } from '../utilities/props'
-
-type CircleChartProps = {
-  aria: Object,
-  chartData?: array,
-  children: Node,
-  className?: string,
-  colors: array,
-  data?: Object,
-  dataLabelHtml: string,
-  dataLabels: boolean,
-  headerFormat: string,
-  id?: string,
-  innerSize: "sm" | "md" | "lg" | "none",
-  legend: boolean,
-  maxPointSize: number,
-  minPointSize: number,
-  rounded: boolean,
-  startAngle: number,
-  style: string,
-  title: string,
-  tooltipHtml: string,
-  useHtml: boolean,
-  zMin: number,
-}
-
-const CircleChart = (props: CircleChartProps) => {
-  const {
-    aria = {},
-    chartData = [{}],
-    children,
-    className,
-    colors = [],
-    data = {},
-    dataLabelHtml = '<div>{point.name}</div>',
-    dataLabels = false,
-    headerFormat = null,
-    id,
-    innerSize = 'md',
-    legend = false,
-    maxPointSize = null,
-    minPointSize = null,
-    rounded = false,
-    startAngle = null,
-    style = 'pie',
-    title = '',
-    tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
-      '<b>{point.y}</b>',
-    useHtml = false,
-    zMin = null,
-  } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const innerSizes = { sm: '35%', md: '50%', lg: '85%', none: '0%' }
-  const innerSizeFormat = (size) => innerSizes[size]
-  const roundedBorderWidth = rounded ? 20 : null
-  const roundedBorderColor = rounded ? null : ''
-
-  // Runs first time component Renders
-  useEffect(() => {
-    const formattedChartData = chartData.map((obj) => {
-      obj.y = obj.value
-      delete obj.value
-      return obj
-    })
-
-    new pbChart('.selector', {
-      id,
-      colors,
-      borderColor: roundedBorderColor,
-      borderWidth: roundedBorderWidth,
-      chartData: formattedChartData,
-      title,
-      type: style,
-      showInLegend: legend,
-      dataLabelHtml,
-      dataLabels,
-      headerFormat,
-      tooltipHtml,
-      useHTML: useHtml,
-      minPointSize,
-      maxPointSize,
-      innerSize: innerSizeFormat(innerSize),
-      zMin,
-      startAngle,
-    })
-  }, [])
-
-  const componentDidMount = useRef(false)
-
-  // Doesn't run the first time but runs every subsequent render
-  useEffect(() => {
-    if (componentDidMount.current) {
-      Highcharts.charts.forEach((chart) => {
-        if (chart.renderTo.id === id) {
-          const updatedValueArray = chartData.map((obj) => {
-            return obj.value
-          })
-          chart.series[0].setData(updatedValueArray)
-        }
-      })
-    } else {
-      componentDidMount.current = true
-    }
-  }, [chartData])
-  return (
-    <div id={`wrapper-circle-chart-${id}`}>
-      <div
-          id={id}
-          {...ariaProps}
-          {...dataProps}
-          className={classnames('pb_circle_chart', globalProps(props), className)}
-      />
-      <If condition={children}>
-        <div className="pb-circle-chart-block">{children}</div>
-      </If>
-    </div>
-  )
-}
-
-export default CircleChart

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

@@ -1,39 +0,0 @@
-import React from 'react'
-import { CircleChart, Title } from '../../'
-
-const dataWithABlock = [
-  {
-    name: 'Waiting for Calls',
-    value: 41,
-  },
-  {
-    name: 'On Call',
-    value: 49,
-  },
-  {
-    name: 'After call',
-    value: 10,
-  },
-]
-
-const CircleChartBlock = () => (
-
-  <div>
-    <CircleChart
-        chartData={dataWithABlock}
-        id="chart-with-a-block"
-        innerSize="lg"
-        marginTop="xl"
-        rounded
-    >
-      <Title
-          size={1}
-          tag="div"
-      >
-        {'83'}
-      </Title>
-    </CircleChart>
-  </div>
-)
-
-export default CircleChartBlock

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

@@ -1,29 +0,0 @@
-import React from 'react'
-import { CircleChart } from '../../'
-
-const dataWithColors = [
-  {
-    name: 'Waiting for Calls',
-    value: 41,
-  },
-  {
-    name: 'On Call',
-    value: 49,
-  },
-  {
-    name: 'After call',
-    value: 10,
-  },
-]
-
-const CircleChartColors = () => (
-  <div>
-    <CircleChart
-        chartData={dataWithColors}
-        colors={['data-6', 'data-4', 'data-2']}
-        id="colors-example"
-    />
-  </div>
-)
-
-export default CircleChartColors

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

@@ -1,28 +0,0 @@
-import React from 'react'
-import { CircleChart } from '../../'
-
-const data = [
-  {
-    name: 'Waiting for Calls',
-    value: 41,
-  },
-  {
-    name: 'On Call',
-    value: 49,
-  },
-  {
-    name: 'After call',
-    value: 10,
-  },
-]
-
-const CircleChartDefault = () => (
-  <div>
-    <CircleChart
-        chartData={data}
-        id="circle-chart-default"
-    />
-  </div>
-)
-
-export default CircleChartDefault

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

@@ -1,117 +0,0 @@
-import React from 'react'
-import { CircleChart } from '../../'
-
-const dataFirst = [
-  {
-    name: 'Bugs',
-    value: 8,
-  },
-  {
-    name: 'Chores',
-    value: 1,
-  },
-  {
-    name: 'Stories',
-    value: 12,
-  },
-]
-
-const dataSecond = [
-  {
-    name: 'Queued',
-    value: 7,
-  },
-  {
-    name: 'In Progress',
-    value: 6,
-  },
-  {
-    name: 'Validation',
-    value: 3,
-  },
-  {
-    name: 'Done',
-    value: 6,
-  },
-]
-
-const dataThird = [
-  {
-    name: '1 Point Tickets',
-    value: 2,
-  },
-  {
-    name: '3 Point Tickets',
-    value: 5,
-  },
-  {
-    name: '5 Point Tickets',
-    value: 6,
-  },
-  {
-    name: '8 Point Tickets',
-    value: 3,
-  },
-  {
-    name: '13 Point Tickets',
-    value: 1,
-  },
-]
-const dataFourth = [
-  {
-    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,
-  },
-]
-
-const CircleChartInnerSizes = () => (
-  <div>
-    <CircleChart
-        chartData={dataFirst}
-        id="with-innersize-sm"
-        innerSize="sm"
-    />
-    <CircleChart
-        chartData={dataSecond}
-        id="with-innersize-md"
-        innerSize="md"
-    />
-    <CircleChart
-        chartData={dataThird}
-        id="with-innersize-lg"
-        innerSize="lg"
-    />
-    <CircleChart
-        chartData={dataFourth}
-        className="poop"
-        id="with-innersize-none "
-        innerSize="none"
-    />
-  </div>
-)
-
-export default CircleChartInnerSizes

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

@@ -1,53 +0,0 @@
-import React, { useState } from 'react'
-import { Button, CircleChart } from '../../'
-
-const CircleChartLiveData = () => {
-  const [data, setData] = useState([
-    {
-      name: 'Waiting for Calls',
-      value: 41,
-    },
-    {
-      name: 'On Call',
-      value: 49,
-    },
-    {
-      name: 'After call',
-      value: 10,
-    },
-  ])
-
-  const data2 = [
-    {
-      name: 'Waiting for Calls',
-      value: 48,
-    },
-    {
-      name: 'On Call',
-      value: 12,
-    },
-    {
-      name: 'After call',
-      value: 140,
-    },
-  ]
-
-  const updateValue = () => {
-    setData(data2)
-  }
-
-  return (
-    <div>
-      <Button
-          onClick={updateValue}
-          text="Update Value"
-      />
-      <CircleChart
-          chartData={data}
-          id="circle-chart-live-data"
-      />
-    </div>
-  )
-}
-
-export default CircleChartLiveData

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

@@ -1,30 +0,0 @@
-import React from 'react'
-import { CircleChart } from '../../'
-
-const dataRounded = [
-  {
-    name: 'Waiting for Calls',
-    value: 41,
-  },
-  {
-    name: 'On Call',
-    value: 49,
-  },
-  {
-    name: 'After call',
-    value: 10,
-  },
-]
-
-const CircleChartRounded = () => (
-  <div>
-    <CircleChart
-        chartData={dataRounded}
-        id="default-test-rounded"
-        innerSize="lg"
-        rounded
-    />
-  </div>
-)
-
-export default CircleChartRounded