playbook_ui 13.13.0 → 13.14.0.pre.alpha.play1101betaicons1798

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,6 +13,7 @@ type DatePickerProps = {
   allowInput?: boolean,
   aria?: { [key: string]: string },
   className?: string,
+  customQuickPickDates: { override: boolean, dates: any[] },
   dark?: boolean,
   data?: { [key: string]: string },
   defaultDate?: string,
@@ -25,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 },
@@ -56,6 +57,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     allowInput = false,
     aria = {},
     className,
+    customQuickPickDates,
     dark = false,
     data = {},
     defaultDate = '',
@@ -104,6 +106,7 @@ 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,6 +5,8 @@ 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,
@@ -79,6 +81,7 @@ 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,6 +11,7 @@ const getPositionElement = (element: string | Element) => {
 
 type DatePickerConfig = {
   closeOnSelect?: boolean,
+  customQuickPickDates: { override: boolean, dates: any[] },
   disableDate?: number[],
   disableRange?: number[],
   disableWeekdays?: number[],
@@ -34,6 +35,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   const {
     allowInput,
     closeOnSelect = true,
+    customQuickPickDates = { override: true, dates: [] },
     defaultDate,
     disableDate,
     disableRange,
@@ -121,27 +123,26 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     }
   }
 
-  const setPlugins = (thisRangesEndToday: boolean) => {
+  const setPlugins = (thisRangesEndToday: boolean, customQuickPickDates: any) => {
     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))
+      //------- QUICKPICK VARIANT PLUGIN -------------//
+      pluginList.push(quickPickPlugin(thisRangesEndToday, customQuickPickDates))
     }
-
+  
     // time selection
     if (enableTime) pluginList.push(timeSelectPlugin({ caption: timeCaption, showTimezone: showTimezone}))
-
-
+  
     return pluginList
   }
-
+  
   const getDateFormat = () => {
     return enableTime ? `${format} ${timeFormat}` : format
   }
@@ -181,7 +182,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     onYearChange: [() => {
       yearChangeHook()
     }],
-    plugins: setPlugins(thisRangesEndToday),
+    plugins: setPlugins(thisRangesEndToday, customQuickPickDates),
     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_custom.html.erb

@@ -0,0 +1,29 @@
+<%= pb_rails("date_picker", props: {
+  allow_input: true,
+  custom_quick_pick_dates: {
+    dates: [
+      # Allow Playbook to handle the logic...
+      {
+        label: "Last 15 months",
+        value: {
+          timePeriod: "months",
+          amount: 15,
+        },
+      },
+      # Or, be explicit with an exact date range for more control...
+      {
+        label: "First Week of June 2022",
+        value: ["06/01/2022", "06/07/2022"],
+      },
+    ],
+  },
+  end_date_id: "quick-pick-end-date",
+  end_date_name: "quick-pick-end-date",
+  mode: "range",
+  picker_id: "date-picker-quick-pick-custom",
+  placeholder: "mm/dd/yyyy to mm/dd/yyyy",
+  selection_type: "quickpick",
+  start_date_id: "quick-pick-start-date",
+  start_date_name: "quick-pick-start-date"
+}) %>
+

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

@@ -0,0 +1,34 @@
+import React from "react"
+import DatePicker from "../_date_picker"
+
+const DatePickerQuickPickCustom = (props) => (
+  <>
+   <DatePicker
+       allowInput
+       customQuickPickDates={{
+        dates: [
+          // Allow Playbook to handle the logic...
+          {
+            label: "Last 15 months",
+            value: {
+              timePeriod: "months",
+              amount: 15,
+            },
+          },
+          // Or, be explicit with an exact date range for more control...
+          {
+            label: "First Week of June 2022",
+            value: ["06/01/2022", "06/07/2022"],
+          },
+        ],
+      }}
+       mode='range'
+       pickerId='date-picker-quick-pick-custom-override'
+       placeholder='mm/dd/yyyy to mm/dd/yyyy'
+       selectionType='quickpick'
+       {...props}
+   />
+  </>
+)
+
+export default DatePickerQuickPickCustom

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom.md

@@ -0,0 +1,7 @@
+The customQuickPickDates/custom_quick_pick_dates prop allows for the user/dev to define their own quick pick dates. 
+The prop accepts an object with two key/value pairs: dates & override (separate doc example below).
+
+The dates property accepts an array of objects. Each object in the array has label and value properties. The label is what will be displayed in the UI of the dropdown menu. The value property is just the date that is going to be passed to the datepicker. The value property can be an array of two strings that represent a range, allowing for the dev to be extremely specific. Additionally, the dates array allows for a clean, simple API under that automatically converts dates in a common vernacular. 
+
+The timePeriod property accepts "days", "weeks", "months", "quarters" or "years", representing past time periods. 
+The amount property accepts any number.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_custom_override.html.erb

@@ -0,0 +1,28 @@
+<%= pb_rails("date_picker", props: {
+  allow_input: true,
+  custom_quick_pick_dates: {
+    override: false,
+    dates: [
+      {
+        label: "Last 15 months",
+        value: {
+          timePeriod: "months",
+          amount: 15,
+        },
+      },
+      {
+        label: "First Week of June 2022",
+        value: ["06/01/2022", "06/07/2022"],
+      },
+    ],
+  },
+  end_date_id: "quick-pick-end-date",
+  end_date_name: "quick-pick-end-date",
+  mode: "range",
+  picker_id: "date-picker-quick-pick-override",
+  placeholder: "mm/dd/yyyy to mm/dd/yyyy",
+  selection_type: "quickpick",
+  start_date_id: "quick-pick-start-date",
+  start_date_name: "quick-pick-start-date"
+}) %>
+