playbook_ui 11.11.0 → 11.12.1.pre.alpha.charts1

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.md

@@ -1,2 +1,4 @@
 The dialog kit also supports customizing your dialog with a [compound component](https://kentcdodds.com/blog/compound-components-with-react-hooks) structure.
-This allows for greater flexibility and more complex dialogs.
+This allows for greater flexibility and more complex dialogs.
+
+For the Rails version, when using the kit as a compound component it is necessary to pass the same value as the id for the dialog, the dialog header and the dialog footer in order for the opening and closing of the dialog to function as expected.

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-1"} }) %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-1", 
+    size: "sm", 
+    title: "This is a header", 
+    text: "This is a dialog.", 
+    cancel_button: "Cancel", 
+    confirm_button: "Confirm", 
+    confirm_button_id: "confirm-button-1"
+}) %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.md

@@ -0,0 +1,3 @@
+For the Rails version of the dialog kit, the clickable element being used to open the dialog must be given a `open-dialog` data attribute with a value that is the same as the id being given to the dialog itself. See code example below to see this in action.
+
+Additionally, both the cancel button and the confirm button have optional id props which can be used to pass in a custom id to allow developers to target that button with custom javascript if needed (`confirm_button_id` and `cancel_button_id`).

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.html.erb

@@ -0,0 +1,29 @@
+<%= pb_rails("button", props: { text: "Small Dialog", data:{"open-dialog": "dialog-sm"} }) %>
+<%= pb_rails("button", props: { text: "Medium Dialog", data:{"open-dialog": "dialog-md"} }) %>
+<%= pb_rails("button", props: { text: "Large Dialog", data:{"open-dialog": "dialog-lg"} }) %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-sm", 
+    size: "sm", 
+    title: "This is a header",
+    text: "I am a small dialog",
+    cancel_button: "Cancel", 
+    confirm_button: "Confirm", 
+   }) %>
+
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-md", 
+    size: "md",
+    title: "This is a header",
+    text: "I am a medium dialog",
+    cancel_button: "Cancel", confirm_button: "Confirm", 
+     })  %>
+     
+<%= pb_rails("dialog", props: { 
+    id:"dialog-lg", size: "lg",
+    title: "This is a header",
+    text: "I am a large dialog",
+    cancel_button: "Cancel", 
+    confirm_button: "Confirm"
+     }) %>

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

@@ -1,6 +1,9 @@
 examples:
 
   rails:
+  - dialog_default: Simple
+  - dialog_compound_components: Complex
+  - dialog_sizes: Sizes
 
   react:
   - dialog_default: Simple

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

@@ -12,4 +12,8 @@
   rect.highcharts-background {
     fill: #0000 !important;
   }
+
+  .gauge-pane {
+    stroke-linejoin: round;
+  }
 }

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

@@ -0,0 +1,213 @@
+import React, { useState, useEffect, useRef } 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.scss";
+import typography from "../tokens/exports/_typography.scss";
+
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
+import { globalProps } from "../utilities/globalProps";
+
+type GaugeProps = {
+  aria: { [key: string]: string };
+  className?: string;
+  chartData?: { name: string; value: number[] | number }[];
+  dark?: Boolean;
+  data?: { [key: string]: string };
+  disableAnimation?: boolean;
+  fullCircle?: boolean;
+  height?: string;
+  id?: string;
+  max?: number;
+  min?: number;
+  prefix?: string;
+  showLabels?: boolean;
+  style?: string;
+  suffix?: string;
+  title?: string;
+  tooltipHtml?: string;
+  colors: string[];
+  minorTickInterval: any;
+  circumference: number[];
+};
+
+const Gauge = ({
+  aria = {},
+  className,
+  chartData,
+  dark = false,
+  data = {},
+  disableAnimation = false,
+  fullCircle = false,
+  height = null,
+  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) => {
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  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 componentDidMount = useRef(false);
+  const [options, setOptions] = useState({});
+
+  useEffect(() => {
+    const formattedChartData = chartData.map((obj: any) => {
+      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">${prefix}</span>` +
+              '<span class="fix">{y:,f}</span>' +
+              `<span class="suffix">${suffix}</span>`,
+            style: {
+              fontFamily: typography.font_family_base,
+              fontWeight: typography.regular,
+              fontSize: typography.heading_2,
+            },
+            y: -26,
+          },
+        },
+      },
+    };
+
+    setOptions({ ...staticOptions });
+
+    if (document.querySelector(".prefix")) {
+      document.querySelectorAll(".prefix").forEach((prefix) => {
+        prefix.setAttribute("y", "28");
+      });
+      document
+        .querySelectorAll(".fix")
+        .forEach((fix) => fix.setAttribute("y", "38"));
+    }
+
+    if (componentDidMount.current) {
+      Highcharts.charts.forEach((chart: any) => {
+        if (chart && chart.renderTo.id === id) {
+          chart.series[0].setData([chartData[0].value]);
+          chart.series[0].data[0].name = chartData[0].name;
+        }
+      });
+    } else {
+      componentDidMount.current = true;
+    }
+  }, [chartData]);
+
+  return (
+    <HighchartsReact
+      containerProps={{
+        className: classnames(css, globalProps(props)),
+        id: id,
+        ...ariaProps,
+        ...dataProps,
+      }}
+      highcharts={Highcharts}
+      options={options}
+    />
+  );
+};
+
+export default Gauge;

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

