playbook_ui 13.13.0.pre.alpha.play10221678 → 13.13.0.pre.alpha.play10821727

data/app/pb_kits/playbook/pb_contact/docs/_contact_default_swift.md

@@ -0,0 +1,14 @@
+![contact-default](https://github.com/powerhome/playbook/assets/92755007/4226a1e0-5f31-4445-a536-57e95b83768a)
+
+```swift
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBContact(type: .cell, value: "3491859988")
+  PBContact(value: "5555555555")
+  PBContact(type: .email, value: "email@example.com")
+  PBContact(type: .work, value: "3245627482")
+  PBContact(type: .workCell, value: "3245627482")
+}
+
+
+```

data/app/pb_kits/playbook/pb_contact/docs/_contact_props_swift.md

@@ -0,0 +1,6 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **detail** | `Bool` | Displays text describing the Contact's type | `false` | `true` `false` |
+| **contactValue** | `String` | Sets the Contact's text value |  |  |
+| **type** | `ContactType` | Sets the icon | `.home` | `cell` `email` `home` `work` `workCell` `wrongPhone` `ext` `custom` |

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail_swift.md

@@ -0,0 +1,14 @@
+![contact-detail-indicator](https://github.com/powerhome/playbook/assets/92755007/2a29d4b5-6e7b-43ff-8e7c-0dbeec11627e)
+
+```swift
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBContact(type: .cell, value: "3491859988", detail: true)
+  PBContact(value: "5555555555", detail: true)
+  PBContact(type: .email, value: "email@example.com", detail: true)
+  PBContact(type: .work, value: "3245627482", detail: true)
+  PBContact(type: .ext, value: "1234", detail: true)
+}
+
+
+```

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

@@ -8,3 +8,9 @@ examples:
   react:
   - contact_default: Default
   - contact_with_detail: Detail Indicator
+
+
+  swift:
+  - contact_default_swift: Default
+  - contact_with_detail_swift: Detail Indicator
+  - contact_props_swift: ""

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/docs/_date_alignment_swift.md

@@ -0,0 +1,11 @@
+![date-alignment](https://github.com/powerhome/playbook/assets/92755007/094761cb-5151-4de5-a8e1-f905455c2aca)
+
+```swift
+
+VStack(spacing: Spacing.small) {
+  PBDate(Date(), variant: .standard, typography: .title4, alignment: .leading)
+  PBDate(Date(), variant: .withIcon(isStandard: true), typography: .title4, iconSize: .x1, alignment: .center)
+  PBDate(Date(), variant: .short, typography: .title4, alignment: .trailing)
+}
+
+```

data/app/pb_kits/playbook/pb_date/docs/_date_default_swift.md

@@ -0,0 +1,16 @@
+![date-default](https://github.com/powerhome/playbook/assets/92755007/0d9f151d-2a18-445c-add3-8194c343bfea)
+
+
+```swift
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBDate(Date(), variant: .short)
+  PBDate(Date(), variant: .dayDate)
+  PBDate(Date(), variant: .standard)
+  Spacer()
+  PBDate(Date(), variant: .short, typography: .title4)
+  PBDate(Date(), variant: .dayDate, typography: .title4)
+  PBDate(Date(), variant: .standard, typography: .title4)
+}
+
+```

data/app/pb_kits/playbook/pb_date/docs/_date_props_swift.md

@@ -0,0 +1,8 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **datestamp** | `Date` | Sets the date |  |  |
+| **variant** | `Variant` | Changes the style | `.short` | `.short` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)` |
+| **typography** | `PBFont` | Sets the font | `.caption` | `.title1` `.title2` `.title3` `.title4` `.body` `.buttonText` `.largeCaption` `.caption` `.subcaption` `.monogram` `.badgeText` `.detail` |
+| **iconSize** | `PBIcon.IconSize` | Chances the icon's size | `.x1` | `xSmall` `small` `large` `x1` `x2` `x3` `x4` `x5` `x6` `x7` `x8` `x9` `x10` |
+| **alignment** | `Alignment` | Changes the alignment | `.leading` | `.leading` `.trailing` |

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled_swift.md

@@ -0,0 +1,11 @@
+![date-unstyled](https://github.com/powerhome/playbook/assets/92755007/dc0ab7cf-0d97-407c-9aac-f53645eb6ee2)
+
+```swift
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBDate(Date(), variant: .short, typography: .body)
+  PBDate(Date(), variant: .standard, typography: .title1)
+  PBDate(Date(), variant: .withIcon(isStandard: false), typography: .subcaption, iconSize: .xSmall)
+}
+
+```

data/app/pb_kits/playbook/pb_date/docs/_date_variants_swift.md

@@ -0,0 +1,14 @@
+![date-varients](https://github.com/powerhome/playbook/assets/92755007/bb240082-afb9-4802-af5f-7aaccec37aae)
+
+
+```swift
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBDate(Date(), variant: .withIcon(isStandard: true), typography: .caption, iconSize: .xSmall)
+  PBDate(Date(), variant: .standard, typography: .title4)
+  PBDate(Date(), variant: .withIcon(isStandard: true), typography: .title4, iconSize: .x1)
+  PBDate(Date(), variant: .dayDate, typography: .title4)
+  PBDate(Date(), variant: .withIcon(isStandard: false), typography: .title4, iconSize: .x1)
+}
+
+```

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

@@ -12,3 +12,10 @@ examples:
   - date_variants: Variants
   - date_alignment: Alignment
   - date_unstyled: Unstyled
+
+  swift:
+  - date_default_swift: Default
+  - date_variants_swift: Variants
+  - date_alignment_swift: Alignment
+  - date_unstyled_swift: Unstyled
+  - date_props_swift: ""

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

@@ -13,7 +13,6 @@ type DatePickerProps = {
   allowInput?: boolean,
   aria?: { [key: string]: string },
   className?: string,
-  customQuickPickDates: { override: boolean, dates: any[] },
   dark?: boolean,
   data?: { [key: string]: string },
   defaultDate?: string,
@@ -26,7 +25,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 },
@@ -57,7 +56,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     allowInput = false,
     aria = {},
     className,
-    customQuickPickDates,
     dark = false,
     data = {},
     defaultDate = '',
@@ -106,7 +104,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 useEffect(() => {
   datePickerHelper({
     allowInput,
-    customQuickPickDates,
     defaultDate,
     disableDate,
     disableRange,

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -5,8 +5,6 @@ module Playbook
     class DatePicker < Playbook::KitBase
       prop :allow_input, type: Playbook::Props::Boolean,
                          default: false
-      prop :custom_quick_pick_dates, type: Playbook::Props::HashProp,
-                                     default: {}
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
       prop :default_date, type: Playbook::Props::String,
@@ -81,7 +79,6 @@ module Playbook
       def date_picker_config
         {
           allowInput: allow_input,
-          customQuickPickDates: custom_quick_pick_dates,
           defaultDate: default_date,
           disableDate: disable_date,
           disableRange: disable_range,

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -11,7 +11,6 @@ const getPositionElement = (element: string | Element) => {
 
 type DatePickerConfig = {
   closeOnSelect?: boolean,
-  customQuickPickDates: { override: boolean, dates: any[] },
   disableDate?: number[],
   disableRange?: number[],
   disableWeekdays?: number[],
@@ -35,7 +34,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   const {
     allowInput,
     closeOnSelect = true,
-    customQuickPickDates = { override: true, dates: [] },
     defaultDate,
     disableDate,
     disableRange,
@@ -123,26 +121,27 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     }
   }
 
-  const setPlugins = (thisRangesEndToday: boolean, customQuickPickDates: any) => {
+  const setPlugins = (thisRangesEndToday: boolean) => {
     const pluginList = []
-  
+
     // month and week selection
     if (selectionType === "month" || plugins.length > 0) {
       pluginList.push(monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }))
     } else if ( selectionType === "week") {
       pluginList.push(weekSelect())
-  
+
     } else if (selectionType === "quickpick") {
-      //------- QUICKPICK VARIANT PLUGIN -------------//
-      pluginList.push(quickPickPlugin(thisRangesEndToday, customQuickPickDates))
+    //------- QUICKPICK VARIANT PLUGIN -------------//
+    pluginList.push(quickPickPlugin(thisRangesEndToday))
     }
-  
+
     // time selection
     if (enableTime) pluginList.push(timeSelectPlugin({ caption: timeCaption, showTimezone: showTimezone}))
-  
+
+
     return pluginList
   }
-  
+
   const getDateFormat = () => {
     return enableTime ? `${format} ${timeFormat}` : format
   }
@@ -182,7 +181,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     onYearChange: [() => {
       yearChangeHook()
     }],
-    plugins: setPlugins(thisRangesEndToday, customQuickPickDates),
+    plugins: setPlugins(thisRangesEndToday),
     position,
     positionElement: getPositionElement(positionElement),
     prevArrow: '<i class="far fa-angle-left"></i>',

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.jsx

@@ -1,5 +1,5 @@
-import React from "react"
-import DatePicker from "../_date_picker"
+import React from 'react'
+import DatePicker from '../_date_picker'
 
 const DatePickerQuickPickReact = (props) => (
   <>

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

@@ -10,8 +10,6 @@ examples:
   - date_picker_range: Range
   - date_picker_quick_pick_rails: Range (Quick Pick)
   - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
-  - date_picker_quick_pick_custom: Custom Quick Pick Dates
-  - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
@@ -39,8 +37,6 @@ examples:
   - date_picker_range: Range
   - date_picker_quick_pick_react: Range (Quick Pick)
   - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
-  - date_picker_quick_pick_custom: Custom Quick Pick Dates
-  - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max

data/app/pb_kits/playbook/pb_date_picker/docs/index.js

@@ -22,5 +22,3 @@ export { default as DatePickerAllowInput } from './_date_picker_allow_input'
 export { default as DatePickerQuickPickReact } from './_date_picker_quick_pick_react'
 export { default as DatePickerQuickPickRangeLimit } from './_date_picker_quick_pick_range_limit'
 export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
-export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_custom'
-export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'