playbook_ui 14.14.0.pre.rc.3 → 14.14.0.pre.rc.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0a2659b0154123970bd8603b86d5d89e44d148d198b1675eca357f394bbdf404
-  data.tar.gz: b34b5df725809a814312250861cd58f5713b433aabd2dc82d0c16d5261b6aca6
+  metadata.gz: 9e26a89c343fcb92a9f78a01c6984bb27982ce2cbdb5816220abc4fef6c25f03
+  data.tar.gz: 2cdde195ecb34d8245bef7a748e2ed5cd445f76ea49bb053bcb1f5668b292c31
 SHA512:
-  metadata.gz: ef0c56bcfe1ebb41fe01ebad3ae9270673a12a6402e8e1cc91811eb3356a3c8ccc08fad0bd73825b6176cd649860556634c70319f575bd3a866fe085ada89017
-  data.tar.gz: 1a0d8cd29a1cb2fb51b346c37bcdeda59676762bebf9edb5759e950542d9586611d5f8c578f4e135494cb1ceb1b0fa3cea554102f26e40eaeab1049fe9e08a84
+  metadata.gz: 9a528f6a6e71344e4819d491570747ca12e586705ee8eee6add394907a4769e5efd88222f5ea626f4ca1327e36ccd5f5b0d6cfd6d8f16082fe5c0b575855d40e
+  data.tar.gz: a73afe78046b88e1fdd0fb7846fce84ae7a884a4f225e5ffb254526b3b3a0d179d34403ab97a7f5125152ae7772c21bb257c85b5c19ea24a3f4f7fa7bde6642b

data/app/pb_kits/playbook/pb_bar_graph/BarGraphStyles.scss

@@ -0,0 +1,58 @@
+@import "../tokens/colors";
+@import "../tokens/typography";
+@import url("https://code.highcharts.com/css/highcharts.css");
+
+:root {
+    --highcharts-color-0: #{$data_1};
+    --highcharts-color-1: #{$data_2};
+    --highcharts-color-2: #{$data_3};
+    --highcharts-color-3: #{$data_4};
+    --highcharts-color-4: #{$data_5};
+    --highcharts-color-5: #{$data_6};
+    --highcharts-color-6: #{$data_7};
+    --highcharts-color-7: #{$data_8};
+}
+
+.highcharts-title {
+    font-family: $font_family_base;
+    font-weight: $bold;
+    font-size: $heading_3;
+    color: $text_lt_default;
+    fill: $text_lt_default;
+}
+
+.highcharts-subtitle {
+    font-family: $font_family_base;
+    color: $text_lt_light;
+    fill: $text_lt_light;
+    font-weight: $regular;
+    font-size: $text_base;
+}
+
+.highcharts-yaxis > .highcharts-axis-title {
+    color: $text_lt_lighter;
+    fill: $text_lt_lighter;
+    font-family: $font_family_base;
+    font-weight: $bold;
+    font-size: $text_smaller;
+}
+
+.highcharts-axis-labels {
+    font-family: $font_family_base;
+    color: $text_lt_lighter;
+    fill: $text_lt_lighter;
+    font-weight: $bold;
+    font-size: $text_smaller;
+}
+
+.highcharts-grid-line {
+    stroke: $border_light;
+}
+
+.highcharts-point {
+  border-radius: 3px;
+}
+
+.highcharts-axis-line {
+  stroke: $border_light;
+}

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+
+import "../BarGraphStyles.scss";
+// Your path might look more like this
+//import "playbook-ui/dist/pb_bar_graph/BarGraphStyles.scss";
+
+const columnChartData = [
+  {
+    name: "Installation",
+    data: [1475, 200, 3000, 654, 656],
+  },
+  {
+    name: "Manufacturing",
+    data: [4434, 524, 2320, 440, 500],
+  },
+  {
+    name: "Sales & Distribution",
+    data: [3387, 743, 1344, 434, 440],
+  },
+  {
+    name: "Project Development",
+    data: [3227, 878, 999, 780, 1000],
+  },
+  {
+    name: "Other",
+    data: [1111, 677, 3245, 500, 200],
+  },
+];
+
+const columnOptions = {
+  chart: {
+    type: "column",
+  },
+  series: columnChartData,
+  title: {
+    text: "Solar Employment Growth by Sector, 2010-2016",
+  },
+  subtitle: {
+    text: "Source: thesolarfoundation.com",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: {
+    min: 0,
+    title: {
+      text: "Number of Employees",
+    },
+  },
+  legend: { enabled: false },
+  credits: { enabled: false },
+};
+
+const BarGraphPbStyles = () => (
+  <div>
+    <HighchartsReact highcharts={Highcharts}
+        options={columnOptions}
+    />
+  </div>
+)
+
+export default BarGraphPbStyles

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md

@@ -0,0 +1 @@
+You don't need to use the bar graph kit to apply the styles to your Highcharts bar graph. Just import the BarGraphStyles.scss to your component and the styles will apply automatically.  

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

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

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

@@ -10,3 +10,4 @@ export { default as BarGraphStacked } from './_bar_graph_stacked.jsx'
 export { default as BarGraphNegativeNumbers } from './_bar_graph_negative_numbers.jsx'
 export { default as BarGraphSecondaryYAxis } from './_bar_graph_secondary_y_axis.jsx'
 export { default as BarGraphHorizontal } from './_bar_graph_horizontal.jsx'
+export { default as BarGraphPbStyles } from './_bar_graph_pb_styles.jsx'

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx

@@ -16,7 +16,7 @@ const TableWithCollapsible = (props) => {
     );
   };
 