@@ -19,7 +19,7 @@
               <%= pb_rails("gauge", props: {
                 chart_data: [{ name: "Name", value: 10 }],
                 disable_animation: true,
-                height: '100%',
+                height: '150',
                 id: "gauge-complex",
                 suffix: "%"
               }) %>

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

@@ -71,26 +71,26 @@ const GaugeComplex = (props) => (
               orientation="column"
               wrap
           >
-            <Body
-                color="light"
-                text="% Abandoned"
-            />
+              <Body
+                  color="light"
+                  text="% Abandoned"
+               />
             <Flex wrap>
               <FlexItem
                   fixedSize="150px"
                   overflow="hidden"
                   shrink
-              >
+              > 
                 <Gauge
                     chartData={data}
                     disableAnimation
-                    height="100%"
+                    height="150"
                     id="gauge-complex"
                     suffix="%"
                     {...props}
                 />
-              </FlexItem>
-            </Flex>
+               </FlexItem>
+            </Flex>  
           </Flex>
         </Flex>
       </Card>

data/app/pb_kits/playbook/pb_gauge/gauge.html.erb

@@ -1,12 +1,2 @@
-<%= content_tag(:div, "",
-    id: object.id,
-    data: object.data,
-    class: object.classname) %>
-<% content_for :pb_js do %>
-  <%= javascript_tag do %>
-    window.addEventListener('DOMContentLoaded', function() {
-      new pbChart('.selector', <%= object.chart_options %>)
-    })
-  <% end %>
-<% end %>
+<%= react_component('Gauge', object.chart_options) %>
 

data/app/pb_kits/playbook/pb_gauge/gauge.rb

@@ -22,15 +22,10 @@ module Playbook
       prop :max, type: Playbook::Props::Numeric, default: 100
       prop :colors, type: Playbook::Props::Array, default: []
 
-      def chart_data_formatted
-        chart_data.map { |hash| hash[:y] = hash.delete :value }
-        chart_data
-      end
-
       def chart_options
         {
           id: id,
-          chartData: chart_data_formatted,
+          chartData: chart_data,
           circumference: full_circle ? [0, 360] : [-100, 100],
           dark: dark ? "dark" : "",
           disableAnimation: disable_animation,
@@ -43,9 +38,9 @@ module Playbook
           showLabels: show_labels,
           style: style,
           tooltipHtml: tooltip_html,
-          type: "gauge",
+          type: style,
           colors: colors,
-        }.to_json.html_safe
+        }
       end
 
       def classname

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -34,6 +34,7 @@ type IconProps = {
   pulse?: boolean,
   rotation?: 90 | 180 | 270,
   size?: IconSizes,
+  fontStyle?: 'far' | 'fas' | 'fab',
   spin?: boolean,
 } & GlobalProps
 
@@ -61,6 +62,7 @@ const Icon = (props: IconProps) => {
     pulse = false,
     rotation,
     size,
+    fontStyle = 'far',
     spin = false,
   } = props
 
