playbook_ui 14.16.0 → 14.17.0.pre.alpha.play1499backgroundkitoverlay7105

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

@@ -0,0 +1,39 @@
+<% 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: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, selectable_rows: true }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions, selectable_rows: true }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all", selectable_rows: true }) %>
+<% end %>

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

@@ -0,0 +1,33 @@
+<% 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",
+    }
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "selectable_rows_no_subrows", table_data: @table_data_no_subrows, column_definitions: column_definitions, selectable_rows: true, enable_toggle_expansion: "none", }) %>

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

@@ -0,0 +1 @@
+`selectable_rows` can also be used with tables without nested row data. Set `enable_toggle_expansion: none` to adjust the Advanced Table styling to fit a table without subrows.

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

@@ -0,0 +1,6 @@
+`selectable_rows` is a boolean prop that if present will add checkboxes to all rows that will allow for selecting rows. 
+
+When a parent row is clicked, it will check all nested children rows, Children rows can be manually checked or unchecked as well. 
+
+__ALERT TO DEVS__: UPDATE THIS PARAGRAPH IN THE FOLLOW UP STORY WHEN CHECKBOX FUNCTIONALITY IS SET PLEASE
+The `onRowSelectionChange` prop returns an array of ids of all Rows that have been selected. Open the console on this example and check and uncheck checkboxes to see this is action! __NOTE__: Each object within the `tableData`Array must contain a unique id in order to attach an id to all Rows for this to function. 

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

@@ -11,6 +11,8 @@ examples:
   - advanced_table_custom_cell_rails: Custom Components for Cells
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
+  # - advanced_table_selectable_rows: Selectable Rows
+  # - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
 
 
   react:
@@ -37,4 +39,5 @@ examples:
   - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
-  - advanced_table_inline_editing: Inline Cell Editing
+  - advanced_table_inline_editing: Inline Cell Editing
+  - advanced_table_fullscreen: Fullscreen

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

@@ -21,4 +21,5 @@ export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_
 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 AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
+export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
+export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'

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

@@ -231,4 +231,4 @@ window.expandAllRows = (element) => {
 
 window.expandAllSubRows = (element, rowDepth) => {
   PbAdvancedTable.handleToggleAllSubRows(element, rowDepth);
-};
+};

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

@@ -21,6 +21,8 @@ module Playbook
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
                         default: "scroll"
+      prop :selectable_rows, type: Playbook::Props::Boolean,
+                             default: false
 
       def flatten_columns(columns)
         columns.flat_map do |col|
@@ -56,7 +58,7 @@ module Playbook
         current_data_attributes = current_depth.zero? ? { row_depth: 0 } : table_data_attributes
 
         # Additional class and data attributes needed for toggle logic
-        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading })
+        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion })
 
         if row[:children].present?
           row[:children].each do |child_row|
@@ -81,7 +83,7 @@ module Playbook
       def classname
         additional_classes = []
         additional_classes << "advanced-table-responsive-#{responsive} pinned-left" if responsive == "scroll"
-
+        additional_classes << "selectable-rows-enabled" if selectable_rows && enable_toggle_expansion == "none"
         generate_classname("pb_advanced_table_body", *additional_classes, separator: " ")
       end
 

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

@@ -1,19 +1,29 @@
 <%= pb_content_tag(:thead) do %>
   <% object.header_rows.each_with_index do |header_row, row_index| %>
     <%= pb_rails("table/table_row") do %>
+      <% if row_index == 0 && object.selectable_rows && object.enable_toggle_expansion == "none" %>
+        <%= object.render_select_all_header %>
+      <% end %>
       <% header_row.each_with_index do |cell, cell_index| %>
         <% header_id = cell[:accessor].present? ? cell[:accessor] : "header_#{row_index}_#{cell_index}" %>
         <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname(is_first_column: cell_index.zero?), ('last-header-cell' if cell[:is_last_in_group] && cell_index != 0)].compact.join(' '), sort_menu: cell[:accessor] ? cell[:sort_menu] : nil }) do %>
           <%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: "end" }) do %>
