playbook_ui 13.25.0 → 13.26.0.pre.alpha.jasoncypretpatch12820

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 43e4654a79f1b227d4fc17c495d5d1785f3553e75740825132f6d9f84646e530
-  data.tar.gz: 7a974ccebc66cbd36728788f35e62adc026479a3aed4332769b131e3c88d0b4b
+  metadata.gz: 0f58c4cbdc37f2196240ed4beb45f559f749af9855066602ad58a1d35e85fee3
+  data.tar.gz: d34a51429e697f5e1c51fd2ad58771019944926afc4776b3cf7b0fffb6d3e016
 SHA512:
-  metadata.gz: f9010c49c2dc56a6e85dd22dce2bfa753231a202f7517174742d6f2f9b4ff7244b226bd5f6275981801fb44c12dcc2f0e6a6c68d7e679504e44ecf18a2dd8526
-  data.tar.gz: b5bd3da670d8307017824b24f39d9ad7e5953935b52857a8bc3af58c1feee7e827713769b4c93c84635ebdc4cc8015f92d0b495a49ffdc53c674e027887705d4
+  metadata.gz: 81b61acc8877f7c9b4de796cfbf2eb8ae95cc7fb1b225db5fbbf5e82ceee3940878d9a64ff6fab776116ce20b00dbfafa637a920bc0823de2ac0cfbd0fe0338c
+  data.tar.gz: 57c56349740deb36705f8698b742951504311afaab29f77aa34727a67170970cc28a98422b9d68cb2491a36d4505ccaaf5483b70daeba90d12be181d9dbd64ea

data/app/pb_kits/playbook/index.js

@@ -133,6 +133,7 @@ export { default as dialogHelper } from './pb_dialog/dialogHelper'
 //Theming
 export {default as mapTheme} from './pb_map/pbMapTheme'
 export {default as useCollapsible} from './pb_collapsible/useCollapsible'
+export {default as useDropdown } from './pb_dropdown/hooks/useDropdown'
 
 // CSS Tokens
 export { default as borderRadius } from './tokens/exports/_border_radius.scss'

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -94,6 +94,20 @@
     position: relative;
   }
 
