playbook_ui 10.26.0.pre.alpha1 → 10.26.0.pre.alpha3

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/_display.scss

@@ -0,0 +1,13 @@
+$display_inline: inline;
+$display_block: block;
+$display_inline_block: inline-block;
+$display_flex: flex;
+$display_hidden: hidden;
+$display_inline_flex: inline-flex;
+$displays: (
+  display_hidden:   $display_hidden,
+  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

@@ -10,11 +10,11 @@ $screen-xl-min: 1200px;
 $screen-xl-max: $screen-xl-min - 1;
 
 $breakpoints: (
-  xs: $screen-xs-min,
-  sm: $screen-sm-min,
-  md: $screen-md-min,
-  lg: $screen-lg-min,
-  xl: $screen-xl-min
+  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
 );
 
 
@@ -28,3 +28,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;
 }
@@ -20,4 +22,59 @@
 
 .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: (
+    hidden: $display_hidden,
+    flex: $display_flex,
+    inline: $display_inline,
+    inline_block: $display_inline_block,
+    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");
+        @include break_on($min_size, $max_size) {
+            .display_#{$size}_#{$display} {
+                display: #{$display_value} !important;
+            }
+        }
+    }
+}

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

@@ -1,32 +1,19 @@
-$flex_direction_values: (
-  row: row,
-  column: column,
-  row_reverse: row-reverse,
-  column_reverse: column-reverse
-);
-
-$media-query-breakpoints: (
-  xs: "xs",
-  sm: "sm",
-  md: "md",
-  lg: "lg",
-  xl: "xl"
-);
+.flex_direction_row {
+  display: flex;
+  flex-direction: row !important;
+}
 
-@each $flex-direction, $flex-direction-value in $flex_direction_values {
-  .flex_direction_#{$flex-direction} {
-    display: flex;
-    flex-direction: #{$flex-direction-value} !important;
-  }
+.flex_direction_column {
+  display: flex;
+  flex-direction: column !important;
 }
 
-@each $flex-direction, $flex-direction-value in $flex_direction_values {
-  @each $breakpoint, $breakpoint-value in $media-query-breakpoints {
-    .flex_direction_#{$breakpoint}_#{$flex-direction} {
-      display: flex;
-      @include break_at( breakpoint($breakpoint-value)) {
-        flex-direction: #{$flex-direction-value} !important;
-      }
-    }
-  }
+.flex_direction_row_reverse {
+  display: flex;
+  flex-direction: row-reverse !important;
 }
+
+.flex_direction_column_reverse {
+  display: flex;
+  flex-direction: column-reverse !important;
+}

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

@@ -1,66 +1,91 @@
-// Please keep these in alphabetical order
 import { omit } from 'lodash'
-import { camelToSnakeCase } from './text'
 
-type Alignment = "start" | "end" | "center"
+import {
+  Binary,
+  Display,
+  DisplaySizes,
+  None,
+  Sizes,
+} from '../types'
 