@@ -85,7 +87,7 @@ const Icon = (props: IconProps) => {
   const classes = classnames(
     flipMap[flip],
     'pb_icon_kit',
-    customIcon ? '' : 'far',
+    customIcon ? '' : fontStyle,
     faClasses,
     globalProps(props),
     className

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -32,13 +32,16 @@ module Playbook
       prop :size, type: Playbook::Props::Enum,
                   values: ["lg", "xs", "sm", "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x", nil],
                   default: nil
+      prop :font_style, type: Playbook::Props::Enum,
+                        values: %w[far fas fab],
+                        default: "far"
       prop :spin, type: Playbook::Props::Boolean,
                   default: false
 
       def classname
         generate_classname(
           "pb_icon_kit",
-          "far",
+          font_style_class,
           icon_class,
           border_class,
           fixed_width_class,
@@ -131,6 +134,10 @@ module Playbook
         size ? "fa-#{size}" : nil
       end
 
+      def font_style_class
+        font_style ? font_style.to_s : "far"
+      end
+
       def spin_class
         spin ? "fa-spin" : nil
       end

data/app/pb_kits/playbook/pb_icon/icon.test.js

@@ -0,0 +1,155 @@
+import React from 'react'
+import { render, screen, cleanup } from '../utilities/test-utils'
+
+import Icon from './_icon'
+
+const testId = "icon-kit"
+
+describe("Icon Kit", () => {
+    test("renders Icon classname", () => {
+        render(
+            <Icon
+                data={{ testid: testId }}
+                fixedWidth
+                icon="user"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw far")
+    })
+
+    test("renders rotate prop", () => {[
+        "90", "180", "270"].forEach((rotateProp)=> {
+        render(
+            <Icon
+                data={{ testid: testId }}
+                fixedWidth
+                icon="user"
+                rotation={rotateProp}
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass(`fa-user pb_icon_kit fa-fw fa-rotate-${rotateProp} far`)
+
+        cleanup()
+    })
+})
+
+    test("renders flip prop", () => {
+        render(
+            <Icon
+                data={{ testid: testId }}
+                fixedWidth
+                flip="horizontal"
+                icon="user"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw fa-flip-horizontal far")
+    })
+
+
+    test("renders spinning icon", () => {
+        render(
+            <Icon
+                data={{ testid: testId }}
+                fixedWidth
+                icon="spinner"
+                spin
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("fa-spinner pb_icon_kit fa-fw fa-spin far")
+    })
+
+    test("renders pull icon", () => {
+        render(
+            <Icon
+                data={{ testid: testId }}
+                fixedWidth
+                icon="arrow-left"
+                pull="left"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("fa-arrow-left pb_icon_kit fa-fw fa-pull-left far")
+    })
+
+    test("renders pull icon", () => {
+        render(
+            <Icon
+                data={{ testid: testId }}
+                fixedWidth
+                icon="arrow-left"
+                pull="left"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("fa-arrow-left pb_icon_kit fa-fw fa-pull-left far")
+    })
+
+    test("renders border around icon", () => {
+        render(
+            <Icon
+                border
+                data={{ testid: testId }}
+                fixedWidth
+                icon="user"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("fa-user pb_icon_kit fa-border fa-fw far")
+    })
+
+    test("renders size prop", () => {
+        ["lg",
+        "sm",
+        "xs",
+        "1x",
+        "2x",
+        "3x",
+        "4x",
+        "5x",
+        "6x",
+        "7x",
+        "8x",
+        "9x",
+        "10x"].forEach(
+            (sizeProp) => {
+            render(
+                <Icon
+                    data={{ testid: testId }}
+                    icon="user"
+                    size={sizeProp}
+          />
+            )
+    
+            const kit = screen.getByTestId(testId)
+            expect(kit).toHaveClass(`pb_icon_kit fa-user fa-fw fa-${sizeProp} far`)
+
+            cleanup()
+        }) 
+    })
+
+    test("renders fontStyle prop", () => {
+        render(
+            <Icon
+                data={{ testid: testId }}
+                fixedWidth
+                fontStyle="fas"
+                icon="user"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw fas")
+    })
+
+})

data/app/pb_kits/playbook/pb_legend/{_legend.jsx → _legend.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 
@@ -10,7 +8,7 @@ import Body from '../pb_body/_body'
 import Title from '../pb_title/_title'
 
 type LegendProps = {
-  aria?: object,
+  aria?: { [key: string]: string },
   className?: string,
   color?: string,
   dark?: boolean,
@@ -59,14 +57,16 @@ const Legend = (props: LegendProps) => {
         <span className={`${customColor ? "pb_legend_indicator_circle_custom" : "pb_legend_indicator_circle"}`}
             style={customColorStyle} 
         />
-        <If condition={prefixText}>
-          <Title
+        {
+          prefixText && (
+            <Title
               dark={dark}
               size={4}
               tag="span"
               text={` ${prefixText} `}
           />
-        </If>
+          )
+        }
         {` ${text} `}
       </Body>
     </div>

data/app/pb_kits/playbook/pb_legend/legend.test.js

@@ -27,3 +27,32 @@ test('color prop', () => {
   const kit = screen.getByTestId('primary-test')
   expect(kit).toHaveClass('pb_legend_kit_category_17')
 })
+
+test('prefixText prop renders', () => {
+  render(
+    <Legend
+        color="category_17"
+        data={{ testid: 'primary-test' }}
+        prefixText="10"
+        text="Test colors"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  const prefix = kit.querySelector(".pb_title_kit_size_4")
+  expect(prefix).toBeInTheDocument()
+})
+
+test('Color prop renders with custom HEX value', () => {
+  render(
+    <Legend
+        color="#dc418a"
+        data={{ testid: 'primary-test' }}
+        text="Test colors"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  const circle = kit.querySelector(".pb_legend_indicator_circle_custom")
+  expect(circle).toHaveStyle('background: rgb(220, 65, 138);')
+})