playbook_ui_docs 13.15.0 → 13.16.0.pre.alpha.PLAY11641991

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e7ba9f12396d63760c5e3e46bb8449a7bafbc683738174da4e27b7018443f00f
-  data.tar.gz: 391e2efddde9d3139ca169a03e3fc019646cf8c96223189a85a54aec3b13a4e6
+  metadata.gz: 3125b3ce3a546d8b9b99c229f6e08ecf0a79aeca2a8fb38441a97681f7b7bf02
+  data.tar.gz: 7205570b0b740c53edbc12b2de5fbcff89dfd08744d389a63af037403f06d81c
 SHA512:
-  metadata.gz: fcb20342385c140c16cf89f2f45ddb1aa6d1afeba3cb4d37fe46b35d8186c608ace38301203a3d9b30a52e7258419aed00130e3938648fa6e4feae5d53277397
-  data.tar.gz: 5c561cf3b8f363dfa11198ba70d1ce43249a02f51f0255e16e9f573a3ef040b1f72d9dc1ef3461a5a24fa395f2c8bdd2175e4eda9e458bb2a74ed62be788172c
+  metadata.gz: fedc053d72eceae7183d9ecf9358bbfb38ce6f44e6df7d09f19dd29a6c17c1f659065d33ba3dac3c7cfbde4174ff583170d4b9768224dabb416af5497acf5832
+  data.tar.gz: 4cc759514e53459de46209401e148cbba2701d6feff5e9ab5fb5b75fa7e5ab14cef1f97fa39d062c0716a9f53bbe6e4eae186da2cec7ca083762af9a4bc1c95a

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_colors_swift.md

