playbook_ui 14.13.0 → 14.14.0.pre.alpha.pbntr500currencykithandlingofnullvalues6311

data/lib/playbook/forms/builder/time_zone_select_field.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Forms
+    class Builder
+      def time_zone_select_field(name, choices = {}, options = {}, html_options = {}, props: {})
+        props[:label] = @template.label(@object_name, name) if props[:label] == true
+        options[:skip_default_ids] = false unless options.key?(:skip_default_ids)
+        options[:prompt] = props[:blank_selection] || ""
+        html_options[:required] = "required" if props[:required]
+        input = @template.time_zone_select(@object_name, name, choices, options, html_options)
+
+        @template.pb_rails("select", props: props) do
+          input
+        end
+      end
+    end
+  end
+end

data/lib/playbook/forms/builder.rb

@@ -15,6 +15,7 @@ module Playbook
       require_relative "builder/phone_number_field"
       require_relative "builder/dropdown_field"
       require_relative "builder/star_rating_field"
+      require_relative "builder/time_zone_select_field"
 
       prepend(FormFieldBuilder.new(:email_field, kit_name: "text_input"))
       prepend(FormFieldBuilder.new(:number_field, kit_name: "text_input"))

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "14.12.0"
-  VERSION = "14.13.0"
+  PREVIOUS_VERSION = "14.14.0"
+  VERSION = "14.14.0.pre.alpha.pbntr500currencykithandlingofnullvalues6311"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.13.0
+  version: 14.14.0.pre.alpha.pbntr500currencykithandlingofnullvalues6311
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-02-07 00:00:00.000000000 Z
+date: 2025-02-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -288,6 +288,7 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_custom_cell.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.md
@@ -333,7 +334,9 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js
 - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data.json
@@ -384,22 +387,6 @@ files:
 - app/pb_kits/playbook/pb_avatar/docs/_footer.md
 - app/pb_kits/playbook/pb_avatar/docs/example.yml
 - app/pb_kits/playbook/pb_avatar/docs/index.js
-- app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss
-- app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx
-- app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb
-- app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.rb
-- app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.html.erb
-- app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.jsx
-- app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.html.erb
-- app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx
-- app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click.jsx
-- app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_onclick.html.erb
-- app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.html.erb
-- app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.jsx
-- app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb
-- app/pb_kits/playbook/pb_avatar_action_button/docs/example.yml
-- app/pb_kits/playbook/pb_avatar_action_button/docs/index.js
-- app/pb_kits/playbook/pb_avatar_action_button/pb_avatar_action_button.test.js
 - app/pb_kits/playbook/pb_background/_background.scss
 - app/pb_kits/playbook/pb_background/_background.tsx
 - app/pb_kits/playbook/pb_background/background.html.erb
@@ -450,6 +437,7 @@ files:
 - app/pb_kits/playbook/pb_badge/docs/_description.md
 - app/pb_kits/playbook/pb_badge/docs/example.yml
 - app/pb_kits/playbook/pb_badge/docs/index.js
+- app/pb_kits/playbook/pb_bar_graph/BarGraphStyles.scss
 - app/pb_kits/playbook/pb_bar_graph/_bar_graph.scss
 - app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx
 - app/pb_kits/playbook/pb_bar_graph/barGraph.test.js
@@ -478,6 +466,8 @@ files:
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx
+- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx
+- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md
@@ -682,6 +672,8 @@ files:
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_swift.md
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_options.html.erb
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_props_swift.md
+- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx
+- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md
 - app/pb_kits/playbook/pb_checkbox/docs/_description.md
 - app/pb_kits/playbook/pb_checkbox/docs/example.yml
 - app/pb_kits/playbook/pb_checkbox/docs/index.js
@@ -833,6 +825,8 @@ files:
 - app/pb_kits/playbook/pb_currency/docs/_currency_negative.jsx
 - app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.html.erb
 - app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.jsx
+- app/pb_kits/playbook/pb_currency/docs/_currency_null_display.html.erb
+- app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx
 - app/pb_kits/playbook/pb_currency/docs/_currency_props_swift.md
 - app/pb_kits/playbook/pb_currency/docs/_currency_size.html.erb
 - app/pb_kits/playbook/pb_currency/docs/_currency_size.jsx