-            <% if cell_index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") && row_index === header_rows.size - 1 %>
-              <% if loading %>
-                <div class="<%= object.loading ? 'loading-toggle-icon' : '' %>"></div>
-              <% else %>
-                <button
-                  class="gray-icon toggle-all-icon"
-                  onclick="expandAllRows(this); event.preventDefault();">
-                  <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
-                </button>
+            <% if cell_index.zero? && row_index === header_rows.size - 1 %>
+              <% if object.selectable_rows && object.enable_toggle_expansion != "none" %>
+                <%= pb_rails("flex/flex_item", props: { padding_right: "xs" }) do %>
+                  <%= object.render_select_all_checkbox %>
+                <% end %>
+              <% end %>
+              <% if object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all" %>
+                <% if loading %>
+                  <div class="<%= object.loading ? 'loading-toggle-icon' : '' %>"></div>
+                <% else %>
+                  <button
+                    class="gray-icon toggle-all-icon"
+                    onclick="expandAllRows(this); event.preventDefault();">
+                    <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
+                  </button>
+                <% end %>
               <% end %>
             <% end %>
             <%= cell[:label] %>

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

@@ -13,17 +13,20 @@ module Playbook
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
                         default: "scroll"
+      prop :selectable_rows, type: Playbook::Props::Boolean,
+                             default: false
 
       def classname
         additional_classes = []
         additional_classes << "advanced-table-responsive-#{responsive} pinned-left" if responsive == "scroll"
+        additional_classes << "selectable-rows-enabled" if selectable_rows && enable_toggle_expansion == "none"
 
         generate_classname("pb_advanced_table_header", "pb_table_thead", *additional_classes, separator: " ")
       end
 
       def th_classname(is_first_column: false)
         additional_classes = []
-        additional_classes << "pinned-left" if is_first_column && responsive == "scroll"
+        additional_classes << "pinned-left" if is_first_column && responsive == "scroll" && !selectable_rows
 
         generate_classname("table-header-cells", *additional_classes, separator: " ")
       end
@@ -38,6 +41,40 @@ module Playbook
         rows
       end
 
+      # Selectable Rows No Subrows - checkboxes in their own first cell
+      def render_select_all_header
+        if selectable_rows
+          additional_classes = []
+          additional_classes << "table-header-cells-custom"
+          additional_classes << "checkbox-cell-header"
+          additional_classes << "pinned-left" if responsive == "scroll"
+          pb_rails("table/table_header", props: {
+                     classname: additional_classes.join(" "),
+                   }) do
+            pb_rails("checkbox", props: {
+                       id: "select-all-rows",
+                       name: "select-all-rows",
+                       data: {
+                         action: "click->pb-advanced-table#toggleAllRowSelection",
+                       },
+                     })
+          end
+        end
+      end
+
+      # Selectable Rows w/ Subrows - checkboxes part of toggleable first cell
+      def render_select_all_checkbox
+        if selectable_rows
+          pb_rails("checkbox", props: {
+                     id: "select-all-rows",
+                     name: "select-all-rows",
+                     data: {
+                       action: "click->pb-advanced-table#toggleAllRowSelection",
+                     },
+                   })
+        end
+      end
+
     private
 
       def compute_max_depth(columns)

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

@@ -1,48 +1,60 @@
 <%= pb_content_tag(:tr) do %>
