playbook_ui 10.25.1 → 10.26.0.pre.alpha5

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import TreemapChart from '../_treemap_chart'
+
+const chartData = [
+  {
+    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",
+  },
+]
+
+const TreemapChartTooltip = (props) => (
+  <div>
+    <TreemapChart
+        chartData={chartData}
+        id="treemap-tooltip"
+        title="Favored Pizza Toppings"
+        tooltipHtml={"<p>Custom tooltip for {point.name} <br/>with value: {point.value}</p>"}
+        {...props}
+    />
+  </div>
+)
+
+export default TreemapChartTooltip

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.md

@@ -0,0 +1,3 @@
+A custom tooltip format can be specified. The desired format can be passed as a `string` of custom HTML to the `tooltipHtml` prop.
+
+`{point.name}` and `{point.value}` are useful values that can be referenced for each point in the graph.

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

@@ -0,0 +1,15 @@
+examples:
+
+  rails:
+  - treemap_chart_default: Default
+  - treemap_chart_grouped_data: Grouped Data
+  - treemap_chart_drillable: Drillable
+  - treemap_chart_colors: Color Overrides
+  - treemap_chart_tooltip: Tooltip Customization
+
+  react:
+  - treemap_chart_default: Default
+  - treemap_chart_grouped_data: Grouped Data
+  - treemap_chart_drillable: Drillable
+  - treemap_chart_colors: Color Overrides
+  - treemap_chart_tooltip: Tooltip Customization

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

@@ -0,0 +1,5 @@
+export { default as TreemapChartDefault } from './_treemap_chart_default.jsx'
+export { default as TreemapChartGroupedData } from './_treemap_chart_grouped_data.jsx'
+export { default as TreemapChartDrillable } from './_treemap_chart_drillable.jsx'
+export { default as TreemapChartColors } from './_treemap_chart_colors.jsx'
+export { default as TreemapChartTooltip } from './_treemap_chart_tooltip.jsx'

data/app/pb_kits/playbook/pb_treemap_chart/treemap_chart.html.erb

@@ -0,0 +1 @@
+<%= react_component('TreemapChart', object.chart_options) %>

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

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTreemapChart
+    class TreemapChart < Playbook::KitBase
+      prop :chart_data, type: Playbook::Props::Array,
+                        default: []
+      prop :colors, type: Playbook::Props::Array,
+                    default: []
+      prop :drillable, type: Playbook::Props::Boolean, default: false
+      prop :grouped, type: Playbook::Props::Boolean, default: false
+      prop :height
+      prop :title, default: ""
+      prop :tooltip_html, default: '<span style="font-weight: bold; color:{point.color};">&#9679; </span>
+                                      {point.name}: ' + '<b>{point.value}
+                                    </b>'
+
+      def chart_type
+        "treemap"
+      end
+
+      def chart_options
+        {
+          chartData: chart_data,
+          className: classname,
+          colors: colors,
+          dark: dark ? "dark" : "",
+          drillable: drillable,
+          grouped: grouped,
+          height: height,
+          id: id,
+          title: title,
+          tooltipHtml: tooltip_html,
+          type: chart_type,
+        }
+      end
+
+      def classname
+        generate_classname("pb_treemap_chart")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_user/{_user.jsx → _user.tsx}

@@ -1,10 +1,9 @@
-/* @flow */
 
 import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 
 import Avatar from '../pb_avatar/_avatar'
 import Body from '../pb_body/_body'
