playbook_ui 13.13.0 → 13.14.0.pre.alpha.PLAY1109bugdisplaypropblocksfontcolor1784

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '098c0dca78160e891e377c26ed0dff2b5b2528e0676f779c630fe54bed26aed8'
-  data.tar.gz: 4c58eab597c52277785c420a8c9d913d2de6911a57523612df5b52f76105b821
+  metadata.gz: 8ffc4f97c395ad7ccf46927ac7de9951900347fa14517d3b2eb2c630e22cb359
+  data.tar.gz: '04629c19a8a33d87804cfec3191d24fd45e5014c29d869a291143255b89a39fe'
 SHA512:
-  metadata.gz: f085821c22ff14c787f4b1d9aa1d12f284d94773b1dafaa2b0b01b815db7cabef337d275d98a78418700eedd20bfa6acf49408d14b619d42a619d19ee6136ee1
-  data.tar.gz: 63e2f1a1aa8b5cef8ca6235ab4999f74995a9c68bfa6e4026a9d797470ab1e9419cc0287967b98fd82c51ce3bfedc53a9029e4ee4aa545e37d071c182215fcd9
+  metadata.gz: be32d4c62bbc74d86831742b40ac3d6d55539f75d6bd6a624ac07cccf4ce5ac6bc061390062f6c5774f2d4b7f8c48db59c414eaf20adc7c6ee73b406eeeb57d8
+  data.tar.gz: 3eb126af7f71f54853bdc7810c0f67a312fbd4e182f04a65e8a4bfb076dc5b1354cbe5e458417632ff3baaa12772633db4396aef979022c72500f8c4fd14ff9d

data/app/pb_kits/playbook/index.js

@@ -130,4 +130,16 @@ export { default as dialogHelper } from './pb_dialog/dialogHelper'
 
 //Theming
 export {default as mapTheme} from './pb_map/pbMapTheme'
-export {default as useCollapsible} from './pb_collapsible/useCollapsible'
+export {default as useCollapsible} from './pb_collapsible/useCollapsible'
+
+// CSS Tokens
+export { default as borderRadius } from './tokens/exports/_border_radius.scss'
+export { default as colors } from './tokens/exports/_colors.scss'
+export { default as lineHeight } from './tokens/exports/_line_height.scss'
+export { default as opacity } from './tokens/exports/_opacity.scss'
+export { default as positioning } from './tokens/exports/_positioning.scss'
+export { default as scale } from './tokens/exports/_scale.scss'
+export { default as screenSizes } from './tokens/exports/_screen_sizes.scss'
+export { default as shadows } from './tokens/exports/_shadows.scss'
+export { default as spacing } from './tokens/exports/_spacing.scss'
+export { default as typography } from './tokens/exports/_typography.scss'

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -80,7 +80,6 @@ $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors)
   width: $width;
   height: $height;
   background: $background;
-  z-index: 10;
 }
 
 @mixin pb_card_header_color($header_color) {

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_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,
@@ -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"
+}) %>
+

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

@@ -0,0 +1,34 @@
+import React from "react"
+import DatePicker from "../_date_picker"
+
+const DatePickerQuickPickCustomOverride = (props) => (
+  <>
+    <DatePicker
+        allowInput
+        customQuickPickDates={{
+        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"],
+          },
+        ],
+      }}
+        marginTop='lg'
+        mode='range'
+        pickerId='date-picker-quick-pick-custom'
+        placeholder='mm/dd/yyyy to mm/dd/yyyy'
+        selectionType='quickpick'
+        {...props}
+    />
+  </>
+)
+
+export default DatePickerQuickPickCustomOverride

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

@@ -0,0 +1 @@
+The customQuickPickDates/custom_quick_pick_dates prop allows for an override boolean. The override allows for the user to completely override the quick pick dates that ship with the component. Default of `override` is set to true. If you would like to simply append your dates to the default quick pick dates, set this prop to false explicitly.

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,6 +10,8 @@ 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
@@ -37,6 +39,8 @@ 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,3 +22,5 @@ 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'

data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx

@@ -19,9 +19,14 @@ type pluginDataType = {
   rangesButtons: [] | any,
 }
 
+type customQuickPickDatesType = {
+  override: boolean,
+  dates: { label: string, value: string[] | { timePeriod: string, amount: number } }[],
+}
+
 let activeLabel = ""
 
