playbook_ui 10.22.1 → 10.23.0.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8d716c8b2fb0fb3cb78211c502bf2049420b05f536fdcc4ad183bce41703d364
-  data.tar.gz: dcb16d5fc153dc5eba40f0ae8b32299e782a4f3ca929540179a6d08002f15572
+  metadata.gz: 1064b4903003c9465a6a1b5684e3ac6d8c0f2c38ce29cfcbc7fd9b7d31d806bd
+  data.tar.gz: 647ec3b406545ce663b720a6fcd58afb24b7b6e46157e25f39e9d853df03c10e
 SHA512:
-  metadata.gz: 523973d2fa615911426199d7d49d22748926f40e2f704e0fbf6958d632cd7301dade5a6971659fc41fbc7844b98bcff8f80d3efe16554a60fe782d00dfa5dedc
-  data.tar.gz: f0a6509496789efbbfa0884d08c87fe7d902fe4d09feb07d7f918c7e2d034ce8213d9f01fd48b8132bdcfc584192c7357c6269604912d70356b80b45c1e20fff
+  metadata.gz: 1bf4ce670bc7af1955416bca763c2bc29357e0121b2310a8008835451473832a80a888edb80dcc357785ed5cb359797b2bb465985db2982bdfce04f869601362
+  data.tar.gz: cccee1ed2ebd68d8249b948df123de1145960acfb2dd5ee34d5388339c24f9f97219cb31499e5e3a07c903dac7398b2b507b10badfefc0968447915af8796232

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_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_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/utilities/globalProps.ts

@@ -59,7 +59,59 @@ type BorderRadius = {
   borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "rounded",
 }
 
