playbook_ui_docs 13.13.0 → 13.14.0.pre.alpha.play1101betaicons1798

data/app/pb_kits/playbook/pb_person/docs/_person_default_swift.md

@@ -0,0 +1,8 @@
+![PBIOS-227](https://github.com/powerhome/playbook/assets/92755007/e43f94bd-2d2e-46cc-a848-6ac7425f89f9)
+
+
+```swift
+
+PBPerson(firstName: "Timothy", lastName: "Wenhold")
+
+```

data/app/pb_kits/playbook/pb_person/docs/_person_props_swift.md

@@ -0,0 +1,5 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **firstName** | `String` | Sets the first name |  |  |
+| **lastName** | `String` | Sets the last name |  |  |

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

@@ -7,3 +7,7 @@ examples:
   react:
   - person_default: Default
   
+  swift:
+  - person_default_swift: Default
+  - person_props_swift: ""
+  

data/app/pb_kits/playbook/pb_select/docs/_select_default_swift.md

@@ -0,0 +1,15 @@
+![select-default](https://github.com/powerhome/playbook/assets/54749071/ead0e074-46ae-425a-ab32-d9c4418a0783)
+
+
+```swift
+let defaultOptions = [
+    (value: "1", text: "Burgers"),
+    (value: "2", text: "Pizza"),
+    (value: "3", text: "Tacos")
+  ]
+@State private var defaultState = ""
+
+ PBSelect(title: "Favorite Food", options: defaultOptions, style: .default) { selected in
+            defaultState = selected
+          }
+```

data/app/pb_kits/playbook/pb_select/docs/_select_error_swift.md

@@ -0,0 +1,18 @@
+![select-error](https://github.com/powerhome/playbook/assets/54749071/c02e365b-c3a1-446b-b9f2-47db11315786)
+
+```swift
+let defaultOptions = [
+    (value: "1", text: "Burgers"),
+    (value: "2", text: "Pizza"),
+    (value: "3", text: "Tacos")
+  ]
+@State private var errorState = ""
+
+ PBSelect(
+            title: "Favorite Food",
+            options: defaultOptions,
+            style: .error("Please make a valid selection")
+          ) { selected in
+            errorState = selected
+          }
+```

data/app/pb_kits/playbook/pb_select/docs/_select_props_table.md

@@ -0,0 +1,8 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **title** | `String` | Sets label title for dropdown |  |  |
+| **options** | `(String, String)` | Displays the list of dropdown options | |  |
+| **style** | `Variant` | Options for the state of dropdown | `.default` | `default` `disabled` `error` |
+| **selectedOption** | `String` | Changes selected value when new value is selected |  |  |
+| **selected** | `String` | Changes the value of the option selected in dropdown |  | |

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

@@ -28,3 +28,8 @@ examples:
   - select_inline: Select Inline
   - select_inline_compact: Select Inline Compact
   - select_multiple: Select Multiple
+
+  swift:
+  - select_default_swift: Default
+  - select_error_swift: Error
+  - select_props_table: ""

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: 0.9, padding_bottom: "xs" }) %>
 
-<%= pb_rails("star_rating", props: { rating: 3 }) %>
+<%= pb_rails("star_rating", props: { rating: 1.5, 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.2, 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,4 @@
-<%= 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: 2.8, layout_option: "number", padding_bottom: "xs" }) %>
+<%= pb_rails("star_rating", props: { rating: 3, layout_option: "number", padding_bottom: "xs" }) %>
+<%= pb_rails("star_rating", props: { rating: 1, layout_option: "onestar", padding_bottom: "xs" }) %>

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

@@ -3,13 +3,38 @@ 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={2.8}
+        {...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_user/docs/_user_horizontal_swift.md

@@ -0,0 +1,37 @@
+![user-horizontal](https://github.com/powerhome/playbook/assets/92755007/63680051-6a88-4ae7-bffd-74d8e9b3a805)
+
+```swift
+
+let img = Image("andrew", bundle: .module)
+let name = "Andrew K"
+let title = "Rebels Developer"
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBUser(
+    name: name,
+    image: img,
+    territory: "PHL",
+    title: title
+  )
+
+  PBUser(
+    name: name,
+    territory: "PHL",
+    title: title
+  )
+
+  PBUser(
+    name: name,
+    image: img,
+    size: .small,
+    title: title
+  )
+
+  PBUser(
+    name: name,
+    image: img,
+    size: .small
+  )
+}
+
+```

data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md

@@ -0,0 +1,10 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **name** | `String` | Sets the User's name |  |  |
+| **displayAvatar** | `Bool` | Displays the User's avatar | `true` | `true` `false` |
+| **image** | `Image` | Sets image for the avatar |  |  |
+| **orientation** | `Orientation` | Changes the orientation of the User | `.horizontal` | `.horizontal` `.verticle` |
+| **size** | `UserAvatarSize` | Changes the size of the User | `.medium` | `.small` `.medium` `.large` |
+| **territory** | `String` | Adds the User's territory |  |  |
+| **title** | `String` | Adds a title |  |  |

data/app/pb_kits/playbook/pb_user/docs/_user_size_swift.md

@@ -0,0 +1,35 @@
+![user-size](https://github.com/powerhome/playbook/assets/54749071/ed012a15-64a1-4c13-a0bc-7457660992f6)
+
+
+```swift
+
+let img = Image("andrew", bundle: .module)
+let name = "Andrew K"
+let title = "Rebels Developer"
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBUser(
+    name: name,
+    image: img,
+    size: .small,
+    territory: "PHL",
+    title: title
+  )
+
+  PBUser(
+    name: name,
+    image: img,
+    territory: "PHL",
+    title: title
+  )
+
+  PBUser(
+    name: name,
+    image: img,
+    size: .large,
+    territory: "PHL",
+    title: title
+  )
+}
+
+```

data/app/pb_kits/playbook/pb_user/docs/_user_text_only_swift.md

@@ -0,0 +1,27 @@
+![user-text-only](https://github.com/powerhome/playbook/assets/54749071/ba04df54-6590-4db6-ad32-38932a08aced)
+
+
+```swift
+
+let img = Image("andrew", bundle: .module)
+let name = "Andrew K"
+let title = "Rebels Developer"
+
+VStack(spacing: Spacing.small) {
+  PBUser(
+    name: name,
+    displayAvatar: false,
+    size: .large,
+    territory: "PHL",
+    title: title
+  )
+
+  PBUser(
+    name: name,
+    displayAvatar: false,
+    territory: "PHL",
+    title: title
+  )
+}
+
+```

data/app/pb_kits/playbook/pb_user/docs/_user_vertical_size_swift.md

@@ -0,0 +1,35 @@
+![user-verticle-size](https://github.com/powerhome/playbook/assets/54749071/e99b4c9b-0752-467e-971e-a6a5f520009e)
+
+
+```swift
+
+let img = Image("andrew", bundle: .module)
+let name = "Andrew K"
+let title = "Rebels Developer"
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBUser(
+    name: name,
+    image: img,
+    orientation: .vertical,
+    size: .small,
+    title: title
+  )
+
+  PBUser(
+    name: name,
+    image: img,
+    orientation: .vertical,
+    title: title
+  )
+
+  PBUser(
+    name: name,
+    image: img,
+    orientation: .vertical,
+    size: .large,
+    title: title
+  )
+}
+
+```

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

@@ -17,3 +17,10 @@ examples:
   - user_vertical_size: Vertical Size
   - user_subtitle: Subtitle
   - user_block_content_subtitle_react: Block Content Subtitle
+
+  swift:
+  - user_horizontal_swift: Horizontal
+  - user_vertical_size_swift: Vertical
+  - user_text_only_swift: Text Only
+  - user_size_swift: Horizontal Size
+  - user_props_table: ""