playbook_ui 14.23.0.pre.alpha.PLAY2205atborderbug9085 → 14.23.0.pre.alpha.PLAY2243customindeterminatemaincheckboxlabels9046

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7910284d54e19a7de3b5dc301a6c329aa75442f647dee38abf49b2e08ed7c9e8
-  data.tar.gz: e4dc343888e79edcf515894e20dbdd17b32a278e190be0b54bd91ed4e52d826e
+  metadata.gz: fbf9a417a4f6e2dcdf093c538efc5d3be6aa9a5bfdeaef160a8dc27e10bc6071
+  data.tar.gz: 90c1022791a95512530ab08978a544b5cd1bd716a4ecd70a5dd6b480e853d6f7
 SHA512:
-  metadata.gz: 1cbe316f1055a872f415b745323b15423193c3ebed6d778429631886657eb3b81867e9d8d39d8100a897efbf0e79fd89684067797464c75b216dccefb008b681
-  data.tar.gz: 06faadeca41137228c2271230f914540add4169d9f9003ca460918a60bd3951206f552b657012efb1e4c6fd54f67d54a993004ae7be9574604f11343cf88b205
+  metadata.gz: 983c01db202cb88494f13e2a1c7593d7cf01c6d655ff89a78ca1f085f78bd5a79a393c05f1a8a05d2e024999e4bcc8e4843d0f7004649d3f1cb05a72228cd641
+  data.tar.gz: 44eda0c8b056f6998518bf9bde3b3bb5e721df6cb47739b17f1053464a7d594352c26d3005e0b0d2a3e3209ed02ae2f4287233822919a43d9aef256548c3f768

data/app/pb_kits/playbook/pb_advanced_table/Components/TableActionBar.tsx

@@ -112,7 +112,7 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
             paddingBottom="xs"
             text={node.label}
         />
