playbook_ui 14.18.0.pre.alpha.play2034zonesandcolors7407 → 14.18.0.pre.alpha.play2087emptystatekitbuildrails7533

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md

@@ -0,0 +1,14 @@
+You can link a Quickpick DatePicker to standard DatePickers using the following props:
+
+**For the Quickpick DatePicker**:
+`controlsStartId`: ID of the DatePicker that should receive the start date.
+
+`controlsEndId`: ID of the DatePicker that should receive the end date.
+
+When a quickpick option like “This Year” is selected, it automatically populates the linked start and end inputs.
+
+**For the Start/End DatePickers**:
+`syncStartWith`: ID of the quickpick this start date is synced to.
+`syncEndWith`: ID of the quickpick this end date is synced to.
+
+When a user manually edits the start or end date, it clears the selected quickpick to prevent conflicting values.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb

@@ -0,0 +1,20 @@
+<%= pb_rails("date_picker", props: {
+  mode: "range",
+  picker_id: "quick-pick-date-range",
+  placeholder: "Select a Date Range",
+  selection_type: "quickpick",
+  controls_end_id: "quick-pick-date-range-end",
+  controls_start_id: "quick-pick-date-range-start",
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  picker_id: "quick-pick-date-range-start",
+  placeholder: "Select a Start Date",
+  sync_start_with:"quick-pick-date-range",
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  picker_id: "quick-pick-date-range-end",
+  placeholder: "Select an End Date",
+  sync_end_with:"quick-pick-date-range",
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md

@@ -0,0 +1,14 @@
+You can link a Quickpick DatePicker to standard DatePickers using the following props:
+
+**For the Quickpick DatePicker**:
+`controls_start_id`: ID of the DatePicker that should receive the start date.
+
+`controls_end_id`: ID of the DatePicker that should receive the end date.
+
+When a quickpick option like “This Year” is selected, it automatically populates the linked start and end inputs.
+
+**For the Start/End DatePickers**:
+`sync_start_with`: ID of the quickpick this start date is synced to.
+`sync_end_with`: ID of the quickpick this end date is synced to.
+
+When a user manually edits the start or end date, it clears the selected quickpick to prevent conflicting values.

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

@@ -15,6 +15,7 @@ examples:
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
   - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
+  - date_picker_range_pattern_rails: Range with 2 Date Pickers and a Quick Pick
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
@@ -47,6 +48,7 @@ examples:
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
   - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
+  - date_picker_range_pattern: Range with 2 Date Pickers and a Quick Pick
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max

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

@@ -26,3 +26,4 @@ export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
 export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_custom'
 export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
 export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'
+export { default as DatePickerRangePattern } from './_date_picker_range_pattern'

data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx

@@ -238,6 +238,16 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
       },
 
       onClose(selectedDates: Array<Date>) {
+        // Patch .clear() to also remove active state if cleared
+        const originalClear = fp.clear;
+        fp.clear = function (...args: any) {
+          const current = pluginData.rangesNav.querySelector('.active');
+          if (current) {
+            current.classList.remove('active');
+          }
+          activeLabel = "";
+          return originalClear.apply(this, args);
+        };
         // remove the active class from the button if the selected dates don't match the label
         if (!isLabelMatchingSelectedDates(selectedDates)) {
           pluginData.rangesButtons[activeLabel]?.classList.remove('active');

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

@@ -1,4 +1,4 @@
-<% 
+<%
   options = [
     { label: 'United States', value: 'United States', id: 'us' },
     { label: 'Canada', value: 'Canada', id: 'ca' },
@@ -6,4 +6,7 @@
   ]
 %>
 
-<%= pb_rails("dropdown", props: { error: "Please make a valid selection", options: options }) %>
+<%= pb_rails("dropdown", props: {
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
+  options: options
+}) %>

data/app/pb_kits/playbook/pb_empty_state/_empty_state.scss

@@ -35,4 +35,10 @@
     }
   }
 
-}
+  &.dark {
+    [class*="pb_title_kit"],
+    [class*="pb_body_kit"],
+    [class*="pb_detail_kit"],
+    [class*="pb_button_kit_link"]:hover { color: $white; }
+  }
+}

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

