playbook_ui 15.0.0.pre.alpha.PLAY2316advancedtablerightsidedoubleborder10726 → 15.0.0.pre.alpha.PLAY2361datepickerarrownav10322

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

@@ -1,144 +0,0 @@
-import React from "react";
-import { PbCircleChart } from "playbook-ui";
-
-const dataFirst = [
-  {
-    name: 'Bugs',
-    y: 8,
-  },
-  {
-    name: 'Chores',
-    y: 1,
-  },
-  {
-    name: 'Stories',
-    y: 12,
-  },
-]
-
-const dataSecond = [
-  {
-    name: 'Queued',
-    y: 7,
-  },
-  {
-    name: 'In Progress',
-    y: 6,
-  },
-  {
-    name: 'Validation',
-    y: 3,
-  },
-  {
-    name: 'Done',
-    y: 6,
-  },
-]
-
-const dataThird = [
-  {
-    name: '1 Point Tickets',
-    y: 2,
-  },
-  {
-    name: '3 Point Tickets',
-    y: 5,
-  },
-  {
-    name: '5 Point Tickets',
-    y: 6,
-  },
-  {
-    name: '8 Point Tickets',
-    y: 3,
-  },
-  {
-    name: '13 Point Tickets',
-    y: 1,
-  },
-]
-
-const dataFourth = [
-  {
-    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 PbCircleChartInnerSizes= (props) => {
-const chartOptionsSmall = {
-    series: [{ 
-      data: dataFirst,
-      innerSize: '35%'
-    }],
-  }
-
-  const chartOptionsMedium = {
-    series: [{ 
-      data: dataSecond,
-      innerSize: '50%'
-    }],
-  }
-
-  const chartOptionsLarge = {
-    series: [{ 
-      data: dataThird,
-      innerSize: '85%'
-    }],
-  }
-
-  const chartOptionsNone = {
-    series: [{ 
-      data: dataFourth,
-      innerSize: '0%'
-    }],
-  }
-
-  return (
-    <div>
-      <PbCircleChart
-          options={chartOptionsSmall}
-          {...props}
-      />
-      <PbCircleChart
-          options={chartOptionsMedium}
-          {...props}
-      />
-      <PbCircleChart
-          options={chartOptionsLarge}
-          {...props}
-      />
-      <PbCircleChart
-          options={chartOptionsNone}
-          {...props}
-      />
-    </div>
-  );
-};
-
-
-export default PbCircleChartInnerSizes;

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

@@ -1,60 +0,0 @@
-import React, { useState } from "react";
-import { PbCircleChart, Button } from "playbook-ui";
-
-const chartData = [
-  {
-    name: "Waiting for Calls",
-    y: 41,
-  },
-  {
-    name: "On Call",
-    y: 49,
-  },
-  {
-    name: "After Call",
-    y: 10,
-  },
-];
-
-const chartData2 = [
-  {
-    name: "Waiting for Calls",
-    y: 48,
-  },
-  {
-    name: "On Call",
-    y: 12,
-  },
-  {
-    name: "After Call",
-    y: 140,
-  },
-];
-
-
-const PbCircleChartLiveData = (props) => {
-
-  const [data, setData] = useState(chartData);
-
-    const updateValue = () => {
-    setData(chartData2)
-  }
-    const chartOptions = {
-    series: [{ data: data }],
-  }
-
-  return (
-    <div>
-      <Button
-          onClick={updateValue}
-          text="Update Value"
-      />
-      <PbCircleChart
-          options={chartOptions}
-          {...props}
-      />
-    </div>
-  );
-};
-
-export default PbCircleChartLiveData;

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

@@ -1,24 +0,0 @@
-<% 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',
-    }],
-  } %>
-
-<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>

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

