playbook_ui 10.23.0.pre.cachetest → 10.24.0

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx

@@ -1,11 +1,12 @@
 /* @flow */
+/* eslint-disable react-hooks/rules-of-hooks */
 
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useState } from 'react'
 import classnames from 'classnames'
 import inlineFocus from './inlineFocus'
 import useFocus from './useFocus'
 import { globalProps } from '../utilities/globalProps'
-import { buildAriaProps, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildDataProps, noop } from '../utilities/props'
 
 try {
   const Trix = require('trix')
@@ -15,6 +16,8 @@ try {
   }
 } catch (_e) { /* do nothing */ }
 
+import { TrixEditor } from "react-trix"
+
 type RichTextEditorProps = {
   aria?: object,
   toolbarBottom?: Boolean,
@@ -24,7 +27,7 @@ type RichTextEditorProps = {
   id?: string,
   inline?: boolean,
   name?: string,
-  onChange: (string) => void,
+  onChange: (html: string, text: string) => void,
   placeholder?: string,
   simple?: boolean,
   sticky?: boolean,
@@ -39,129 +42,116 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     className,
     data = {},
     focus = false,
-    id,
     inline = false,
     name,
-    onChange,
+    onChange = noop,
     placeholder,
     simple = false,
     sticky = false,
     template = '',
     value = '',
   } = props
-  const trixRef = useRef()
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
 
-  useEffect(() => {
-    trixRef.current.addEventListener('trix-initialize', (event) => {
-      const element = event.target
+  const ariaProps = buildAriaProps(aria),
+  dataProps = buildDataProps(data),
+  [editor, setEditor] = useState()
 
-      const { toolbarElement, editor } = element
+  const handleOnEditorReady = (editorInstance) => setEditor(editorInstance),
+  element = editor?.element
 
-      const blockCodeButton = toolbarElement.querySelector(
-        '[data-trix-attribute=code]'
-      )
-      const inlineCodeButton = blockCodeButton.cloneNode(true)
+  // DOM manipulation must wait for editor to be ready
+  if (editor) {
+    const toolbarElement = element.parentElement.querySelector('trix-toolbar'),
+    blockCodeButton = toolbarElement.querySelector('[data-trix-attribute=code]')
 
-      inlineCodeButton.hidden = true
-      inlineCodeButton.dataset.trixAttribute = 'inlineCode'
-      blockCodeButton.insertAdjacentElement('afterend', inlineCodeButton)
+    let inlineCodeButton = toolbarElement.querySelector('[data-trix-attribute=inlineCode]')
+    if (!inlineCodeButton) inlineCodeButton = blockCodeButton.cloneNode(true)
 
-      const getCodeFormattingType = () => {
-        if (editor.attributeIsActive('code')) return 'block'
-        if (editor.attributeIsActive('inlineCode')) return 'inline'
+    // set button attributes
+    inlineCodeButton.dataset.trixAttribute = 'inlineCode'
+    blockCodeButton.insertAdjacentElement('afterend', inlineCodeButton)
 
-        const range = editor.getSelectedRange()
-        if (range[0] == range[1]) return 'block'
+    if (toolbarBottom) editor.element.after(toolbarElement)
 
-        const text = editor.getSelectedDocument().toString().trim()
-        return /\n/.test(text) ? 'block' : 'inline'
-      }
+    const getCodeFormattingType = (): string => {
+      if (editor.attributeIsActive('code')) return 'block'
+      if (editor.attributeIsActive('inlineCode')) return 'inline'
 
-      element.addEventListener('trix-selection-change', () => {
-        const type = getCodeFormattingType()
-        blockCodeButton.hidden = type == 'inline'
-        inlineCodeButton.hidden = type == 'block'
-      })
+      const range = editor.getSelectedRange()
+      if (range[0] == range[1]) return 'block'
 
-      if (toolbarBottom) editor.element.after(toolbarElement)
-    })
-
-    trixRef.current.addEventListener('trix-change', (event) => {
-      onChange && onChange(event.target.innerHTML)
-    })
-  }, [trixRef])
-
-  useEffect(() => {
-    const editor = trixRef.current.editorController.editor
-    if (template) {
-      editor.loadHTML('')
-      editor.setSelectedRange([0, 0])
-      editor.insertHTML(template)
+      const text = editor.getSelectedDocument().toString().trim()
+      return /\n/.test(text) ? 'block' : 'inline'
     }
-  }, [template])
-
-  focus
-    ? (document.addEventListener('trix-focus', useFocus),
-    document.addEventListener('trix-blur', useFocus),
-    useFocus())
-    : null
-
-  document.addEventListener('trix-focus', inlineFocus)
-  document.addEventListener('trix-blur', inlineFocus)
 
-  const handleAnchorElementClick = (clickedElement) => {
-    const trixEditorContainer = clickedElement.closest('.pb_rich_text_editor_kit')
-    if (!trixEditorContainer) return
+    // DOM event listeners
+    element.addEventListener('trix-selection-change', () => {
+      const type = getCodeFormattingType()
+      blockCodeButton.hidden = type == 'inline'
+      inlineCodeButton.hidden = type == 'block'
+    })
 
-    const anchorElement = clickedElement.closest('a')
-    if (!anchorElement) return
+    focus
+      ? (document.addEventListener('trix-focus', useFocus),
+      document.addEventListener('trix-blur', useFocus),
+      useFocus())
+      : null
 
-    if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
+    document.addEventListener('trix-focus', inlineFocus)
+    document.addEventListener('trix-blur', inlineFocus)
   }
 
-  const handleClick = (event) => {
-    handleAnchorElementClick(event.target)
-  }
+  useEffect(() => {
+    if (!editor || !template) return
+    editor.loadHTML('')
+    editor.setSelectedRange([0, 0])
+    editor.insertHTML(template)
+  }, [editor, template])
 
   useEffect(() => {
-    trixRef.current.addEventListener('click', handleClick)
-  }, [])
+    if (!element) return
+    element.addEventListener('click', ({target}) => {
+      const trixEditorContainer = target.closest('.pb_rich_text_editor_kit')
+      if (!trixEditorContainer) return
 
-  const RichTextEditorClass = 'pb_rich_text_editor_kit'
-  const SimpleClass = simple ? 'simple' : ''
-  const FocusClass = focus ? 'focus-editor-targets' : ''
-  const StickyClass = sticky ? 'sticky' : ''
-  const InlineClass = inline ? 'inline' : ''
-  const ToolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
-  const css = classnames(globalProps(props), className)
+      const anchorElement = target.closest('a')
+      if (!anchorElement) return
+
+      if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
+    })
+  }, [element])
+
+  const richTextEditorClass = 'pb_rich_text_editor_kit',
+  simpleClass = simple ? 'simple' : '',
+  focusClass = focus ? 'focus-editor-targets' : '',
+  stickyClass = sticky ? 'sticky' : '',
+  inlineClass = inline ? 'inline' : '',
+  toolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
+
+  let css = classnames(globalProps(props), className)
+  css = classnames(
+    richTextEditorClass,
+    simpleClass,
+    focusClass,
+    stickyClass,
+    inlineClass,
+    toolbarBottomClass,
+    css
+  )
 
   return (
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(
-        RichTextEditorClass,
-        SimpleClass,
-        FocusClass,
-        StickyClass,
-        InlineClass,
-        ToolbarBottomClass,
-        css
-      )}
+        className={css}
     >
-      <input
-          id={id}
-          name={name}
-          type="hidden"
-          value={value}
-      />
-      <trix-editor
-          input={id}
-          name={name}
+      <TrixEditor
+          className=""
+          fileParamName={name}
+          onChange={onChange}
+          onEditorReady={handleOnEditorReady}
           placeholder={placeholder}
-          ref={trixRef}
+          value={value}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb

@@ -1 +1 @@
-<%= pb_rails("rich_text_editor", props: {id: "default"}) %>
+<%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here. You can format your text, add links, quotes, and bullets."}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx

@@ -1,12 +1,19 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { RichTextEditor } from '../../'
 
-const RichTextEditorDefault = (props) => (
-  <div>
-    <RichTextEditor
-        {...props}
-    />
-  </div>
-)
+const RichTextEditorDefault = (props) => {
+  const [value, setValue] = useState('Add your text here. You can format your text, add links, quotes, and bullets.'),
+  handleOnChange = (html) => setValue(html)
+
+  return (
+    <div>
+      <RichTextEditor
+          onChange={handleOnChange}
+          value={value}
+          {...props}
+      />
+    </div>
+  )
+}
 
 export default RichTextEditorDefault

data/app/pb_kits/playbook/pb_select/_select.jsx

@@ -4,7 +4,7 @@ import React, { forwardRef } from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, domSafeProps } from '../utilities/globalProps'
 import type { InputCallback } from '../types'
 
 import Body from '../pb_body/_body'
