playbook_ui 13.27.0 → 13.28.0.pre.alpha.PBNTR297gradientoverlay3029

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_collapsible/index.js

@@ -75,13 +75,23 @@ export default class PbCollapsible extends PbEnhancedElement {
     this.displayUpArrow()
   }
 
+  toggleArrows(showDownArrow) {
+    const downArrow = this.element.querySelector(DOWN_ARROW_SELECTOR);
+    const upArrow = this.element.querySelector(UP_ARROW_SELECTOR);
+  
+    if (downArrow) {
+      downArrow.style.display = showDownArrow ? 'inline-block' : 'none';
+    }
+    if (upArrow) {
+      upArrow.style.display = showDownArrow ? 'none' : 'inline-block';
+    }
+  }
+  
   displayDownArrow() {
-    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'inline-block'
-    this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'none'
+    this.toggleArrows(true);
   }
-
+  
   displayUpArrow() {
-    this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
-    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
-   }
+    this.toggleArrows(false);
+  }
 }

data/app/pb_kits/playbook/pb_contact/contact.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("body", props: { 
         tag: "span", 
         classname: "pb_contact_kit", 

data/app/pb_kits/playbook/pb_currency/currency.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("caption", props: object.caption_props) %>
 
   <div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts

@@ -3,6 +3,12 @@ import typography from '../tokens/exports/_typography.scss'
 
 import { ThemeProps } from './themeTypes'
 
+interface CustomTreemapOptions extends Highcharts.SeriesTreemapOptions {
+  traverseUpButton?: {
+    position: { y: number };
+  };
+}
+
 const highchartsDarkTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -200,7 +206,7 @@ const highchartsDarkTheme: ThemeProps = {
       traverseUpButton: {
         position: { y: -50 },
       },
-    },
+    } as CustomTreemapOptions,
   },
   credits: {
     enabled: false

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts

@@ -3,6 +3,13 @@ import typography from '../tokens/exports/_typography.scss'
 
 import { ThemeProps } from './themeTypes'
 
+interface CustomTreemapOptions extends Highcharts.SeriesTreemapOptions {
+  traverseUpButton?: {
+    position: { y: number };
+  };
+}
+
+
 const highchartsTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -150,6 +157,7 @@ const highchartsTheme: ThemeProps = {
           fontSize: typography.text_smaller,
           color: colors.text_lt_light,
           fontWeight: typography.regular,
+          textOutline: '2px $white',
         },
       },
     },
@@ -198,7 +206,7 @@ const highchartsTheme: ThemeProps = {
       traverseUpButton: {
         position: { y: -50 },
       },
-    },
+    } as CustomTreemapOptions,
   },
   credits: {
     enabled: false

data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <% if object.stat_label.present? %>
     <%= pb_rails("body", props: { color: "light", text: object.stat_label } ) %>
   <% end %>

data/app/pb_kits/playbook/pb_date/date.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
 
   <% if object.unstyled %>
     <!-- icon -->

data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <div class="pb_date_range_inline_wrapper">
     <% if object.icon == true %>
       <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: object.size, classname: "pb_date_range_inline_icon" }) }) %>

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_range_stacked/date_range_stacked.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
 
     <%= pb_rails("flex", props: {vertical: "center"}) do %>
       <%= pb_rails("flex/flex_item") do %>

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
 
     <% if object.bold == false %>
 

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/date_time.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
 
     <%= pb_rails("flex", props: {
       orientation: "row",

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)
+}
+```