playbook_ui 10.23.0.pre.cachetest → 10.23.0

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -4,12 +4,12 @@
 
 
 [class^=pb_text_input_kit] {
+  margin-bottom: $space_sm;
   .pb_text_input_kit_label {
     margin-bottom: $space_xs;
     display: block;
   }
   .text_input_wrapper {
-    margin-bottom: $space_sm;
     display: block;
     input::placeholder,
     .text_input .placeholder {

data/app/pb_kits/playbook/pb_text_input/text_input.test.js

@@ -75,3 +75,17 @@ test('returns additional class name', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass(`${kitClass} dark error`)
 })
+
+test('returns additional class name', () => {
+  render(
+    <TextInput
+        data={{ testid: testId }}
+        label="First Name"
+        marginBottom="lg"
+        placeholder="Enter first name"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} mb_lg`)
+})

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

@@ -0,0 +1,29 @@
+.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;
+}

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

@@ -0,0 +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: 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;
+}

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

@@ -0,0 +1,29 @@
+.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;
+}

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

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

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

@@ -0,0 +1,19 @@
+.flex_direction_row {
+  display: flex;
+  flex-direction: row !important;
+}
+
+.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;
+}

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

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

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

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

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

@@ -0,0 +1,14 @@
+.flex_wrap_wrap {
+  display: flex;
+  flex-wrap: wrap !important;
+}
+
+.flex_wrap_nowrap {
+  display: flex;
+  flex-wrap: nowrap !important;
+}
+
+.flex_wrap_wrap_reverse {
+  display: flex;
+  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

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

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

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

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

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