-        <% object.column_definitions.each_with_index do |column, index| %>
-            <% next unless column[:accessor].present? %>
-            <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
-                <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", classname: object.loading ? "loading-cell" : "" }) do %>
-                    <% if collapsible_trail && index.zero? %>
-                        <% (1..depth).each do |i| %>
-                            <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>
-                            <% left_offset = i * 1.0 + additional_offset %>
-                            <div class="collapsible-trail" style="left: <%= left_offset %>em"></div>
-                        <% end %>
+    <% has_separate_checkbox = object.selectable_rows && object.enable_toggle_expansion == "none" %>
+    <% if has_separate_checkbox %>
+        <%= object.render_checkbox_cell %>
+    <% end %>
+    <% object.column_definitions.each_with_index do |column, index| %>
+        <% next unless column[:accessor].present? %>
+        <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
+            <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", classname: object.loading ? "loading-cell" : "" }) do %>
+                <% if collapsible_trail && index.zero? %>
+                    <% (1..depth).each do |i| %>
+                        <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>
+                        <% left_offset = i * 1.0 + additional_offset %>
+                        <div class="collapsible-trail" style="left: <%= left_offset %>em"></div>
                     <% end %>
+                <% end %>
 
-                    <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.id}_#{object.row.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>
+                <div style="padding-left: <%= depth * 1.25 %>em">
+                    <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
+                        <% if index.zero? %>
+                            <% has_integrated_checkbox = object.selectable_rows && object.enable_toggle_expansion != "none" %>
+                            <% if has_integrated_checkbox %>
+                                <%= pb_rails("flex/flex_item", props: { padding_right: "xs" }) do %>
+                                    <%= object.render_row_checkbox %>
+                                <% end %>
                             <% end %>
-                            <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && object.row[:children].present? ? "none" : "xs"}) do %>
-                                <% if column[:custom_renderer].present? %>
-                                    <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
-                                <% elsif index.zero? %>
-                                    <% if object.depth.zero? %>
-                                        <%= object.row[column[:accessor].to_sym] %>
-                                    <% else %>
-                                        <% object.depth_accessors.each_with_index do |item, accessor_index| %>
-                                            <% if object.depth - 1 == accessor_index %>
-                                                <% key = item.to_sym %>
-                                                <%= object.row[key] %>
-                                            <% end %>
+                            <% if object.row[:children].present? %>
+                                <button
+                                    id="<%= "#{object.id}_#{object.row.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>
+                            <% end %>
+                        <% end %>
+                        <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && (object.row[:children].present? || has_integrated_checkbox) ? "none" : "xs"}) do %>       
+                            <% if column[:custom_renderer].present? %>
+                                <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
+                            <% elsif index.zero? %>
+                                <% if object.depth.zero? %>
+                                    <%= object.row[column[:accessor].to_sym] %>
+                                <% else %>
+                                    <% object.depth_accessors.each_with_index do |item, accessor_index| %>
+                                        <% if object.depth - 1 == accessor_index %>
+                                            <% key = item.to_sym %>
+                                            <%= object.row[key] %>
                                         <% end %>
                                     <% end %>
-                                <% else %>
-                                    <%= object.row[column[:accessor].to_sym] %>
                                 <% end %>
+                            <% else %>
+                                <%= object.row[column[:accessor].to_sym] %>
                             <% end %>
                         <% end %>
-                    </div>
-                <% end %>
+                    <% end %>
+                </div>
             <% end %>
         <% end %>
-<% end %>
+    <% end %>
+<% end %>

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

@@ -20,6 +20,13 @@ module Playbook
                         default: "scroll"
       prop :is_pinned_left, type: Playbook::Props::Boolean,
                             default: false
+      prop :selectable_rows, type: Playbook::Props::Boolean,
+                             default: false
+      prop :row_id, type: Playbook::Props::String,
+                    default: ""
+      prop :enable_toggle_expansion, type: Playbook::Props::Enum,
+                                     values: %w[all header none],
+                                     default: "header"
 
       def data
         Hash(prop(:data)).merge(table_data_attributes)
@@ -42,6 +49,38 @@ module Playbook
         end.compact
       end
 
