playbook_ui 13.28.0.pre.alpha.play829selectablecardalignment2978 → 13.29.0.pre.alpha.PBNTR329draggablev33059

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_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>
+      )
+    }
+    
+    </>
   );
 };
 

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

@@ -2,12 +2,16 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
+import Icon from '../pb_icon/_icon'
+import Body from '../pb_body/_body'
+import Draggable from '../pb_draggable/_draggable'
 
 type ListItemProps = {
   aria?: { [key: string]: string },
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
   data?: Record<string, unknown>,
+  dragHandle?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   tabIndex?: number,
@@ -19,6 +23,8 @@ const ListItem = (props: ListItemProps) => {
     children,
     className,
     data = {},
+    draggable = false,
+    dragHandle = true,
     htmlOptions = {},
     id,
     tabIndex,
@@ -35,16 +41,46 @@ const ListItem = (props: ListItemProps) => {
 
   return (
     <>
-      <li
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
-          className={classes}
-          id={id}
-          tabIndex={tabIndex}
-      >
-        {children}
-      </li>
+    {
+      draggable ? (
+        <Draggable.Item id={id}>
+        <li
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            id={id}
+            tabIndex={tabIndex}
+        >
+          {
+            dragHandle && (
+              <span style={{verticalAlign: 'middle'}}>
+                <Body color="light">
+                <Icon 
+                    icon="grip-dots-vertical"
+                    verticalAlign="middle" 
+                />
+                </Body>
+              </span>
+            )
+          }
+          {children}
+        </li>
+        </Draggable.Item>
+        ) : (
+        <li
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            id={id}
+            tabIndex={tabIndex}
+        >
+          {children}
+        </li>
+      )
+    }
+      
     </>
   )
 }

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -28,7 +28,7 @@ $pb_selectable_card_border: 2px;
     padding: $space_sm;
     margin-bottom: $space_sm;
     cursor: pointer;
-    outline: 1px solid transparant;
+    outline: 1px solid transparent; 
 
     @media (hover:hover) {
       &:hover {

data/app/pb_kits/playbook/pb_selectable_list/_item.tsx

@@ -7,14 +7,16 @@ import { globalProps } from "../utilities/globalProps";
 import Checkbox from "../pb_checkbox/_checkbox";
 import ListItem from "../pb_list/_list_item";
 import Radio from "../pb_radio/_radio";
+import { GenericObject } from "../types";
 
 export type SelectableListItemProps = {
   aria?: { [key: string]: string };
   children: React.ReactNode[] | React.ReactNode;
   checked?: boolean;
   className?: string;
-  data?: object;
+  data?: GenericObject;
   defaultChecked?: boolean;
+  dragHandle?: boolean;
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   label?: string;
@@ -31,6 +33,7 @@ const SelectableListItem = ({
   children,
   className,
   data = {},
+  dragHandle = true,
   defaultChecked,
   htmlOptions = {},
   id,
@@ -39,7 +42,7 @@ const SelectableListItem = ({
   name = "",
   value = "",
   variant = "checkbox",
-  onChange = () => {},
+  onChange = () => {void 0},
   ...props
 }: SelectableListItemProps) => {
   const ariaProps = buildAriaProps(aria);
@@ -61,28 +64,31 @@ const SelectableListItem = ({
 
   return (
     <ListItem
-      {...props}
-      className={classnames(checkedState ? "checked_item" : "", className)}
+        {...props}
+        className={classnames(checkedState ? "checked_item" : "", className)}
+        dragHandle={dragHandle}
+        id={id}
     >
       <div 
-        {...ariaProps} 
-        {...dataProps}
-        {...htmlProps} 
-        className={classes}
+          {...ariaProps} 
+          {...dataProps}
+          {...htmlProps} 
+          className={classes}
       >
         {variant == "checkbox" && (
           <>
             <Checkbox
-              checked={checkedState}
-              id={id}
-              name={name}
-              onChange={handleChecked}
-              // eslint suppressor, text is needed to display on screen
-              //@ts-ignore
-              text={label || (text && false)}
-              type="checkbox"
-              value={value}
-              {...props}
+                checked={checkedState}
+                id={id}
+                name={name}
+                onChange={handleChecked}
+                // eslint suppressor, text is needed to display on screen
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                //@ts-ignore
+                text={label || (text && false)}
+                type="checkbox"
+                value={value}
+                {...props}
             />
             {children}
           </>
@@ -90,16 +96,17 @@ const SelectableListItem = ({
         {variant == "radio" && (
           <>
             <Radio
-              defaultChecked={defaultChecked}
-              id={id}
-              label={label}
-              name={name}
-              onChange={onChange}
-              //@ts-ignore
-              text={label}
-              type="radio"
-              value={value}
-              {...props}
+                defaultChecked={defaultChecked}
+                id={id}
+                label={label}
+                name={name}
+                onChange={onChange}
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                //@ts-ignore
+                text={label}
+                type="radio"
+                value={value}
+                {...props}
             />
             {children}
           </>

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx

@@ -14,6 +14,7 @@ type SelectableListProps = {
   children?: React.ReactElement[],
   className?: string,
   data?: GenericObject,
+  draggable?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   variant?: 'checkbox' | 'radio',
@@ -25,6 +26,7 @@ const SelectableList = (props: SelectableListProps) => {
     children,
     className,
     data = {},
+    draggable = false,
     htmlOptions = {},
     id,
   } = props
@@ -66,7 +68,9 @@ const SelectableList = (props: SelectableListProps) => {
         className={classes}
         id={id}
     >
-      <List variant={props.variant}>
+      <List draggable={draggable}
+          variant={props.variant}
+      >
         {selectableListItems}
       </List>
     </div>

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -23,6 +23,7 @@ type TableProps = {
     disableHover?: boolean,
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string,
+    outerPadding?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
     responsive?: "collapse" | "scroll" | "none",
     singleLine?: boolean,
     size?: "sm" | "md" | "lg",
@@ -45,6 +46,7 @@ const Table = (props: TableProps) => {
         disableHover = false,
         htmlOptions = {},
         id,
+        outerPadding = '',
         responsive = 'collapse',
         singleLine = false,
         size = 'sm',
@@ -59,6 +61,8 @@ const Table = (props: TableProps) => {
     const htmlProps = buildHtmlProps(htmlOptions)
     const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
     const verticalBorderCss = verticalBorder ? 'vertical-border' : ''
+    const spaceCssName = outerPadding !== 'none' ? 'space_' : ''
+    const outerPaddingCss = outerPadding ? `outer_padding_${spaceCssName}${outerPadding}` : ''
     const isTableTag = tag === 'table'
 
     const classNames = classnames(
@@ -73,6 +77,7 @@ const Table = (props: TableProps) => {
             'no-hover': disableHover,
             'sticky-header': sticky,
             'striped': striped,
+            [outerPaddingCss]: outerPadding !== '',
         },
         globalProps(props),
         tableCollapseCss,