playbook_ui 10.21.1.pre.alpha1 → 10.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 90a49eef5f7ef47b1e7921d940c7d1e6d56c7c11971e0612f88cd9aa6202079d
4
- data.tar.gz: '0068f6fa35d25227519e9400cfc73fe66755f07c8e2521170829ff47e3926231'
3
+ metadata.gz: ea3a606f6fc57caa794e3c5fdf56f6b03244681e3706e111c5f96936581ce012
4
+ data.tar.gz: '039e8111a96de8430865f0bf180b4c65f22ec7dfa4a964c7bdc2f53abee4521e'
5
5
  SHA512:
6
- metadata.gz: f9e65e6665780627141458de4acdb6e73e827ffe7f426cc4e0ce7ee71f40fd024d4c263c7c8fb126d88ea256b19d9a576914f60a075521959e5d2d196ec6dc10
7
- data.tar.gz: f38dcd80a6acc7940e961c3f25bae68f70cf204cce40cdbed752222c2e762cf388e1aff147f6e9ee0218eefae3bbf342c96defb1e2ec01ef33d6412c64543020
6
+ metadata.gz: 968ed3f5a5f03354909f874344838c9e546b1d76b2dca1a8f3d78678fd56785d32d1b1759535da9057d745d4b10e824c203b4d1603601b7c08802f4d853dbd83
7
+ data.tar.gz: 78d1ad057032a67956c079646761ee9c66af33bd4594f44e8fcda00573b55ff569a03643ef32cbb11557477ae96ab621ac9251bc761bc5e46381d72517ce20d6
@@ -15,6 +15,7 @@ type ButtonPropTypes = {
15
15
  data?: object,
16
16
  disabled?: boolean,
17
17
  fixedWidth?: boolean,
18
+ form?: string,
18
19
  fullWidth?: boolean,
19
20
  icon?: string,
20
21
  id?: string,
@@ -69,6 +70,7 @@ const Button = (props: ButtonPropTypes) => {
69
70
  text,
70
71
  htmlType = 'button',
71
72
  value,
73
+ form = null
72
74
  } = props
73
75
 
74
76
  const ariaProps = buildAriaProps(aria)
@@ -119,6 +121,7 @@ const Button = (props: ButtonPropTypes) => {
119
121
  {...dataProps}
120
122
  className={css}
121
123
  disabled={disabled}
124
+ form={form}
122
125
  id={id}
123
126
  onClick={onClick}
124
127
  role="button"
@@ -13,9 +13,9 @@ $pb_button_sizes: (
13
13
  &[class*=size_#{$name}] {
14
14
  font-size: $size;
15
15
  padding: calc(#{$size} / 2) calc(#{$size} * 2.42) !important;
16
- @if $name == "sm" {
17
- min-height: 0;
18
- }
16
+ }
17
+ @if $name == "sm" {
18
+ min-height: 0;
19
19
  }
20
20
  }
21
21
 
@@ -21,6 +21,7 @@ module Playbook
21
21
  prop :size, type: Playbook::Props::Enum,
22
22
  values: ["sm", "md", "lg", nil],
23
23
  default: nil
24
+ prop :form, default: nil
24
25
 
25
26
  def options
26
27
  {
@@ -32,6 +33,7 @@ module Playbook
32
33
  role: "button",
33
34
  type: type,
34
35
  value: value,
36
+ form: form,
35
37
  }.compact
36
38
  end
37
39
 
@@ -1 +1 @@
1
- <%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "Go to Google"}, tag: "a", link: "http://google.com" }) %>
1
+ <%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "Go to Google"}, tag: "a", link: "http://google.com"}) %>
@@ -0,0 +1 @@
1
+ <%= pb_rails("button", props: { text: "Button with Form Attribute", form: "form-id"}) %>
@@ -0,0 +1,14 @@
1
+ import React from 'react'
2
+ import { Button } from '../../'
3
+
4
+ const ButtonForm = (props) => (
5
+ <div>
6
+ <Button
7
+ form="form-id"
8
+ text="Button with Form Attribute"
9
+ {...props}
10
+ />
11
+ </div>
12
+ )
13
+
14
+ export default ButtonForm
@@ -8,6 +8,7 @@ examples:
8
8
  - button_accessibility: Button Accessibility Options
