playbook_ui 13.27.0 → 13.28.0.pre.alpha.PBNTR297gradientoverlay3029

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 170570cd88a3ae65b0c78878a3490be708a8c598f7b5c21f5abecf5bf6f5d21b
-  data.tar.gz: e3b6c482a5a0b583ee3ace8fe16e3d3c0e5c5c47a4a3635b74c1dd87e7a3df3f
+  metadata.gz: 7ebcd8e418a573194d60fc898d411fad574f050ac38957d6d73674a503ed522d
+  data.tar.gz: 9948ad7024a45406a248a22e02c40226f0b080ad09f85ca7f4169226b8368297
 SHA512:
-  metadata.gz: abc3906c8056b2ce667d20f819e8f02ee87bbb0bfc99423a478c0a5332862ae403bd183a7e461eb6a3e6b24d7b8a94331dceb930c51c903362119ee4cea95841
-  data.tar.gz: 965c13e85691cdc159b1c2297bb2a13b8832f59878d39328ea1e79d7e91d71adb84bd929db3d2bd9d43ef981944c93ed9c7883998c3e147a4f8961fa3ea5ed6f
+  metadata.gz: 42c48a5990278c4c6b384d379c8b26b102beba5de1a420eb6f3678672cf0ff3de85eff4429d52ad85b8cfefd291faa325f01f6f07786680c04331b361e935fa2
+  data.tar.gz: 71c1b18be5c1883201ab005f05babbcdd92c1215c0a9839bffd1c633bbcbdccee7c6d46a1d2f712858a5ca53098fdd93d099d79bf2cf76f78bbe19019db6d30a

data/app/pb_kits/playbook/_playbook.scss

@@ -1,6 +1,3 @@
-
-
-
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_avatar_action_button/avatar_action_button';
@@ -31,6 +28,7 @@
 @import 'pb_detail/detail';
 @import 'pb_dialog/dialog';
 @import 'pb_distribution_bar/distribution_bar';
+@import 'pb_draggable/draggable';
 @import 'pb_dropdown/dropdown';
 @import 'pb_file_upload/file_upload';
 @import 'pb_filter/filter';
@@ -64,6 +62,7 @@
 @import 'pb_multiple_users_stacked/multiple_users_stacked';
 @import 'pb_nav/nav';
 @import 'pb_online_status/online_status';
+@import 'pb_overlay/overlay';
 @import 'pb_pagination/pagination';
 @import 'pb_passphrase/passphrase';
 @import 'pb_person/person';
@@ -121,3 +120,4 @@
 @import './utilities/text_align';
 @import './utilities/overflow';
 @import './utilities/truncate';
+@import './utilities/vertical_align';

data/app/pb_kits/playbook/index.js

@@ -35,6 +35,8 @@ export { default as DateYearStacked } from './pb_date_year_stacked/_date_year_st
 export { default as Detail} from './pb_detail/_detail'
 export { default as Dialog } from './pb_dialog/_dialog'
 export { default as DistributionBar } from './pb_distribution_bar/_distribution_bar'
+export { default as Draggable} from './pb_draggable/_draggable'
+export { DraggableProvider} from './pb_draggable/context'
 export { default as Dropdown} from './pb_dropdown/_dropdown'
 export { default as FileUpload } from './pb_file_upload/_file_upload'
 export { default as Filter } from './pb_filter/_filter'
@@ -70,6 +72,7 @@ export { default as MultipleUsersStacked } from './pb_multiple_users_stacked/_mu
 export { default as Nav } from './pb_nav/_nav'
 export { default as NavItem } from './pb_nav/_item'
 export { default as OnlineStatus } from './pb_online_status/_online_status'
+export { default as Overlay} from './pb_overlay/_overlay'
 export { default as Passphrase } from './pb_passphrase/_passphrase'
 export { default as PbReactPopover } from './pb_popover/_popover'
 export { default as Person } from './pb_person/_person'

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_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}) %>
+            <%= 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: { id: object.id, 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_subrow_headers.html.erb

@@ -0,0 +1,40 @@
+<% 
+  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",
+    }
+  ]
+
+  subrow_headers = ["Quarter", "Month", "Day"]
+%>
+
+<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "subrow_headers", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
+<% end %>

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

