playbook_ui_docs 13.19.0 → 13.20.0.pre.alpha.PBNTR225advancedtablefeedback2375

data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb

@@ -0,0 +1,34 @@
+<%= pb_rails("table", props: { size: "sm", tag:"div" }) do %>
+    <%= pb_rails("table/table_head", props: {tag:"div"}) do %>
+        <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
+            <%= pb_rails("table/table_header", props: { text: "Column 1", tag:"div"}) %>
+            <%= pb_rails("table/table_header", props: { text: "Column 2", tag:"div"}) %>
+            <%= pb_rails("table/table_header", props: { text: "Column 3", tag:"div"}) %>
+            <%= pb_rails("table/table_header", props: { text: "Column 4", tag:"div"}) %>
+            <%= pb_rails("table/table_header", props: { text: "Column 5", tag:"div"}) %>       
+         <% end %>
+    <% end %>
+    <%= pb_rails("table/table_body", props: {tag:"div"}) do %>
+        <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %>
+        <% end %>
+        <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %>
+        <% end %>
+        <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 1", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 2", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 3", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 4", tag:"div"}) %>
+            <%= pb_rails("table/table_cell", props: { text: "Value 5", tag:"div"}) %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.md

@@ -0,0 +1,3 @@
+Optionally build your table with divs by passing `div` to the `tag` prop of all* your sub-components. 
+
+*NOTE: The `tag` prop defaults to `table`, which returns html elements.  If divs are desired, sub-components must be used and all table elements, including the initial kit call, must use `div` as their `tag` in order for the table to render properly.

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

@@ -1,5 +1,6 @@
 examples:
   rails:
+    # - table_div: Div
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large
@@ -24,8 +25,12 @@ examples:
     - table_with_background_kit: Table With Background Kit
     - table_vertical_border: Vertical Borders
     - table_striped: Striped Table
+    - table_with_subcomponents: Table with Sub Components (Table Elements)
+    - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
+
 
   react:
+    # - table_div: Div
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large

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

@@ -21,3 +21,4 @@ export { default as TableAlignmentShiftData } from './_table_alignment_shift_dat
 export { default as TableWithBackgroundKit } from './_table_with_background_kit.jsx'
 export { default as TableVerticalBorder } from './_table_vertical_border.jsx'
 export { default as TableStriped } from './_table_striped.jsx'
+export { default as TableDiv } from './_table_div.jsx'

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx

@@ -58,6 +58,16 @@ const TextInputAddOn = (props) => {
             {...props}
         />
       </div>
+      <div>
+        <TextInput
+            addOn={{ icon: 'frog', alignment: 'right', border: true }}
+            label="Right-Aligned Add On With Child Input"
+            onChange={handleUpdateFourthInput}
+            {...props}
+        >
+          <input />
+        </TextInput>
+      </div>
       <div>
         <TextInput
             addOn={{ icon: 'percent', alignment: 'left', border: false }}
@@ -76,6 +86,16 @@ const TextInputAddOn = (props) => {
             {...props}
         />
       </div>
+      <div>
+        <TextInput
+            addOn={{ icon: 'frog', alignment: 'left', border: true }}
+            label="Left-Aligned Add On With Child Input"
+            onChange={handleUpdateFourthInput}
+            {...props}
+        >
+          <input />
+        </TextInput>
+      </div>
     </>
   )
 }

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

@@ -0,0 +1,30 @@
+![user-presence-indicator)](https://github.com/powerhome/playbook/assets/112719604/96ee8408-2e21-4aaf-ae65-9f023515cf8d)
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBUser(
+    name: name,
+
+    image: img,
+    size: .small,
+    territory: "PHL",
+    title: title,
+    status: .online
+  )
+  PBUser(
+    name: name,
+    image: img,
+    territory: "PHL",
+    title: title,
+    status: .away
+  )
+  PBUser(
+    name: name,
+    image: img,
+    size: .large,
+    territory: "PHL",
+    title: title,
+    status: .offline
+  )
+}
+```

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

@@ -7,4 +7,5 @@
 | **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 |  |  |
+| **title** | `String` | Adds a title |  |  |
+| **status** | `PBAvatar.PresenceStatus?` | An idicator for the current status of the user | `.none` | `.online` `.away` `.offline` |

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

@@ -23,4 +23,5 @@ examples:
   - user_vertical_size_swift: Vertical
   - user_text_only_swift: Text Only
   - user_size_swift: Horizontal Size
+  - user_presence_indicator_swift: Presence Indicator
   - user_props_table: ""