9
9
  - button_options: Button Additional Options
10
10
  - button_size: Button Size
11
+ - button_form: Button Form Attribute
11
12
  react:
12
13
  - button_default: Button Variants
13
14
  - button_full_width: Button Full Width
@@ -17,3 +18,4 @@ examples:
17
18
  - button_accessibility: Button Accessibility Options
18
19
  - button_options: Button Additional Options (onClick)
19
20
  - button_size: Button Size
21
+ - button_form: Button Form Attribute
@@ -6,3 +6,4 @@ export { default as ButtonBlockContent } from './_button_block_content.jsx'
6
6
  export { default as ButtonAccessibility } from './_button_accessibility.jsx'
7
7
  export { default as ButtonOptions } from './_button_options.jsx'
8
8
  export { default as ButtonSize } from './_button_size.jsx'
9
+ export { default as ButtonForm } from './_button_form.jsx'
@@ -41,7 +41,6 @@
41
41
  border-bottom-right-radius: 0;
42
42
  border-top-right-radius: 0;
43
43
  min-height: 45px;
44
- margin-bottom: 16px;
45
44
  }
46
45
 
47
46
  & > [class^=pb_button_kit]:not(:first-child) {
@@ -49,7 +48,6 @@
49
48
  border-top-left-radius: 0;
50
49
  border-left-width: 0;
51
50
  min-height: 45px;
52
- margin-bottom: 16px;
53
51
  }
54
52
 
