playbook_ui 13.11.1 → 13.12.0.pre.alpha.PLAY1051removinghighchartsdependency1551

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0ee8e7e286c406057d392df39a78b5386ccab676d22aa828c988d7ee705ef968
-  data.tar.gz: ee9a52e005b2d69eebf688975b86bb2e6690cbc36213745e099c53a9148b71f7
+  metadata.gz: 4a59ab1213c1c17a6ab6bfa775d7ac7edf06972be95d950e479f16b8cafc4216
+  data.tar.gz: cb50f83ac242358db6b9e951ba8d7fa7bfee32ff78c02eef0b0829ed5e97a0d7
 SHA512:
-  metadata.gz: d56962a2defca43883e75b975d30829a1222671ebcc55b08258ec18d581937cd73252ee556ca113788388ff6f1dcc3952ca0f446ae1eba5c91acac03d5131e5e
-  data.tar.gz: 2295ee61c45223e3000b277bec93ac715d0f0cd134494b2d746172f93af2d979e9edc9ef76be7bfe67a689dca148063e3bac03f4ae3050e5db05f59ea4907f76
+  metadata.gz: 53af5b80de72a1f40570fd93a05f1a5282d9c79cfa04b007ecfc7e04ee31bfaa27d2202467edaf02ca50ea05173faccc0fb5b2207e16cf936957eaf8bd4b3338
+  data.tar.gz: 287e8051ab76bba6451b8c76ba3df6d95d1d7cfd4f4de33ae82b5745345294903e40fd74510c1b740b40395d6193f5c2c24c285980b116873a381917fdd146f7

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -3,7 +3,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";
@@ -11,32 +10,31 @@ import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import classnames from "classnames";
 
 type BarGraphProps = {
-  align?: "left" | "right" | "center";
-  axisTitle: string;
-  dark?: boolean;
-  xAxisCategories: [];
-  yAxisMin: number;
-  yAxisMax: number;
-  chartData: { name: string; data: number[] }[];
-  className?: string;
-  id: any;
-  pointStart: number | any;
-  subTitle?: string;
-  title: string;
-  type?: string;
-  legend?: boolean;
-  toggleLegendClick?: boolean;
-  height?: string;
-  colors: string[];
-  layout?: "horizontal" | "vertical" | "proximate";
-  verticalAlign?: "top" | "middle" | "bottom";
-  x?: number;
-  y?: number;
-  aria?: { [key: string]: string };
-  data?: { [key: string]: string };
+  align?: "left" | "right" | "center",
+  axisTitle: string,
+  dark?: boolean,
+  xAxisCategories: [],
+  yAxisMin: number,
+  yAxisMax: number,
+  chartData: { name: string, data: number[] }[],
+  className?: string,
+  id: any,
+  pointStart: number | any,
+  subTitle?: string,
+  title: string,
+  type?: string,
+  legend?: boolean,
+  toggleLegendClick?: boolean,
+  height?: string,
+  colors: string[],
+  layout?: "horizontal" | "vertical" | "proximate",
+  verticalAlign?: "top" | "middle" | "bottom",
+  x?: number,
+  y?: number,
+  aria?: { [key: string]: string },
+  data?: { [key: string]: string },
 };
 
