playbook_ui 15.2.0.pre.alpha.PLAY1978bugiconauto11317 → 15.2.0.pre.alpha.PLAY236711331

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f4e9805dca544c9abae71d1c12b067c3ee333a62161fe7ed82aa968c9499d4b3
-  data.tar.gz: 3b43477f5c391da8f9dcf343702f46396c522a0794bfc51bbe03fbf21c98a865
+  metadata.gz: 0e2c8dffcd7defe26d6fefe13f404f679b53a467a26f19e6d0e642ea8ef8dd85
+  data.tar.gz: c4592d02d0338fd0b4f476c94bb2c600a0fcd3f3924ce3930758a0ee9b2e782b
 SHA512:
-  metadata.gz: b1de16b7f90de98e7b11c7d6a217da3013ae0f540bcf46dd38b2f8b56fb0fadf5bddfdcd364b5f68b895e8237a7c9a53087a2dc6041098b09be377e3153132f6
-  data.tar.gz: 85a61bef4066f0d3761c349fd1f9007a5ee00b82c8dd1d859bc89bbfd84bd5536f6d61dfca4f82e21a629730b939cbe84b1addc10b96dd79a35d163f6f086c9c
+  metadata.gz: f1e1563932e3cfc9222f98c859687fcaf69fa43ce717bfa03e1706a0360f10591682d4bca57111b816f38d83d9c4e3fe6c1af65ccb7d02293b71de67067f8640
+  data.tar.gz: bc8206fe7856f1f43c18957aa6bfcd609d35b04930a1ab12d9570bc1a7b0be7fd9b0524612a03e488fa35e5923aa21a601f604474089fa1d1c1861cce8971f95

data/app/pb_kits/playbook/_playbook.scss

@@ -1,6 +1,3 @@
-
-
-
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_background/background';
@@ -33,6 +30,7 @@
 @import 'pb_distribution_bar/distribution_bar';
 @import 'pb_draggable/draggable';
 @import 'pb_dropdown/dropdown';
+@import 'pb_empty_state/empty_state';
 @import 'pb_file_upload/file_upload';
 @import 'pb_filter/filter';
 @import 'pb_fixed_confirmation_toast/fixed_confirmation_toast';
@@ -70,6 +68,9 @@
 @import 'pb_overlay/overlay';
 @import 'pb_pagination/pagination';
 @import 'pb_passphrase/passphrase';
+@import 'pb_pb_bar_graph/pb_bar_graph';
+@import 'pb_pb_circle_chart/pb_circle_chart';
+@import 'pb_pb_line_graph/pb_line_graph';
 @import 'pb_person/person';
 @import 'pb_person_contact/person_contact';
 @import 'pb_phone_number_input/phone_number_input';
@@ -108,9 +109,6 @@
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';
 @import 'pb_weekday_stacked/weekday_stacked';
-@import 'pb_empty_state/empty_state';
-@import 'pb_pb_bar_graph/pb_bar_graph';
-@import 'pb_pb_circle_chart/pb_circle_chart';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';

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

