playbook_ui_docs 14.25.0 → 15.0.0.pre.alpha.PLAY1981sectionseparatorverticalchildren10469

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 17377883adedb4af5d2a6890fcec2cc8536538ff54885c300738fdd8a843689b
-  data.tar.gz: a5a0317ddb43a680c0441ee41bba11d215c00f551ee1872b9bd717c7438083a0
+  metadata.gz: 2da117bbd2b5be0efda4c24ceceaf279f9b1fa98e1018fa0f8419d5568bbfba0
+  data.tar.gz: 19ad4cdc5bc9ba1ddcb2cff6e423de1f5e0f7b7256d386272febeab7fb31c3ad
 SHA512:
-  metadata.gz: '08cbfc7cd58df427620018e446d6d0409ee034f039175088c9928a900a9eb94eaf43ce7f0042a2407e8cf8b84d70403ad316b917cf43143577579e62a2d21665'
-  data.tar.gz: dd09288525d787eaee6e16a0afd3e97557d72b1cdafd67616d2b70389c81ce5843ce09f7858dab2b25beaefcc17530e94a90b7aa8a2820edc509343b95125f0b
+  metadata.gz: 832d673ea67b381c6a348ee91d56f42585276be8931320e4a9704dd6f0ffbb27d83d6002a4aef92a4fd661a913a3883cb04a23ef213848a97da9199001b205da
+  data.tar.gz: 8d042762776e477ee84416895ec88704c3323e942895b298c131e4528e8974cfd60f25f31f0ca9790e23f7bfefbdf75c2516864cf21f8482161db5c3c27f30c1

data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb

@@ -50,7 +50,7 @@
 <% end %>
 
 <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "bg_dark" }) do %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "dark" }) do %>
     <%= pb_rails("body", props: { text: "Dark", dark: true }) %>
   <% end %>
   <%= pb_rails("card/card_body", props: { padding: "md" }) do %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb

@@ -21,13 +21,27 @@
         let currentClass = okayLoadingButton.className;
         let cancelClass = cancelButton ? cancelButton.className : "";
 
+        okayLoadingButton.disabled = true;
+        okayLoadingButton.classList.add("pb_button_loading");
+        okayLoadingButton.classList.remove("pb_button_enabled");
+        okayLoadingButton.classList.add("pb_button_disabled");
+
+        if (cancelButton) {
+            cancelButton.disabled = true;
+            cancelButton.classList.remove("pb_button_enabled");
+            cancelButton.classList.add("pb_button_disabled");
+        }
+
         setTimeout(function() {
             okayLoadingButton.disabled = false;
-            okayLoadingButton.className = currentClass.replace("_disabled_loading", "_enabled");
+            okayLoadingButton.classList.remove("pb_button_loading");
+            okayLoadingButton.classList.remove("pb_button_disabled");
+            okayLoadingButton.classList.add("pb_button_enabled");
 
             if (cancelButton) {
             cancelButton.disabled = false;
-            cancelButton.className = cancelClass.replace("_disabled", "_enabled");
+            cancelButton.classList.remove("pb_button_disabled");
+            cancelButton.classList.add("pb_button_enabled");
             }
         }, 5000);
 

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_props_swift.md

@@ -2,7 +2,8 @@
 | Name | Type | Description | Default | Values |
 | --- | ----------- | --------- | --------- | --------- |
 | **text** | `String` |`Value for the toast message` | `nil` |   |
-| **variant** | `Variant` | `Determines the type pf toast message being displayed` | `.custom()` |  `error`, `success`, 
-`neutral`, `custom()` |
+| **font** | `PBFont` |`Value for the toast message font style` | `.title4` |   |
+| **animatedIcon** | `AnyView` |`Value for the option to use an animated icon` | `nil` |   |
+| **variant** | `Variant` | `Determines the type pf toast message being displayed` | `.custom()` |  `error` `success` `neutral` `custom()` |
 | **actionView** | `dismissAction` | Dismisses the toast message | `.default` | `default` `custom()` `withTimer()` |
 | **dismissAction** | `(() -> Void)` | `Triggers the dismiss action` |  |  |

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("title", props: {size: 4, text: "Row"}) %>
+<%= pb_rails("title", props: {size: 4, text: "Gap"}) %>
 <br/>
 <div class="flex-doc-example">
   <%= pb_rails("flex", props:{ gap: "xxs", wrap:true}) do %>
