playbook_ui 10.21.0.pre.alpha.rg1 → 10.22.0

data/app/pb_kits/playbook/pb_textarea/_textarea.jsx

@@ -1,4 +1,5 @@
 /* @flow */
+/* eslint-disable react-hooks/rules-of-hooks */
 
 import React, { forwardRef, useEffect, useRef } from 'react'
 import classnames from 'classnames'

data/app/pb_kits/playbook/pb_time/_time.jsx

@@ -5,7 +5,7 @@ import classnames from 'classnames'
 
 import DateTime from '../pb_kit/dateTime.js'
 import { buildCss } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'

data/app/pb_kits/playbook/pb_title/_title.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { deprecatedProps, globalProps } from '../utilities/globalProps.js'
+import { deprecatedProps, globalProps } from '../utilities/globalProps'
 
 type TitleProps = {
   aria?: object,

data/app/pb_kits/playbook/pb_toggle/_toggle.jsx

@@ -10,7 +10,7 @@ import {
   buildDataProps,
 } from '../utilities/props'
 
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 type Props = {
   aria?: object,

data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx

@@ -6,7 +6,7 @@ import AsyncSelect from 'react-select/async'
 import CreateableSelect from 'react-select/creatable'
 import AsyncCreateableSelect from 'react-select/async-creatable'
 import { get, isString, uniqueId } from 'lodash'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 import classnames from 'classnames'
 
 import Control from './components/Control'

data/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx

@@ -2,7 +2,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 type UserBadgeProps = {
   aria?: object,

data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.jsx

@@ -6,7 +6,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 import Joyride from 'react-joyride'
 import Button from '../pb_button/_button'
 import Flex from '../pb_flex/_flex'

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 import Caption from '../pb_caption/_caption'

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

@@ -1,6 +1,7 @@
 import Highcharts from 'highcharts'
 
 import { highchartsTheme } from '../pb_dashboard/pbChartsLightTheme'
+import { highchartsDarkTheme } from '../pb_dashboard/pbChartsDarkTheme'
 import colors from '../tokens/exports/_colors.scss'
 
 import pie from 'highcharts/modules/variable-pie'
@@ -67,10 +68,14 @@ class pbChart {
     }
   }
 
+  setupTheme() {
+    this.options.dark ? Highcharts.setOptions(highchartsDarkTheme) :  Highcharts.setOptions(highchartsTheme)
+  }
+
   setupGauge(options) {
     highchartsMore(Highcharts)
     solidGauge(Highcharts)
-    Highcharts.setOptions(highchartsTheme)
+    this.setupTheme()
 
     Highcharts.chart(this.defaults.id, {
       chart: {
@@ -140,7 +145,7 @@ class pbChart {
   }
 
   setupPieChart(options) {
-    Highcharts.setOptions(highchartsTheme)
+    this.setupTheme()
     Highcharts.chart(this.defaults.id, {
       title: {
         text: this.defaults.title,
@@ -187,8 +192,7 @@ class pbChart {
   }
 
   setupChart(options) {
-    Highcharts.setOptions(highchartsTheme)
-
+    this.setupTheme()
     const configOptions = {
       title: {
         text: this.defaults.title,

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

@@ -1,29 +1,29 @@
 .align_content_start {
   display: flex;
-  align-content: start;
+  align-content: start !important;
 }
 
 .align_content_end {
   display: flex;
-  align-content: end;
+  align-content: end !important;
 }
 
 .align_content_center {
   display: flex;
-  align-content: center;
+  align-content: center !important;
 }
 
 .align_content_space_between {
   display: flex;
-  align-content: space-between;
+  align-content: space-between !important;
 }
 
 .align_content_space_around {
   display: flex;
-  align-content: space-around;
+  align-content: space-around !important;
 }
 
 .align_content_space_evenly {
   display: flex;
-  align-content: space-evenly;
+  align-content: space-evenly !important;
 }

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

@@ -1,24 +1,35 @@
+.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: flex-start;
+  align-items: start !important;
 }
 
 .align_items_end {
   display: flex;
-  align-items: flex-end;
+  align-items: end !important;
 }
 
+
 .align_items_center {
   display: flex;
-  align-items: center;
+  align-items: center !important;
 }
 
 .align_items_baseline {
   display: flex;
-  align-items: baseline;
+  align-items: baseline !important;
 }
 
 .align_items_stretch {
   display: flex;
-  align-items: stretch;
+  align-items: stretch !important;
 }

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

@@ -1,29 +1,29 @@
 .align_self_start {
   display: flex;
-  align-self: start;
+  align-self: start !important;
 }
 
 .align_self_end {
   display: flex;
-  align-self: end;
+  align-self: end !important;
 }
 
 .align_self_auto {
   display: flex;
-  align-self: auto;
+  align-self: auto !important;
 }
 
 .align_self_center {
   display: flex;
-  align-self: center;
+  align-self: center !important;
 }
 
 .align_self_stretch {
   display: flex;
-  align-self: stretch;
+  align-self: stretch !important;
 }
 
 .align_self_baseline {
   display: flex;
-  align-self: baseline;
+  align-self: baseline !important;
 }

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

@@ -1,15 +1,15 @@
 .flex_auto {
-  flex: auto;
+  flex: auto !important;
 }
 
 .flex_initial {
-  flex: initial;
+  flex: initial !important;
 }
 
 .flex_none {
-  flex: none;
+  flex: none !important;
 }
 
 .flex_1 {
-  flex: 1;
+  flex: 1 !important;
 }

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

@@ -1,19 +1,19 @@
 .flex_direction_row {
   display: flex;
-  flex-direction: row;
+  flex-direction: row !important;
 }
 
 .flex_direction_column {
   display: flex;
-  flex-direction: column;
+  flex-direction: column !important;
 }
 
 .flex_direction_row_reverse {
   display: flex;
-  flex-direction: row-reverse;
+  flex-direction: row-reverse !important;
 }
 
 .flex_direction_column_reverse {
   display: flex;
-  flex-direction: column-reverse;
+  flex-direction: column-reverse !important;
 }

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

@@ -1,9 +1,9 @@
 .flex_grow_1 {
   display: flex;
-  flex-grow: 1;
+  flex-grow: 1 !important;
 }
 
 .flex_grow_0 {
   display: flex;
-  flex-grow: 0;
+  flex-grow: 0 !important;
 }

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

@@ -1,9 +1,9 @@
 .flex_shrink_1 {
   display: flex;
-  flex-shrink: 1;
+  flex-shrink: 1 !important;
 }
 
 .flex_shrink_0 {
   display: flex;
-  flex-shrink: 0;
+  flex-shrink: 0 !important;
 }

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

@@ -1,14 +1,14 @@
 .flex_wrap_wrap {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: wrap !important;
 }
 
 .flex_wrap_nowrap {
   display: flex;
-  flex-wrap: nowrap;
+  flex-wrap: nowrap !important;
 }
 
 .flex_wrap_wrap_reverse {
   display: flex;
-  flex-wrap: wrap-reverse;
+  flex-wrap: wrap-reverse !important;
 }

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

@@ -0,0 +1,11 @@
+@import './utilities/flex_direction';
+@import './utilities/justify_content';
+@import './utilities/flex_wrap';
+@import './utilities/justify_self';
+@import './utilities/align_items';
+@import './utilities/align_content';
+@import './utilities/align_self';
+@import './utilities/flex';
+@import './utilities/flex_grow';
+@import './utilities/flex_shrink';
+@import './utilities/order';

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

@@ -1,23 +1,23 @@
 .justify_content_start {
-  justify-content: start;
+  justify-content: start !important;
 }
 
 .justify_content_end {
-  justify-content: end;
+  justify-content: end !important;
 }
 
 .justify_content_center {
-  justify-content: center;
+  justify-content: center !important;
 }
 
 .justify_content_space_between {
-  justify-content: space-between;
+  justify-content: space-between !important;
 }
 
 .justify_content_space_around {
-  justify-content: space-around;
+  justify-content: space-around !important;
 }
 
 .justify_content_space_evenly {
-  justify-content: space-evenly;
+  justify-content: space-evenly !important;
 }

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

@@ -1,19 +1,19 @@
 .justify_self_auto {
-  justify-self: auto;
+  justify-self: auto !important;
 }
 
 .justify_self_start {
-  justify-self: start;
+  justify-self: start !important;
 }
 
 .justify_self_end {
-  justify-self: end;
+  justify-self: end !important;
 }
 
 .justify_self_center {
-  justify-self: center;
+  justify-self: center !important;
 }
 
 .justify_self_stretch {
-  justify-self: stretch;
+  justify-self: stretch !important;
 }

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

@@ -1,55 +1,55 @@
 .order_1 {
-  order: 1;
+  order: 1 !important;
 }
 
 .order_2 {
-  order: 2;
+  order: 2 !important;
 }
 
 .order_3 {
-  order: 3;
+  order: 3 !important;
 }
 
 .order_4 {
-  order: 4;
+  order: 4 !important;
 }
 
 .order_5 {
-  order: 5;
+  order: 5 !important;
 }
 
 .order_6 {
-  order: 6;
+  order: 6 !important;
 }
 
 .order_7 {
-  order: 7;
+  order: 7 !important;
 }
 
 .order_8 {
-  order: 8;
+  order: 8 !important;
 }
 
 .order_9 {
-  order: 9;
+  order: 9 !important;
 }
 
 .order_10 {
-  order: 10;
+  order: 10 !important;
 }
 
 .order_11 {
-  order: 11;
+  order: 11 !important;
 }
 
 .order_12 {
-  order: 12;
+  order: 12 !important;
 }
 
 .order_none {
-  order: none;
+  order: none !important;
 }
 
 .order_first {
-  order: -1;
+  order: -1 !important;
 }

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

@@ -0,0 +1,156 @@
+type Sizes = "xs" | "sm" | "md" | "lg" | "xl"
+type None = "none"
+
+type AllSizes = None & Sizes
+
+type Margin = {
+  marginRight?: AllSizes,
+  marginLeft?: AllSizes,
+  marginTop?: AllSizes,
+  marginBottom?: AllSizes,
+  marginX?: AllSizes,
+  marginY?: AllSizes,
+  margin?: AllSizes,
+}
+
+type Padding = {
+  paddingRight?: AllSizes,
+  paddingLeft?: AllSizes,
+  paddingTop?: AllSizes,
+  paddingBottom?: AllSizes,
+  paddingX?: AllSizes,
+  paddingY?: AllSizes,
+  padding?: AllSizes,
+}
+
+type Dark = {
+  dark?: boolean,
+}
+
+type NumberSpacing = {
+  numberSpacing?: "tabular",
+}
+
+type MaxWidth = {
+  maxWidth?: Sizes,
+}
+
+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",
+}
+
+export type GlobalProps = BorderRadius & Cursor & Dark & Display & LineHeight & Margin & MaxWidth & NumberSpacing & Padding & Shadow & ZIndex
+
+// Prop categories
+const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} = {
+  spacingProps: ({
+    marginRight,
+    marginLeft,
+    marginTop,
+    marginBottom,
+    marginX,
+    marginY,
+    margin,
+    paddingRight,
+    paddingLeft,
+    paddingTop,
+    paddingBottom,
+    paddingX,
+    paddingY,
+    padding,
+  }: Margin & Padding) => {
+    let css = ''
+    css += marginRight ? `mr_${marginRight} ` : ''
+    css += marginLeft ? `ml_${marginLeft} ` : ''
+    css += marginTop ? `mt_${marginTop} ` : ''
+    css += marginBottom ? `mb_${marginBottom} ` : ''
+    css += marginX ? `mx_${marginX} ` : ''
+    css += marginY ? `my_${marginY} ` : ''
+    css += margin ? `m_${margin} ` : ''
+    css += paddingRight ? `pr_${paddingRight} ` : ''
+    css += paddingLeft ? `pl_${paddingLeft} ` : ''
+    css += paddingTop ? `pt_${paddingTop} ` : ''
+    css += paddingBottom ? `pb_${paddingBottom} ` : ''
+    css += paddingX ? `px_${paddingX} ` : ''
+    css += paddingY ? `py_${paddingY} ` : ''
+    css += padding ? `p_${padding} ` : ''
+    return css
+  },
+  darkProps: ({ dark }: Dark) => {
+    let css = ''
+    css += dark ? 'dark' : ''
+    return css
+  },
+  numberSpacingProps: ({ numberSpacing }: NumberSpacing) => {
+    let css = ''
+    css += numberSpacing ? `ns_${numberSpacing} ` : ''
+    return css
+  },
+  maxWidthProps: ({ maxWidth }: MaxWidth) => {
+    let css = ''
+    css += maxWidth ? `max_width_${maxWidth } ` : ''
+    return css
+  },
+  zIndexProps: ({ zIndex }: ZIndex) => {
+    let css = ''
+    css += zIndex ? `z_index_${zIndex } ` : ''
+    return css
+  },
+  shadowProps: ({ shadow }: Shadow) => {
+    let css = ''
+    css += shadow ? `shadow_${shadow} ` : ''
+    return css
+  },
+  lineHeightProps: ({ lineHeight }: LineHeight) => {
+    let css = ''
+    css += lineHeight ? `line_height_${lineHeight} ` : ''
+    return css
+  },
+  displayProps: ({ display }: Display) => {
+    let css = ''
+    css += display ? `display_${display} ` : ''
+    return css
+  },
+  cursorProps: ({ cursor }: Cursor) => {
+    let css = ''
+    css += cursor ? `cursor_${cursor} ` : ''
+    return css
+  }
+}
+
+// All Exported as a single function
+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)
+  }).join("")
+}
+
+export const deprecatedProps = (kit: string, props: string[] = []): void => {
+  if (process.env.NODE_ENV === 'development') {
+    /* eslint no-console: ["error", { allow: ["warn", "error"] }] */
+    props.forEach((prop) => {
+      console.warn(`${kit} Kit: The prop '${prop}' is deprecated and will be removed in a future release!`)
+    })
+  }
+}

data/app/pb_kits/playbook/utilities/{props.js → props.ts}

@@ -10,10 +10,11 @@ import classnames from 'classnames'
  * @param {Object} data the object containing the data to derive the props from.
  * @returns {Object} an object whose keys have the prefix added to them.
  */
-const buildPrefixedProps = (prefix, data) => Object.keys(data).reduce((props, key) => {
-  props[`${prefix}-${key}`] = data[key]
-  return props
-}, {})
+const buildPrefixedProps = (prefix: string, data: {[key: string]: any}) => 
+  Object.keys(data).reduce((props: {[key: string]: any}, key: string) => {
+    props[`${prefix}-${key}`] = data[key]
+    return props
+  }, {})
 
 /**
  * Represent a "No-Operation" function that can be used as a sensible
@@ -29,7 +30,8 @@ export const noop = () => {}
  * @param {Object} aria the object containing the aria prop values.
  * @returns {Object} an object holding the HTML valid aria props and their values.
  */
-export const buildAriaProps = (aria) => buildPrefixedProps('aria', aria)
+export const buildAriaProps = (aria: {[key: string]: string}): {[key: string]: string} => 
+  buildPrefixedProps('aria', aria)
 
 /**
  * Maps a given data object into HTML valid data attribtues and their values.
@@ -37,7 +39,7 @@ export const buildAriaProps = (aria) => buildPrefixedProps('aria', aria)
  * @param {Object} data the object containing the data prop values.
  * @returns {Object} an object holding the HTML valid data props and their values.
  */
-export const buildDataProps = (data) => buildPrefixedProps('data', data)
+export const buildDataProps = (data: {[key: string]: any}) => buildPrefixedProps('data', data)
 
 /**
  * Builds a Playbook valid root className off of the incoming css rules.
@@ -45,5 +47,5 @@ export const buildDataProps = (data) => buildPrefixedProps('data', data)
  * @param {Object} rules a 'classnames' compliant rules object, used to derive the root className.
  * @returns {String} the derived root className value.
  */
-export const buildCss = (...rules) => classnames(rules).replace(/\s/g, '_')
+export const buildCss = (...rules: string[]) => classnames(rules).replace(/\s/g, '_')
 

data/lib/playbook/align_items.rb

@@ -23,7 +23,7 @@ module Playbook
     end
 
     def align_items_values
-      %w[start end center baseline stretch]
+      %w[flex_start flex_end start end center baseline stretch]
     end
   end
 end

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "10.20.0"
-  VERSION = "10.21.0.pre.alpha.rg1"
+  PREVIOUS_VERSION = "10.21.0"
+  VERSION = "10.22.0"
 end