+      # Selectable Rows No Subrows - checkboxes in their own first cell
+      def render_checkbox_cell
+        if selectable_rows
+          pb_rails("table/table_cell", props: {
+                     classname: "checkbox-cell",
+                   }) do
+            pb_rails("checkbox", props: {
+                       id: "select-row-#{row_id || row.object_id}",
+                       name: "select-row-#{row_id || row.object_id}",
+                       data: {
+                         row_id: row_id || row.object_id.to_s,
+                         action: "click->pb-advanced-table#toggleRowSelection",
+                       },
+                     })
+          end
+        end
+      end
+
+      # Selectable Rows w/ Subrows - checkboxes part of toggleable first cell
+      def render_row_checkbox
+        if selectable_rows
+          pb_rails("checkbox", props: {
+                     id: "select-row-#{row_id || row.object_id}",
+                     name: "select-row-#{row_id || row.object_id}",
+                     data: {
+                       row_id: row_id || row.object_id.to_s,
+                       action: "click->pb-advanced-table#toggleRowSelection",
+                     },
+                   })
+        end
+      end
+
     private
 
       def custom_renderer_value(column, index)

data/app/pb_kits/playbook/pb_background/_background.scss

@@ -55,4 +55,30 @@ $background_colors: map-merge($additional_colors, $merge_kits7);
       transition: 700ms ease-in;
     }
   }
