playbook_ui_docs 13.12.0 → 13.13.0.pre.alpha.play900startratingasinput1657

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4784548b050e5dd4d0634d4156a44d582ca2a13c5d798dfb9bda5275981d8f90
-  data.tar.gz: 22d59fe8a1024100855e7a395c5612e134a7a5cf62c356dc432f9b3b4003022c
+  metadata.gz: 4ea9616a1a0ebfeb207646e73702e51eaad93c2a6051126363db8d1cbaa2a674
+  data.tar.gz: 125091d72d224c90a9aff3905a753e975addb7514c9a2ea34f6ba9488bcb07bd
 SHA512:
-  metadata.gz: 9e10221ac4c1ddbfa4eff8821e523cc25fe6546662beb615281bc6ae014977620a8e9c50b17d06b7642ebb0a08f9920093cdddde094f5fd5663be630863153bd
-  data.tar.gz: 9169c12d81e1c13ac73ba9a8775638066afef8ba541ccccda8b064f246cd160ea11669301d906c66e48650858a031fa63ead44ddbb0b09fbacd59f8ddfe1ce3e
+  metadata.gz: db21daeb18c456a242a57e1534923d99261be6b2d0a5a03192f46d29fb4a2702f25befdd28ebb98f47b70aba3b222d79b43a66f80a7b454092b0e17aeda2f841
+  data.tar.gz: a6702ed707537ccae106f2c5c46a7a9d60eaa1219fb1e82e843a98b238b4ac1e82928367dbf20c312dccd0db4e9f3204d3d72f7d834694df703c8a3d02d9230c

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.md

@@ -0,0 +1 @@
+To display the "No Filters Selected" text, the `filters` prop must be `null`. As a suggestion, check the values of each key in your filters object. If they are all falsy, return `null`.

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default_swift.md

