playbook_ui 15.8.0.pre.rc.1 → 16.0.0

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts

@@ -1,173 +0,0 @@
-import colors from '../tokens/exports/_colors.module.scss'
-import typography from '../tokens/exports/_typography.module.scss'
-
-import { ThemeProps } from './themeTypes'
-
-const highchartsTheme: ThemeProps = {
-  lang: {
-    thousandsSep: ',',
-  },
-  colors: [
-    colors.data_1,
-    colors.data_2,
-    colors.data_3,
-    colors.data_4,
-    colors.data_5,
-    colors.data_6,
-    colors.data_7,
-  ],
-  chart: {
-    borderWidth: 0,
-    borderRadius: 0,
-    plotBackgroundColor: undefined,
-    plotShadow: false,
-    plotBorderWidth: 0,
-  },
-  title: {
-    style: {
-      color: colors.text_lt_default,
-      fontFamily: typography.font_family_base,
-      fontWeight: typography.bold,
-      fontSize: typography.heading_3,
-    },
-  },
-  subtitle: {
-    style: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_lt_light,
-      fontWeight: typography.regular,
-      fontSize: typography.text_base,
-    },
-  },
-  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,
-    minorTickInterval: 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,
-      },
-    },
-  },
-  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,
-    },
-  },
-  tooltip: {
-    backgroundColor: {
-      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-      stops: [
-        [0, colors.bg_dark],
-        [1, colors.bg_dark],
-      ],
-    },
-    shadow: false,
-    borderWidth: 0,
-    borderRadius: 10,
-    style: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_dk_default,
-      fontWeight: typography.regular,
-      fontSize: typography.text_smaller,
-    },
-  },
-  // specific to gauge
-  // unfilled gauge color
-  pane: {
-    background: {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment 
-      // @ts-ignore
-      borderColor: colors.border_light, 
-    },
-  },
-
-  plotOptions: {
-    series: {
-      threshold: null,
-    },
-    // PIE STYLES
-    pie: {
-      colors: [
-        colors.data_1,
-        colors.data_2,
-        colors.data_3,
-        colors.data_4,
-        colors.data_5,
-        colors.data_6,
-        colors.data_7,
-      ],
-      dataLabels: {
-        style: {
-          fontFamily: typography.font_family_base,
-          fontSize: typography.text_smaller,
-          color: colors.text_lt_light,
-          fontWeight: typography.regular,
-          textOutline: '2px $white',
-        },
-      },
-    },
-
-    // LINE CHART STYLES
-    line: {
-      dataLabels: {
-        color: '#CCC',
-      },
-      marker: {
-        lineColor: '#333',
-      },
-    }
-  },
-  credits: {
-    enabled: false
-  },
-}
-
-export { highchartsTheme }

data/app/pb_kits/playbook/pb_dashboard/themeTypes.ts

@@ -1,20 +0,0 @@
-import { Options, LegendOptions } from "highcharts";
-export interface ThemeProps
-  extends Pick<
-    Options,
-    | "credits"
-    | "chart"
-    | "colors"
-    | "lang"
-    | "title"
-    | "subtitle"
-    | "xAxis"
-    | "yAxis"
-    | "legend"
-    | "tooltip"
-    | "pane"
-    | "plotOptions"
-  > {
-  colorKey?: string;
-  legend?: LegendOptions;
-}

data/app/pb_kits/playbook/pb_gauge/_gauge.scss

@@ -1,49 +0,0 @@
-@import "../tokens/colors";
-
-.pb_gauge_kit {
-
-  .fix {
-    fill: $text_lt_default;
-    stroke: none;
-
-    &.dark {
-      fill: $text_dk_default;
-    }
-  }
-
-  .suffix {
-    fill: $text_lt_light;
-    stroke: none;
-    font: $regular $font_larger $font_family_base;
-
-    &.dark {
-      fill: $text_dk_light;
-    }
-  }
-  .prefix {
-    fill: $text_lt_light;
-    stroke: none;
-    font: $regular $font_base $font_family_base;
-
-    &.dark {
-      fill: $text_dk_light;
-    }
-  }
-
-  rect.highcharts-background {
-    fill: #0000 !important;
-  }
-
-  .gauge-pane {
-    stroke-linejoin: round;
-  }
-
-  &.dark {
-    color: $text_dk_default;
-
-    .pb_title_kit_size_1,
-    .pb_caption_kit_xs {
-        color: $text_dk_light;
-    }
-  }
-}

data/app/pb_kits/playbook/pb_gauge/_gauge.tsx