+  .toggle-content {
+    display: none;
+    height: 0;
+    padding-bottom: 0 !important;
+    padding-top: 0 !important;
+    overflow: hidden;
+    transition: height 300ms, padding 300ms ease-in-out;
+  }
+
+  .toggle-content.is-visible {
+    display: contents;
+    height: auto;
+  }
+
   &.dark {
     .bg-white {
       background: $bg_dark_card;

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb

@@ -1,14 +1,10 @@
-<%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id) do %>
-        <%= pb_rails("table", props: { size: "sm", tag:"div", data_table: true, number_spacing:"tabular", responsive:"none" }) do %>
-          <% if content.present? %>
-            <% content.presence %>
-          <% else %>
-            <%= pb_rails("advanced_table/table_header", props: {column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion }) %>
-            <%= pb_rails("advanced_table/table_body", props: {table_data: object.table_data, column_definitions: object.column_definitions}) %>
-          <% end %>
-        <% end %>
-<% end %>
+<%= pb_content_tag do %>
+  <%= pb_rails("table", props: { size: "sm", tag:"div", data_table: true, number_spacing:"tabular", responsive:"none" }) do %>
+    <% if content.present? %>
+      <% content.presence %>
+    <% else %>
+      <%= pb_rails("advanced_table/table_header", props: {column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion }) %>
+      <%= pb_rails("advanced_table/table_body", props: {table_data: object.table_data, column_definitions: object.column_definitions}) %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.html.erb

@@ -0,0 +1,33 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<%= pb_rails("advanced_table", props: {table_data: @table_data, column_definitions: column_definitions}) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md

@@ -0,0 +1,24 @@
+**BETA VERSION**
+This kit's Rails version is currently under development. Some features may not work as expected, and breaking changes may still occur; use with caution.
+<br />
+<br />
+<br />
+
+The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has two required props__: 
+
+### table_data
+
+`table_data` accepts an array of objects as the table data. Each object is a table row, and each key:value pair within an object is a column value within that row. Nested children within a data object are automatically rendered as subrows under their parent row.
+
+For a visual of the data structure needed for `table_data`, see [here](https://github.com/powerhome/playbook/tree/master/playbook/app/pb_kits/playbook/pb_advanced_table#readme).
+
+### column_definitions
+
+Column definitions are the single most important part of building a table as they are responsible for building the underlying data model that is used for all sorting, expansion, etc. `column_definitions` in the AdvancedTable kit is an array of objects as seen in the code snippet below. Each object within the array has two REQUIRED items:
+
+- `accessor`: this is the key from your data for the value you want rendered in that column
+- `label`: this is what will be rendered as the column header label
+
+There is also one optional item that is only required if the table has nested data: 
+
+- `cellAccessors`: This is an array of strings that represent keys from your data object. This is only required for the first column in case of nested data. If you have nested data, the AdvancedTable needs to know what to render in that first column for nested items. This array represents the nested data in the order you want it rendered.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md

@@ -1,3 +1,8 @@
+**NOTE:** The Advanced Table kit uses the [Tanstack Table v8](https://tanstack.com/table/v8/docs/introduction) under the hood to render advanced tables that allow for complex, nested data structures with expansion and sort options.
+<br />
+<br />
+<br />
+
 The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has two required props__: 
 
 ### tableData

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

@@ -1,6 +1,6 @@
 examples:
-  # rails:
-  # - advanced_table_default: Default (Required Props)
+  rails:
+  - advanced_table_beta: Default (Required Props)
   react:
   - advanced_table_default: Default (Required Props)
   - advanced_table_loading: Loading State

data/app/pb_kits/playbook/pb_advanced_table/index.js

@@ -0,0 +1,78 @@
+import PbEnhancedElement from '../pb_enhanced_element'
+
+const ADVANCED_TABLE_SELECTOR = '[data-advanced-table]'
+const CONTENT_SELECTOR = '[data-advanced-table-content="id"]'
+const DOWN_ARROW_SELECTOR = '#advanced-table_open_icon'
+const UP_ARROW_SELECTOR = '#advanced-table_close_icon'
+
+export default class PbAdvancedTable extends PbEnhancedElement {
+  static get selector() {
+    return ADVANCED_TABLE_SELECTOR
+  }
+
+  get target() {
+    return document.querySelector(CONTENT_SELECTOR.replace("id", this.element.id))
+  }
+
+  connect() {
+    this.element.addEventListener('click', () => {
+      this.toggleElement(this.target)
+    })
+  }
+
+  showElement(elem) {
+    const getHeight = () => {
+      elem.style.display = 'block'
+      const height = elem.scrollHeight + 'px'
+      elem.style.display = ''
+      return height
+    }
+
+    const height = getHeight()
+    elem.classList.add('is-visible')
+    elem.style.height = height
+    elem.style.overflow = "hidden"
+
+    window.setTimeout(() => {
+      elem.style.height = ''
+      elem.style.overflow = "visible"
+    }, 250)
+  }
+
+  hideElement(elem) {
+    elem.style.height = elem.scrollHeight + 'px'
+
+    window.setTimeout(() => {
+      elem.style.height = '0'
+      elem.style.paddingTop = '0'
+      elem.style.paddingBottom = '0'
+      elem.style.overflow = "hidden"
+    }, 1)
+
+    window.setTimeout(() => {
+      elem.classList.remove('is-visible')
+      elem.style.overflow = ""
+    }, 200)
+  }
+
+  toggleElement(elem) {
+    if (elem.classList.contains('is-visible')) {
+      this.hideElement(elem)
+      this.displayDownArrow()
+      return
+    }
+
+    this.showElement(elem)
+    this.displayUpArrow()
+  }
+
+  displayDownArrow() {
+    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'inline-block'
+    this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'none'
+  }
+
+  displayUpArrow() {
+    this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
+    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
+  }
+}

data/app/pb_kits/playbook/pb_advanced_table/table_body.html.erb

@@ -1,9 +1,5 @@
-<%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id) do %>
-        <% object.table_data.each do |row| %>
-          <%= render_row_and_children(row, object.column_definitions) %>
-        <% end %>
-<% end %>
+<%= pb_content_tag do %>
+  <% object.table_data.each do |row| %>
+    <%= render_row_and_children(row, object.column_definitions) %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/table_body.rb

@@ -14,8 +14,10 @@ module Playbook
         output << pb_rails("advanced_table/table_row", props: { row: row, column_definitions: column_definitions, depth: current_depth })
 
         if row[:children].present?
-          row[:children].each do |child_row|
-            output << render_row_and_children(child_row, column_definitions, current_depth + 1)
+          output << content_tag(:div, class: "toggle-content", data: { advanced_table_content: row.object_id }) do
+            row[:children].map do |child_row|
+              render_row_and_children(child_row, column_definitions, current_depth + 1)
+            end.join.html_safe
           end
         end
 

data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id) do %>
+<%= pb_content_tag do %>
         <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
             <% object.column_definitions.each_with_index do |item, index| %>
                 <%= pb_rails("table/table_header", props: { tag:"div", id:item[:accessor], classname:object.th_classname}) do %>
@@ -17,4 +13,4 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -1,16 +1,13 @@
-<%= content_tag(:div,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id) do %>
+<%= pb_content_tag do %>
         <% object.column_definitions.each_with_index do |column, index| %>
             <%= pb_rails("table/table_cell", props: { tag:"div", classname:object.td_classname}) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>
                     <div style="padding-left: <%= depth * 1.25 %>em">
                         <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
                             <% if index.zero? && object.row[:children].present? %>
-                                <button class="gray-icon expand-toggle-icon">
-                                    <%= pb_rails("icon", props: { icon: "circle-play", cursor: "pointer" }) %>
+                                <button id="<%= object.row.object_id %>" class="gray-icon expand-toggle-icon" data-advanced-table="true" >
+                                    <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %> 
+                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
                                 </button>
                             <% end %>
                             <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && object.row[:children].present? ? "none" : "xs"}) do %>
