playbook_ui 14.14.0.pre.rc.3 → 14.14.0.pre.rc.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0a2659b0154123970bd8603b86d5d89e44d148d198b1675eca357f394bbdf404
-  data.tar.gz: b34b5df725809a814312250861cd58f5713b433aabd2dc82d0c16d5261b6aca6
+  metadata.gz: 5a78bc366f1f7086a31c4095eb10e5c5ee0be08a56c68327597848a0d7a9236a
+  data.tar.gz: 83701efa1b7889f3359c4e73dde11ce3f2a48d5ec39e42d5c550f5c6299aeb38
 SHA512:
-  metadata.gz: ef0c56bcfe1ebb41fe01ebad3ae9270673a12a6402e8e1cc91811eb3356a3c8ccc08fad0bd73825b6176cd649860556634c70319f575bd3a866fe085ada89017
-  data.tar.gz: 1a0d8cd29a1cb2fb51b346c37bcdeda59676762bebf9edb5759e950542d9586611d5f8c578f4e135494cb1ceb1b0fa3cea554102f26e40eaeab1049fe9e08a84
+  metadata.gz: a51f1c37116779e420d0a30abe9aa0617d611103fdb5bf1e44aa3639be7e4d09ab61d71ea2e29173dc6a144110a262eaf7a27370c110db5926d24b80a20d870f
+  data.tar.gz: 4dceab2450821e9c3b12a791d4b919d747341b7b73fca55b83ff18fa6c460a0e39204a0d7bd3757b2bd53b46ad37af9a5624222e897e0ffe1f2f5d12938b9c4d

data/app/pb_kits/playbook/_playbook.scss

@@ -1,7 +1,6 @@
 
 @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_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_progress_pills/_progress_pills.scss

