playbook_ui 13.11.1.pre.alpha.play900startratingasinput1530 → 13.12.0.pre.alpha.PLAY1051removinghighchartsdependency1551

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,46 +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}
       />
-    )
+    );
 
-    const kit = screen.getByTestId(testId)
-    const highlight = kit.querySelector(".pb_star_rating_wrapper")
-    const stars = highlight.querySelectorAll(".pb_star_sm")
-    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(".pb_star_rating_wrapper")
-    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_star_rating_number_lg")
-    expect(count).toBe(5)
-  })
-})
+    expect(starCount).toBe(3);
+    expect(halfStarCount).toBe(1);
+  });
+});

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default_swift.md

@@ -0,0 +1,27 @@
+![textarea-default](https://github.com/powerhome/playbook/assets/92755007/40eec958-63d7-4840-bf5c-f8d1e34c911a)
+
+```swift
+
+@State var defaultText = ""
+@State var placeholderText = ""
+@State var customText = "Default value text"
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBTextArea(
+    "Label",
+    text: $defaultText
+  )
+
+  PBTextArea(
+    "Label",
+    text: $placeholderText,
+    placeholder: "Placeholder with text"
+  )
+
+  PBTextArea(
+    "Label",
+    text: $customText
+  )
+}
+
+```

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error_swift.md

@@ -0,0 +1,11 @@
+![textarea-error](https://github.com/powerhome/playbook/assets/92755007/6d47a914-ea0b-4fbc-9f2a-6237935a3b4c)
+
+```swift
+
+PBTextArea(
+  "Label",
+  text: $errorText,
+  error: "This field has an error!"
+)
+
+```

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_props_swift.md

@@ -0,0 +1,9 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **characterCount** | `CharacterCount` | Adds a character counter to the Textarea | `.noCount` | `.noCount` `.count` `.maxCharacterCount` `.maxCharacterCountBlock` `.maxCharacterCountError` |
+| **inline** | `Bool` | Changes the style of the Textarea | `false` | `true` `false` |
+| **label** | `String` | Adds a label | `nil` |  |
+| **placeholder** | `String` | Adds placeholder text | `nil` |  |
+| **text** | `String` | Sets the Textarea's text value | `Binding<String>` |  |
+| **error** | `String` | Changes the style of the Textarea | `nil` |  |

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

@@ -15,3 +15,8 @@ examples:
   - textarea_error: Textarea w/ Error
   - textarea_character_counter: Character Counter
   - textarea_inline: Inline
+
+  swift:
+  - textarea_default_swift: Default
+  - textarea_error_swift: Textarea w/ Error
+  - textarea_props_swift: ""

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

@@ -5,7 +5,6 @@ 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";
@@ -13,24 +12,24 @@ 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 };
+    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 = ({
@@ -50,13 +49,6 @@ const TreemapChart = ({
 }: TreemapChartProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-  const setupTheme = () => {
-    dark
-      ? Highcharts.setOptions(highchartsDarkTheme)
-      : Highcharts.setOptions(highchartsTheme);
-  };  
-  treemap(Highcharts)
-  setupTheme();  
 
   const staticOptions = {
     title: {
@@ -88,13 +80,26 @@ const TreemapChart = ({
   };
 
   const [options, setOptions] = useState({});
+  const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
 
   useEffect(() => {
-    
     setOptions({ ...staticOptions });
+
+    const interval = setInterval(() => {
+      if (window.Highcharts) {
+        clearInterval(interval)
+        dark
+          ? window.Highcharts.setOptions(highchartsDarkTheme)
+          : window.Highcharts.setOptions(highchartsTheme)
+        
+        treemap(window.Highcharts)
+        setIsHighchartsLoaded(true)
+      }
+    }, 0)
   }, [chartData]);
 
   return (
+    isHighchartsLoaded &&
     <HighchartsReact
       containerProps={{
         className: classnames(globalProps(props), "pb_treemap_chart"),
@@ -102,7 +107,7 @@ const TreemapChart = ({
         ...ariaProps,
         ...dataProps,
       }}
-      highcharts={Highcharts}
+      highcharts={window.Highcharts}
       options={options}
     />
   );