-type AlignContent = {
-  alignContent?: Alignment & Space
+type AllSizes = None & Sizes
+
+type Margin = {
+  marginRight?: AllSizes,
+  marginLeft?: AllSizes,
+  marginTop?: AllSizes,
+  marginBottom?: AllSizes,
+  marginX?: AllSizes,
+  marginY?: AllSizes,
+  margin?: AllSizes,
 }
 
-type AlignItems = {
-  alignItems?: Alignment & ("flexStart" | "flexEnd" | "stretch" | "baseline")
+type Padding = {
+  paddingRight?: AllSizes,
+  paddingLeft?: AllSizes,
+  paddingTop?: AllSizes,
+  paddingBottom?: AllSizes,
+  paddingX?: AllSizes,
+  paddingY?: AllSizes,
+  padding?: AllSizes,
 }
 
-type AlignSelf = {
-  alignSelf?: Alignment & ("auto" | "stretch" | "baseline")
+type Dark = {
+  dark?: boolean,
 }
-type AllSizes = None & Sizes
 
-type BorderRadius = {
-  borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "rounded",
+type NumberSpacing = {
+  numberSpacing?: "tabular",
 }
 
-type Cursor = {
-  cursor?: "pointer",
+type MaxWidth = {
+  maxWidth?: Sizes,
 }
 
-type Dark = {
-  dark?: boolean,
+type ZIndex = {
+  zIndex?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10,
+}
+
+type Shadow = {
+  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",
 }
 
 type Flex = {
-  flex?: "none" | "initial" | "auto" | 1
+  flex?: None | "initial" | "auto" | 1
 }
 
 type FlexDirection = {
-  flexDirection?: {
-    xs?: FlexDirectionOptions,
-    sm?: FlexDirectionOptions,
-    md?: FlexDirectionOptions,
-    lg?: FlexDirectionOptions,
-    xl?: FlexDirectionOptions,
-  }
+  flexDirection?: "row" | "column" | "rowReverse" | "columnReverse"
 }
 
-type FlexDirectionOptions = "row" | "column" | "row_reverse" | "column_reverse"
-
 type FlexGrow = {
-  flexGrow?: 0 | 1
+  flexGrow?: Binary
 }
 
 type FlexShrink = {
-  flexShrink?: 0 | 1
+  flexShrink?: Binary
 }
 
 type FlexWrap = {
-  flexWrap?: "wrap" | "nowrap" | "reverse",
+  flexWrap?: "wrap" | "nowrap" | "wrapReverse"
 }
 
+type Alignment = "start" | "end" | "center"
+
+type Space = "spaceBetween" | "spaceAround" | "spaceEvenly"
+
 type JustifyContent = {
   justifyContent?: Alignment & Space
 }
@@ -69,59 +94,24 @@ type JustifySelf = {
   justifySelf?: Alignment & ("auto" | "stretch")
 }
 
-type LineHeight = {
-  lineHeight?: "loosest" | "looser" | "loose" | "normal" | "tight" | "tighter" | "tightest",
-}
-
-type Margin = {
-  marginRight?: AllSizes,
-  marginLeft?: AllSizes,
-  marginTop?: AllSizes,
-  marginBottom?: AllSizes,
-  marginX?: AllSizes,
-  marginY?: AllSizes,
-  margin?: AllSizes,
+type AlignContent = {
+  alignContent?: Alignment & Space
 }
 
-type MaxWidth = {
-  maxWidth?: Sizes,
+type AlignItems = {
+  alignItems?: Alignment & ("flexStart" | "flexEnd" | "stretch" | "baseline")
 }
 
-type None = "none"
-
-type NumberSpacing = {
-  numberSpacing?: "tabular",
+type AlignSelf = {
+  alignSelf?: Alignment & ("auto" | "stretch" | "baseline")
 }
 
 type Order = {
-  order?: "none" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
-}
-
-type Padding = {
-  paddingRight?: AllSizes,
-  paddingLeft?: AllSizes,
-  paddingTop?: AllSizes,
-  paddingBottom?: AllSizes,
-  paddingX?: AllSizes,
-  paddingY?: AllSizes,
-  padding?: AllSizes,
-}
-
-type Shadow = {
-  shadow?: "none" | "deep" | "deeper" | "deepest",
-}
-
-type Sizes = "xs" | "sm" | "md" | "lg" | "xl"
-
-type Space = "spaceBetween" | "spaceAround" | "spaceEvenly"
-
-type ZIndex = {
-  zIndex?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10,
+  order?: None | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 }
 
-// keep this as the last type definition
 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
@@ -191,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) => {
@@ -201,49 +203,78 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += cursor ? `cursor_${cursor} ` : ''
     return css
   },
+  flexDirectionProps: ({ flexDirection }: FlexDirection) => {
+    let css = ''
+    css += flexDirection == 'columnReverse' ? 'flex_direction_column_reverse' :
+      flexDirection == 'rowReverse' ? 'flex_direction_row_reverse' :
+        flexDirection ? `flex_direction_${flexDirection} ` : ''
+    return css
+  },
+  flexWrapProps: ({ flexWrap }: FlexWrap) => {
+    let css = ''
+    css += flexWrap == 'wrapReverse' ? 'flex_wrap_reverse' :
+      flexWrap == 'nowrap' ? 'flex_nowrap' :
+        flexWrap ? `flex_wrap_${flexWrap} ` : ''
+    return css
+  },
+  justifyContentProps: ({ justifyContent }: JustifyContent) => {
+    let css = ''
+    css += justifyContent == 'spaceBetween' ? 'justify_content_space_between' :
+      justifyContent == 'spaceEvenly' ? 'justify_content_space_evenly' :
+        justifyContent == 'spaceAround' ? 'justify_content_space_around' :
+          justifyContent ? `justify_content_${justifyContent}` : ''
+    return css
+  },
+  justifySelfProps: ({ justifySelf }: JustifySelf) => {
+    let css = ''
+    css += justifySelf ? `justify_self_${justifySelf}` : ''
+    return css
+  },
   alignItemsProps: ({ alignItems }: AlignItems) => {
-    return alignItems ? `align_items_${camelToSnakeCase(alignItems)}` : ''
+    let css = ''
+    css += alignItems == 'flexStart' ? 'align_items_flex_start' :
+      alignItems == 'flexEnd' ? 'align_items_flex_end' :
+        alignItems ? `align_items_${alignItems}` : ''
+    return css
   },
   alignContentProps: ({ alignContent }: AlignContent) => {
-    return alignContent ? `align_content_${camelToSnakeCase(alignContent)}` : ''
+    let css = ''
+    css += alignContent == 'spaceBetween' ? 'align_content_space_between' :
+      alignContent == 'spaceEvenly' ? 'align_content_space_evenly' :
+        alignContent == 'spaceAround' ? 'align_content_space_around' :
+          alignContent ? `align_content_${alignContent}` : ''
+    return css
   },
   alignSelfProps: ({ alignSelf }: AlignSelf) => {
-    return alignSelf ? `align_self_${alignSelf}` : ''
-  },
-  flexDirectionProps: ({ flexDirection }: FlexDirection) => {
-    if (typeof flexDirection !== 'object') return
-
-    const flexKeys: string[] = Object.keys(flexDirection)
-
-    return flexKeys.map((key: Sizes) => {
-      const flexDirectionValue: string = flexDirection[key]
-      return `flex_direction_${key}_${flexDirectionValue}`
-    }).join(" ")
-  },
-  flexWrapProps: ({ flexWrap }: FlexWrap) => {
-    return flexWrap ? `flex_wrap_${flexWrap} ` : ''
+    let css = ''
+    css += alignSelf ? `align_self_${alignSelf}` : ''
+    return css
   },
   flexProps: ({ flex }: Flex) => {
-    return flex ? `flex_${flex}` : ''
+    let css = ''
+    css += flex ? `flex_${flex}` : ''
+    return css
   },
   flexGrowProps: ({ flexGrow }: FlexGrow) => {
-    return typeof(flexGrow) !== undefined ? `flex_grow_${flexGrow}` : ''
+    let css = ''
+    css += flexGrow ? `flex_grow_${flexGrow}` : ''
+    return css
   },
   flexShrinkProps: ({ flexShrink }: FlexShrink) => {
-    return typeof(flexShrink) !== undefined ? `flex_shrink_${flexShrink}` : ''
-  },
-  justifyContentProps: ({ justifyContent }: JustifyContent) => {
-    return justifyContent ? `justify_content_${camelToSnakeCase(justifyContent)}` : ''
-  },
-  justifySelfProps: ({ justifySelf }: JustifySelf) => {
-    return justifySelf ? `justify_self_${justifySelf}` : ''
+    let css = ''
+    css += flexShrink ? `flex_shrink_${flexShrink}` : ''
+    return css
   },
   orderProps: ({ order }: Order) => {
-    return order ? `order_${order}` : ''
+    let css = ''
+    css += order ? `order_${order}` : ''
+    return css
   }
 }
 
-export const globalProps = (props: GlobalProps, defaultProps: {[key: string]: string} | Record<string, never> = {}): 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/app/pb_kits/playbook/utilities/text.js

@@ -0,0 +1,15 @@
+import { filter, isEmpty } from 'lodash'
+
+const titleizedWord = (string) => (
+  string.charAt(0).toUpperCase() + string.slice(1).toLowerCase()
+)
+
+export const titleize = (sentence) => (
+  isEmpty(sentence) ? sentence : sentence.split(' ').map(titleizedWord).join(' ')
+)
+
+const notEmpty = (value) => !isEmpty(value)
+
+export const joinPresent = (array, separator) => (
+  filter(array, notEmpty).join(separator)
+)

data/dist/reset.css

@@ -1,61 +1,2 @@
-/* CLEAN UP AND REMOVE */
-/* Headings */
-/* Standard Font Weights */
-/* Non_Standard Font Weights */
-/*=====================================
-Base colors should not be documented.
-Only document color use.
-
-Colors -----------------------------*/
-/* Specialty Gradient -----------------*/
-/* Interface colors -------------------*/
-/* Main colors ------------------------*/
-/*=====================================
-
-Background colors ------------------*/
-/* Card colors ------------------*/
-/* Active colors ----------------------*/
-/* Hover colors -----------------------*/
-/* Focus colors -----------------------*/
-/* Border colors ----------------------*/
-/* Shadow colors ----------------------*/
-/* Text colors ------------------------*/
-/* Data colors ------------------------*/
-/* Status colors ----------------------*/
-/* Link colors ------------------------*/
-/* Product colors ---------------------*/
-/* Category colors ---------------------*/
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0; }
-  *:before, *:after {
-    box-sizing: border-box; }
-
-html {
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  height: 100vh;
-  overflow-x: hidden; }
-
-body {
-  font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
-  font-size: 16px;
-  line-height: 1.5;
-  background-color: #F3F7FB;
-  height: 100%;
-  letter-spacing: 0;
-  font-weight: 400;
-  font-style: normal;
-  text-rendering: optimizeLegibility;
-  -moz-font-feature-settings: "liga" on;
-  color: #242B42;
-  margin: 0 !important;
-  padding: 0 !important;
-  box-sizing: border-box;
-  min-height: 100vh;
-  padding: 50px; }
-
-a {
-  text-decoration: none;
-  color: #0056CF; }
+*{box-sizing:border-box;margin:0;padding:0}*:before,*:after{box-sizing:border-box}html{-webkit-tap-highlight-color:rgba(0,0,0,0);height:100vh;overflow-x:hidden}body{font-family:"Proxima Nova","Helvetica Neue",Helvetica,Arial,sans_serif;font-size:16px;line-height:1.5;background-color:#F3F7FB;height:100%;letter-spacing:0;font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-moz-font-feature-settings:"liga" on;color:#242B42;margin:0 !important;padding:0 !important;box-sizing:border-box;min-height:100vh;padding:50px}a{text-decoration:none;color:#0056CF}