-
 const BarGraph = ({
   aria = {},
   data = {},
@@ -65,12 +63,6 @@ const BarGraph = ({
 }: BarGraphProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-  const setupTheme = () => {
-    dark
-      ? Highcharts.setOptions(highchartsDarkTheme)
-      : Highcharts.setOptions(highchartsTheme);
-  };
-  setupTheme();
 
   const staticOptions = {
     title: {
@@ -123,12 +115,24 @@ const BarGraph = ({
   }
 
   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)
+        setIsHighchartsLoaded(true)
+      }
+    }, 0)
   }, [chartData]);
 
   return (
+    isHighchartsLoaded &&
     <HighchartsReact
         containerProps={{
           className: classnames(globalProps(props), className),
@@ -136,7 +140,7 @@ const BarGraph = ({
           ...ariaProps,
           ...dataProps,
         }}
-        highcharts={Highcharts}
+        highcharts={window.Highcharts}
         options={options}
     />
   );

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx

@@ -3,8 +3,6 @@ import classnames from "classnames";
 import HighchartsReact from "highcharts-react-official";
 import highchartsMore from "highcharts/highcharts-more";
 
-import Highcharts from "highcharts";
-
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
@@ -12,35 +10,35 @@ import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps } from "../utilities/props";
 
 type CircleChartProps = {
-  align?: "left" | "right" | "center";
-  aria: { [key: string]: string };
-  chartData?: [];
-  children?: Node;
-  className?: string;
-  colors?: string[];
-  dark?: Boolean;
-  data?: Object;
-  dataLabelHtml?: string;
-  dataLabels?: boolean;
-  height?: string;
-  id?: string;
-  innerSize?: "sm" | "md" | "lg" | "none";
-  legend?: boolean;
-  maxPointSize?: number;
-  minPointSize?: number;
-  rounded?: boolean;
-  startAngle?: number;
-  style?: string;
-  title?: string;
-  tooltipHtml: string;
-  useHtml?: boolean;
-  zMin?: number;
-  layout?: "horizontal" | "vertical" | "proximate";
-  verticalAlign?: "top" | "middle" | "bottom";
-  x?: number;
-  y?: number;
-  borderColor?: string;
-  borderWidth?: number;
+  align?: "left" | "right" | "center",
+  aria: { [key: string]: string },
+  chartData?: [],
+  children?: Node,
+  className?: string,
+  colors?: string[],
+  dark?: Boolean,
+  data?: Object,
+  dataLabelHtml?: string,
+  dataLabels?: boolean,
+  height?: string,
+  id?: string,
+  innerSize?: "sm" | "md" | "lg" | "none",
+  legend?: boolean,
+  maxPointSize?: number,
+  minPointSize?: number,
+  rounded?: boolean,
+  startAngle?: number,
+  style?: string,
+  title?: string,
+  tooltipHtml: string,
+  useHtml?: boolean,
+  zMin?: number,
+  layout?: "horizontal" | "vertical" | "proximate",
+  verticalAlign?: "top" | "middle" | "bottom",
+  x?: number,
+  y?: number,
+  borderColor?: string,
+  borderWidth?: number,
 };
 
 // Adjust Circle Chart Block Kit Dimensions to Match the Chart for Centering
@@ -90,29 +88,11 @@ const CircleChart = ({
 }: CircleChartProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-  highchartsMore(Highcharts);
-
-  const setupTheme = () => {
-    dark
-      ? Highcharts.setOptions(highchartsDarkTheme)
-      : Highcharts.setOptions(highchartsTheme);
-  };
-  setupTheme();
-
-  Highcharts.setOptions({
-    tooltip: {
-      headerFormat: null,
-      pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + "<b>{point.y}</b>",
-      useHTML: useHtml,
-    },
-  });
-
   const innerSizes = { sm: "35%", md: "50%", lg: "85%", none: "0%" };
-  const innerSizeFormat = (size: "sm" | "md" | "lg" | "none") =>
-    innerSizes[size];
-
+  const innerSizeFormat = (size: "sm" | "md" | "lg" | "none") => innerSizes[size];
 
   const [options, setOptions] = useState({});
+  const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
 
   useEffect(() => {
     const formattedChartData = chartData.map((obj: any) => {
@@ -169,26 +149,50 @@ const CircleChart = ({
       credits: false,
     };
     setOptions({ ...staticOptions });
-  }, [chartData]);
 
+    const interval = setInterval(() => {
+      if (window.Highcharts) {
+        clearInterval(interval)
+        dark
+          ? window.Highcharts.setOptions(highchartsDarkTheme)
+          : window.Highcharts.setOptions(highchartsTheme)
+        
+        highchartsMore(window.Highcharts);
+
+        window.Highcharts.setOptions({
+          tooltip: {
+            headerFormat: null,
+            pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + "<b>{point.y}</b>",
+            useHTML: useHtml,
+          },
+        });
+
+        setIsHighchartsLoaded(true)
+      }
+    }, 0)
+  }, [chartData]);
 
   return (
     <>
       {children ? (
         <div id={`wrapper-circle-chart-${id}`}>
-          <HighchartsReact
-            containerProps={{
-              className: classnames("pb_circle_chart", globalProps(props)),
-              id: id,
-              ...ariaProps,
-              ...dataProps,
-            }}
-            highcharts={Highcharts}
-            options={options}
-          />
+          {
+            isHighchartsLoaded &&
+            <HighchartsReact
+              containerProps={{
+                className: classnames("pb_circle_chart", globalProps(props)),
+                id: id,
+                ...ariaProps,
+                ...dataProps,
+              }}
+              highcharts={window.Highcharts}
+              options={options}
+            />
+          }
           <div className="pb-circle-chart-block">{children}</div>
         </div>
       ) : (
+        isHighchartsLoaded &&
         <HighchartsReact
           containerProps={{
             className: classnames("pb_circle_chart", globalProps(props)),
@@ -196,7 +200,7 @@ const CircleChart = ({
             ...ariaProps,
             ...dataProps,
           }}
-          highcharts={Highcharts}
+          highcharts={window.Highcharts}
           options={options}
         />
       )}

data/app/pb_kits/playbook/pb_collapsible/collapsible_content.rb

@@ -3,6 +3,8 @@
 module Playbook
   module PbCollapsible
     class CollapsibleContent < Playbook::KitBase
+      prop :collapsed, type: Playbook::Props::Boolean,
+                       default: true
       def data
         Hash(values[:data]).merge(
           collapsible_content: true
@@ -10,7 +12,7 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_collapsible_content_kit", "toggle-content", padding, separator: " ")
+        generate_classname("pb_collapsible_content_kit", "toggle-content", collapsed ? nil : "is-visible", padding, separator: " ")
       end
     end
   end

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls.html.erb

@@ -0,0 +1,22 @@
+<div onclick="toggleCollapsibleById('collapsed-toggle')">
+    <%= pb_rails("button", props: { text: "Toggle Collapsible", variant:"link"}) %>
+</div>
+
+<%= pb_rails("collapsible", props: { name: "default-example" }) do %>
+    <%= pb_rails("collapsible/collapsible_main", props: { padding: "md", name: "default-main"}) do %>
+      <%= pb_rails("body", props: { text: "Main Section"}) %>
+    <% end %>
+    <%= pb_rails("collapsible/collapsible_content", props: { padding: "md", collapsed: false, id:"collapsed-toggle" }) do %>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at.
+      <br><br>
+      Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.
+    <% end %>
+<% end %>
+  
+
+  
+  <script>
+  const toggleCollapsibleById = (id) => {
+    document.dispatchEvent(new CustomEvent(id));
+  };
+  </script>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls.md

@@ -0,0 +1,3 @@
+The `collapsed` prop (boolean; default = true) handles the collapsed state of a collapsible. Set it to 'false' and the collapsible will render in an expanded state on page load.
+
+You can also control the collapsed state using an external control (like a button). To do this, you must first apply a unique id to the collapsible/collapsible_content child element. You can then attach an eventListner to the external control of your choice, pass it the id as an argument and use `document.dispatchEvent(new CustomEvent(id))` to trigger the action. See the code example below for details.

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls_multiple.html.erb

@@ -0,0 +1,40 @@
+<%= pb_rails("button", props: { variant:"link", text: "Toggle All", id: "toggle-button-example"}) %>
+
+<%= pb_rails("collapsible", props: { name: "default-example" }) do %>
+    <%= pb_rails("collapsible/collapsible_main", props: { padding: "xs", name: "default-main"}) do %>
+      <%= pb_rails("body", props: { text: "Main Section"}) %>
+    <% end %>
+    <%= pb_rails("collapsible/collapsible_content", props: { padding: "md", id:"collapse-toggle-1" }) do %>
+      Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.
+    <% end %>
+<% end %>
+<%= pb_rails("collapsible", props: { name: "default-example-2" }) do %>
+    <%= pb_rails("collapsible/collapsible_main", props: { padding: "xs", name: "default-main"}) do %>
+      <%= pb_rails("body", props: { text: "Main Section"}) %>
+    <% end %>
+    <%= pb_rails("collapsible/collapsible_content", props: { padding: "md", id:"collapse-toggle-2" }) do %>
+      Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.
+    <% end %>
+<% end %>
+<%= pb_rails("collapsible", props: { name: "default-example-3" }) do %>
+    <%= pb_rails("collapsible/collapsible_main", props: { padding: "xs", name: "default-main"}) do %>
+      <%= pb_rails("body", props: { text: "Main Section"}) %>
+    <% end %>
+    <%= pb_rails("collapsible/collapsible_content", props: { padding: "md", id:"collapse-toggle-3" }) do %>
+      Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.
+    <% end %>
+<% end %>
+  
+
+  
+<script>
+  window.addEventListener('DOMContentLoaded', () => {
+    const collapsibles = document.querySelectorAll('[id^="collapse-toggle"]');
+    const button = document.querySelector("#toggle-button-example");
+    button.addEventListener("click", () => {
+      collapsibles.forEach(collapsible => {
+        document.dispatchEvent(new CustomEvent(collapsible.id));
+      })
+    })
+  })
+</script>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_external_controls_multiple.md

@@ -0,0 +1 @@
+The external control functionality can also be used to toggle multiple collapsibles with the same control. See the code example below to see this in action.

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

@@ -5,6 +5,8 @@ examples:
   - collapsible_size: Icon Size
   - collapsible_color: Icon Color
   - collapsible_icons: Custom Icons
+  - collapsible_external_controls: Toggle Collapsible With External Controls
+  - collapsible_external_controls_multiple: Toggle All Collapsibles With One Control
 
   react:
   - collapsible_default: Default

data/app/pb_kits/playbook/pb_collapsible/index.js

@@ -15,6 +15,10 @@ export default class PbCollapsible extends PbEnhancedElement {
       this.toggleElement(this.target)
     })
     this.displayDownArrow()
+    // Listen for a custom event to toggle the collapsible
+    document.addEventListener(`${this.target.id}`, () => {
+      this.toggleElement(this.target)
+    })
   }
 
   get target() {

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

@@ -1,7 +1,6 @@
 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";
@@ -14,26 +13,26 @@ 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[];
+  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 = ({
@@ -62,28 +61,13 @@ const Gauge = ({
 }: 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 [options, setOptions] = useState({});
+  const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
 
   useEffect(() => {
     const formattedChartData = chartData.map((obj: any) => {
@@ -174,18 +158,45 @@ const Gauge = ({
 
     setOptions({ ...staticOptions });
 
-    if (document.querySelector(".prefix")) {
-      document.querySelectorAll(".prefix").forEach((prefix) => {
-        prefix.setAttribute("y", "28");
-      });
-      document
-        .querySelectorAll(".fix")
-        .forEach((fix) => fix.setAttribute("y", "38"));
-    }
+    const interval = setInterval(() => {
+      if (window.Highcharts) {
+        clearInterval(interval)
+        
+        const gaugeInterval = setInterval(() => {
+          if (document.querySelector(".prefix")) {
+            clearInterval(gaugeInterval)
+            document.querySelectorAll(".prefix").forEach((prefix) => {
+              prefix.setAttribute("y", "28");
+            });
+            document
+              .querySelectorAll(".fix")
+              .forEach((fix) => fix.setAttribute("y", "38"));
+          }
+        }, 0)
+
+        dark
+          ? window.Highcharts.setOptions(highchartsDarkTheme)
+          : window.Highcharts.setOptions(highchartsTheme)
+        
+        highchartsMore(window.Highcharts);
+        solidGauge(window.Highcharts);
+      
+        //set tooltip directly to prevent being overriden by window.Highcharts defaults
+        window.Highcharts.setOptions({
+          tooltip: {
+            pointFormat: tooltipHtml,
+            followPointer: true,
+          },
+        });
+
+        setIsHighchartsLoaded(true)
+      }
+    }, 0)
 
   }, [chartData]);
 
   return (
+    isHighchartsLoaded &&
     <HighchartsReact
       containerProps={{
         className: classnames(css, globalProps(props)),
@@ -193,7 +204,7 @@ const Gauge = ({
         ...ariaProps,
         ...dataProps,
       }}
-      highcharts={Highcharts}
+      highcharts={window.Highcharts}
       options={options}
     />
   );

data/app/pb_kits/playbook/pb_icon/docs/_icon_border_swift.md

@@ -0,0 +1,7 @@
+![card-border](https://github.com/powerhome/playbook/assets/92755007/442640c8-1b4f-455d-8517-5ca5cd120664)
+
+```swift
+
+PBIcon(FontAwesome.user, border: true)
+
+```

data/app/pb_kits/playbook/pb_icon/docs/_icon_default_swift.md

@@ -0,0 +1,7 @@
+![card-default](https://github.com/powerhome/playbook/assets/92755007/8c7e5454-1d42-4d13-9107-ffc5773a136a)
+
+```swift
+
+PBIcon.fontAwesome(.user, size: .x1)
+
+```

data/app/pb_kits/playbook/pb_icon/docs/_icon_flip_swift.md

@@ -0,0 +1,11 @@
+![icon-flipped](https://github.com/powerhome/playbook/assets/92755007/2776fb83-942d-4a38-9dff-9dcb73940dfe)
+
+```swift
+
+ HStack(spacing: Spacing.xSmall) {
+  PBIcon(FontAwesome.questionCircle, flipped: [.horizontal])
+  PBIcon(FontAwesome.questionCircle, flipped: [.vertical])
+  PBIcon(FontAwesome.questionCircle, flipped: [.horizontal, .vertical])
+}
+
+```

data/app/pb_kits/playbook/pb_icon/docs/_icon_props_swift.md

@@ -0,0 +1,8 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Icon** | `PlaybookGenericIcon` | Sets the kit's Icon |  |  |
+| **Size** | `IconSize` | Changes the size of the Icon | `.x1` | `xSmall` `small` `large` `x1` `x2` `x3` `x4` `x5` `x6` `x7` `x8` `x9` `x10` |
+| **Rotation** | `IconRotation` | Rotates the Icon | `.zero` | `.zero` `.right` `.straight` `.obtuse` |
+| **Border** | `Bool` | Adds a border | `false` | `true` `false` |
+| **Flipped** | `[Axis]` | Flips the Icon | `nil` | `[.horizontal]` `[.vertical]` `[.horizontal, .vertical]` |

data/app/pb_kits/playbook/pb_icon/docs/_icon_rotate_swift.md

@@ -0,0 +1,11 @@
+![icon-rotate](https://github.com/powerhome/playbook/assets/92755007/29a6c127-a8a0-4dd9-a8cb-6401f772f11e)
+
+```swift
+
+HStack(spacing: Spacing.xSmall) {
+  PBIcon(FontAwesome.user, rotation: .right)
+  PBIcon(FontAwesome.user, rotation: .zero)
+  PBIcon(FontAwesome.user, rotation: .obtuse) 
+}
+
+```

data/app/pb_kits/playbook/pb_icon/docs/_icon_sizes_swift.md

@@ -0,0 +1,46 @@
+![icon-size](https://github.com/powerhome/playbook/assets/92755007/b3aa3933-56b1-4fe4-bb8b-00d786abb23a)
+
+```swift
+
+HStack(spacing: Spacing.xSmall) {
+  PBIcon.fontAwesome(.atlas, size: .xSmall)
+  Text("xSmall")
+
+  PBIcon.fontAwesome(.atlas, size: .small)
+  Text("small")
+
+  PBIcon.fontAwesome(.atlas, size: .large)
+  Text("large")
+
+  PBIcon.fontAwesome(.atlas, size: .x1)
+  Text("x1")
+
+  PBIcon.fontAwesome(.atlas, size: .x2)
+  Text("x2")
+
+  PBIcon.fontAwesome(.atlas, size: .x3)
+  Text("x3")
+
+  PBIcon.fontAwesome(.atlas, size: .x4)
+  Text("x4")
+
+  PBIcon.fontAwesome(.atlas, size: .x5)
+  Text("x5")
+
+  PBIcon.fontAwesome(.atlas, size: .x6)
+  Text("x6")
+  
+  PBIcon.fontAwesome(.atlas, size: .x7)
+  Text("x7")
+
+  PBIcon.fontAwesome(.atlas, size: .x8)
+  Text("x8")
+
+  PBIcon.fontAwesome(.atlas, size: .x9)
+  Text("x9")
+
+  PBIcon.fontAwesome(.atlas, size: .x10)
+  Text("x10")
+}
+
+```