playbook_ui 14.13.0.pre.alpha.PBNTR457formtimezoneselect6219 → 14.13.0.pre.alpha.PBNTR5596029

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 96be297e4b256928b42d2aee573d4c7aa74e52a392ea66433309b0923616ef75
-  data.tar.gz: 23e994715b91860a0531ba2752963c035d6ff2bc8bed0f58493426a0722086e7
+  metadata.gz: 520a725d004f38fd119945b399c5e1dc6bcf5ca9929821965555ac8f72c3ffa1
+  data.tar.gz: '0490ed67775bcb53cefe0bbedcaca9d2482cf47e899b5cd0e16fc382f0bb014c'
 SHA512:
-  metadata.gz: 80f48248b5e9d6600abf10e0c2fcb56d389f4fa04226be97e4528a93e1f69d4ecd5b321c7c33a06b357b9b8d007c4f7470f2f0a7be0a1c1034f036c9cdebbc17
-  data.tar.gz: '0508c2f2d3b3b8f9726efcfc5a21b48bb6700cde54b5d4492021a00c0ae4d0180dac59fbc23183807fd62f7ad3a230f2997792c15b428de0855de2272853948c'
+  metadata.gz: 479d29aca4903e65fbaff26957ab48561ebd5a1d59e032c299a83cff41aae40e20ff195eb6d70e1fada990b7a79611ebfe19ec6984fc38e90fb058bc545ab05a
+  data.tar.gz: 17394761a8b8756c5bbb557c7245d28f597514f5e301a5857e56bb860f233a4b23224d58f122c64c6488a0ab766e97c7e0936958f36e20236942b2e5f00585c4

data/app/pb_kits/playbook/_playbook.scss

@@ -1,6 +1,7 @@
 
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
+@import 'pb_avatar_action_button/avatar_action_button';
 @import 'pb_background/background';
 @import 'pb_badge/badge';
 @import 'pb_bar_graph/bar_graph';

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

@@ -268,9 +268,6 @@
             box-shadow: 1px 0 10px -2px $border_light !important;
           }
         }
-        .pb_advanced_table_header {
-          box-shadow: none !important;
-        }
       }
     }
   }

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

@@ -116,7 +116,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
 
   //Create cells for columns, with customization for first column