@@ -1,42 +0,0 @@
-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 PbCircleChartRounded = (props) => {
-const chartOptions = {
-    series: [{ data: data }],
-    plotOptions: {
-      pie: {
-        borderColor: null,
-        borderWidth: 20,
-        innerSize: '100%',
-      },
-    },
-  };
-
-  return (
-    <div>
-      <PbCircleChart
-          options={chartOptions}
-          {...props}
-      />
-    </div>
-  );
-};
-
-export default PbCircleChartRounded;

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

@@ -1,38 +0,0 @@
-<% 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 }],
-  title: { text: "Active Users on Social Media" },
-  } %>
-
-
-<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>

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

@@ -1,52 +0,0 @@
-import React from "react";
-import { PbCircleChart } from "playbook-ui";
-
-const 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,
-  },
-]
-
-
-const PbCircleChartWithTitle = (props) => {
-const chartOptions = {
-    title: { text: "Active Users on Social Media" },
-    series: [{ data: data }],
-  };
-
-  return (
-    <div>
-      <PbCircleChart
-          options={chartOptions}
-          {...props}
-      />
-    </div>
-  );
-};
-
-export default PbCircleChartWithTitle;

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

@@ -1,29 +0,0 @@
-examples:
-  
-  rails:
-  - pb_circle_chart_default: Default
-  - pb_circle_chart_rounded: Rounded Corners
-  - pb_circle_chart_block_content: Accepts Any Block
-  - pb_circle_chart_color_overrides: Color Overrides
-  - pb_circle_chart_data_with_labels: Data with Labels
-  - pb_circle_chart_data_with_legend: Data with Legend
-  - pb_circle_chart_data_legend_position: Legend Position
-  - pb_circle_chart_with_title: With Title
-  - pb_circle_chart_inner_sizes: Inner Circle Size Options
-  - pb_circle_chart_custom_tooltip: Tooltip Customization
-
-  
-  react:
-  - pb_circle_chart_default: Default
-  - pb_circle_chart_live_data: Live Data
-  - pb_circle_chart_rounded: Rounded Corners
-  - pb_circle_chart_block_content: Accepts Any Block
-  - pb_circle_chart_color_overrides: Color Overrides
-  - pb_circle_chart_data_with_labels: Data with Labels
-  - pb_circle_chart_data_with_legend: Data with Legend
-  - pb_circle_chart_data_legend_position: Legend Position
-  - pb_circle_chart_with_title: With Title
-  - pb_circle_chart_inner_sizes: Inner Circle Size Options
-  - pb_circle_chart_custom_tooltip: Tooltip Customization
-  
-  

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

@@ -1,11 +0,0 @@
-export { default as PbCircleChartDefault } from './_pb_circle_chart_default.jsx'
-export { default as PbCircleChartLiveData } from './_pb_circle_chart_live_data.jsx'
-export { default as PbCircleChartRounded } from './_pb_circle_chart_rounded.jsx'
-export { default as PbCircleChartBlockContent } from './_pb_circle_chart_block_content.jsx'
-export { default as PbCircleChartColorOverrides } from './_pb_circle_chart_color_overrides.jsx'
-export { default as PbCircleChartDataWithLabels } from './_pb_circle_chart_data_with_labels.jsx'
-export { default as PbCircleChartDataWithLegend } from './_pb_circle_chart_data_with_legend.jsx'
-export { default as PbCircleChartDataLegendPosition } from './_pb_circle_chart_data_legend_position.jsx'
-export { default as PbCircleChartWithTitle } from './_pb_circle_chart_with_title.jsx'
-export { default as PbCircleChartInnerSizes } from './_pb_circle_chart_inner_sizes.jsx'
-export { default as PbCircleChartCustomTooltip } from './_pb_circle_chart_custom_tooltip.jsx'

data/app/pb_kits/playbook/pb_pb_circle_chart/pbCircleChartTheme.ts