@@ -12,19 +11,19 @@ import Title from '../pb_title/_title'
 
 type UserProps = {
   align?: "left" | "center" | "right",
-  aria?: object,
-  avatar?: Boolean,
-  avatarUrl?: String,
-  className?: String,
+  aria?: {[key: string]: string},
+  avatar?: boolean,
+  avatarUrl?: string,
+  className?: string,
   dark?: boolean,
-  data?: object,
-  id?: String,
-  name?: String,
+  data?: {[key: string]: string},
+  id?: string,
+  name?: string,
   orientation?: "horiztonal" | "vertical",
   size?: "sm" | "md" | "lg",
-  territory?: String,
-  title?: String,
-}
+  territory?: string,
+  title?: string,
+} & GlobalProps
 
 const User = (props: UserProps) => {
   const {
@@ -43,14 +42,8 @@ const User = (props: UserProps) => {
     title = '',
   } = props
 
-  const avatarSizeMap = {
-    lg: 'xl',
-    md: 'md',
-    sm: 'sm',
-  }
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
+  const dataProps: {[key: string]: string} = buildDataProps(data)
+  const ariaProps: {[key: string]: string} = buildAriaProps(aria)
 
   const classes = classnames(
     buildCss('pb_user_kit', align, orientation, size),
@@ -58,6 +51,8 @@ const User = (props: UserProps) => {
     className,
   )
 
+  const avatarPresent = avatar || avatarUrl
+
   return (
     <div
         {...ariaProps}
@@ -65,14 +60,14 @@ const User = (props: UserProps) => {
         className={classes}
         id={id}
     >
-      <If condition={avatar || avatarUrl}>
+      { avatarPresent &&
         <Avatar
             imageUrl={avatarUrl}
             name={name}
-            size={avatarSizeMap[size]}
+            size={size}
+            status={null}
         />
-      </If>
-
+      }
       <div className="content_wrapper">
         <Title
             dark={dark}
@@ -82,6 +77,7 @@ const User = (props: UserProps) => {
         <Body
             color="light"
             dark={dark}
+            variant={null}
         >
           {territory === '' ? title : `${territory} • ${title}`}
         </Body>

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

@@ -91,6 +91,7 @@ import * as Title from 'pb_title/docs'
 import * as TitleCount from 'pb_title_count/docs'
 import * as TitleDetail from 'pb_title_detail/docs'
 import * as Toggle from 'pb_toggle/docs'
+import * as TreemapChart from 'pb_treemap_chart/docs'
 import * as Typeahead from 'pb_typeahead/docs'
 import * as User from 'pb_user/docs'
 import * as UserBadge from 'pb_user_badge/docs'
@@ -185,6 +186,7 @@ WebpackerReact.setup({
   ...TitleCount,
   ...TitleDetail,
   ...Toggle,
+  ...TreemapChart,
   ...Typeahead,
   ...User,
   ...UserBadge,

data/app/pb_kits/playbook/playbook-rails-react-bindings.js

@@ -13,6 +13,7 @@ import Legend from './pb_legend/_legend'
 import LineGraph from './pb_line_graph/_line_graph'
 import Passphrase from './pb_passphrase/_passphrase'
 import RichTextEditor from './pb_rich_text_editor/_rich_text_editor'
+import TreemapChart from './pb_treemap_chart/_treemap_chart'
 import Typeahead from './pb_typeahead/_typeahead'
 
 WebpackerReact.registerComponents({
@@ -26,6 +27,7 @@ WebpackerReact.registerComponents({
   LineGraph,
   Passphrase,
   RichTextEditor,
+  TreemapChart,
   Typeahead,
 })
 

data/app/pb_kits/playbook/plugins/pb_chart.js

@@ -7,6 +7,7 @@ import colors from '../tokens/exports/_colors.scss'
 import pie from 'highcharts/modules/variable-pie'
 import highchartsMore from 'highcharts/highcharts-more'
 import solidGauge from 'highcharts/modules/solid-gauge'
+import treemap from 'highcharts/modules/treemap'
 
 pie(Highcharts)
 
@@ -63,6 +64,8 @@ class pbChart {
       this.setupPieChart(options)
     } else if (this.options.type == 'gauge') {
       this.setupGauge(options)
+    } else if (this.options.type == 'treemap') {
+      this.setupTreemap(options)
     } else {
       this.setupChart(options)
     }
@@ -191,6 +194,37 @@ class pbChart {
     })
   }
 
+  setupTreemap(options) {
+    treemap(Highcharts)
+    this.setupTheme()
+    options.dark ? Highcharts.setOptions(highchartsDarkTheme) :  Highcharts.setOptions(highchartsTheme)
+
+    Highcharts.chart(this.defaults.id, {
+      title: {
+        text: this.defaults.title,
+      },
+      chart: {
+        height: this.defaults.height,
+        type: this.defaults.type,
+      },
+      credits: false,
+      series: [{
+        data: this.defaults.chartData,
+      }],
+      plotOptions: {
+        treemap: {
+          allowTraversingTree: this.defaults.drillable,
+          colorByPoint: !this.defaults.grouped,
+          colors: options.colors !== undefined && options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
+        },
+      },
+      tooltip: {
+        pointFormat: this.defaults.tooltipHtml,
+        useHTML: true,
+      },
+    })
+  }
+
   setupChart(options) {
     this.setupTheme()
     const configOptions = {

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

@@ -9,6 +9,7 @@ $royal:               #0056CF;
 $purple:              #9E64E9;
 $teal:                #00C4D7;
 $red:                 #FF2229;
+$red_dark:            #ff4a50;
 $yellow:              #F9BB00;
 $green:               #00CA74;
 $orange:              #FD804C;
@@ -154,7 +155,7 @@ $data_colors: (
 $success:             $green;
 $warning:             $yellow;
 $error:               $red;
-$error_dark:          lighten($error, 5%);
+$error_dark:          $red_dark;
 $error_dark_body:     lighten($error_dark, 2%);
 $info:                $teal;
 $neutral:             $slate;

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

@@ -0,0 +1,13 @@
+$display_inline: inline;
+$display_block: block;
+$display_inline_block: inline-block;
+$display_flex: flex;
+$display_none: none;
+$display_inline_flex: inline-flex;
+$displays: (
+  display_none:   $display_none,
+  display_flex: $display_flex,
+  display_inline: $display_inline,
+  display_inline_block: $display_inline_block,
+  display_block: $display_block
+);

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

@@ -17,6 +17,26 @@ $breakpoints: (
   xl: $screen-xl-min
 );
 
+$breakpoints_grid: (
+    xs: (
+        max: $screen-xs-min
+    ),
+    sm: (
+        min: $screen-sm-min,
+        max: $screen-md-max
+    ),
+    md: (
+        min: $screen-md-min,
+        max: $screen-lg-max
+    ),
+    lg: (
+        min: $screen-lg-min,
+        max: $screen-xl-max
+    ),
+    xl: (
+        min: $screen-xl-min,
+    )
+);
 
 @function breakpoint($breakpoint_name) {
   @return map-get($breakpoints, $breakpoint_name);
@@ -28,3 +48,19 @@ $breakpoints: (
     @content;
   }
 }
+
+@mixin break_on($min: null, $max: null) {
+  @if not $max {
+    @media screen and (min-width: $min) {
+      @content;
+    }
+  } @else if not $min {
+    @media screen and (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @media screen and (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  }
+}

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

@@ -1,29 +1,10 @@
-.align_content_start {
-  display: flex;
-  align-content: start !important;
-}
-
-.align_content_end {
-  display: flex;
-  align-content: end !important;
-}
-
-.align_content_center {
-  display: flex;
-  align-content: center !important;
-}
-
-.align_content_space_between {
-  display: flex;
-  align-content: space-between !important;
-}
-
-.align_content_space_around {
-  display: flex;
-  align-content: space-around !important;
-}
-
-.align_content_space_evenly {
-  display: flex;
-  align-content: space-evenly !important;
-}
+$align_content_values: (
+  start: start,
+  end: end,
+  center: center,
+  space_between: space-between,
+  space_around: space-around,
+  space_evenly: space-evenly
+);
+
+@include global_props_responsive_css($align_content_values, 'align_content', 'align-content');

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

@@ -1,35 +1,11 @@
-.align_items_flex_start {
-  display: flex;
-  align-items: flex-start !important;
-}
-
-.align_items_flex_end {
-  display: flex;
-  align-items: flex-end !important;
-}
-
-.align_items_start {
-  display: flex;
-  align-items: start !important;
-}
-
-.align_items_end {
-  display: flex;
-  align-items: end !important;
-}
-
-
-.align_items_center {
-  display: flex;
-  align-items: center !important;
-}
-
-.align_items_baseline {
-  display: flex;
-  align-items: baseline !important;
-}
-
-.align_items_stretch {
-  display: flex;
-  align-items: stretch !important;
-}
+$align_items_values: (
+  flex_start: flex-start,
+  flex_end: flex-end,
+  start: start,
+  center: center,
+  end: end,
+  baseline: baseline,
+  stretch: stretch,
+);
+
+@include global_props_responsive_css($align_items_values, 'align_items', 'align-items');

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

@@ -1,29 +1,10 @@
-.align_self_start {
-  display: flex;
-  align-self: start !important;
-}
-
-.align_self_end {
-  display: flex;
-  align-self: end !important;
-}
-
-.align_self_auto {
-  display: flex;
-  align-self: auto !important;
-}
-
-.align_self_center {
-  display: flex;
-  align-self: center !important;
-}
-
-.align_self_stretch {
-  display: flex;
-  align-self: stretch !important;
-}
-
-.align_self_baseline {
-  display: flex;
-  align-self: baseline !important;
-}
+$align_self_values: (
+  auto: auto,
+  start: start,
+  center: center,
+  end: end,
+  baseline: baseline,
+  stretch: stretch,
+);
+
+@include global_props_responsive_css($align_self_values, 'align_self', 'align-self');

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

@@ -1,3 +1,5 @@
+@import "../tokens/display";
+
 .display_block {
     display: block;
 }
@@ -18,6 +20,28 @@
     display: inline-flex;
 }
 
-.display_hidden {
+.display_none {
     display: none;
-}
+}
+
+$display_values: (
+    none: $display_none,
+    flex: $display_flex,
+    inline: $display_inline,
+    inline_block: $display_inline_block,
+    inline_flex: $display_inline_flex,
+    block: $display_block
+);
+
+// using a grid here
+@each $size, $size_value in $breakpoints_grid {
+    @each $display, $display_value in $display_values {
+        $min_size: map-get($size_value, "min");
+        $max_size: map-get($size_value, "max");
+        .display_#{$size}_#{$display} {
+          @include break_on($min_size, $max_size) {
+            display: #{$display_value} !important;
+          }
+        }
+    }
+}

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

@@ -1,15 +1,20 @@
-.flex_auto {
-  flex: auto !important;
-}
+$flex_values: (
+  auto: auto,
+  initial: initial,
+  none: none,
+  0: 0,
+  1: 1,
+  2: 2,
+  3: 3,
+  4: 4,
+  5: 5,
+  6: 6,
+  7: 7,
+  8: 8,
+  9: 9,
+  10: 10,
+  11: 11,
+  12: 12,
+);
 
-.flex_initial {
-  flex: initial !important;
-}
-
-.flex_none {
-  flex: none !important;
-}
-
-.flex_1 {
-  flex: 1 !important;
-}
+@include global_props_responsive_css($flex_values, 'flex', 'flex');

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

@@ -1,19 +1,8 @@
-.flex_direction_row {
-  display: flex;
-  flex-direction: row !important;
-}
+$flex_direction_values: (
+  row: row,
+  column: column,
+  row_reverse: row-reverse,
+  column_reverse: column-reverse
+);
 
-.flex_direction_column {
-  display: flex;
-  flex-direction: column !important;
-}
-
-.flex_direction_row_reverse {
-  display: flex;
-  flex-direction: row-reverse !important;
-}
-
-.flex_direction_column_reverse {
-  display: flex;
-  flex-direction: column-reverse !important;
-}
+@include global_props_responsive_css($flex_direction_values, 'flex_direction', 'flex-direction');

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

@@ -1,9 +1,6 @@
-.flex_grow_1 {
-  display: flex;
-  flex-grow: 1 !important;
-}
+$flex_grow_values: (
+  0: 0,
+  1: 1,
+);
 
-.flex_grow_0 {
-  display: flex;
-  flex-grow: 0 !important;
-}
+@include global_props_responsive_css($flex_grow_values, 'flex_grow', 'flex-grow');

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

@@ -1,9 +1,6 @@
-.flex_shrink_1 {
-  display: flex;
-  flex-shrink: 1 !important;
-}
+$flex_shrink_values: (
+  0: 0,
+  1: 1,
+);
 
-.flex_shrink_0 {
-  display: flex;
-  flex-shrink: 0 !important;
-}
+@include global_props_responsive_css($flex_shrink_values, 'flex_shrink', 'flex-shrink');

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

@@ -1,14 +1,7 @@
-.flex_wrap_wrap {
-  display: flex;
-  flex-wrap: wrap !important;
-}
+$flex_wrap_values: (
+  wrap: wrap,
+  nowrap: nowrap,
+  wrap_reverse: wrap-reverse,
+);
 
-.flex_wrap_nowrap {
-  display: flex;
-  flex-wrap: nowrap !important;
-}
-
-.flex_wrap_wrap_reverse {
-  display: flex;
-  flex-wrap: wrap-reverse !important;
-}
+@include global_props_responsive_css($flex_wrap_values, 'flex_wrap', 'flex-wrap');