@@ -1,215 +0,0 @@
-import React, { useState, useEffect } from "react";
-import classnames from "classnames";
-import HighchartsReact from "highcharts-react-official";
-import Highcharts from "highcharts";
-import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
-import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
-import mapColors from "../pb_dashboard/pbChartsColorsHelper";
-import highchartsMore from "highcharts/highcharts-more";
-import solidGauge from "highcharts/modules/solid-gauge";
-import defaultColors from "../tokens/exports/_colors.module.scss";
-import typography from "../tokens/exports/_typography.module.scss";
-
-import { deprecatedKitWarning } from "../utilities/deprecated";
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { globalProps } from "../utilities/globalProps";
-import { GenericObject } from "../types";
-import { merge } from '../utilities/object' 
-
-type GaugeProps = {
-  aria: { [key: string]: string };
-  className?: string;
-  chartData?: { name: string; value: number[] | number }[];
-  customOptions?: Partial<Highcharts.Options>;
-  dark?: boolean;
-  data?: { [key: string]: string };
-  disableAnimation?: boolean;
-  fullCircle?: boolean;
-  height?: string;
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  id?: string;
-  max?: number;
-  min?: number;
-  prefix?: string;
-  showLabels?: boolean;
-  style?: string;
-  suffix?: string;
-  title?: string;
-  tooltipHtml?: string;
-  colors: string[];
-  minorTickInterval?: number;
-  circumference: number[];
-};
-
-const Gauge = ({
-  aria = {},
-  chartData,
-  customOptions = {},
-  dark = false,
-  data = {},
-  disableAnimation = false,
-  fullCircle = false,
-  height = null,
-  htmlOptions = {},
-  id,
-  max = 100,
-  min = 0,
-  prefix = "",
-  showLabels = false,
-  style = "solidgauge",
-  suffix = "",
-  title = "",
-  tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
-    "<b>{point.y}</b>",
-  colors = [],
-  minorTickInterval = null,
-  circumference = fullCircle ? [0, 360] : [-100, 100],
-  ...props
-}: GaugeProps): React.ReactElement => {
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions);
-  highchartsMore(Highcharts);
-  solidGauge(Highcharts);
-  const setupTheme = () => {
-    dark
-      ? Highcharts.setOptions(highchartsDarkTheme)
-      : Highcharts.setOptions(highchartsTheme);
-  };
-  setupTheme();
-
-  //set tooltip directly to prevent being overriden by Highcharts defaults
-  Highcharts.setOptions({
-    tooltip: {
-      pointFormat: tooltipHtml,
-      followPointer: true,
-    },
-  });
-
-  const css = buildCss({
-    pb_gauge_kit: true,
-  });
-
-  const [options, setOptions] = useState({});
-
-  useEffect(() => {
-    const formattedChartData = chartData.map((obj: GenericObject) => {
-      obj.y = obj.value;
-      delete obj.value;
-      return obj;
-    });
-
-    const staticOptions = {
-      chart: {
-        events: {
-          load() {
-            setTimeout(this.reflow.bind(this), 0);
-          },
-        },
-        type: style,
-        height: height,
-      },
-      title: {
-        text: title,
-      },
-      yAxis: {
-        min: min,
-        max: max,
-        lineWidth: 0,
-        tickWidth: 0,
-        minorTickInterval: minorTickInterval,
-        tickAmount: 2,
-        tickPositions: [min, max],
-        labels: {
-          y: 26,
-          enabled: showLabels,
-        },
-      },
-      credits: false,
-      series: [
-        {
-          data: formattedChartData,
-        },
-      ],
-      pane: {
-        center: ["50%", "50%"],
-        size: "90%",
-        startAngle: circumference[0],
-        endAngle: circumference[1],
-        background: {
-          borderWidth: 20,
-          innerRadius: "90%",
-          outerRadius: "90%",
-          shape: "arc",
-          className: "gauge-pane",
-        },
-      },
-      colors:
-        colors !== undefined && colors.length > 0
-          ? mapColors(colors)
-          : highchartsTheme.colors,
-      plotOptions: {
-        series: {
-          animation: !disableAnimation,
-        },
-        solidgauge: {
-          borderColor:
-            colors !== undefined && colors.length === 1
-              ? mapColors(colors).join()
-              : highchartsTheme.colors[0],
-          borderWidth: 20,
-          radius: 90,
-          innerRadius: "90%",
-          dataLabels: {
-            borderWidth: 0,
-            color: defaultColors.text_lt_default,
-            enabled: true,
-            format:
-              `<span class="prefix${dark ? " dark" : ""}">${prefix}</span>` +
-              `<span class="fix${dark ? " dark" : ""}">{y:,f}</span>` +
-              `<span class="suffix${dark ? " dark" : ""}">${suffix}</span>`,
-            style: {
-              fontFamily: typography.font_family_base,
-              fontWeight: typography.regular,
-              fontSize: typography.heading_2,
-            },
-            y: -26,
-          },
-        },
-      },
-    };
-
-    setOptions(merge(staticOptions, customOptions));
-
-    if (document.querySelector(".prefix")) {
-      document.querySelectorAll(".prefix").forEach((prefix) => {
-        prefix.setAttribute("y", "28");
-      });
-      document
-        .querySelectorAll(".fix")
-        .forEach((fix) => fix.setAttribute("y", "38"));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chartData]);
-
-    useEffect(() => {
-    // Warn about deprecated kit
-    deprecatedKitWarning('Gauge', 'Please use "PbGaugeChart" instead.');
-  }, []);
-
-  return (
-    <HighchartsReact
-        containerProps={{
-        className: classnames(css, globalProps(props)),
-        id: id,
-        ...ariaProps,
-        ...dataProps,
-        ...htmlProps,
-      }}
-        highcharts={Highcharts}
-        options={options}
-    />
-  );
-};
-
-export default Gauge;

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 %>

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

