playbook_ui 13.12.0.pre.alpha.play900startratingasinput1612 → 13.12.0.pre.alpha.play1051highchartstest1556

data/app/pb_kits/playbook/pb_star_rating/star_rating.test.js

@@ -1,22 +1,24 @@
-import React from "react"
-import { render, screen } from "../utilities/test-utils"
+import React from "react";
+import { render, screen } from "../utilities/test-utils";
 
-import StarRating from "./_star_rating"
+import StarRating from "./_star_rating";
 
-const testId = "star-rating-kit"
+const testId = "star-rating-kit";
 
 describe("Star Rating Kit", () => {
   test("Expects to have correct classname", () => {
     render(
       <StarRating
           data={{ testid: testId }}
+          rating={2}
       />
-    )
+    );
 
-    const kit = screen.getByTestId(testId)
-    expect(kit.className).toBe("pb_star_rating_kit")
 
-  })
+    const kit = screen.getByTestId(testId);
+    expect(kit).toHaveClass("pb_star_rating_kit");
+
+  });
 
   test('should render aria-label', () => {
     render(
@@ -25,47 +27,45 @@ describe("Star Rating Kit", () => {
           data={{ testid: testId }}
           rating={2}
       />
-    )
+    );
 
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveAttribute('aria-label', testId)
-  })
+  });
 
-  test("Displays correct denominator", () => {
+  test("Displays two highlighted stars", () => {
     render(
       <StarRating
           data={{ testid: testId }}
-          denominator={4}
           rating={2}
-          size="xs"
       />
-    )
+    );
 
-    const kit = screen.getByTestId(testId)
-    const highlight = kit.querySelector(".star_flex_area")
-    const stars = highlight.querySelectorAll(".pb_star_xs")
-    const count = stars.length
 
-    expect(count).toBe(4)
-  })
+    const kit = screen.getByTestId(testId);
+    const highlight = kit.querySelector(".pb_star_rating_highlight");
+    const stars = highlight.querySelectorAll(".far.fa-star");
+    const count = stars.length;
 
-  test("Uses correct size", () => {
+    expect(count).toBe(2);
+  });
+
+  test("Displays three highlighted stars and a half star", () => {
     render(
       <StarRating
           data={{ testid: testId }}
-          layoutOption="number"
-          rating={2}
-          size="lg"
+          rating={3.5}
       />
-    )
+    );
 
-    const kit = screen.getByTestId(testId)
-    const highlight = kit.querySelector(".star_flex_area")
-    const title = kit.querySelector(".pb_star_rating_number_lg")
-    const stars = highlight.querySelectorAll(".pb_star_lg")
-    const count = stars.length
+    const kit = screen.getByTestId(testId);
+    const highlight = kit.querySelector(".pb_star_rating_highlight");
+    const stars = highlight.querySelectorAll(".far.fa-star");
+    const halfStars = highlight.querySelectorAll(".far.fa-star-half");
+    const starCount = stars.length;
+    const halfStarCount = halfStars.length;
 
-    expect(title.className).toBe("pb_title_kit_size_2 pr_sm pb_star_rating_number_lg")
-    expect(count).toBe(5)
-  })
-})
+    expect(starCount).toBe(3);
+    expect(halfStarCount).toBe(1);
+  });
+});

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

@@ -16,10 +16,3 @@ examples:
   - text_input_add_on: Add On
   - text_input_inline: Inline
   - text_input_no_label: No Label
-
-  swift:
-    - text_input_default_swift: Default
-    - text_input_error_swift: With Error
-    - text_input_disabled_swift: Disabled
-    - text_input_add_on_swift: Add On
-    - text_input_props_swift: ""

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

@@ -13,7 +13,3 @@ examples:
   - toggle_custom: Custom checkbox input
   - toggle_custom_radio: Custom radio inputs
 
-  swift:
-    - toggle_default_swift: Default State
-    - toggle_name_swift: Name and Value
-    - toggle_props_swift: ""

data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx

@@ -1,111 +1,116 @@
-import React, { useState, useEffect } from "react";
-import classnames from "classnames";
+// import React, { useState, useEffect } from "react";
+// import classnames from "classnames";
 