@@ -31,3 +31,14 @@
    <%= pb_rails("flex/flex_item") do %>4<% end %>
   <% end %>
 </div>
+
+<br/><br/>
+<%= pb_rails("title", props: {size: 4, text: "Responsive"}) %>
+<br/>
+<div class="flex-doc-example">
+  <%= pb_rails("flex", props: { gap: { xs: "none", sm: "sm", md: "md", lg: "lg", xl: "xl" }, wrap: true }) do %>
+   <% 40.times do |i| %>
+    <%= pb_rails("flex/flex_item") do %> <%=i%> <% end %>
+   <% end %>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
+import Title from '../../pb_title/_title'
 
 const FlexGap = (props) => {
   const count = () => {
@@ -13,6 +14,8 @@ const FlexGap = (props) => {
 
   return (
     <>
+      <Title size={4}>Gap</Title>
+      <br />
       <div className="flex-doc-example">
         <Flex
             gap="xxs"
@@ -27,8 +30,10 @@ const FlexGap = (props) => {
         </Flex>
       </div>
 
-      <br />
+      <br /><br />
 
+      <Title size={4}>Column Gap</Title>
+      <br />
       <div className="flex-doc-example">
         <Flex
             columnGap="lg"
@@ -48,6 +53,9 @@ const FlexGap = (props) => {
           </FlexItem>
         </Flex>
       </div>
+      <br /><br />
+
+      <Title size={4}>Row Gap</Title>
       <br />
       <div className="flex-doc-example">
         <Flex
@@ -69,6 +77,23 @@ const FlexGap = (props) => {
           </FlexItem>
         </Flex>
       </div>
+
+      <br /><br />
+      <Title size={4}>Responsive</Title>
+      <br />
+      <div className="flex-doc-example">
+        <Flex
+            gap={{ xs: "none", sm: "sm", md: "md", lg: "lg", xl: "xl" }}
+            wrap
+            {...props}
+        >
+          {count().map((v, key) => (
+            <FlexItem key={key}>
+              {v}
+            </FlexItem>
+            ))}
+        </Flex>
+      </div>
     </>
   )
 }

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap_rails.md

@@ -0,0 +1,11 @@
+##### Prop
+
+`gap` | `row_gap` | `column_gap` | **Type**: String | Hash | **Values**: xxs | xs | sm | md | lg | xl | none
+
+Setting the gap prop sets the `row_gap` and the `column_gap` props to the same size and creates equal space within a flex container.
+
+Setting the `row_gap` prop creates space between rows in a flex container.
+
+Setting the `column_gap` prop creates space between columns in a flex container.
+
+You can also set responsive values by passing a hash with device sizes and values. 

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap_react.md

@@ -0,0 +1,11 @@
+##### Prop
+
+`gap` | `rowGap` | `columnGap` | **Type**: String | Object | **Values**: xxs | xs | sm | md | lg | xl | none
+
+Setting the gap prop sets the `rowGap` and the `columnGap` props to the same size and creates equal space within a flex container.
+
+Setting the `rowGap` prop creates space between rows in a flex container.
+
+Setting the `columnGap` prop creates space between columns in a flex container.
+
+You can also set responsive values by passing an object with device sizes and values. 

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("loading_inline", props: {text: "Dotted Spinner", variant: "dotted"}) %>
+
+<br/>
+
+<%= pb_rails("loading_inline", props: {text: "Solid Spinner", variant: "solid"}) %>

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { LoadingInline } from 'playbook-ui'
+
+const LoadingInlineVariant = (props) => {
+  return (
+    <div>
+      <LoadingInline 
+          text=" Dotted Spinner" 
+          variant="dotted" 
+          {...props}
+      />
+
+      <br />
+  
+      <LoadingInline
+          text=" Solid Spinner"
+          variant="solid"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default LoadingInlineVariant

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

@@ -3,9 +3,11 @@ examples:
   rails:
   - loading_inline_default: Default
   - loading_inline_custom: Custom Text
+  - loading_inline_variant: Variant
 
   
   
   react:
   - loading_inline_default: Default
   - loading_inline_custom: Custom Text
+  - loading_inline_variant: Variant

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

@@ -1,2 +1,3 @@
 export { default as LoadingInlineDefault } from './_loading_inline_default.jsx'
 export { default as LoadingInlineCustom } from './_loading_inline_custom.jsx'
+export { default as LoadingInlineVariant } from './_loading_inline_variant.jsx'

data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx

@@ -26,7 +26,7 @@ const MapDefault = (props) => {
         new maplibregl.Marker({
           color: mapTheme.marker,
         }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
+        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit pb_title_4">Hello World!</h4>`)) // add popup
         .addTo(map);
 
         // disable map zoom when using scroll

data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx

@@ -29,7 +29,7 @@ const MapWithCustomButton = (props) => {
         new maplibregl.Marker({
           color: mapTheme.marker,
         }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
+        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit pb_title_4">Hello World!</h4>`)) // add popup
         .addTo(map);
 
         // disable map zoom when using scroll

data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx

@@ -26,7 +26,7 @@ const MapWithPlugin = (props) => {
         new maplibregl.Marker({
           color: mapTheme.marker,
         }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
+        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit pb_title_4">Hello World!</h4>`)) // add popup
         .addTo(map);
 
         //add maplibre default zoom controls

data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx

@@ -19,7 +19,6 @@ const RadioReactHook = () => {
           paddingRight="lg"
         >
         <Radio
-            alignment="left"
             label="Small"
             marginBottom='sm'
             name="size"
@@ -28,7 +27,6 @@ const RadioReactHook = () => {
         />
         <br />
         <Radio
-            alignment="left"
             label="Medium"
             marginBottom='sm'
             name="size"
@@ -37,7 +35,6 @@ const RadioReactHook = () => {
         />
         <br />
         <Radio
-            alignment="left"
             label="Large"
             marginBottom='sm'
             name="size"

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.html.erb

@@ -11,4 +11,27 @@
             padding_right: "xs" 
         }) %>
     <% end %>
+<% end %>
+
+<%= pb_rails("flex", props: { classname: "flex-container", margin_top: "lg", vertical: "stretch" }) do %>
+    <%= pb_rails("body", props: { classname: "flex-item" }) do %>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
+    <% end %>
+    <%= pb_rails("section_separator", props: { orientation: "vertical" }) do %>
+        <%= pb_rails("card", props: {
+            border_radius: "rounded",
+            justify_content: "center",
+            padding: "none"
+        })  do %>
+            <%= pb_rails("caption", props: {
+                text: "TODAY",
+                size: "xs",
+                padding_left: "xs",
+                padding_right: "xs" 
+            }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("body", props: { classname: "flex-item" }) do %>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
+    <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx

@@ -2,8 +2,25 @@ import React from 'react'
 import Card from '../../pb_card/_card'
 import Caption from '../../pb_caption/_caption'
 import SectionSeparator from '../../pb_section_separator/_section_separator'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
 
-const children = (
+const childrenHorizontal = (
+    <Card
+        borderRadius="rounded"
+        justifyContent="center"
+        padding="none"
+    >
+        <Caption
+            paddingLeft="xs"
+            paddingRight="xs"
+            size="xs"
+            text="TODAY"
+        />
+    </Card>
+)
+
+const childrenVertical = (
     <Card
         borderRadius="rounded"
         justifyContent="center"
@@ -20,12 +37,33 @@ const children = (
 
 const SectionSeparatorChildren = (props) => {
     return (
-        <SectionSeparator
-            {...props}
-            lineStyle='dashed'
-        >
-            {children}
-        </SectionSeparator>
+        <>
+            <SectionSeparator
+                {...props}
+                lineStyle='dashed'
+            >
+                {childrenHorizontal}
+            </SectionSeparator>
+            <Flex
+                inline="flex-container"
+                marginTop="lg"
+                vertical="stretch"
+            >
+                <FlexItem>
+                    {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
+                </FlexItem>
+                    <SectionSeparator
+                        orientation="vertical"
+                        {...props}
+                    >
+                        {childrenVertical}
+                    </SectionSeparator>
+                <FlexItem>
+                    {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
+                </FlexItem>
+            </Flex>
+        </>
+        
     )
 }
 

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.jsx

@@ -5,7 +5,9 @@ import Detail from '../../pb_detail/_detail'
 import Icon from '../../pb_icon/_icon'
 
 const children = (
-  <Flex padding="xs">
+  <Flex alignItems="center"
+      padding="xs"
+  >
     <Icon color="primary"
         icon="arrow-down"
     />

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

@@ -0,0 +1,41 @@
+<%= pb_rails("text_input", props: {
+  autocomplete: false,
+  label: "autocomplete='off'",
+  name: "firstName",
+  placeholder: "Enter first name",
+}) %>
+
+<%= pb_rails("text_input", props: {
+  label: "no autocomplete attribute (let browser decide- basically 'on')",
+  name: "lastName",
+  placeholder: "Enter last name"
+}) %>
+
+<%= pb_rails("text_input", props: {
+    autocomplete: true,
+    label: "autocomplete='on'",
+    name: "phone",
+    type: "phone",
+    placeholder: "Enter phone number"
+}) %>
+
+<%= pb_rails("body", props: { margin_bottom: "sm" }) do %>
+  The following have the same autocomplete attributes (email), but have
+  different name attributes (email and emailAlt). Many browsers will
+  open autocomplete based on name attributes instead of autocomplete:
+<% end %>
+
+<%= pb_rails("text_input", props: {
+    autocomplete: "email",
+    label: "autocomplete='email' name='email'",
+    name: "email",
+    placeholder: "Enter email address"
+}) %>
+
+<%= pb_rails("text_input", props: {
+    autocomplete: "email",
+    label: "autocomplete='email' name='emailAlt'",
+    name: "emailAlt",
+    type: "email",
+    placeholder: "Enter email address"
+}) %>

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

@@ -0,0 +1,80 @@
+import React, { useState } from 'react'
+
+import TextInput from '../../pb_text_input/_text_input'
+import Body from '../../pb_body/_body'
+
+
+const TextInputAutocomplete = (props) => {
+  const [formFields, setFormFields] = useState({
+    firstName: "",
+    lastName: "",
+    phone: "",
+    emailTest: "",
+    email: "",
+  });
+
+  const handleOnChangeFormField = ({ target }) => {
+    const { name, value } = target;
+    setFormFields({ ...formFields, [name]: value });
+  };
+
+  return (
+    <div>
+      <TextInput
+          autoComplete={false}
+          label="autocomplete='off'"
+          name="firstName"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter first name"
+          value={formFields.firstName}
+          {...props}
+      />
+      <TextInput
+          label="no autocomplete attribute (let browser decide- basically 'on')"
+          name="lastName"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter last name"
+          value={formFields.lastName}
+          {...props}
+      />
+      <TextInput
+          autoComplete
+          label="autocomplete='on'"
+          name="phone"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter phone number"
+          type="phone"
+          value={formFields.phone}
+          {...props}
+      />
+      <Body marginBottom="sm">
+        The following have the same autocomplete attributes (email), but have
+        different name attributes (email and emailAlt). Many browsers will
+        open autocomplete based on name attributes instead of autocomplete:
+      </Body>
+      <TextInput
+          autoComplete="email"
+          label="autocomplete='email' name='email'"
+          name="email"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter email address"
+          type="email"
+          value={formFields.email}
+          {...props}
+      />
+      <TextInput
+          autoComplete="email"
+          label="autocomplete='email' name='emailAlt'"
+          marginTop="sm"
+          name="emailTest"
+          onChange={handleOnChangeFormField}
+          placeholder="Enter email address"
+          type="email"
+          value={formFields.emailTest}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default TextInputAutocomplete;

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

@@ -0,0 +1 @@
+Set this prop to `false` or `"off"` to remove autocomplete from text inputs. You can also set it to a string, but browsers will often defer to other attributes like `name`. 

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

@@ -9,6 +9,8 @@ examples:
   - text_input_no_label: No Label
   - text_input_options: Input Options
   - text_input_mask: Mask
+  - text_input_autocomplete: Autocomplete
+  
   react:
   - text_input_default: Default
   - text_input_error: With Error
@@ -19,6 +21,7 @@ examples:
   - text_input_no_label: No Label
   - text_input_mask: Mask
   - text_input_sanitize: Sanitized Masked Input
+  - text_input_autocomplete: Autocomplete
 
 
   swift:

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

@@ -7,3 +7,4 @@ export { default as TextInputInline } from './_text_input_inline.jsx'
 export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
 export { default as TextInputMask } from './_text_input_mask.jsx'
 export { default as TextInputSanitize } from './_text_input_sanitize.jsx'
+export { default as TextInputAutocomplete } from './_text_input_autocomplete.jsx'

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb

@@ -7,7 +7,7 @@
   ]
 %>
 
-<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", default_options: [options.first], options: options, label: "Colors", name: :foo, pills: true }) %>
+<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", default_options: [options.first], options: options, label: "Products", name: :foo, pills: true }) %>
 
 <%= pb_rails("button", props: {id: "clear-pills", text: "Clear All Options", variant: "secondary"}) %>
 

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx

@@ -13,7 +13,7 @@ const TypeaheadWithPills = (props) => {
     <>
       <Typeahead
           isMulti
-          label="Colors"
+          label="Products"
           options={options}
           placeholder=""
           {...props}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.html.erb

@@ -7,25 +7,4 @@
   ]
 %>
 
-<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", pill_color: "neutral", default_options: [options.first], options: options, label: "Colors", name: :foo, pills: true }) %>
-
-<%= pb_rails("button", props: {id: "clear-pills", text: "Clear All Options", variant: "secondary"}) %>
-
-<!-- This section is an example of the available JavaScript event hooks -->
-<%= javascript_tag defer: "defer" do %>
-  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-select", function(event) {
-    console.log('Option selected')
-    console.dir(event.detail)
-  })
-  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-remove", function(event) {
-    console.log('Option removed')
-    console.dir(event.detail)
-  })
-  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-clear", function() {
-    console.log('All options cleared')
-  })
-
-  document.querySelector('#clear-pills').addEventListener('click', function() {
-    document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:clear'))
-  })
-<% end %>
+<%= pb_rails("typeahead", props: { id: "typeahead-pills-example2", pill_color: "neutral", options: options, label: "Products", name: :foo, pills: true }) %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.jsx

@@ -13,7 +13,7 @@ const TypeaheadWithPills = (props) => {
     <>
       <Typeahead
           isMulti
-          label="Colors"
+          label="Products"
           options={options}
           pillColor="neutral"
           placeholder=""

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.html.erb

@@ -9,9 +9,9 @@
 
 <%= pb_rails("typeahead", props: {
     id: "typeahead-without-pills-example1",
-    placeholder: "All Colors",
+    placeholder: "All Products",
     options: options, 
-    label: "Colors",
+    label: "Products",
     name: :foo,
     is_multi: false
   })

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

@@ -1,11 +1,18 @@
 ### Props
 | Name | Type | Description | Default | Values |
 | --- | ----------- | --------- | --------- | --------- |
-| **name** | `String` | Sets the User's name |  |  |
+| **name** | `String` | Sets the User's name | `""` |  |
+| **nameFont** | `Typography` | Font styling for the user's name | `.init(font: .title4, variant: .bold)` |  |
+| **image** | `Image?` | Sets image for the avatar | `nil` |  |
+| **orientation** | `Orientation` | Changes the orientation of the User | `.horizontal` | `.horizontal` `.vertical` |
+| **size** | `Size` | Changes the size of the User | `.medium` | `.xxSmall` `.xSmall` `.small` `.medium` `.large` `.xLarge` |
+| **territory** | `String?` | Adds the User's territory | `nil` |  |
+| **title** | `String?` | Adds a title | `nil` |  |
+| **subtitle** | `AnyView?` | Adds a subtitle view | `nil` |  |
+| **status** | `PBOnlineStatus.Status?` | An indicator for the current status of the user | `nil` | `.online` `.away` `.offline` |
 | **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 |  |  |
-| **status** | `PBAvatar.PresenceStatus?` | An idicator for the current status of the user | `.none` | `.online` `.away` `.offline` |
+| **territoryTitleFont** | `PBFont` | Font for territory and title text | `.subcaption` | `.title1` `.body` `.caption` `.subcaption` `.badgeText` `.title4` |
+| **isActive** | `Bool` | Sets whether the user is active | `true` | `true` `false` |
+| **hasInactiveBadge** | `Bool` | Shows inactive badge when user is not active | `false` | `true` `false` |
+| **spacing** | `CGFloat` | Controls spacing between elements | `Spacing.small` | `.none` `.xxSmall` `.xSmall` `.small` `.medium` `.large` `.xLarge` |
+