playbook_ui 10.26.0.pre.alpha.sticky1 → 10.26.0.pre.rc1

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.html.erb

@@ -0,0 +1,37 @@
+<% 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",
+  },
+] %>
+
+<%= pb_rails("treemap_chart", props: {
+    chart_data: data,
+    id: "treemap-tooltip",
+    title: "Favored Pizza Toppings",
+    tooltip_html: "<p>Custom tooltip for {point.name} <br/>with value: {point.value}</p>",
+}) %>

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/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/_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/_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/globalProps.ts

@@ -1,7 +1,12 @@
 import { omit } from 'lodash'
 
-type Sizes = "xs" | "sm" | "md" | "lg" | "xl"
-type None = "none"
+import {
+  Binary,
+  Display,
+  DisplaySizes,
+  None,
+  Sizes,
+} from '../types'
 
 type AllSizes = None & Sizes
 
@@ -42,27 +47,23 @@ type ZIndex = {
 }
 
 type Shadow = {
-  shadow?: "none" | "deep" | "deeper" | "deepest",
+  shadow?: None | "deep" | "deeper" | "deepest",
 }
 
 type LineHeight = {
   lineHeight?: "loosest" | "looser" | "loose" | "normal" | "tight" | "tighter" | "tightest",
 }
 
-type Display = {
-  display?: "block" | "flex" | "hidden" | "inline_block" | "inline" | "inline_flex",
-}
-
 type Cursor = {
   cursor?: "pointer",
 }
 
 type BorderRadius = {
-  borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "rounded",
+  borderRadius?: None | "xs" | "sm" | "md" | "lg" | "xl" | "rounded",
 }
 
 type Flex = {
-  flex?: "none" | "initial" | "auto" | 1
+  flex?: None | "initial" | "auto" | 1
 }
 
 type FlexDirection = {
@@ -70,11 +71,11 @@ type FlexDirection = {
 }
 
 type FlexGrow = {
-  flexGrow?: 0 | 1
+  flexGrow?: Binary
 }
 
 type FlexShrink = {
-  flexShrink?: 0 | 1
+  flexShrink?: Binary
 }
 
 type FlexWrap = {
@@ -106,11 +107,11 @@ type AlignSelf = {
 }
 
 type Order = {
-  order?: "none" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+  order?: None | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 }
 
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
-  BorderRadius & Cursor & Dark & Display & Flex & FlexDirection &
+  BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
   LineHeight & Margin & MaxWidth & NumberSpacing & Order & Padding &
   Shadow & ZIndex
@@ -180,9 +181,21 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += lineHeight ? `line_height_${lineHeight} ` : ''
     return css
   },
-  displayProps: ({ display }: Display) => {
+  displayProps: (display: Display ) => {
     let css = ''
-    css += display ? `display_${display} ` : ''
+    Object.entries(display).forEach((displayEntry) => {
+      if (displayEntry[0] == "display") {
+        if (typeof displayEntry[1] == "string") {
+          css += `display_${displayEntry[1]} `
+        } else if (typeof displayEntry[1] == "object") {
+          Object.entries(displayEntry[1]).forEach((displayObj) => {
+            css += `display_${displayObj[0]}_${displayObj[1]} `
+          })
+        } else {
+          ' '
+        }
+      }
+    })
     return css
   },
   cursorProps: ({ cursor }: Cursor) => {
@@ -259,7 +272,9 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
   }
 }
 
-export const globalProps = (props: GlobalProps, defaultProps: {[key: string]: string} | {} = {}): string => {
+type DefaultProps = {[key: string]: string} | Record<string, unknown>
+
+export const globalProps = (props: GlobalProps, defaultProps: DefaultProps = {}): string => {
   const allProps = { ...props, ...defaultProps }
   return Object.keys(PROP_CATEGORIES).map((key) => {
     return PROP_CATEGORIES[key](allProps)

data/lib/playbook/display.rb

@@ -8,12 +8,22 @@ module Playbook
 
     def display_props
       selected_props = display_options.keys.select { |sk| try(sk) }
-      return nil unless selected_props.present?
-
-      selected_props.map do |k|
-        display_value = send(k)
-        "display_#{display_value}" if display_values.include? display_value
-      end.compact.join(" ")
+      responsive = selected_props.present? && try(:display).is_a?(::Hash)
+      css = ""
+      if responsive
+        display_value = send(:display)
+        display_value.each do |key, value|
+          css += "display_#{key}_#{value} " if display_size_values.include?(key.to_s) && display_values.include?(value.to_s)
+        end
+      elsif display_value.is_a?(String)
+        selected_props.each do |k|
+          display_value = send(k)
+          css += "display_#{display_value}" if display_values.include? display_value
+        end
+      else
+        ""
+      end
+      css unless css.blank?
     end
 
     def display_options
@@ -22,8 +32,12 @@ module Playbook
       }
     end
 
+    def display_size_values
+      %w[xs sm md lg xl]
+    end
+
     def display_values
-      %w[block inline_block inline flex inline_flex hidden]
+      %w[block inline_block inline flex inline_flex none]
     end
   end
 end

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "10.25.0"
-  VERSION = "10.26.0.pre.alpha.sticky1"
+  PREVIOUS_VERSION = "10.25.1"
+  VERSION = "10.26.0.pre.rc1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.26.0.pre.alpha.sticky1
+  version: 10.26.0.pre.rc1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-05-04 00:00:00.000000000 Z
+date: 2022-05-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -344,8 +344,8 @@ files:
 - app/pb_kits/playbook/pb_background/docs/_description.md
 - app/pb_kits/playbook/pb_background/docs/example.yml
 - app/pb_kits/playbook/pb_background/docs/index.js
-- app/pb_kits/playbook/pb_badge/_badge.jsx
 - app/pb_kits/playbook/pb_badge/_badge.scss
+- app/pb_kits/playbook/pb_badge/_badge.tsx
 - app/pb_kits/playbook/pb_badge/badge.html.erb
 - app/pb_kits/playbook/pb_badge/badge.rb
 - app/pb_kits/playbook/pb_badge/docs/_badge_colors.html.erb
@@ -407,8 +407,8 @@ files:
 - app/pb_kits/playbook/pb_bread_crumbs/docs/_description.md
 - app/pb_kits/playbook/pb_bread_crumbs/docs/example.yml
 - app/pb_kits/playbook/pb_bread_crumbs/docs/index.js
-- app/pb_kits/playbook/pb_button/_button.jsx
 - app/pb_kits/playbook/pb_button/_button.scss
+- app/pb_kits/playbook/pb_button/_button.tsx
 - app/pb_kits/playbook/pb_button/_button_mixins.scss
 - app/pb_kits/playbook/pb_button/button.html.erb
 - app/pb_kits/playbook/pb_button/button.rb
@@ -452,8 +452,8 @@ files:
 - app/pb_kits/playbook/pb_button_toolbar/docs/_description.md
 - app/pb_kits/playbook/pb_button_toolbar/docs/example.yml
 - app/pb_kits/playbook/pb_button_toolbar/docs/index.js
-- app/pb_kits/playbook/pb_caption/_caption.jsx
 - app/pb_kits/playbook/pb_caption/_caption.scss
+- app/pb_kits/playbook/pb_caption/_caption.tsx
 - app/pb_kits/playbook/pb_caption/_caption_mixin.scss
 - app/pb_kits/playbook/pb_caption/caption.html.erb
 - app/pb_kits/playbook/pb_caption/caption.rb
@@ -1025,8 +1025,8 @@ files:
 - app/pb_kits/playbook/pb_home_address_street/docs/index.js
 - app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb
 - app/pb_kits/playbook/pb_home_address_street/home_address_street.rb
-- app/pb_kits/playbook/pb_icon/_icon.jsx
 - app/pb_kits/playbook/pb_icon/_icon.scss
+- app/pb_kits/playbook/pb_icon/_icon.tsx
 - app/pb_kits/playbook/pb_icon/docs/_description.md
 - app/pb_kits/playbook/pb_icon/docs/_footer.md
 - app/pb_kits/playbook/pb_icon/docs/_icon_animate.html.erb
@@ -1393,8 +1393,8 @@ files:
 - app/pb_kits/playbook/pb_person_contact/docs/index.js
 - app/pb_kits/playbook/pb_person_contact/person_contact.html.erb
 - app/pb_kits/playbook/pb_person_contact/person_contact.rb
-- app/pb_kits/playbook/pb_pill/_pill.jsx
 - app/pb_kits/playbook/pb_pill/_pill.scss
+- app/pb_kits/playbook/pb_pill/_pill.tsx
 - app/pb_kits/playbook/pb_pill/docs/_description.md
 - app/pb_kits/playbook/pb_pill/docs/_pill_default.html.erb
 - app/pb_kits/playbook/pb_pill/docs/_pill_default.jsx
@@ -1889,8 +1889,8 @@ files:
 - app/pb_kits/playbook/pb_timestamp/docs/index.js
 - app/pb_kits/playbook/pb_timestamp/timestamp.html.erb
 - app/pb_kits/playbook/pb_timestamp/timestamp.rb
-- app/pb_kits/playbook/pb_title/_title.jsx
 - app/pb_kits/playbook/pb_title/_title.scss
+- app/pb_kits/playbook/pb_title/_title.tsx
 - app/pb_kits/playbook/pb_title/_title_mixin.scss
 - app/pb_kits/playbook/pb_title/docs/_description.md
 - app/pb_kits/playbook/pb_title/docs/_title_colors.html.erb
@@ -1955,6 +1955,27 @@ files:
 - app/pb_kits/playbook/pb_tooltip/index.js
 - app/pb_kits/playbook/pb_tooltip/tooltip.html.erb
 - app/pb_kits/playbook/pb_tooltip/tooltip.rb
+- app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.jsx
+- app/pb_kits/playbook/pb_treemap_chart/docs/_description.md
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.jsx
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.md
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.html.erb
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.jsx
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.md
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.html.erb
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.jsx
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.md
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.html.erb
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.jsx
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.md
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.html.erb
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx
+- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.md
+- app/pb_kits/playbook/pb_treemap_chart/docs/example.yml
+- app/pb_kits/playbook/pb_treemap_chart/docs/index.js
+- app/pb_kits/playbook/pb_treemap_chart/treemap_chart.html.erb
+- app/pb_kits/playbook/pb_treemap_chart/treemap_chart.rb
 - app/pb_kits/playbook/pb_typeahead/_typeahead.jsx
 - app/pb_kits/playbook/pb_typeahead/_typeahead.scss
 - app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx
@@ -2055,6 +2076,7 @@ files:
 - app/pb_kits/playbook/tokens/_animation-curves.scss
 - app/pb_kits/playbook/tokens/_border_radius.scss
 - app/pb_kits/playbook/tokens/_colors.scss
+- app/pb_kits/playbook/tokens/_display.scss
 - app/pb_kits/playbook/tokens/_line_height.scss
 - app/pb_kits/playbook/tokens/_opacity.scss
 - app/pb_kits/playbook/tokens/_positioning.scss