55
53
  & > [class^=pb_date_picker_kit]:not(:last-child) {
@@ -73,7 +73,7 @@ module Playbook
73
73
 
74
74
  def render_svg(path)
75
75
  if File.extname(path) == ".svg"
76
- doc = Nokogiri::XML(URI.open(path)) # rubocop:disable Security/Open
76
+ doc = Nokogiri::XML(open(path)) # rubocop:disable Security/Open
77
77
  svg = doc.at_css "svg"
78
78
  svg["class"] = "pb_custom_icon " + object.custom_icon_classname
79
79
  raw doc
@@ -2,7 +2,7 @@ import React from 'react'
2
2
 
3
3
  import Image from '../_image'
4
4
 
5
- const DefaultImage = (props: any) => {
5
+ const DefaultImage = (props) => {
6
6
  return (
7
7
  <>
8
8
  <br />
@@ -1,4 +1,4 @@
1
- export { default as DefaultImage } from './_default_image'
2
- export { default as RoundedImage } from './_rounded_image'
3
- export { default as CustomErrorImage } from './_custom_error_image'
4
- export { default as TransitionImage } from './_transition_image'
1
+ export { default as DefaultImage } from './_default_image.jsx'
2
+ export { default as RoundedImage } from './_rounded_image.jsx'
3
+ export { default as CustomErrorImage } from './_custom_error_image.jsx'
4
+ export { default as TransitionImage } from './_transition_image.jsx'
@@ -1,12 +1,12 @@
1
1
  /* @flow */
2
2
  /* eslint-disable react-hooks/rules-of-hooks */
3
3
 
4
- import React, { useEffect, useState } from 'react'
4
+ import React, { useEffect, useRef } from 'react'
5
5
  import classnames from 'classnames'
6
6
  import inlineFocus from './inlineFocus'
7
7
  import useFocus from './useFocus'
8
8
  import { globalProps } from '../utilities/globalProps'
9
- import { buildAriaProps, buildDataProps, noop } from '../utilities/props'
9
+ import { buildAriaProps, buildDataProps } from '../utilities/props'
10
10
 
11
11
  try {
12
12
  const Trix = require('trix')
@@ -16,8 +16,6 @@ try {
16
16
  }
17
17
  } catch (_e) { /* do nothing */ }
18
18
 
19
- import { TrixEditor } from "react-trix"
20
-
21
19
  type RichTextEditorProps = {
22
20
  aria?: object,
23
21
  toolbarBottom?: Boolean,
@@ -27,7 +25,7 @@ type RichTextEditorProps = {
27
25
  id?: string,
28
26
  inline?: boolean,
29
27
  name?: string,
30
- onChange: (html: string, text: string) => void,
28
+ onChange: (string) => void,
31
29
  placeholder?: string,
32
30
  simple?: boolean,
33
31
  sticky?: boolean,
@@ -42,117 +40,134 @@ const RichTextEditor = (props: RichTextEditorProps) => {
42
40
  className,
43
41
  data = {},
44
42
  focus = false,
43
+ id,
45
44
  inline = false,
46
45
  name,
47
- onChange = noop,
46
+ onChange,
48
47
  placeholder,
49
48
  simple = false,
50
49
  sticky = false,
51
50
  template = '',
52
51
  value = '',
53
52
  } = props
53
+ const trixRef = useRef()
54
+ const ariaProps = buildAriaProps(aria)
55
+ const dataProps = buildDataProps(data)
54
56
 
55
- const ariaProps = buildAriaProps(aria),
56
- dataProps = buildDataProps(data),
57
- [editor, setEditor] = useState()
57
+ useEffect(() => {
58
+ trixRef.current.addEventListener('trix-initialize', (event) => {
59
+ const element = event.target
58
60
 
59
- const handleOnEditorReady = (editorInstance) => setEditor(editorInstance),
60
- element = editor?.element
61
+ const { toolbarElement, editor } = element
61
62
 
62
- // DOM manipulation must wait for editor to be ready
63
- if (editor) {
64
- const toolbarElement = element.parentElement.querySelector('trix-toolbar'),
65
- blockCodeButton = toolbarElement.querySelector('[data-trix-attribute=code]')
63
+ const blockCodeButton = toolbarElement.querySelector(
64
+ '[data-trix-attribute=code]'
65
+ )
66
+ const inlineCodeButton = blockCodeButton.cloneNode(true)
66
67
 
67
- let inlineCodeButton = toolbarElement.querySelector('[data-trix-attribute=inlineCode]')
68
- if (!inlineCodeButton) inlineCodeButton = blockCodeButton.cloneNode(true)
68
+ inlineCodeButton.hidden = true
69
+ inlineCodeButton.dataset.trixAttribute = 'inlineCode'
70
+ blockCodeButton.insertAdjacentElement('afterend', inlineCodeButton)
69
71
 
70
- // set button attributes
71
- inlineCodeButton.dataset.trixAttribute = 'inlineCode'
72
- blockCodeButton.insertAdjacentElement('afterend', inlineCodeButton)
72
+ const getCodeFormattingType = () => {
73
+ if (editor.attributeIsActive('code')) return 'block'
74
+ if (editor.attributeIsActive('inlineCode')) return 'inline'
73
75
 
74
- if (toolbarBottom) editor.element.after(toolbarElement)
76
+ const range = editor.getSelectedRange()
77
+ if (range[0] == range[1]) return 'block'
75
78
 
76
- const getCodeFormattingType = (): string => {
77
- if (editor.attributeIsActive('code')) return 'block'
78
- if (editor.attributeIsActive('inlineCode')) return 'inline'
79
+ const text = editor.getSelectedDocument().toString().trim()
80
+ return /\n/.test(text) ? 'block' : 'inline'
81
+ }
79
82
 
80
- const range = editor.getSelectedRange()
81
- if (range[0] == range[1]) return 'block'
83
+ element.addEventListener('trix-selection-change', () => {
84
+ const type = getCodeFormattingType()
85
+ blockCodeButton.hidden = type == 'inline'
86
+ inlineCodeButton.hidden = type == 'block'
87
+ })
82
88
 
83
- const text = editor.getSelectedDocument().toString().trim()
84
- return /\n/.test(text) ? 'block' : 'inline'
85
- }
89
+ if (toolbarBottom) editor.element.after(toolbarElement)
90
+ })
86
91
 
87
- // DOM event listeners
88
- element.addEventListener('trix-selection-change', () => {
89
- const type = getCodeFormattingType()
90
- blockCodeButton.hidden = type == 'inline'
91
- inlineCodeButton.hidden = type == 'block'
92
+ trixRef.current.addEventListener('trix-change', (event) => {
93
+ onChange && onChange(event.target.innerHTML)
92
94
  })
95
+ }, [trixRef])
96
+
97
+ useEffect(() => {
98
+ const editor = trixRef.current.editorController.editor
99
+ if (template) {
100
+ editor.loadHTML('')
101
+ editor.setSelectedRange([0, 0])
102
+ editor.insertHTML(template)
103
+ }
104
+ }, [template])
105
+
106
+ focus
107
+ ? (document.addEventListener('trix-focus', useFocus),
108
+ document.addEventListener('trix-blur', useFocus),
109
+ useFocus())
110
+ : null
111
+
112
+ document.addEventListener('trix-focus', inlineFocus)
113
+ document.addEventListener('trix-blur', inlineFocus)
93
114
 
94
- focus
95
- ? (document.addEventListener('trix-focus', useFocus),
96
- document.addEventListener('trix-blur', useFocus),
97
- useFocus())
98
- : null
115
+ const handleAnchorElementClick = (clickedElement) => {
116
+ const trixEditorContainer = clickedElement.closest('.pb_rich_text_editor_kit')
117
+ if (!trixEditorContainer) return
99
118
 
100
- document.addEventListener('trix-focus', inlineFocus)
101
- document.addEventListener('trix-blur', inlineFocus)
119
+ const anchorElement = clickedElement.closest('a')
120
+ if (!anchorElement) return
121
+
122
+ if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
123
+ }
124
+
125
+ const handleClick = (event) => {
126
+ handleAnchorElementClick(event.target)
102
127
  }
103
128
 
104
129
  useEffect(() => {
105
- if (!editor || !template) return
106
- editor.loadHTML('')
107
- editor.setSelectedRange([0, 0])
108
- editor.insertHTML(template)
109
- }, [editor, template])
130
+ trixRef.current.addEventListener('click', handleClick)
131
+ }, [])
110
132
 
111
133
  useEffect(() => {
112
- if (!element) return
113
- element.addEventListener('click', ({target}) => {
114
- const trixEditorContainer = target.closest('.pb_rich_text_editor_kit')
115
- if (!trixEditorContainer) return
134
+ trixRef.current.editor.loadHTML(value)
135
+ }, [value])
116
136
 
117
- const anchorElement = target.closest('a')
118
- if (!anchorElement) return
119
-
120
- if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
121
- })
122
- }, [element])
123
-
124
- const richTextEditorClass = 'pb_rich_text_editor_kit',
125
- simpleClass = simple ? 'simple' : '',
126
- focusClass = focus ? 'focus-editor-targets' : '',
127
- stickyClass = sticky ? 'sticky' : '',
128
- inlineClass = inline ? 'inline' : '',
129
- toolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
130
-
131
- let css = classnames(globalProps(props), className)
132
- css = classnames(
133
- richTextEditorClass,
134
- simpleClass,
135
- focusClass,
136
- stickyClass,
137
- inlineClass,
138
- toolbarBottomClass,
139
- css
140
- )
137
+ const RichTextEditorClass = 'pb_rich_text_editor_kit'
138
+ const SimpleClass = simple ? 'simple' : ''
139
+ const FocusClass = focus ? 'focus-editor-targets' : ''
140
+ const StickyClass = sticky ? 'sticky' : ''
141
+ const InlineClass = inline ? 'inline' : ''
142
+ const ToolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
143
+ const css = classnames(globalProps(props), className)
141
144
 
142
145
  return (
143
146
  <div
144
147
  {...ariaProps}
145
148
  {...dataProps}
146
- className={css}
149
+ className={classnames(
150
+ RichTextEditorClass,
151
+ SimpleClass,
152
+ FocusClass,
153
+ StickyClass,
154
+ InlineClass,
155
+ ToolbarBottomClass,
156
+ css
157
+ )}
147
158
  >
148
- <TrixEditor
149
- className=""
150
- fileParamName={name}
151
- onChange={onChange}
152
- onEditorReady={handleOnEditorReady}
153
- placeholder={placeholder}
159
+ <input
160
+ id={id}
161
+ name={name}
162
+ type="hidden"
154
163
  value={value}
155
164
  />
165
+ <trix-editor
166
+ input={id}
167
+ name={name}
168
+ placeholder={placeholder}
169
+ ref={trixRef}
170
+ />
156
171
  </div>
157
172
  )
158
173
  }
@@ -1 +1 @@
1
- <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here. You can format your text, add links, quotes, and bullets."}) %>
1
+ <%= pb_rails("rich_text_editor", props: {id: "default"}) %>
@@ -1,19 +1,12 @@
1
- import React, { useState } from 'react'
1
+ import React from 'react'
2
2
  import { RichTextEditor } from '../../'
3
3
 
4
- const RichTextEditorDefault = (props) => {
5
- const [value, setValue] = useState('Add your text here. You can format your text, add links, quotes, and bullets.'),
6
- handleOnChange = (html) => setValue(html)
7
-
8
- return (
9
- <div>
10
- <RichTextEditor
11
- onChange={handleOnChange}
12
- value={value}
13
- {...props}
14
- />
15
- </div>
16
- )
17
- }
4
+ const RichTextEditorDefault = (props) => (
5
+ <div>
6
+ <RichTextEditor
7
+ {...props}
8
+ />
9
+ </div>
10
+ )
18
11
 
19
12
  export default RichTextEditorDefault
@@ -0,0 +1,175 @@
1
+ // Prop categories
2
+ const spacingProps = ({
3
+ marginRight,
4
+ marginLeft,
5
+ marginTop,
6
+ marginBottom,
7
+ marginX,
8
+ marginY,
9
+ margin,
10
+ paddingRight,
11
+ paddingLeft,
12
+ paddingTop,
13
+ paddingBottom,
14
+ paddingX,
15
+ paddingY,
16
+ padding,
17
+ }) => {
18
+ let css = ''
19
+ css += marginRight ? `mr_${marginRight} ` : ''
20
+ css += marginLeft ? `ml_${marginLeft} ` : ''
21
+ css += marginTop ? `mt_${marginTop} ` : ''
22
+ css += marginBottom ? `mb_${marginBottom} ` : ''
23
+ css += marginX ? `mx_${marginX} ` : ''
24
+ css += marginY ? `my_${marginY} ` : ''
25
+ css += margin ? `m_${margin} ` : ''
26
+ css += paddingRight ? `pr_${paddingRight} ` : ''
27
+ css += paddingLeft ? `pl_${paddingLeft} ` : ''
28
+ css += paddingTop ? `pt_${paddingTop} ` : ''
29
+ css += paddingBottom ? `pb_${paddingBottom} ` : ''
30
+ css += paddingX ? `px_${paddingX} ` : ''
31
+ css += paddingY ? `py_${paddingY} ` : ''
32
+ css += padding ? `p_${padding} ` : ''
33
+ return css
34
+ }
35
+
36
+ const darkProps = ({ dark }) => {
37
+ let css = ''
38
+ css += dark ? 'dark' : ''
39
+ return css
40
+ }
41
+
42
+ const numberSpacingProps = ({ numberSpacing }) => {
43
+ let css = ''
44
+ css += numberSpacing ? `ns_${numberSpacing} ` : ''
45
+ return css
46
+ }
47
+
48
+ const maxWidthProps = ({ maxWidth }) => {
49
+ let css = ''
50
+ css += maxWidth ? `max_width_${maxWidth} ` : ''
51
+ return css
52
+ }
53
+
54
+ const zIndexProps = ({ zIndex }) => {
55
+ let css = ''
56
+ css += zIndex ? `z_index_${zIndex} ` : ''
57
+ return css
58
+ }
59
+
60
+ const shadowProps = ({ shadow }) => {
61
+ let css = ''
62
+ css += shadow ? `shadow_${shadow} ` : ''
63
+ return css
64
+ }
65
+
66
+ const lineHeightProps = ({ lineHeight }) => {
67
+ let css = ''
68
+ css += lineHeight ? `line_height_${lineHeight} ` : ''
69
+ return css
70
+ }
71
+
72
+ const displayProps = ({ display }) => {
73
+ let css = ''
74
+ css += display ? `display_${display} ` : ''
75
+ return css
76
+ }
77
+
78
+ const cursorProps = ({ cursor }) => {
79
+ let css = ''
80
+ css += cursor ? `cursor_${cursor} ` : ''
81
+ return css
82
+ }
83
+
84
+ const flexDirectionProps = ({ flexDirection }) => {
85
+ let css = ''
86
+ css += flexDirection == 'columnReverse' ? 'flex_direction_column_reverse' :
87
+ flexDirection == 'rowReverse' ? 'flex_direction_row_reverse' :
88
+ flexDirection ? `flex_direction_${flexDirection} ` : ''
89
+ return css
90
+ }
91
+
92
+ const flexWrapProps = ({ flexWrap }) => {
93
+ let css = ''
94
+ css += flexWrap == 'wrapReverse' ? 'flex_wrap_reverse' :
95
+ flexWrap == 'noWrap' ? 'flex_nowrap' :
96
+ flexWrap ? `flex_wrap_${flexWrap} ` : ''
97
+ return css
98
+ }
99
+
100
+ const justifyContentProps = ({ justifyContent }) => {
101
+ let css = ''
102
+ css += justifyContent == 'spaceBetween' ? 'justify_content_space_between' :
103
+ justifyContent == 'spaceEvenly' ? 'justify_content_space_evenly' :
104
+ justifyContent == 'spaceAround' ? 'justify_content_space_around' :
105
+ justifyContent ? `justify_content_${justifyContent}` : ''
106
+ return css
107
+ }
108
+
109
+ const justifySelfProps = ({ justifySelf }) => {
110
+ let css = ''
111
+ css += justifySelf ? `justify_self_${justifySelf}` : ''
112
+ return css
113
+ }
114
+
115
+ const alignItemsProps = ({ alignItems }) => {
116
+ let css = ''
117
+ css += alignItems == 'flexStart' ? 'align_items_flex_start' :
118
+ alignItems == 'flexEnd' ? 'align_items_flex_end' :
119
+ alignItems ? `align_items_${alignItems}` : ''
120
+ return css
121
+ }
122
+
123
+ const alignContentProps = ({ alignContent }) => {
124
+ let css = ''
125
+ css += alignContent == 'spaceBetween' ? 'align_content_space_between' :
126
+ alignContent == 'spaceEvenly' ? 'align_content_space_evenly' :
127
+ alignContent == 'spaceAround' ? 'align_content_space_around' :
128
+ alignContent ? `align_content_${alignContent}` : ''
129
+ return css
130
+ }
131
+
132
+ const alignSelfProps = ({ alignSelf }) => {
133
+ let css = ''
134
+ css += alignSelf ? `align_self_${alignSelf}` : ''
135
+ return css
136
+ }
137
+
138
+ const flexProps = ({ flex }) => {
139
+ let css = ''
140
+ css += flex ? `flex_${flex}` : ''
141
+ return css
142
+ }
143
+
144
+ const flexGrowProps = ({ flexGrow }) => {
145
+ let css = ''
146
+ css += flexGrow ? `flex_grow_${flexGrow}` : ''
147
+ return css
148
+ }
149
+
150
+ const flexShrinkProps = ({ flexShrink }) => {
151
+ let css = ''
152
+ css += flexShrink ? `flex_shrink_${flexShrink}` : ''
153
+ return css
154
+ }
155
+
156
+ const orderProps = ({ order }) => {
157
+ let css = ''
158
+ css += order ? `order_${order}` : ''
159
+ return css
160
+ }
161
+
162
+ // All Exported as a single function
163
+ export const globalProps = (props, defaultProps = {}) => {
164
+ const allProps = { ...props, ...defaultProps }
165
+ 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)
166
+ }
167
+
168
+ export const deprecatedProps = (kit, props = []) => {
169
+ if (process.env.NODE_ENV === 'development') {
170
+ /* eslint no-console: ["error", { allow: ["warn", "error"] }] */
171
+ props.forEach((prop) => {
172
+ console.warn(`${kit} Kit: The prop '${prop}' is deprecated and will be removed in a future release!`)
173
+ })
174
+ }
175
+ }
@@ -59,59 +59,7 @@ type BorderRadius = {
59
59
  borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "rounded",
60
60
  }
61
61
 
62
- type Flex = {
63
- flex?: "none" | "initial" | "auto" | 1
64
- }
65
-
66
- type FlexDirection = {
67
- flexDirection?: "row" | "column" | "rowReverse" | "columnReverse"
68
- }
69
-
70
- type FlexGrow = {
71
- flexGrow?: 0 | 1
72
- }
73
-
74
- type FlexShrink = {
75
- flexShrink?: 0 | 1
76
- }
77
-
78
- type FlexWrap = {
79
- flexWrap?: "wrap" | "nowrap" | "wrapReverse"
80
- }
81
-
82
- type Alignment = "start" | "end" | "center"
83
-
84
- type Space = "spaceBetween" | "spaceAround" | "spaceEvenly"
85
-
86
- type JustifyContent = {
87
- justifyContent?: Alignment & Space
88
- }
89
-
90
- type JustifySelf = {
91
- justifySelf?: Alignment & ("auto" | "stretch")
92
- }
93
-
94
- type AlignContent = {
95
- alignContent?: Alignment & Space
96
- }
97
-
98
- type AlignItems = {
99
- alignItems?: Alignment & ("flexStart" | "flexEnd" | "stretch" | "baseline")
100
- }
101
-
102
- type AlignSelf = {
103
- alignSelf?: Alignment & ("auto" | "stretch" | "baseline")
104
- }
105
-
106
- type Order = {
107
- order?: "none" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
108
- }
109
-
110
- export type GlobalProps = AlignContent & AlignItems & AlignSelf &
111
- BorderRadius & Cursor & Dark & Display & Flex & FlexDirection &
112
- FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
113
- LineHeight & Margin & MaxWidth & NumberSpacing & Order & Padding &
114
- Shadow & ZIndex
62
+ export type GlobalProps = BorderRadius & Cursor & Dark & Display & LineHeight & Margin & MaxWidth & NumberSpacing & Padding & Shadow & ZIndex
115
63
 
116
64
  // Prop categories
117
65
  const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} = {
@@ -187,81 +135,15 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
187
135
  let css = ''
188
136
  css += cursor ? `cursor_${cursor} ` : ''
189
137
  return css
190
- },
191
- flexDirectionProps: ({ flexDirection }: FlexDirection) => {
192
- let css = ''
193
- css += flexDirection == 'columnReverse' ? 'flex_direction_column_reverse' :
194
- flexDirection == 'rowReverse' ? 'flex_direction_row_reverse' :
195
- flexDirection ? `flex_direction_${flexDirection} ` : ''
196
- return css
197
- },
198
- flexWrapProps: ({ flexWrap }: FlexWrap) => {
199
- let css = ''
200
- css += flexWrap == 'wrapReverse' ? 'flex_wrap_reverse' :
201
- flexWrap == 'nowrap' ? 'flex_nowrap' :
202
- flexWrap ? `flex_wrap_${flexWrap} ` : ''
203
- return css
204
- },
205
- justifyContentProps: ({ justifyContent }: JustifyContent) => {
206
- let css = ''
207
- css += justifyContent == 'spaceBetween' ? 'justify_content_space_between' :
208
- justifyContent == 'spaceEvenly' ? 'justify_content_space_evenly' :
209
- justifyContent == 'spaceAround' ? 'justify_content_space_around' :
210
- justifyContent ? `justify_content_${justifyContent}` : ''
211
- return css
212
- },
213
- justifySelfProps: ({ justifySelf }: JustifySelf) => {
214
- let css = ''
215
- css += justifySelf ? `justify_self_${justifySelf}` : ''
216
- return css
217
- },
218
- alignItemsProps: ({ alignItems }: AlignItems) => {
219
- let css = ''
220
- css += alignItems == 'flexStart' ? 'align_items_flex_start' :
221
- alignItems == 'flexEnd' ? 'align_items_flex_end' :
222
- alignItems ? `align_items_${alignItems}` : ''
223
- return css
224
- },
225
- alignContentProps: ({ alignContent }: AlignContent) => {
226
- let css = ''
227
- css += alignContent == 'spaceBetween' ? 'align_content_space_between' :
228
- alignContent == 'spaceEvenly' ? 'align_content_space_evenly' :
229
- alignContent == 'spaceAround' ? 'align_content_space_around' :
230
- alignContent ? `align_content_${alignContent}` : ''
231
- return css
232
- },
233
- alignSelfProps: ({ alignSelf }: AlignSelf) => {
234
- let css = ''
235
- css += alignSelf ? `align_self_${alignSelf}` : ''
236
- return css
237
- },
238
- flexProps: ({ flex }: Flex) => {
239
- let css = ''
240
- css += flex ? `flex_${flex}` : ''
241
- return css
242
- },
243
- flexGrowProps: ({ flexGrow }: FlexGrow) => {
244
- let css = ''
245
- css += flexGrow ? `flex_grow_${flexGrow}` : ''
246
- return css
247
- },
248
- flexShrinkProps: ({ flexShrink }: FlexShrink) => {
249
- let css = ''
250
- css += flexShrink ? `flex_shrink_${flexShrink}` : ''
251
- return css
252
- },
253
- orderProps: ({ order }: Order) => {
254
- let css = ''
255
- css += order ? `order_${order}` : ''
256
- return css
257
138
  }
258
139
  }
259
140
 
141
+ // All Exported as a single function
260
142
  export const globalProps = (props: GlobalProps, defaultProps: {[key: string]: string} | {} = {}): string => {
261
143
  const allProps = { ...props, ...defaultProps }
262
144
  return Object.keys(PROP_CATEGORIES).map((key) => {
263
145
  return PROP_CATEGORIES[key](allProps)
264
- }).filter((value) => value?.length > 0).join(" ")
146
+ }).join("")
265
147
  }
