playbook_ui 13.27.0.pre.alpha.PLAY1342DRYcontenttagRailssimplekits2896 → 13.27.0.pre.alpha.PLAY1349checkboxzindexsticky2936

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 86010ce79177c236d7f8407fa85ab4204e2b1828a406d3be849f8015d83bc473
-  data.tar.gz: eb445cf16692e00d7969def69849d916bd7fba5a2106aa1f987dc3114f9146eb
+  metadata.gz: 6cdef0664f0e77477ac8bb6d3bb3df67732b49ffb2f9cb023f5c1a5867b41876
+  data.tar.gz: 1a9b4e68cd2dc788f5e90fc2e0aa6af63b2ed20a7d1f789997d77cbe14e3b6b9
 SHA512:
-  metadata.gz: 1e8b4eff3ba718fe73cc04f6dcf5f072f47d5d3fab4e408de793bcd4ad62542ddc7de30044be5a31a4b54a21af8b6de366f51384762eaf87c98ba327227811c7
-  data.tar.gz: 8aee0c92d46a1c6c885beb73a791beeac13449d7b8dbbf70f15dcadbeea8f3e0f384268270769906078606a92ae0411079c55dd694952e48024b35332e752876
+  metadata.gz: f0c7b178ef804dc44461454d8004b56a565fca3393d8253e464f2d91b323be6c08e60e9354384c21a5e28528f453b428f5f73d7e6a63bee4578f07d8f9c0cd7d
+  data.tar.gz: 011c22b7c47a434fd173956c7a16a1126ca4b79c3408360c0cfc1b4d9752248237de24bf40ed9a29f5fee2da98b3599d0a8f9299a065a30b78205d2976ffef81

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -28,6 +28,7 @@ $pb_button_border_width: 0px;
   font-size: $font_small;
   font-weight: $bold;
   text-align: center;
+  text-decoration: none;
   vertical-align: middle;
   text-transform: none;
   border-width: $pb_button_border_width;

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -20,7 +20,6 @@ $transition: $transition_cubic;
     border: solid $border_light 2px;
     border-radius: $border_rad_light;
     height: 22px;
-    position: relative;
     transition: background $transition_default ease, box-shadow $transition_default ease;
     width: 22px;
     .check_icon,
@@ -28,7 +27,6 @@ $transition: $transition_cubic;
       color: $white;
       height: 16px;
       left: 1px;
-      position: relative;
       display: flex;
       opacity: 0;
       width: 16px;

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx

@@ -9,6 +9,7 @@ import CollapsibleContent from './child_kits/CollapsibleContent'
 import CollapsibleMain from './child_kits/CollapsibleMain'
 import CollapsibleContext from './context'
 import { IconSizes } from "../pb_icon/_icon"
