playbook_ui 13.28.0 → 13.29.0.pre.alpha.PBNTR329draggablev33059

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

@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+import {
+  Flex,
+  Badge,
+  Title,
+  Icon,
+  Draggable,
+  DraggableProvider,
+  Card,
+  Caption,
+} from "../../";
+
+// Initial items to be dragged
+const data = [
+  {
+    id: "21",
+    text: "Joe Black",
+  },
+  {
+    id: "22",
+    text: "Nancy White",
+  },
+  {
+    id: "23",
+    text: "Bill Green",
+  },
+];
+
+const DraggableWithCards = (props) => {
+  const [initialState, setInitialState] = useState(data);
+
+  return (
+    <DraggableProvider
+        initialItems={data}
+        onReorder={(items) => setInitialState(items)}
+    >
+        <Draggable.Container  {...props}>
+          {initialState.map(({ id, text }) => (
+              <Card
+                  dragHandle
+                  draggableItem
+                  highlight={{ color: "primary", position: "side" }}
+                  id={id}
+                  key={id}
+                  marginBottom="xs"
+                  padding="xs"
+              >
+                <Flex alignItems="stretch" 
+                    flexDirection="column"
+                >
+                  <Flex gap="xs">
+                    <Title size={4} 
+                        text={text} 
+                    />
+                    <Badge 
+                        text="35-12345" 
+                        variant="primary" 
+                    />
+                  </Flex>
+                      <Caption 
+                          size="xs" 
+                          text="8:00A • Township Name • 90210" 
+                      />
+                  <Flex gap="xxs" 
+                      spacing="between"
+                  >
+                    <Flex gap="xxs">
+                      <Caption color="error" 
+                          size="xs"
+                      >
+                        <Icon icon="house-circle-exclamation" />
+                      </Caption>
+                      <Caption color="success" 
+                          size="xs">
+                        <Icon icon="file-circle-check" />
+                      </Caption>
+                    </Flex>
+                    <Flex>
+                      <Badge rounded 
+                          text="Schedule QA" 
+                          variant="warning" 
+                       />
+                      <Badge rounded 
+                          text="Flex" 
+                          variant="primary" 
+                      />
+                      <Badge rounded 
+                          text="R99" 
+                          variant="primary" 
+                      />
+                    </Flex>
+                  </Flex>
+                </Flex>
+              </Card>
+          ))}
+        </Draggable.Container>
+    </DraggableProvider>
+  );
+};
+
+export default DraggableWithCards;

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

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import { DraggableProvider, List, ListItem } from "../../";
+
+// Initial items to be dragged
+const data = [
+  {
+    id: "31",
+    text: "Philadelphia",
+  },
+  {
+    id: "32",
+    text: "New Jersey",
+  },
+  {
+    id: "33",
+    text: "Maryland",
+  },
+  {
+    id: "34",
+    text: "Connecticut",
+  },
+];
+
+const DraggableWithList = (props) => {
+  const [initialState, setInitialState] = useState(data);
+
+
+  return (
+    <>
+    <DraggableProvider initialItems={data}
+        onReorder={(items) => setInitialState(items)}
+    >
+        <List draggable
+            {...props}
+        >
+            {initialState.map(({ id, text }) => (
+                <ListItem id={id}
+                    key={id}
+                >
+                    {text}
+                </ListItem>
+            ))}
+        </List>
+    </DraggableProvider>
+    </>
+
+  );
+};
+
+export default DraggableWithList;

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

@@ -0,0 +1 @@
+For a simplified version of the Draggable API for the List kit, use the DraggableProvider to wrap the List kit and 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: "41",
+    text: "Task 1",
+  },
+  {
+    id: "42",
+    text: "Task 2",
+  },
+  {
+    id: "43",
+    text: "Task 3",
+  },
+  {
+    id: "44",
+    text: "Task 4",
+  },
+];
+
+const DraggableWithSelectableList = (props) => {
+  const [initialState, setInitialState] = useState(data);
+
+  return (
+    <>
+    <DraggableProvider initialItems={data}
+        onReorder={(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,63 @@
+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}
+        onReorder={(items) => setInitialState(items)}
+    >
+      <Draggable
+          data={{ testid: testId }}
+      >
+        <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');
+});