-import { globalProps } from "../utilities/globalProps";
-import { buildAriaProps, buildDataProps } from "../utilities/props";
+// import { globalProps } from "../utilities/globalProps";
+// import { buildAriaProps, buildDataProps } from "../utilities/props";
 
-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 treemap from 'highcharts/modules/treemap'
+// import HighchartsReact from "highcharts-react-official";
+// import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
+// import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
+// import mapColors from "../pb_dashboard/pbChartsColorsHelper";
+// import treemap from 'highcharts/modules/treemap'
 
-type TreemapChartProps = {
-  chartData: {
-    name: string;
-    parent?: string | number;
-    value: number;
-    color?: string;
-    id?: string | number;
-  }[];
-  className?: string;
-  colors: string[];
-  dark?: boolean;
-  drillable: boolean;
-  grouped: boolean;
-  height?: string;
-  id: number | string;
-  title?: string;
-  tooltipHtml: string;
-  type?: string;
-  aria?: { [key: string]: string };
-  data?: { [key: string]: string };
-};
+// type TreemapChartProps = {
+//   chartData: {
+//     name: string,
+//     parent?: string | number,
+//     value: number,
+//     color?: string,
+//     id?: string | number,
+//   }[],
+//   className?: string,
+//   colors: string[],
+//   dark?: boolean,
+//   drillable: boolean,
+//   grouped: boolean,
+//   height?: string,
+//   id: number | string,
+//   title?: string,
+//   tooltipHtml: string,
+//   type?: string,
+//   aria?: { [key: string]: string },
+//   data?: { [key: string]: string },
+// };
 
-const TreemapChart = ({
-  aria = {},
-  data = {},
-  chartData,
-  colors,
-  dark = false,
-  drillable = false,
-  grouped = false,
-  height,
-  id,
-  title = "",
-  tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.value}</b>',
-  type = "treemap",
-  ...props
-}: TreemapChartProps) => {
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const setupTheme = () => {
-    dark
-      ? Highcharts.setOptions(highchartsDarkTheme)
-      : Highcharts.setOptions(highchartsTheme);
-  };  
-  treemap(Highcharts)
-  setupTheme();  
+// const TreemapChart = ({
+//   aria = {},
+//   data = {},
+//   chartData,
+//   colors,
+//   dark = false,
+//   drillable = false,
+//   grouped = false,
+//   height,
+//   id,
+//   title = "",
+//   tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.value}</b>',
+//   type = "treemap",
+//   ...props
+// }: TreemapChartProps) => {
+//   const ariaProps = buildAriaProps(aria);
+//   const dataProps = buildDataProps(data);
 
-  const staticOptions = {
-    title: {
-      text: title,
-    },
-    chart: {
-      height: height,
-      type: type,
-    },
-    credits: false,
-    series: [
-      {
-        data: chartData,
-      },
-    ],
-    plotOptions: {
-      treemap: {
-        tooltip: {
-          pointFormat: tooltipHtml,
-        },
-        allowTraversingTree: drillable,
-        colorByPoint: !grouped,
-        colors:
-          colors !== undefined && colors.length > 0
-            ? mapColors(colors)
-            : highchartsTheme.colors,
-      },
-    },
-  };
+//   const staticOptions = {
+//     title: {
+//       text: title,
+//     },
+//     chart: {
+//       height: height,
+//       type: type,
+//     },
+//     credits: false,
+//     series: [
+//       {
+//         data: chartData,
+//       },
+//     ],
+//     plotOptions: {
+//       treemap: {
+//         tooltip: {
+//           pointFormat: tooltipHtml,
+//         },
+//         allowTraversingTree: drillable,
+//         colorByPoint: !grouped,
+//         colors:
+//           colors !== undefined && colors.length > 0
+//             ? mapColors(colors)
+//             : highchartsTheme.colors,
+//       },
+//     },
+//   };
 
-  const [options, setOptions] = useState({});
+//   const [options, setOptions] = useState({});
+//   const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
 
-  useEffect(() => {
-    
-    setOptions({ ...staticOptions });
-  }, [chartData]);
+//   useEffect(() => {
+//     setOptions({ ...staticOptions });
 
-  return (
-    <HighchartsReact
-      containerProps={{
-        className: classnames(globalProps(props), "pb_treemap_chart"),
-        id: id,
-        ...ariaProps,
-        ...dataProps,
-      }}
-      highcharts={Highcharts}
-      options={options}
-    />
-  );
-};
+//     const interval = setInterval(() => {
+//       if (window.Highcharts) {
+//         clearInterval(interval)
+//         dark
+//           ? window.Highcharts.setOptions(highchartsDarkTheme(window.Highcharts))
+//           : window.Highcharts.setOptions(highchartsTheme)
+        
+//         treemap(window.Highcharts)
+//         setIsHighchartsLoaded(true)
+//       }
+//     }, 0)
+//   }, [chartData]);
 