266
148
 
267
149
  export const deprecatedProps = (kit: string, props: string[] = []): void => {
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "10.21.0"
5
- VERSION = "10.21.1.pre.alpha1"
5
+ VERSION = "10.22.0"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 10.21.1.pre.alpha1
4
+ version: 10.22.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -417,6 +417,8 @@ files:
417
417
  - app/pb_kits/playbook/pb_button/docs/_button_default.html.erb
418
418
  - app/pb_kits/playbook/pb_button/docs/_button_default.jsx
419
419
  - app/pb_kits/playbook/pb_button/docs/_button_default.md
420
+ - app/pb_kits/playbook/pb_button/docs/_button_form.html.erb
421
+ - app/pb_kits/playbook/pb_button/docs/_button_form.jsx
420
422
  - app/pb_kits/playbook/pb_button/docs/_button_full_width.html.erb
421
423
  - app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx
422
424
  - app/pb_kits/playbook/pb_button/docs/_button_full_width.md
@@ -1090,7 +1092,7 @@ files:
1090
1092
  - app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
1091
1093
  - app/pb_kits/playbook/pb_image/docs/_custom_error_image.jsx
1092
1094
  - app/pb_kits/playbook/pb_image/docs/_default_image.html.erb
1093
- - app/pb_kits/playbook/pb_image/docs/_default_image.tsx
1095
+ - app/pb_kits/playbook/pb_image/docs/_default_image.jsx
1094
1096
  - app/pb_kits/playbook/pb_image/docs/_description.md
1095
1097
  - app/pb_kits/playbook/pb_image/docs/_rounded_image.html.erb
1096
1098
  - app/pb_kits/playbook/pb_image/docs/_rounded_image.jsx
@@ -2084,6 +2086,7 @@ files:
2084
2086
  - app/pb_kits/playbook/utilities/_positioning.scss
2085
2087
  - app/pb_kits/playbook/utilities/_shadow.scss
2086
2088
  - app/pb_kits/playbook/utilities/_spacing.scss
2089
+ - app/pb_kits/playbook/utilities/globalProps.js
2087
2090
  - app/pb_kits/playbook/utilities/globalProps.ts
2088
2091
  - app/pb_kits/playbook/utilities/props.ts
2089
2092
  - app/pb_kits/playbook/utilities/test-utils.js
@@ -2161,9 +2164,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
2161
2164
  version: '0'
2162
2165
  required_rubygems_version: !ruby/object:Gem::Requirement
2163
2166
  requirements:
2164
- - - ">"
2167
+ - - ">="
2165
2168
  - !ruby/object:Gem::Version
2166
- version: 1.3.1
2169
+ version: '0'
2167
2170
  requirements: []
2168
2171
  rubygems_version: 3.1.6
2169
2172
  signing_key: