playbook_ui_docs 13.27.0.pre.alpha.PLAY1342DRYcontenttagRailssimplekits2896 → 13.27.0.pre.alpha.PLAY1349checkboxzindexsticky2936

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a0267f5484779fb07b6aba31bdfdd378d05df2060018512dfb695f0a7ee223c6
-  data.tar.gz: 50c001971aa8d1e96f8f4d3d364ba760742c9598a4d0534448b32e7effa880d0
+  metadata.gz: 4134036f740bcd4977836fb024499446a1a8f826088b89aeb20e7fab3ffa24e1
+  data.tar.gz: c327257a2aa21f0d845b7df2d7bcee6e46413035db0c74f88426388d63ef3586
 SHA512:
-  metadata.gz: 40872da1deea3551a90e8ad1be0adeeb732f1d4cc96789ad795900f2dc45b3e7946f15c1cf9101b73db327f6bf9656945972b99fb929084038c67dba674ac956
-  data.tar.gz: f46eae90558ab75dc1e2a7b4aed4ab76cf7512b7a5533e1a2ee8b0e3707dc30eed32f9ada05523c4ea038a0ce0404b9f81fb7f90bd88152af5fcb02628260fae
+  metadata.gz: c58fc52783e5868c1db19e94fd6234349875e998b7a8fd6a8232abf6ffc991e6fe16226e42acf3002b817021a440d8114a3d0add292d7e6c5f8b1e317ee08c9d
+  data.tar.gz: 33b8b3632e0aa675f0f7ba71904c2e3a458a89cdbeedb623a8aa412badd5cd7e159e6d1bb6ab6c63c9ca3cbacfb124d2dbd5895d9a8b81304584a437716d7650

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { Collapsible, useCollapsible, Background, Flex, Title, List, ListItem } from '../..'
+
+const CollapsibleCustomMain = () => {
+  const [isCollapsed, setIsCollapsed] = useCollapsible(true)
+
+  return (
+  <>
+    <Collapsible
+        collapsed={isCollapsed}
+    >
+          <Background 
+              backgroundColor="white" 
+              cursor="pointer"
+              htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
+              position="sticky" 
+              top="0" 
+          >
+              <Flex 
+                  align="center" 
+                  gap="sm"
+                  justify="between" 
+              >
+                <Title 
+                    size={4} 
+                    text="Custom Main Section" 
+                />
+              </Flex>
+          </Background>
+      <Collapsible.Content padding="none">
+          <div>
+          <List>
+              <ListItem 
+                  align="stretch"
+                  flexDirection="column" 
+              >
+                Checklist item
+              </ListItem>
+              <ListItem 
+                  align="stretch"
+                  flexDirection="column" 
+              >
+                Checklist item
+              </ListItem>
+              <ListItem 
+                  align="stretch"
+                  flexDirection="column" 
+              >
+                Checklist item
+              </ListItem>
+              <ListItem 
+                  align="stretch"
+                  flexDirection="column" 
+              >
+                Checklist item
+              </ListItem>
+              <ListItem 
+                  align="stretch"
+                  flexDirection="column" 
+              >
+                Checklist item
+              </ListItem>
+            </List>
+          </div>
+      </Collapsible.Content>
+    </Collapsible>
+   
+  </>
+  )
+}
+
+export default CollapsibleCustomMain

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

@@ -0,0 +1,3 @@
+Optionally replace your `Collapsible.Main` with any component to customize your Main section's contents and/or style. This gives you full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.
+
+__NOTE__: Custom main sections requires the `useCollapsible` hook to ensure the collapsible's toggle action works correctly.

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.html.erb

@@ -0,0 +1,19 @@
+<%= pb_rails("collapsible", props: { name: "default-example" }) do %>
+    <%= pb_rails("background", props: { background_color: "white", position: "sticky", top: "0", cursor:"pointer", data: {"collapsible-main": "true"} }) do %>
+      <%= pb_rails("flex", props: {align:"center", gap:"sm", justify:"between"}) do %>
+        <%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
+     <% end %>
+      <% end %>
+     <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
+    <% end %>
+      <%= pb_rails("collapsible/collapsible_content", props: { padding: "none"  }) do %>
+        <%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %>
+            <%= pb_rails("list/item") do %> Checklist Item <% end %>
+            <%= pb_rails("list/item") do %> Checklist Item <% end %>
+            <%= pb_rails("list/item") do %> Checklist Item <% end %>
+            <%= pb_rails("list/item") do %> Checklist Item <% end %>
+            <%= pb_rails("list/item") do %> Checklist Item <% end %>
+            <% end %>
+      <% end %>
+    <% end %>
+    

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