@@ -1,146 +0,0 @@
-import React from "react";
-
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import Card from '../../pb_card/_card'
-import Caption from '../../pb_caption/_caption'
-import Body from '../../pb_body/_body'
-import SectionSeparator from '../../pb_section_separator/_section_separator'
-import Title from '../../pb_title/_title'
-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'
-import typography from '../../tokens/exports/_typography.module.scss'
-
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
-
-const data = [{ name: "Name", y: 10 }];
-
-const baseOptions = {
-  series: [{ data: data }],
-  chart: {
-    height: "150",
-  },
-  plotOptions: {
-    series: {
-      animation: false,
-    },
-    solidgauge: {
-      dataLabels: {
-        format:
-          `<span class="fix">{y:,f}</span>` +
-          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">%</span>`,
-      },
-    },
-  },
-};
-
-const options = Highcharts.merge({}, gaugeTheme, baseOptions);
-
-const GaugeComplex = (props) => (
-  <Flex
-      gap="sm"
-      padding="xl"
-      wrap
-      {...props}
-  >
-    <FlexItem
-        flex={1}
-        grow
-        {...props}
-    >
-      <Card
-          maxWidth="xs"
-          padding="md"
-          {...props}
-      >
-        <Title
-            paddingBottom="sm"
-            size={4}
-            text="Abandoned Calls"
-            {...props}
-        />
-        <Flex
-            align="stretch"
-            {...props}
-        >
-          <Flex
-              marginRight="sm"
-              orientation="column"
-              {...props}
-          >
-            <Body
-                color="light"
-                paddingBottom="sm"
-                text="Total Abandoned"
-                {...props}
-            />
-            <Flex
-                align="baseline"
-                paddingBottom="xs"
-                {...props}
-            >
-              <Title
-                  size={1}
-                  text="39"
-                  {...props}
-              />
-              <Title
-                  color="light"
-                  size={3}
-                  text="calls"
-                  {...props}
-              />
-            </Flex>
-            <Caption
-                size="xs"
-                text="of 390"
-                {...props}
-            />
-          </Flex>
-
-          <SectionSeparator
-              alignSelf="stretch"
-              marginRight="sm"
-              orientation="vertical"
-              {...props}
-          />
-
-          <Flex
-              orientation="column"
-              wrap
-              {...props}
-          >
-              <Body
-                  color="light"
-                  text="% Abandoned"
-                  {...props}
-              />
-            <Flex
-                wrap
-                {...props}
-            >
-              <FlexItem
-                  fixedSize="150px"
-                  overflow="hidden"
-                  shrink
-                  {...props}
-              >
-                <HighchartsReact
-                    highcharts={Highcharts}
-                    options={options}
-                />
-               </FlexItem>
-            </Flex>
-          </Flex>
-        </Flex>
-      </Card>
-    </FlexItem>
-  </Flex>
-);
-
-export default GaugeComplex;

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

@@ -1 +0,0 @@
-We are able to wrap our Gauge kits within multiple other Flex and Card components.

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

@@ -1 +0,0 @@
-We are able to wrap the Highcharts Gauge kit within Playbook kits (such as Flex and Card components).