@@ -34,4 +31,4 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_avatar/Utilities/GetPlacementPropsHelper.tsx

@@ -0,0 +1,44 @@
+export const getPlacementProps = (placement: string, size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs") => {
+  let placementMapping: { [key: string]: any } = {};
+  
+  switch (size) {
+      case 'xxs':
+      case 'xs':
+          placementMapping = {
+              'top-right': { top: 'xs', right: 'xs' },
+              'bottom-left': { bottom: 'xs', left: 'xs' },
+              'top-left': { top: 'xs', left: 'xs' },
+              'bottom-right': { bottom: 'xs', right: 'xs' },
+          };
+          break;
+      
+      case 'sm':
+          placementMapping = {
+              'top-right': { top: '0', right: 'xs' },
+              'bottom-left': { bottom: '0', left: 'xs' },
+              'top-left': { top: '0', left: 'xs' },
+              'bottom-right': { bottom: '0', right: 'xs' },
+          };
+          break;
+      
+      case 'md':
+      case 'lg':
+          placementMapping = {
+              'top-right': { top: '0', right: '0' },
+              'bottom-left': { bottom: '0', left: '0' },
+              'top-left': { top: '0', left: '0' },
+              'bottom-right': { bottom: '0', right: '0' },
+          };
+          break;
+
+      case 'xl':
+          placementMapping = {
+              'top-right': { top: { value: "xxs", inset: true }, right: { value: "xxs", inset: true } },
+              'bottom-left': { bottom: { value: "xxs", inset: true }, left: { value: "xxs", inset: true } },
+              'top-left': { top: { value: "xxs", inset: true }, left: { value: "xxs", inset: true } },
+              'bottom-right': { bottom: { value: "xxs", inset: true }, right: { value: "xxs", inset: true } },
+          };
+          break;
+  }
+  return placementMapping[placement] || {};
+};

data/app/pb_kits/playbook/pb_avatar/_avatar.tsx

@@ -3,13 +3,26 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { getPlacementProps } from './Utilities/GetPlacementPropsHelper'
 
