playbook_ui 12.17.0 → 12.18.0.pre.alpha.PLAY785typeaheadts607

Sign up to get free protection for your applications and to get access to all the features.
Files changed (69) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +1 -1
  3. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb +1 -2
  4. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +2 -2
  5. data/app/pb_kits/playbook/pb_docs/kit_api.html.erb +48 -36
  6. data/app/pb_kits/playbook/pb_docs/kit_api.rb +97 -9
  7. data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +1 -1
  8. data/app/pb_kits/playbook/pb_docs/kit_example.rb +9 -5
  9. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +3 -0
  10. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx +5 -1
  11. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx +1 -1
  12. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx +5 -1
  13. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx +5 -1
  14. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.md +1 -1
  15. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx +5 -1
  16. data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx +5 -1
  17. data/app/pb_kits/playbook/pb_nav/_item.tsx +6 -6
  18. data/app/pb_kits/playbook/pb_nav/_nav.tsx +4 -4
  19. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx +49 -0
  20. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts +9 -0
  21. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx +62 -0
  22. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +139 -0
  23. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx +45 -0
  24. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx +59 -0
  25. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +1 -1
  26. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +28 -12
  27. data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +231 -0
  28. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_description.md +1 -0
  29. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx +36 -0
  30. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.md +4 -0
  31. data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +1 -0
  32. data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +1 -0
  33. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +185 -0
  34. data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.test.js +85 -0
  35. data/app/pb_kits/playbook/pb_title/_title.tsx +1 -1
  36. data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx +45 -0
  37. data/app/pb_kits/playbook/pb_title_detail/title_detail.test.js +71 -0
  38. data/app/pb_kits/playbook/pb_toggle/{_toggle.jsx → _toggle.tsx} +20 -22
  39. data/app/pb_kits/playbook/pb_toggle/toggle.test.js +67 -0
  40. data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +11 -6
  41. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +4 -4
  42. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb +1 -2
  43. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +0 -1
  44. data/app/pb_kits/playbook/pb_typeahead/{_typeahead.jsx → _typeahead.tsx} +22 -12
  45. data/app/pb_kits/playbook/pb_typeahead/components/{ClearIndicator.jsx → ClearIndicator.tsx} +2 -4
  46. data/app/pb_kits/playbook/pb_typeahead/components/{Control.jsx → Control.tsx} +5 -7
  47. data/app/pb_kits/playbook/pb_typeahead/components/{IndicatorsContainer.jsx → IndicatorsContainer.tsx} +2 -4
  48. data/app/pb_kits/playbook/pb_typeahead/components/{MenuList.jsx → MenuList.tsx} +0 -2
  49. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +66 -0
  50. data/app/pb_kits/playbook/pb_typeahead/components/Option.tsx +37 -0
  51. data/app/pb_kits/playbook/pb_typeahead/components/{Placeholder.jsx → Placeholder.tsx} +7 -9
  52. data/app/pb_kits/playbook/pb_typeahead/components/{ValueContainer.jsx → ValueContainer.tsx} +3 -5
  53. data/app/pb_kits/playbook/pb_typeahead/{index.js → index.ts} +37 -29
  54. data/app/pb_kits/playbook/pb_typeahead/types.d.ts +2 -0
  55. data/app/pb_kits/playbook/pb_user/_user.tsx +2 -2
  56. data/lib/playbook/markdown/helper.rb +50 -71
  57. data/lib/playbook/markdown.rb +0 -1
  58. data/lib/playbook/number_spacing.rb +10 -10
  59. data/lib/playbook/position.rb +10 -10
  60. data/lib/playbook/spacing.rb +10 -10
  61. data/lib/playbook/version.rb +2 -2
  62. data/lib/playbook/z_index.rb +10 -10
  63. metadata +36 -24
  64. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx +0 -172
  65. data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx +0 -44
  66. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb +0 -9
  67. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +0 -62
  68. data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx +0 -39
  69. data/lib/playbook/markdown/template_handler.rb +0 -47
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import Select from 'react-select'
5
3
  import AsyncSelect from 'react-select/async'
@@ -19,6 +17,7 @@ import Placeholder from './components/Placeholder'
19
17
  import ValueContainer from './components/ValueContainer'
20
18
 
21
19
  import { noop, buildDataProps } from '../utilities/props'
20
+ import { Noop } from '../types'
22
21
 