-  const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element, isFirstColumn?: boolean) => {
+  const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element, index?: number) => {
     const columnCells = ({
       row,
       getValue,
@@ -126,7 +126,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     }) => {
       const rowData = row.original
 
-    if (isFirstColumn) {
+    if (index === 0) {
       switch (row.depth) {
         case 0: {
           return (
@@ -164,16 +164,15 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     return columnCells
   }
 
-  const buildColumns = (columnDefinitions: GenericObject[], isRoot= true): any => {
+  const buildColumns = (columnDefinitions: GenericObject[]): any => {
     return (
       columnDefinitions &&
       columnDefinitions.map((column, index) => {
-        const isFirstColumn = isRoot && index === 0; 
         //Checking to see if grouped column or not
         if (column.columns && column.columns.length > 0) {
           return {
             header: column.label || "",
-            columns: buildColumns(column.columns, false),
+            columns: buildColumns(column.columns),
           };
         } else {
           // Define the base column structure
@@ -187,7 +186,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             columnStructure.cell = createCellFunction(
               column.cellAccessors,
               column.customRenderer,
-              isFirstColumn
+              index
             );
           }
 

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

@@ -17,21 +17,14 @@ module Playbook
                         default: "scroll"
       prop :table_props, type: Playbook::Props::HashProp,
                          default: {}
-      prop :max_height, type: Playbook::Props::Enum,
-                        values: %w[auto xs sm md lg xl xxl xxxl],
-                        default: "auto"
 
       def classname
-        generate_classname("pb_advanced_table", responsive_classname, max_height_classname, separator: " ")
+        generate_classname("pb_advanced_table", responsive_classname, separator: " ")
       end
 
       def responsive_classname
         responsive == "scroll" ? "advanced-table-responsive-scroll" : "advanced-table-responsive-none"
       end
-
-      def max_height_classname
-        max_height.present? ? "advanced-table-max-height-#{max_height}" : ""
-      end
     end
   end
 end

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

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, responsive: "none", table_props: { container: false, sticky: true }}) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { container: false, sticky: true }}) %>

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

@@ -1,3 +1 @@
-This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table) under the hood which comes with its own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `table_props` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table).
-
-This doc example showcases how to set a sticky header for a nonresponsive table. To achieve sticky header AND responsive functionality, see the ["Table Props Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table#table-props-sticky-header) doc example below.
+This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table) under the hood which comes with it's own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `table_props` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table).

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

@@ -1,3 +1,3 @@
-This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table/react) under the hood which comes with its own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `tableProps` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table/react).
+This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table/react) under the hood which comes with it's own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `tableProps` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table/react).
 
 This doc example showcases how to set a sticky header for a nonresponsive table. To achieve sticky header AND responsive functionality, see the ["Table Props Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table/react#table-props-sticky-header) doc example below.

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

@@ -5,7 +5,6 @@ examples:
   - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_table_props: Table Props
-  - advanced_table_table_props_sticky_header: Table Props Sticky Header
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
@@ -31,7 +30,6 @@ examples:
   - advanced_table_pagination_with_props: Pagination Props
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
-  - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
   # - advanced_table_no_subrows: Table with No Subrows
   - advanced_table_selectable_rows: Selectable Rows
   - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)

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

@@ -19,5 +19,4 @@ export { default as AdvancedTableSelectableRowsNoSubrows } from './_advanced_tab
 export { default as AdvancedTableNoSubrows } from './_advanced_table_no_subrows.jsx'
 export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_selectable_rows_header.jsx'
 export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
-export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
-export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
+export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss

@@ -0,0 +1,66 @@
+[class^=pb_avatar_action_button_kit] {
+
+  $icon_size: 0px;
+  $border_size: 0px;
+
+  $action-colors: (
+    "add": $primary,
+    "remove": $error,
+  );
+
+  @each $key, $value in $action-colors {
+    &[class*=_#{$key}] a {
+      color: $value;
+    }
+  }
+  
+  @mixin icon-base {
+    &.dark{
+        background-color: $bg_dark
+    }
+    width: $icon_size;
+    height: $icon_size;
+    position: absolute;
+    background-color: $white;
+    border-radius: $icon_size;
+    font-size: ($icon_size - $border_size * 2);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+  }
+
+  @each $name, $size in $avatar-sizes {
+    
+    &[class*=_#{$name}] {
+      
+      $avatar_size: map-get($avatar-sizes, $name);
+      $icon_size: $avatar_size / 2;
+      $border_size: $icon_size / 10;
+
+      position: relative;
+      width: $avatar_size * 1.25;
+      height: $avatar_size * 1.1;
+      display: flex;
+    
+      [class^=pb_tooltip_kit] {
+        justify-self: center;
+      }
+    
+      &[class*=_bottom] .icon {
+        @include icon-base;
+        top: $icon_size * 1.27;
+      }
+      &[class*=_top] .icon {
+        @include icon-base;
+        bottom: $icon_size * 1.27;
+      }
+      &[class*=_right] .icon {
+        left: $icon_size * 1.5;
+      }
+      &[class*=_left] [class^=pb_avatar_kit] {
+        padding-left: $icon_size / 2;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx

@@ -0,0 +1,98 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps, 
+  buildHtmlProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+
+import Avatar from '../pb_avatar/_avatar'
+import Icon from '../pb_icon/_icon'
+
+type AvatarActionButtonProps = {
+  action?: "add" | "remove",
+  aria?: {[key: string]: string},
+  linkAriaLabel?: string,
+  className?: string,
+  dark?: boolean,
+  data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string,
+  imageAlt?: string,
+  imageUrl?: string,
+  linkUrl?: string,
+  name?: string,
+  onClick?: React.MouseEventHandler<HTMLSpanElement>,
+  placement?: string,
+  size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
+}
+
+const AvatarActionButton = (props: AvatarActionButtonProps): React.ReactElement => {
+  const {
+    action = 'add',
+    aria = {},
+    linkAriaLabel,
+    className,
+    dark = false,
+    data = {},
+    htmlOptions = {},
+    id,
+    imageAlt = '',
+    imageUrl,
+    linkUrl,
+    name,
+    onClick,
+    placement = 'bottom left',
+    size = 'md',
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+
+  const classes = classnames(buildCss(
+    'pb_avatar_action_button_kit',
+    action,
+    placement,
+    size),
+  globalProps(props),
+  className)
+
+  const icons = {
+    add: 'plus-circle',
+    remove: 'times-circle',
+  }
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
+    >
+      <a
+          aria-label={linkAriaLabel}
+          href={linkUrl}
+          onClick={onClick}
+      >
+        <Avatar
+            imageAlt={imageAlt}
+            imageUrl={imageUrl}
+            name={name}
+            size={size}
+        />
+        <div className={`icon ${dark ? 'dark' : ''}`}>
+          <Icon
+              dark={dark}
+              icon={icons[action]}
+          />
+        </div>
+      </a>
+    </div>
+  )
+}
+
+export default AvatarActionButton

data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb

@@ -0,0 +1,28 @@
+<%= pb_content_tag do %>
+    <% if object.tooltip_text.present? %>
+        <%= pb_rails("tooltip", props: {
+          trigger_element_id: object.tooltip_id,
+          tooltip_id: "tooltip-2",
+          position: 'top'
+        }) do %>
+          <%= object.tooltip_text %>
+        <% end %>
+    <% end %>
+
+    <%= link_to object.link_url, id: object.tooltip_id, 'aria-label': object.link_aria_label do %>
+      <%= pb_rails("avatar", props: {
+        dark: object.dark,
+        name: object.name,
+        size: object.size,
+        image_alt: object.image_alt,
+        image_url: object.image_url,
+        class: "avatar_action"
+      }) %>
+      <div class="icon <%= object.dark ? 'dark' : '' %> ">
+        <%= pb_rails("icon", props: {
+          dark: object.dark,
+          icon: object.action_icons
+        }) %>
+      </div>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbAvatarActionButton
+    class AvatarActionButton < Playbook::KitBase
+      prop :action, type: Playbook::Props::String,
+                    default: "add"
+      prop :link_aria_label, type: Playbook::Props::String
+      prop :image_alt, type: Playbook::Props::String
+      prop :image_url, type: Playbook::Props::String
+      prop :link_url, type: Playbook::Props::String, default: "#"
+      prop :tooltip_text, type: Playbook::Props::String
+      prop :tooltip_id, type: Playbook::Props::String
+      prop :name, type: Playbook::Props::String,
+                  default: ""
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[xs sm md lg xl],
+                  default: "md"
+      prop :placement, type: Playbook::Props::Enum,
+                       values: %w[bottom_left bottom_right top_left top_right],
+                       default: "bottom_left"
+
+      def classname
+        generate_classname("pb_avatar_action_button_kit", action, size, placement)
+      end
+
+      def action_icons
+        icon_hash = {
+          add: "plus-circle",
+          remove: "times-circle",
+        }
+        # if an 'action' prop is passed that isn't
+        # in the icon_hash an empty string is returned
+        # instead of a null value, which would break the page
+
+        # double pipe ruby syntax below is essentially a reduced if-else statement
+        # if icon_hash[action.to_sym] returns a falsey value, return "" instead
+        icon_hash[action.to_sym] ||= ""
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.html.erb

@@ -0,0 +1,19 @@
+<div class="pb--doc-demo-row">
+  
+  <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Add Sophia Carden",
+      name: "Sophia Carden",
+      image_alt: "Add Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      action: "add",
+  }) %>
+
+  <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Remove Sophia Carden",
+      name: "Sophia Carden",
+      image_alt: "Remove Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      action: "remove",
+  }) %>
+
+</div>

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import AvatarActionButton from '../_avatar_action_button'
+
+const AvatarActionButtonActions = (props) => (
+  <div className="pb--doc-demo-row">
+    <AvatarActionButton
+        action="add"
+        imageAlt="Add Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Add Sophia Carden"
+        name="Sophia Carden"
+        {...props}
+    />
+    <AvatarActionButton
+        action="remove"
+        imageAlt="Remove Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Remove Sophia Carden"
+        name="Sophia Carden"
+        {...props}
+    />
+  </div>
+)
+
+export default AvatarActionButtonActions

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.html.erb

@@ -0,0 +1,10 @@
+<div class="pb--doc-demo-row">
+
+  <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
+      name: "Sophia Carden",
+      image_alt: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg"
+  }) %>
+
+</div>

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import AvatarActionButton from '../_avatar_action_button'
+
+const AvatarActionButtonDefault = (props) => (
+  <div className="pb--doc-demo-row">
+    <AvatarActionButton
+        imageAlt="Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Sophia Carden"
+        name="Sophia Carden"
+        {...props}
+    />
+  </div>
+)
+
+export default AvatarActionButtonDefault

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import AvatarActionButton from '../_avatar_action_button'
+
+const AvatarActionButtonOnClick = (props) => (
+  <div className="pb--doc-demo-row">
+    <AvatarActionButton
+        imageAlt="Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Alert Sophia Carden"
+        linkUrl="https://www.google.com"
+        name="Sophia Carden"
+        onClick={() => alert('clicked!')}
+        {...props}
+    />
+  </div>
+)
+
+export default AvatarActionButtonOnClick

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_onclick.html.erb