+import CollapsibleIcon from './child_kits/CollapsibleIcon'
 
 
 type CollapsibleProps = {
@@ -52,12 +53,15 @@ const Collapsible = ({
   if (CollapsibleParent.length !== 2) {
     throw new Error('Collapsible requires <CollapsibleMain> and <CollapsibleContent> to function properly.')
   }
+  const FirstChild = CollapsibleParent[0]
+  const SecondChild = CollapsibleParent[1]
 
-  const Main = CollapsibleParent[0]
-  const Content = CollapsibleParent[1]
+  const Main = FirstChild.type === CollapsibleMain ? FirstChild : null
+  const Content = SecondChild.type === CollapsibleContent ? SecondChild : null
 
-  const { children: mainChildren, ...mainProps } = Main.props
-  const { children: contentChildren, ...contentProps } = Content.props
+
+  const { children: mainChildren = null, ...mainProps } = Main ? Main.props : {}
+  const { children: contentChildren = null, ...contentProps } = Content ? Content.props : {}
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -75,13 +79,19 @@ const Collapsible = ({
           className={classes}
           id={id}
       >
-        <CollapsibleMain {...mainProps}>
-          {mainChildren}
-        </CollapsibleMain>
+        {Main ? (
+          <CollapsibleMain {...mainProps}>
+            {mainChildren}
+          </CollapsibleMain>
+        ) : (
+          FirstChild
+        )}
 
-        <CollapsibleContent {...contentProps}>
-          {contentChildren}
-        </CollapsibleContent>
+        {Content && (
+          <CollapsibleContent {...contentProps}>
+            {contentChildren}
+          </CollapsibleContent>
+        )}
       </div>
     </CollapsibleContext.Provider>
   )
@@ -89,5 +99,6 @@ const Collapsible = ({
 
 Collapsible.Main = CollapsibleMain
 Collapsible.Content = CollapsibleContent
+Collapsible.Icon = CollapsibleIcon
 
 export default Collapsible

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleIcon.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import Icon, { IconSizes } from "../../pb_icon/_icon";
+
+type IconColors =
+  | "default"
+  | "light"
+  | "lighter"
+  | "link"
+  | "error"
+  | "success";
+
+type IconProps = {
+  collapsed: boolean | (() => void);
+  icon?: string[] | string;
+  iconColor?: IconColors;
+  iconSize?: IconSizes;
+  onIconClick?: () => void;
+};
+
+type colorMap = {
+  default: string;
+  light: string;
+  lighter: string;
+  link: string;
+  error: string;
+  success: string;
+};
+
+const colorMap = {
+  default: "#242B42",
+  light: "#687887",
+  lighter: "#C1CDD6",
+  link: "#0056CF",
+  error: "#FF2229",
+  success: "#00CA74",
+};
+
+const CollapsibleIcon = ({
+  collapsed,
+  icon,
+  iconSize,
+  iconColor,
+  onIconClick,
+}: IconProps) => {
+  const color = colorMap[iconColor];
+
+  const showIcon = (icon: string | string[]) => {
+    if (typeof icon === "string") {
+      return [icon, icon];
+    }
+    return icon;
+  };
+
+  const handleIconClick = (e: React.MouseEvent<HTMLElement>) => {
+    if (onIconClick) {
+      e.stopPropagation();
+      onIconClick();
+    }
+  };
+
+  return (
+    <>
+      {collapsed ? (
+        <div
+            className="icon_wrapper"
+            key={icon ? showIcon(icon)[0] : "chevron-down"}
+            onClick={(e) => handleIconClick(e)}
+            style={{ verticalAlign: "middle", color: color }}
+        >
+          <Icon
+              icon={icon ? showIcon(icon)[0] : "chevron-down"}
+              size={iconSize}
+          />
+        </div>
+      ) : (
+        <div
+            className="icon_wrapper"
+            key={icon ? showIcon(icon)[1] : "chevron-up"}
+            onClick={(e) => handleIconClick(e)}
+            style={{ verticalAlign: "middle", color: color }}
+        >
+          <Icon
+              icon={icon ? showIcon(icon)[1] : "chevron-up"}
+              size={iconSize}
+          />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default CollapsibleIcon;

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -7,27 +7,9 @@ import { globalProps } from '../../utilities/globalProps'
 
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
-import Icon, { IconSizes } from "../../pb_icon/_icon"
+import { IconSizes } from "../../pb_icon/_icon"
 import CollapsibleContext from '../context'
-
-
-type colorMap = {
-  default: string,
-  light: string,
-  lighter: string,
-  link: string,
-  error: string,
-  success: string
-}
-
-const colorMap = {
-  default: "#242B42",
-  light: "#687887",
-  lighter: "#C1CDD6",
-  link: "#0056CF",
-  error: "#FF2229",
-  success: "#00CA74",
-}
+import CollapsibleIcon from './CollapsibleIcon'
 
 type CollapsibleMainProps = {
   children: React.ReactNode[] | React.ReactNode,
@@ -38,60 +20,6 @@ type CollapsibleMainProps = {
 }
 type IconColors =  "default" | "light" | "lighter" | "link" | "error" | "success"
 
-type IconProps = {
-  collapsed: boolean | (()=> void)
-  icon?: string[] | string
-  iconColor?: IconColors
-  iconSize?: IconSizes
-  onIconClick?: ()=> void
-}
-
-const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, onIconClick }: IconProps) => {
-  const color = colorMap[iconColor]
-
-  const showIcon = (icon: string |string[]) => {
-    if (typeof icon === "string") {
-      return [icon, icon]
-    }
-    return icon
-  }
-
-  const handleIconClick = (e: React.MouseEvent<HTMLElement>) => {
-    if (onIconClick) {
-    e.stopPropagation();
-    onIconClick()
-    }
-  }
-
-  return (
-    <>
-      {collapsed ? (
-        <div
-            className="icon_wrapper"
-            key={icon ? showIcon(icon)[0] : "chevron-down"}
-            onClick={(e)=> handleIconClick(e)}
-            style={{ verticalAlign: "middle", color: color }}
-        >
-          <Icon icon={icon ? showIcon(icon)[0] : "chevron-down"}
-              size={iconSize}
-          />
-        </div>
-      ) : (
-        <div
-            className="icon_wrapper"
-            key={icon ? showIcon(icon)[1] : "chevron-up"}
-            onClick={(e)=> handleIconClick(e)}
-            style={{ verticalAlign: "middle", color: color }}
-        >
-          <Icon icon={icon ? showIcon(icon)[1] : "chevron-up"}
-              size={iconSize}
-          />
-        </div>
-      )}
-    </>
-  );
-}
-
 const CollapsibleMain = ({
   children,
   className,
@@ -120,7 +48,7 @@ const CollapsibleMain = ({
         >
           <FlexItem>{children}</FlexItem>
           <FlexItem>
-            <ToggleIcon
+            <CollapsibleIcon
                 collapsed={collapsed as () => void}
                 icon={icon as string[] | string}
                 iconColor={iconColor as IconColors}

data/app/pb_kits/playbook/pb_collapsible/collapsible_icon.html.erb

@@ -0,0 +1,15 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria,
+    style: "color: #{object.icon_color};",
+    **combined_html_options) do %>
+        <% if object.icon.present? %>
+          <%= pb_rails("icon", props: { icon: object.show_icon(object.icon)[0], id:"collapsible_open_icon", size: object.size }) %>
+          <%= pb_rails("icon", props: { icon: object.show_icon(object.icon)[1], id:"collapsible_close_icon", size: object.size }) %>
+        <% else %>
+          <%= pb_rails("icon", props: { icon: "chevron-down", id:"collapsible_open_icon", size: object.size }) %>
+          <%= pb_rails("icon", props: { icon: "chevron-up", id:"collapsible_close_icon", size: object.size }) %>
+        <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_collapsible/collapsible_icon.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbCollapsible
+    class CollapsibleIcon < Playbook::KitBase
+      prop :collapsed, type: Playbook::Props::Boolean,
+                       default: true
+      prop :color, type: Playbook::Props::Enum,
+                   values: %w[default light lighter link success error],
+                   default: "default"
+      prop :icon
+      prop :size, type: Playbook::Props::Enum,
+                  values: ["lg", "xs", "sm", "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x", nil],
+                  default: nil
+
+      def classname
+        generate_classname("pb_collapsible_icon_kit", separator: " ")
+      end
+
+      def show_icon(icon)
+        case icon
+        when ::String
+          [icon, icon]
+        when ::Array
+          icon
+        end
+      end
+
+      def icon_color
+        return "" if color.nil?
+
+        color_object = { light: "#687887", lighter: "#C1CDD6", link: "#0056CF", success: "#00CA74", error: "#FF2229", default: "#242B42" }
+        color_object[color.to_sym]
+      end
+    end
+  end
+end

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