+
+  &.imageoverlay {
+    position: relative;
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+      background-color: inherit;
+    }
+
+    * {
+      position: relative;
+      z-index: 2;
+    }
+  }
+
+  @each $key, $value in $opacity {
+    &.imageoverlay[imageoverlay="#{$key}"]::before {
+      opacity: $value;
+    }
+  }
 }

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -25,6 +25,7 @@ type BackgroundProps = {
   backgroundPosition?: ResponsiveProp<string> | string,
   backgroundRepeat?: ResponsiveProp<BackgroundRepeat> | BackgroundRepeat,
   imageUrl?: ResponsiveProp<string> | string,
+  imageOverlay?: 'opacity_1' | 'opacity_2' | 'opacity_3' | 'opacity_4' | 'opacity_5' | 'opacity_6' | 'opacity_7' | 'opacity_8' | 'opacity_9' | 'opacity_10',
   children?: React.ReactChild[] | React.ReactNode,
   className?: string,
   customColor?: string,
@@ -86,8 +87,9 @@ const Background = (props: BackgroundProps): React.ReactElement => {
     imageUrl = '',
     tag = 'div',
     transition = '',
+    imageOverlay,
   } = props
-  
+
   const [responsiveProps, setResponsiveProps] = useState({
     backgroundSize: getResponsiveValue(backgroundSize),
     backgroundPosition: getResponsiveValue(backgroundPosition),
@@ -132,7 +134,8 @@ const Background = (props: BackgroundProps): React.ReactElement => {
       [`pb_background_color_${resBackgroundColor}`]: resBackgroundColor && !customColor,
       [`pb_background_custom_color`]: !!customColor,
     },
-    className
+    className,
+    imageOverlay ? "imageoverlay" : ""
   );
 
   const backgroundStyle = {
@@ -155,7 +158,7 @@ const Background = (props: BackgroundProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
-  
+
   return (
     <Tag
         {...ariaProps}
@@ -164,11 +167,12 @@ const Background = (props: BackgroundProps): React.ReactElement => {
         alt={alt}
         className={classes}
         id={id}
+        imageOverlay={imageOverlay}
         style={combinedStyles}
     >
       {children}
     </Tag>
-  
+
   )
 }
 

data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import Background from "../../pb_background/_background"
+import Flex from "../../pb_flex/_flex"
+import FlexItem from "../../pb_flex/_flex_item"
+import Title from "../../pb_title/_title"
+
+const BackgroundOverlay = (props) => {
+  return (
+    <Background
+        alt="colorful background"
+        className="background lazyload"
+        imageOverlay="opacity_6"
+        imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
+        {...props}
+        backgroundColor="light"
+      >
+        <Flex
+            orientation="column"
+            vertical="center"
+            {...props}
+        >
+          <FlexItem>
+            <Title
+                dark
+                padding="lg"
+                size={1}
+                text="Background Kit Image"
+                {...props}
+            />
+          </FlexItem>
+        </Flex>
+      </Background>
+  )
+}
+
+export default BackgroundOverlay

data/app/pb_kits/playbook/pb_background/docs/_background_overlay.md

@@ -0,0 +1 @@
+An overlay can be added to the background image by setting the `imageOverlay` prop and adding a `backgroundColor`. The `imageOverlay` prop can be set to any opacity ranging from `opacity_1` to `opacity_10`.

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

@@ -11,6 +11,7 @@ examples:
   - background_size: Size
 
   react:
+  - background_overlay: Overlay
   - background_light: Light
   - background_white: White
   - background_gradient: Gradient

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

@@ -6,3 +6,4 @@ export { default as BackgroundStatus } from './_background_status.jsx'
 export { default as BackgroundStatusSubtle } from './_background_status_subtle.jsx'
 export { default as BackgroundCategory } from './_background_category.jsx'
 export { default as BackgroundSize } from './_background_size.jsx'
+export { default as BackgroundOverlay } from './_background_overlay.jsx'

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

@@ -63,11 +63,6 @@ $pb_button_sizes: (
     color: $text_lt_lighter;
   }
 
-  // Disabled =================
-  &[class*=_disabled]  {
-    @include pb_button_disabled;
-  }
-
   // Block ====================
   &[class*=_block]  {
     @include pb_button_block;
@@ -83,6 +78,11 @@ $pb_button_sizes: (
     @include pb_button_danger;
   }
 
+  // Disabled =================
+  &[class*=_disabled]  {
+    @include pb_button_disabled;
+  }
+
   // Dark Variants =============
   &.dark  {
     &[class*=_primary]  {

data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap

@@ -27,13 +27,20 @@ exports[`html structure is correct 1`] = `
               class="icon_wrapper"
               style="vertical-align: middle; color: rgb(193, 205, 214);"
             >
-              <i
-                class="pb_icon_kit far fa-lg fa-fw fa-lg fa-chevron-down"
-              />
-              <span
-                aria-label="chevron-down icon"
-                hidden=""
-              />
+              <svg
+                class="pb_custom_icon svg-inline--fa svg_lg svg_fw"
+                color="currentColor"
+                fill="none"
+                height="auto"
+                viewBox="0 0 30 25"
+                width="auto"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M14.203 19.297l-9-9c-.469-.422-.469-1.125 0-1.594.422-.422 1.125-.422 1.594 0L15 16.953l8.203-8.203c.422-.469 1.125-.469 1.594 0a1.103 1.103 0 010 1.547l-9.047 9a1.027 1.027 0 01-1.547 0z"
+                  fill="#242B42"
+                />
+              </svg>
             </div>
           </div>
         </div>

data/app/pb_kits/playbook/pb_contact/contact.test.js

@@ -75,15 +75,15 @@ test('returns correct icon', () => {
     </>
   )
 
-  expect(screen.getByTestId('test-cell').querySelector('.pb_icon_kit')).toHaveClass('fa-mobile')
-  expect(screen.getByTestId('test-home').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
+  expect(screen.getByTestId('test-cell').querySelector('.pb_custom_icon')).toBeInTheDocument()
+  expect(screen.getByTestId('test-home').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-work').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-office')
-  expect(screen.getByTestId('test-work-cell').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-laptop')
-  expect(screen.getByTestId('test-email').querySelector('.pb_custom_icon')).toHaveClass('envelope')
-  expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-slash')
-  expect(screen.getByTestId('test-wrong-type').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
+  expect(screen.getByTestId('test-work-cell').querySelector('.pb_custom_icon')).toBeInTheDocument()
+  expect(screen.getByTestId('test-email').querySelector('.pb_custom_icon')).toBeInTheDocument()
+  expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_custom_icon')).toBeInTheDocument()
+  expect(screen.getByTestId('test-wrong-type').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-extension').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-plus')
-  expect(screen.getByTestId('test-empty').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
+  expect(screen.getByTestId('test-empty').querySelector('.pb_custom_icon')).toBeInTheDocument()
 })
 
 test("not compliant values return null in phone related contact types", () => {