@@ -0,0 +1,27 @@
+![collapsible-colors](https://github.com/powerhome/playbook/assets/54749071/daafd129-fd0a-4992-8fee-bfa55aed8a23)
+
+```swift
+let iconSize: PBIcon.IconSize
+let iconColor: CollapsibleIconColor
+let text: String
+@State private var isCollapsed = true
+let lorem =
+      "
+      Group members... Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit vive.
+      Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo.
+      Praesent lorem arcu. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis.
+      "
+PBCollapsible(isCollapsed: $isCollapsed, iconSize: iconSize, iconColor: iconColor) {
+       VStack(spacing: Spacing.medium) {
+            CollapsibleDoc(iconColor: .default, text: "Default Section")
+            CollapsibleDoc(iconColor: .light, text: "Light Section")
+            CollapsibleDoc(iconColor: .lighter, text: "Lighter Section")
+            CollapsibleDoc(iconColor: .link, text: "Link Section")
+            CollapsibleDoc(iconColor: .error, text: "Error Section")
+            CollapsibleDoc(iconColor: .success, text: "Success Section")
+          }
+      } content: {
+       Text(lorem).pbFont(.body)
+      }
+
+```

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default_swift.md

@@ -0,0 +1,22 @@
+![collapsible-default](https://github.com/powerhome/playbook/assets/54749071/3e97095b-f6bb-45b7-bd33-99ebde0d40fd)
+
+
+```swift
+let iconSize: PBIcon.IconSize
+let iconColor: CollapsibleIconColor
+let text: String
+@State private var isCollapsed = true
+let lorem =
+      "
+      Group members... Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit vive.
+      Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo.
+      Praesent lorem arcu. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis.
+      "
+
+PBCollapsible(isCollapsed: $isCollapsed, iconSize: iconSize, iconColor: iconColor) {
+        CollapsibleDoc(text: "Main Section")
+      } content: {
+        Text(lorem).pbFont(.body)
+      }
+
+```

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_props_table.md

@@ -0,0 +1,8 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **isCollapsed** | `Bool` | Value for whether or not the dropdown is closed or open | `false` | `true` `false` |
+| **headerView** | `View` | Title of dropdown |  | |
+| **contentView** | `View` | Content of dropdown |  |  |
+| **iconSize** | `PBIcon.IconSize` | Sets size of chevron icon | `.small`  | `xSmall` `small` `large` `x1` `x2` `x3` `x4` `x5` `x6` `x7` `x8` `x9` `x10` |
+| **iconColor** | `CollapsibleIconColor` | Sets color of chevron icon | `.default` | `default` `light` `lighter` `link` `error` `success`  |

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_sizes_swift.md

@@ -0,0 +1,26 @@
+![collapsible-sizes](https://github.com/powerhome/playbook/assets/54749071/557bfe16-26e4-4966-9f1c-689a2dc44412)
+
+```swift
+let iconSize: PBIcon.IconSize
+let iconColor: CollapsibleIconColor
+let text: String
+@State private var isCollapsed = true
+let lorem =
+      "
+      Group members... Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit vive.
+      Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo.
+      Praesent lorem arcu. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis.
+      "
+
+PBCollapsible(isCollapsed: $isCollapsed, iconSize: iconSize, iconColor: iconColor) {
+      VStack(spacing: Spacing.medium) {
+            CollapsibleDoc(iconSize: .xSmall, text: "Extra Small Section")
+            CollapsibleDoc(iconSize: .small, text: "Small Section")
+            CollapsibleDoc(text: "Default Section")
+            CollapsibleDoc(iconSize: .large, text: "Large Section")
+          }
+      } content: {
+       Text(lorem).pbFont(.body)
+      }
+
+```

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

@@ -14,3 +14,9 @@ examples:
   - collapsible_color: Icon Color
   - collapsible_icons: Custom Icons
   - collapsible_state: useCollapsible Hook
+
+  swift:
+  - collapsible_default_swift: Default
+  - collapsible_sizes_swift: Sizes
+  - collapsible_colors_swift: Colors
+  - collapsible_props_table: ""

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb

@@ -2,15 +2,9 @@
 <div class="icon-wrapper">
 
   <% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
-  <p><%= pb_rails("icon", props: { custom_icon: svg_url } ) %></p>
-  <p><%= pb_rails("icon", props: { rotation: 90, custom_icon: svg_url, size: "2x" } ) %></p>
-  <p><%= pb_rails("icon", props: { spin: true, custom_icon: svg_url, size: "3x" } ) %></p>
-  <p><%= pb_rails("icon", props: { size: "5x", custom_icon: svg_url } ) %></p>
-  <p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", custom_icon: svg_url } ) %></p>
-
-  <%= pb_rails("body", props: {
-    text: "Custom icons are compatible with other icon props (size, rotation,
-    spin, flip, etc). Their SVG fill colors will be inherited from
-    parent element's css color properties."
-  } ) %>
+  <p><%= pb_rails("icon", props: { icon: svg_url } ) %></p>
+  <p><%= pb_rails("icon", props: { rotation: 90, icon: svg_url, size: "2x" } ) %></p>
+  <p><%= pb_rails("icon", props: { spin: true, icon: svg_url, size: "3x" } ) %></p>
+  <p><%= pb_rails("icon", props: { size: "5x", icon: svg_url } ) %></p>
+  <p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", icon: svg_url } ) %></p>
 </div>

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx

@@ -1,33 +1,59 @@
 import React from 'react'
 import { Icon } from '../../'
 
-// import Icons as config from 'power-icons'
 const config = {
-  moon: (
-    <svg
-        ariaHidden="true"
-        focusable="false"
-        role="img"
-        viewBox="0 0 512 512"
+  icon: (
+    <svg viewBox="0 -256 1792 1792"
         xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-          d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm16 352c0 8.8-7.2 16-16 16H288l-12.8 9.6L208 428v-60H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h384c8.8 0 16 7.2 16 16v288zM336 184h-56v-56c0-8.8-7.2-16-16-16h-16c-8.8 0-16 7.2-16 16v56h-56c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h56v56c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-56h56c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"
-          fill="currentColor"
-      />
+      <g transform="matrix(1,0,0,-1,53.152542,1217.0847)">
+          <path d="m 384,64 q 0,26 -19,45 -19,19 -45,19 -26,0 -45,-19 -19,-19 -19,-45 0,-26 19,-45 19,-19 45,-19 26,0 45,19 19,19 19,45 z m 644,420 -682,-682 q -37,-37 -90,-37 -52,0 -91,37 L 59,-90 Q 21,-54 21,0 21,53 59,91 L 740,772 Q 779,674 854.5,598.5 930,523 1028,484 z m 634,435 q 0,-39 -23,-106 Q 1592,679 1474.5,595.5 1357,512 1216,512 1031,512 899.5,643.5 768,775 768,960 q 0,185 131.5,316.5 131.5,131.5 316.5,131.5 58,0 121.5,-16.5 63.5,-16.5 107.5,-46.5 16,-11 16,-28 0,-17 -16,-28 L 1152,1120 V 896 l 193,-107 q 5,3 79,48.5 74,45.5 135.5,81 61.5,35.5 70.5,35.5 15,0 23.5,-10 8.5,-10 8.5,-25 z" />
+      </g>
     </svg>
   ),
 }
 
 const IconCustom = (props) => {
   return (
-    <div>
-      <Icon
-          customIcon={config.moon}
-          size="7x"
-          {...props}
-      />
-    </div>
+    <React.Fragment>
+      <p>
+        <Icon
+            icon={config.icon}
+            {...props}
+        />
+      </p>
+      <p>
+        <Icon
+            icon={config.icon}
+            rotation={90}
+            size="2x"
+            {...props}
+        />
+      </p>
+      <p>
+        <Icon
+            icon={config.icon}
+            size="3x"
+            spin
+            {...props}
+        />
+      </p>
+      <p>
+        <Icon
+            icon={config.icon}
+            size="5x"
+            {...props}
+        />
+      </p>
+      <p>
+        <Icon
+            flip="horizontal"
+            icon={config.icon}
+            size="5x"
+            {...props}
+        />
+      </p>
+    </React.Fragment>
   )
 }
 

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md

@@ -1,19 +1,14 @@
 # Tips for Custom Icons
 
-When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:
-
-Attributes must be React compatible e.g. <code>xmlns:xlink</code> should be <code>xmlnsXlink</code> and so on. <strong>There should be no hyphenated attributes and no semi-colons!.</strong>
-
-Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with   <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
-
-Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point __when designing instead of trying to retrofit the viewbox afterwards__!
-
-You must source *your own SVG into component/view* you are working on. This can easily be done in programmatic and maintainable ways.
-
 ### React
 
-So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.
+- Providing a valid React `<SVG>` element to the `icon` prop results in an `<SVG>` node within the working view.
+- Sending the absolute path to your SVG (e.g. `/my/path/to/icon.svg`) results in an `img` node with the `src` attribute set to the provided path:
+
+  ```html
+  <img src="host.com/my/path/to/icon.svg" />
+  ```
 
 ### Rails
 
-Some Rails applications use only webpack(er) which means using `image_url` will be successful over `image_path` in most cases especially development where Webpack Dev Server is serving assets over HTTP. Rails applications still using Asset Pipeline may use `image_path` or `image_url`. Of course, YMMV depending on any custom configurations in your Rails application.
+Sending the absolute path to the `icon` prop results in an `<SVG>` tag within the working view.

data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_bold_swift.md

@@ -0,0 +1,17 @@
+![nav-horizontal-bold](https://github.com/powerhome/playbook/assets/54749071/f55f31c5-dbf9-40e2-9f08-6a075c7cb56b)
+
+```swift
+@State private var selectedHBold: Int = 1
+
+PBNav(
+        selected: $selectedHBold,
+        variant: .bold,
+        orientation: .horizontal,
+        borders: false
+      ) {
+        PBNavItem("Photos")
+        PBNavItem("Music")
+        PBNavItem("Video")
+        PBNavItem("Files")
+      }
+```

data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_default_swift.md

@@ -0,0 +1,17 @@
+![nav-horizontal-default](https://github.com/powerhome/playbook/assets/54749071/8731ad83-322f-43f8-8459-76bc425ba30f)
+
+```swift
+ @State private var selectedHDefault: Int = 1
+
+ PBNav(
+          selected: $selectedHDefault,
+          variant: .normal,
+          orientation: .horizontal
+        ) {
+          PBNavItem("Photos")
+          PBNavItem("Music")
+          PBNavItem("Video")
+          PBNavItem("Files")
+        }
+
+```

data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_subtle_no_highlight_swift.md

@@ -0,0 +1,18 @@
+![nav-horizontal-subtle-no-highlight](https://github.com/powerhome/playbook/assets/54749071/ee79fb55-8d5b-46b0-89aa-a310bf48dd19)
+
+```swift
+@State private var selectedHSubtleNoHighlight: Int = 1
+
+ PBNav(
+        selected: $selectedHSubtleNoHighlight,
+        variant: .subtle,
+        orientation: .horizontal,
+        borders: false,
+        highlight: false
+      ) {
+        PBNavItem("Photos")
+        PBNavItem("Music")
+        PBNavItem("Video")
+        PBNavItem("Files")
+      }
+```

data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_subtle_swift.md

@@ -0,0 +1,18 @@
+![nav-horizontal-subtle](https://github.com/powerhome/playbook/assets/54749071/e595cf20-f145-4e47-bb9a-d8dcdc217af7)
+
+```swift
+@State private var selectedHSubtle: Int = 1
+
+PBNav(
+        selected: $selectedHSubtle,
+        variant: .subtle,
+        orientation: .horizontal,
+        borders: false
+      ) {
+        PBNavItem("Photos")
+        PBNavItem("Music")
+        PBNavItem("Video")
+        PBNavItem("Files")
+      }
+
+```

data/app/pb_kits/playbook/pb_nav/docs/_nav_props_swift.md

@@ -0,0 +1,11 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **selected** | `Int` | Sets selected to current index | `0` |  |
+| **currentHover** | `Int?` | Sets the current hover state to the current index|  |  |
+| **variant** | `Variant` | Sets variant for nav | `.normal` | `normal` `subtle` `bold` |
+| **orientation** | `Orientation` | Changes the orientation of nav | `.vertical` | `horizontal` `verticle` |
+| **title** | `String?` | Sets title of nav |  |  |
+| **borders** | `Bool` | Boolean value for whether nav items have a border or not | `true` | `true` `false` |
+| **highlight** | `Bool` | Boolean value for adding a highlight to nav | `true` | `true` `false` |
+| **views** | `[AnyView]` | An Array of AnyView |  |  |

data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_bold_swift.md

@@ -0,0 +1,18 @@
+![nav-vertical-bold](https://github.com/powerhome/playbook/assets/54749071/4d9ea3b7-c2e8-4703-80e3-54e4cee8dbfc)
+
+```swift
+ @State private var selectedVBold: Int = 1
+
+PBNav(
+        selected: $selectedVBold,
+        variant: .bold,
+        orientation: .vertical,
+        borders: false
+      ) {
+        PBNavItem("Photos")
+        PBNavItem("Music")
+        PBNavItem("Video")
+        PBNavItem("Files")
+      }
+
+```

data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_default_swift.md

@@ -0,0 +1,18 @@
+![nav-vertical-default](https://github.com/powerhome/playbook/assets/54749071/ddbf0c77-4d98-483e-9f12-561ac169e6a9)
+
+```swift
+@State private var selectedVDefault: Int = 1
+
+PBNav(
+        selected: $selectedVDefault,
+        variant: .normal,
+        orientation: .vertical,
+        title: "Menu"
+      ) {
+        PBNavItem("Photos")
+        PBNavItem("Music")
+        PBNavItem("Video")
+        PBNavItem("Files")
+      }
+
+```

data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_subtle_no_highlight_swift.md

@@ -0,0 +1,19 @@
+![nav-vertical-subtle_no-highlight](https://github.com/powerhome/playbook/assets/54749071/3f6d5773-6aa4-4ea1-a0b2-948e4325a311)
+
+```swift
+@State private var selectedVSubtleNoHighlight: Int = 1
+
+PBNav(
+        selected: $selectedVSubtleNoHighlight,
+        variant: .subtle,
+        orientation: .vertical,
+        borders: false,
+        highlight: false
+      ) {
+        PBNavItem("Photos")
+        PBNavItem("Music")
+        PBNavItem("Video")
+        PBNavItem("Files")
+      }
+
+```

data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_subtle_swift.md

@@ -0,0 +1,17 @@
+![nav-vertical-subtle](https://github.com/powerhome/playbook/assets/54749071/06a30a15-661a-4779-a674-7b4e6cded472)
+
+```swift
+@State private var selectedVSubtle: Int = 1
+
+PBNav(
+        selected: $selectedVSubtle,
+        variant: .subtle,
+        orientation: .vertical,
+        borders: false
+      ) {
+        PBNavItem("Photos")
+        PBNavItem("Music")
+        PBNavItem("Video")
+        PBNavItem("Files")
+      }
+```

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

@@ -42,3 +42,20 @@ examples:
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab
+
+  swift:
+  - nav_vertical_default_swift: Vertical Default
+  - nav_vertical_subtle_swift: Vertical Subtle
+  - nav_vertical_subtle_no_highlight_swift: Vertical Subtle No Highlight
+  - nav_vertical_bold_swift: Vertical Bold
+  - nav_horizontal_default_swift: Horizontal Default
+  - nav_horizontal_subtle_swift: Horizontal Subtle
+  - nav_horizontal_subtle_no_highlight_swift: Horizontal Subtle No Highlight
+  - nav_horizontal_bold_swift: Horizontal Bold
+  - nav_props_swift: ""
+
+
+
+  
+
+  

data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("select", props: {
+  label: "Favorite Food",
+  name: "food",
+  inline: true,
+  options: [
+    {
+      value: "1",
+      value_text: "Burgers",
+    },
+    {
+      value: "2",
+      value_text: "Pizza",
+    },
+    {
+      value: "3",
+      value_text: "Tacos",
+    },
+    {
+      value: "4",
+      value_text: "BBQ",
+    },
+  ],
+  show_arrow: true
+}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { Body, Select } from '../..'
+
+const SelectInlineShowArrow = (props) => {
+  const options = [
+    {
+      value: '1',
+      text: 'Burgers',
+    },
+    {
+      value: '2',
+      text: 'Pizza',
+    },
+    {
+      value: '3',
+      text: 'Tacos',
+    },
+  ]
+
+  return (
+    <div>
+      <Select
+          inline
+          label="Favorite Food"
+          name="food"
+          options={options}
+          showArrow
+          {...props}
+      />
+      <Body
+          status="negative"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default SelectInlineShowArrow

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

@@ -10,6 +10,7 @@ examples:
   - select_custom_select: Custom Select
   - select_error: Select w/ Error
   - select_inline: Select Inline
+  - select_inline_show_arrow: Select Inline (Always Show Arrow)
   - select_inline_compact: Select Inline Compact
   - select_attributes: Select W/ Attributes
   - select_multiple: Select Multiple
@@ -26,6 +27,7 @@ examples:
   - select_custom_select: Custom Select
   - select_error: Select w/ Error
   - select_inline: Select Inline
+  - select_inline_show_arrow: Select Inline (Always Show Arrow)
   - select_inline_compact: Select Inline Compact
   - select_multiple: Select Multiple
 

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

@@ -7,5 +7,6 @@ export { default as SelectCustomSelect } from './_select_custom_select.jsx'
 export { default as SelectValueTextSame } from './_select_value_text_same.jsx'
 export { default as SelectError } from './_select_error.jsx'
 export { default as SelectInline } from './_select_inline.jsx'
+export { default as SelectInlineShowArrow } from './_select_inline_show_arrow.jsx'
 export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
 export { default as SelectMultiple } from './_select_multiple.jsx'