@@ -1,88 +0,0 @@
-import colors from '../tokens/exports/_colors.module.scss'
-import typography from '../tokens/exports/_typography.module.scss'
-
-const pbCircleChartTheme = {
-  title: {
-    text: "",
-    style: {
-      color: colors.text_lt_default,
-      fontFamily: typography.font_family_base,
-      fontWeight: typography.bold,
-      fontSize: typography.heading_3,
-    },
-  },
-  chart: {
-    type: "pie",
-  },
-  tooltip: {
-    backgroundColor: {
-      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-      stops: [
-        [0, colors.bg_dark],
-        [1, colors.bg_dark],
-      ],
-    },
-    pointFormat:
-      '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
-      "<b>{point.y}</b>",
-    followPointer: true,
-    shadow: false,
-    borderWidth: 0,
-    borderRadius: 10,
-    style: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_dk_default,
-      fontWeight: typography.regular,
-      fontSize: typography.text_smaller,
-    },
-  },
-  plotOptions: {
-    pie: {
-      dataLabels: {
-        enabled: false,
-        connectorShape: "straight",
-        connectorWidth: 3,
-        format: "<div>{point.name}</div>",
-        style: {
-          fontFamily: typography.font_family_base,
-          fontSize: typography.text_smaller,
-          color: colors.text_lt_light,
-          fontWeight: typography.regular,
-          textOutline: '2px $white',
-        },
-      },
-      innerSize: '50%',
-      borderColor: "",
-      borderWidth: null as number | null,
-      colors: [
-        colors.data_1,
-        colors.data_2,
-        colors.data_3,
-        colors.data_4,
-        colors.data_5,
-        colors.data_6,
-        colors.data_7,
-      ],
-    },
-  },
-  legend: {
-    layout: 'horizontal',
-    align: 'center',
-    verticalAlign: 'bottom',
-    itemStyle: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_lt_light,
-      fontWeight: typography.regular,
-      fontSize: typography.text_smaller,
-    },
-    itemHoverStyle: {
-      color: colors.text_lt_default,
-    },
-    itemHiddenStyle: {
-      color: colors.text_lt_lighter,
-    },
-  },
-  credits: { enabled: false }
-}
-
-export default pbCircleChartTheme;

data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.html.erb

@@ -1 +0,0 @@
-<%= react_component('PbCircleChart', object.react_props) %>

data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.rb

@@ -1,28 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbPbCircleChart
-    class PbCircleChart < ::Playbook::KitBase
-      prop :options, default: {}
-      prop :container_props, default: {}
-
-      def react_props
-        {
-          options: options,
-          containerProps: container_props_hash,
-        }
-      end
-
-      def container_props_hash
-        container_props.merge({
-                                id: id,
-                                className: classname,
-                              }).compact
-      end
-
-      def classname
-        generate_classname("pb_pb_circle_chart")
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx

@@ -1,51 +0,0 @@
-import React from 'react'
-import { render, screen } from '../utilities/test-utils'
-
-import { PbCircleChart } from 'playbook-ui'
-
-beforeEach(() => {
-  // Silences error logs within the test suite.
-  jest.spyOn(console, 'error');
-  jest.spyOn(console, 'warn');
-  console.error.mockImplementation(() => {});
-  console.warn.mockImplementation(() => {});
-});
-
-afterEach(() => {
-  console.error.mockRestore();
-  console.warn.mockRestore();
-});
-
-const chartOptions = {
-  series: [
-    {
-      data: [
-        {
-          name: "Waiting for Calls",
-          y: 41,
-        },
-        {
-          name: "On Call",
-          y: 49,
-        },
-        {
-          name: "After Call",
-          y: 10,
-        },
-      ],
-    },
-  ],
-};
-
-const testId = 'pbcirclechart1';
-
-test('Kit to exist', () => {
-  render(
-  <PbCircleChart 
-      data={{testid: testId}} 
-      options={chartOptions} 
-  />
-)
-  expect(screen.getByTestId(testId)).toBeInTheDocument()
-})
-