23
22
  /**
24
23
  * @typedef {object} Props
@@ -33,16 +32,28 @@ type TypeaheadProps = {
33
32
  components?: object,
34
33
  createable?: boolean,
35
34
  dark?: boolean,
36
- data?: object,
35
+ data?: { [key: string]: string },
37
36
  error?: string,
38
37
  id?: string,
39
38
  label?: string,
40
- loadOptions?: string,
39
+ loadOptions?: string | Noop,
41
40
  getOptionLabel?: string | (() => any),
42
41
  getOptionValue?: string | (() => any),
43
42
  name?: string,
44
43
  }
45
44
 
45
+ export type SelectValueType = {
46
+ label: string,
47
+ value: string,
48
+ imageUrl?: string,
49
+ }
50
+
51
+ type TagOnChangeValues = {
52
+ action?: string,
53
+ option?: SelectValueType,
54
+ removedValue?: string,
55
+ }
56
+
46
57
  /**
47
58
  * @constant {React.ReactComponent} Typeahead
48
59
  * @param {TypeaheadProps} props - props as described at https://react-select.com/props
@@ -67,7 +78,6 @@ const Typeahead = ({
67
78
  Control,
68
79
  ClearIndicator,
69
80
  IndicatorsContainer,
70
- IndicatorSeparator: null,
71
81
  MenuList,
72
82
  MultiValue,
73
83
  Option,
@@ -85,8 +95,8 @@ const Typeahead = ({
85
95
  isSearchable: true,
86
96
  name,
87
97
  multiKit: '',
88
- onCreateOption: null,
89
98
  plusIcon: false,
99
+ onMultiValueClick: (_option: SelectValueType) => { },
90
100
  ...props,
91
101
  }
92
102
 
@@ -96,7 +106,7 @@ const Typeahead = ({
96
106
  : (async ? AsyncSelect : Select)
97
107
  )
98
108
 
99
- const handleOnChange = (_data, { action, option, removedValue }) => {
109
+ const handleOnChange = (_data: SelectValueType, { action, option, removedValue }: TagOnChangeValues) => {
100
110
  if (action === 'select-option') {
101
111
  if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(option)
102
112
  const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option ? option : _data })
@@ -123,13 +133,13 @@ const Typeahead = ({
123
133
 
124
134
  return (
125
135
  <div {...dataProps}
126
- className={classnames(classes, inlineClass)}
136
+ className={classnames(classes, inlineClass)}
127
137
  >
128
138
  <Tag
129
- classNamePrefix="typeahead-kit-select"
130
- error={error}
131
- onChange={handleOnChange}
132
- {...selectProps}
139
+ classNamePrefix="typeahead-kit-select"
140
+ error={error}
141
+ onChange={handleOnChange}
142
+ {...selectProps}
133
143
  />
134
144
  </div>
135
145
  )
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React, { useEffect } from 'react'
4
2
  import { components } from 'react-select'
5
3
 
@@ -11,8 +9,8 @@ const ClearContainer = (props: any) => {
11
9
 
12
10
  return (
13
11
  <components.ClearIndicator
14
- className="clear_indicator"
15
- {...props}
12
+ className="clear_indicator"
13
+ {...props}
16
14
  />
17
15
  )
18
16
  }
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import { components } from 'react-select'
5
3
 
@@ -13,14 +11,14 @@ type Props = {
13
11
  const TypeaheadControl = (props: Props) => (
14
12
  <div className="pb_typeahead_wrapper">
15
13
  <TextInput
16
- dark={props.selectProps.dark}
17
- error={props.selectProps.error}
18
- label={props.selectProps.label}
14
+ dark={props.selectProps.dark}
15
+ error={props.selectProps.error}
16
+ label={props.selectProps.label}
19
17
  >
20
18
  <Flex>
21
19
  <components.Control
22
- className="text_input"
23
- {...props}
20
+ className="text_input"
21
+ {...props}
24
22
  />
25
23
  </Flex>
26
24
  </TextInput>
@@ -1,12 +1,10 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import { components } from 'react-select'
5
3
 
6
4
  const IndicatorsContainer = (props: any) => (
7
5
  <components.IndicatorsContainer
8
- className="text_input_indicators"
9
- {...props}
6
+ className="text_input_indicators"
7
+ {...props}
10
8
  />
11
9
  )
12
10
 
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import { components } from 'react-select'
5
3
 
@@ -0,0 +1,66 @@
1
+ import React from 'react'
2
+ import { components } from 'react-select'
3
+
4
+ import Badge from '../../pb_badge/_badge'
5
+ import FormPill from '../../pb_form_pill/_form_pill'
6
+ import { SelectValueType } from '../_typeahead'
7
+
8
+ type Props = {
9
+ data: SelectValueType,
10
+ multiValueTemplate: any,
11
+ removeProps: any,
12
+ selectProps: any,
13
+ }
14
+
15
+ const MultiValue = (props: Props) => {
16
+ const { removeProps } = props
17
+ const { imageUrl, label } = props.data
18
+ const { multiKit } = props.selectProps
19
+
20
+ const formPillProps = {
21
+ marginRight: 'xs',
22
+ name: label,
23
+ avatarUrl: '',
24
+ }
25
+
26
+ if (typeof imageUrl === 'string') formPillProps.avatarUrl = imageUrl
27
+
28
+ return (
29
+ <components.MultiValueContainer
30
+ className="text_input_multivalue_container"
31
+ {...props}
32
+ >
33
+ {multiKit === 'badge' &&
34
+ <Badge
35
+ closeProps={removeProps}
36
+ removeIcon
37
+ text={label}
38
+ variant="primary"
39
+ />
40
+ }
41
+
42
+ {multiKit !== 'badge' && imageUrl &&
43
+ <FormPill
44
+ avatarUrl={imageUrl}
45
+ closeProps={removeProps}
46
+ marginRight="xs"
47
+ name={label}
48
+ size={multiKit === 'smallPill' ? 'small' : ''}
49
+ text=''
50
+ />
51
+ }
52
+
53
+ {multiKit !== 'badge' && !imageUrl &&
54
+ <FormPill
55
+ closeProps={removeProps}
56
+ marginRight="xs"
57
+ name=''
58
+ size={multiKit === 'smallPill' ? 'small' : ''}
59
+ text={label}
60
+ />
61
+ }
62
+ </components.MultiValueContainer>
63
+ )
64
+ }
65
+
66
+ export default MultiValue
@@ -0,0 +1,37 @@
1
+ import React from 'react'
2
+ import { components } from 'react-select'
3
+
4
+ import User from '../../pb_user/_user'
5
+
6
+ const Option = (props: any) => {
7
+ const {
8
+ imageUrl,
9
+ } = props.data
10
+ const { valueComponent } = props.selectProps
11
+
12
+ return (
13
+ <components.Option {...props}>
14
+ <>
15
+ {!valueComponent && imageUrl &&
16
+ <User
17
+ align="left"
18
+ avatarUrl={imageUrl}
19
+ dark={props.selectProps.dark}
20
+ name={props.label}
21
+ orientation="horizontal"
22
+ />
23
+ }
24
+
25
+ {valueComponent &&
26
+ valueComponent(props.data)
27
+ }
28
+
29
+ {!valueComponent && !imageUrl &&
30
+ props.label
31
+ }
32
+ </>
33
+ </components.Option>
34
+ )
35
+ }
36
+
37
+ export default Option
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import { components } from 'react-select'
5
3
 
@@ -9,18 +7,18 @@ import Icon from '../../pb_icon/_icon'
9
7
  const Placeholder = (props: any) => (
10
8
  <>
11
9
  <Flex
12
- align="center"
13
- className="placeholder"
10
+ align="center"
11
+ className="placeholder"
14
12
  >
15
13
  <components.IndicatorsContainer
16
- {...props}
14
+ {...props}
17
15
  />
18
- <If condition={props.selectProps.plusIcon}>
16
+ {props.selectProps.plusIcon &&
19
17
  <Icon
20
- className="typeahead-plus-icon"
21
- icon="plus"
18
+ className="typeahead-plus-icon"
19
+ icon="plus"
22
20
  />
23
- </If>
21
+ }
24
22
  </Flex>
25
23
  </>
26
24
  )
@@ -1,12 +1,10 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import { components } from 'react-select'
5
3
 
6
- const ValueContainer = (props: Props) => (
4
+ const ValueContainer = (props: any) => (
7
5
  <components.ValueContainer
8
- className="text_input_value_container"
9
- {...props}
6
+ className="text_input_value_container"
7
+ {...props}
10
8
  />
11
9
  )
12
10
 
@@ -2,18 +2,26 @@ import PbEnhancedElement from '../pb_enhanced_element'
2
2
  import { debounce } from 'lodash'
3
3
 
4
4
  export default class PbTypeahead extends PbEnhancedElement {
5
+ _searchInput: HTMLInputElement
6
+ _resultsElement: HTMLElement
7
+ _debouncedSearch: Function
8
+ _resultsLoadingIndicator: HTMLElement
9
+ _resultOptionTemplate: HTMLElement
10
+ _resultsOptionCache: Map<string, Array<DocumentFragment>>
11
+ _searchContext: string
12
+
5
13
  static get selector() {
6
14
  return '[data-pb-typeahead-kit]'
7
15
  }
8
16
 
9
17
  connect() {
10
- this.element.addEventListener('keydown', (event) => this.handleKeydown(event))
18
+ this.element.addEventListener('keydown', (event: KeyboardEvent) => this.handleKeydown(event))
11
19
  this.searchInput.addEventListener('focus', () => this.debouncedSearch())
12
20
  this.searchInput.addEventListener('input', () => this.debouncedSearch())
13
- this.resultsElement.addEventListener('click', (event) => this.optionSelected(event))
21
+ this.resultsElement.addEventListener('click', (event: MouseEvent) => this.optionSelected(event))
14
22
  }
15
23
 
16
- handleKeydown(event) {
24
+ handleKeydown(event: KeyboardEvent) {
17
25
  if (event.key === 'ArrowUp') {
18
26
  event.preventDefault()
19
27
  this.focusPreviousOption()
@@ -24,7 +32,7 @@ export default class PbTypeahead extends PbEnhancedElement {
24
32
  }
25
33
 
26
34
  search() {
27
- if (this.searchTerm.length < this.searchTermMinimumLength) return this.clearResults()
35
+ if (this.searchTerm.length < parseInt(this.searchTermMinimumLength)) return this.clearResults()
28
36
 
29
37
  this.toggleResultsLoadingIndicator(true)
30
38
  this.showResults()
@@ -34,17 +42,17 @@ export default class PbTypeahead extends PbEnhancedElement {
34
42
  const search = {
35
43
  searchingFor: searchTerm,
36
44
  searchingContext: searchContext,
37
- setResults: (results) => {
45
+ setResults: (results: Array<DocumentFragment>) => {
38
46
  this.resultsCacheUpdate(searchTerm, searchContext, results)
39
47
  },
40
48
  }
41
49
  this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-search', { bubbles: true, detail: search }))
42
50
  }
43
51
 
44
- resultsCacheUpdate(searchTerm, searchContext, results) {
52
+ resultsCacheUpdate(searchTerm: string, searchContext: string, results: Array<DocumentFragment>) {
45
53
  const searchTermAndContext = this.cacheKeyFor(searchTerm, searchContext)
46
54
  if (this.resultsOptionCache.has(searchTermAndContext)) this.resultsOptionCache.delete(searchTermAndContext)
47
- if (this.resultsOptionCache.size > 32) this.resultsOptionCache.delete(this.resultsOptionCache.keys[0])
55
+ if (this.resultsOptionCache.size > 32) this.resultsOptionCache.delete(this.resultsOptionCache.keys().next().value)
48
56
 
49
57
  this.resultsOptionCache.set(searchTermAndContext, results)
50
58
  this.showResults()
@@ -57,7 +65,7 @@ export default class PbTypeahead extends PbEnhancedElement {
57
65
  get debouncedSearch() {
58
66
  return this._debouncedSearch = (
59
67
  this._debouncedSearch ||
60
- debounce(this.search, this.searchDebounceTimeout).bind(this)
68
+ debounce(this.search, parseInt(this.searchDebounceTimeout)).bind(this)
61
69
  )
62
70
  }
63
71
 
@@ -70,12 +78,12 @@ export default class PbTypeahead extends PbEnhancedElement {
70
78
  this.resultsElement.appendChild(this.newResultOption(result.cloneNode(true)))
71
79
  }
72
80
  for (const result of this.resultsElement.querySelectorAll('[data-result-option-item]')) {
73
- result.addEventListener('mousedown', (event) => this.optionSelected(event))
81
+ result.addEventListener('mousedown', (event: MouseEvent) => this.optionSelected(event))
74
82
  }
75
83
  }
76
84
 
77
- optionSelected(event) {
78
- const resultOption = event.target.closest('[data-result-option-item]')
85
+ optionSelected(event: MouseEvent) {
86
+ const resultOption = (event.target as Element).closest('[data-result-option-item]')
79
87
  if (!resultOption) return
80
88
 
81
89
  this.resultsCacheClear()
@@ -89,8 +97,8 @@ export default class PbTypeahead extends PbEnhancedElement {
89
97
  this.resultsElement.innerHTML = ''
90
98
  }
91
99
 
92
- newResultOption(content) {
93
- const resultOption = this.resultOptionTemplate.content.cloneNode(true)
100
+ newResultOption(content: DocumentFragment) {
101
+ const resultOption = (this.resultOptionTemplate as HTMLTemplateElement).content.cloneNode(true) as Element
94
102
  resultOption.querySelector('slot[name="content"]').replaceWith(content)
95
103
  return resultOption
96
104
  }
@@ -100,9 +108,9 @@ export default class PbTypeahead extends PbEnhancedElement {
100
108
  const previousIndex = currentIndex - 1
101
109
  const previousOptionItem = (
102
110
  this.resultOptionItems[previousIndex] ||
103
- this.resultOptionItems[this.resultOptionItems.length - 1]
104
- )
105
- previousOptionItem.focus()
111
+ this.resultOptionItems[this.resultOptionItems.length - 1]
112
+ );
113
+ (previousOptionItem as HTMLElement).focus()
106
114
  }
107
115
 
108
116
  focusNextOption() {
@@ -110,9 +118,9 @@ export default class PbTypeahead extends PbEnhancedElement {
110
118
  const nextIndex = currentIndex + 1
111
119
  const nextOptionItem = (
112
120
  this.resultOptionItems[nextIndex] ||
113
- this.resultOptionItems[0]
114
- )
115
- nextOptionItem.focus()
121
+ this.resultOptionItems[0]
122
+ );
123
+ (nextOptionItem as HTMLElement).focus()
116
124
  }
117
125
 
118
126
  get resultOptionItems() {
@@ -134,11 +142,11 @@ export default class PbTypeahead extends PbEnhancedElement {
134
142
  get searchContext() {
135
143
  if (this._searchContext) return this._searchContext
136
144
 
137
- const selector = this.element.dataset.searchContextValueSelector
138
- if (selector) return (
145
+ const selector = (this.element as HTMLElement).dataset.searchContextValueSelector
146
+ if (selector) return ((
139
147
  this.element.parentNode.querySelector(selector) ||
140
- this.element.closest(selector)
141
- ).value
148
+ this.element.closest(selector)
149
+ ) as HTMLInputElement).value
142
150
 
143
151
  return null
144
152
  }
@@ -151,7 +159,7 @@ export default class PbTypeahead extends PbEnhancedElement {
151
159
  return this.cacheKeyFor(this.searchTerm, this.searchContext)
152
160
  }
153
161
 
154
- cacheKeyFor(searchTerm, searchContext) {
162
+ cacheKeyFor(searchTerm: string, searchContext: string) {
155
163
  return [searchTerm, JSON.stringify(searchContext)].join()
156
164
  }
157
165
 
@@ -160,11 +168,11 @@ export default class PbTypeahead extends PbEnhancedElement {
160
168
  }
161
169
 
162
170
  get searchTermMinimumLength() {
163
- return this.element.dataset.pbTypeaheadKitSearchTermMinimumLength
171
+ return (this.element as HTMLElement).dataset.pbTypeaheadKitSearchTermMinimumLength
164
172
  }
165
173
 
166
174
  get searchDebounceTimeout() {
167
- return this.element.dataset.pbTypeaheadKitSearchDebounceTimeout
175
+ return (this.element as HTMLElement).dataset.pbTypeaheadKitSearchDebounceTimeout
168
176
  }
169
177
 
170
178
  get resultsElement() {
@@ -192,9 +200,9 @@ export default class PbTypeahead extends PbEnhancedElement {
192
200
  )
193
201
  }
194
202
 
195
- toggleResultsLoadingIndicator(visible) {
196
- var visibilityProperty = 0
197
- if (visible) visibilityProperty = 1
203
+ toggleResultsLoadingIndicator(visible: boolean) {
204
+ var visibilityProperty = '0'
205
+ if (visible) visibilityProperty = '1'
198
206
  this.resultsLoadingIndicator.style.opacity = visibilityProperty
199
207
  }
200
208
  }
@@ -0,0 +1,2 @@
1
+ declare module 'react-select'
2
+ declare module 'react-select/*'
@@ -18,7 +18,7 @@ type UserProps = {
18
18
  data?: {[key: string]: string},
19
19
  id?: string,
20
20
  name?: string,
21
- orientation?: "horiztonal" | "vertical",
21
+ orientation?: "horizontal" | "vertical",
22
22
  size?: "sm" | "md" | "lg",
23
23
  subtitle?: string | Array<Node> | Node,
24
24
  territory?: string,
@@ -49,7 +49,7 @@ const User = (props: UserProps) => {
49
49
  const classes = classnames(
50
50
  buildCss('pb_user_kit', align, orientation, size),
51
51
  globalProps(props),
52
- className,
52
+ className
53
53
  )
54
54
 
55
55
  const avatarPresent = avatar || avatarUrl
@@ -8,7 +8,17 @@ require "action_view"
8
8
  module Playbook
9
9
  module Markdown
10
10
  module Helper
11
- def markdown(text)
11
+ def self.call(template, _source)
12
+ markdown(template.source)
13
+ end
14
+
15
+ def render_markdown(text)
16
+ # rubocop:disable Security/Eval
17
+ eval(Playbook::Markdown::Helper.markdown(text))
18
+ # rubocop:enable Security/Eval
19
+ end
20
+
21
+ def self.markdown(text)
12
22
  options = {
13
23
  filter_html: false,
14
24
  hard_wrap: true,
@@ -20,6 +30,8 @@ module Playbook
20
30
  }
21
31
 
22
32
  extensions = {
33
+ lax_spacing: true,
34
+ no_intra_emphasis: true,
23
35
  autolink: true,
24
36
  superscript: true,
25
37
  fenced_code_blocks: true,
@@ -33,9 +45,11 @@ module Playbook
33
45
  }
34
46
 
35
47
  renderer = HTMLBlockCode.new(options)
48
+ # toc_renderer = Redcarpet::Render::HTML_TOC.new(with_toc_data: true)
49
+ # @TOC = Redcarpet::Markdown.new(toc_renderer)
50
+ # puts "TOC: #{@TOC.inspect}"
36
51
  markdown = Redcarpet::Markdown.new(renderer, extensions)
37
-
38
- markdown.render(text).html_safe
52
+ "#{markdown.render(text).inspect}.html_safe;"
39
53
  end
40
54
 
41
55
  def rouge(text, language)
@@ -44,6 +58,10 @@ module Playbook
44
58
  formatter.format(lexer.lex(text))
45
59
  end
46
60
 
61
+ class HTML < Redcarpet::Render::HTML
62
+ include Rouge::Plugins::Redcarpet
63
+ end
64
+
47
65
  def rouge_markdown(text)
48
66
  render_options = {
49
67
  filter_html: true,
@@ -65,88 +83,49 @@ module Playbook
65
83
  end
66
84
  end
67
85
 
86
+ class HTMLWithPants < Redcarpet::Render::HTML
87
+ include Redcarpet::Render::SmartyPants
88
+ end
89
+
68
90
  class HTML < Redcarpet::Render::HTML
69
91
  include Rouge::Plugins::Redcarpet
70
92
  end
71
93
 
72
94
  class HTMLBlockCode < Redcarpet::Render::HTML
73
95
  include ActionView::Helpers::AssetTagHelper
74
- def header(title, level)
75
- if level == 7
76
- @headers ||= []
77
- permalink = title.gsub(/\W+/, "-")
78
- if @headers.include?(permalink)
79
- permalink += "_1"
80
- loop do
81
- break unless @headers.include?(permalink)
82
-
83
- permalink.gsub!(/_(\d+)$/, "_#{Regexp.last_match(1).to_i + 1}")
84
- end
85
- end
86
- @headers << permalink
87
- %(\n<a name="#{permalink}" class="markdown-header-anchor anchor" href="##{permalink}"><span class="fa fa-link anchor-icon"></span></a><h#{level} id=\"#{permalink}\">#{title}</h#{level}>\n)
88
- else
89
- %(\n<h#{level}>#{title}</h#{level}>\n)
90
- end
91
- end
92
96
 
93
- def image(link, title, alt_text)
94
- image_tag(link, title: title, alt: alt_text, class: "imageloader lazyload")
95
- end
96
-
97
- def preprocess(full_document)
98
- full_document.gsub(/\[component (.*)\]/) do
99
- @string = Regexp.last_match(1)
100
- @default_height = "160"
101
- @attr = ["", @default_height]
97
+ # def block_code(code, language)
98
+ # "\n.nf\n#{normal_text(rouge(code, language))}\n.fi\n"
99
+ # end
102
100
 
103
- # Set src from attributes
104
- @string.gsub(/src="(.*?)"/) do
105
- @attr[0] = Regexp.last_match(1)
106
- end
101
+ def table(header, body)
102
+ "<table class='pb_table table-sm table-responsive-collapse table-card table-collapse-sm'>" \
103
+ "<thead>#{header}</thead>" \
104
+ "<tbody>#{body}</tbody>" \
105
+ "</table>"
106
+ end
107
107
 
108
- # Set height from attributes
109
- @string.gsub(/height="(.*?)"/) do
110
- @attr[1] = (Regexp.last_match(1) || @default_height)
108
+ def header(title, level)
109
+ @headers ||= []
110
+ permalink = title.gsub(/\W+/, "-")
111
+ if @headers.include?(permalink)
112
+ permalink += "_1"
113
+ loop do
114
+ break unless @headers.include?(permalink)
115
+
116
+ permalink.gsub!(/_(\d+)$/, "_#{Regexp.last_match(1).to_i + 1}")
111
117
  end
112
-
113
- %(\n<div class="uix-component-frame"><iframe scrolling="no" id="component-preview" src="#{@attr[0]}" width="100%" height="#{@attr[1]}"></iframe><a href="#{@attr[0]}" target="_blank" class="uix-component-link">View component</a></div>\n)
114
118
  end
119
+ @headers << permalink
120
+ permalink_markup = %(<a name="#{permalink}" class="markdown-header-anchor" )
121
+ permalink_markup += %(href="##{permalink}"><span class="far fa-link markdown-header-anchor-icon"></span></a>)
122
+ %(\n<h#{level} id="#{permalink}">#{title} #{permalink_markup}</h#{level}>\n)
115
123
  end
116
124
 
117
- def list(contents, _list_type)
118
- @contents = contents
119
- @list_items = contents.split("\n")
120
-
121
- if @list_items[0].include?("[do]") || @list_items[0].include?("[dont]")
122
- @element_items = []
123
- @list_items.each do |item, _index|
124
- item.gsub(%r{<li>(.*)</li>}) do
125
- @element_items.push(Regexp.last_match(1))
126
- end
127
- end
128
-
129
- # Doing both because we could have either/both
130
- # clean up
131
- @dont_items, @trash_items_dont = @element_items.partition { |x, _i| x.include? "[dont]" }
132
- @do_items, @trash_items_do = @element_items.partition { |x, _i| x.include? "[do]" }
133
-
134
- @do_list = []
135
- @do_items.each do |item, _index|
136
- @do_list.push("<li>#{item.sub('[do] ', '')}</li>")
137
- end
138
- @do_list = "<ul class='uix-ruleset do-list'>#{@do_list.join('')}</ul>"
139
-
140
- @dont_list = []
141
- @dont_items.each do |item, _index|
142
- @dont_list.push("<li>#{item.sub('[dont] ', '')}</li>")
143
- end
144
- @dont_list = "<ul class='uix-ruleset dont-list'>#{@dont_list.join('')}</ul>"
125
+ def image(link, title, alt_text)
126
+ return nil if link.nil?
145
127
 
146
- "<div class='row uix-ruleset-block'><div class='col-sm-6'>#{@do_list}</div><div class='col-sm-6'>#{@dont_list}</div></div>"
147
- else
148
- @contents
149
- end
128
+ %(<a href="#{link}" target="_blank">#{image_tag(link, title: title, alt: alt_text, class: 'imageloader lazyload')}</a>)
150
129
  end
151
130
  end
152
131
  end
@@ -1,4 +1,3 @@
1
1
  # frozen_string_literal: true
2
2
 
3
- require "playbook/markdown/template_handler"
4
3
  require "playbook/markdown/helper"