playbook_ui 13.28.0 → 13.29.0.pre.alpha.testingcollapsibleissue3052

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

@@ -0,0 +1 @@
+For a simplified version of the Draggable API fro the List kit, use the DraggableProvider to wrap the List use the `draggable` prop on List. The dev must manage state as shown and pass in id to the ListItem.

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

@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import { SelectableList, DraggableProvider } from "../../";
+
+// Initial items to be dragged
+const data = [
+  {
+    id: "1",
+    text: "Task 1",
+  },
+  {
+    id: "2",
+    text: "Task 2",
+  },
+  {
+    id: "3",
+    text: "Task 3",
+  },
+  {
+    id: "4",
+    text: "Task 4",
+  },
+];
+
+const DraggableWithSelectableList = (props) => {
+  const [initialState, setInitialState] = useState(data);
+
+  return (
+    <>
+    <DraggableProvider initialItems={data}
+        onChange={(items) => setInitialState(items)}
+    >
+          <SelectableList draggable 
+              variant="checkbox"
+              {...props}
+              >
+            {initialState.map(({ id, text }) => (
+                <SelectableList.Item id={id}
+                    key={id}
+                    label={text} 
+                    name={id} 
+                    value={id}
+                />
+            ))}
+          </SelectableList>
+    </DraggableProvider>
+    </>
+
+  );
+};
+
+export default DraggableWithSelectableList

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

@@ -0,0 +1,11 @@
+examples:
+  
+  
+  react:
+  - draggable_default: Default
+  - draggable_with_list: Draggable with List Kit
+  - draggable_with_selectable_list: Draggable with SelectableList Kit
+  - draggable_with_cards: Draggable with Cards
+  - draggable_multiple_containers: Dragging Across Multiple Containers
+  
+  

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

@@ -0,0 +1,5 @@
+export { default as DraggableDefault } from './_draggable_default.jsx'
+export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
+export { default as DraggableWithList } from './_draggable_with_list.jsx'
+export { default as DraggableWithSelectableList } from './_draggable_with_selectable_list.jsx'
+export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'

data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx

@@ -0,0 +1,65 @@
+import React, {useState} from "react"
+import { render, screen } from "../utilities/test-utils"
+
+import { Draggable, DraggableProvider, SelectableList } from '../'
+
+const testId = 'draggable'
+
+const data = [
+  {
+    id: "1",
+    text: "Task 1",
+  },
+  {
+    id: "2",
+    text: "Task 2",
+  },
+  {
+    id: "3",
+    text: "Task 3",
+  },
+  {
+    id: "4",
+    text: "Task 4",
+  },
+];
+
+
+const DefaultDraggableKit = () => {
+  const [initialState, setInitialState] = useState(data);
+
+  return (
+    <DraggableProvider
+        initialItems={data}
+        onChange={(items) => setInitialState(items)}
+    >
+      <Draggable
+          data={{ testid: testId }}
+          draggableItems={data}
+          onDragChange={(items) => setInitialItems(items)}
+      >
+        <Draggable.Container>
+          <SelectableList variant="checkbox">
+            {initialState.map(({ id, text }) => (
+              <Draggable.Item id={id} 
+                  key={id}
+              >
+                <SelectableList.Item label={text} 
+                    name={id} 
+                    value={id} 
+                />
+              </Draggable.Item>
+            ))}
+          </SelectableList>
+        </Draggable.Container>
+      </Draggable>
+    </DraggableProvider>
+  );
+};
+
+test('generated default kit and classname', () => {
+render(<DefaultDraggableKit/>)
+const kit = screen.getByTestId(testId)
+expect(kit).toBeInTheDocument()
+expect(kit).toHaveClass('pb_draggable')
+})

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import classnames from "classnames";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+  buildHtmlProps
+} from "../../utilities/props";
+import { globalProps } from "../../utilities/globalProps";
+import { DraggableContext } from "../context";
+
+type DraggableContainerProps = {
+  aria?: { [key: string]: string };
+  children?: React.ReactNode;
+  className?: string;
+  container?: any;
+  data?: { [key: string]: string };
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string;
+};
+
+const DraggableContainer = (props: DraggableContainerProps) => {
+  const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id } = props;
+
+  const { handleDragOver, handleDrop, activeContainer } = DraggableContext();
+
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
+
+  const classes = classnames(
+    buildCss("pb_draggable_container"),
+    `${activeContainer === container ? "active" : ""}`,
+    globalProps(props),
+    className
+  );
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
+        key={container}
+        onDragOver={(e) => handleDragOver(e, container)}
+        onDrop={() => handleDrop(container)}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default DraggableContainer;

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import classnames from "classnames";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+  buildHtmlProps
+} from "../../utilities/props";
+import { globalProps } from "../../utilities/globalProps";
+import { DraggableContext } from "../context";
+
+type DraggableItemProps = {
+  aria?: { [key: string]: string };
+  children?: React.ReactNode;
+  className?: string;
+  container?: any;
+  data?: { [key: string]: string };
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string;
+};
+
+const DraggableItem = (props: DraggableItemProps) => {
+  const { aria = {}, children, className, container, data = {}, htmlOptions = {},  id } = props;
+
+  const { isDragging, handleDragStart, handleDragEnter, handleDragEnd } =
+    DraggableContext();
+
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
+
+  const classes = classnames(
+    buildCss("pb_draggable_item"),
+    `${isDragging === id ? "is_dragging" : ""}`,
+    globalProps(props),
+    className
+  );
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        draggable
+        id={id}
+        key={id}
+        onDragEnd={() => handleDragEnd()}
+        onDragEnter={() => handleDragEnter(id, container)}
+        onDragStart={() => handleDragStart(id, container)}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default DraggableItem;

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

@@ -13,6 +13,15 @@
   ]
 %>
 
+<% 
+  example_dropdown_options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+
+%>
+
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
@@ -23,6 +32,7 @@
   <%= form.password_field :example_password_field, props: { label: true } %>
   <%= form.url_field :example_url_field, props: { label: true } %>
   <%= form.text_area :example_text_area, props: { label: true } %>
+  <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
   <%= form.check_box :example_checkbox,

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