-const quickPickPlugin = (thisRangesEndToday: boolean) => {
+const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: customQuickPickDatesType | undefined) => {
   return function (fp: FpTypes & any): any {
     const today = new Date()
     const yesterday = DateTime.getYesterdayDate(new Date())
@@ -46,8 +51,38 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
     const lastYearStartDate = DateTime.getPreviousYearStartDate(new Date())
     const lastYearEndDate = DateTime.getPreviousYearEndDate(new Date())
 
-    // variable that holds the ranges available
-    const ranges = {
+    const calculateDateRange = (timePeriod: string, amount: number): Date[] => {
+      const endDate = new Date();
+      let startDate = new Date();
+    
+      switch (timePeriod) {
+        case 'days':
+          startDate.setDate(endDate.getDate() - amount);
+          break;
+        case 'weeks':
+          startDate.setDate(endDate.getDate() - (amount * 7));
+          break;
+        case 'months':
+          startDate.setMonth(endDate.getMonth() - amount);
+          break;
+        case 'quarters':
+          startDate.setMonth(endDate.getMonth() - (amount * 3));
+          break;
+        case 'years':
+          startDate.setFullYear(endDate.getFullYear() - amount);
+          break;
+        default:
+          throw new Error('Invalid time period');
+      }
+      return [startDate, endDate];
+    };
+  
+
+    type rangesType = {
+      [key: string]: Date[]
+    };
+
+    let ranges: rangesType = {
       'Today': [today, today],
       'Yesterday': [yesterday, yesterday],
       'This week': [thisWeekStartDate, thisWeekEndDate],
@@ -58,16 +93,47 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
       'Last month': [lastMonthStartDate, lastMonthEndDate],
       'Last quarter': [lastQuarterStartDate, lastQuarterEndDate],
       'Last year': [lastYearStartDate, lastYearEndDate]
+    };
+
+    
+    if (customQuickPickDates && Object.keys(customQuickPickDates).length !== 0) {
+      if (customQuickPickDates.dates.length && customQuickPickDates.override === false) {
+        customQuickPickDates.dates.forEach((item) => {
+          if (Array.isArray(item.value)) {
+            ranges[item.label] = item.value.map((dateStr: string) => new Date(dateStr));
+          } else {
+            ranges[item.label] = calculateDateRange(
+              item.value.timePeriod,
+              item.value.amount
+            )
+          }
+        })
+      } else if(customQuickPickDates.dates.length && customQuickPickDates.override !== false) {
+        ranges = {}
+        customQuickPickDates.dates.forEach((item) => {
+          if (Array.isArray(item.value)) {
+            ranges[item.label] = item.value.map((dateStr: string) => new Date(dateStr));
+          } else {
+            ranges[item.label] = calculateDateRange(
+              item.value.timePeriod,
+              item.value.amount
+            )
+          }
+        })
+      }
     }
 
+
     // creating the ul element for the nav dropdown and giving it classnames
     const rangesNav = document.createElement('ul');
 
+
     // creating the pluginData object that will hold the properties of this plugin
     const pluginData: pluginDataType = {
       ranges: ranges,
       rangesNav: rangesNav,
       rangesButtons: [],
+
     };
 
     /**

data/app/pb_kits/playbook/pb_detail/_detail.scss

@@ -6,13 +6,13 @@
   @include pb_detail;
 
   @each $color_name, $color_value in $pb_detail_colors {
-    &[class*=_#{$color_name}] {
+    &[class*=color_#{$color_name}] {
       @include pb_detail($color_value);
     }
   }
 
   @each $dark_color_name, $dark_color_value in $pb_dark_detail_colors{
-    &[class*=_#{$dark_color_name}][class*=dark]{
+    &[class*=color_#{$dark_color_name}][class*=dark]{
       @include pb_detail($dark_color_value)
     }
   }

data/app/pb_kits/playbook/pb_detail/_detail.tsx

@@ -11,7 +11,7 @@ type DetailProps = {
   color?: 'light' | 'default' | 'lighter' | 'link' | 'error' | 'success',
   dark?: boolean,
   data?: { [key: string]: string },
-  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
   text?: string,
@@ -36,7 +36,7 @@ const Detail = (props: DetailProps) => {
   const htmlProps = buildHtmlProps(htmlOptions);
   const isBold = bold ? "bold" : null
   const classes = classnames(
-    buildCss('pb_detail_kit', color),
+    buildCss('pb_detail_kit', `color`, color),
     isBold,
     globalProps(props),
     className

data/app/pb_kits/playbook/pb_detail/detail.rb

@@ -14,7 +14,7 @@ module Playbook
       prop :text
 
       def classname
-        generate_classname("pb_detail_kit", color) + is_bold
+        generate_classname("pb_detail_kit", "color", color) + is_bold
       end
 
       def content

data/app/pb_kits/playbook/pb_detail/detail.test.jsx

@@ -12,7 +12,7 @@ test('returns namespaced class name', () => {
   )
 
   const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_detail_kit_light')
+  expect(kit).toHaveClass('pb_detail_kit_color_light')
 })
 
 test('with colors', () => {
@@ -28,7 +28,7 @@ test('with colors', () => {
     )
 
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(`pb_detail_kit_${color}`)
+    expect(kit).toHaveClass(`pb_detail_kit_color_${color}`)
   })
 })
 

data/app/pb_kits/playbook/pb_enhanced_element/element_observer.ts

@@ -1,4 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// eslint-disable-next-line
 // @ts-nocheck
 import PbEnhancedElement from "./index"
 

data/app/pb_kits/playbook/pb_enhanced_element/index.ts

@@ -1,4 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// eslint-disable-next-line
 // @ts-nocheck
 import ElementObserver from './element_observer'
 

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default_swift.md

@@ -0,0 +1,18 @@
+![home-address-street-default](https://github.com/powerhome/playbook/assets/92755007/a4c97536-a402-4cc2-90be-4eeda3b57f6d)
+
+```swift
+
+PBHomeAddressStreet(
+  address: "70 Prospect Ave",
+  withBullet: true,
+  houseStyle: "Colonial",
+  addressCont: "Apt M18",
+  city: "West Chester",
+  homeId: "8250263",
+  homeUrl: "https://powerhrg.com/",
+  state: "PA",
+  territory: "PHL",
+  zipcode: "19382"
+)
+
+```