-return (
+  return (
       <Table
           size="sm"
           {...props}

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.html.erb

@@ -0,0 +1,51 @@
+<% content = capture do %>
+    <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
+        <%= pb_rails("body", props: { text: "Nested content inside a Table Row" }) %>
+    <% end %>
+<% end %>
+
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+        <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
+        <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
+        <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
+        <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
+        <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
+        <%= pb_rails("table/table_header", props: { text: ""}) %>
+       <% end %>
+  <% end %>
+  <%= pb_rails("table/table_body") do %>
+      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-1", id: "5" }) do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text_align: "right", id: "cell-1", cursor: "pointer" }) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+     <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-2", id: "6" }) do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text_align: "right", id: "cell-2", cursor: "pointer" }) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+    <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-3", id: "7" }) do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text_align: "right", id: "cell-3", cursor: "pointer" }) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+  <% end %>
+<% end %>
+  

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_rails.md

@@ -0,0 +1,2 @@
+When using the `collapsible` prop, the default functionality is that the entire Row will be clickable to toggle the Row. To limit the click event to a specific Table Cell, you can use the `toggle_cell_id` prop to pass in the id of the Cell you want to use as the trigger.
+__NOTE__: `toggle_cell_id` and the `id` on the Cell you want to use as the trigger MUST be the same. Please also be aware that you will need to pass in an `id` to any Table Rows you want to be collapsible. Make sure every `id` is unique if you are using multipe collapsibles.

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

@@ -31,6 +31,7 @@ examples:
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
     - table_outer_padding: Outer Padding
     - table_with_collapsible: Table with Collapsible
+    - table_with_collapsible_with_custom_click: Table with Collapsible with Custom Click
     - table_with_collapsible_with_custom_content_rails: Table with Collapsible with Custom Content
     - table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
     - table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table

data/app/pb_kits/playbook/pb_table/index.ts

@@ -2,6 +2,7 @@ import PbEnhancedElement from '../pb_enhanced_element'
 
 const TABLE_WRAPPER_SELECTOR = "[data-pb-table-wrapper]";
 const TABLE_COLLAPSIBLE_WRAPPER_SELECTOR = "[data-pb-table-collapsible-wrapper]";
