RubyGems - playbook_ui_docs - Versions diffs - 13.13.0 → 13.14.0.pre.alpha.play1101betaicons1798 - Mend

playbook_ui_docs 13.13.0 → 13.14.0.pre.alpha.play1101betaicons1798

Files changed (101) hide show

data/app/pb_kits/playbook/pb_button/docs/_button_reaction_swift.md ADDED Viewed

@@ -0,0 +1,26 @@
+![reaction-button](https://github.com/powerhome/playbook/assets/54749071/10d21ee2-4faf-4c18-ab72-242df8f837c4)
+```swift
+@State private var count: Int = 153
+@State private var count1: Int = 5
+HStack(alignment: .center, spacing: 12) {
+            PBReactionButton(
+              count: $count,
+              icon: "\u{1F389}",
+              isInteractive: true
+            )
+            PBReactionButton(
+              count: $count1,
+              icon: "1️⃣",
+              isInteractive: false
+            )
+            PBReactionButton(
+              isInteractive: false
+            )
+            PBReactionButton(
+              pbIcon: PBIcon(FontAwesome.user),
+              isInteractive: false
+            )
+}
+```

data/app/pb_kits/playbook/pb_button/docs/example.yml CHANGED Viewed

@@ -32,4 +32,5 @@ examples:
   - button_icon_options_swift: Button Icon Options
   - button_circle_swift: Circle Button
   - button_size_swift: Button Size
+  - button_reaction_swift: Button Reaction
   - button_props_swift: ""

data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx CHANGED Viewed

@@ -57,7 +57,7 @@ const CardBackground = (props) => {
           background="product_1_background"
           marginBottom="sm"
           {...props}
-        >
+      >
         <Body
             dark
             text="Product 1 Background"
@@ -69,11 +69,12 @@ const CardBackground = (props) => {
       <Card
           background="product_7_highlight"
           marginBottom="sm"
-          {...props} >
+          {...props}
+      >
         <Body
             dark
-            text="Product 7 Highlight"
-          />
+            text="Product 7 Highlight"
+        />
       </Card>

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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/docs/_date_picker_quick_pick_custom.html.erb ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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_dialog/docs/_dialog_default_swift.md ADDED Viewed

@@ -0,0 +1,11 @@
+![user-default](https://github.com/powerhome/playbook/assets/54749071/f9b593d5-a688-49bf-a282-8fb70058b539)
+```swift
+PBDialog(
+            title: "This is some informative text",
+            message: infoMessage,
+            cancelButton: ("Cancel", closeToast),
+            confirmButton: ("Okay", closeToast)
+          )
+```

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx CHANGED Viewed

@@ -49,15 +49,18 @@ const DialogFullHeight = () => {
       <Flex wrap>
         <Button id="sm"
             marginRight="md"
-            onClick={toggleHeaderSeparatorDialog}>
+            onClick={toggleHeaderSeparatorDialog}
+        >
           {"Small Dialog"}
         </Button>
         <Button marginRight="md"
-            onClick={toggleFooterSeparatorDialog}>
+            onClick={toggleFooterSeparatorDialog}
+        >
           {"Medium Dialog"}
         </Button>
         <Button marginRight="md"
-            onClick={toggleBothSeparatorsDialog}>
+            onClick={toggleBothSeparatorsDialog}
+        >
           {"Large Dialog"}
         </Button>
       </Flex>
@@ -89,7 +92,8 @@ const DialogFullHeight = () => {
             <Dialog.Footer>
               <Button onClick={toggle}>{"Send My Issue"}</Button>
               <Button onClick={toggle}
-                  variant="link">
+                  variant="link"
+              >
                 {"Back"}
               </Button>
             </Dialog.Footer>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx CHANGED Viewed

@@ -48,15 +48,18 @@ const DialogFullHeightPlacement = () => {
       <Flex wrap>
         <Button id="sm"
             marginRight="md"
-            onClick={toggleHeaderSeparatorDialog}>
+            onClick={toggleHeaderSeparatorDialog}
+        >
           {"Left Dialog"}
         </Button>
         <Button marginRight="xl"
-            onClick={toggleFooterSeparatorDialog}>
+            onClick={toggleFooterSeparatorDialog}
+        >
           {"Center Dialog"}
         </Button>
         <Button marginRight="xl"
-            onClick={toggleBothSeparatorsDialog}>
+            onClick={toggleBothSeparatorsDialog}
+        >
           {"Right Dialog"}
         </Button>
       </Flex>
@@ -88,7 +91,8 @@ const DialogFullHeightPlacement = () => {
             <Dialog.Footer>
               <Button onClick={toggle}>{"Send My Issue"}</Button>
               <Button onClick={toggle}
-                  variant="link">
+                  variant="link"
+              >
                 {"Back"}
               </Button>
             </Dialog.Footer>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_props_table.md ADDED Viewed

@@ -0,0 +1,13 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **content** | `Content` | Sets the View content |  |  |
+| **title** | `String` | Sets title for dialog header |  |  |
+| **message** | `String` | Sets dialog message|  |  |
+| **variant** | `DialogVariant` | Changes variant of dialog | `.default` | `.default` `.status()` |
+| **isStacked** | `isStacked` | Changes whether the dialog buttons are stacked or inline | `false` | `true` `false`  |
+| **cancelButton** | `Action` | Dismisses the dialog |  |  |
+| **confirmButton** | `Action` | Confirms dialog message was received |  |  |
+| **onClose** | `Action` | Starts action when dialog is closed |  | |
+| **size** | `DialogSize` | Determines size of dialog |  `.medium`| `.small` `.medium` `large` |
+| **shouldCloseOnOverlay** | `Bool` | Determines if overlay should close | `false` | `true` `false`  |

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx CHANGED Viewed

@@ -16,10 +16,12 @@ const DialogScrollable = () => {
   return (
     <>
       <Button marginRight="md"
-          onClick={toggleDialog1}>{'Open Dialog'}
+          onClick={toggleDialog1}
+      >{'Open Dialog'}
       </Button>
       <Button marginRight="md"
-          onClick={toggleDialog2}>{'Open Full Height Dialog'}
+          onClick={toggleDialog2}
+      >{'Open Full Height Dialog'}
       </Button>
       <Dialog
           cancelButton="Cancel"

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes_swift.md ADDED Viewed

@@ -0,0 +1,18 @@
+![dialog-large](https://github.com/powerhome/playbook/assets/54749071/41ea273d-3f85-4514-88d7-21f49499f9a2)
+```swift
+    @State private var presentSmallDialog: Bool = false
+    @State private var presentMediumDialog: Bool = false
+    @State private var presentLargeDialog: Bool = false
+    let infoMessage = "This is a message for informational purposes only and requires no action."
+     PBDialog(
+            title: "Large",
+            message: infoMessage,
+            variant: .default,
+            isStacked: false,
+            cancelButton: ("Cancel", {}),
+            confirmButton: ("Okay", {}),
+            size: .large
+          )
+```

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx CHANGED Viewed

@@ -84,7 +84,7 @@ const DialogStatus = () => {
       <Flex
           rowGap="xs"
           wrap
-        >
+      >
         <Button
             marginRight="md"
             onClick={toggleDefaultAlert}

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status_swift.md ADDED Viewed

@@ -0,0 +1,14 @@
+![success](https://github.com/powerhome/playbook/assets/54749071/a3605f4f-ea77-4377-a1bd-977bb3c26a03)
+```swift
+ PBDialog(
+              title: "Success!",
+              message: infoMessage,
+              variant: .status(.success),
+              isStacked: true,
+              cancelButton: ("Cancel", closeToast),
+              confirmButton: ("Okay", closeToast),
+              size: .small
+            )
+```

data/app/pb_kits/playbook/pb_dialog/docs/example.yml CHANGED Viewed

@@ -22,3 +22,10 @@ examples:
   - dialog_stacked_alert: Stacked Button Alert
   - dialog_full_height: Full Height
   - dialog_full_height_placement: Full Height Placement
+  swift:
+  - dialog_default_swift: Simple
+  - dialog_sizes_swift: Sizes
+  - dialog_status_swift: Status
+  - dialog_props_table: ""

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

@@ -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"
+)
+```

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis_swift.md ADDED Viewed

@@ -0,0 +1,34 @@
+![home-address-street-emphasis](https://github.com/powerhome/playbook/assets/92755007/338ed5f9-7e06-4e4c-b71e-d0a348f7a6d6)
+```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"
+)
+Spacer(minLength: Spacing.medium)
+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",
+  emphasize: .city
+)
+```

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link_swift.md ADDED Viewed

@@ -0,0 +1,18 @@
+![home-address-street-link](https://github.com/powerhome/playbook/assets/92755007/890a61d9-896b-45a1-aa7c-c78783f3ac54)
+```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"
+)
+```

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_modified_swift.md ADDED Viewed

@@ -0,0 +1,13 @@
+![home-address-street-modified](https://github.com/powerhome/playbook/assets/92755007/32e16708-896f-41c8-ae06-7bea00225b4f)
+```swift
+PBHomeAddressStreet(
+  address: "70 Prospect Ave",
+  city: "West Chester",
+  state: "PA",
+  territory: "PHL",
+  zipcode: "19382"
+)
+```

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_props_swift.md ADDED Viewed

@@ -0,0 +1,14 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **address** | `String` | Sets the address |  |  |
+| **withBullet** | `Bool` | Adds a bullet after the address | `false` | `false` `true` |
+| **houseStyle** | `String` | Sets the house style | `nil` |  |
+| **addressCont** | `String` | Sets additional address text | `nil` |  |
+| **city** | `String` | Sets the city |  |  |
+| **homeId** | `String` | Sets the home ID | `nil` |  |
+| **homeUrl** | `String` | Adds a URL to the homeID | `nil` |  |
+| **state** | `String` | Sets the state |  |  |
+| **territory** | `String` | Sets the territory |  |  |
+| **zipcode** |  `String` | Sets the zipcode |  |  |
+| **emphasize** | `Emphasize` | Changes text to bold | `.address` | `.address` `.city`  `.cityWithZipcode` |

data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml CHANGED Viewed

@@ -12,3 +12,9 @@ examples:
   - home_address_street_modified: Modified
   - home_address_street_link: Link
+  swift:
+  - home_address_street_default_swift: Default
+  - home_address_street_emphasis_swift: Emphasis
+  - home_address_street_modified_swift: Modified
+  - home_address_street_link_swift: Link
+  - home_address_street_props_swift: ""