playbook_ui 13.27.0.pre.alpha.testingcollapsible2917 → 13.27.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b12c7a464c2f34a42001f703bfb42df3f750da9574ab1163e059a4ce6b906f77
-  data.tar.gz: 8deca1276b0a8ae5c8d6a542e2a7e5362c1c3f7e206c4379b21d2cb48da0cb97
+  metadata.gz: 170570cd88a3ae65b0c78878a3490be708a8c598f7b5c21f5abecf5bf6f5d21b
+  data.tar.gz: e3b6c482a5a0b583ee3ace8fe16e3d3c0e5c5c47a4a3635b74c1dd87e7a3df3f
 SHA512:
-  metadata.gz: 3d5187d01379e3fdc8aea8d2d0c6bdf717ba10ee4c60f29ca5eb4abb83900ddb5b78fd627522ec54aa1e3bb6957f36252dc9001827efd3b70bc597ee69cb6e10
-  data.tar.gz: 0e33d8a8583c2ad4c58002c04f087dae84ffa6586f8579eae2f1bd479cf4ab6143907a3305503e1679e179f98e4ac75a67069ce9b42056c2a84881de2149cab0
+  metadata.gz: abc3906c8056b2ce667d20f819e8f02ee87bbb0bfc99423a478c0a5332862ae403bd183a7e461eb6a3e6b24d7b8a94331dceb930c51c903362119ee4cea95841
+  data.tar.gz: 965c13e85691cdc159b1c2297bb2a13b8832f59878d39328ea1e79d7e91d71adb84bd929db3d2bd9d43ef981944c93ed9c7883998c3e147a4f8961fa3ea5ed6f

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

@@ -9,10 +9,6 @@ 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;
       
@@ -22,10 +18,6 @@ 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;
       
@@ -36,10 +28,6 @@ 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;
 
@@ -49,10 +37,6 @@ 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,22 +26,6 @@ $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], variant: object.component_overlay[:variant] }) %>
+        <%= pb_rails("icon_circle", props: { size: "xxs", icon: object.component_overlay[:icon] }) %>
       <% end %>  
   <% end %>
   <% elsif object.component_overlay && object.component_overlay[:component] == "badge" %>

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

@@ -71,10 +71,6 @@ 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,50 +42,3 @@ 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,51 +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: "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-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: "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-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: "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: "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: "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-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"
+  }) %>

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx

@@ -4,6 +4,28 @@ import { Avatar } from '../..'
 const AvatarBadgeComponentOverlay = () => {
     return (
         <div>
+            <Avatar
+                componentOverlay={{
+                    component: "badge",
+                    placement: "top-left",
+                    text: "12"
+                }}
+                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+                marginBottom="sm"
+                size="xxs"
+            />
+
+            <Avatar
+                componentOverlay={{
+                    component: "badge",
+                    placement: "top-right",
+                    text: "12"
+                }}
+                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+                marginBottom="sm"
+                size="xs"
+            />
+
             <Avatar
                 componentOverlay={{
                     component: "badge",
@@ -18,7 +40,7 @@ const AvatarBadgeComponentOverlay = () => {
             <Avatar
                 componentOverlay={{
                     component: "badge",
-                    placement: "top-left",
+                    placement: "bottom-left",
                     text: "12"
                 }}
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
@@ -29,9 +51,8 @@ const AvatarBadgeComponentOverlay = () => {
             <Avatar
                 componentOverlay={{
                     component: "badge",
-                    placement: "top-center",
-                    text: "On Roadtip",
-                    variant: "info"
+                    placement: "top-left",
+                    text: "12"
                 }}
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
@@ -41,14 +62,14 @@ const AvatarBadgeComponentOverlay = () => {
             <Avatar
                 componentOverlay={{
                     component: "badge",
-                    placement: "bottom-center",
-                    text: "Out of Office",
-                    variant: "error"
+                    placement: "top-right",
+                    text: "12"
                 }}
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="xl"
-            /> 
+            />    
+
         </div>
     )
 }

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

@@ -1,9 +1,32 @@
+<%= pb_rails("avatar", props: {
+    component_overlay: {
+        component: "icon_circle",
+        icon: "plus",
+        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: "icon_circle",
+        icon: "plus",
+        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: "icon_circle",
-        icon: "shield",
-        placement: "bottom-right",
-        variant: "royal"
+        icon: "plus",
+        placement: "bottom-right"
     },
     name: "Terry Johnson",
     size: "sm",
@@ -14,9 +37,8 @@
   <%= pb_rails("avatar", props: {
     component_overlay: {
         component: "icon_circle",
-        icon: "check",
-        placement: "top-right",
-        variant: "green"
+        icon: "plus",
+        placement: "bottom-left"
     },
     name: "Terry Johnson",
     size: "md",
@@ -27,9 +49,8 @@
   <%= pb_rails("avatar", props: {
     component_overlay: {
         component: "icon_circle",
-        icon: "lock",
-        placement: "top-left",
-        variant: "red"
+        icon: "plus",
+        placement: "top-left"
     },
     name: "Terry Johnson",
     size: "lg",
@@ -40,12 +61,11 @@
   <%= pb_rails("avatar", props: {
     component_overlay: {
         component: "icon_circle",
-        icon: "star",
-        placement: "left-center",
-        variant: "yellow"
+        icon: "plus",
+        placement: "top-right"
     },
     name: "Terry Johnson",
     size: "xl",
     image_url: "https://randomuser.me/api/portraits/men/44.jpg",
     margin_bottom: "sm"
-  }) %>
+  }) %>

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx

@@ -4,54 +4,73 @@ import { Avatar } from '../..'
 const AvatarCircleIconComponentOverlay = () => {
     return (
         <div>
-        <Avatar
-            componentOverlay={{
-                component: "iconCircle",
-                placement: "bottom-right",
-                icon: "shield",
-                variant: "royal"
-            }}
-            imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
-            marginBottom="sm"
-            size="sm"
-        />
-
-        <Avatar
-            componentOverlay={{
-                component: "iconCircle",
-                placement: "bottom-right",
-                icon: "check",
-                variant: "green"
-            }}
-            imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
-            marginBottom="sm"
-            size="md"
-        />
-
-        <Avatar
-            componentOverlay={{
-                component: "iconCircle",
-                placement: "top-left",
-                icon: "lock",
-                variant: "red"
-            }}
-            imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
-            marginBottom="sm"
-            size="lg"
-        />
-
-        <Avatar
-            componentOverlay={{
-                component: "iconCircle",
-                placement: "left-center",
-                icon: "star",
-                variant: "yellow"
-            }}
-            imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
-            marginBottom="sm"
-            size="xl"
-        /> 
-    </div>
+            <Avatar
+                componentOverlay={{
+                    component: "iconCircle",
+                    icon: "plus",
+                    placement: "top-left"
+                }}
+                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+                marginBottom="sm"
+                size="xxs"
+            />
+
+            <Avatar
+                componentOverlay={{
+                    component: "iconCircle",
+                    icon: "plus",
+                    placement: "top-right"
+                }}
+                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+                marginBottom="sm"
+                size="xs"
+            />
+
+            <Avatar
+                componentOverlay={{
+                    component: "iconCircle",
+                    icon: "plus",
+                    placement: "bottom-right",
+                }}
+                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+                marginBottom="sm"
+                size="sm"
+            />
+
+            <Avatar
+                componentOverlay={{
+                    component: "iconCircle",
+                    icon: "plus",
+                    placement: "bottom-left"
+                }}
+                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+                marginBottom="sm"
+                size="md"
+            />
+
+            <Avatar
+                componentOverlay={{
+                    component: "iconCircle",
+                    icon: "plus",
+                    placement: "top-left"
+                }}
+                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+                marginBottom="sm"
+                size="lg"
+            />
+
+            <Avatar
+                componentOverlay={{
+                    component: "iconCircle",
+                    icon: "plus",
+                    placement: "top-right"
+                }}
+                imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+                marginBottom="sm"
+                size="xl"
+            />
+
+        </div>
     )
 }
 

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx

@@ -57,6 +57,26 @@ const AvatarDefault = (props) => {
           status="offline"
           {...props}
       />
+      <br/>
+      <Avatar
+          imageAlt="Terry Johnson Standing"
+          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+          name="Terry Johnson"
+          overlay={{component:"badge", text: "6", variant: "notification", placement:"top-right"}}
+          size="lg"
+          status="offline"
+          {...props}
+      />
+      <br/>
+      <Avatar
+          imageAlt="Terry Johnson Standing"
+          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+          name="Terry Johnson"
+          overlay={{component:"icon", icon:"plus", variant:"royal", placement:"bottom-left"}}
+          size="xl"
+          status="offline"
+          {...props}
+      />
     </div>
   )
 }

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

@@ -4,14 +4,14 @@ examples:
     - avatar_monogram: Monogram
     - avatar_no_image: "Bad Image Link"
     - avatar_status: Status
-    - avatar_circle_icon_component_overlay: Icon Circle Component Overlay
+    - avatar_circle_icon_component_overlay: Circle Icon Component Overlay
     - avatar_badge_component_overlay: Badge Component Overlay
   react:
     - avatar_default: Default
     - avatar_monogram: Monogram
     - avatar_no_image: "Bad Image Link"
     - avatar_status: Status
-    - avatar_circle_icon_component_overlay: Icon Circle Component Overlay
+    - avatar_circle_icon_component_overlay: Circle Icon Component Overlay
     - avatar_badge_component_overlay: Badge Component Overlay
   swift:
     - avatar_default_swift: Default

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -45,9 +45,6 @@
   }
 
   &[class*=dark] {
-    a {
-      color: $active_dark;
-    }
     @include pb_body_dark();
     @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
       &[class*=_#{$dark_color_name}][class*=dark]{

data/app/pb_kits/playbook/pb_body/_body_mixins.scss

@@ -15,7 +15,7 @@ $pb_dark_body_colors: (
   default:        $text_dk_default,
   light:          $text_dk_light,
   lighter:        $text_dk_lighter,
-  link:           $active_dark,
+  link:           $primary_action_dark,
   error:          $error,
   success:        $text_dk_success_sm,
 );

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -197,16 +197,16 @@ $pb_button_border_width: 0px;
 
 // Dark Link =============
 @mixin pb_button_link_dark {
-  @include pb_button_variant($transparent, $active_dark);
+  @include pb_button_variant($transparent, $white);
 
   @media (hover:hover) {
     &:hover {
       @include pb_button_hover($transparent);
-      color: rgba($active_dark, $opacity_6)
+      color: rgba($white, $opacity_6)
     }
     &:active {
       transition: none;
-      @include pb_button_variant($transparent, $active_dark);
+      @include pb_button_variant($transparent, $white);
     }
   }
 }

data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss

@@ -13,7 +13,7 @@ $pb_caption_colors: (
 $pb_dark_caption_colors: (
   default:        $text_dk_default,
   light:          $text_dk_light,
-  link:           $active_dark,
+  link:           $primary,
   success:        $text_dk_success_sm,
   error:          $error,
 );

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -17,11 +17,6 @@ $additional_colors: (
   "light": $bg_light,
   "white": $white,
   "none": none,
-  "success_subtle": $success_subtle,
-  "warning_subtle": $warning_subtle,
-  "error_subtle": $error_subtle,
-  "info_subtle": $info_subtle,
-  "neutral_subtle": $neutral_subtle,
 );
 $background_colors: map-merge($product_colors, $additional_colors);
 $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors), $category_colors);