playbook_ui 14.19.0.pre.alpha.play2125phonenumberinputcountrysearcherrorstylefix7698 → 14.19.0.pre.rc.0

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.html.erb

@@ -1,55 +0,0 @@
-<% initial_items = [
-  {
-    id: "211",
-    url: "https://unsplash.it/500/400/?image=633",
-  },
-  {
-    id: "212",
-    url: "https://unsplash.it/500/400/?image=634",
-  },
-  {
-    id: "213",
-    url: "https://unsplash.it/500/400/?image=637",
-  },
-] %>
-
-<% next_init_items = [
-  {
-    id: "2111",
-    url: "https://unsplash.it/500/400/?image=633",
-  },
-  {
-    id: "2112",
-    url: "https://unsplash.it/500/400/?image=634",
-  },
-  {
-    id: "2113",
-    url: "https://unsplash.it/500/400/?image=637",
-  },
-] %>
-
-<%= pb_rails("draggable", props: {initial_items: initial_items, drop_zone_type: "line"}) do %>
-  <%= pb_rails("draggable/draggable_container", props: { drop_zone_direction: "vertical" }) do %>
-    <%= pb_rails("flex", props: { gap: "sm", orientation: "column", height: "367px" }) do %>
-      <% initial_items.each do |item| %>
-        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], drop_zone_line_color: "purple"}) do %>
-          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>
-
-<br/>
-
-<%= pb_rails("draggable", props: {initial_items: next_init_items, drop_zone_type: "line"}) do %>
-  <%= pb_rails("draggable/draggable_container", props: { drop_zone_direction: "horizontal" }) do %>
-    <%= pb_rails("flex", props: { gap: "sm", html_options: { style: "width: 332px;" } }) do %>
-      <% initial_items.each do |item| %>
-        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], drop_zone_line_color: "primary"}) do %>
-          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line_rails.md

