playbook_ui 13.28.0.pre.alpha.PBNTR296dropdownwithform2941 → 13.28.0.pre.alpha.PBNTR297gradientoverlay3029

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_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_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_overlay/_overlay.scss

@@ -0,0 +1,12 @@
+[class^=pb_overlay] {
+  .overlay-container {
+    position: relative;
+  }
+
+  .overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 1;
+  }
+}

data/app/pb_kits/playbook/pb_overlay/_overlay.tsx

@@ -0,0 +1,93 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+import defaultColors from "../tokens/exports/_colors.scss";
+
+type OverlayProps = {
+    aria?: { [key: string]: string },
+    className?: string,
+    children: React.ReactNode[] | React.ReactNode,
+    color: "white" | "bg_light" | "card_dark" | "bg_dark",
+    data?: { [key: string]: string },
+    htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+    id?: string,
+    layout: { [key: string]: string },
+}
+
+const previousOverlayDirectionMap: { [key: string]: string } = {
+    "bottom": "to top",
+    "top": "to bottom",
+    "left-right": "to right",
+    "top-bottom": "to top",
+}
+
+const subsequentOverlayDirectionMap: { [key: string]: string } = {
+    "bottom": "to top",
+    "top": "to bottom",
+    "left-right": "to left",
+    "top-bottom": "to bottom",
+}
+
+const Overlay = (props: OverlayProps) => {
+    const {
+        aria = {},
+        className,
+        children,
+        color = "white",
+        data = {},
+        htmlOptions = {},
+        id,
+        layout = { "bottom": "100%" },
+    } = props
+
+    const ariaProps = buildAriaProps(aria)
+    const dataProps = buildDataProps(data)
+    const classes = classnames(buildCss('pb_overlay'), globalProps(props), className)
+    const htmlProps = buildHtmlProps(htmlOptions)
+
+    const getPosition = () => {
+        return Object.keys(layout)[0]
+    }
+
+    const getSize = () => {
+        return Object.values(layout)[0]
+    }
+
+    const getPreviousOverlayDirection = () => {
+        return previousOverlayDirectionMap[getPosition()]
+    }
+
+    const getSubsequentOverlayDirection = () => {
+        return subsequentOverlayDirectionMap[getPosition()]
+    }
+
+    const hasSubsequentOverlay = getPosition() === "left-right" || getPosition() === "top-bottom"
+
+    const previousOverlay = `linear-gradient(${getPreviousOverlayDirection()}, ${defaultColors[color]} 0%, transparent ${getSize()})`
+    const subsequentOverlay = `linear-gradient(${getSubsequentOverlayDirection()}, ${defaultColors[color]} 0%, transparent ${getSize()})`
+
+    return (
+        <div
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            id={id}
+        >
+            <div className="overlay-container">
+                <div className="overlay"
+                    style={{ background: previousOverlay }} />
+
+                {children}
+
+                { hasSubsequentOverlay &&
+                    <div className="overlay"
+                        style={{ background: subsequentOverlay }} />
+                }
+            </div>
+        </div>
+    )
+}
+
+export default Overlay

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import {
+    Overlay,
+    Table,
+} from '../..'
+
+const TableExample = () => {
+    return (
+        <Table size="sm">
+            <thead>
+                <tr>
+                    <th>{'Column 1'}</th>
+                    <th>{'Column 2'}</th>
+                    <th>{'Column 3'}</th>
+                    <th>{'Column 4'}</th>
+                    <th>{'Column 5'}</th>
+                </tr>
+            </thead>
+            <tbody>
+                {Array.from({ length: 7 }, (_, index) => (
+                    <tr key={index}>
+                        {Array.from({ length: 5 }, (_, columnIndex) => (
+                            <td key={columnIndex}>{`Value ${columnIndex + 1}`}</td>
+                        ))}
+                    </tr>
+                ))}
+            </tbody>
+        </Table>
+    )
+}
+
+const OverlayDefault = () => (
+    <>
+        <Overlay>
+            <TableExample />
+        </Overlay>
+    </>
+)
+
+export default OverlayDefault

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md

@@ -0,0 +1,7 @@
+Overlays require a `color`, which sets the "start" (opaque) color of a gradient mask. Because this overlay is intended to reveal underlying content, the "end" color is fixed to transparent.
+
+The optional `layout` prop accepts a `position` and a `size` as a key:value pair object.
+
+The `position` prop sets the side where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
+
+The `size` prop accepts a percentage value as a string and literally translates to how much of the container is covered by the overlay. By default, `size` is set to `100%` so that your overlay covers the entire container with a smooth fade from `color` at its starting edge, fading to transparent and ending at the containers opposite edge.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import {
+    Overlay,
+    Card,
+    Flex,
+    FlexItem,
+} from '../..'
+
+const InlineCardsExample = () => {
+    return (
+        <Flex
+            columnGap="lg"
+            orientation="row"
+            overflowX="auto"
+        >
+            {Array.from({ length: 15 }, (_, index) => (
+                <FlexItem key={index}>
+                    <Card>{"Card Content"}</Card>
+                </FlexItem>
+            ))}
+        </Flex>
+    )
+}
+
+const OverlayMultiDirectional = () => (
+    <>
+        <Overlay
+            color="white"
+            layout={{"left-right": "10%"}}
+        >
+            <InlineCardsExample />
+        </Overlay>
+    </>
+)
+
+export default OverlayMultiDirectional

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.md

@@ -0,0 +1,5 @@
+Optionally, you can pass multi-directional options (`left-right` or `top-bottom`) to the `position` prop, which create multiple overlays. 
+
+Your `color` is still applied as the starting edge to both overlays, and each mask will fade to transparent moving toward its opposite edge, ending at the `size` percentage you set. 
+
+NOTE: Multi-directional overlays share the available container space, so passing a size greater than "50%" to a multi-directional overlay will cause your masks to overlap at the midline of your container. As a best practice, we do not recommend exceeding a size of 25% when using multi-directional overlays.

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

@@ -0,0 +1,4 @@
+examples:
+  react:
+  - overlay_default: Default
+  - overlay_multi_directional: Multi-directional

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

@@ -0,0 +1,2 @@
+export { default as OverlayDefault } from './_overlay_default.jsx'
+export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'