-export default TreemapChart;
+//   return (
+//     isHighchartsLoaded &&
+//     <HighchartsReact
+//       containerProps={{
+//         className: classnames(globalProps(props), "pb_treemap_chart"),
+//         id: id,
+//         ...ariaProps,
+//         ...dataProps,
+//       }}
+//       highcharts={window.Highcharts}
+//       options={options}
+//     />
+//   );
+// };
+
+// export default TreemapChart;

data/app/pb_kits/playbook/playbook-doc.js

@@ -39,7 +39,7 @@ import * as FixedConfirmationToast from 'pb_fixed_confirmation_toast/docs'
 import * as Flex from 'pb_flex/docs'
 import * as FormGroup from 'pb_form_group/docs'
 import * as FormPill from 'pb_form_pill/docs'
-import * as Gauge from 'pb_gauge/docs'
+//import * as Gauge from 'pb_gauge/docs'
 import * as Hashtag from 'pb_hashtag/docs'
 import * as Highlight from 'pb_highlight/docs'
 import * as HomeAddressStreet from 'pb_home_address_street/docs'
@@ -97,7 +97,7 @@ import * as TitleCount from 'pb_title_count/docs'
 import * as TitleDetail from 'pb_title_detail/docs'
 import * as Toggle from 'pb_toggle/docs'
 import * as Tooltip from 'pb_tooltip/docs'
-import * as TreemapChart from 'pb_treemap_chart/docs'
+//import * as TreemapChart from 'pb_treemap_chart/docs'
 import * as Typeahead from 'pb_typeahead/docs'
 import * as User from 'pb_user/docs'
 import * as UserBadge from 'pb_user_badge/docs'
@@ -140,7 +140,7 @@ WebpackerReact.registerComponents({
   ...Flex,
   ...FormGroup,
   ...FormPill,
-  ...Gauge,
+  //...Gauge,
   ...Hashtag,
   ...Highlight,
   ...HomeAddressStreet,
@@ -198,7 +198,7 @@ WebpackerReact.registerComponents({
   ...TitleDetail,
   ...Toggle,
   ...Tooltip,
-  ...TreemapChart,
+  //...TreemapChart,
   ...Typeahead,
   ...User,
   ...UserBadge,

data/app/pb_kits/playbook/playbook-rails-react-bindings.js

@@ -10,13 +10,13 @@ import DialogBody from './pb_dialog/child_kits/_dialog_body'
 import DialogFooter from './pb_dialog/child_kits/_dialog_footer'
 import DialogHeader from './pb_dialog/child_kits/_dialog_header'
 import DistributionBar from './pb_distribution_bar/_distribution_bar'
-import Gauge from './pb_gauge/_gauge'
+//import Gauge from './pb_gauge/_gauge'
 import Legend from './pb_legend/_legend'
 import LineGraph from './pb_line_graph/_line_graph'
 import MultiLevelSelect from './pb_multi_level_select/_multi_level_select'
 import Passphrase from './pb_passphrase/_passphrase'
 import RichTextEditor from './pb_rich_text_editor/_rich_text_editor'
-import TreemapChart from './pb_treemap_chart/_treemap_chart'
+//import TreemapChart from './pb_treemap_chart/_treemap_chart'
 import Typeahead from './pb_typeahead/_typeahead'
 import PhoneNumberInput from './pb_phone_number_input/_phone_number_input'
 
@@ -33,9 +33,9 @@ WebpackerReact.registerComponents({
   LineGraph,
   Passphrase,
   RichTextEditor,
-  TreemapChart,
+  //TreemapChart,
   Typeahead,
-  Gauge,
+  //Gauge,
   PhoneNumberInput
 })