@@ -0,0 +1,3 @@
+Optionally replace your `collapsible/collapsible_main` with any component to customize your Main section's contents and/or style. This gives you full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.
+
+__NOTE__: Custom main sections require `data: {"collapsible-main": "true"}` to ensure the collapsible's toggle action works correctly.

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import { Collapsible, useCollapsible, Background, Flex, Title, List, ListItem } from '../..'
+
+const CollapsibleCustomMainWithIcon = () => {
+  const [isCollapsed, setIsCollapsed] = useCollapsible(true)
+
+  return (
+  <>
+    <Collapsible
+        collapsed={isCollapsed}
+    >
+          <Background 
+              backgroundColor="white" 
+              cursor="pointer"
+              htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
+              position="sticky" 
+              top="0" 
+          >
+              <Flex 
+                  align="center" 
+                  gap="sm"
+                  justify="between" 
+              >
+                <Title 
+                    size={4} 
+                    text="Custom Main Section" 
+                />
+                <Collapsible.Icon collapsed={isCollapsed}/>
+              </Flex>
+          </Background>
+      <Collapsible.Content padding="none">
+          <div>
+          <List>
+              <ListItem 
+                  align="stretch"
+                  flexDirection="column" 
+              >
+                Checklist item
+              </ListItem>
+              <ListItem 
+                  align="stretch"
+                  flexDirection="column" 
+              >
+                Checklist item
+              </ListItem>
+              <ListItem 
+                  align="stretch"
+                  flexDirection="column" 
+              >
+                Checklist item
+              </ListItem>
+              <ListItem 
+                  align="stretch"
+                  flexDirection="column" 
+              >
+                Checklist item
+              </ListItem>
+              <ListItem 
+                  align="stretch"
+                  flexDirection="column" 
+              >
+                Checklist item
+              </ListItem>
+            </List>
+          </div>
+      </Collapsible.Content>
+    </Collapsible>
+   
+  </>
+  )
+}
+
+export default CollapsibleCustomMainWithIcon

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

@@ -0,0 +1,3 @@
+When using a custom Main Section, you can also use the optional `Collapsible.Icon`.
+
+__NOTE__: The optional icon subcomponent must receive the `collapsed` state of the collapsible in order to toggle correctly. It also accepts all icon-related props (`icon`, `size`, and `color`) for further customization. If none of these are specified, the default icon will be rendered.

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.html.erb

@@ -0,0 +1,20 @@
+<%= pb_rails("collapsible", props: { name: "default-example" }) do %>
+    <%= pb_rails("background", props: { background_color: "white", position: "sticky", top: "0", cursor:"pointer", data: {"collapsible-main": "true"} }) do %>
+      <%= pb_rails("flex", props: {align:"center", gap:"sm", justify:"between"}) do %>
+        <%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
+    <%= pb_rails("collapsible/collapsible_icon") %>
+     <% end %>
+      <% end %>
+     <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
+    <% end %>
+      <%= pb_rails("collapsible/collapsible_content", props: { padding: "none"  }) do %>
+        <%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %>
+            <%= pb_rails("list/item") do %> Checklist Item <% end %>
+            <%= pb_rails("list/item") do %> Checklist Item <% end %>
+            <%= pb_rails("list/item") do %> Checklist Item <% end %>
+            <%= pb_rails("list/item") do %> Checklist Item <% end %>
+            <%= pb_rails("list/item") do %> Checklist Item <% end %>
+            <% end %>
+      <% end %>
+    <% end %>
+    

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

@@ -0,0 +1,3 @@
+When using a custom Main Section, you can also use the optional `collapsible/collapsible_icon` subcomponent.
+
+__NOTE__: The optional icon subcomponent accepts all icon-related props (`icon`, `size`, and `color`) for further customization. If none of these are specified, the default icon will be rendered.

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

