playbook_ui 10.21.0 → 10.21.1.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a59d79cb7efc701b2cfcda8f853e5d47f6e7a8bb0c63a26ea1fb1a0d1352d7ef
-  data.tar.gz: 4ce8a5b16f4dd0d58a56793bc8aaf8f7e285104fae767a7e4867853ea6531a5f
+  metadata.gz: 90a49eef5f7ef47b1e7921d940c7d1e6d56c7c11971e0612f88cd9aa6202079d
+  data.tar.gz: '0068f6fa35d25227519e9400cfc73fe66755f07c8e2521170829ff47e3926231'
 SHA512:
-  metadata.gz: 36e213335bf164b63b39d2958360e6629c0f16cc07ea01fa2a645f36878fc531c5d4a4e84d8f8aa388c68bb9a92961727399297f45048e9cc7ea5e4d54078b18
-  data.tar.gz: 341993d316fbe3a2cad5b26861ae255128657a13505100aa12b46afd2694aa993fa7210f67faa86b2a2f79b9a8ed999d4786cb7a31512c75080aef5198283d72
+  metadata.gz: f9e65e6665780627141458de4acdb6e73e827ffe7f426cc4e0ce7ee71f40fd024d4c263c7c8fb126d88ea256b19d9a576914f60a075521959e5d2d196ec6dc10
+  data.tar.gz: f38dcd80a6acc7940e961c3f25bae68f70cf204cce40cdbed752222c2e762cf388e1aff147f6e9ee0218eefae3bbf342c96defb1e2ec01ef33d6412c64543020

data/app/pb_kits/playbook/_playbook.scss

@@ -100,3 +100,4 @@
 @import './utilities/shadow';
 @import './utilities/line_height';
 @import './utilities/display';
+@import './utilities/flexbox';

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -13,9 +13,9 @@ $pb_button_sizes: (
     &[class*=size_#{$name}] {
       font-size: $size;
       padding: calc(#{$size} / 2) calc(#{$size} * 2.42) !important;
-    }
-    @if $name == "sm" {
-      min-height: 0;
+      @if $name == "sm" {
+        min-height: 0;
+      }
     }
   }
 

data/app/pb_kits/playbook/pb_card/card.html.erb

@@ -4,7 +4,7 @@
     class: object.classname,
     aria: object.aria,
     dark: object.dark) do %>
-  <%= pb_rails("card/card_body", props: { padding: object.body_padding }) do %>
+  <%= pb_rails("card/card_body", props: { padding: object.body_padding, flex_direction: object.body_flex_direction, flex_wrap: object.body_flex_wrap, justify_content: object.body_justify_content, justify_self: object.body_justify_self, align_items: object.body_align_items, align_content: object.body_align_content, align_self: object.body_align_self, flex: object.body_flex, flex_grow: object.body_flex_grow, flex_shrink: object.body_flex_shrink, order: object.body_order }) do %>
     <%= content %>
   <% end if content.present? %>
 <% end %>

data/app/pb_kits/playbook/pb_card/card.rb

@@ -36,6 +36,94 @@ module Playbook
         end
       end
 
+      def body_flex_direction
+        if flex_direction.present?
+          "flex_direction_#{flex_direction}"
+        else
+          ""
+        end
+      end
+
+      def body_flex_wrap
+        if flex_wrap.present?
+          "flex_wrap_#{flex_wrap}"
+        else
+          ""
+        end
+      end
+
+      def body_justify_content
+        if justify_content.present?
+          "justify_content_#{justify_content}"
+        else
+          ""
+        end
+      end
+
+      def body_justify_self
+        if justify_self.present?
+          "justify_self_#{justify_self}"
+        else
+          ""
+        end
+      end
+
+      def body_align_items
+        if align_items.present?
+          "align_items_#{align_items}"
+        else
+          ""
+        end
+      end
+
+      def body_align_content
+        if align_content.present?
+          "align_content_#{align_content}"
+        else
+          ""
+        end
+      end
+
+      def body_align_self
+        if align_self.present?
+          "align_self_#{align_self}"
+        else
+          ""
+        end
+      end
+
+      def body_flex
+        if flex.present?
+          "flex_#{flex}"
+        else
+          ""
+        end
+      end
+
+      def body_flex_grow
+        if flex_grow.present?
+          "flex_grow_#{flex_grow}"
+        else
+          ""
+        end
+      end
+
+      def body_flex_shrink
+        if flex_shrink.present?
+          "flex_shrink_#{flex_shrink}"
+        else
+          ""
+        end
+      end
+
+      def body_order
+        if order.present?
+          "order_#{order}"
+        else
+          ""
+        end
+      end
+
     private
 
       def selected_class

data/app/pb_kits/playbook/pb_card/card_body.rb

@@ -4,7 +4,7 @@ module Playbook
   module PbCard
     class CardBody < Playbook::KitBase
       def classname
-        generate_classname("pb_card_body_kit", padding, separator: " ")
+        generate_classname("pb_card_body_kit", padding, flex_direction, justify_content, flex_wrap, justify_self, align_items, align_content, align_self, flex, flex_grow, flex_shrink, order, separator: " ")
       end
     end
   end

data/app/pb_kits/playbook/pb_flex/docs/_flex_align.jsx

