playbook_ui 13.14.0 → 13.15.0.pre.alpha.PLAY10831873

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx

@@ -12,22 +12,20 @@ import { IconSizes } from "../pb_icon/_icon"
 
 
 type CollapsibleProps = {
-  children?: JSX.Element | [] | any,
+  children?: React.ReactElement | [] | any,
   aria?: {[key: string]: string},
   className?: string,
   collapsed?: boolean,
-  data?: object,
+  data?: {[key: string]: string},
   icon?: string | string[],
   iconColor?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success',
   iconSize?: IconSizes,
   onIconClick?: ()=> void,
   onClick?: ()=> void,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
 }
 
-
-
 const Collapsible = ({
   aria = {},
   className,
@@ -42,14 +40,14 @@ const Collapsible = ({
   onClick,
   id,
   ...props
-}: CollapsibleProps) => {
+}: CollapsibleProps): React.ReactElement => {
   const [isCollapsed, toggle, setIsCollapsed] = useCollapsible(collapsed)
 
   useEffect(()=> {
    setIsCollapsed(collapsed)
   },[collapsed])
 
-  const CollapsibleParent = React.Children.toArray(children) as JSX.Element[]
+  const CollapsibleParent = React.Children.toArray(children) as React.ReactElement[]
 
   if (CollapsibleParent.length !== 2) {
     throw new Error('Collapsible requires <CollapsibleMain> and <CollapsibleContent> to function properly.')

data/app/pb_kits/playbook/pb_collapsible/_helper_functions.ts

@@ -1,4 +1,4 @@
-export const showElement = (elem:any) => {
+export const showElement = (elem: HTMLElement) => {
   elem.style.display = 'block';
   const height = elem.scrollHeight + 'px'; // Get its height
   elem.style.height = height; // Update the max-height
@@ -11,7 +11,7 @@ export const showElement = (elem:any) => {
   }, 300);
 };
 
-export const hideElement = (elem:any) => {
+export const hideElement = (elem: HTMLElement) => {
   elem.style.height = elem.scrollHeight + 'px';
 
   window.setTimeout(() => {

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx

@@ -15,7 +15,7 @@ const CollapsibleContent = ({
   children,
   className,
   ...props
-}: CollapsibleContentProps) => {
+}: CollapsibleContentProps): React.ReactElement => {
   const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
   const contentCSS = buildCss('pb_collapsible_content_kit')
   const contentSpacing = globalProps(props)
@@ -33,9 +33,10 @@ const CollapsibleContent = ({
   }, [context.collapsed]);
 
   return (
-    <div ref={contentRef}
-      data-collapsible-content="true" 
-      className={classnames(contentCSS, contentSpacing, "toggle-content", className)}>
+    <div className={classnames(contentCSS, contentSpacing, "toggle-content", className)}
+        data-collapsible-content="true" 
+        ref={contentRef}
+    >
       {children}
     </div>
   )

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -56,7 +56,7 @@ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, onIconClick }: IconP
     return icon
   }
 
-  const handleIconClick = (e:any) => {
+  const handleIconClick = (e: React.MouseEvent<HTMLElement>) => {
     if (onIconClick) {
     e.stopPropagation();
     onIconClick()
@@ -67,21 +67,25 @@ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, onIconClick }: IconP
     <>
       {collapsed ? (
         <div
-          className="icon_wrapper"
-          key={icon ? showIcon(icon)[0] : "chevron-down"}
-          style={{ verticalAlign: "middle", color: color }}
-          onClick={(e)=> handleIconClick(e)}
+            className="icon_wrapper"
+            key={icon ? showIcon(icon)[0] : "chevron-down"}
+            onClick={(e)=> handleIconClick(e)}
+            style={{ verticalAlign: "middle", color: color }}
         >
-          <Icon icon={icon ? showIcon(icon)[0] : "chevron-down"} size={iconSize} />
+          <Icon icon={icon ? showIcon(icon)[0] : "chevron-down"}
+              size={iconSize}
+          />
         </div>
       ) : (
         <div
-          className="icon_wrapper"
-          key={icon ? showIcon(icon)[1] : "chevron-up"}
-          style={{ verticalAlign: "middle", color: color }}
-          onClick={(e)=> handleIconClick(e)}
+            className="icon_wrapper"
+            key={icon ? showIcon(icon)[1] : "chevron-up"}
+            onClick={(e)=> handleIconClick(e)}
+            style={{ verticalAlign: "middle", color: color }}
         >
-          <Icon icon={icon ? showIcon(icon)[1] : "chevron-up"} size={iconSize} />
+          <Icon icon={icon ? showIcon(icon)[1] : "chevron-up"}
+              size={iconSize}
+          />
         </div>
       )}
     </>
@@ -118,9 +122,9 @@ const CollapsibleMain = ({
           <FlexItem>
             <ToggleIcon
                 collapsed={collapsed as () => void}
+                icon={icon as string[] | string}
                 iconColor={iconColor as IconColors}
                 iconSize={iconSize as IconSizes}
-                icon={icon as string[] | string}
                 onIconClick={onIconClick}
             />
             </FlexItem>

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

@@ -0,0 +1,27 @@
+![collapsible-colors](https://github.com/powerhome/playbook/assets/54749071/daafd129-fd0a-4992-8fee-bfa55aed8a23)
+
+```swift
+let iconSize: PBIcon.IconSize
+let iconColor: CollapsibleIconColor
+let text: String
+@State private var isCollapsed = true
+let lorem =
+      "
+      Group members... Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit vive.
+      Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo.
+      Praesent lorem arcu. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis.
+      "
+PBCollapsible(isCollapsed: $isCollapsed, iconSize: iconSize, iconColor: iconColor) {
+       VStack(spacing: Spacing.medium) {
+            CollapsibleDoc(iconColor: .default, text: "Default Section")
+            CollapsibleDoc(iconColor: .light, text: "Light Section")
+            CollapsibleDoc(iconColor: .lighter, text: "Lighter Section")
+            CollapsibleDoc(iconColor: .link, text: "Link Section")
+            CollapsibleDoc(iconColor: .error, text: "Error Section")
+            CollapsibleDoc(iconColor: .success, text: "Success Section")
+          }
+      } content: {
+       Text(lorem).pbFont(.body)
+      }
+
+```

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

@@ -0,0 +1,22 @@
+![collapsible-default](https://github.com/powerhome/playbook/assets/54749071/3e97095b-f6bb-45b7-bd33-99ebde0d40fd)
+
+
+```swift
+let iconSize: PBIcon.IconSize
+let iconColor: CollapsibleIconColor
+let text: String
+@State private var isCollapsed = true
+let lorem =
+      "
+      Group members... Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit vive.
+      Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo.
+      Praesent lorem arcu. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis.
+      "
+
+PBCollapsible(isCollapsed: $isCollapsed, iconSize: iconSize, iconColor: iconColor) {
+        CollapsibleDoc(text: "Main Section")
+      } content: {
+        Text(lorem).pbFont(.body)
+      }
+
+```

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

@@ -0,0 +1,8 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **isCollapsed** | `Bool` | Value for whether or not the dropdown is closed or open | `false` | `true` `false` |
+| **headerView** | `View` | Title of dropdown |  | |
+| **contentView** | `View` | Content of dropdown |  |  |
+| **iconSize** | `PBIcon.IconSize` | Sets size of chevron icon | `.small`  | `xSmall` `small` `large` `x1` `x2` `x3` `x4` `x5` `x6` `x7` `x8` `x9` `x10` |
+| **iconColor** | `CollapsibleIconColor` | Sets color of chevron icon | `.default` | `default` `light` `lighter` `link` `error` `success`  |

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

@@ -0,0 +1,26 @@
+![collapsible-sizes](https://github.com/powerhome/playbook/assets/54749071/557bfe16-26e4-4966-9f1c-689a2dc44412)
+
+```swift
+let iconSize: PBIcon.IconSize
+let iconColor: CollapsibleIconColor
+let text: String
+@State private var isCollapsed = true
+let lorem =
+      "
+      Group members... Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit vive.
+      Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo.
+      Praesent lorem arcu. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis.
+      "
+
+PBCollapsible(isCollapsed: $isCollapsed, iconSize: iconSize, iconColor: iconColor) {
+      VStack(spacing: Spacing.medium) {
+            CollapsibleDoc(iconSize: .xSmall, text: "Extra Small Section")
+            CollapsibleDoc(iconSize: .small, text: "Small Section")
+            CollapsibleDoc(text: "Default Section")
+            CollapsibleDoc(iconSize: .large, text: "Large Section")
+          }
+      } content: {
+       Text(lorem).pbFont(.body)
+      }
+
+```

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

@@ -14,3 +14,9 @@ examples:
   - collapsible_color: Icon Color
   - collapsible_icons: Custom Icons
   - collapsible_state: useCollapsible Hook
+
+  swift:
+  - collapsible_default_swift: Default
+  - collapsible_sizes_swift: Sizes
+  - collapsible_colors_swift: Colors
+  - collapsible_props_table: ""

data/app/pb_kits/playbook/pb_contact/_contact.tsx

@@ -50,12 +50,12 @@ type ContactProps = {
   contactDetail?: string,
   contactType?: string,
   contactValue: string,
-  data?: object,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
 }
 
-const Contact = (props: ContactProps) => {
+const Contact = (props: ContactProps): React.ReactElement => {
   const {
     aria = {},
     className,

data/app/pb_kits/playbook/pb_currency/_currency.tsx

@@ -18,7 +18,7 @@ type CurrencyProps = {
   data?: {[key:string]:string},
   decimals?: 'default' | 'matching',
   emphasized?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   label?: string,
   size?: 'sm' | 'md' | 'lg',
@@ -34,7 +34,7 @@ const sizes: {lg: 1, md: 3, sm: 4} = {
   sm: 4,
 }
 
-const Currency = (props: CurrencyProps) => {
+const Currency = (props: CurrencyProps): React.ReactElement => {
   const {
     abbreviate = false,
     align = 'left',

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

@@ -2,7 +2,7 @@ import colors from "../tokens/exports/_colors.scss";
 
 
 // Map Data Color String Props to our SCSS Variables
-const mapColors = (array: string[]) => {
+const mapColors = (array: string[]): string[] => {
     const regex = /(data)\-[1-8]/; //eslint-disable-line
   
     const newArray = array.map((item) => {

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

@@ -3,9 +3,6 @@ import typography from '../tokens/exports/_typography.scss'
 
 import { ThemeProps } from './themeTypes'
 
-import Highcharts from 'highcharts'
-
-const pbButtonHoverColor = '#004ebb'
 const highchartsDarkTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -22,7 +19,7 @@ const highchartsDarkTheme: ThemeProps = {
   chart: {
     borderWidth: 0,
     borderRadius: 0,
-    plotBackgroundColor: null,
+    plotBackgroundColor: undefined,
     plotShadow: false,
     plotBorderWidth: 0,
   },
@@ -64,7 +61,7 @@ const highchartsDarkTheme: ThemeProps = {
     },
   },
   yAxis: {
-    alternateGridColor: null,
+    alternateGridColor: undefined,
     minorTickInterval: null,
     gridLineColor: colors.border_dark,
     minorGridLineColor: colors.border_dark,
@@ -104,11 +101,6 @@ const highchartsDarkTheme: ThemeProps = {
       color: colors.text_dk_lighter,
     },
   },
-  labels: {
-    style: {
-      color: colors.primary,
-    },
-  },
   tooltip: {
     backgroundColor: {
       linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
@@ -130,29 +122,15 @@ const highchartsDarkTheme: ThemeProps = {
   // specific to gauge
   // unfilled gauge color
   pane: {
-    background: {
+    background: [{
       borderColor: colors.border_dark,
-    },
+    }],
   },
 
   plotOptions: {
     series: {
       borderColor: colors.bg_dark_card,
       borderWidth: 2,
-      type: 'area',
-      nullColor: colors.text_dk_lighter,
-      fillColor: {
-        linearGradient: {
-          x1: 0,
-          y1: 0,
-          x2: 0,
-          y2: 1,
-        },
-        stops: [
-          [0, Highcharts.getOptions().colors[0]],
-          [1, 'white'],
-        ],
-      },
       threshold: null,
     },
     // PIE STYLES
@@ -184,15 +162,6 @@ const highchartsDarkTheme: ThemeProps = {
       marker: {
         lineColor: colors.border_dark,
       },
-      area: {
-        shadow: false,
-        states: {
-          hover: {
-            lineWidth: 1,
-          },
-        },
-        threshold: null,
-      },
     },
 
     //TREEMAP CHART STYLES
@@ -210,7 +179,6 @@ const highchartsDarkTheme: ThemeProps = {
         colors.data_7,
         colors.data_8,
       ],
-      colorByPoint: true,
       dataLabels: {
         enabled: true,
         style: {
@@ -229,27 +197,6 @@ const highchartsDarkTheme: ThemeProps = {
       ],
       traverseUpButton: {
         position: { y: -50 },
-        text: '< Back',
-        theme: {
-          r: 4,
-          states: {
-            hover: {
-              style: {
-                fill: pbButtonHoverColor,
-              },
-            },
-          },
-          style: {
-            fill: colors.royal,
-            color: colors.white,
-            fontSize: `${typography.text_small}`,
-            fontWeight: typography.bold,
-            fontFamily: `${typography.font_family_base}`,
-          },
-          stroke: colors.royal,
-          height: 24,
-          width: 90,
-        },
       },
     },
   },

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

@@ -3,9 +3,6 @@ import typography from '../tokens/exports/_typography.scss'
 
 import { ThemeProps } from './themeTypes'
 
-import Highcharts from 'highcharts'
-
-const pbButtonHoverColor = '#004ebb'
 const highchartsTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -22,7 +19,7 @@ const highchartsTheme: ThemeProps = {
   chart: {
     borderWidth: 0,
     borderRadius: 0,
-    plotBackgroundColor: null,
+    plotBackgroundColor: undefined,
     plotShadow: false,
     plotBorderWidth: 0,
   },
@@ -64,7 +61,7 @@ const highchartsTheme: ThemeProps = {
     },
   },
   yAxis: {
-    alternateGridColor: null,
+    alternateGridColor: undefined,
     minorTickInterval: null,
     gridLineColor: colors.border_light,
     minorGridLineColor: colors.border_light,
@@ -104,11 +101,6 @@ const highchartsTheme: ThemeProps = {
       color: colors.text_lt_lighter,
     },
   },
-  labels: {
-    style: {
-      color: colors.primary,
-    },
-  },
   tooltip: {
     backgroundColor: {
       linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
@@ -130,27 +122,13 @@ const highchartsTheme: ThemeProps = {
   // specific to gauge
   // unfilled gauge color
   pane: {
-    background: {
+    background: [{
       borderColor: colors.border_light,
-    },
+    }],
   },
 
   plotOptions: {
     series: {
-      type: 'area',
-      nullColor: colors.text_lt_lighter,
-      fillColor: {
-        linearGradient: {
-          x1: 0,
-          y1: 0,
-          x2: 0,
-          y2: 1,
-        },
-        stops: [
-          [0, Highcharts.getOptions().colors[0]],
-          [1, 'white'],
-        ],
-      },
       threshold: null,
     },
     // PIE STYLES
@@ -182,15 +160,6 @@ const highchartsTheme: ThemeProps = {
       marker: {
         lineColor: '#333',
       },
-      area: {
-        shadow: false,
-        states: {
-          hover: {
-            lineWidth: 1,
-          },
-        },
-        threshold: null,
-      },
     },
 
     //TREEMAP CHART STYLES
@@ -208,7 +177,6 @@ const highchartsTheme: ThemeProps = {
         colors.data_7,
         colors.data_8,
       ],
-      colorByPoint: true,
       dataLabels: {
         enabled: true,
         style: {
@@ -227,27 +195,6 @@ const highchartsTheme: ThemeProps = {
       ],
       traverseUpButton: {
         position: { y: -50 },
-        text: '< Back',
-        theme: {
-          r: 4,
-          states: {
-            hover: {
-              style: {
-                fill: pbButtonHoverColor,
-              },
-            },
-          },
-          style: {
-            fill: colors.royal,
-            color: colors.white,
-            fontSize: `${typography.text_small}`,
-            fontWeight: typography.bold,
-            fontFamily: `${typography.font_family_base}`,
-          },
-          stroke: colors.royal,
-          height: 24,
-          width: 90,
-        },
       },
     },
   },

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

@@ -1,16 +1,20 @@
-export type ThemeProps = {
-    lang?: {[key: string]: string}
-    credits?: {[key: string]: boolean}
-    colors?: string[]
-    chart?: {[key: string]: any}
-    title?: {[key: string]: string | {}}
-    subtitle?: {[key: string]: string | {};}
-    xAxis?: {[key: string]: any;}
-    yAxis?: {[key: string]: any;}
-    legend?: {[key: string]: string | {};}
-    labels?: {[key: string]: {};}
-    tooltip?: {[key: string]: any;}
-    pane?: {[key: string]: {};}
-    plotOptions?: {[key: string]: any;}
-    colorKey?: string
-    }
+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_dashboard_value/_dashboard_value.tsx

@@ -12,7 +12,7 @@ type DashboardValueProps = {
   aria?: { [key: string]: string },
   className?: string,
   data?: { [key: string]: string },
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   statChange?: {
     change? : 'increase' | 'decrease' | 'neutral',

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -15,7 +15,7 @@ type PbDateProps = {
   aria?: { [key: string]: string };
   className?: string;
   data?: { [key: string]: string };
-  htmlOptions?: { [key: string]: string | number | boolean | Function };
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   showDayOfWeek?: boolean;
   showIcon?: boolean;
@@ -24,7 +24,7 @@ type PbDateProps = {
   value: Date;
 };
 
-const PbDate = (props: PbDateProps) => {
+const PbDate = (props: PbDateProps): React.ReactElement => {
   const {
     aria = {},
     alignment = "left",
@@ -57,11 +57,11 @@ const PbDate = (props: PbDateProps) => {
 
   return (
     <div 
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classes}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
     >
       {unstyled
         ? <>

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -26,7 +26,7 @@ type DatePickerProps = {
   format?: string,
   hideIcon?: boolean,
   hideLabel?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   inLine?: boolean,
   inputAria?: { [key: string]: string },

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx

@@ -16,7 +16,7 @@ type DateRangeInlineProps = {
   align?: "left" | "center" | "vertical";
   size?: "sm" | "xs";
   dark?: boolean;
-  htmlOptions?: {[key: string]: string | number | boolean | Function};
+  htmlOptions?: {[key: string]: string | number | boolean | (() => any)};
   icon?: boolean;
   startDate?: Date;
   endDate?: Date;
@@ -34,7 +34,7 @@ const dateTimeIso = (dateValue: Date) => {
   return DateTime.toIso(dateValue);
 };
 
-const DateRangeInline = (props: DateRangeInlineProps) => {
+const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
   const {
     icon = false,
     dark = false,

data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx

@@ -15,12 +15,12 @@ type DateRangeStackedProps = {
   data?: string,
   dark?: boolean,
   endDate: Date,
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   startDate: Date,
 }
 
-const DateRangeStacked = (props: DateRangeStackedProps) => {
+const DateRangeStacked = (props: DateRangeStackedProps): React.ReactElement => {
   const { 
     className, 
     dark = false,