@@ -7,6 +7,9 @@ examples:
   - collapsible_icons: Custom Icons
   - collapsible_external_controls: Toggle Collapsible With External Controls
   - collapsible_external_controls_multiple: Toggle All Collapsibles With One Control
+  - collapsible_custom_main_rails: Custom Main Section
+  - collapsible_custom_main_with_icon_rails: Custom Main Section With Icon
+
 
   react:
   - collapsible_default: Default
@@ -14,6 +17,10 @@ examples:
   - collapsible_color: Icon Color
   - collapsible_icons: Custom Icons
   - collapsible_state: useCollapsible Hook
+  - collapsible_custom_main: Custom Main Section
+  - collapsible_custom_main_with_icon: Custom Main Section With Icon
+
+
 
   swift:
   - collapsible_default_swift: Default

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

@@ -2,4 +2,6 @@ export { default as CollapsibleDefault } from './_collapsible_default.jsx'
 export { default as CollapsibleSize } from './_collapsible_size.jsx'
 export { default as CollapsibleColor } from './_collapsible_color.jsx'
 export { default as CollapsibleIcons } from './_collapsible_icons.jsx'
-export {default as CollapsibleState } from './_collapsible_state.jsx'
+export { default as CollapsibleState } from './_collapsible_state.jsx'
+export { default as CollapsibleCustomMain } from './_collapsible_custom_main.jsx'
+export { default as CollapsibleCustomMainWithIcon } from './_collapsible_custom_main_with_icon.jsx'

data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default_swift.md

@@ -0,0 +1,61 @@
+![Date-Range-Inline-Default](https://github.com/powerhome/playbook-swift/assets/54749071/793dc133-b2a8-4283-96e1-c8b19065392d)
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.large) {
+  VStack(alignment: .leading, spacing: Spacing.small) {
+    PBDateRangeInline(
+      size: .caption,
+      iconSize: .xSmall,
+      startDate: "18 Jun 2013",
+      endDate: "20 Mar 2015",
+      startVariant: .standard
+    )
+    PBDateRangeInline(
+      size: .body, 
+      iconSize: .x1,
+      startDate: "18 Jun 2013",
+      endDate: "20 Mar 2015",
+      startVariant: .standard
+    )
+  }
+  .frame(maxWidth: .infinity, alignment: .leading)
+  VStack(alignment: .center, spacing: Spacing.small) {
+    PBDateRangeInline(
+      size: .caption, 
+      iconSize: .xSmall,
+      startDate: "15 Jan 2013",
+      endDate: "15 Aug 2015",
+      startVariant: .short(showIcon: true),
+      endVariant: .short(showIcon: false)
+    )
+    PBDateRangeInline(
+      size: .body, 
+      iconSize: .x1,
+      startDate: "15 Jan 2013",
+      endDate: "15 Aug 2015",
+      startVariant: .short(showIcon: true),
+      endVariant: .short(showIcon: false)
+    )
+  }
+  .frame(maxWidth: .infinity, alignment: .center)
+  VStack(alignment: .trailing, spacing: Spacing.small) {
+    PBDateRangeInline(
+      size: .caption, 
+      iconSize: .xSmall,
+      startDate: "15 Jan 2013",
+      endDate: "15 Aug 2015",
+      startVariant: .short(showIcon: true),
+      endVariant: .short(showIcon: false)
+    )
+    PBDateRangeInline(
+      size: .body, 
+      iconSize: .x1,
+      startDate: "15 Jan 2013",
+      endDate: "15 Aug 2015",
+      startVariant: .short(showIcon: true),
+      endVariant: .short(showIcon: false)
+    )
+  }
+  .frame(maxWidth: .infinity, alignment: .trailing)
+}
+```

data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_props_swift.md

@@ -0,0 +1,11 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **date** | `Date` | Sets the date | `Date()` |  |
+| **size** | `PBFont` | Sets the font size | `.body` |  `.body` `.caption` `.subcaption` |
+| **iconSize** | `PBIcon.IconSize` | Sets the icon size | `.xSmall` | `xSmall` `small` `large` `x1` |
+| **startDate** | `String` | Takes a string value to set the starting date range value | |  |
+| **endDate** | `String` | Takes a string value to set the ending date range value | |  |
+| **startVariant** | `PBDate.Variant` | Changes the style of the starting date | `.standard` | `.short(showIcon: false)` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)` |
+| **endVariant** | `PBDate.Variant` | Changes the style of the ending date | `.standard` | `.short(showIcon: false)` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)` |
+| **isArrowIconBold** | `Bool` | Determines if the date range arrow is bold | `false` | `true` `false` |

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

@@ -6,4 +6,7 @@ examples:
   
   react:
   - date_range_inline_default: Default
-  
+
+  swift:
+  - date_range_inline_default_swift: Default
+  - date_range_inline_props_swift: ""

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold_swift.md

@@ -0,0 +1,32 @@
+![Date-Stacked-Bold](https://github.com/powerhome/playbook-swift/assets/54749071/e241e4b8-efce-4872-99f9-aefb1e3007d2)
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBDateStacked(
+    alignment: .leading,
+    date: Date(),
+    variant: .short(showIcon: false),
+    dateSize: .title4,
+    isMonthStacked: true,
+    isMonthBold: true
+  )
+  PBDateStacked(
+    alignment: .center,
+    date: Date().makeDate(year: 2018, month: 3, day: 20),
+    variant: .standard,
+    dateSize: .title4,
+    isStandardStacked: true,
+    isYearBold: true,
+    isMonthBold: true
+  )
+  .frame(maxWidth: .infinity, alignment: .center)
+  PBDateStacked(
+    alignment: .trailing, 
+    date: Date(),
+    variant: .short(showIcon: false),
+    dateSize: .title4,
+    isMonthStacked: true,
+    isMonthBold: true
+  )
+  .frame(maxWidth: .infinity, alignment: .trailing)
+}
+```

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default_swift.md