@@ -0,0 +1,3 @@
+`subrow_headers` is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.
+
+`enable_toggle_expansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enable_toggle_expansion` is a string that can be "all", "header" or "none". If set to "all", the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to "header" button will only appear in header and NOT in subRow headers. This is set to "header" by default.

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

@@ -1,3 +1,3 @@
 `subRowHeaders` is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.
 
-`enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` is a string that can be 'all', 'header" or "none". If set to 'all', the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to 'header' button will only appear in header and NOT in subRow headers. This is set to 'header' by default.
+`enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` is a string that can be "all", "header" or "none". If set to "all", the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to "header" button will only appear in header and NOT in subRow headers. This is set to "header" by default.

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

@@ -1,6 +1,7 @@
 examples:
   rails:
   - advanced_table_beta: Default (Required Props)
+  - advanced_table_beta_subrow_headers: SubRow Headers
   react:
   - advanced_table_default: Default (Required Props)
   - advanced_table_loading: Loading State
@@ -12,4 +13,3 @@ examples:
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props
   - advanced_table_inline_row_loading: inline Row Loading
-

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 %>
+<%= pb_content_tag do %>
         <% object.table_data.each do |row| %>
-          <%= render_row_and_children(row, object.column_definitions) %>
+          <%= render_row_and_children(row, object.column_definitions, 0, false) %>
         <% end %>
 <% end %>

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

@@ -3,20 +3,30 @@
 module Playbook
   module PbAdvancedTable
     class TableBody < Playbook::KitBase
+      prop :id, type: Playbook::Props::String,
+                default: ""
       prop :table_data, type: Playbook::Props::Array,
                         default: []
       prop :column_definitions, type: Playbook::Props::Array,
                                 default: []
+      prop :enable_toggle_expansion, type: Playbook::Props::Enum,
+                                     values: %w[all header none],
+                                     default: "header"
+      prop :subrow_headers, type: Playbook::Props::Array,
+                            default: []
 
-      def render_row_and_children(row, column_definitions, current_depth = 0)
+      def render_row_and_children(row, column_definitions, current_depth, first_parent_child)
         output = ActiveSupport::SafeBuffer.new
+        is_first_child_of_subrow = current_depth.positive? && first_parent_child && subrow_headers[current_depth - 1].present?
 
-        output << pb_rails("advanced_table/table_row", props: { row: row, column_definitions: column_definitions, depth: current_depth })
+        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: column_definitions, depth: current_depth, subrow_header: subrow_headers[current_depth - 1] }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
+
+        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: column_definitions, depth: current_depth })
 
         if row[:children].present?
-          output << content_tag(:div, class: "toggle-content", data: { advanced_table_content: row.object_id }) do
+          output << content_tag(:div, class: "toggle-content", data: { advanced_table_content: row.object_id.to_s + id }) do
             row[:children].map do |child_row|
-              render_row_and_children(child_row, column_definitions, current_depth + 1)
+              render_row_and_children(child_row, column_definitions, current_depth + 1, row.children.first == child_row)
             end.join.html_safe
           end
         end

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

@@ -1,14 +1,10 @@
-<%= 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 %>
                     <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", text_align:"end" }) do %>
                         <% if index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") %>
-                            <button class="gray-icon toggle-all-icon">
+                            <button class="gray-icon toggle-all-icon" onclick="expandAllRows(this)">
                                 <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right:"xs" }) %>
                             </button>
                         <% end %>
@@ -17,4 +13,12 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
+<% end %>
+
+<script type="text/javascript">
+    var expandAllRows = (element) => {
+        element.closest('.pb_table').querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]').forEach((button) => {
+            button.dispatchEvent(new Event('click'));
+        });
+    };
+</script>

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

