[PLAY-1388] Online Status Kit Props: Size and No Border

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

@@ -78,36 +78,6 @@ $avatar-sizes: (
           display: block;
         }
       }
-      [class^=pb_online_status] {
-        position: absolute;
-        right: 0;
-        top: 0;
-        bottom: auto;
-        left: auto;
-
-        &.size_xxs {
-          right: -5px;
-        }
-
-        &.size_xs {
-          right: -4px;
-        }
-
-        &.size_md {
-          top: auto;
-          bottom: 6px;
-        }
-
-        &.size_lg {
-          top: auto;
-          bottom: 14px;
-        }
-
-        &.size_xl {
-          top: auto;
-          bottom: 22px;
-        }
-      }
     }
   }
 }

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

@@ -71,6 +71,22 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
 
   const canShowImage = imageUrl && !error
 
+  const onlineStatusSize = 
+    ['xxs', 'xs'].includes(size) ? 'sm' :
+      ['sm', 'md'].includes(size) ? 'md' :
+        ['lg', 'xl'].includes(size) ? 'lg' :
+          'sm';
+
+  const onlineStatusPositionProps = (["xxs", "xs", "sm"].includes(size)) ? 
+    {
+      top: { inset: true, value: "0" },
+      right: { inset: false, value: "xxs" }
+    }
+    : {
+      bottom: { inset: true, value: "0" },
+      right: { inset: true, value: size === "xl" ? "sm" : size === "lg" ? "xs" : "xxs" }
+    };
+
   return (
     <div
         {...ariaProps}
@@ -142,9 +158,11 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
           </div>
           {status && (
             <OnlineStatus
-                className={`size_${size}`}
                 dark={dark}
+                position="absolute"
+                size={onlineStatusSize}
                 status={status}
+                {...onlineStatusPositionProps}
             />
           )}
         </>

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

@@ -4,6 +4,8 @@ module Playbook
   module PbAvatar
     class Avatar < Playbook::KitBase
       prop :component_overlay
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
       prop :image_url, type: Playbook::Props::String
       prop :image_alt, type: Playbook::Props::String,
                        default: ""
@@ -23,7 +25,22 @@ def classname
       end
 
       def online_status_props
-        { status: status, classname: "size_#{size}" }
+        props = {
+          dark: dark,
+          status: status,
+          size: online_status_size,
+          position: "absolute",
+          right: online_status_right_position,
+        }
+
+        case size
+        when "xxs", "xs", "sm"
+          props[:top] = { value: "0", inset: true }
+        else
+          props[:bottom] = { value: "0", inset: true }
+        end
+
+        props
       end
 
       def alt_text
@@ -57,6 +74,32 @@ def placement_mapping
         }
       end
 
+      def online_status_size
+        case size
+        when "xxs", "xs"
+          "sm"
+        when "sm", "md"
+          "md"
+        when "lg", "xl"
+          "lg"
+        else
+          "sm"
+        end
+      end
+
+      def online_status_right_position
+        case size
+        when "xxs", "xs", "sm"
+          "xxs"
+        when "md"
+          { value: "xxs", inset: true }
+        when "lg"
+          { value: "xs", inset: true }
+        when "xl"
+          { value: "sm", inset: true }
+        end
+      end
+
       def placement_styles(offset)
         top_bottom_offset = if offset == "xs"
                               "xs"

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

@@ -89,3 +89,20 @@ test('renders with iconCircle overlay', () => {
   expect(iconCircleOverlay).toBeInTheDocument();
   expect(iconCircleOverlay).toHaveClass('pb_avatar_kit_size_md');
 });
+
+
+test('renders with online status', () => {
+  render(
+    <Avatar
+        data={{ testid: testId }}
+        imageAlt={imageAlt}
+        imageUrl={imageUrl}
+        name={name}
+        status="online"
+    />
+  );
+
+  const onlineStatusAvatar = screen.getByTestId(testId);
+  const onlineStatus = onlineStatusAvatar.querySelector('.pb_online_status_kit_online_size_md')
+  expect(onlineStatus).toBeInTheDocument();
+});

playbook/app/pb_kits/playbook/pb_online_status/_online_status.scss

