playbook_ui 12.36.0 → 12.37.0.pre.alpha.svgiconmethods1064

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom_icons.jsx

@@ -1,7 +1,5 @@
 import React from "react";
-
-import Nav from "../_nav";
-import NavItem from "../_item";
+import { Nav, NavItem } from '../..'
 
 const CollapsibleNavCustomIcons = (props) => {
   return (
@@ -9,7 +7,7 @@ const CollapsibleNavCustomIcons = (props) => {
       <NavItem
           collapsible 
           iconLeft="city" 
-          iconRight={["chevron-down", "chevron-up"]}
+          iconRight={["plus", "minus"]}
           link="#" 
           text="Overview" 
           {...props}
@@ -34,7 +32,7 @@ const CollapsibleNavCustomIcons = (props) => {
           active 
           collapsible 
           iconLeft="theater-masks"
-          iconRight={["chevron-down", "chevron-up"]}
+          iconRight={["plus", "minus"]}
           link="#" 
           text="Albums" 
           {...props}
@@ -58,7 +56,7 @@ const CollapsibleNavCustomIcons = (props) => {
       <NavItem 
           collapsible 
           iconLeft="city" 
-          iconRight={["chevron-down", "chevron-up"]}
+          iconRight={["plus", "minus"]}
           link="#" 
           text="Similar Artists" 
           {...props}

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

@@ -26,7 +26,7 @@ examples:
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
   # - collapsible_nav: Subtle With Collapsible
-  # - collapsible_nav_custom_icons: Subtle With Collapsible (Custom Toggle Icons)
+  # - collapsible_nav_custom_icons: Subtle With Collapsible (No custom toggling)
   - subtle_no_highlight_nav: Subtle No Highlight
   - bold_vertical_nav: Bold Variant
   - horizontal_nav: Horizontal Nav

data/app/pb_kits/playbook/pb_nav/item.rb

@@ -14,7 +14,11 @@ module Playbook
                     values: %w[_blank _self _parent _top],
                     default: "_self"
       def classname
-        generate_classname("pb_nav_list_kit_item", active_class)
+        if collapsible
+          "pb_collapsible_nav_item #{generate_classname('pb_nav_list_kit_item', active_class)}"
+        else
+          generate_classname("pb_nav_list_kit_item", active_class)
+        end
       end
 
       def tag

data/app/pb_kits/playbook/pb_pill/docs/_pill_default_swift.md

@@ -0,0 +1,5 @@
+![pill-default](https://github.com/powerhome/playbook/assets/92755007/608cb5dd-9400-45f4-afb2-ac1bbd972c3d)
+
+```swift
+PBPill("default")
+```

data/app/pb_kits/playbook/pb_pill/docs/_pill_props_swift.md

@@ -0,0 +1,5 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **title** | `String` | Specifies the value of the Pill |  |  |
+| **variant** | `Variant` | Changes the color of the Pill | `.neutral` | `.error` `.info` `.neutral` `.primary` `.success` `.warning` |

data/app/pb_kits/playbook/pb_pill/docs/_pill_variants_swift.md

@@ -0,0 +1,10 @@
+![pill-variants](https://github.com/powerhome/playbook/assets/92755007/79ac4260-633e-4429-8b1f-0a97b8178a86)
+
+```swift
+PBPill("success", variant: .success)
+ PBPill("error", variant: .error)
+ PBPill("warning", variant: .warning)
+ PBPill("info", variant: .info)
+ PBPill("neutral", variant: .neutral)
+ PBPill("primary", variant: .primary)
+```

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

@@ -11,3 +11,8 @@ examples:
   - pill_default: Default
   - pill_variants: Variants
   - pill_example: Example
+
+  swift:
+  - pill_default_swift: Default
+  - pill_variants_swift: Variants
+  - pill_props_swift: ""

data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment_swift.md

@@ -0,0 +1,16 @@
+![radio-alignment](https://github.com/powerhome/playbook/assets/92755007/04b84035-8391-4de1-a33e-8964999d5c0f)
+
+```swift
+VStack(alignment: .leading) {
+  PBRadio(
+    items: [
+      PBRadioItem("Power"),
+      .init("Nitro"),
+      .init("Google")
+    ],
+    orientation: .horizontal,
+    textAlignment: .vertical,
+    selected: $selectedAlignment
+  )
+}
+```

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_swift.md

@@ -0,0 +1,18 @@
+![radio-custom](https://github.com/powerhome/playbook/assets/92755007/3eab180b-0550-4d7e-b562-84a007690218)
+
+```swift
+VStack(alignment: .leading) {
+  if let selectedCustom = selectedCustom {
+    Text("Your choice is: \(selectedCustom.title)")
+  }
+  PBRadio(
+    items: [
+      PBRadioItem("Custom Power"),
+      .init("Custom Nitro"),
+      .init("Custom Google")
+    ],
+    orientation: .vertical,
+    selected: $selectedCustom
+  )
+}
+```

data/app/pb_kits/playbook/pb_radio/docs/_radio_default_swift.md

@@ -0,0 +1,15 @@
+![radio-default](https://github.com/powerhome/playbook/assets/92755007/be32852e-de70-4ae0-b8bb-c091f8cfa34b)
+
+```swift
+VStack(alignment: .leading) {
+  PBRadio(
+    items: [
+      PBRadioItem("Power"),
+      .init("Nitro"),
+      .init("Google")
+    ],
+    orientation: .vertical,
+    selected: $selectedDefault
+  )
+}
+```

data/app/pb_kits/playbook/pb_radio/docs/_radio_error_swift.md

@@ -0,0 +1,14 @@
+![radio-error](https://github.com/powerhome/playbook/assets/92755007/425f499b-4daf-4093-82a7-230b01723287)
+
+```swift
+VStack(alignment: .leading) {
+  PBRadio(
+    items: [
+      PBRadioItem("Power")
+    ],
+    orientation: .vertical,
+    selected: $selectedError,
+    errorState: true
+  )
+}
+```

data/app/pb_kits/playbook/pb_radio/docs/_radio_orientation_swift.md

@@ -0,0 +1,15 @@
+![radio-orientation](https://github.com/powerhome/playbook/assets/92755007/f1f8dac7-a7d5-43cf-ba93-92bd624a1016)
+
+```swift
+VStack(alignment: .leading) {
+  PBRadio(
+    items: [
+      PBRadioItem("Power"),
+      .init("Nitro"),
+      .init("Google")
+    ],
+    orientation: .horizontal,
+    selected: $selectedOrientation
+  )
+}
+```

data/app/pb_kits/playbook/pb_radio/docs/_radio_padding_swift.md

@@ -0,0 +1,31 @@
+![radio-padding](https://github.com/powerhome/playbook/assets/92755007/5cb123fb-791b-43f7-a57e-336f93c1bb3a)
+
+```swift
+VStack(alignment: .leading) {
+  PBRadio(
+    items: [
+      PBRadioItem("Small")
+    ],
+    orientation: .vertical,
+    padding: Spacing.small,
+    selected: $selectedPadding
+  )
+  PBRadio(
+    items: [
+      PBRadioItem("Medium")
+    ],
+    orientation: .vertical,
+    padding: Spacing.medium,
+    selected: $selectedPadding
+  )
+  PBRadio(
+    items: [
+      PBRadioItem("Large")
+    ],
+    orientation: .vertical,
+    padding: Spacing.large,
+    selected: $selectedPadding
+  )
+}
+
+```

data/app/pb_kits/playbook/pb_radio/docs/_radio_props_swift.md

@@ -0,0 +1,10 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **items** | `PBRadioItem` | Specifies the value of the Radio buttons | | |
+| **orientation** | `Orientation` | Changes between stacked or inline Radio items | `.vertical` | |
+| **textAlignment** | `Orientation` | Changes lable position | `.horizontal` | |
+| **spacing** | `CGFloat` | Applies padding around Radio and lable | `Spacing.xSmall` | `Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge` |
+| **padding** | `CGFloat` | Applies padding between Radio and lable | `Spacing.xSmall` | `Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge` |
+| **errorState** | `Bool` | Changes Radio to error styling | | |
+| **selected** | `PBRadioItem?` | Sets selected Radio item | | |

data/app/pb_kits/playbook/pb_radio/docs/_radio_spacing_swift.md

@@ -0,0 +1,36 @@
+![radio-spacing](https://github.com/powerhome/playbook/assets/92755007/58d1bf02-0c79-4526-9e5c-ba2f631d1dfe)
+
+```swift
+HStack(alignment: .top) {
+  PBRadio(
+    items: [
+      PBRadioItem("Small"),
+      .init("Small Spacing"),
+      .init("Small Power")
+    ],
+    orientation: .vertical,
+    spacing: Spacing.small,
+    selected: $selectedSpacing
+  )
+  PBRadio(
+    items: [
+      PBRadioItem("Medium"),
+      .init("Medium Spacing"),
+      .init("Medium Power")
+    ],
+    orientation: .vertical,
+    spacing: Spacing.medium,
+    selected: $selectedSpacing
+  )
+  PBRadio(
+    items: [
+      PBRadioItem("Large"),
+      .init("Large Spacing"),
+      .init("Large Power")
+    ],
+    orientation: .vertical,
+    spacing: Spacing.large,
+    selected: $selectedSpacing
+  )
+}
+```

data/app/pb_kits/playbook/pb_radio/docs/_radio_subtitle_swift.md

@@ -0,0 +1,13 @@
+![radio-subtitle](https://github.com/powerhome/playbook/assets/92755007/1244f4d4-0e87-4b5a-9b20-ac2223866321)
+
+```swift
+VStack(alignment: .leading) {
+  PBRadio(
+    items: [
+      PBRadioItem("Power", subtitle: "subtitle")
+    ],
+    selected: $selectedSubtitle
+  )
+}
+
+```

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

@@ -12,3 +12,14 @@ examples:
   - radio_custom: Custom
   - radio_error: With Error
   - radio_alignment: Alignment
+
+  swift:
+  - radio_default_swift: Default
+  - radio_custom_swift: Custom
+  - radio_error_swift: With Error
+  - radio_orientation_swift: Orientation
+  - radio_alignment_swift: Alignment
+  - radio_spacing_swift: Spacing
+  - radio_padding_swift: Padding
+  - radio_subtitle_swift: Subtitle
+  - radio_props_swift: ""

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_options.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("text_input", props: {
+  placeholder: "Placeholder", 
+  input_options: {
+    id: "testing-one-time-code",
+    autocomplete: "one-time-code",
+    name:"auth-token",
+    inputmode:"numeric",
+    pattern:"[0-9]*",
+    type: "text"
+  }
+}) %>
+

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

@@ -7,6 +7,7 @@ examples:
   - text_input_add_on: Add On
   - text_input_inline: Inline
   - text_input_no_label: No Label
+  - text_input_options: Input Options
   react:
   - text_input_default: Default
   - text_input_error: With Error

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -60,7 +60,7 @@ module Playbook
           required: required,
           type: type,
           value: value,
-        }
+        }.merge(input_options)
       end
 
       def validation_message

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align_swift.md

@@ -0,0 +1,45 @@
+![timestamp-align](https://github.com/powerhome/playbook/assets/92755007/9107e699-218e-4a15-a0f9-b1a8f4710c37)
+
+```swiftå
+VStack(alignment: .leading, spacing: Spacing.small) {
+  Group {
+    PBTimestamp(
+      Date(),
+      showDate: false
+    )
+    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+    PBTimestamp(Date())
+      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+    PBTimestamp(Date().addingTimeInterval(addThreeYear))
+      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+    PBTimestamp(Date().addingTimeInterval(subOneYear))
+      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+  }
+  Group {
+    PBTimestamp(
+      Date(),
+      showDate: false
+    )
+      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .center)
+    PBTimestamp(Date())
+      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .center)
+    PBTimestamp(Date().addingTimeInterval(addThreeYear))
+      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .center)
+    PBTimestamp(Date().addingTimeInterval(subOneYear))
+      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .center)
+  }
+  Group {
+    PBTimestamp(
+      Date(),
+      showDate: false
+    )
+    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .trailing)
+    PBTimestamp(Date())
+      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .trailing)
+    PBTimestamp(Date().addingTimeInterval(addThreeYear))
+      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .trailing)
+    PBTimestamp(Date().addingTimeInterval(subOneYear))
+      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .trailing)
+  }
+}
+```

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default_swift.md

@@ -0,0 +1,26 @@
+![timestamp-default](https://github.com/powerhome/playbook/assets/92755007/064c6a98-4bdd-4160-8f4b-589233762c80)
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBTimestamp(
+    Date(),
+    showDate: false
+  )
+  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+
+  PBTimestamp(
+    Date()
+  )
+  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+
+  PBTimestamp(
+    Date().addingTimeInterval(addThreeYear)
+  )
+  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+
+  PBTimestamp(
+    Date().addingTimeInterval(subOneYear)
+  )
+  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+}
+```

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_swift.md

@@ -0,0 +1,25 @@
+![timestamp-elapsed](https://github.com/powerhome/playbook/assets/92755007/bb10a951-b536-41cc-aa6c-b343e826af20)
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBTimestamp(
+    Date().addingTimeInterval(-10),
+    showUser: true,
+    text: "Maricris Nanota",
+        variant: .elapsed
+  )
+  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+
+  PBTimestamp(
+    Date().addingTimeInterval(-36000),
+        variant: .elapsed
+  )
+  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+
+  PBTimestamp(
+    Date().addingTimeInterval(-36000),
+        variant: .hideUserElapsed
+  )
+  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+}
+```

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_props_swift.md

@@ -0,0 +1,10 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **amPmStyle** | `AmPmStyle` | Displays shortened or full version of "am" and "pm" | `.short` | `.short` `.full` |
+| **showDate** | `Bool` | Displays date | `true` |  |
+| **showTimeZone** | `Bool` | Displays time zone | `false` |  |
+| **showUser** | `Bool` | Displays user's name | `false` |  |
+| **text** | `String` | Specifies which user to display | `nil` |  |
+| **timeZone** | `String` | Specifies which time zone to display | `nil` |  |
+| **variant** | `Variant` | Specifies copy for last upadted | `.standard` | `.elapsed` `.standard`  `.updated` `.hideUserElapsed` |

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_swift.md

@@ -0,0 +1,67 @@
+![timestamp-timezones](https://github.com/powerhome/playbook/assets/92755007/119f0838-e912-473b-83de-626db1fd0d61)
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  Group {
+    PBTimestamp(
+      Date(),
+      showDate: false,
+      showTimeZone: true,
+      timeZone: "America/New_York"
+    )
+    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+
+    PBTimestamp(
+      Date(),
+      showTimeZone: true,
+      timeZone: "America/New_York"
+    )
+    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+
+    PBTimestamp(
+      Date().addingTimeInterval(addThreeYear),
+      showTimeZone: true,
+      timeZone: "America/New_York"
+    )
+    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+
+    PBTimestamp(
+      Date().addingTimeInterval(subOneYear),
+      showTimeZone: true,
+      timeZone: "America/New_York"
+    )
+    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+  }
+
+  Group {
+    PBTimestamp(
+      Date(),
+      showDate: false,
+      showTimeZone: true,
+      timeZone: "Asia/Hong_Kong"
+    )
+    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+
+    PBTimestamp(
+      Date(),
+      showTimeZone: true,
+      timeZone: "Asia/Hong_Kong"
+    )
+    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+
+    PBTimestamp(
+      Date().addingTimeInterval(addThreeYear),
+      showTimeZone: true,
+      timeZone: "Asia/Hong_Kong"
+    )
+    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+
+    PBTimestamp(
+      Date().addingTimeInterval(subOneYear),
+      showTimeZone: true,
+      timeZone: "Asia/Hong_Kong"
+    )
+    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+  }
+}
+```

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_swift.md

@@ -0,0 +1,19 @@
+![timestamp-updated](https://github.com/powerhome/playbook/assets/92755007/14717880-c584-4413-9d9b-c569392595b7)
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBTimestamp(
+    Date().addingTimeInterval(-12),
+    showUser: true,
+    text: "Maricris Nanota",
+    variant: .updated
+  )
+  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+
+  PBTimestamp(
+    Date().addingTimeInterval(-12),
+    variant: .updated
+  )
+  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
+}
+```

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

@@ -13,3 +13,11 @@ examples:
   - timestamp_timezones: Timezones
   - timestamp_updated: Last Updated by
   - timestamp_elapsed: Time Ago
+  
+  swift:
+  - timestamp_default_swift: Default
+  - timestamp_align_swift: Alignments
+  - timestamp_timezones_swift: Timezones
+  - timestamp_updated_swift: Last Updated by
+  - timestamp_elapsed_swift: Time Ago
+  - timestamp_props_swift: ""