@@ -0,0 +1,17 @@
+![Date-Stacked-Default](https://github.com/powerhome/playbook-swift/assets/54749071/5185a6b6-534a-43c0-8c87-abecf770b8f5)
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBDateStacked(
+    date: Date(),
+    variant: .short(showIcon: false),
+    dateSize: .title4,
+    isMonthStacked: true
+  )
+  PBDateStacked(
+    date: Date(),
+    variant: .short(showIcon: false),
+    dateSize: .title3,
+    isMonthStacked: true
+  )
+}
+```

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year_swift.md

@@ -0,0 +1,19 @@
+![Date-Stacked-Not-Current-Year](https://github.com/powerhome/playbook-swift/assets/54749071/f778f10f-21c3-42b9-b660-9def6c75ecf3)
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBDateStacked(
+    alignment: .leading,
+    date: Date().makeDate(year: 2018, month: 3, day: 20),
+    variant: .standard,
+    dateSize: .title4,
+    isStandardStacked: true
+  )
+  PBDateStacked(
+    alignment: .leading,
+    date: Date().makeDate(year: 2018, month: 3, day: 20),
+    variant: .standard,
+    dateSize: .title3,
+    isStandardStacked: true
+  )
+}
+```

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_props_swift.md

@@ -0,0 +1,10 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **alignment** | `HorizontalAlignment` | Changes the alignment of the date | `.leading` | `.leading` `.trailing` |
+| **dateSize** | `PBFont` |Sets the size of the date | `.body` |  `.subcaption` `.caption` `.body` |
+| **isReversed** | `Bool` | Boolean value that determines whether or not the month and date are reversed. | `false` |  `true` `false` |
+| **isMonthStacked** | `Bool` | Boolean value that determines whether or not the month is stacked | `false` |  `true` `false` |
+| **isStandardStacked** | `Bool` | Boolean value that determines whether or not the standard date variant is stacked. | `false` |  `true` `false` |
+| **isYearBold** | `Bool` | Boolean value that determines whether or not the the year is bold | `false` |  `true` `false` |
+| **isMonthBold** | `Bool` | Boolean value that determines whether or not the month  is bold. | `false` |  `true` `false` |

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reversed_swift.md

