playbook_ui 15.0.0.pre.alpha.PLAY2420atfirstcolumnborderfix10658 → 15.0.0.pre.alpha.PLAY2422fixedconftoastaccessibility10327

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-
-
-const chartData = [{
-  name: 'Number of Installations',
-  data: [1475, 200, 3000, 654, 656],
-}, {
-  type: 'spline',
-  name: 'Trend Line',
-  data: [1975, 600, 2500, 924, 500],
-  color: '#F9BB00',
-}]
-
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: "Bar Graph with Spline",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  legend: { enabled: true },
-};
-
-const PbBarGraphSpline = () => {
-
-  return (
-    <div>
-      <PbBarGraph
-          options={chartOptions}
-      />
-    </div>
-  )
-}
-
-export default PbBarGraphSpline

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.md

@@ -1,2 +0,0 @@
-A spline can be added by including a separate chart data with the `type: 'spline'` attribute.
-A color can also be specified for the spline.

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.html.erb

@@ -1,35 +0,0 @@
-<% chart_data = [{
-    name: 'Installation',
-    data: [1475, 200, 3000, 654, 656],
-  }, 
-  {
-    name: 'Manufacturing',
-    data: [1270, 800, 200, 454, 956],
-  }, {
-    name: 'Sales & Distribution',
-    data: [975, 1600, 1500, 924, 500],
-  }] %>
-
-<% chart_options = {
-  series: chart_data,
-  title: {
-    text: "Bar Graph with Stacked Columns",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  plotOptions: {
-    column: {
-        stacking: 'normal',
-        borderWidth: 0,
-    }
-  },
-  legend: { enabled: true },
-} %>
-
-<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx

@@ -1,51 +0,0 @@
-import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-
-
-const chartData = [{
-  name: 'Installation',
-  data: [1475, 200, 3000, 654, 656],
-}, 
-{
-  name: 'Manufacturing',
-  data: [1270, 800, 200, 454, 956],
-}, {
-  name: 'Sales & Distribution',
-  data: [975, 1600, 1500, 924, 500],
-}]
-
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: "Bar Graph with Stacked Columns",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  plotOptions: {
-    column: {
-        stacking: 'normal',
-        borderWidth: 0,
-    }
-  },
-  legend: { enabled: true },
-};
-
-
-const PbBarGraphStacked = () => {
-
-  return (
-    <div>
-      <PbBarGraph
-          options={chartOptions}
-      />
-    </div>
-  )
-}
-
-export default PbBarGraphStacked

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

@@ -1,27 +0,0 @@
-examples:
-
-  rails:
-  - pb_bar_graph_default: Default
-  - pb_bar_graph_legend: Legend
-  - pb_bar_graph_legend_position: Legend Position
-  - pb_bar_graph_height: Height
-  - pb_bar_graph_spline: Spline
-  - pb_bar_graph_colors: Color Overrides
-  - pb_bar_graph_stacked: Stacked
-  - pb_bar_graph_negative_numbers: Negative Numbers
-  - pb_bar_graph_secondary_y_axis: Secondary Y-Axis
-  - pb_bar_graph_horizontal: Horizontal Bar Graph
-
-
-  react:
-  - pb_bar_graph_default: Default
-  - pb_bar_graph_legend: Legend
-  - pb_bar_graph_legend_position: Legend Position
-  - pb_bar_graph_legend_non_clickable: Legend Non Clickable
-  - pb_bar_graph_height: Height
-  - pb_bar_graph_spline: Spline
-  - pb_bar_graph_colors: Color Overrides
-  - pb_bar_graph_stacked: Stacked
-  - pb_bar_graph_negative_numbers: Negative Numbers
-  - pb_bar_graph_secondary_y_axis: Secondary Y-Axis
-  - pb_bar_graph_horizontal: Horizontal Bar Graph

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

@@ -1,11 +0,0 @@
-export { default as PbBarGraphDefault } from './_pb_bar_graph_default.jsx'
-export { default as PbBarGraphLegend } from './_pb_bar_graph_legend.jsx'
-export { default as PbBarGraphLegendPosition } from './_pb_bar_graph_legend_position.jsx'
-export { default as PbBarGraphLegendNonClickable } from './_pb_bar_graph_legend_non_clickable.jsx'
-export { default as PbBarGraphHeight } from './_pb_bar_graph_height.jsx'
-export { default as PbBarGraphSpline } from './_pb_bar_graph_spline.jsx'
-export { default as PbBarGraphColors } from './_pb_bar_graph_colors.jsx'
-export { default as PbBarGraphStacked } from './_pb_bar_graph_stacked.jsx'
-export { default as PbBarGraphNegativeNumbers } from './_pb_bar_graph_negative_numbers.jsx'
-export { default as PbBarGraphSecondaryYAxis } from './_pb_bar_graph_secondary_y_axis.jsx'
-export { default as PbBarGraphHorizontal } from './_pb_bar_graph_horizontal.jsx'

data/app/pb_kits/playbook/pb_pb_bar_graph/pbBarGraphTheme.ts