@@ -1,11 +1,58 @@
-@import "online_status_mixins";
+@import "../tokens/colors";
+
+$pb_online_status_size: 8px;
+$pb_online_status_border: 2px;
+$pb_online_status_sizes: (
+  "sm": 8px,
+  "md": 10px,
+  "lg": 12px,
+);
+
+$pb_online_status_statuses: (
+  online: $success,
+  away: $warning,
+  offline: $neutral,
+  success: $success,
+  warning: $warning,
+  error: $error,
+  info: $info,
+  neutral: $neutral,
+  primary: $primary,
+);
 
 [class^=pb_online_status_kit] {
-  @include pb_online_status;
+  box-sizing: content-box;
+  width: $pb_online_status_size;
+  height: $pb_online_status_size;
+  flex-basis: $pb_online_status_size;
+  flex-grow: 0;
+  flex-shrink: 0;
+  border-width: $pb_online_status_border;
+  border-color: $white;
+  border-style: solid;
+  border-radius: 50%;
+  background: $neutral;
+
+  &.dark {
+    border-color: $bg_dark;
+  }
 
   @each $status_name, $status_value in $pb_online_status_statuses {
-    &[class*=_#{$status_name}]  {
-      @include pb_online_status($status_value);
+    &[class*=_#{$status_name}] {
+      background: $status_value;
     }
   }
-}
+
+  @each $size, $value in $pb_online_status_sizes {
+    &[class*=_size_#{$size}] {
+      width: $value;
+      height: $value;
+      flex-basis: $value;
+    }
+  }
+
+  &[class*=_no_border] {
+    border-width: 0;
+    border-style: none;
+  }
+}

playbook/app/pb_kits/playbook/pb_online_status/_online_status.tsx

@@ -11,6 +11,8 @@ type OnlineStatusProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   status?: "away" | "error" | "info" | "neutral" | "offline" |"online" | "primary"| "success" | "warning",
+  size?: "sm" | "md" | "lg",
+  noBorder?: boolean,
 } & GlobalProps
 
 const OnlineStatus = (props: OnlineStatusProps) => {
@@ -21,14 +23,17 @@ const OnlineStatus = (props: OnlineStatusProps) => {
     htmlOptions = {},
     id,
     status = 'offline',
+    size = 'sm',
+    noBorder = false,
   } = props
 
   aria.label = status
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
-  const classes = classnames(buildCss('pb_online_status_kit', status), globalProps(props), className)
+  const getBorder = noBorder ? 'no_border' : ''
+  const classes = classnames(buildCss('pb_online_status_kit', status, getBorder, "size", size), globalProps(props), className)
 
   return (
     <div

playbook/app/pb_kits/playbook/pb_online_status/docs/_online_status_no_border.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("online_status", props: { no_border: true }) %>

playbook/app/pb_kits/playbook/pb_online_status/docs/_online_status_no_border.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+import OnlineStatus from '../_online_status'
+
+const OnlineStatusNoBorder = (props) => (
+  <>
+    <OnlineStatus
+        noBorder
+        {...props}
+    />
+  </>
+)
+
+export default OnlineStatusNoBorder

playbook/app/pb_kits/playbook/pb_online_status/docs/_online_status_size.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("online_status", props: { size: "sm", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { size: "md", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { size: "lg", margin_y: "xs" }) %>

playbook/app/pb_kits/playbook/pb_online_status/docs/_online_status_size.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import OnlineStatus from '../_online_status'
+
+const OnlineStatusSize = (props) => (
+  <>
+    <OnlineStatus
+        marginY="xs"
+        size="sm"
+        {...props}
+    />
+    <OnlineStatus
+        marginY="xs"
+        size="md"
+        {...props}
+    />
+    <OnlineStatus
+        marginY="xs"
+        size="lg"
+        {...props}
+    />
+  </>
+)
+
+export default OnlineStatusSize

playbook/app/pb_kits/playbook/pb_online_status/docs/example.yml

@@ -1,8 +1,12 @@
 examples:
 
   rails:
-  - online_status_default: Default
+  - online_status_default: Colors
+  - online_status_size: Size
+  - online_status_no_border: No Border
 
 
   react:
-  - online_status_default: Default
+  - online_status_default: Colors
+  - online_status_size: Size
+  - online_status_no_border: No Border

playbook/app/pb_kits/playbook/pb_online_status/docs/index.js

@@ -1 +1,3 @@
 export { default as OnlineStatusDefault } from './_online_status_default.jsx'
+export { default as OnlineStatusSize } from './_online_status_size.jsx'
+export { default as OnlineStatusNoBorder } from './_online_status_no_border.jsx'

playbook/app/pb_kits/playbook/pb_online_status/online_status.rb

@@ -7,8 +7,18 @@ class OnlineStatus < Playbook::KitBase
                     values: %w[online offline away success warning error info neutral primary],
                     default: "offline"
 
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[sm md lg],
+                  default: "sm"
+
+      prop :no_border, type: Playbook::Props::Boolean, default: false
+
       def classname
-        generate_classname("pb_online_status_kit", status)
+        generate_classname("pb_online_status_kit", status, is_no_border, "size", size)
+      end
+
+      def is_no_border
+        no_border ? "no_border" : nil
       end
     end
   end