playbook_ui 13.28.0 → 13.29.0.pre.alpha.PBNTR329draggablev33059

data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx

@@ -10,6 +10,7 @@ import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import treemap from 'highcharts/modules/treemap'
+import { merge } from 'lodash'
 
 type TreemapChartProps = {
   chartData: {
@@ -21,6 +22,7 @@ type TreemapChartProps = {
   }[];
   className?: string;
   colors: string[];
+  customOptions?: Partial<Highcharts.Options>;
   dark?: boolean;
   drillable: boolean;
   grouped: boolean;
@@ -39,6 +41,7 @@ const TreemapChart = ({
   data = {},
   chartData,
   colors,
+  customOptions = {},
   dark = false,
   drillable = false,
   grouped = false,
@@ -96,20 +99,20 @@ const TreemapChart = ({
 
   useEffect(() => {
     
-    setOptions({ ...staticOptions });
+    setOptions(merge(staticOptions, customOptions));
   }, [chartData]);
 
   return (
     <HighchartsReact
-      containerProps={{
-        className: classnames(globalProps(props), "pb_treemap_chart"),
-        id: id,
-        ...ariaProps,
-        ...dataProps,
-        ...htmlProps
+        containerProps={{
+          className: classnames(globalProps(props), "pb_treemap_chart"),
+          id: id,
+          ...ariaProps,
+          ...dataProps,
+          ...htmlProps
       }}
-      highcharts={Highcharts}
-      options={options}
+        highcharts={Highcharts}
+        options={options}
     />
   );
 };

data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { render, screen } from '../utilities/test-utils';
+import TreemapChart from './_treemap_chart';
+
+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 = 'treemapchart1';
+
+test('uses exact classname', () => {
+  const data = [
+    {
+      name: "Pepperoni",
+      parent: "Toppings",
+      value: 600,
+    }, {
+      name: "Cheese",
+      parent: "Toppings",
+      value: 510,
+    }, {
+      name: "Mushroom",
+      parent: "Toppings",
+      value: 330,
+    },{
+      name: "Onions",
+      parent: "Toppings",
+      value: 250,
+    }, {
+      name: "Olives",
+      parent: "Toppings",
+      value: 204,
+    }, {
+      name: "Pineapple",
+      parent: "Toppings",
+      value: 90,
+    }, {
+      name: "Pizza Toppings",
+      id: "Toppings",
+    },
+  ]
+  render(
+    <TreemapChart
+        chartData={data}
+        data={{ testid: testId }}
+        id="tree-map-id"
+    />
+  );
+ 
+  const kit = screen.getByTestId(testId);
+  expect(kit).toHaveClass('pb_treemap_chart');
+});

data/app/pb_kits/playbook/pb_treemap_chart/treemap_chart.rb

@@ -7,6 +7,7 @@ module Playbook
                         default: []
       prop :colors, type: Playbook::Props::Array,
                     default: []
+      prop :custom_options, default: {}
       prop :drillable, type: Playbook::Props::Boolean, default: false
       prop :grouped, type: Playbook::Props::Boolean, default: false
       prop :height
@@ -19,7 +20,7 @@ module Playbook
         "treemap"
       end
 
-      def chart_options
+      def standard_options
         {
           chartData: chart_data,
           className: classname,
@@ -35,6 +36,10 @@ module Playbook
         }
       end
 
+      def chart_options
+        standard_options.deep_merge(custom_options)
+      end
+
       def classname
         generate_classname("pb_treemap_chart")
       end

data/app/pb_kits/playbook/playbook-doc.js

@@ -34,6 +34,7 @@ import * as DateYearStacked from 'pb_date_year_stacked/docs'
 import * as Detail from 'pb_detail/docs'
 import * as Dialog from 'pb_dialog/docs'
 import * as DistributionBarDocs from 'pb_distribution_bar/docs'
+import * as Draggable from 'pb_draggable/docs'
 import * as Dropdown from 'pb_dropdown/docs'
 import * as FileUpload from 'pb_file_upload/docs'
 import * as Filter from 'pb_filter/docs'
@@ -137,6 +138,7 @@ WebpackerReact.registerComponents({
   ...Detail,
   ...Dialog,
   ...DistributionBarDocs,
+  ...Draggable,
   ...Dropdown,
   ...FileUpload,
   ...Filter,

data/app/pb_kits/playbook/tokens/_vertical_align.scss

@@ -0,0 +1,18 @@
+$vertical_align_baseline:   baseline !default;
+$vertical_align_sub:         sub !default;
+$vertical_align_super:       super !default;
+$vertical_align_text_top:    text-top !default; 
+$vertical_align_text_bottom: text-bottom !default;
+$vertical_align_middle:      middle !default;
+$vertical_align_top:         top !default;
+$vertical_align_bottom:      bottom !default;
+$vertical_align: (
+  baseline:         $vertical_align_baseline,
+  sub:              $vertical_align_sub,
+  super:            $vertical_align_super,
+  text_top:         $vertical_align_text_top,
+  text_bottom:      $vertical_align_text_bottom,
+  middle:           $vertical_align_middle,
+  top:              $vertical_align_top,
+  bottom:           $vertical_align_bottom
+);

data/app/pb_kits/playbook/utilities/_vertical_align.scss

@@ -0,0 +1,16 @@
+@import "../tokens/vertical_align";
+
+
+$vertical_align_classes: (
+  vertical_align_baseline: $vertical_align_baseline,
+  vertical_align_sub: $vertical_align_sub,
+  vertical_align_super: $vertical_align_super,
+  vertical_align_text_top: $vertical_align_text_top,
+  vertical_align_text_bottom: $vertical_align_text_bottom,
+  vertical_align_middle: $vertical_align_middle,
+  vertical_align_top: $vertical_align_top,
+  vertical_align_bottom: $vertical_align_bottom,
+);
+
+
+@include global_props_responsive_css($vertical_align, 'vertical_align', 'vertical-align');

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -156,6 +156,10 @@ type Truncate = {
   truncate?: TruncateType
 }
 
+type VerticalAlign =  {
+  verticalAlign?: "baseline" | "super" | "top" | "middle" | "bottom" | "sub" | "text-top" | "text-bottom"
+}
+
 type ZIndexType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
 type ZIndexResponsiveType = {[key: string]: ZIndexType}
 type ZIndex = {
@@ -167,7 +171,7 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
   LineHeight & Margin & MaxWidth & NumberSpacing & Order & Overflow & Padding &
-  Position & Shadow & TextAlign & Truncate & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
+  Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
@@ -470,6 +474,13 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     } else {
       return textAlign ? `text_align_${textAlign} ` : ''
     }
+  },
+  verticalAlignProps: ({ verticalAlign }: VerticalAlign) => {
+    if (typeof verticalAlign === 'object') {
+      return getResponsivePropClasses(verticalAlign, 'vertical_align')
+    } else {
+      return verticalAlign ? `vertical_align_${verticalAlign} ` : ''
+    }
   }
 }
 

data/dist/menu.yml

@@ -352,6 +352,10 @@ kits:
         platforms: *web
         description: 
         status: "stable"
+      - name: "draggable"
+        platforms: *react_only
+        description:
+        status: "beta"
   - name: message_text_patterns
     description: 
     components:
@@ -463,5 +467,4 @@ kits:
         status: "stable"
       - name: "user"
         platforms: *web
-        description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
-        status: "stable"
+        description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.