@@ -1,106 +0,0 @@
-import colors from '../tokens/exports/_colors.module.scss'
-import typography from '../tokens/exports/_typography.module.scss'
-
-const barGraphTheme = {
-    title: {
-        text: "",
-        style: {
-            color: colors.text_lt_default,
-            fontFamily: typography.font_family_base,
-            fontWeight: typography.bold,
-            fontSize: typography.heading_3,
-        },
-    },
-    subtitle: {
-        text: "",
-        style: {
-            fontFamily: typography.font_family_base,
-            color: colors.text_lt_light,
-            fontWeight: typography.regular,
-            fontSize: typography.text_base,
-        },
-    },
-    chart: {
-        type: "column",
-    },
-    tooltip: {
-        backgroundColor: {
-            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-            stops: [
-                [0, colors.bg_dark],
-                [1, colors.bg_dark],
-            ],
-        },
-        style: {
-            fontFamily: typography.font_family_base,
-            color: colors.text_dk_default,
-            fontWeight: typography.regular,
-            fontSize: typography.text_smaller,
-        },
-    },
-    colors: [
-        colors.data_1,
-        colors.data_2,
-        colors.data_3,
-        colors.data_4,
-        colors.data_5,
-        colors.data_6,
-        colors.data_7,
-    ],
-    credits: { enabled: false },
-    legend: { 
-        enabled: false, 
-        itemStyle: {
-            color: colors.text_lt_light,
-            fill: colors.text_lt_light,
-            fontSize: typography.text_smaller,
-        },
-     },
-    xAxis: {
-        gridLineWidth: 0,
-        lineColor: colors.border_light,
-        tickColor: colors.border_light,
-        labels: {
-            style: {
-                fontFamily: typography.font_family_base,
-                color: colors.text_lt_lighter,
-                fontWeight: typography.bold,
-                fontSize: typography.text_smaller,
-            },
-        },
-        title: {
-            style: {
-                color: colors.text_lt_default,
-                fontFamily: typography.font_family_base,
-                fontWeight: typography.regular,
-                fontSize: typography.heading_4,
-            },
-        },
-    },
-    yAxis: {
-        alternateGridColor: undefined as string | undefined,
-        minorTickInterval: null as number | null,
-        gridLineColor: colors.border_light,
-        minorGridLineColor: colors.border_light,
-        lineWidth: 0,
-        tickWidth: 0,
-        labels: {
-            style: {
-                fontFamily: typography.font_family_base,
-                color: colors.text_lt_lighter,
-                fontWeight: typography.bold,
-                fontSize: typography.text_smaller,
-            },
-        },
-        title: {
-            style: {
-                fontFamily: typography.font_family_base,
-                color: colors.text_lt_lighter,
-                fontWeight: typography.bold,
-                fontSize: typography.text_smaller,
-            },
-        },
-    },
-}
-
-export default barGraphTheme;

data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.html.erb

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

data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.rb

@@ -1,28 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbPbBarGraph
-    class PbBarGraph < ::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_bar_graph")
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_pb_bar_graph/pbbargraph.test.jsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { render, screen } from '../utilities/test-utils';
-import PbBarGraph from './_pb_bar_graph';
-
-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 testId = 'bargraph1';
-
-test('bargraph uses exact classname', () => {
-  render(
-    <PbBarGraph
-        className='super_important_class'
-        data={{ testid: testId }}
-        id='bar-default'
-    />
-  );
- 
-  const kit = screen.getByTestId(testId);
-  expect(kit).toHaveClass('super_important_class');
-});

data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.scss

@@ -1,3 +0,0 @@
-.pb_pb_circle_chart {
-
-}

data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx

@@ -1,62 +0,0 @@
-
-import React, { useMemo } from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import pbCircleGraphTheme from './pbCircleChartTheme'
-import { globalProps } from '../utilities/globalProps'
-
-type PbCircleChartProps = {
-  aria?: { [key: string]: string },
-  className?: string,
-  data?: { [key: string]: string },
-  id?: string,
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
-  options: Record<string, unknown>
-}
-
-const PbCircleChart = (props: PbCircleChartProps) => {
-  const {
-    aria = {},
-  className,
-  data = {},
-  id,
-  htmlOptions = {},
-  options
-  } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions);
-  const classes = classnames(buildCss('pb_pb_circle_chart'), globalProps(props), className)
-
-  const mergedOptions = useMemo(() => {
-    if (!options || typeof options !== "object") {
-      // eslint-disable-next-line no-console
-      console.error("❌ Invalid options passed to <PbCircleChart />", options)
-      return {}
-    }
-
-    return Highcharts.merge({}, pbCircleGraphTheme, options)
-  }, [options])
-
-  return (
-
-    <div>
-      <HighchartsReact
-          containerProps={{
-                  className: classnames(globalProps, className),
-                  id: id,
-                  ...ariaProps,
-                  ...dataProps,
-                  ...htmlProps
-                }}
-          highcharts={Highcharts}
-          options={mergedOptions}
-      />
-    </div>
-  )
-}
-
-export default PbCircleChart

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

@@ -1,31 +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',
-    }],
-  } %>
-
-<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

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

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

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

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

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

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

@@ -1,5 +0,0 @@
-Custom tooltip formatting is configured through the tooltip object in the options passed to the kit: 
-`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.