@@ -3,7 +3,8 @@
 @import "../tokens/border_radius";
 
 @mixin pb_progress_pill {
-  width: 45px;
+  width: 100%;
+  max-width: 45px;
   height: 4px;
   border-radius: $border_rad_light;
   margin-right: $space_xs;
@@ -27,6 +28,10 @@
   [class*=pb_progress_pill] {
     @include pb_progress_pill;
 
+    &.full_width_pill {
+      max-width: none;
+    }
+
     &[class*=_inactive] {
       background-color: $border_light;
       &.dark {

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx

@@ -13,6 +13,7 @@ type ProgressPillsProps = {
   className?: string,
   data?: { [key: string]: string },
   dark?: boolean,
+  fullWidthPill?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   steps?: number,
@@ -20,19 +21,19 @@ type ProgressPillsProps = {
   value?: string,
 }
 
-const ProgressPill = ({ active, dark, steps: step }: ProgressPillsProps) => (
+const ProgressPill = ({ active, dark, steps: step, fullWidthPill }: ProgressPillsProps) => (
   <div
       className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${dark ? ' dark' : ''
-      }`}
+      }${fullWidthPill ? ' full_width_pill' : ''}`}
       key={step}
   />
 )
 
-const showSteps = (steps: number, active: number, dark: boolean) => {
+const showSteps = (steps: number, active: number, dark: boolean, fullWidthPill: boolean) => {
   const items = []
 
   for (let step = 1; step <= steps; step++) {
-    items.push(ProgressPill({ steps: step, active, dark }))
+    items.push(ProgressPill({ steps: step, active, dark, fullWidthPill }))
   }
 
   return items
@@ -44,6 +45,7 @@ const ProgressPills = (props: ProgressPillsProps) => {
     aria = { hidden: 'true' },
     className,
     data = {},
+    fullWidthPill = false,
     htmlOptions = {},
     id,
     steps = 3,
@@ -79,7 +81,7 @@ const ProgressPills = (props: ProgressPillsProps) => {
               text={value}
           />
         </div>}
-      <div className="progress_pills">{showSteps(steps, active, dark)}</div>
+      <div className="progress_pills">{showSteps(steps, active, dark, fullWidthPill)}</div>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.html.erb

@@ -1 +1,2 @@
 <%= pb_rails("progress_pills", props: { aria: { label: "2 out of 3 steps complete" }, steps: 3, active: 2 }) %>
+<%= pb_rails("progress_pills", props: { aria: { label: "9 out of 18 steps complete" }, steps: 18, active: 9, margin_top: "md" }) %>

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx

@@ -10,6 +10,13 @@ const ProgressPillsDefault = (props) => {
                 steps={3}
                 {...props}
             />
+            <ProgressPills
+                active={9}
+                aria={{ label: '9 out of 18 steps complete' }}
+                marginTop="md"
+                steps={18}
+                {...props}
+            />
         </>
     )
 }

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.md

@@ -0,0 +1 @@
+Progress pills start at `45px` wide if the container allows, but will shrink down to `1px` as the container gets smaller. Resize this window to see each pill shrink.

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("progress_pills", props: { aria: { label: "2 out of 5 steps complete" }, steps: 5, active: 2, full_width_pill: true }) %>

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import ProgressPills from '../_progress_pills'
+
+const ProgressPillsFullWidth = (props) => {
+    return (
+        <>
+            <ProgressPills
+                active={2}
+                aria={{ label: '2 out of 5 steps complete' }}
+                fullWidthPill
+                steps={5}
+                {...props}
+            />
+        </>
+    )
+}
+
+export default ProgressPillsFullWidth

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_rails.md

@@ -0,0 +1 @@
+Pass `full_width_pill: true` to the Progress Pill kit to get true 100% full width pills. The kit will take up the full width of the container that it is in.

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_react.md

@@ -0,0 +1 @@
+Pass `fullWidthPill` to the Progress Pill kit to get true 100% full width pills. The kit will take up the full width of the container that it is in.

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

@@ -3,9 +3,11 @@ examples:
   rails:
   - progress_pills_default: Default
   - progress_pills_status: Status
+  - progress_pills_full_width: Full Container Width
 
 
 
   react:
   - progress_pills_default: Default
   - progress_pills_status: Status
+  - progress_pills_full_width: Full Container Width

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

@@ -1,2 +1,3 @@
 export { default as ProgressPillsDefault } from './_progress_pills_default.jsx'
 export { default as ProgressPillsStatus } from './_progress_pills_status.jsx'
+export { default as ProgressPillsFullWidth } from './_progress_pills_full_width.jsx'

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb

@@ -14,7 +14,7 @@
 
     <div class="progress_pills">
       <% object.each_step do |step| %>
-        <span class="pb_progress_pill<%= object.active_step(step) %><%= object.dark_pill %>"></span>
+        <span class="pb_progress_pill<%= object.active_step(step) %><%= object.make_full_width %><%= object.dark_pill %>"></span>
       <% end %>
     </div>
 

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.rb

@@ -9,6 +9,8 @@ module Playbook
       prop :steps, type: Playbook::Props::Number,
                    default: 3
       prop :title
+      prop :full_width_pill, type: Playbook::Props::Boolean,
+                             default: false
 
       def classname
         generate_classname("pb_progress_pills_kit")
@@ -26,6 +28,10 @@ module Playbook
         step <= active ? "_active" : "_inactive"
       end
 
+      def make_full_width
+        full_width_pill ? " full_width_pill" : nil
+      end
+
       def aria_attributes
         return aria if aria.present?
 

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.test.js

@@ -23,6 +23,20 @@ const ProgressPillsDefault = () => {
     )
 }
 
+const ProgressPillsFullWidth = () => {
+    return (
+        <ProgressPills
+            active={2}
+            aria={{ label: ariaLabel }}
+            data={{ testid: testId }}
+            fullWidthPill
+            steps={3}
+            title={title}
+            value={value}
+        />
+    )
+}
+
 test('should pass data prop', () => {
     render(<ProgressPillsDefault />)
     const kit = screen.getByTestId(testId)
@@ -51,4 +65,15 @@ test('should render value', () => {
     render(<ProgressPillsDefault />)
     const kit = screen.getByText(value)
     expect(kit).toBeInTheDocument()
-})
+})
+
+test('should apply fullWidthPill styling when fullWidthPill prop is true', () => {
+    render(<ProgressPillsFullWidth />)
+    const container = screen.getByTestId(testId)
+    const pillElements = container.querySelectorAll('.full_width_pill')
+  
+    expect(pillElements.length).toBeGreaterThan(0)
+    pillElements.forEach((pill) => {
+        expect(pill).toHaveClass('full_width_pill')
+    })
+})

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