playbook_ui 10.26.0.pre.alpha.display1 → 10.26.0.pre.alpha.sticky1

data/app/pb_kits/playbook/pb_title/title.test.js

@@ -12,7 +12,7 @@ test('returns namespaced class name', () => {
   )
 
   const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_title_kit_size_3')
+  expect(kit).toHaveClass('pb_title_kit_3')
 })
 
 test('with colors', () => {
@@ -25,5 +25,5 @@ test('with colors', () => {
   )
 
   const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_title_kit_size_3_success')
+  expect(kit).toHaveClass('pb_title_kit_3_success')
 })

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

@@ -91,7 +91,6 @@ 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'
@@ -186,7 +185,6 @@ WebpackerReact.setup({
   ...TitleCount,
   ...TitleDetail,
   ...Toggle,
-  ...TreemapChart,
   ...Typeahead,
   ...User,
   ...UserBadge,

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

@@ -13,7 +13,6 @@ 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({
@@ -27,7 +26,6 @@ WebpackerReact.registerComponents({
   LineGraph,
   Passphrase,
   RichTextEditor,
-  TreemapChart,
   Typeahead,
 })
 

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

@@ -7,7 +7,6 @@ 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)
 
@@ -64,8 +63,6 @@ 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)
     }
@@ -194,37 +191,6 @@ 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/_screen_sizes.scss

@@ -10,11 +10,11 @@ $screen-xl-min: 1200px;
 $screen-xl-max: $screen-xl-min - 1;
 
 $breakpoints: (
-  xs: $screen-xs-min, // $screen-xs-min
-  sm: $screen-sm-min, // $screen-xs-min + 1 thru $screen-md-min
-  md: $screen-md-min, // $screen-md-min + 1 thru $screen-md-lg
-  lg: $screen-lg-min, // $screen-lg-min + 1 thru $screen-md-xl
-  xl: $screen-xl-min  // $screen-xl-min + 1
+  xs: $screen-xs-min,
+  sm: $screen-sm-min,
+  md: $screen-md-min,
+  lg: $screen-lg-min,
+  xl: $screen-xl-min
 );
 
 
@@ -28,19 +28,3 @@ $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,5 +1,3 @@
-@import "../tokens/display";
-
 .display_block {
     display: block;
 }
@@ -20,62 +18,6 @@
     display: inline-flex;
 }
 
-.display_none {
+.display_hidden {
     display: none;
-}
-
-$screen-xs-min: 575px;
-$screen-xs-max: $screen-xs-min - 1;
-$screen-sm-min: 576px;
-$screen-sm-max: $screen-sm-min - 1;
-$screen-md-min: 768px;
-$screen-md-max: $screen-md-min - 1;
-$screen-lg-min: 992px;
-$screen-lg-max: $screen-lg-min - 1;
-$screen-xl-min: 1200px;
-$screen-xl-max: $screen-xl-min - 1;
-
-$breakpoints: (
-    xs: (
-        // min: 0,
-        max: $screen-xs-min // 575
-    ),
-    sm: (
-        min: $screen-sm-min, // 576
-        max: $screen-md-max  // 767
-    ),
-    md: (
-        min: $screen-md-min, // 768
-        max: $screen-lg-max // 991
-    ),
-    lg: (
-        min: $screen-lg-min, // 992
-        max: $screen-xl-max // 1199
-    ),
-    xl: (
-        min: $screen-xl-min, //1200
-        // max: 0
-    )
-);
-
-
-$display_values: (
-    none: $display_none,
-    flex: $display_flex,
-    inline: $display_inline,
-    inline_block: $display_inline_block,
-    inline_flex: $display_inline_flex,
-    block: $display_block
-);
-
-@each $size, $size_value in $breakpoints {
-    @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,12 +1,7 @@
 import { omit } from 'lodash'
 
-import {
-  Binary,
-  Display,
-  DisplaySizes,
-  None,
-  Sizes,
-} from '../types'
+type Sizes = "xs" | "sm" | "md" | "lg" | "xl"
+type None = "none"
 
 type AllSizes = None & Sizes
 
@@ -47,23 +42,27 @@ 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 = {
@@ -71,11 +70,11 @@ type FlexDirection = {
 }
 
 type FlexGrow = {
-  flexGrow?: Binary
+  flexGrow?: 0 | 1
 }
 
 type FlexShrink = {
-  flexShrink?: Binary
+  flexShrink?: 0 | 1
 }
 
 type FlexWrap = {
@@ -107,11 +106,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 & DisplaySizes & Flex & FlexDirection &
+  BorderRadius & Cursor & Dark & Display & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
   LineHeight & Margin & MaxWidth & NumberSpacing & Order & Padding &
   Shadow & ZIndex
@@ -181,21 +180,9 @@ 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 = ''
-    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 {
-          ' '
-        }
-      }
-    })
+    css += display ? `display_${display} ` : ''
     return css
   },
   cursorProps: ({ cursor }: Cursor) => {
@@ -272,9 +259,7 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
   }
 }
 