@@ -0,0 +1,17 @@
+![Date-Stacked-Reversed](https://github.com/powerhome/playbook-swift/assets/54749071/4dc3ff84-3a0d-4d9b-a363-5d649a3bdae6)
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBDateStacked(
+    date: Date(),
+    variant: .short(showIcon: false),
+    dateSize: .title4,
+    isReversed: true
+  )
+  PBDateStacked(
+    date: Date(),
+    variant: .short(showIcon: false),
+    dateSize: .title3,
+    isReversed: true
+  )
+}
+```

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

@@ -15,3 +15,10 @@ examples:
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_bold: Bold
+
+  swift:
+  - date_stacked_default_swift: Default
+  - date_stacked_not_current_year_swift: Not Current Year
+  - date_stacked_reversed_swift: Day & Month Reverse
+  - date_stacked_bold_swift: Bold
+  - date_stacked_props_swift: ""

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_alignment_swift.md

@@ -0,0 +1,39 @@
+![Date-Time-Alignment](https://github.com/powerhome/playbook-swift/assets/54749071/9d1e08ac-4906-406f-b81d-1edf0a09e2e3)
+
+```swift
+VStack(spacing: Spacing.small) {
+  HStack {
+    PBDateTime(
+      dateVariant: .short(showIcon: false),
+      timeVariant: .iconTimeZone,
+      isLowercase: true,
+      isTimeBold: true,
+      zone: .utc,
+      showTimeZone: true,
+      timeZoneIdentifier: "2012-08-02T17:49:29Z"
+    )
+  }
+  .frame(maxWidth: .infinity, alignment: .leading)
+    PBDateTime(
+        dateVariant: .short(showIcon: false),
+        timeVariant: .iconTimeZone,
+        isLowercase: true,
+        isTimeBold: true,
+        zone: .utc,
+        showTimeZone: true,
+        timeZoneIdentifier: "2012-08-02T17:49:29Z"
+      )
+  HStack {
+    PBDateTime(
+      dateVariant: .short(showIcon: false),
+      timeVariant: .iconTimeZone,
+      isLowercase: true,
+      isTimeBold: true,
+      zone: .utc,
+      showTimeZone: true,
+      timeZoneIdentifier: "2012-08-02T17:49:29Z"
+    )
+  }
+  .frame(maxWidth: .infinity, alignment: .trailing)
+}
+```

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default_swift.md

@@ -0,0 +1,39 @@
+![Date-Time-Default](https://github.com/powerhome/playbook-swift/assets/54749071/f9ea63f9-81bd-41a9-8171-8a213c55ccfe)
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBDateTime(
+    dateVariant: .dayDate(showYear: true),
+    timeVariant: .iconTimeZone,
+    isLowercase: true,
+    isTimeBold: true,
+    timeZoneIdentifier: "EST"
+  )
+  PBDateTime(
+    dateVariant: .dayDate(showYear: false),
+    timeVariant: .iconTimeZone,
+    isLowercase: true,
+    isTimeBold: true,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z"
+  )
+  PBDateTime(
+    dateVariant: .short(showIcon: false),
+    timeVariant: .iconTimeZone,
+    isLowercase: true,
+    isTimeBold: true,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z",
+    showIcon: true
+  )
+  PBDateTime(
+    dateVariant: .standard,
+    timeVariant: .iconTimeZone,
+    isLowercase: true,
+    isTimeBold: true,
+    showTimeZone: true,
+    timeZoneIdentifier: "GMT+9"
+  )
+}
+```

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_props_swift.md

@@ -0,0 +1,15 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **dateTime** | `Date` | Sets current date. | | |
+| **iconSize** | `PBIcon.IconSize` | Allows user to change the size of the clock icon. | `.x3` | `.small` `.medium` `.large` |
+| **dateVariant** | `PBDate.Variant` | Allows user to choose how they would like the date to be displayed | `.dayDate(showYear: false)` | `.short` `.dayDate(showYear: false)` `.standard` `.withIcon(isStandard: true)` `.withIcon(isStandard: false)` |
+| **timeVariant** | `PBTime.Variant` | Allows user to choose how they would like the time to be displayed | `.time` | `.time` `.clockIcon` `.timeZone` `.iconTimeZone` `.withTimeZoneHeader` |
+| **fontSize** | `PBFont` | Allows user to change the size of the text | `.caption` | `.subcaption` `.caption` `.body` |
+| **isLowercase** | `Bool` | Determines whether or not am/pm is capitalized | `false` | `true` `false` |
+| **isTimeBold** | `Bool` | Determines whether or not the time is bold | `false` | `true` `false` |
+| **isTimeZoneBold** | `Bool` | Determines whether or not the time zone is bold | `false` | `true` `false` |
+| **zone** | `PBTime.Zones` | Allows the user to set the time zone | `.east` | `.east` `.central` `.mountain` `.pacific` `.gmt` |
+| **showTimeZone** | `Bool` | Determines whether or not the time zone is displayed | `false` | `true` `false` |
+| **timeZoneIdentifier** | `String` | String that the time kit utilizes to calculate the current time and time zone | | |
+| **showIcon** | `Bool` | Determines whether or not the clock icon is displayed | `false` | `true` `false` |

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size_swift.md