@@ -1,15 +1,11 @@
-<%= 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 id="<%= object.row.object_id %>" class="gray-icon expand-toggle-icon" data-advanced-table="true" >
+                                <button id="<%= object.row.object_id.to_s + 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>

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

@@ -3,6 +3,8 @@
 module Playbook
   module PbAdvancedTable
     class TableRow < Playbook::KitBase
+      prop :id, type: Playbook::Props::String,
+                default: ""
       prop :column_definitions, type: Playbook::Props::Array,
                                 default: []
       prop :row

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

@@ -0,0 +1,34 @@
+<%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) 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: "start" }) 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 toggle-all-icon" onclick="expandAllSubRows(this, <%= depth %>)">
+                                    <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right:"xs" }) %>
+                                </button>
+                            <% end %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <% if index.zero? %>
+                                    <%= pb_rails("caption", props: { margin_left: object.row[:children].present? ? "none" : "xs", text: object.subrow_header }) %>
+                                <% end %>
+                            <% end %>
+                        <% end %>
+                    </div>
+                <% end %>
+            <% end %>
+        <% end %>
+<% end %>
+
+<script type="text/javascript">
+    var expandAllSubRows = (element, rowDepth) => {
+        element.closest(".toggle-content").querySelectorAll('.depth-sub-row-' + rowDepth + ' [data-advanced-table]').forEach((button) => {
+            button.dispatchEvent(new Event('click'));
+        });
+    };
+</script>

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

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbAdvancedTable
+    class TableSubrowHeader < Playbook::KitBase
+      prop :column_definitions, type: Playbook::Props::Array,
+                                default: []
+      prop :depth
+      prop :row
+      prop :enable_toggle_expansion, type: Playbook::Props::Enum,
+                                     values: %w[all header none],
+                                     default: "header"
+      prop :subrow_header, type: Playbook::Props::String,
+                           default: ""
+
+      def classname
+        generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")
+      end
+
+      def td_classname
+        generate_classname("id-cell", "chrome-styles", separator: " ")
+      end
+
+    private
+
+      def subrow_depth_classname
+        depth.positive? ? "depth-sub-row-#{depth}" : ""
+      end
+    end
+  end
+end

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

@@ -9,6 +9,10 @@ export const getPlacementProps = (placement: string, size?: "md" | "lg" | "sm" |
               'bottom-left': { bottom: 'xs', left: 'xs' },
               'top-left': { top: 'xs', left: 'xs' },
               'bottom-right': { bottom: 'xs', right: 'xs' },
+              'bottom-center': { bottom: "xs", className: "overlay_bottom_center" },
+              'top-center': { top: "xs", className: "overlay_top_center" },
+              'left-center': { left: "sm", className: "overlay_left_center" },
+              'right-center': { right: "sm", className: "overlay_right_center" }
           };
           break;
       
@@ -18,6 +22,10 @@ export const getPlacementProps = (placement: string, size?: "md" | "lg" | "sm" |
               'bottom-left': { bottom: '0', left: 'xs' },
               'top-left': { top: '0', left: 'xs' },
               'bottom-right': { bottom: '0', right: 'xs' },
+              'bottom-center': { bottom: "xs", className: "overlay_bottom_center" },
+              'top-center': { top: "xs", className: "overlay_top_center" },
+              'left-center': { left: "sm", className: "overlay_left_center" },
+              'right-center': { right: "sm", className: "overlay_right_center" }
           };
           break;
       
@@ -28,6 +36,10 @@ export const getPlacementProps = (placement: string, size?: "md" | "lg" | "sm" |
               'bottom-left': { bottom: '0', left: '0' },
               'top-left': { top: '0', left: '0' },
               'bottom-right': { bottom: '0', right: '0' },
+              'bottom-center': { bottom: "xs", className: "overlay_bottom_center" },
+              'top-center': { top: "xs", className: "overlay_top_center" },
+              'left-center': { left: "sm", className: "overlay_left_center" },
+              'right-center': { right: "sm", className: "overlay_right_center" }
           };
           break;
 