-type DefaultProps = {[key: string]: string} | Record<string, unknown>
-
-export const globalProps = (props: GlobalProps, defaultProps: DefaultProps = {}): string => {
+export const globalProps = (props: GlobalProps, defaultProps: {[key: string]: string} | {} = {}): string => {
   const allProps = { ...props, ...defaultProps }
   return Object.keys(PROP_CATEGORIES).map((key) => {
     return PROP_CATEGORIES[key](allProps)

data/lib/playbook/display.rb

@@ -8,22 +8,12 @@ module Playbook
 
     def display_props
       selected_props = display_options.keys.select { |sk| try(sk) }
-      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?
+      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(" ")
     end
 
     def display_options
@@ -32,12 +22,8 @@ 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 none]
+      %w[block inline_block inline flex inline_flex hidden]
     end
   end
 end

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "10.25.0"
-  VERSION = "10.26.0.pre.alpha.display1"
+  VERSION = "10.26.0.pre.alpha.sticky1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.26.0.pre.alpha.display1
+  version: 10.26.0.pre.alpha.sticky1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-05-03 00:00:00.000000000 Z
+date: 2022-05-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -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
@@ -1734,6 +1734,9 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_sm.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_sm.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_sm.md
+- app/pb_kits/playbook/pb_table/docs/_table_sticky.html.erb
+- app/pb_kits/playbook/pb_table/docs/_table_sticky.jsx
+- app/pb_kits/playbook/pb_table/docs/_table_sticky.md
 - app/pb_kits/playbook/pb_table/docs/_table_two_actions.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_two_actions.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_two_actions.md
@@ -1755,6 +1758,7 @@ files:
 - app/pb_kits/playbook/pb_table/styles/_reset.scss
 - app/pb_kits/playbook/pb_table/styles/_side_highlight.scss
 - app/pb_kits/playbook/pb_table/styles/_single-line.scss
+- app/pb_kits/playbook/pb_table/styles/_sticky_header.scss
 - app/pb_kits/playbook/pb_table/styles/_structure.scss
 - app/pb_kits/playbook/pb_table/styles/_table-card.scss
 - app/pb_kits/playbook/pb_table/styles/_table-dark.scss
@@ -1762,6 +1766,7 @@ files:
 - app/pb_kits/playbook/pb_table/styles/_variables.scss
 - app/pb_kits/playbook/pb_table/table.html.erb
 - app/pb_kits/playbook/pb_table/table.rb
+- app/pb_kits/playbook/pb_table/table.test.js
 - app/pb_kits/playbook/pb_table/table_row.html.erb
 - app/pb_kits/playbook/pb_table/table_row.rb
 - app/pb_kits/playbook/pb_text_input/_text_input.jsx
@@ -1884,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
@@ -1950,27 +1955,6 @@ 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
@@ -2071,7 +2055,6 @@ 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
@@ -2177,7 +2160,7 @@ files:
 - lib/playbook_ui.rb
 homepage: http://playbook.powerapp.cloud
 licenses:
-- MIT
+- ISC
 metadata: {}
 post_install_message:
 rdoc_options: []

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

@@ -1,79 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-
-import { globalProps } from '../utilities/globalProps'
-import pbChart from '../plugins/pb_chart'
-
-type TreemapChartProps = {
-  chartData: array<{
-    name: string,
-    parent?: string | number,
-    value: number,
-    color?: string,
-    id?: string | number,
-  }>,
-  className?: string,
-  colors: array,
-  dark?: boolean,
-  drillable: boolean,
-  grouped: boolean,
-  height?: string,
-  id: number,
-  title: string,
-  tooltipHtml: string,
-  type?: string,
-}
-
-export default class TreemapChart extends React.Component<TreemapChartProps> {
-  static defaultProps = {
-    className: 'pb_treemap_chart',
-    dark: false,
-    drillable: false,
-    grouped: false,
-    type: 'treemap',
-  }
-
-  componentDidMount() {
-    const {
-      chartData,
-      className,
-      colors  = [],
-      dark,
-      drillable,
-      grouped,
-      height,
-      id,
-      title = "",
-      tooltipHtml = '<span style="font-weight: bold; color:{point.color};">&#9679; </span>{point.name}: <b>{point.value}</b>',
-      type,
-    } = this.props
-
-    new pbChart(`.${className}`, {
-      chartData: chartData,
-      colors: colors,
-      dark,
-      drillable,
-      grouped,
-      height: height,
-      id: id,
-      title: title,
-      tooltipHtml,
-      type,
-    })
-  }
-
-  props: TreemapChartProps
-
-  render() {
-    const { className, id } = this.props
-
-    return (
-      <div
-          className={classnames(globalProps(this.props), className)}
-          id={id}
-      />
-    )
-  }
-}

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

@@ -1,5 +0,0 @@
-Treemap charts are used to compare the relative size of groups of data. They can also use a nested data structure, allowing a user to drill down into a group to see its constituent data points.
-
-The default height of treemap is 400px and can be changed. The default height is in pixel units, but can also use percentage string (percentage would be that of the width. For example, `height:"50%"` would mean that the height is 50% of the width). This allows for preserving the aspect ratio across responsive sizes.
-
-For more information, see: <a href="https://api.highcharts.com/highcharts/chart.height" target="_blank"> highcharts/chart.height</a>.

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

@@ -1,37 +0,0 @@
-<% 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,
-    colors: ["data-4", "data-7", "#8E6E53", "#124732"],
-    id: "treemap-colors",
-    title: "Favored Pizza Toppings",
-}) %>

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

@@ -1,48 +0,0 @@
-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 TreemapChartColors = (props) => (
-  <div>
-    <TreemapChart
-        chartData={chartData}
-        colors={["data-4", "data-7", "#8E6E53", "#124732"]}
-        id="treemap-colors"
-        title="Favored Pizza Toppings"
-        {...props}
-    />
-  </div>
-)
-
-export default TreemapChartColors

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

@@ -1,2 +0,0 @@
-Custom data colors allow for color customization to match the needs of business requirements.
-Pass the prop `colors` and use desired values `data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8` in an array. Hex colors are also available `eg: #CA0095`