playbook_ui 13.27.0.pre.alpha.testingcollapsible2917 → 13.28.0.pre.alpha.PBNTR296dropdownwithform2941

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_time_stacked/date_time_stacked.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 %>
 
   <%= pb_rails("flex", props: {classname: "flex-container", vertical: "stretch"}) do %>
       <%= pb_rails("body", props: {classname: "flex-item"}) do %>

data/app/pb_kits/playbook/pb_date_year_stacked/date_year_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("title", props: { text: object.day_month, size: 4, dark: object.dark }) %>
   <%= pb_rails("body", props: { text: object.year, size: 4, color: "light", dark: object.dark }) %>
 <% end %>

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -63,6 +63,10 @@
       width: 100%;
 
       [class*="pb_dropdown_option"] {
+        padding-left: $space_sm;
+        padding-right: $space_sm;
+        padding-top: $space_xs;
+        padding-bottom: $space_xs;
         cursor: pointer;
         &:hover {
           background-color: $border_light;

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -4,7 +4,6 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../uti
 import { globalProps } from "../utilities/globalProps";
 import { GenericObject } from "../types";
 
-import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
 
 import DropdownContainer from "./subcomponents/DropdownContainer";
@@ -235,9 +234,7 @@ const Dropdown = (props: DropdownProps) => {
                   options?.map((option: GenericObject) => (
                     <Dropdown.Option key={option.id} 
                         option={option}
-                    >
-                      <Body text={option.label} />
-                    </Dropdown.Option>
+                    /> 
                   ))}
               </DropdownContainer>
             </>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Dropdown, User, FlexItem, Badge, Avatar } from '../../'
+import { Dropdown, User, Flex, FlexItem, Badge, Avatar } from '../../'
 
 const DropdownWithCustomDisplay = (props) => {
   const [selectedOption, setSelectedOption] = useState();
@@ -69,7 +69,10 @@ const DropdownWithCustomDisplay = (props) => {
           <Dropdown.Option key={option.id} 
               option={option}
           >
-            <>
+            <Flex
+                align="center"
+                justify="between"
+            >
               <FlexItem>
                 <User
                     align="left"
@@ -93,7 +96,7 @@ const DropdownWithCustomDisplay = (props) => {
                     }`}
                 />
               </FlexItem>
-            </>
+            </Flex>
           </Dropdown.Option>
         ))}
     </Dropdown>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb

@@ -48,12 +48,17 @@
     <%= pb_rails("dropdown/dropdown_container") do %>
         <% options.each do |option| %>
             <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
-                <%= pb_rails("flex/flex_item") do %>
-                    <%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
-                <% end %>
-                <%= pb_rails("flex/flex_item") do %>
-                    <%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
-                <% end %>
+              <%= pb_rails("flex", props: {
+                align: "center",
+                justify: "between",
+                }) do %>
+                  <%= pb_rails("flex/flex_item") do %>
+                      <%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
+                  <% end %>
+                  <%= pb_rails("flex/flex_item") do %>
+                      <%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
+                  <% end %>
+              <% end %>
             <% end %>
         <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx

@@ -38,7 +38,10 @@ const DropdownWithCustomOptions = (props) => {
           <Dropdown.Option key={option.id} 
               option={option}
           >
-            <>
+            <Flex
+                align="center"
+                justify="between"
+            >
               <FlexItem>
                 <Flex>
                   <Icon icon={option.icon} 
@@ -52,7 +55,7 @@ const DropdownWithCustomOptions = (props) => {
                     text={option.areaCode} 
                 />
               </FlexItem>
-            </>
+            </Flex>
           </Dropdown.Option>
         ))}
     </Dropdown>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.html.erb

@@ -30,14 +30,19 @@
     <%= pb_rails("dropdown/dropdown_container") do %>
         <% options.each do |option| %>
             <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
-                <%= pb_rails("flex/flex_item") do %>
-                    <%= pb_rails("flex") do %>
-                        <%= pb_rails("icon", props: {icon: option[:icon]}) %>
-                        <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
-                    <% end %>
-                <% end %>
-                <%= pb_rails("flex/flex_item") do %>
-                    <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
+              <%= pb_rails("flex", props: {
+                align: "center",
+                justify: "between",
+                }) do %>
+                  <%= pb_rails("flex/flex_item") do %>
+                      <%= pb_rails("flex") do %>
+                          <%= pb_rails("icon", props: {icon: option[:icon]}) %>
+                          <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
+                      <% end %>
+                  <% end %>
+                  <%= pb_rails("flex/flex_item") do %>
+                      <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
+                  <% end %>
                 <% end %>
             <% end %>
         <% end %>

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

@@ -1 +1 @@
-By default, dropdown option padding is set to `xs`, but this padding can be overridden using our global prop spacing token. In this example we are increasing the option padding to `sm`.
+By default, dropdown option paddingX is set to `sm` and paddingY is set to `xs`, but this padding can be overridden using our global padding props. In this example we are setting the option padding to `sm` all around.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx

@@ -51,7 +51,10 @@ const [selectedOption, setSelectedOption] = useState();
           <Dropdown.Option key={option.id} 
               option={option}
           >
-            <>
+            <Flex
+                align="center"
+                justify="between"
+            >
               <FlexItem>
                 <Flex>
                   <Icon icon={option.icon} 
@@ -65,7 +68,7 @@ const [selectedOption, setSelectedOption] = useState();
                     text={option.areaCode} 
                 />
               </FlexItem>
-            </>
+            </Flex>
           </Dropdown.Option>
         ))}
       </Dropdown.Container>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.html.erb

@@ -32,15 +32,20 @@
     <%= pb_rails("dropdown/dropdown_container", props:{max_width:"xs"}) do %>
         <% options.each do |option| %>
             <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
+              <%= pb_rails("flex", props: {
+                align: "center",
+                justify: "between",
+                }) do %>
                 <%= pb_rails("flex/flex_item") do %>
-                    <%= pb_rails("flex") do %>
-                        <%= pb_rails("icon", props: {icon: option[:icon]}) %>
-                        <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
-                    <% end %>
-                <% end %>
-                <%= pb_rails("flex/flex_item") do %>
-                    <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
-                <% end %>
+                      <%= pb_rails("flex") do %>
+                          <%= pb_rails("icon", props: {icon: option[:icon]}) %>
+                          <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
+                      <% end %>
+                  <% end %>
+                  <%= pb_rails("flex/flex_item") do %>
+                      <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
+                  <% end %>
+              <% end %>
             <% end %>
         <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -203,5 +203,5 @@ test('selected option on click', () => {
   const kit = screen.getByTestId(testId)
   const option = kit.querySelector('.pb_dropdown_option_list')
   option.click()
-  expect(option).toHaveClass('pb_dropdown_option_selected p_xs')
+  expect(option).toHaveClass('pb_dropdown_option_selected')
 })

data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb

@@ -10,18 +10,12 @@
         padding:"none", 
         cursor: "pointer"
         }) do %> 
-            <%= pb_rails("flex", props: {
-                align: "center",
-                classname:"dropdown_option_wrapper",
-                justify: "between",
-                padding_x:"sm",
-                padding_y:"xxs",
-                }) do %>
+            <div class="dropdown_option_wrapper">
                 <% if content.present? %>
                     <%= content.presence %>
                 <% else %>
                     <%= pb_rails("body", props: {text: object.option[:label]}) %>
                 <% end %>
-            <% end %>
+            </div>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_option.rb

@@ -10,12 +10,8 @@ module Playbook
         Hash(prop(:data)).merge("dropdown_option_label": option)
       end
 
-      def padding_helper
-        " p_xs"
-      end
-
       def classname
-        generate_classname("pb_dropdown_option", "list") + padding_helper
+        generate_classname("pb_dropdown_option", "list")
       end
     end
   end

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx

@@ -10,7 +10,6 @@ import { globalProps, GlobalProps } from "../../utilities/globalProps";
 
 import DropdownContext from "../context";
 
-import Flex from "../../pb_flex/_flex";
 import Body from "../../pb_body/_body";
 import ListItem from "../../pb_list/_list_item";
 import { GenericObject } from "../../types";
@@ -39,7 +38,6 @@ const DropdownOption = (props: DropdownOptionProps) => {
     id,
     key,
     option,
-    padding = "xs",
   } = props;
 
   const {
@@ -77,7 +75,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
       selectedClass,
       focusedClass,
     ),
-    globalProps(props, {padding}),
+    globalProps(props),
     className
   );
 
@@ -98,20 +96,12 @@ const DropdownOption = (props: DropdownOptionProps) => {
           key={option.label}
           padding="none"
       >
-        <Flex
-            align="center"
-            className="dropdown_option_wrapper"
-            justify="between"
-            paddingX="sm"
-            paddingY="xxs"
-        >
           {children ? 
-              children : 
+          <div className="dropdown_option_wrapper">{children}</div> :
               <Body dark={dark} 
                   text={option.label} 
               />
           }
-        </Flex>
       </ListItem>
     </div>
   );

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children_swift.md

@@ -0,0 +1,23 @@
+![Children-Toast](https://github.com/powerhome/playbook-swift/assets/54749071/55aebd12-43c4-4061-92d3-6aebb07ff349)
+
+```swift
+VStack(alignment: .leading) {
+  PBToast(
+    text: message,
+    variant: .success,
+    actionView: .custom(AnyView(Text("Undo").pbFont(.title4, color: .white))),
+    dismissAction: closeToast
+  )
+  PBToast(
+    variant: .custom(nil, .pbPrimary),
+    actionView: .custom(
+    AnyView(
+      HStack {
+        Text("Undo action").pbFont(.caption, color: .white)
+        PBButton(variant: .primary, title: "Undo").disabled(true)
+      }
+    )),
+    dismissAction: closeToast
+  )
+}
+```

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close_swift.md

@@ -0,0 +1,7 @@
+```swift
+VStack(alignment: .leading) {
+  PBToast(text: "Error Message", variant: .error, actionView: .default, dismissAction: closeToast)
+  PBToast(text: "Items Successfully Moved", variant: .success, actionView: .default, dismissAction: closeToast)
+  PBToast(text: "Scan to Assign Selected Items", variant: .neutral, actionView: .default, dismissAction: closeToast)
+}
+```

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default_swift.md

@@ -0,0 +1,9 @@
+![Default-Toast](https://github.com/powerhome/playbook-swift/assets/54749071/cc465b1b-85ba-4492-a832-b06b842a1555)
+
+```swift
+VStack(alignment: .leading) {
+  PBToast(text: "Error Message", variant: .error, dismissAction: closeToast)
+  PBToast(text: "Items Successfully Moved", variant: .success, dismissAction: closeToast)
+  PBToast(text: "Scan to Assign Selected Items", variant: .neutral, dismissAction: closeToast)
+}
+```

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dismiss_with_timer_swift.md

@@ -0,0 +1,22 @@
+```swift
+HStack {
+  PBButton(variant: .secondary, title: "Top Center") {
+    position = .top
+    toastView = PBToast(
+    text: "Top Center",
+    variant: .neutral,
+    actionView: .withTimer(3),
+    dismissAction: closeToast
+    )
+  }
+  PBButton(variant: .secondary, title: "Bottom Center") {
+    position = .bottom
+    toastView = PBToast(
+    text: "Bottom Center",
+    variant: .neutral,
+    actionView: .withTimer(2),
+    dismissAction: closeToast
+    )
+  }
+}
+```

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_swift.md

@@ -0,0 +1,9 @@
+![Multiline-Toast](https://github.com/powerhome/playbook-swift/assets/54749071/df7bb8da-89ee-477e-8001-7262e48ce03a)
+
+```swift
+PBToast(
+  text: message,
+  variant: .custom(.infoCircle, .pbPrimary),
+  dismissAction: closeToast
+)
+```

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions_swift.md

@@ -0,0 +1,62 @@
+```swift
+GridRow {
+  PBButton(variant: .secondary, title: "Top Left") {
+    position = .topLeft
+    toastView = PBToast(
+    text: "Top Left",
+    variant: .neutral,
+    actionView: .default,
+    dismissAction: closeToast
+    )
+  }
+  PBButton(variant: .secondary, title: "Top Right") {
+    position = .topRight
+    toastView = PBToast(
+    text: "Top Right",
+    variant: .neutral,
+    actionView: .default,
+    dismissAction: closeToast
+    )
+  }
+}
+GridRow {
+  PBButton(variant: .secondary, title: "Top Center") {
+    position = .top
+    toastView = PBToast(
+    text: "Top Center",
+    variant: .neutral,
+    actionView: .default,
+    dismissAction: closeToast
+    )
+  }
+  PBButton(variant: .secondary, title: "Bottom Center") {
+    position = .bottom
+    toastView = PBToast(
+    text: "Bottom Center",
+    variant: .custom(.user, .status(.neutral)),
+    actionView: .default,
+    dismissAction: closeToast
+    )
+  }
+}
+GridRow {
+  PBButton(variant: .secondary, title: "Bottom Left") {
+    position = .bottomLeft
+    toastView = PBToast(
+    text: "Bottom Left",
+    variant: .custom(.user, .status(.neutral)),
+    actionView: .default,
+    dismissAction: closeToast
+    )
+  }
+  PBButton(variant: .secondary, title: "Bottom Right") {
+    position = .bottomRight
+    toastView = PBToast(
+    text: "Bottom Right",
+    variant: .custom(.user, .status(.neutral)),
+    actionView: .default,
+    dismissAction: closeToast
+    )
+  }
+}
+```

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_props_swift.md

@@ -0,0 +1,8 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **text** | `String` |`Value for the toast message` | `nil` |   |
+| **variant** | `Variant` | `Determines the type pf toast message being displayed` | `.custom()` |  `error`, `success`, 
+`neutral`, `custom()` |
+| **actionView** | `dismissAction` | Dismisses the toast message | `.default` | `default` `custom()` `withTimer()` |
+| **dismissAction** | `(() -> Void)` | `Triggers the dismiss action` |  |  |

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

@@ -14,3 +14,12 @@ examples:
   - fixed_confirmation_toast_positions: Click to Show Positions
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
+
+  swift:
+  - fixed_confirmation_toast_default_swift: Default
+  - fixed_confirmation_toast_multi_line_swift: Multi Line
+  #- fixed_confirmation_toast_close_swift: Click to Close
+  #- fixed_confirmation_toast_positions_swift: Click to Show Positions
+  - fixed_confirmation_toast_children_swift: Children
+  #- fixed_confirmation_toast_dismiss_with_timer_swift: Timer
+  - fixed_confirmation_toast_props_swift: ""