@@ -0,0 +1,16 @@
+<div class="pb--doc-demo-row">
+  
+  <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Alert Sophia Carden",
+      name: "Sophia Carden",
+      id: "clickable",
+      link_url: "http://www.google.com",
+      image_alt: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+  }) %>
+
+  <%= javascript_tag do %>
+    document.querySelector('#clickable').addEventListener('click', () => alert('clickable clicked!'))
+  <% end %>
+
+</div>

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.html.erb

@@ -0,0 +1,35 @@
+<div class="pb--doc-demo-row">
+  
+  <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
+      name: "Sophia Carden",
+      image_alt: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      placement: "bottom_left"
+  }) %>
+
+  <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
+      name: "Sophia Carden",
+      image_alt: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      placement: "bottom_right"
+  }) %>
+
+    <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
+      name: "Sophia Carden",
+      image_alt: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      placement: "top_left"
+  }) %>
+
+    <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
+      name: "Sophia Carden",
+      image_alt: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      placement: "top_right"
+  }) %>
+
+</div>

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+
+import AvatarActionButton from '../_avatar_action_button'
+
+const AvatarActionButtonPlacement = (props) => (
+  <div className="pb--doc-demo-row">
+    <AvatarActionButton
+        imageAlt="Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Sophia Carden"
+        name="Sophia Carden"
+        placement="bottom_left"
+        {...props}
+    />
+    <AvatarActionButton
+        imageAlt="Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Sophia Carden"
+        name="Sophia Carden"
+        placement="bottom_right"
+        {...props}
+    />
+    <AvatarActionButton
+        imageAlt="Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Sophia Carden"
+        name="Sophia Carden"
+        placement="top_left"
+        {...props}
+    />
+    <AvatarActionButton
+        imageAlt="Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Sophia Carden"
+        name="Sophia Carden"
+        placement="top_right"
+        {...props}
+    />
+  </div>
+)
+
+export default AvatarActionButtonPlacement

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb

@@ -0,0 +1,13 @@
+<div class="pb--doc-demo-row">
+  
+  <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
+      name: "Sophia Carden",
+      link_url: "http://www.google.com",
+      image_alt: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      tooltip_text: "Tooltip Text",
+      tooltip_id: "avatar_1",
+  }) %>
+
+</div>

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

@@ -0,0 +1,15 @@
+examples:
+  
+  rails:
+  - avatar_action_button_default: Default
+  - avatar_action_button_placement: Placement
+  - avatar_action_button_actions: Actions
+  - avatar_action_button_onclick: On Click
+  - avatar_action_button_tooltip: Tooltip
+
+  
+  react:
+  - avatar_action_button_default: Default
+  - avatar_action_button_placement: Placement
+  - avatar_action_button_actions: Actions
+  - avatar_action_button_on_click: On Click

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

@@ -0,0 +1,4 @@
+export { default as AvatarActionButtonDefault } from './_avatar_action_button_default.jsx'
+export { default as AvatarActionButtonPlacement } from './_avatar_action_button_placement.jsx'
+export { default as AvatarActionButtonActions } from './_avatar_action_button_actions.jsx'
+export { default as AvatarActionButtonOnClick } from './_avatar_action_button_on_click.jsx'

data/app/pb_kits/playbook/pb_avatar_action_button/pb_avatar_action_button.test.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import AvatarActionButton from './_avatar_action_button'
+
+const imageUrl = 'https://randomuser.me/api/portraits/women/8.jpg',
+  testId = 'scarden',
+  name = 'Sophia Carden',
+  imageAlt = 'Sophia Carden Profile'
+
+test('loads the given image url and name', () => {
+  render(
+    <AvatarActionButton
+        data={{ testid: testId }}
+        imageAlt={imageAlt}
+        imageUrl={imageUrl}
+        linkAriaLabel={name}
+        name={name}
+    />
+  )
+
+  const kit      = screen.getByTestId(testId)
+  const image    = screen.getByAltText(imageAlt)
+  const link     = kit.children[0]
+
+  expect(kit).toHaveClass('pb_avatar_action_button_kit_add_bottom_left_md')
+  expect(image).toHaveAttribute('data-src', imageUrl)
+  expect(image).toHaveAttribute('src', imageUrl)
+  expect(image).toHaveAttribute('alt', imageAlt)
+  expect(link).toHaveAttribute('aria-label', name)
+})

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

@@ -17,7 +17,6 @@ examples:
 
   react:
   - bar_graph_default: Default
-  - bar_graph_pb_styles: Playbook Styles
   - bar_graph_legend: Legend
   - bar_graph_legend_position: Legend Position
   - bar_graph_legend_non_clickable: Legend Non Clickable