@@ -107,7 +107,7 @@
   }
 
   & > [class^=pb_date_picker_kit]:not(:last-child) {
-    .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .flatpickr-wrapper {
+    .input_wrapper input, [class^=pb_text_input_kit] .date_picker_input_wrapper .flatpickr-wrapper {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
       border-right-width: 0;
@@ -115,7 +115,7 @@
   }
 
   & > [class^=pb_date_picker_kit]:not(:first-child) {
-    .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .flatpickr-wrapper {
+    .input_wrapper input, [class^=pb_text_input_kit] .date_picker_input_wrapper .flatpickr-wrapper {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
     }

data/app/pb_kits/playbook/pb_gauge/_gauge.tsx

@@ -13,11 +13,13 @@ import typography from "../tokens/exports/_typography.scss";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 import { GenericObject } from "../types";
+import { merge } from 'lodash'
 
 type GaugeProps = {
   aria: { [key: string]: string };
   className?: string;
   chartData?: { name: string; value: number[] | number }[];
+  customOptions?: Partial<Highcharts.Options>;
   dark?: boolean;
   data?: { [key: string]: string };
   disableAnimation?: boolean;
@@ -41,6 +43,7 @@ type GaugeProps = {
 const Gauge = ({
   aria = {},
   chartData,
+  customOptions = {},
   dark = false,
   data = {},
   disableAnimation = false,
@@ -175,7 +178,7 @@ const Gauge = ({
       },
     };
 
-    setOptions({ ...staticOptions });
+    setOptions(merge(staticOptions, customOptions));
 
     if (document.querySelector(".prefix")) {
       document.querySelectorAll(".prefix").forEach((prefix) => {

data/app/pb_kits/playbook/pb_gauge/gauge.rb

@@ -5,6 +5,7 @@ module Playbook
     class Gauge < Playbook::KitBase
       prop :chart_data, type: Playbook::Props::Array,
                         default: [{ name: "Name", value: 0 }]
+      prop :custom_options, default: {}
       prop :style, type: Playbook::Props::Enum,
                    values: %w[solidgauge],
                    default: "solidgauge"
@@ -22,7 +23,7 @@ module Playbook
       prop :max, type: Playbook::Props::Numeric, default: 100
       prop :colors, type: Playbook::Props::Array, default: []
 
-      def chart_options
+      def standard_options
         {
           id: id,
           chartData: chart_data,
@@ -43,6 +44,10 @@ module Playbook
         }
       end
 
+      def chart_options
+        standard_options.deep_merge(custom_options)
+      end
+
       def classname
         generate_classname("pb_gauge_kit")
       end

data/app/pb_kits/playbook/pb_gauge/gauge.test.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render, screen } from '../utilities/test-utils';
+import Gauge from './_gauge';
+
+beforeEach(() => {
+  // Silences error logs within the test suite.
+  jest.spyOn(console, 'error');
+  jest.spyOn(console, 'warn');
+  console.error.mockImplementation(() => {});
+  console.warn.mockImplementation(() => {});
+});
+
+afterEach(() => {
+  console.error.mockRestore();
+  console.warn.mockRestore();
+});
+
+const testId = 'gauge1';
+
+test('uses exact classname', () => {
+  const data = [
+    { name: 'Name', value: 45 },
+  ]
+  render(
+    <Gauge
+        chartData={data}
+        data={{ testid: testId }}
+        id='gaugeid'
+    />
+  );
+ 
+  const kit = screen.getByTestId(testId);
+  expect(kit).toHaveClass('pb_gauge_kit');
+});
+

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

@@ -81,9 +81,10 @@ module Playbook
 
       def asset_path
         return unless Rails.application.config.respond_to?(:icon_path)
-        return unless Dir.entries(Rails.application.config.icon_path).include? "#{icon}.svg"
 
-        Rails.root.join(Rails.application.config.icon_path, "#{icon}.svg")
+        base_path = Rails.application.config.icon_path
+        icon_path = Dir.glob(Rails.root.join(base_path, "**", "#{icon}.svg")).first
+        icon_path if icon_path && File.exist?(icon_path)
       end
 
       def render_svg

data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx

@@ -8,6 +8,7 @@ import Highcharts from "highcharts";
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
+import { merge } from 'lodash'
 
 type LineGraphProps = {
   align?: "left" | "right" | "center";
@@ -21,6 +22,7 @@ type LineGraphProps = {
     name: string;
     data: number[];
   }[];
+  customOptions?: Partial<Highcharts.Options>;
   gradient?: boolean;
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id: string;
@@ -45,6 +47,7 @@ const LineGraph = ({
   data = {},
   align = "center",
   className = "pb_bar_graph",
+  customOptions = {},
   dark = false,
   gradient = false,
   type = "line",
@@ -130,16 +133,19 @@ const LineGraph = ({
     staticOptions.plotOptions.series.events = { legendItemClick: () => false };
   }
 
+  const filteredProps: any = {...props};
+ delete filteredProps.verticalAlign;
+
   const [options, setOptions] = useState({});
 
   useEffect(() => {
-    setOptions({ ...staticOptions });
+    setOptions(merge(staticOptions, customOptions));
   }, [chartData]);
 
   return (
     <HighchartsReact
         containerProps={{
-        className: classnames(globalProps(props), className),
+        className: classnames(globalProps(filteredProps), className),
         id: id,
         ...ariaProps,
         ...dataProps,

data/app/pb_kits/playbook/pb_line_graph/lineGraph.test.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { render, screen } from '../utilities/test-utils';
+import LineGraph from './_line_graph';
+
+beforeEach(() => {
+  // Silences error logs within the test suite.
+  jest.spyOn(console, 'error');
+  jest.spyOn(console, 'warn');
+  console.error.mockImplementation(() => {});
+  console.warn.mockImplementation(() => {});
+});
+
+afterEach(() => {
+  console.error.mockRestore();
+  console.warn.mockRestore();
+});
+
+const testId = 'linechart1';
+
+test('uses exact classname', () => {
+  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],
+  }]
+  render(
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        data={{ testid: testId }}
+        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}
+    />
+  );
+ 
+  const kit = screen.getByTestId(testId);
+  expect(kit).toHaveClass('pb_bar_graph');
+});

data/app/pb_kits/playbook/pb_line_graph/line_graph.rb

@@ -9,6 +9,7 @@ module Playbook
       prop :axis_title
       prop :chart_data, type: Playbook::Props::Array,
                         default: []
+      prop :custom_options, default: {}
       prop :gradient, type: Playbook::Props::Boolean,
                       default: false
       prop :point_start, type: Playbook::Props::Numeric
@@ -38,7 +39,7 @@ module Playbook
         gradient ? "area" : "line"
       end
 
-      def chart_options
+      def standard_options
         {
           align: align,
           id: id,
@@ -64,6 +65,26 @@ module Playbook
         }
       end
 
+      def chart_options
+        standard_options.deep_merge(custom_options)
+      end
+
+      def vertical_align_props
+        if vertical_align
+          if object.vertical_align
+            original_result = super
+            class_to_remove = "vertical_align_#{object.vertical_align}"
+
+            modified_result = original_result.gsub(class_to_remove, "").strip
+            modified_result.empty? ? nil : modified_result
+          else
+            super
+          end
+        else
+          super
+        end
+      end
+
       def classname
         generate_classname("pb_line_graph")
       end

data/app/pb_kits/playbook/pb_list/_list.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import classnames from "classnames";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
+import Draggable from "../pb_draggable/_draggable";
 
 type ListProps = {
   aria?: { [key: string]: string };
@@ -9,6 +10,7 @@ type ListProps = {
   className?: string;
   children: React.ReactNode[] | React.ReactNode;
   dark?: boolean;
+  draggable?: boolean;
   data?: Record<string, unknown>;
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
@@ -30,6 +32,7 @@ const List = (props: ListProps) => {
     className,
     dark = false,
     data = {},
+    draggable = false,
     htmlOptions = {},
     id,
     layout = "",
@@ -51,7 +54,7 @@ const List = (props: ListProps) => {
   const childrenWithProps = React.Children.map(
     children,
     (child: React.ReactElement) => {
-      return React.cloneElement(child, { text, variant });
+      return React.cloneElement(child, { text, variant, draggable });
     }
   );
   const ariaProps = buildAriaProps(aria);
@@ -69,7 +72,11 @@ const List = (props: ListProps) => {
   );
 
   return (
-    <div className={classes}>
+    <>
+    {
+      draggable ? (
+        <Draggable.Container>
+     <div className={classes}>
       {ordered ? (
         <ol
             {...ariaProps}
@@ -96,6 +103,40 @@ const List = (props: ListProps) => {
         </ul>
       )}
     </div>
+        </Draggable.Container>
+      ) :
+      (
+<div className={classes}>
+      {ordered ? (
+        <ol
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={className}
+            id={id}
+            role={role}
+            tabIndex={tabIndex}
+        >
+          {childrenWithProps}
+        </ol>
+      ) : (
+        <ul
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={className}
+            id={id}
+            role={role}
+            tabIndex={tabIndex}
+        >
+          {childrenWithProps}
+        </ul>
+      )}
+    </div>
+      )
+    }
+    
+    </>
   );
 };