@@ -37,6 +49,10 @@ export const getPlacementProps = (placement: string, size?: "md" | "lg" | "sm" |
               '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 } },
+              'bottom-center': { bottom: "xs", className: "overlay_bottom_center" },
+              'top-center': { top: "xs", className: "overlay_top_center" },
+              'left-center': { left: "sm", className: "overlay_left_center" },
+              'right-center': { right: "sm", className: "overlay_right_center" }
           };
           break;
   }

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

@@ -26,6 +26,22 @@ $avatar-sizes: (
       flex-grow: 0;
       flex-basis: $size;
 
+      & > [class^=pb_flex_kit] {
+        [class^=pb_card_kit].overlay_bottom_center,
+        [class^=pb_card_kit].overlay_top_center {
+          left: 50%;
+          transform: translateX(-50%);
+          padding: 2px !important;
+        }
+
+        [class^=pb_card_kit].overlay_left_center,
+        [class^=pb_card_kit].overlay_right_center {
+          top: 50%;
+          transform: translateY(-50%);
+          padding: 2px !important;
+        }
+      }
+
       .avatar_wrapper {
         width: $size;
         height: $size;

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

@@ -7,7 +7,7 @@
       <% 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] }) %>
+        <%= pb_rails("icon_circle", props: { size: "xxs", icon: object.component_overlay[:icon], variant: object.component_overlay[:variant] }) %>
       <% end %>  
   <% end %>
   <% elsif object.component_overlay && object.component_overlay[:component] == "badge" %>

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

@@ -71,6 +71,10 @@ module Playbook
           "bottom-left" => { bottom: top_bottom_offset, left: offset },
           "top-left" => { top: top_bottom_offset, left: offset },
           "bottom-right" => { bottom: top_bottom_offset, right: offset },
+          "bottom-center" => { bottom: "xs", classname: "overlay_bottom_center" },
+          "top-center" => { top: "xs", classname: "overlay_top_center" },
+          "left-center" => { left: "sm", classname: "overlay_left_center" },
+          "right-center" => { right: "sm", classname: "overlay_right_center" },
         }
       end
     end

data/app/pb_kits/playbook/pb_avatar/avatar.test.js

@@ -42,3 +42,50 @@ test('uses the name prop as the alt property if no imageAlt prop is passed in',
 
   expect(image).toHaveAttribute('alt', name)
 })
+
+test('renders with badge overlay', () => {
+  const componentOverlay = {
+    component: "badge",
+    placement: "top-right",
+    text: "New",
+    variant: "error"
+  };
+  render(
+    <Avatar
+        componentOverlay={componentOverlay}
+        data={{ testid: testId }}
+        imageAlt={imageAlt}
+        imageUrl={imageUrl}
+        name={name}
+    />
+  );
+
+  const badgeOverlay = screen.getByTestId(testId);
+ 
+  expect(badgeOverlay).toBeInTheDocument();
+  expect(badgeOverlay).toHaveClass('pb_avatar_kit_size_md');
+  expect(badgeOverlay).toHaveTextContent('New');
+});
+
+test('renders with iconCircle overlay', () => {
+  const componentOverlay = {
+    component: "iconCircle",
+    placement: "bottom-left",
+    icon: "plus",
+    variant: "blue"
+  };
+  render(
+    <Avatar
+        componentOverlay={componentOverlay}
+        data={{ testid: testId }}
+        imageAlt={imageAlt}
+        imageUrl={imageUrl}
+        name={name}
+    />
+  );
+
+  const iconCircleOverlay = screen.getByTestId(testId);
+ 
+  expect(iconCircleOverlay).toBeInTheDocument();
+  expect(iconCircleOverlay).toHaveClass('pb_avatar_kit_size_md');
+});

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

@@ -1,71 +1,51 @@
-<%= 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-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: "top-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: "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: "On Roadtrip",
+          placement: "top-center",
+          variant: "info"
+      },
+      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-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: "Out of Office",
+          placement: "bottom-center",
+          variant: "error"
+      },
+      name: "Terry Johnson",
+      size: "xl",
+      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"
-  }) %>