-export type GlobalProps = BorderRadius & Cursor & Dark & Display & LineHeight & Margin & MaxWidth & NumberSpacing & Padding & Shadow & ZIndex
+type Flex = {
+  flex?: "none" | "initial" | "auto" | 1
+}
+
+type FlexDirection = {
+  flexDirection?: "row" | "column" | "rowReverse" | "columnReverse"
+}
+
+type FlexGrow = {
+  flexGrow?: 0 | 1
+}
+
+type FlexShrink = {
+  flexShrink?: 0 | 1
+}
+
+type FlexWrap = {
+  flexWrap?: "wrap" | "nowrap" | "wrapReverse"
+}
+
+type Alignment = "start" | "end" | "center"
+
+type Space = "spaceBetween" | "spaceAround" | "spaceEvenly"
+
+type JustifyContent = {
+  justifyContent?: Alignment & Space
+}
+
+type JustifySelf = {
+  justifySelf?: Alignment & ("auto" | "stretch")
+}
+
+type AlignContent = {
+  alignContent?: Alignment & Space
+}
+
+type AlignItems = {
+  alignItems?: Alignment & ("flexStart" | "flexEnd" | "stretch" | "baseline")
+}
+
+type AlignSelf = {
+  alignSelf?: Alignment & ("auto" | "stretch" | "baseline")
+}
+
+type Order = {
+  order?: "none" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+}
+
+export type GlobalProps = AlignContent & AlignItems & AlignSelf &
+  BorderRadius & Cursor & Dark & Display & Flex & FlexDirection &
+  FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
+  LineHeight & Margin & MaxWidth & NumberSpacing & Order & Padding &
+  Shadow & ZIndex
 
 // Prop categories
 const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} = {
@@ -135,15 +187,81 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     let css = ''
     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) => {
+    let css = ''
+    css += alignItems == 'flexStart' ? 'align_items_flex_start' :
+      alignItems == 'flexEnd' ? 'align_items_flex_end' :
+        alignItems ? `align_items_${alignItems}` : ''
+    return css
+  },
+  alignContentProps: ({ alignContent }: 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) => {
+    let css = ''
+    css += alignSelf ? `align_self_${alignSelf}` : ''
+    return css
+  },
+  flexProps: ({ flex }: Flex) => {
+    let css = ''
+    css += flex ? `flex_${flex}` : ''
+    return css
+  },
+  flexGrowProps: ({ flexGrow }: FlexGrow) => {
+    let css = ''
+    css += flexGrow ? `flex_grow_${flexGrow}` : ''
+    return css
+  },
+  flexShrinkProps: ({ flexShrink }: FlexShrink) => {
+    let css = ''
+    css += flexShrink ? `flex_shrink_${flexShrink}` : ''
+    return css
+  },
+  orderProps: ({ order }: Order) => {
+    let css = ''
+    css += order ? `order_${order}` : ''
+    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("")
+  }).filter((value) => value?.length > 0).join(" ")
 }
 
 export const deprecatedProps = (kit: string, props: string[] = []): void => {

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "10.22.0"
-  VERSION = "10.22.1"
+  PREVIOUS_VERSION = "10.21.0"
+  VERSION = "10.23.0.pre.alpha1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.22.1
+  version: 10.23.0.pre.alpha1
 platform: ruby
 authors:
 - Power UX
@@ -1092,7 +1092,7 @@ files:
 - app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
 - app/pb_kits/playbook/pb_image/docs/_custom_error_image.jsx
 - app/pb_kits/playbook/pb_image/docs/_default_image.html.erb
-- app/pb_kits/playbook/pb_image/docs/_default_image.jsx
+- app/pb_kits/playbook/pb_image/docs/_default_image.tsx
 - app/pb_kits/playbook/pb_image/docs/_description.md
 - app/pb_kits/playbook/pb_image/docs/_rounded_image.html.erb
 - app/pb_kits/playbook/pb_image/docs/_rounded_image.jsx
@@ -2086,7 +2086,6 @@ files:
 - app/pb_kits/playbook/utilities/_positioning.scss
 - app/pb_kits/playbook/utilities/_shadow.scss
 - app/pb_kits/playbook/utilities/_spacing.scss
-- app/pb_kits/playbook/utilities/globalProps.js
 - app/pb_kits/playbook/utilities/globalProps.ts
 - app/pb_kits/playbook/utilities/props.ts
 - app/pb_kits/playbook/utilities/test-utils.js
@@ -2164,9 +2163,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.1.6
 signing_key:

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

@@ -1,175 +0,0 @@
-// Prop categories
-const spacingProps = ({
-  marginRight,
-  marginLeft,
-  marginTop,
-  marginBottom,
-  marginX,
-  marginY,
-  margin,
-  paddingRight,
-  paddingLeft,
-  paddingTop,
-  paddingBottom,
-  paddingX,
-  paddingY,
-  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
-}
-
-const darkProps = ({ dark }) => {
-  let css = ''
-  css += dark ? 'dark' : ''
-  return css
-}
-
-const numberSpacingProps = ({ numberSpacing }) => {
-  let css = ''
-  css += numberSpacing ? `ns_${numberSpacing} ` : ''
-  return css
-}
-
-const maxWidthProps = ({ maxWidth }) => {
-  let css = ''
-  css += maxWidth ? `max_width_${maxWidth} ` : ''
-  return css
-}
-
-const zIndexProps = ({ zIndex }) => {
-  let css = ''
-  css += zIndex ? `z_index_${zIndex} ` : ''
-  return css
-}
-
-const shadowProps = ({ shadow }) => {
-  let css = ''
-  css += shadow ? `shadow_${shadow} ` : ''
-  return css
-}
-
-const lineHeightProps = ({ lineHeight }) => {
-  let css = ''
-  css += lineHeight ? `line_height_${lineHeight} ` : ''
-  return css
-}
-
-const displayProps = ({ display }) => {
-  let css = ''
-  css += display ? `display_${display} ` : ''
-  return css
-}
-
-const cursorProps = ({ cursor }) => {
-  let css = ''
-  css += cursor ? `cursor_${cursor} ` : ''
-  return css
-}
-
-const flexDirectionProps = ({ flexDirection }) => {
-  let css = ''
-  css += flexDirection == 'columnReverse' ? 'flex_direction_column_reverse' :
-    flexDirection == 'rowReverse' ? 'flex_direction_row_reverse' :
-      flexDirection ? `flex_direction_${flexDirection} ` : ''
-  return css
-}
-
-const flexWrapProps = ({ flexWrap }) => {
-  let css = ''
-  css += flexWrap == 'wrapReverse' ? 'flex_wrap_reverse' :
-    flexWrap == 'noWrap' ? 'flex_nowrap' :
-      flexWrap ? `flex_wrap_${flexWrap} ` : ''
-  return css
-}
-
-const justifyContentProps = ({ 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
-}
-
-const justifySelfProps = ({ justifySelf }) => {
-  let css = ''
-  css += justifySelf ? `justify_self_${justifySelf}` : ''
-  return css
-}
-
-const alignItemsProps = ({ alignItems }) => {
-  let css = ''
-  css += alignItems == 'flexStart' ? 'align_items_flex_start' :
-    alignItems == 'flexEnd' ? 'align_items_flex_end' :
-      alignItems ? `align_items_${alignItems}` : ''
-  return css
-}
-
-const alignContentProps = ({ 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
-}
-
-const alignSelfProps = ({ alignSelf }) => {
-  let css = ''
-  css += alignSelf ? `align_self_${alignSelf}` : ''
-  return css
-}
-
-const flexProps = ({ flex }) => {
-  let css = ''
-  css += flex ? `flex_${flex}` : ''
-  return css
-}
-
-const flexGrowProps = ({ flexGrow }) => {
-  let css = ''
-  css += flexGrow ? `flex_grow_${flexGrow}` : ''
-  return css
-}
-
-const flexShrinkProps = ({ flexShrink }) => {
-  let css = ''
-  css += flexShrink ? `flex_shrink_${flexShrink}` : ''
-  return css
-}
-
-const orderProps = ({ order }) => {
-  let css = ''
-  css += order ? `order_${order}` : ''
-  return css
-}
-
-// All Exported as a single function
-export const globalProps = (props, defaultProps = {}) => {
-  const allProps = { ...props, ...defaultProps }
-  return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps) + zIndexProps(allProps) + numberSpacingProps(allProps) + shadowProps(allProps) + lineHeightProps(allProps) + cursorProps(allProps) + displayProps(allProps) + flexDirectionProps(allProps) + flexWrapProps(allProps) + justifyContentProps(allProps) + justifySelfProps(allProps) + alignItemsProps(allProps) + alignContentProps(allProps) + alignSelfProps(allProps) + flexProps(allProps) + flexGrowProps(allProps) + flexShrinkProps(allProps) + orderProps(allProps)
-}
-
-export const deprecatedProps = (kit, props = []) => {
-  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!`)
-    })
-  }
-}