@@ -1187,6 +1181,8 @@ files:
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md
 - app/pb_kits/playbook/pb_draggable/docs/example.yml
 - app/pb_kits/playbook/pb_draggable/docs/index.js
 - app/pb_kits/playbook/pb_draggable/draggable.html.erb
@@ -1628,10 +1624,16 @@ files:
 - app/pb_kits/playbook/pb_icon/icon.rb
 - app/pb_kits/playbook/pb_icon/icon.test.js
 - app/pb_kits/playbook/pb_icon_button/_icon_button.scss
+- app/pb_kits/playbook/pb_icon_button/_icon_button.tsx
 - app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb
+- app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.jsx
+- app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.html.erb
+- app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.jsx
 - app/pb_kits/playbook/pb_icon_button/docs/example.yml
+- app/pb_kits/playbook/pb_icon_button/docs/index.js
 - app/pb_kits/playbook/pb_icon_button/icon_button.html.erb
 - app/pb_kits/playbook/pb_icon_button/icon_button.rb
+- app/pb_kits/playbook/pb_icon_button/icon_button.test.jsx
 - app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
 - app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx
 - app/pb_kits/playbook/pb_icon_circle/docs/_description.md
@@ -2121,6 +2123,8 @@ files:
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.html.erb
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.jsx
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.md
+- app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx
+- app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional_react.md
 - app/pb_kits/playbook/pb_overlay/docs/example.yml
 - app/pb_kits/playbook/pb_overlay/docs/index.js
 - app/pb_kits/playbook/pb_overlay/overlay.html.erb
@@ -2275,6 +2279,11 @@ files:
 - app/pb_kits/playbook/pb_progress_pills/docs/_description.md
 - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.html.erb
 - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx
+- app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.md
+- app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.html.erb
+- app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.jsx
+- app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_rails.md
+- app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_react.md
 - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status.html.erb
 - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status.jsx
 - app/pb_kits/playbook/pb_progress_pills/docs/example.yml
@@ -2743,12 +2752,17 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_vertical_border.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx
+- app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.html.erb
+- app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.jsx
+- app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_rails.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_react.md
+- app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md
+- app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_rails.md
+- app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_react.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.html.erb
@@ -2761,6 +2775,9 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md
+- app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb
+- app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx
+- app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb
@@ -3332,11 +3349,11 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_typeahead-btjo1UN5.js
-- dist/chunks/_weekday_stacked-DeYS_l8v.js
-- dist/chunks/lazysizes-DHz07jlL.js
-- dist/chunks/lib-DjpLC8uO.js
-- dist/chunks/pb_form_validation-S56UaHZl.js
+- dist/chunks/_typeahead-PqkcDf1H.js
+- dist/chunks/_weekday_stacked-BrSrpj7J.js
+- dist/chunks/lazysizes-B7xYodB-.js
+- dist/chunks/lib-D3us1bGD.js
+- dist/chunks/pb_form_validation-BpihMSOQ.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-doc.js
@@ -3372,6 +3389,7 @@ files:
 - lib/playbook/forms/builder/phone_number_field.rb
 - lib/playbook/forms/builder/select_field.rb
 - lib/playbook/forms/builder/star_rating_field.rb
+- lib/playbook/forms/builder/time_zone_select_field.rb
 - lib/playbook/forms/builder/typeahead_field.rb
 - lib/playbook/height.rb
 - lib/playbook/hover.rb

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

@@ -1,66 +0,0 @@
-[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

@@ -1,98 +0,0 @@
-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

@@ -1,28 +0,0 @@
-<%= 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

@@ -1,42 +0,0 @@
-# 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

@@ -1,19 +0,0 @@
-<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

@@ -1,26 +0,0 @@
-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

@@ -1,10 +0,0 @@
-<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

@@ -1,17 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,16 +0,0 @@
-<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

@@ -1,35 +0,0 @@
-<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

@@ -1,42 +0,0 @@
-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