-        <Flex flexDirection="column"
+        <Flex flexDirection="column" 
             paddingLeft="lg"
         >
           {node?.children?.map((child) =>
@@ -141,8 +141,8 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
     setShowPopover(!shouldClose)
 
   const popoverReference = (
-    <Tooltip
-        placement="top"
+    <Tooltip 
+        placement="top" 
         text="Column Configuration"
     >
       <div onClick={togglePopover}>
@@ -170,8 +170,8 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
       >
         {type === "row-selection" ? (
           <>
-            <Caption color="light"
-                paddingLeft="xs"
+            <Caption color="light" 
+                paddingLeft="xs" 
                 size="xs"
             >
               {selectedCount} Selected
@@ -188,15 +188,15 @@ const TableActionBar: React.FC<TableActionBarProps> = ({
               zIndex={3}
           >
             <>
-              <Caption
-                  paddingY="sm"
+              <Caption 
+                  paddingY="sm" 
                   text="Columns Config"
-                  textAlign="center"
+                  textAlign="center" 
               />
               <SectionSeparator paddingBottom="xs" />
               {tree.map((node: VisibilityNode) => (
-                <Flex cursor="pointer"
-                    flexDirection="column"
+                <Flex cursor="pointer" 
+                    flexDirection="column" 
                     key={node.id}
                     paddingX="xs"
                 >

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

@@ -124,65 +124,13 @@
       -ms-overflow-style: none !important;
       scrollbar-width: none !important;
   }
-
-  // When action bar is hidden, ensure proper border radius for header corners
-  &.hidden-action-bar {
-    .pb_advanced_table_header {
-      > tr:first-child {
-        th:first-child {
-          border-top-left-radius: 4px !important;
-        }
-        th:last-child {
-          border-top-right-radius: 4px !important;
-        }
-      }
-    }
-
-    // Also handle the case when there are multiple header rows
-    .pb_advanced_table_header {
-      > tr:first-child {
-        th:first-child,
-        .table-header-cells:first-child,
-        .table-header-cells-custom:first-child {
-          border-top-left-radius: 4px !important;
-        }
-        th:last-child,
-        .table-header-cells:last-child,
-        .table-header-cells-custom:last-child {
-          border-top-right-radius: 4px !important;
-        }
-      }
-    }
-  }
-
-  // When action bar is shown, remove border radius from header
-  .row-selection-actions-card.is-visible ~ * .pb_advanced_table_header,
-  .row-selection-actions-card.show-action-card ~ * .pb_advanced_table_header {
-    > tr:first-child {
-      th:first-child,
-      th:last-child,
-      .table-header-cells:first-child,
-      .table-header-cells:last-child,
-      .table-header-cells-custom:first-child,
-      .table-header-cells-custom:last-child {
-        border-top-left-radius: 0 !important;
-        border-top-right-radius: 0 !important;
-      }
-    }
-  }
-
+  
 
   .row-selection-actions-card {
     border-bottom-right-radius: 0px !important;
     border-bottom-left-radius: 0px !important;
     border-bottom-color: transparent;
     transition: height 300ms ease;
-
-    &.is-visible,
-    &.show-action-card {
-      border-top-left-radius: 4px !important;
-      border-top-right-radius: 4px !important;
-    }
   }
   .table-header-cells:first-child {
     min-width: 180px;

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

@@ -218,10 +218,10 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     )
 
     return (
-      <Card
+      <Card 
           borderNone
           borderRadius="none"
-          className="advanced-table-fullscreen-header"
+          className="advanced-table-fullscreen-header" 
           {...props}
       >
           <Flex justify="end">
@@ -250,10 +250,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
-
-  // Visibility flag for action bar
-  const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
-
   const classes = classnames(
     buildCss("pb_advanced_table"),
     `advanced-table-responsive-${responsive}`,
@@ -261,8 +257,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     {
       'advanced-table-fullscreen': isFullscreen,
       'advanced-table-allow-fullscreen': allowFullScreen,
-      // Add the hidden-action-bar class when action bar functionality exists but is not visible
-      'hidden-action-bar': (selectableRows || columnVisibilityControl) && !isActionBarVisible,
     },
     {'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
     columnGroupBorderColor ? `column-group-border-${columnGroupBorderColor}` : '',
@@ -276,6 +270,9 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     ? getVirtualizedContainerStyles(maxHeight)
     : {};
 
+  // Visibility flag for action bar
+  const isActionBarVisible = (selectableRows && showActionsBar && selectedRowsLength > 0) || columnVisibilityControl;
+
   // The actual Main <Table /> element
   const tableElement = (
     <Table
@@ -291,7 +288,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       ) : (
         <>
           <TableHeader />
-          <TableBody
+          <TableBody   
               isFetching={isFetching}
           />
         </>

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

@@ -12,7 +12,7 @@
       <% content.presence %>
     <% else %>
       <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar }) %>
-      <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion, row_styling: object.row_styling }) %>
+      <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion }) %>
     <% end %>
   <% end %>
 <% end %>

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

@@ -31,16 +31,9 @@ module Playbook
                      default: []
       prop :scroll_bar_none, type: Playbook::Props::Boolean,
                              default: false
-      prop :row_styling, type: Playbook::Props::Array,
-                         default: []
 
       def classname
-        additional_classes = [
-          responsive_classname,
-          max_height_classname,
-          hide_scroll_bar_class,
-          hidden_action_bar_class,
-        ]
+        additional_classes = [responsive_classname, max_height_classname, hide_scroll_bar_class]
         additional_classes << "column-group-border-#{column_group_border_color}" if column_group_border_color != "none"
         generate_classname("pb_advanced_table", *additional_classes, separator: " ")
       end
@@ -57,11 +50,6 @@ module Playbook
         scroll_bar_none ? "advanced-table-hide-scrollbar " : ""
       end
 
-      def hidden_action_bar_class
-        # Add hidden-action-bar class when action bar functionality is enabled but not currently visible
-        selectable_rows && !is_action_bar_visible ? "hidden-action-bar" : ""
-      end
-
       def selected_rows
         @selected_rows ||= []
       end

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

@@ -1,7 +1,4 @@
 function showActionBar(actionBar, selectedCount) {
-  // Get container
-  const tableContainer = actionBar.closest('.pb_advanced_table');
-
   // Show action bar directly
   actionBar.style.height = "auto";
   actionBar.style.overflow = "visible";
@@ -11,11 +8,6 @@ function showActionBar(actionBar, selectedCount) {
   actionBar.classList.remove("p_none");
   actionBar.classList.add("p_xs", "is-visible", "show-action-card");
 
-  // Remove hidden-action-bar class when action bar is shown
-  if (tableContainer) {
-    tableContainer.classList.remove("hidden-action-bar");
-  }
-
   // Update the count
   const countElement = actionBar.querySelector(".selected-count");
   if (countElement) {
@@ -24,20 +16,12 @@ function showActionBar(actionBar, selectedCount) {
 }
 
 function hideActionBar(actionBar) {
-  // Get container
-  const tableContainer = actionBar.closest('.pb_advanced_table');
-
   // Hide action bar directly
   actionBar.style.height = "0px";
   actionBar.style.overflow = "hidden";
   actionBar.style.opacity = "0";
   actionBar.classList.add("p_none");
   actionBar.classList.remove("p_xs", "is-visible", "show-action-card");
-
-  // Add hidden-action-bar class when action bar is hidden
-  if (tableContainer) {
-    tableContainer.classList.add("hidden-action-bar");
-  }
 }
 
 export function updateSelectionActionBar(table, selectedCount) {

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

@@ -1 +1 @@
-The optional `header` key/value pair can be used within `columnDefinitions` to render a custom header. This example shows an Icon and Tooltip being used but other kits can be used as well.
+The optional `header` key/value pair can be used within `columnDefinitions` to render a custom header. This example shows an Icon and Tooltip being used but other kits can be used as well. 

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

@@ -10,7 +10,6 @@ examples:
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
-  - advanced_table_with_custom_header_rails: Custom Header Cell
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   - advanced_table_no_subrows: Table with No Subrows or Expansion
@@ -19,7 +18,6 @@ examples:
   - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
-  - advanced_table_row_styling: Row Styling
   - advanced_table_column_styling_rails: Column Styling
   - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
   - advanced_table_column_border_color_rails: Column Group Border Color

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss

@@ -79,14 +79,8 @@
     left: 0;
     border-radius: unset;
     z-index: 5;
-
-    // Add proper border radius when action bar is visible
-    &.is-visible,
-    &.show-action-card {
-      border-top-left-radius: 4px !important;
-      border-top-right-radius: 4px !important;
-    }
   }
+
   .checkbox-cell {
     display: table-cell !important;
   }

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

@@ -23,8 +23,6 @@ module Playbook
                         default: "scroll"
       prop :selectable_rows, type: Playbook::Props::Boolean,
                              default: false
-      prop :row_styling, type: Playbook::Props::Array,
-                         default: []
 
       def flatten_columns(columns)
         columns.flat_map do |col|
@@ -68,7 +66,7 @@ module Playbook
                                   end
 
         # 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, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling })
+        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|

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

@@ -26,11 +26,7 @@
                 <% end %>
               <% end %>
             <% end %>
-            <% if object.has_header_renderer?(cell) %>
-              <%= raw(object.render_header(cell)) %>
-            <% else %>
-              <%= cell[:label] %>
-            <% end %>
+            <%= cell[:label] %>
           <% end %>
         <% end %>
       <% end %>

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

@@ -76,30 +76,6 @@ module Playbook
         end
       end
 
-      # Get original column definition for custom rendering
-      def find_original_column_def(accessor)
-        find_column_def_by_accessor(column_definitions, accessor)
-      end
-
-      # Check if a header cell has a custom renderer
-      def has_header_renderer?(cell)
-        return false unless cell[:accessor].present?
-
-        original_def = find_original_column_def(cell[:accessor])
-        original_def && original_def[:header].present?
-      end
-
-      # Render custom header content
-      def render_header(cell)
-        return cell[:label] unless has_header_renderer?(cell)
-
-        original_def = find_original_column_def(cell[:accessor])
-        custom_renderer = original_def[:header]
-
-        # Call the custom renderer with the cell data and label
-        custom_renderer.call(cell, cell[:label])
-      end
-
     private
 
       def compute_max_depth(columns)
@@ -172,18 +148,6 @@ module Playbook
         end
         wrapped
       end
-
-      def find_column_def_by_accessor(defs, target_accessor)
-        defs.each do |col|
-          return col if col[:accessor] == target_accessor
-
-          if col[:columns].is_a?(Array)
-            found = find_column_def_by_accessor(col[:columns], target_accessor)
-            return found if found
-          end
-        end
-        nil
-      end
     end
   end
 end

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

@@ -1,10 +1,3 @@
-<% 
-  row_style = object.row_styling.find { |style| style[:row_id].to_s == object.row_id.to_s } 
-  button_color = row_style&.[](:expand_button_color)
-  bg_color = row_style&.[](:background_color)
-  font_color = row_style&.[](:font_color)
-%>
-
 <%= pb_content_tag(:tr) do %>
     <% has_separate_checkbox = object.selectable_rows && object.enable_toggle_expansion == "none" %>
     <% if has_separate_checkbox %>
@@ -12,7 +5,7 @@
     <% end %>
     <% object.column_definitions.each_with_index do |column, index| %>
         <% next unless column[:accessor].present? %>
-        <%= pb_rails("table/table_cell", props: {  html_options: { style: { "background-color": bg_color, color: font_color } }, classname:object.td_classname(column, index)}) do %>
+        <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
             <%= pb_rails("flex", props:{ align: "center", justify: object.justify_for(column, index), classname: object.loading ? "loading-cell" : "" }) do %>
                 <% if collapsible_trail && index.zero? %>
                     <% (1..depth).each do |i| %>
@@ -35,9 +28,7 @@
                                 <button
                                     id="<%= "#{object.id}_#{object.row.object_id}" %>"
                                     class="gray-icon expand-toggle-icon"
-                                    data-advanced-table="true"
-                                    style="color: <%= button_color %>"
-                                >
+                                    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", icon: "circle-play-down", cursor: "pointer" }) %>
                                 </button>

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

@@ -27,8 +27,6 @@ module Playbook
       prop :enable_toggle_expansion, type: Playbook::Props::Enum,
                                      values: %w[all header none],
                                      default: "header"
-      prop :row_styling, type: Playbook::Props::Array,
-                         default: []
 
       def data
         Hash(prop(:data)).merge(table_data_attributes)

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

@@ -1,7 +1,7 @@
 ##### Prop
 
 `align` **Type**: String | **Values**: left | center | right (defaults to center)
-`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults to bottom)
+`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults middle)
 `layout` **Type**: String | **Values**: horizontal | vertical | proximate (defaults to horizontal)
 `x` **Type**: Number (defaults to 0)
 `y` **Type**: Number (defaults to 0)

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -6,6 +6,8 @@ module Playbook
       prop :error, type: Playbook::Props::Boolean, default: false
       prop :checked, type: Playbook::Props::Boolean, default: false
       prop :indeterminate_main, type: Playbook::Props::Boolean, default: false
+      prop :indeterminate_main_labels, type: Playbook::Props::Array,
+                                       default: []
       prop :indeterminate_parent
       prop :text
       prop :value
@@ -49,10 +51,19 @@ module Playbook
       end
 
       def data
-        Hash(prop(:data)).merge(
+        base_data = Hash(prop(:data)).merge(
           pb_checkbox_indeterminate_main: indeterminate_main,
           pb_checkbox_indeterminate_parent: indeterminate_parent
         )
+
+        if indeterminate_main && indeterminate_main_labels.size == 2
+          base_data.merge!(
+            pb_checkbox_indeterminate_main_label_check: indeterminate_main_labels[0],
+            pb_checkbox_indeterminate_main_label_uncheck: indeterminate_main_labels[1]
+          )
+        end
+
+        base_data
       end
 
     private

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb

@@ -9,10 +9,10 @@
     <tr>
       <th>
         <%= pb_rails("checkbox", props: {
-          text: "Uncheck All",
           value: "checkbox-value",
           name: "main-checkbox",
           indeterminate_main: true,
+          indeterminate_main_labels: ["Check All Ice Cream", "Uncheck All Ice Cream"],
           id: "indeterminate-checkbox"
         }) %>
       </th>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_rails.md

@@ -1 +1,2 @@
-If you want to use indeterminate, "check/uncheck all" checkboxes, add `indeterminate_main: true` and an `id` to the main checkbox. Then, add an `indeterminate_parent` prop with the main checkbox's `id` to the children checkboxes.
+If you want to use indeterminate, "check/uncheck all" checkboxes, add `indeterminate_main: true` and an `id` to the main checkbox. Then, add an `indeterminate_parent` prop with the main checkbox's `id` to the children checkboxes.
+If you want to customize the main checkbox labels, set an array `indeterminate_main_labels` with "Check All" and "Uncheck All" labels.

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

@@ -23,7 +23,9 @@ export default class PbCheckbox extends PbEnhancedElement {
       mainCheckbox.checked = checkedCount > 0;
 
       // Determine the main checkbox label based on the number of checked checkboxes
-      const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
+      const checkAllLabel = mainCheckboxWrapper.dataset.pbCheckboxIndeterminateMainLabelCheck ?? 'Check All'
+      const uncheckAllLabel = mainCheckboxWrapper.dataset.pbCheckboxIndeterminateMainLabelUncheck ?? 'Uncheck All'
+      const text = checkedCount === 0 ? checkAllLabel : uncheckAllLabel;
 
       // Determine the icon class to add and remove based on the number of checked checkboxes
       const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md

@@ -1,7 +1,7 @@
 ##### Prop
 
 `align` **Type**: String | **Values**: left | center | right (defaults to center)
-`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults to bottom)
+`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults middle)
 `layout` **Type**: String | **Values**: horizontal | vertical | proximate (defaults to horizontal)
 `x` **Type**: Number (defaults to 0)
 `y` **Type**: Number (defaults to 0)

data/app/pb_kits/playbook/pb_line_graph/docs/_description.md

@@ -1 +1,3 @@
-**Important Note for the React Kit**: In order to leverage this kit, you must install `highcharts` and `highcharts-react-official` into your project as shown below. To then apply Playbook styles to your Highchart, import lineGraphTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.

+Line graphs are used to show changes in data over time. The default height of line graph is 400px and can be changed. The default height is in pixel units, but can also use percentage string (percentage would be that of the width. For example, `height:"50%"` would mean that the height is 50% of the width). This allows for preserving the aspect ratio across responsive sizes.

+
+For more information, see: <a href="https://api.highcharts.com/highcharts/chart.height" target="_blank"> highcharts/chart.height</a>.

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.jsx

@@ -1,8 +1,6 @@
 import React from 'react'
-import lineGraphTheme from '../lineGraphTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import colors from '../../tokens/exports/_colors.module.scss'
+
+import LineGraph from '../_line_graph'
 
 const data = [{
   name: 'Installation',
@@ -21,36 +19,19 @@ const data = [{
   data: [null, null, null, 3112, 4989, 5816, 15274, 18111],
 }]
 
-const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-
-const LineGraphColors = () => {
-  const chartOptions = {
-    title: {
-      text: 'Line Graph with Custom Data Colors',
-    },
-    xAxis: {
-      categories: categories,
-    },
-    yAxis: {
-      min: 0,
-      title: {
-        text: 'Number of Employees',
-      },
-    },
-    series: data,
-    colors: [colors.data_4, colors.data_5, "#144075", colors.data_7, colors.data_8]
-  }
-
-  const options = Highcharts.merge({}, lineGraphTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
+const LineGraphColors = (props) => (
+  <div>
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        colors={['data-4', 'data-5', 'data-6', 'data-7', 'data-8']}
+        id="line-colors"
+        title="Line Graph with Custom Data Colors"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
 
-export default LineGraphColors
+export default LineGraphColors

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
-import lineGraphTheme from '../lineGraphTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
+
+import LineGraph from '../_line_graph'
 
 const data = [{
   name: 'Installation',
@@ -20,33 +19,19 @@ const data = [{
   data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
 }]
 
-const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-
-const chartOptions = {
-  series: data,
-  title: { text: "Solar Employment Growth by Sector, 2010-2016" },
-  subtitle: { text: "Source: thesolarfoundation.com" },
-  xAxis: {
-    categories: categories,
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-}
-
-const LineGraphDefault = () => {
-  const options = Highcharts.merge({}, lineGraphTheme, chartOptions)
-
-  return(
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
+const LineGraphDefault = (props) => (
+  <div>
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        id="line-default"
+        subTitle="Source: thesolarfoundation.com"
+        title="Solar Employment Growth by Sector, 2010-2016"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
 
 export default LineGraphDefault