@@ -112,7 +112,7 @@ const Select = ({
           {children}
           <Else />
           <select
-              {...props}
+              {...domSafeProps(props)}
               disabled={disabled}
               id={name}
               multiple={multiple}

data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.html.erb

@@ -1 +1,3 @@
 <%= pb_rails("stat_value", props: { value: 1048 }) %>
+
+<%= pb_rails("stat_value", props: { value: 10.48 }) %>

data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.jsx

@@ -12,7 +12,7 @@ const StatValueDefault = (props) => {
       <br />
       <br />
       <StatValue
-          value={0}
+          value={10.48}
           {...props}
       />
     </>

data/app/pb_kits/playbook/pb_stat_value/stat_value.rb

@@ -4,10 +4,10 @@ module Playbook
   module PbStatValue
     class StatValue < Playbook::KitBase
       prop :unit
-      prop :value, type: Playbook::Props::Number
+      prop :value, type: Playbook::Props::Numeric
 
       def formatted_value
-        number_with_delimiter(value, delimiter: ",")
+        number_with_delimiter(value, delimiter: ",", separator: ".")
       end
 
       def classname

data/app/pb_kits/playbook/pb_table/_table.jsx

@@ -3,7 +3,7 @@
 import React, { type Node } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 import PbTable from './'
 
 type TableProps = {

data/app/pb_kits/playbook/pb_table/_table_row.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 TableRowPropTypes = {
   aria?: object,

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

@@ -2,7 +2,7 @@
 import React, { forwardRef } from 'react'
 import classnames from 'classnames'
 
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps, domSafeProps } from '../utilities/globalProps'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 
 import Flex from '../pb_flex/_flex'
@@ -37,10 +37,11 @@ type TextInputProps = {
 
 const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
   const {
+    addOn = { icon: null, alignment: 'right', border: true },
     aria = {},
     className,
-    data = {},
     dark = false,
+    data = {},
     disabled,
     error,
     id,
@@ -53,7 +54,6 @@ const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
     type = 'text',
     value = '',
     children = null,
-    addOn = { icon: null, alignment: 'right', border: true },
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -85,10 +85,11 @@ const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
   )
   const textInput = (
     <input
-        {...props}
+        {...domSafeProps(props)}
         className="text_input"
         disabled={disabled}
         id={id}
+        key={id}
         name={name}
         onChange={onChange}
         placeholder={placeholder}
@@ -107,21 +108,25 @@ const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
           vertical="center"
       >
         <If condition={addOnAlignment == 'left'}>
-          <Card
-              className={`${addOnDarkModeCardCss} add-on-card card-left-aligned`}
-              dark={dark}
-          >
-            {addOnIcon}
-          </Card>
-          {textInput}
-          <Else />
-          {textInput}
-          <Card
-              className={`${addOnDarkModeCardCss} add-on-card card-right-aligned`}
-              dark={dark}
-          >
-            {addOnIcon}
-          </Card>
+          <>
+            <Card
+                className={`${addOnDarkModeCardCss} add-on-card card-left-aligned`}
+                dark={dark}
+            >
+              {addOnIcon}
+            </Card>
+            {textInput}
+          </>
+        <Else />
+          <>
+            {textInput}
+            <Card
+                className={`${addOnDarkModeCardCss} add-on-card card-right-aligned`}
+                dark={dark}
+            >
+              {addOnIcon}
+            </Card>
+          </>
         </If>
       </Flex>
     </React.Fragment>

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;
+}