@@ -0,0 +1,11 @@
+![mulitple-users-default](https://github.com/powerhome/playbook/assets/92755007/73dffd55-14f7-468e-b6ea-4e700980183d)
+
+```swift
+
+let twoUsers = [andrew, picAndrew]
+
+PBDoc(title: "xSmall") {
+  PBMultipleUsers(users: twoUsers, size: .xSmall)
+}
+
+```

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_props_swift.md

@@ -0,0 +1,7 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Users** | `[PBUser]` | Sets the user's avatars |  |  |
+| **Size** | `AvatarSize` | Changes the size of the avatars  | `.small` | `.xSmall` `.small` |
+| **Reversed** | `Bool` | Changes the order of the avatars | `false` | `true` `false` |
+| **Max Displayed Users** | `Int` | Limits the number of avatars displayed | `4` |  |

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse_swift.md

@@ -0,0 +1,13 @@
+![multiple-users-reverse](https://github.com/powerhome/playbook/assets/92755007/be3f6f7d-f699-40f2-bbb6-8a99144a8744)
+
+```swift
+
+let multipleUsers = [andrew, picAndrew, andrew, andrew]
+let twoUsers = [andrew, picAndrew]
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBMultipleUsers(users: multipleUsers, size: .small, reversed: true)
+  PBMultipleUsers(users: twoUsers, size: .small, reversed: true)
+}
+
+```

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size_swift.md

@@ -0,0 +1,11 @@
+![mulitple-users-size](https://github.com/powerhome/playbook/assets/92755007/5c15b862-fb32-4e0a-a826-bc25b1db555e)
+
+```swift
+
+let multipleUsers = [andrew, picAndrew, andrew, andrew]
+
+PBDoc(title: "Small") {
+  PBMultipleUsers(users: multipleUsers, size: .small)
+}
+
+```

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

@@ -10,3 +10,9 @@ examples:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
   - multiple_users_size: Size
+
+  swift:
+  - multiple_users_default_swift: Default
+  - multiple_users_reverse_swift: Reverse
+  - multiple_users_size_swift: Small
+  - multiple_users_props_swift: ""

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default_swift.md

@@ -0,0 +1,15 @@
+![mulitple-users-stacked-default](https://github.com/powerhome/playbook/assets/92755007/180e1275-3eb6-4b28-b1ef-bdde45ab3c2e)
+
+```swift
+
+let oneUser = [andrew]
+let twoUsers = [andrew, picAndrew]
+let multipleUsers = [andrew, picAndrew, andrew, andrew]
+
+HStack(spacing: Spacing.xSmall) {
+  PBMultipleUsersStacked(users: oneUser, size: .default)
+  PBMultipleUsersStacked(users: twoUsers, size: .default)
+  PBMultipleUsersStacked(users: multipleUsers, size: .default)
+}
+
+```

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_props_swift.md

@@ -0,0 +1,5 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Users** | `[PBUser]` | Sets the user's avatars |  |  |
+| **Size** | `Size` | Changes the size of the avatars | `.small` | `.default` `.small` `.xSmall` |

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_small_swift.md

@@ -0,0 +1,15 @@
+![mulitple-users-stacked-small](https://github.com/powerhome/playbook/assets/92755007/277fd685-6302-462e-a02a-18a8fcb57715)
+
+```swift
+
+let oneUser = [andrew]
+let twoUsers = [andrew, picAndrew]
+let multipleUsers = [andrew, picAndrew, andrew, andrew]
+
+HStack(spacing: Spacing.xSmall) {
+  PBMultipleUsersStacked(users: oneUser)
+  PBMultipleUsersStacked(users: twoUsers)
+  PBMultipleUsersStacked(users: multipleUsers)
+}
+
+```

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_xsmall_swift.md

@@ -0,0 +1,15 @@
+![mulitple-users-stacked-xsmall](https://github.com/powerhome/playbook/assets/92755007/4f31976f-a41b-4923-9230-5015f6ad75f8)
+
+```swift
+
+let oneUser = [andrew]
+let twoUsers = [andrew, picAndrew]
+let multipleUsers = [andrew, picAndrew, andrew, andrew]
+
+ HStack(spacing: Spacing.xSmall) {
+  PBMultipleUsersStacked(users: oneUser, size: .xSmall)
+  PBMultipleUsersStacked(users: twoUsers, size: .xSmall)
+  PBMultipleUsersStacked(users: multipleUsers, size: .xSmall)
+}
+
+```

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

@@ -6,3 +6,9 @@ examples:
 
   react:
   - multiple_users_stacked_default: Default
+
+  swift: 
+  - multiple_users_stacked_default_swift: Default
+  - multiple_users_stacked_small_swift: Small
+  - multiple_users_stacked_xsmall_swift: xSmall
+  - multiple_users_stacked_props_swift: ""

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children_swift.md

@@ -0,0 +1,14 @@
+
+![section-separator-children](https://github.com/powerhome/playbook/assets/92755007/acd6a8eb-d034-4efd-b2e6-afabe739e678)
+
+```swift
+
+PBSectionSeparator(variant: .dashed) {
+  PBCard(alignment: .center, borderRadius: BorderRadius.rounded, padding: Spacing.xxSmall, width: 70) {
+    Text("Today")
+      .pbFont(.caption)
+      .frame(maxWidth: .infinity, alignment: .center)
+  }
+}
+
+```

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed_swift.md

@@ -0,0 +1,7 @@
+![section-separator-dashed](https://github.com/powerhome/playbook/assets/92755007/e4f01870-3d90-4655-9136-5c7565711e1f)
+
+```swift
+
+PBSectionSeparator(variant: .dashed)
+
+```

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line_swift.md

@@ -0,0 +1,8 @@
+
+![section-separator-default](https://github.com/powerhome/playbook/assets/92755007/2560d5e2-f345-42d2-bad9-2a2e031b3e08)
+
+```swift
+
+PBSectionSeparator()
+
+```

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_props_swift.md

@@ -0,0 +1,8 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **text** | `String` | Adds text to the Section Separator | `nil` |  |
+| **orientation** | `Orientation` | Changes the orientation | `.horizontal` | `.horizontal` `.vertical` |
+| **variant** | `Variant` | Changes the style of the Section Separator | `.card` | `.dashed` `.card` |
+| **dividerOpacity** | `CGFloat` | Adjusts the opacity of the divider | `1` |  |
+| **margin** | `CGFloat` | Adds margin between text and the divider | `Spacing.xSmall` | `Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge` |

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_swift.md

@@ -0,0 +1,7 @@
+![section-separator-text](https://github.com/powerhome/playbook/assets/92755007/4b481a7d-d001-43b6-b779-cfdc6fffc15f)
+
+```swift
+
+PBSectionSeparator("Text separator")
+
+```

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical_swift.md

@@ -0,0 +1,18 @@
+![section-separator-verticle](https://github.com/powerhome/playbook/assets/92755007/21ca54a5-6b8a-459f-91ad-4e9b68258f68)
+
+```swift
+
+let loremIpsum: some View = Text(
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididt labore et dolore"
+)
+
+HStack(spacing: Spacing.none) {
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididt labore et dolore"
+  PBSectionSeparator(orientation: .vertical)
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididt labore et dolore"
+}
+.frame(maxWidth: .infinity)
+.frame(height: 120, alignment: .center)
+.listRowSeparator(.hidden)
+
+```

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

@@ -13,3 +13,11 @@ examples:
   - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
   - section_separator_children: Children
+
+  swift:
+  - section_separator_line_swift: Line Separator
+  - section_separator_dashed_swift: Dashed Separator
+  - section_separator_text_swift: Text Separator
+  - section_separator_vertical_swift: Vertical
+  - section_separator_children_swift: Children
+  - section_separator_props_swift: ""

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_background_options.html.erb

@@ -0,0 +1,2 @@
+<%= pb_rails("star_rating", props: { rating: 3, background_type: "fill", padding_bottom: "xs" }) %>
+<%= pb_rails("star_rating", props: { rating: 3, background_type: "outline", padding_bottom: "xs" }) %>

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_background_options.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import StarRating from '../_star_rating'
+
+const StarRatingBackgroundOptions = (props) => (
+  <>
+
+    <StarRating
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+
+
+    <StarRating
+        backgroundType='outline'
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+
+  </>
+)
+
+export default StarRatingBackgroundOptions

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_color_options.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("star_rating", props: { rating: 3, padding_bottom: "xs" }) %>
+<%= pb_rails("star_rating", props: { rating: 3, color_option: "primary", padding_bottom: "xs" }) %>
+<%= pb_rails("star_rating", props: { rating: 3, color_option: "subtle", padding_bottom: "xs" }) %>

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_color_options.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import StarRating from '../_star_rating'
+
+const StarRatingColorOptions = (props) => (
+  <>
+
+    <StarRating
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+
+    <StarRating
+        colorOption='primary'
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+
+    <StarRating
+        colorOption='subtle'
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+
+  </>
+)
+
+export default StarRatingColorOptions

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.html.erb

@@ -1,13 +1,11 @@
-<%= pb_rails("star_rating") %>
+<%= pb_rails("star_rating", props: { padding_bottom: "xs" }) %>
 
-<br>
+<%= pb_rails("star_rating", props: { rating: 1, padding_bottom: "xs" }) %>
 
-<%= pb_rails("star_rating", props: { rating: 3 }) %>
+<%= pb_rails("star_rating", props: { rating: 2, padding_bottom: "xs" }) %>
 
-<br>
+<%= pb_rails("star_rating", props: { rating: 3, padding_bottom: "xs" }) %>
 
-<%= pb_rails("star_rating", props: { rating: 1.5 }) %>
+<%= pb_rails("star_rating", props: { rating: 4, padding_bottom: "xs" }) %>
 
-<br>
-
-<%= pb_rails("star_rating", props: { rating: 5 }) %>
+<%= pb_rails("star_rating", props: { rating: 5, padding_bottom: "xs" }) %>

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.jsx

@@ -4,25 +4,38 @@ import StarRating from '../_star_rating'
 
 const StarRatingDefault = (props) => (
   <>
-    <StarRating />
+    <StarRating
+        paddingBottom="xs"
+        {...props}
+    />
 
-    <br />
 
     <StarRating
-        rating={3}
+        paddingBottom="xs"
+        rating={0.9}
         {...props}
     />
 
-    <br />
-
     <StarRating
+        paddingBottom="xs"
         rating={1.5}
         {...props}
     />
 
-    <br />
+    <StarRating
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+
+    <StarRating
+        paddingBottom="xs"
+        rating={4.2}
+        {...props}
+    />
 
     <StarRating
+        paddingBottom="xs"
         rating={5}
         {...props}
     />

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.html.erb

@@ -1 +1,3 @@
-<%= pb_rails("star_rating", props: { rating: 3.5, hide_rating: true }) %>
+<%= pb_rails("star_rating", props: { rating: 3, padding_bottom: "xs" }) %>
+<%= pb_rails("star_rating", props: { rating: 3, layout_option: "number", padding_bottom: "xs" }) %>
+<%= pb_rails("star_rating", props: { rating: 3, layout_option: "onestar", padding_bottom: "xs" }) %>

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.jsx

@@ -3,13 +3,30 @@ import React from 'react'
 import StarRating from '../_star_rating'
 
 const StarRatingHide = (props) => (
+  <>
 
-  <StarRating
-      hideRating
-      rating={3.5}
-      {...props}
-  />
+    <StarRating
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
 
+
+    <StarRating
+        layoutOption={"number"}
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+
+    <StarRating
+        layoutOption={"onestar"}
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+
+  </>
 )
 
 export default StarRatingHide

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_number_config.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("star_rating", props: { rating: 3, denominator: 3, padding_bottom: "xs" }) %>
+<%= pb_rails("star_rating", props: { rating: 3, denominator: 4, padding_bottom: "xs" }) %>
+<%= pb_rails("star_rating", props: { rating: 3, padding_bottom: "xs" }) %>
+<%= pb_rails("star_rating", props: { rating: 3, denominator: 6, padding_bottom: "xs" }) %>
+<%= pb_rails("star_rating", props: { rating: 3, denominator: 7, padding_bottom: "xs" }) %>
+<%= pb_rails("star_rating", props: { rating: 3, denominator: 8, padding_bottom: "xs" }) %>

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_number_config.jsx

@@ -0,0 +1,58 @@
+import React from 'react'
+
+import StarRating from '../_star_rating'
+
+const StarRatingNumberConfig = (props) => (
+  <>
+
+    <StarRating
+        denominator={3}
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+
+
+    <StarRating
+        denominator={4}
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+
+
+    <StarRating
+        denominator={5}
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+
+
+    <StarRating
+        denominator={6}
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+
+
+    <StarRating
+        denominator={7}
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+
+
+    <StarRating
+        denominator={8}
+        paddingBottom="xs"
+        rating={3}
+        {...props}
+    />
+
+  </>
+)
+
+export default StarRatingNumberConfig

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_size_options.html.erb

@@ -0,0 +1,16 @@
+<%= pb_rails("star_rating", props: { rating: 3, size: "xs", padding_bottom: "xs" }) %>
+
+
+<%= pb_rails("star_rating", props: { rating: 3, size: "sm", padding_bottom: "xs" }) %>
+
+
+<%= pb_rails("star_rating", props: { rating: 3, size: "md", padding_bottom: "xs" }) %>
+
+
+<%= pb_rails("star_rating", props: { rating: 3, size: "lg", padding_bottom: "xs" }) %>
+
+
+<%= pb_rails("star_rating", props: { rating: 3, size: "lg", layout_option: "number", padding_bottom: "xs" }) %>
+
+
+<%= pb_rails("star_rating", props: { rating: 3, size: "lg", layout_option: "onestar", padding_bottom: "xs" }) %>

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_size_options.jsx

@@ -0,0 +1,60 @@
+import React from 'react'
+
+import StarRating from '../_star_rating'
+
+const StarRatingSizeOptions = (props) => (
+  <>
+
+    <StarRating
+        paddingBottom="xs"
+        rating={3}
+        size="xs"
+        {...props}
+    />
+
+
+    <StarRating
+        paddingBottom="xs"
+        rating={3}
+        size="sm"
+        {...props}
+    />
+
+
+    <StarRating
+        paddingBottom="xs"
+        rating={3}
+        size="md"
+        {...props}
+    />
+
+
+    <StarRating
+        paddingBottom="xs"
+        rating={3}
+        size="lg"
+        {...props}
+    />
+
+
+    <StarRating
+        layoutOption="number"
+        paddingBottom="xs"
+        rating={3}
+        size="lg"
+        {...props}
+    />
+
+
+    <StarRating
+        layoutOption="onestar"
+        paddingBottom="xs"
+        rating={3}
+        size="lg"
+        {...props}
+    />
+
+  </>
+)
+
+export default StarRatingSizeOptions

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

@@ -1,9 +1,16 @@
 examples:
-
   rails:
-  - star_rating_default: Default
-  - star_rating_hide: Hide Rating Value
+    - star_rating_default: Default
+    - star_rating_color_options: Color Options
+    - star_rating_background_options: Background Options
+    - star_rating_hide: Layout Options
+    - star_rating_number_config: Number Config
+    - star_rating_size_options: Size Options
 
   react:
-  - star_rating_default: Default
-  - star_rating_hide: Hide Rating Value
+    - star_rating_default: Default
+    - star_rating_color_options: Color Options
+    - star_rating_background_options: Background Options
+    - star_rating_hide: Layout Options
+    - star_rating_number_config: Number Config
+    - star_rating_size_options: Size Options

data/app/pb_kits/playbook/pb_star_rating/docs/index.js

@@ -1,3 +1,11 @@
 export { default as StarRatingDefault } from './_star_rating_default.jsx'
 
+export { default as StarRatingColorOptions } from './_star_rating_color_options.jsx'
+
+export { default as StarRatingBackgroundOptions } from './_star_rating_background_options.jsx'
+
 export { default as StarRatingHide } from './_star_rating_hide.jsx'
+
+export { default as StarRatingNumberConfig } from './_star_rating_number_config.jsx'
+
+export { default as StarRatingSizeOptions } from './_star_rating_size_options.jsx'

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on_swift.md

@@ -0,0 +1,35 @@
+![text-input-add-on](https://github.com/powerhome/playbook/assets/92755007/65a28e6a-9e65-4ca1-af8d-91dae6eac4f5)
+
+```swift
+
+PBTextInput(
+  "ADD ON WITH DEFAULTS",
+  text: $textAddOn,
+  style: .rightIcon(.user, divider: true)
+)
+
+PBTextInput(
+  "RIGHT-ALIGNED ADD ON WITH BORDER",
+  text: $textAddOnRight,
+  style: .rightIcon(.user, divider: true)
+)
+
+PBTextInput(
+  "RIGHT-ALIGNED ADD ON WITH NO BORDER",
+  text: $textAddOnRightNoBorder,
+  style: .rightIcon(.user, divider: false)
+)
+
+PBTextInput(
+  "LEFT-ALIGNED ADD ON WITH NO BORDER",
+  text: $textAddOnLeft,
+  style: .leftIcon(.user, divider: false)
+)
+
+PBTextInput(
+  "LEFT-ALIGNED ADD ON WITH BORDER",
+  text: $textAddOnLeftNoBorder,
+  style: .leftIcon(.user, divider: true)
+)
+
+```

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default_swift.md

@@ -0,0 +1,29 @@
+![text-input-default](https://github.com/powerhome/playbook/assets/92755007/625a246e-9d5c-42ea-8c6e-7afcf0984c9a)
+
+
+```swift
+
+@State private var textFirstName: String = ""
+@State private var textLastName: String = ""
+@State private var textPhone: String = ""
+
+PBTextInput(
+  "First name",
+  text: $textFirstName,
+  placeholder: "Enter first name"
+)
+
+PBTextInput(
+  "Last name",
+  text: $textLastName,
+  placeholder: "Enter last name"
+)
+
+PBTextInput(
+  "Phone number",
+  text: $textPhone,
+  placeholder: "Enter phone number",
+  keyboardType: .phonePad
+)
+
+```