@@ -81,6 +81,12 @@ $pb_button_sizes: (
   // Loading state
   &.pb_button_loading {
     @include pb_button_loading(true);
+    &.pb_button_size_sm {
+        min-height: 30px;
+    }
+    &.pb_button_size_lg {
+        min-height: 45px;
+    }
   }
 
   // Disabled state

data/app/pb_kits/playbook/pb_button/docs/_button_loading.html.erb

@@ -1,3 +1,7 @@
-<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", loading: true, margin_right: "lg" }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "secondary", loading: true, margin_right: "lg" }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "link", loading: true, margin_right: "lg" }) %>
+<%= pb_rails("caption", props: { margin_y: "md", text: "Button variants with loading" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, variant: "secondary", loading: true, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, variant: "link", loading: true, margin_right: "lg" }) %>
+<%= pb_rails("caption", props: { margin_y: "md", text: "Button sizes with loading" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, size: "sm", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, size: "lg", margin_right: "lg" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx

@@ -1,8 +1,13 @@
 import React from 'react'
 import Button from "../../pb_button/_button"
+import Caption from "../../pb_caption/_caption"
 
 const ButtonLoading = (props) => (
   <div>
+    <Caption 
+        marginY="md" 
+        text="Button variants with loading" 
+    />
     <Button
         aria={{ label: 'Loading' }}
         loading
@@ -31,6 +36,30 @@ const ButtonLoading = (props) => (
         variant="link"
         {...props}
     />
+    <br/>
+    <Caption 
+        marginY="md" 
+        text="Button sizes with loading" 
+    />
+    <Button
+        aria={{ label: 'Loading' }}
+        loading
+        marginRight='lg'
+        size="sm"
+        tabIndex={0}
+        text="Small Button"
+        {...props}
+    />
+    {' '}
+    <Button
+        aria={{ label: 'Loading' }}
+        loading
+        marginRight='lg'
+        size="lg"
+        tabIndex={0}
+        text="Small Button"
+        {...props}
+    />
   </div>
 )
 

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

@@ -32,9 +32,9 @@ exports[`html structure is correct 1`] = `
                 class="pb_custom_icon svg-inline--fa svg_lg svg_fw"
                 color="currentColor"
                 fill="none"
-                height="1.5em"
+                height="auto"
                 viewBox="0 0 30 25"
-                width="1em"
+                width="auto"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path

data/app/pb_kits/playbook/pb_draggable/_draggable.scss

@@ -141,4 +141,12 @@
       }
     }
   }
+
+  .pb_draggable_item:has(.pb_item_kit) {
+      border-bottom: 1px solid $border_light;
+  }
+
+  .pb_draggable_item:has(.pb_item_kit):last-child {
+      border-bottom: none;
+  }
 }

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

@@ -522,7 +522,7 @@ export default class PbDropdown extends PbEnhancedElement {
       closeIcon.className = "pb_form_pill_close";
       closeIcon.innerHTML = `<svg class="pb_custom_icon svg-inline--fa svg_${
         this.formPillProps.size === "small" ? "xs" : "sm"
-      } svg_fw" xmlns="http://www.w3.org/2000/svg" width="1em" viewBox="0 0 31 25"><path fill="currentColor" d="M23.0762 6.77734L17.4512 12.4023L23.0293 17.9805C23.498 18.4023 23.498 19.1055 23.0293 19.5273C22.6074 19.9961 21.9043 19.9961 21.4824 19.5273L15.8574 13.9492L10.2793 19.5273C9.85742 19.9961 9.1543 19.9961 8.73242 19.5273C8.26367 19.1055 8.26367 18.4023 8.73242 17.9336L14.3105 12.3555L8.73242 6.77734C8.26367 6.35547 8.26367 5.65234 8.73242 5.18359C9.1543 4.76172 9.85742 4.76172 10.3262 5.18359L15.9043 10.8086L21.4824 5.23047C21.9043 4.76172 22.6074 4.76172 23.0762 5.23047C23.498 5.65234 23.498 6.35547 23.0762 6.77734Z"/></svg>`;
+      } svg_fw" xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 31 25"><path fill="currentColor" d="M23.0762 6.77734L17.4512 12.4023L23.0293 17.9805C23.498 18.4023 23.498 19.1055 23.0293 19.5273C22.6074 19.9961 21.9043 19.9961 21.4824 19.5273L15.8574 13.9492L10.2793 19.5273C9.85742 19.9961 9.1543 19.9961 8.73242 19.5273C8.26367 19.1055 8.26367 18.4023 8.73242 17.9336L14.3105 12.3555L8.73242 6.77734C8.26367 6.35547 8.26367 5.65234 8.73242 5.18359C9.1543 4.76172 9.85742 4.76172 10.3262 5.18359L15.9043 10.8086L21.4824 5.23047C21.9043 4.76172 22.6074 4.76172 23.0762 5.23047C23.498 5.65234 23.498 6.35547 23.0762 6.77734Z"/></svg>`;
       pill.appendChild(closeIcon);
 
       closeIcon.addEventListener("click", (e) => {

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -101,7 +101,7 @@
   <%= form.typeahead :example_typeahead_validation_react, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead (React Rendered)", placeholder: "Search for a user", required: true, validation: { message: "Please select a color." } } %>
   <%= form.typeahead :example_typeahead_validation_react_2, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead 2 (React Rendered)", placeholder: "Search for a user", required: true } %>
   <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
-  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
+  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true, required: true } %>
   <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
   <%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
   <%= form.search_field :example_project_number_validation, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -235,7 +235,8 @@ const Icon = (props: IconProps) => {
               ...htmlProps,
               className: classes,
               id,
-              width: '1em',
+              width: 'auto',
+              height: 'auto',
               ...(props.tabIndex !== undefined && { tabIndex }),
             })
           }

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -110,7 +110,8 @@ module Playbook
         svg["class"] = %w[pb_custom_icon svg-inline--fa].concat([object.custom_icon_classname]).join(" ")
         svg["id"] = object.id
         svg["data"] = object.data
-        svg["width"] = "1em"
+        svg["height"] = "auto"
+        svg["width"] = "auto"
         svg["tabindex"] = object.tabindex
         fill_color = object.color || "currentColor"
         doc.at_css("path")["fill"] = fill_color

data/app/pb_kits/playbook/pb_list/item.html.erb

@@ -11,7 +11,7 @@
       <% if object.drag_handle %>
         <span style="vertical-align: middle;">
           <%= pb_rails("body") do %>
-            <svg width="14em" viewBox="0 0 31 25" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="pb_custom_icon svg-inline--fa vertical_align_middle  svg_fw"><path d="M12.904 6.355a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm0 7.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm4.5-13.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm-1.5 9a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5z" fill="#242B42"></path></svg>
+            <svg width="auto" height="auto" viewBox="0 0 31 25" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="pb_custom_icon svg-inline--fa vertical_align_middle  svg_fw"><path d="M12.904 6.355a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm0 7.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.656-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm4.5-13.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5zm1.5 6c0 .844-.703 1.5-1.5 1.5a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5zm-1.5 9a1.48 1.48 0 01-1.5-1.5c0-.796.657-1.5 1.5-1.5.797 0 1.5.704 1.5 1.5 0 .844-.703 1.5-1.5 1.5z" fill="#242B42"></path></svg>
           <% end %>
         </span>
       <% end %>

data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react"
 import { globalProps } from "../utilities/globalProps";
-import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { buildAriaProps, buildDataProps, buildCss, buildHtmlProps } from "../utilities/props";
 import Highcharts from "highcharts"
 import HighchartsReact from "highcharts-react-official"
 
@@ -18,23 +18,25 @@ type PbBarGraphProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)};
 }
 
-const PbBarGraph = ({
+const PbBarGraph = ( props: PbBarGraphProps): React.ReactElement => {
+const {
   aria = {},
   data = {},
   id,
   htmlOptions = {},
   options,
-  className = "pb_pb_bar_graph",
-}: PbBarGraphProps): React.ReactElement => {
+  className,
+} = props
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions);
+  const classes = classnames(buildCss('pb_pb_bar_graph'), globalProps(props), className)
 
   const mergedOptions = useMemo(() => {
     if (!options || typeof options !== "object") {
       // eslint-disable-next-line no-console
-      console.error("❌ Invalid options passed to <BarGraph />", options)
+      console.error("❌ Invalid options passed to <PbBarGraph />", options)
       return {}
     }
 
@@ -46,7 +48,7 @@ const PbBarGraph = ({
     <div>
       <HighchartsReact
           containerProps={{
-                  className: classnames(globalProps, className),
+                  className: classnames(classes),
                   id: id,
                   ...ariaProps,
                   ...dataProps,

data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.rb

@@ -4,24 +4,21 @@ module Playbook
   module PbPbBarGraph
     class PbBarGraph < ::Playbook::KitBase
       prop :options, default: {}
-      prop :container_props, default: {}
 
       def react_props
         {
+          className: classname,
+          data: data,
           options: options,
-          containerProps: container_props_hash,
+          id: id,
         }
       end
 
-      def container_props_hash
-        container_props.merge({
-                                id: id,
-                                className: classname,
-                              }).compact
-      end
-
       def classname
-        generate_classname("pb_pb_bar_graph")
+        # Highcharts react needs classname attached to the container div,
+        # we pass an empty string here to avoid conflicts, classname is built in the TSX
+        # We still need generate_classnames to retain ability to pass in custom classnames or global props
+        generate_classname("")
       end
     end
   end

data/app/pb_kits/playbook/pb_pb_bar_graph/pbbargraph.test.jsx

@@ -15,6 +15,41 @@ afterEach(() => {
   console.warn.mockRestore();
 });
 
+const chartData = [{
+    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 chartOptions = {
+    series: chartData,
+    title: {
+      text: 'Solar Employment Growth by Sector, 2010-2016',
+    },
+    subtitle: {
+      text: 'Source: thesolarfoundation.com',
+    },
+    xAxis: {
+      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
+    },
+    yAxis: {
+      title: {
+        text: 'Number of Employees',
+      },
+    },
+  }
+
 const testId = 'bargraph1';
 
 test('bargraph uses exact classname', () => {
@@ -23,9 +58,46 @@ test('bargraph uses exact classname', () => {
         className='super_important_class'
         data={{ testid: testId }}
         id='bar-default'
+        options={chartOptions}
     />
   );
  
   const kit = screen.getByTestId(testId);
   expect(kit).toHaveClass('super_important_class');
-});
+});
+
+test('Kit to apply base classname', () => {
+  render(
+    <PbBarGraph
+        data={{testid: testId}} 
+        options={chartOptions} 
+    />
+  )
+
+  expect(screen.getByTestId(testId)).toHaveClass('pb_pb_bar_graph')
+})
+
+
+test('Kit to apply global props', () => {
+  render(
+    <PbBarGraph
+        data={{testid: testId}} 
+        margin="lg"
+        options={chartOptions} 
+    />
+  )
+
+  expect(screen.getByTestId(testId)).toHaveClass('m_lg')
+})
+
+test('kit to apply id', () => {
+  render(
+    <PbBarGraph
+        data={{testid: testId}} 
+        id='bar-graph-id'
+        options={chartOptions} 
+    />
+  )
+
+  expect(screen.getByTestId(testId)).toHaveAttribute('id', 'bar-graph-id')
+})

data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx

@@ -46,7 +46,7 @@ const PbCircleChart = (props: PbCircleChartProps) => {
     <div>
       <HighchartsReact
           containerProps={{
-                  className: classnames(globalProps, className),
+                  className: classnames(classes),
                   id: id,
                   ...ariaProps,
                   ...dataProps,

data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.rb

@@ -4,24 +4,21 @@ module Playbook
   module PbPbCircleChart
     class PbCircleChart < ::Playbook::KitBase
       prop :options, default: {}
-      prop :container_props, default: {}
 
       def react_props
         {
+          className: classname,
+          data: data,
           options: options,
-          containerProps: container_props_hash,
+          id: id,
         }
       end
 
-      def container_props_hash
-        container_props.merge({
-                                id: id,
-                                className: classname,
-                              }).compact
-      end
-
       def classname
-        generate_classname("pb_pb_circle_chart")
+        # Highcharts react needs classname attached to the container div,
+        # we pass an empty string here to avoid conflicts, classname is built in the TSX
+        # We still need generate_classnames to retain ability to pass in custom classnames or global props
+        generate_classname("")
       end
     end
   end

data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx

@@ -49,3 +49,50 @@ test('Kit to exist', () => {
   expect(screen.getByTestId(testId)).toBeInTheDocument()
 })
 
+test('Kit to apply base classname', () => {
+  render(
+    <PbCircleChart
+        data={{testid: testId}} 
+        options={chartOptions} 
+    />
+  )
+
+  expect(screen.getByTestId(testId)).toHaveClass('pb_pb_circle_chart')
+})
+
+test('Kit to have custom class', () => {
+  render(
+    <PbCircleChart
+        className='custom-class'
+        data={{testid: testId}} 
+        options={chartOptions} 
+    />
+  )
+
+  expect(screen.getByTestId(testId)).toHaveClass('custom-class')
+})
+
+test('Kit to apply global props', () => {
+  render(
+    <PbCircleChart
+        data={{testid: testId}} 
+        margin="lg"
+        options={chartOptions} 
+    />
+  )
+
+  expect(screen.getByTestId(testId)).toHaveClass('m_lg')
+})
+
+test('kit to apply id', () => {
+  render(
+    <PbCircleChart
+        data={{testid: testId}} 
+        id='circle-chart-id'
+        options={chartOptions} 
+    />
+  )
+
+  expect(screen.getByTestId(testId)).toHaveAttribute('id', 'circle-chart-id')
+})
+

data/app/pb_kits/playbook/pb_pb_line_graph/_pb_line_graph.scss

@@ -0,0 +1,3 @@
+.pb_pb_line_graph {
+
+}

data/app/pb_kits/playbook/pb_pb_line_graph/_pb_line_graph.tsx

@@ -0,0 +1,61 @@
+
+import React, { useMemo } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import pbLineGraphTheme from './pbLineGraphTheme'
+import { globalProps } from '../utilities/globalProps'
+
+
+type PbLineGraphProps = {
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  id?: string,
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
+  options: Record<string, unknown>
+}
+
+const PbLineGraph = (props: PbLineGraphProps) => {
+  const {
+    aria = {},
+  className,
+  data = {},
+  id,
+  htmlOptions = {},
+  options
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions);
+  const classes = classnames(buildCss('pb_pb_line_graph'), globalProps(props), className)
+  
+  const mergedOptions = useMemo(() => {
+    if (!options || typeof options !== "object") {
+      // eslint-disable-next-line no-console
+      console.error("❌ Invalid options passed to <PbLineGraph />", options)
+      return {}
+    }
+
+    return Highcharts.merge({}, pbLineGraphTheme, options)
+  }, [options])
+  return (
+    <div>
+        <HighchartsReact
+            containerProps={{
+                    className: classnames(classes),
+                    id: id,
+                    ...ariaProps,
+                    ...dataProps,
+                    ...htmlProps
+                  }}
+            highcharts={Highcharts}
+            options={mergedOptions}
+        />
+    </div>
+  )
+}
+
+export default PbLineGraph

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

@@ -0,0 +1,3 @@
+This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specifc props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
+
+See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_colors.html.erb

@@ -0,0 +1,34 @@
+<% data = [{
+    name: 'Installation',
+    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+    }, {
+    name: 'Manufacturing',
+    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
+    }, {
+    name: 'Sales & Distribution',
+    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
+    }, {
+    name: 'Project Development',
+    data: [nil, nil, 7988, 12169, 15112, 22452, 34400, 34227],
+    }, {
+    name: 'Other',
+    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
+    }] %>
+
+<% categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] %>
+
+<% chart_options = {
+  series: data,
+  colors: ['#1CA05C', '#FD804C', '#144075', '#00C4D7', '#DA0014'],
+  title: { text: "Line Graph with Custom Data Colors" },
+  xAxis: {
+    categories: categories,
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+} %>
+
+<%= pb_rails("pb_line_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_colors.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import PbLineGraph from '../../pb_pb_line_graph/_pb_line_graph'
+import { colors } from 'playbook-ui'
+
+const data = [{
+  name: 'Installation',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}, {
+  name: 'Manufacturing',
+  data: [24916, 28064, 29742, 40851, 50590, 65282, 70121, 85434],
+}, {
+  name: 'Sales & Distribution',
+  data: [11744, 17722, 16005, 19771, 25185, 28377, 36147, 43387],
+}, {
+  name: 'Project Development',
+  data: [5332, 6344, 7988, 12169, 15112, 14452, 22400, 30227],
+}, {
+  name: 'Other',
+  data: [null, null, null, 3112, 4989, 5816, 15274, 18111],
+}]
+
+const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+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 PbLineGraphColors = (props) => {
+  return (
+    <div>
+      <PbLineGraph
+          options={chartOptions}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default PbLineGraphColors

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_colors.md

@@ -0,0 +1,5 @@
+Custom data colors allow for color customization to match the needs of business requirements.
+
+For React, import 'colors' from Playbook, then set custom colors in the colors array using the desired color variables. Hex colors are also available.
+
+For Rails, HEX values are required.

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_default.html.erb

@@ -0,0 +1,34 @@
+<% data = [{
+    name: 'Installation',
+    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+    }, {
+    name: 'Manufacturing',
+    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
+    }, {
+    name: 'Sales & Distribution',
+    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
+    }, {
+    name: 'Project Development',
+    data: [nil, nil, 7988, 12169, 15112, 22452, 34400, 34227],
+    }, {
+    name: 'Other',
+    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
+    }] %>
+
+<% categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] %>
+
+<% chart_options = {
+  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",
+    },
+  },
+} %>
+
+<%= pb_rails("pb_line_graph", props: {options: chart_options}) %>