@@ -7,7 +7,7 @@ const FlexAlign = (props) => {
 
       <Title
           size={4}
-          text="Row"
+          text="row"
           {...props}
       />
       <br />

data/app/pb_kits/playbook/pb_flex/flex_item.rb

@@ -8,17 +8,11 @@ module Playbook
                   default: false
       prop :shrink, type: Playbook::Props::Boolean,
                     default: false
-      prop :flex, type: Playbook::Props::Enum,
-                  values: %w[0 1 2 3 4 5 6 7 8 9 10 11 12 none],
-                  default: "none"
+
       prop :overflow, type: Playbook::Props::Enum,
                       values: %w[auto hidden inherit initial scroll visible] + [nil],
                       default: nil
 
-      prop :order, type: Playbook::Props::Enum,
-                   values: %w[1 2 3 4 5 6 7 8 9 10 11 12 first none],
-                   default: "none"
-
       prop :align_self, type: Playbook::Props::Enum,
                         values: %w[start center end stretch] + [nil],
                         default: nil
@@ -27,7 +21,7 @@ module Playbook
                           default: false
 
       def classname
-        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, flex_class, display_flex_class) + overflow_class + order_class + align_self_class
+        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + overflow_class + align_self_class
       end
 
       def style_value
@@ -59,22 +53,6 @@ module Playbook
       def shrink_class
         shrink ? "shrink" : nil
       end
-
-      def flex_class
-        if flex == "none"
-          nil
-        else
-          "flex_#{flex}"
-        end
-      end
-
-      def order_class
-        if order == "none"
-          ""
-        else
-          "order_#{order}"
-        end
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -41,6 +41,7 @@
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
     min-height: 45px;
+    margin-bottom: 16px;
   }
 
   & > [class^=pb_button_kit]:not(:first-child) {
@@ -48,6 +49,7 @@
     border-top-left-radius: 0;
     border-left-width: 0;
     min-height: 45px;
+    margin-bottom: 16px;
   }
 
   & > [class^=pb_date_picker_kit]:not(:last-child) {

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -73,7 +73,7 @@ module Playbook
 
       def render_svg(path)
         if File.extname(path) == ".svg"
-          doc = Nokogiri::XML(open(path)) # rubocop:disable Security/Open
+          doc = Nokogiri::XML(URI.open(path)) # rubocop:disable Security/Open
           svg = doc.at_css "svg"
           svg["class"] = "pb_custom_icon " + object.custom_icon_classname
           raw doc

data/app/pb_kits/playbook/pb_image/docs/{_default_image.jsx → _default_image.tsx}

@@ -2,7 +2,7 @@ import React from 'react'
 
 import Image from '../_image'
 
-const DefaultImage = (props) => {
+const DefaultImage = (props: any) => {
   return (
     <>
       <br />

data/app/pb_kits/playbook/pb_image/docs/index.js

@@ -1,4 +1,4 @@
-export { default as DefaultImage } from './_default_image.jsx'
-export { default as RoundedImage } from './_rounded_image.jsx'
-export { default as CustomErrorImage } from './_custom_error_image.jsx'
-export { default as TransitionImage } from './_transition_image.jsx'
+export { default as DefaultImage } from './_default_image'
+export { default as RoundedImage } from './_rounded_image'
+export { default as CustomErrorImage } from './_custom_error_image'
+export { default as TransitionImage } from './_transition_image'

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.jsx

@@ -11,6 +11,7 @@ const LineGraphDefault = (props) => (
     <LineGraph
         axisTitle="Number of Employees"
         chartData={data}
+        height="300px"
         id="line-fixed-height"
         title="Fixed Height (300px)"
         xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}

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

@@ -1,12 +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')
@@ -16,6 +16,8 @@ try {
   }
 } catch (_e) { /* do nothing */ }
 
+import { TrixEditor } from "react-trix"
+
 type RichTextEditorProps = {
   aria?: object,
   toolbarBottom?: Boolean,
@@ -25,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,
@@ -40,133 +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
-
-    const anchorElement = clickedElement.closest('a')
-    if (!anchorElement) return
+    // DOM event listeners
+    element.addEventListener('trix-selection-change', () => {
+      const type = getCodeFormattingType()
+      blockCodeButton.hidden = type == 'inline'
+      inlineCodeButton.hidden = type == 'block'
+    })
 
-    if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
-  }
+    focus
+      ? (document.addEventListener('trix-focus', useFocus),
+      document.addEventListener('trix-blur', useFocus),
+      useFocus())
+      : null
 
-  const handleClick = (event) => {
-    handleAnchorElementClick(event.target)
+    document.addEventListener('trix-focus', inlineFocus)
+    document.addEventListener('trix-blur', inlineFocus)
   }
 
   useEffect(() => {
-    trixRef.current.addEventListener('click', handleClick)
-  }, [])
+    if (!editor || !template) return
+    editor.loadHTML('')
+    editor.setSelectedRange([0, 0])
+    editor.insertHTML(template)
+  }, [editor, template])
 
   useEffect(() => {
-    trixRef.current.editor.loadHTML(value)
-  }, [value])
+    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_text_input/_text_input.jsx

@@ -75,6 +75,8 @@ const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
     globalProps(props),
     className,
   ])
+  const uniqueTextInputKey = `${id ? id : ''}${Math.ceil(Math.random() * 100000)}`
+
   const addOnIcon = (
     <Icon
         className="add-on-icon"
@@ -89,6 +91,7 @@ const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
         className="text_input"
         disabled={disabled}
         id={id}
+        key={uniqueTextInputKey}
         name={name}
         onChange={onChange}
         placeholder={placeholder}

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