+const TABLE_COLLAPSIBLE_CELL_SELECTOR = "[data-pb-table-collapsible-cell-id]";
 
 export default class PbTable extends PbEnhancedElement {
   stickyLeftColumns: string[] = [];
@@ -158,18 +159,49 @@ export default class PbTable extends PbEnhancedElement {
   }
 
   handleCollapsibleClick() {
+    const cells = this.element.querySelectorAll(TABLE_COLLAPSIBLE_CELL_SELECTOR);
     const collapsibleElements = this.element.querySelectorAll(TABLE_COLLAPSIBLE_WRAPPER_SELECTOR);
-    collapsibleElements.forEach((collapsibleElement) => {
-      collapsibleElement.addEventListener('click', (event) => {
-        document.dispatchEvent(new CustomEvent(`collapsed-toggle${(event.currentTarget as HTMLElement).id}`))
-
-        const toggleElements = this.element.querySelectorAll(`.collapsible_border_toggle${(event.currentTarget as HTMLElement).id}`);
-        toggleElements.forEach(element => {
-          element.classList.toggle('no-border');
-          element.classList.toggle('border-active');
+
+    if (cells.length > 0) {
+      cells.forEach((cell) => {
+        const cellId = (cell as HTMLElement).dataset.pbTableCollapsibleCellId;
+
+        Array.from(cell.children).forEach((child) => {
+          if (child.id === cellId) {
+            Array.from(child.children).forEach((svgChild) => {
+              svgChild.id = cellId; // Assign cellId to SVG child
+              Array.from(svgChild.children).forEach((pathChild) => {
+                pathChild.id = cellId; // Assign cellId to path child
+              });
+            });
+          }
+        });
+        cell.addEventListener('click', (event) => {
+          if ((event.target as HTMLElement).id) {
+            document.dispatchEvent(new CustomEvent(`collapsed-toggle${(event.currentTarget as HTMLElement).id}`));
+
+            const toggleElements = this.element.querySelectorAll(`.collapsible_border_toggle${(event.currentTarget as HTMLElement).id}`);
+            toggleElements.forEach((element) => {
+              element.classList.toggle('no-border');
+              element.classList.toggle('border-active');
+            });
+          }
         });
+      });
+
+    } else {
+      collapsibleElements.forEach((collapsibleElement) => {
+        collapsibleElement.addEventListener('click', (event) => {
+          document.dispatchEvent(new CustomEvent(`collapsed-toggle${(event.currentTarget as HTMLElement).id}`))
+
+          const toggleElements = this.element.querySelectorAll(`.collapsible_border_toggle${(event.currentTarget as HTMLElement).id}`);
+          toggleElements.forEach(element => {
+            element.classList.toggle('no-border');
+            element.classList.toggle('border-active');
+          });
+        })
       })
-    })
+    }
   }
 
   handleCollapsibleRow() {

data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss

@@ -37,6 +37,10 @@
     cursor: pointer;
   }
 
+  .collapsible_cell {
+    cursor: default;
+  }
+
   .no-border {
     border-bottom: none !important;
   }

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

@@ -5,6 +5,7 @@
     data: object.data.merge(id: object.id),  
     id: object.id,
     'data-pb-table-collapsible-wrapper' => true,
+    'data-pb-table-collapsible-cell-id' => object.toggle_cell_id,
     **combined_html_options) do %>
     <%= content.presence %>
   <% end %>

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

@@ -13,13 +13,14 @@ module Playbook
       prop :collapsible_content
       prop :collapsible_side_highlight, type: Playbook::Props::Boolean,
                                         default: true
+      prop :toggle_cell_id, type: Playbook::Props::String
       prop :draggable_item, type: Playbook::Props::Boolean,
                             default: false
       prop :drag_id, type: Playbook::Props::String,
                      default: nil
 
       def classname
-        generate_classname("pb_table_row_kit", side_highlight_class) + tag_class
+        generate_classname("pb_table_row_kit", side_highlight_class) + tag_class + collapsible_cell_class
       end
 
       def side_highlight_class
@@ -29,6 +30,14 @@ module Playbook
       def tag_class
         " pb_table_tr"
       end
+
+      def collapsible_cell_class
+        if toggle_cell_id
+          " collapsible_cell"
+        else
+          ""
+        end
+      end
     end
   end
 end