playbook_ui_docs 13.27.0.pre.alpha.PBNTR294paginationstylingfix2899 → 13.27.0.pre.alpha.PLAY888Cardkithighlightoverflowtooltiperror2930

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aac9bebd5ccfd82e70b7a5c68491f35e66e7cd347e971953e0b79392781e4cb2
-  data.tar.gz: 2b68f77188be927ab32d06291c37a96738c0a2a078b2f819eb1a245afeb1e79c
+  metadata.gz: 1d9b4d405a39101e0f329a907be546a7ab4bc9d631ae904f77eb216abf0d0047
+  data.tar.gz: 52b25596b80c2bde6fd33df95247f92cbf83beb9a90257fa2ed797f7449716fe
 SHA512:
-  metadata.gz: a5bab51458f976f922effba6470ca2f0bb762e9a8bc64a53d30f862bdd1dad5a5a1ccc110919af8d4873fb1dccd9159e101df7a33ecf524347ca5b159ba73223
-  data.tar.gz: 28d87274cd6370d874146f60a7f9d5b594e51bc3a848c68767323941645c32288c38b52c7123f6b3452d4ff6dcf2c780e83a2b274c81f6ac6d203f3a43ae6557
+  metadata.gz: dc238e7d8dfe6f0791422f251e295b0e384306f8f13bee76838cb150b48f7348de5b0f18bda20cd79b0b9a8c73cefc596ce3ebdadd7066fe2c0a5519c5b5e4dc
+  data.tar.gz: 691d54ef396770be79ac9d912b3e4982177d7d4447f478e79e60dff322c92f35480ecc254ed926504e2f0fba3adb243d0bf63a27962296d2144cf07991220da5

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

@@ -0,0 +1,20 @@
+![Date-Year-Stacked-Default](https://github.com/powerhome/playbook-swift/assets/54749071/997c9389-669a-42d4-b4af-661d546024b9)
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBDateYearStacked(
+    date: Date(),
+    alignment: .leading
+  )
+  .frame(maxWidth: .infinity, alignment: .leading)
+  PBDateYearStacked(
+    date: Date(),
+    alignment: .center
+  )
+  .frame(maxWidth: .infinity, alignment: .center)
+  PBDateYearStacked(
+    date: Date(),
+    alignment: .trailing
+  )
+  .frame(maxWidth: .infinity, alignment: .trailing)
+}
+```