@@ -1,5 +0,0 @@
-When using the "line" style, make sure to set the appropriate `direction` attribute within the `drop_zone_direction` prop on the `draggable/draggable_container` component based on the orientation of your draggable view: "vertical" or "horizontal." Note that the direction attribute only applies to the "line" style and does not affect other drop zone styles. Also, set the `drop_zone_line_color` prop on the `draggable/draggable_item` component to "primary" or "purple".
-
-The length of the line is calculated based off of the width (for "vertical") or height (for "horizontal") of the parent container holding the draggable items. 
-
-Additionally, if the parent container of the `draggable`/`draggable/draggable_container` (or a subcontainer within) does not have a set height (for "vertical") or width (for "horizontal"), like the [Draggable Drop Zones doc example](https://playbook.powerapp.cloud/kits/draggable/rails#draggable-drop-zones) does, elements on the page may jump up (for "vertical") or to the left (for "horizontal") when an item is actively being dragged. To prevent this, give a parent element a fixed height (for "vertical") or width (for "horizontal") as demonstrated in this doc example.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_rails.md

@@ -1,5 +0,0 @@
-The Draggable kit lets you customize the style of drop zones that appear when dragging an item.
-
-By default, drop zones are in the "ghost" style, but you can also choose from "shadow," "outline," and "line."
-
-When using the "line" type, make sure to set the appropriate `direction` attribute on the `draggable/draggable_container` component based on the orientation of your draggable view: "vertical" or "horizontal." Note that the direction attribute only applies to the "line" type and does not affect other drop zone styles. For more on the "line" style in particular, check out the [Draggable Drop Zones Line doc example](https://playbook.powerapp.cloud/kits/draggable/rails#draggable-drop-zones-line).

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.jsx

@@ -1,59 +0,0 @@
-import React, { useState } from "react";
-
-import Flex from '../../pb_flex/_flex'
-import Image from '../../pb_image/_image'
-import Draggable from '../../pb_draggable/_draggable'
-import { DraggableProvider } from '../../pb_draggable/context'
-
-const data = [
-  {
-    id: "100",
-    url: "https://unsplash.it/500/400/?image=638",
-  },
-  {
-    id: "200",
-    url: "https://unsplash.it/500/400/?image=639",
-  },
-  {
-    id: "300",
-    url: "https://unsplash.it/500/400/?image=640",
-  },
-];
-
-const DraggableDefault = (props) => {
-  const [initialState, setInitialState] = useState(data);
-
-  return (
-    <>
-    <DraggableProvider initialItems={data}
-        onReorder={(items) => setInitialState(items)}
-    >
-        <Draggable.Container {...props}>
-        <Flex>
-            {initialState.map(({ id, url }) => (
-              <Draggable.Item dragId={id} 
-                  key={id}
-                  onDrag={() => console.log(`${id} drag!`)}
-                  onDragEnd={() => console.log(`${id} drag end!`)}
-                  onDragEnter={() => console.log(`${id} drag enter!`)}
-                  onDragLeave={() => console.log(`${id} drag leave!`)}
-                  onDragOver={() => console.log(`${id} drag over!`)}
-                  onDragStart={() => console.log(`${id} drag start!`)}
-                  onDrop={() => console.log(`${id} drop!`)}
-              >
-                <Image alt={id} 
-                    margin="xs"
-                    size="md" 
-                    url={url} 
-                />
-              </Draggable.Item>
-            ))}
-         </Flex>
-        </Draggable.Container>
-    </DraggableProvider>
-    </>
-
-  );
-};
-
-export default DraggableDefault;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md

@@ -1 +0,0 @@
-You can add drag event listeners for `onDrag`, `onDragEnd`, `onDragEnter`, `onDragLeave`, `onDragOver`, `onDragStart`, and `onDrop`.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb

@@ -1,28 +0,0 @@
-<% 
-  options = [
-    {
-      label: "United States",
-      value: "United States",
-      areaCode: "+1",
-      icon: "🇺🇸",
-      id: "us"
-    },
-    {
-      label: "United Kingdom",
-      value: "United Kingdom",
-      areaCode: "+44",
-      icon: "🇬🇧", 
-      id: "gb"
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-      areaCode: "+92",
-      icon: "🇵🇰",
-      id: "pk"
-    }
-  ]
-
-%>
-
-<%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb

@@ -1,58 +0,0 @@
-<% 
-   options = [
-    {
-      label: "Jasper Furniss",
-      value: "Jasper Furniss",
-      territory: "PHL",
-      title: "Lead UX Engineer",
-      id: "jasper-furniss",
-      status: "Offline"
-    },
-    {
-      label: "Ramon Ruiz",
-      value: "Ramon Ruiz",
-      territory: "PHL",
-      title: "Senior UX Designer",
-      id: "ramon-ruiz",
-      status: "Away"
-    },
-    {
-      label: "Carlos Lima",
-      value: "Carlos Lima",
-      territory: "PHL",
-      title: "Nitro Developer",
-      id: "carlos-lima",
-      status: "Online"
-    },
-    {
-      label: "Courtney Long",
-      value: "Courtney Long",
-      territory: "PHL",
-      title: "Lead UX Designer",
-      id: "courtney-long",
-      status: "Online"
-    }
-  ];
-
-%>
-
-<%= pb_rails("dropdown", props: {options: options}) do %>
-    <%= pb_rails("dropdown/dropdown_trigger", props: {placeholder: "Search...", autocomplete: true}) %>
-    <%= pb_rails("dropdown/dropdown_container") do %>
-        <% options.each do |option| %>
-            <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
-              <%= pb_rails("flex", props: {
-                align: "center",
-                justify: "between",
-                }) do %>
-                  <%= pb_rails("flex/flex_item") do %>
-                      <%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
-                  <% end %>
-                  <%= pb_rails("flex/flex_item") do %>
-                      <%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
-                  <% end %>
-              <% end %>
-            <% end %>
-        <% end %>
-    <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md

@@ -1 +0,0 @@
-`autocomplete` prop can also be used in conjunction with the subcomponent structure.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.md

@@ -1 +0,0 @@
-The `useDropdown` hook can also be used to toggle the dropdown open and closed using an external control. To do so, you must manage state with the custom hook, pass the `dropdown:'pb-dropdown-trigger'` data attribute to the external control and use the `isClosed` prop as shown. 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx

@@ -1,61 +0,0 @@
-import React, { useState } from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
-import IconCircle from '../../pb_icon_circle/_icon_circle';
-
-const DropdownWithSearch = (props) => {
-const [selectedOption, setSelectedOption] = useState();
-
-  const options = [
-    {
-      label: "United States",
-      value: "United States",
-      icon: "🇺🇸",
-      id: "United-states"
-
-    },
-    {
-      label: "United Kingdom",
-      value: "United Kingdom",
-      icon: "🇬🇧",
-      id: "united-kingdom"
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-      icon: "🇵🇰",
-      id: "pakistan"
-    }
-  ];  
-
-
-  return (
-  <div>
-    <Dropdown
-        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
-        options={options}
-        {...props}
-    >
-      <Dropdown.Trigger>
-        <div key={selectedOption ? selectedOption.icon : "flag"}>
-            <IconCircle
-                cursor="pointer"
-                icon={selectedOption ? selectedOption.icon : "flag"}
-                variant="royal"
-            />
-        </div>
-      </Dropdown.Trigger>
-      <Dropdown.Container maxWidth="xs"
-          searchbar
-      >
-        {options.map((option) => (
-          <Dropdown.Option key={option.id} 
-              option={option}
-          />
-        ))}
-      </Dropdown.Container>
-    </Dropdown>
-  </div>
-  )
-}
-
-export default  DropdownWithSearch

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md

@@ -1,2 +0,0 @@
-The optional `searchbar` boolean prop can also be used on the `Dropdown.Container` to render a searchbar with typeahead functionality within the dropdown itself. This is especially useful when a custom trigger is being used.
-`searchbar` is set to false by default. 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb

@@ -1,52 +0,0 @@
-<% 
-  options = [
-    {
-      label: "United States",
-      value: "United States",
-      areaCode: "+1",
-      icon: "🇺🇸",
-      id: "us"
-    },
-    {
-      label: "United Kingdom",
-      value: "United Kingdom",
-      areaCode: "+44",
-      icon: "🇬🇧",
-      id: "gb"
-    },
-    {
-      label: "Pakistan",
-      value: "Pakistan",
-      areaCode: "+92",
-      icon: "🇵🇰",
-      id: "pk"
-    }
-  ]
-
-%>
-
-<%= pb_rails("dropdown", props: {options: options}) do %>
-    <%= pb_rails("dropdown/dropdown_trigger") do %>
-        <%= pb_rails("icon_circle", props: {icon:"flag", cursor: "pointer", variant:"royal"}) %>
-    <% end %>
-    <%= pb_rails("dropdown/dropdown_container", props:{max_width:"xs", searchbar: true}) do %>
-        <% options.each do |option| %>
-            <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
-              <%= pb_rails("flex", props: {
-                align: "center",
-                justify: "between",
-                }) do %>
-                <%= pb_rails("flex/flex_item") do %>
-                      <%= pb_rails("flex") do %>
-                          <%= pb_rails("icon", props: {icon: option[:icon]}) %>
-                          <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
-                      <% end %>
-                  <% end %>
-                  <%= pb_rails("flex/flex_item") do %>
-                      <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
-                  <% end %>
-              <% end %>
-            <% end %>
-        <% end %>
-    <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.md

@@ -1,2 +0,0 @@
-The optional `searchbar` boolean prop can also be used on the `dropdown/dropdown_container` to render a searchbar with typeahead functionality within the dropdown itself. This is especially useful when a custom trigger is being used.
-`searchbar` is set to false by default. 

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.html.erb

@@ -1,27 +0,0 @@
-<%= pb_rails("flex", props: {align: "center", spacing: "evenly", wrap: true}) do %>
-  <%= pb_rails("empty_state", props: {
-    description: "Body text goes into detail with possible steps for user to take",
-    header: "Title Explains",
-    image: "default",
-    primary_button: "Next Action",
-    primary_button_url: "#primary_button_url",
-    alignment: "left",
-  }) %>
-
-  <%= pb_rails("empty_state", props: {
-    description: "Body text goes into detail with possible steps for user to take",
-    header: "Title Explains",
-    image: "default",
-    primary_button: "Next Action",
-    primary_button_url: "#primary_button_url",
-  }) %>
-
-    <%= pb_rails("empty_state", props: {
-    description: "Body text goes into detail with possible steps for user to take",
-    header: "Title Explains",
-    image: "default",
-    primary_button: "Next Action",
-    primary_button_url: "#primary_button_url",
-    alignment: "right",
-  }) %>
-<% end %>

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.html.erb

@@ -1,7 +0,0 @@
-<%= pb_rails("flex", props: {align: "center", justify: "center"}) do %>
-  <%= pb_rails("empty_state", props: {
-    description: "Body text goes into detail with possible steps for user to take",
-    header: "Title Explains",
-    image: "default",
-  }) %>
-<% end %>

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.html.erb

@@ -1,12 +0,0 @@
-<%= pb_rails("flex", props: {align: "center", justify: "center", wrap: true}) do %>
-  <%= pb_rails("empty_state", props: {
-    description: "Body text goes into detail with possible steps for user to take",
-    header: "Title Explains",
-    image: "default",
-    orientation:"horizontal",
-    alignment: "left",
-    size: "lg",
-    primary_button: "Next Action",
-    primary_button_url: "#primary_button_url",
-  }) %>
-<% end %>

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.html.erb

@@ -1,23 +0,0 @@
-<%= pb_rails("flex", props: {align: "center", spacing: "evenly", wrap: true}) do %>
-  <%= pb_rails("empty_state", props: {
-    description: "Body text goes into detail with possible steps for user to take",
-    header: "Title Explains",
-    image: "default",
-    primary_button: "Next Action",
-    primary_button_url: "#primary_button_url",
-    link_button: "Alt Action",
-    link_button_url: "#link_button_url",
-    size: "sm",
-  }) %>
-
-  <%= pb_rails("empty_state", props: {
-    description: "Body text goes into detail with possible steps for user to take",
-    header: "Title Explains",
-    image: "default",
-    primary_button: "Next Action",
-    primary_button_url: "#primary_button_url",
-    link_button: "Alt Action",
-    link_button_url: "#link_button_url",
-    size: "lg",
-  }) %>
-<% end %>

data/app/pb_kits/playbook/pb_empty_state/empty_state.html.erb

@@ -1,19 +0,0 @@
-<%= pb_content_tag do %>
-  <%= pb_rails("flex", props: { align: flex_align, orientation: config[:flex_direction], padding_left: padding_size, padding_right: padding_size, vertical: "center", classname: config[:scss_class], max_width: "100%" }) do %>
-    <%= pb_rails("image", props: { url: image == "default" ? default_image_data_uri : image, alt: "Empty State Image", html_options: { width: config[:image_width], height: "auto", alignment: "start" } }) %>
-    <%= pb_rails("flex/flex_item") do %>
-      <%= pb_rails("title", props: { text: object.header, size: config[:title_size], padding_bottom: config[:title_padding], text_align: alignment }) %>
-      <% if size == "sm" %>
-        <%= pb_rails("detail", props: { text: object.description, padding_bottom: config[:description_pad], text_align: alignment }) %>
-      <% else %>
-        <%= pb_rails("body", props: { text: object.description, padding_bottom: config[:description_pad], text_align: alignment }) %>
-      <% end %>
-      <% if primary_button.present? %>
-        <%= pb_rails("button", props: { text: primary_button, variant: "primary", width: "100%", size: config[:button_size], link: primary_button_url,  margin_bottom: config[:button_margin] }) %>
-      <% end %>
-      <% if link_button.present? %>
-        <%= pb_rails("button", props: { text: link_button, variant: "link", size: config[:button_size], link: link_button_url, width: "100%" }) %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_empty_state/empty_state.rb

@@ -1,123 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbEmptyState
-    class EmptyState < Playbook::KitBase
-      prop :alignment, type: Playbook::Props::Enum,
-                       values: %w[center left right],
-                       default: "center"
-      prop :description
-      prop :header
-      prop :image
-      prop :link_button
-      prop :link_button_url
-      prop :orientation, type: Playbook::Props::Enum,
-                         values: %w[horizontal vertical],
-                         default: "vertical"
-      prop :primary_button
-      prop :primary_button_url
-      prop :size, type: Playbook::Props::Enum,
-                  values: %w[sm md lg],
-                  default: "md"
-
-      SIZE_CONFIGS = {
-        sm: {
-          vertical: {
-            image_width: "100px",
-            title_size: 4,
-            title_padding: "xxs",
-            description_pad: "sm",
-            button_size: "sm",
-            button_margin: "xs",
-            scss_class: "sm-state-vertical",
-            flex_direction: "column",
-          },
-          horizontal: {
-            image_width: "100px",
-            title_size: 4,
-            title_padding: "xxs",
-            description_pad: "sm",
-            button_size: "sm",
-            button_margin: "xs",
-            scss_class: "sm-state-horizontal",
-            flex_direction: "row",
-          },
-        },
-        md: {
-          vertical: {
-            image_width: "140px",
-            title_size: 3,
-            title_padding: "xs",
-            description_pad: "md",
-            button_size: "md",
-            button_margin: "sm",
-            scss_class: "md-state-vertical",
-            flex_direction: "column",
-          },
-          horizontal: {
-            image_width: "140px",
-            title_size: 3,
-            title_padding: "xs",
-            description_pad: "md",
-            button_size: "md",
-            button_margin: "sm",
-            scss_class: "md-state-horizontal",
-            flex_direction: "row",
-          },
-        },
-        lg: {
-          vertical: {
-            image_width: "100%",
-            title_size: 1,
-            title_padding: "sm",
-            description_pad: "lg",
-            button_size: "md",
-            button_margin: "md",
-            scss_class: "lg-state-vertical",
-            flex_direction: "column",
-          },
-          horizontal: {
-            image_width: "100%",
-            title_size: 2,
-            title_padding: "sm",
-            description_pad: "lg",
-            button_size: "md",
-            button_margin: "md",
-            scss_class: "lg-state-horizontal",
-            flex_direction: "row",
-          },
-        },
-      }.freeze
-
-      def classname
-        generate_classname("pb_empty_state_kit")
-      end
-
-      def config
-        SIZE_CONFIGS[size.to_sym][orientation.to_sym]
-      end
-
-      def default_image_data_uri
-        svg_path = __dir__.then { |d| File.join(d, "docs", "default_image", "computer_fly_no_branding.svg") }
-        svg      = File.read(svg_path)
-        encoded  = ERB::Util.url_encode(svg)
-        "data:image/svg+xml,#{encoded}"
-      end
-
-      def padding_size
-        size == "sm" ? "xs" : "xl"
-      end
-
-      def flex_align
-        case alignment
-        when "left"
-          "start"
-        when "right"
-          "end"
-        else
-          "center"
-        end
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb

@@ -1,41 +0,0 @@
-<%=
-  pb_rails("filter", props: {
-    id: "filter_within_trubo_frames",
-    position: "top",
-    filters: [
-      { name: "name", value: "John Wick" },
-      { name: "city", value: "San Francisco"}
-    ],
-    sort_menu: [
-      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
-      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
-      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
-    ],
-    template: "default",
-    results: 1,
-    popover_props: { append_to: "parent"  },
-  }) do
-%>
-  <%
-   example_collection = [
-      OpenStruct.new(name: "USA", value: 1),
-      OpenStruct.new(name: "Canada", value: 2),
-      OpenStruct.new(name: "Brazil", value: 3),
-      OpenStruct.new(name: "Philippines", value: 4),
-      OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
-    ]
-  %>
-  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
-    <%= form.text_field :example_text_field, props: { label: true } %>
-    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
-
-    <%= form.actions do |action| %>
-      <%= action.submit props: {
-        text: "Apply",
-        data: {
-          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-      },}%>
-      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.md

@@ -1 +0,0 @@
-By default, the filter popover attaches to the `<body>`. To attach it elsewhere, like inside a Turbo Frame, pass the `append_to` prop through `popover_props`. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.

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

@@ -1,52 +0,0 @@
-import React from 'react'
-import lineGraphTheme from '../lineGraphTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-
-const 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: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
-}, {
-  name: 'Other',
-  data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
-}]
-
-const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-
-const baseOptions = {
-  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 LineGraphPbStyles = () => {
-  const options = Highcharts.merge({}, lineGraphTheme, baseOptions)
-
-  return(
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default LineGraphPbStyles