@@ -0,0 +1,78 @@
+![Date-Time-Sizes](https://github.com/powerhome/playbook-swift/assets/54749071/59b2394d-cf25-46b5-a634-ca0721a7b3b0)
+```swift
+VStack(alignment: .leading, spacing: Spacing.xSmall) {
+  PBDateTime(
+    dateVariant: .dayDate(showYear: false), 
+    timeVariant: .iconTimeZone,
+    fontSize: .caption,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z",
+    showIcon: true
+  )
+  PBDateTime(
+    dateVariant: .dayDate(showYear: false),
+    timeVariant: .iconTimeZone,
+    fontSize: .caption,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z"
+  )
+  PBDateTime(
+    dateVariant: .short(showIcon: false),
+    timeVariant: .iconTimeZone,
+    fontSize: .caption,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z",
+    showIcon: true
+  )
+  PBDateTime(
+    dateVariant: .short(showIcon: false),
+    timeVariant: .iconTimeZone,
+    fontSize: .caption,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z"
+  )
+  Spacer()
+  PBDateTime(
+    dateVariant: .dayDate(showYear: false),
+    timeVariant: .iconTimeZone,
+    isLowercase: true,
+    isTimeBold: true,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z",
+    showIcon: true
+  )
+  PBDateTime(
+    dateVariant: .dayDate(showYear: false),
+    timeVariant: .iconTimeZone,
+    isLowercase: true,
+    isTimeBold: true,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z"
+  )
+  PBDateTime(
+    dateVariant: .short(showIcon: false),
+    timeVariant: .iconTimeZone,
+    isLowercase: true,
+    isTimeBold: true,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z",
+    showIcon: true
+  )
+  PBDateTime(
+    dateVariant: .short(showIcon: false),
+    timeVariant: .iconTimeZone,
+    isLowercase: true,
+    isTimeBold: true,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z"
+  )
+}
+```

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

@@ -9,3 +9,9 @@ examples:
   - date_time_default: Default
   - date_time_align: Alignment
   - date_time_size: Size
+
+  swift:
+  - date_time_default_swift: Default
+  - date_time_alignment_swift: Alignment
+  - date_time_size_swift: Size
+  - date_time_props_swift: ""

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md

@@ -1 +1 @@
-The Dropdown kit accepts an `options` array and renders each object from that array as a selectable option within a dropdown container. `options` is a required prop and must be an array of objects. Each object can contain as many key/value pairs as needed but MUST contain 'label' and 'value' as the only required items within each object.
+This kit's `options` prop requires an array of objects, each of which will be used as the selectable options within the dropdown. Each option object can support any number of key-value pairs, but each must contain `label` and `value`.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md

@@ -1,7 +1,6 @@
-The dropdown comes with the following subcomponents that can be used to achieve various levels of customization:
+The dropdown is built using all of the following subcomponents:
 
-`Dropdown. Trigger` / `dropdown/dropdown_trigger`
-`Dropdown.Container`/ `dropdown/dropdown_container`
-`Dropdown.Option` / `dropdown/dropdown_option`
-
-See the code snippet below for a visual on how to use the kit with subcomponents. Each subcomponent allows for GlobalProps in addition to any subcomponent specfic props. 
+`Dropdown.Trigger` is the UI component that users interact with to toggle the dropdown. 
+`Dropdown.Container` is the floating container that wraps the list of dropdown options. 
+`Dropdown.Option` renders options that are passed to the container. 
+Each of these subcomponents can be altered using global props and/or their respective props. See doc examples below for more information on each.