-import Image from '../pb_image/_image'
-import OnlineStatus from '../pb_online_status/_online_status'
+import Image from "../pb_image/_image";
+import OnlineStatus from "../pb_online_status/_online_status";
+import Flex from "../pb_flex/_flex";
+import Badge from "../pb_badge/_badge";
+import IconCircle from "../pb_icon_circle/_icon_circle";
+import Card from "../pb_card/_card";
 
 export type AvatarProps = {
   aria?: {[key: string]: string},
   className?: string,
+  componentOverlay?: {
+    component: "badge" | "iconCircle",
+    placement: string,
+    size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
+    text?: string,
+    variant?: string,
+    icon?: string
+  },
   data?: {[key: string]: string},
   dark?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -19,7 +32,7 @@ export type AvatarProps = {
   name?: string,
   size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
   status?: "away" | "offline" | "online",
-} & GlobalProps
+  } & GlobalProps
 
 const firstTwoInitials = (name: string) =>
   name.split(/\s/).map((name) => name[0])
@@ -33,6 +46,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
     data = {},
     htmlOptions = {},
     name = undefined,
+    componentOverlay,
     id = '',
     imageAlt = '',
     imageUrl,
@@ -65,24 +79,75 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
         className={classes}
         id={id}
     >
-      <div
-          className="avatar_wrapper"
-          data-initials={initials}
-      >
-        { canShowImage && (
-          <Image
-              alt={imageAlt ? imageAlt : name}
-              onError={handleError}
-              url={imageUrl}
-          />
-        )}
-      </div>
-      {status && (
-        <OnlineStatus
-            className={`size_${size}`}
-            dark={dark}
-            status={status}
-        />
+      {componentOverlay ? (
+        <Flex display="display_inline_block" 
+            position="relative"
+        >
+          <div className="avatar_wrapper" 
+              data-initials={initials}
+          >
+            {canShowImage && (
+              <Image
+                  alt={imageAlt ? imageAlt : name}
+                  onError={handleError}
+                  url={imageUrl}
+              />
+            )}
+          </div>
+
+          {componentOverlay.component === "badge" && (
+             <Card
+                 borderNone
+                 borderRadius="rounded"
+                 padding="none"
+                 position="absolute"
+                 {...getPlacementProps(componentOverlay.placement, size)}
+             >
+    
+            <Badge
+                rounded
+                text={componentOverlay.text}
+                variant={componentOverlay.variant as "error" | "info" | "neutral" | "primary" | "success" | "warning" | "notification"}
+            />
+            </Card>
+          )}
+          {componentOverlay.component === "iconCircle" && (
+            <Card
+                borderNone
+                borderRadius="rounded"
+                htmlOptions={{style: {padding:"2px"}}}
+                position="absolute"
+                {...getPlacementProps(componentOverlay.placement, size)}
+            >
+              <IconCircle
+                  icon={componentOverlay.icon}
+                  size="xxs"
+                  variant={componentOverlay.variant as "default" | "royal" | "blue" | "purple" | "teal" | "red" | "yellow" | "orange" | "green"}
+              />
+            </Card>
+          )}
+        </Flex>
+      ) : (
+        <>
+          <div className="avatar_wrapper" 
+              data-initials={initials}
+          >
+            {canShowImage && (
+              <Image
+                  alt={imageAlt ? imageAlt : name}
+                  onError={handleError}
+                  url={imageUrl}
+              />
+            )}
+          </div>
+          {status && (
+            <OnlineStatus
+                className={`size_${size}`}
+                dark={dark}
+                status={status}
+            />
+          )}
+        </>
       )}
     </div>
   )

data/app/pb_kits/playbook/pb_avatar/avatar.html.erb

@@ -1,6 +1,29 @@
+
 <%= object.pb_content_tag(:div, data: object.data.merge(initials: object.initials)) do %>
-  <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
-    <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
+  <% if object.component_overlay && object.component_overlay[:component] == "icon_circle" %>
+    <%= pb_rails("flex", props: {display: "display_inline_block", position: "relative" }) do %>
+      <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
+        <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
+      <% end %>
+      <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", html_options: { style: "padding: 2px" }, position: "absolute" }.merge(specific_placement_style)) do %>
+        
+        <%= pb_rails("icon_circle", props: { size: "xxs", icon: object.component_overlay[:icon] }) %>
+      <% end %>  
+  <% end %>
+  <% elsif object.component_overlay && object.component_overlay[:component] == "badge" %>
+  <%= pb_rails("flex", props: {display: "display_inline_block", position: "relative" }) do %>
+    <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
+      <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
+    <% end %>
+    <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", padding: "none", position: "absolute" }.merge(specific_placement_style)) do %>
+    <%= pb_rails("badge", props: { rounded: true, text: object.component_overlay[:text], variant: object.component_overlay[:variant] }) %>
+    <% end %>
+    <% end %>
+  <% else %>
+    <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
+      <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
+    <% end %>
+    <%= pb_rails("online_status", props: object.online_status_props) if object.status %>
   <% end %>
-  <%= pb_rails("online_status", props: object.online_status_props) if object.status %>
 <% end %>
+

data/app/pb_kits/playbook/pb_avatar/avatar.rb

@@ -3,6 +3,7 @@
 module Playbook
   module PbAvatar
     class Avatar < Playbook::KitBase
+      prop :component_overlay
       prop :image_url, type: Playbook::Props::String
       prop :image_alt, type: Playbook::Props::String,
                        default: ""
@@ -32,6 +33,46 @@ module Playbook
       def handle_img_error
         "this.style.display = 'none'"
       end
+
+      def overlay_component
+        component_overlay && component_overlay[:component]
+      end
+
+      def specific_placement_style
+        placement = component_overlay[:placement] if component_overlay
+        placement_mapping[size][placement]
+      end
+
+    private
+
+      def placement_mapping
+        xs_styles = placement_styles("xs")
+        {
+          "xxs" => xs_styles,
+          "xs" => xs_styles,
+          "sm" => placement_styles("xs"),
+          "md" => placement_styles("0"),
+          "lg" => placement_styles("0"),
+          "xl" => placement_styles({ value: "xxs", inset: true }),
+        }
+      end
+
+      def placement_styles(offset)
+        top_bottom_offset = if offset == "xs"
+                              "xs"
+                            elsif offset == { value: "xxs", inset: true }
+                              { value: "xxs", inset: true }
+                            else
+                              "0"
+                            end
+
+        {
+          "top-right" => { top: top_bottom_offset, right: offset },
+          "bottom-left" => { bottom: top_bottom_offset, left: offset },
+          "top-left" => { top: top_bottom_offset, left: offset },
+          "bottom-right" => { bottom: top_bottom_offset, right: offset },
+        }
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb

@@ -0,0 +1,71 @@
+<%= pb_rails("avatar", props: {
+    component_overlay: {
+        component: "badge",
+        text: "12",
+        placement: "top-left"
+    },
+    name: "Terry Johnson",
+    size: "xxs",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    margin_bottom: "sm"
+  }) %>
+
+  <%= pb_rails("avatar", props: {
+    component_overlay: {
+        component: "badge",
+        text: "12",
+        placement: "top-right"
+    },
+    name: "Terry Johnson",
+    size: "xs",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    margin_bottom: "sm"
+  }) %>
+
+  <%= pb_rails("avatar", props: {
+    component_overlay: {
+        component: "badge",
+        text: "12",
+        placement: "bottom-right"
+    },
+    name: "Terry Johnson",
+    size: "sm",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    margin_bottom: "sm"
+  }) %>
+
+  <%= pb_rails("avatar", props: {
+    component_overlay: {
+        component: "badge",
+        text: "12",
+        placement: "bottom-left"
+    },
+    name: "Terry Johnson",
+    size: "md",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    margin_bottom: "sm"
+  }) %>
+
+  <%= pb_rails("avatar", props: {
+    component_overlay: {
+        component: "badge",
+        text: "12",
+        placement: "top-left"
+    },
+    name: "Terry Johnson",
+    size: "lg",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    margin_bottom: "sm"
+  }) %>
+
+  <%= pb_rails("avatar", props: {
+    component_overlay: {
+        component: "badge",
+        text: "12",
+        placement: "top-right"
+    },
+    name: "Terry Johnson",
+    size: "xl",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    margin_bottom: "sm"
+  }) %>