@@ -0,0 +1,30 @@
+<%= pb_rails("flex", props: {align: "center", spacing: "evenly"}) do %>
+  <%= pb_rails("empty_state", props: {
+    description: "Body text goes into detail with possible steps for user to take",
+    header: "Title Explains",
+    image: "default",
+    id: "empty_state_default",
+    primary_button: "Next Action",
+    primary_button_url: "https://www.playbook.com",
+    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",
+    id: "empty_state_default",
+    primary_button: "Next Action",
+    primary_button_url: "https://www.playbook.com",
+  }) %>
+
+    <%= pb_rails("empty_state", props: {
+    description: "Body text goes into detail with possible steps for user to take",
+    header: "Title Explains",
+    image: "default",
+    id: "empty_state_default",
+    primary_button: "Next Action",
+    primary_button_url: "https://www.playbook.com",
+    alignment: "right",
+  }) %>
+<% end %>

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

@@ -0,0 +1,8 @@
+<%= 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",
+    id: "empty_state_default",
+  }) %>
+<% end %>

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

@@ -0,0 +1,13 @@
+<%= 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",
+    id: "empty_state_default",
+    orientation:"horizontal",
+    alignment: "left",
+    size: "lg",
+    primary_button: "Next Action",
+    primary_button_url: "https://www.playbook.com",
+  }) %>
+<% end %>

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

@@ -0,0 +1,23 @@
+<%= pb_rails("flex", props: {align: "center", spacing: "evenly"}) do %>
+  <%= pb_rails("empty_state", props: {
+    description: "Body text goes into detail with possible steps for user to take",
+    header: "Title Explains",
+    image: "default",
+    id: "empty_state_default",
+    primary_button: "Next Action",
+    primary_button_url: "https://www.playbook.com",
+    link_button: "Alt Action",
+    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",
+    id: "empty_state_default",
+    primary_button: "Next Action",
+    primary_button_url: "https://www.playbook.com",
+    link_button: "Alt Action",
+    size: "lg",
+  }) %>
+<% end %>

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

@@ -1,5 +1,9 @@
 examples:
-
+  rails:
+  - empty_state_default: Default
+  - empty_state_size: Size
+  - empty_state_orientation: Orientation
+  - empty_state_alignment: Alignment
 
   react:
   - empty_state_default: Default

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

@@ -0,0 +1,24 @@
+<%= pb_content_tag(:div,
+aria: aria,
+class: classname,
+data: data,
+id: id,
+**combined_html_options) 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] }) 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], href: 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], href: primary_button_url, width: "100%" }) %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,123 @@
+# 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

@@ -0,0 +1,41 @@
+<%=
+  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

@@ -0,0 +1 @@
+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_filter/docs/example.yml

@@ -11,6 +11,7 @@ examples:
   - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
   - filter_popover_props: Popover Props
+  - filter_within_turbo_frames: Within Turbo Frames
 
   react:
   - filter_default: Default

data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss

@@ -23,35 +23,39 @@
 @mixin error-state-right-side-select-kit {
   &:has(.pb_text_input_kit:not(.error)):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error),
   &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper) {
-    align-items: flex-start;
-
-    .pb_select_kit_wrapper {
-      padding-top: $space_md;
-      margin-top: 2px;
+    &:not(:has(.pb_phone_number_input)) {
+      align-items: flex-start;
 
-      .pb_select_kit_caret {
+      .pb_select_kit_wrapper {
         padding-top: $space_md;
+        margin-top: 2px;
+
+        .pb_select_kit_caret {
+          padding-top: $space_md;
+        }
       }
-    }
 
-    .pb_select_kit_wrapper.error {
-      padding-top: $space_md;
-      margin-top: 2px;
+      .pb_select_kit_wrapper.error {
+        padding-top: $space_md;
+        margin-top: 2px;
 
-      .pb_select_kit_caret {
-        padding-top: $space_xl;
+        .pb_select_kit_caret {
+          padding-top: $space_xl;
+        }
       }
     }
   }
 }
 
 @mixin error-state-left-side-select-kit {
-  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_phone_number_input):has(.pb_text_input_kit.error) {
-    align-items: flex-start;
+  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_text_input_kit.error) {
+    &:not(:has(.pb_phone_number_input)) {
+      align-items: flex-start;
 
-    .pb_text_input_kit.error {
-      padding-top: $space_md;
-      margin-top: 2px;
+      .pb_text_input_kit.error {
+        padding-top: $space_md;
+        margin-top: 2px;
+      }
     }
   }
-}
+}

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

@@ -0,0 +1,52 @@
+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

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

@@ -0,0 +1 @@
+You don't need to use the Line Graph Kit to apply Playbook styles to your Highcharts line graph. Just import lineGraphTheme.ts and merge it with your graph options—Playbook’s styling will apply automatically.

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

@@ -11,6 +11,7 @@ examples:
 
   react:
   - line_graph_default: Default
+  - line_graph_pb_styles: Playbook Styles
   - line_graph_legend: Legend
   - line_graph_legend_position: Legend Position
   - line_graph_legend_nonclickable: Legend Nonclickable

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

@@ -4,3 +4,4 @@ export { default as LineGraphLegendPosition } from './_line_graph_legend_positio
 export { default as LineGraphLegendNonclickable } from './_line_graph_legend_nonclickable.jsx'
 export { default as LineGraphHeight } from './_line_graph_height.jsx'
 export { default as LineGraphColors } from './_line_graph_colors.jsx'
+export { default as LineGraphPbStyles } from './_line_graph_pb_styles.jsx'

data/app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts

@@ -0,0 +1,110 @@
+import colors from '../tokens/exports/_colors.module.scss'
+import typography from '../tokens/exports/_typography.module.scss'
+
+const lineGraphTheme = {
+  title: {
+    text: "",
+    style: {
+      color: colors.text_lt_default,
+      fontFamily: typography.font_family_base,
+      fontWeight: typography.bold,
+      fontSize: typography.heading_3,
+    },
+  },
+  subtitle: {
+    text: "" ,
+    style: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_lt_light,
+      fontWeight: typography.regular,
+      fontSize: typography.text_base,
+    },
+  },
+  chart: {
+    type: "line",
+  },
+  tooltip: {
+    backgroundColor: {
+      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+      stops: [
+        [0, colors.bg_dark],
+        [1, colors.bg_dark],
+      ],
+    },
+    followPointer: true,
+    shadow: false,
+    borderWidth: 0,
+    borderRadius: 10,
+    style: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_dk_default,
+      fontWeight: typography.regular,
+      fontSize: typography.text_smaller,
+    },
+  },
+  plotOptions: {
+    line: {
+      dataLabels: {
+        enabled: false,
+      },
+    },
+  },
+  credits: { enabled: false },
+  legend: { enabled: false },
+  colors: [
+    colors.data_1,
+    colors.data_2,
+    colors.data_3,
+    colors.data_4,
+    colors.data_5,
+    colors.data_6,
+    colors.data_7,
+  ],
+  xAxis: {
+    gridLineWidth: 0,
+    lineColor: colors.border_light,
+    tickColor: colors.border_light,
+    labels: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+    title: {
+      style: {
+        color: colors.text_lt_default,
+        fontFamily: typography.font_family_base,
+        fontWeight: typography.regular,
+        fontSize: typography.heading_4,
+      },
+    },
+  },
+  yAxis: {
+    alternateGridColor: undefined as string | undefined,
+    minorTickInterval: null as number | null,
+    gridLineColor: colors.border_light,
+    minorGridLineColor: colors.border_light,
+    lineWidth: 0,
+    tickWidth: 0,
+    labels: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+    title: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+  },
+}
+
+export default lineGraphTheme;