playbook_ui 14.5.0.pre.alpha.play1586datearea4115 → 14.5.0.pre.alpha.psych4support3941

Sign up to get free protection for your applications and to get access to all the features.
Files changed (61) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/index.js +0 -60
  3. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +9 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb +9 -1
  5. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +4 -20
  6. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +0 -1
  7. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +0 -1
  8. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  9. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +2 -2
  10. data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx +2 -4
  11. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
  12. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +1 -9
  13. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +0 -2
  14. data/app/pb_kits/playbook/pb_form_pill/docs/index.js +0 -1
  15. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +227 -211
  16. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -1
  17. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -4
  18. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +0 -2
  19. data/app/pb_kits/playbook/pb_timeline/_item.tsx +23 -59
  20. data/app/pb_kits/playbook/pb_timeline/docs/example.yml +1 -2
  21. data/app/pb_kits/playbook/pb_timeline/docs/index.js +0 -1
  22. data/app/pb_kits/playbook/pb_timeline/item.html.erb +21 -17
  23. data/app/pb_kits/playbook/pb_timeline/item.rb +0 -4
  24. data/app/pb_kits/playbook/pb_timeline/timeline.test.js +0 -84
  25. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +1 -4
  26. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +1 -3
  27. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +1 -3
  28. data/dist/chunks/{_typeahead-C9g4qCcE.js → _typeahead-BYw0HEgO.js} +1 -1
  29. data/dist/chunks/_weekday_stacked-DumiyWjh.js +45 -0
  30. data/dist/chunks/vendor.js +1 -1
  31. data/dist/playbook-doc.js +1 -1
  32. data/dist/playbook-rails-react-bindings.js +1 -1
  33. data/dist/playbook-rails.js +1 -1
  34. data/lib/playbook/version.rb +1 -1
  35. metadata +4 -29
  36. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +0 -45
  37. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +0 -1
  38. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +0 -19
  39. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +0 -27
  40. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +0 -1
  41. data/app/pb_kits/playbook/pb_multi_level_select/context/index.tsx +0 -5
  42. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +0 -93
  43. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md +0 -1
  44. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +0 -105
  45. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md +0 -1
  46. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +0 -106
  47. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md +0 -1
  48. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx +0 -149
  49. data/app/pb_kits/playbook/pb_timeline/_date_area.tsx +0 -38
  50. data/app/pb_kits/playbook/pb_timeline/_detail_area.tsx +0 -29
  51. data/app/pb_kits/playbook/pb_timeline/_node_area.tsx +0 -42
  52. data/app/pb_kits/playbook/pb_timeline/date_area.html.erb +0 -12
  53. data/app/pb_kits/playbook/pb_timeline/date_area.rb +0 -13
  54. data/app/pb_kits/playbook/pb_timeline/detail_area.html.erb +0 -3
  55. data/app/pb_kits/playbook/pb_timeline/detail_area.rb +0 -11
  56. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb +0 -43
  57. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx +0 -72
  58. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md +0 -4
  59. data/app/pb_kits/playbook/pb_timeline/node_area.html.erb +0 -14
  60. data/app/pb_kits/playbook/pb_timeline/node_area.rb +0 -16
  61. data/dist/chunks/_weekday_stacked-C2sJArua.js +0 -45
@@ -7,7 +7,6 @@ examples:
7
7
  - multi_level_select_selected_ids: Selected Ids
8
8
  - multi_level_select_with_form: With Form
9
9
  - multi_level_select_color: With Pills (Custom Color)
10
- - multi_level_select_reset: Reset Selection
11
10
 
12
11
  react:
13
12
  - multi_level_select_default: Default
@@ -16,6 +15,3 @@ examples:
16
15
  - multi_level_select_return_all_selected: Return All Selected
17
16
  - multi_level_select_selected_ids_react: Selected Ids
18
17
  - multi_level_select_color: With Pills (Custom Color)
19
- - multi_level_select_with_children: Checkboxes With Children
20
- - multi_level_select_with_children_with_radios: Single Select With Children
21
-
@@ -4,5 +4,3 @@ export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_se
4
4
  export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
5
5
  export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"
6
6
  export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'
7
- export { default as MultiLevelSelectWithChildren } from './_multi_level_select_with_children.jsx'
8
- export { default as MultiLevelSelectWithChildrenWithRadios } from './_multi_level_select_with_children_with_radios.jsx'
@@ -1,15 +1,12 @@
1
1
  import React from 'react'
2
2
  import classnames from 'classnames'
3
+
3
4
  import { buildCss, buildHtmlProps } from '../utilities/props'
4
- import { globalProps, GlobalProps } from "../utilities/globalProps"
5
+ import { globalProps, GlobalProps } from "../utilities/globalProps";
5
6
 
6
7
  import DateStacked from '../pb_date_stacked/_date_stacked'
7
8
  import IconCircle from '../pb_icon_circle/_icon_circle'
8
9
 
9
- import TimelineDateArea from './_date_area'
10
- import TimelineNodeArea from './_node_area'
11
- import TimelineDetailArea from './_detail_area'
12
-
13
10
  type ItemProps = {
14
11
  className?: string,
15
12
  children?: React.ReactNode[] | React.ReactNode,
@@ -20,13 +17,6 @@ type ItemProps = {
20
17
  lineStyle?: 'solid' | 'dotted',
21
18
  } & GlobalProps
22
19
 
23
- function isElementOfType<P>(
24
- element: React.ReactNode,
25
- component: React.ComponentType<P>
26
- ): element is React.ReactElement<P> {
27
- return React.isValidElement<P>(element) && element.type === component
28
- }
29
-
30
20
  const TimelineItem = ({
31
21
  className,
32
22
  children,
@@ -41,57 +31,31 @@ const TimelineItem = ({
41
31
 
42
32
  const htmlProps = buildHtmlProps(htmlOptions)
43
33
 
44
- const childrenArray = React.Children.toArray(children)
45
-
46
- const dateAreaChild = childrenArray.find(
47
- (child): child is React.ReactElement => isElementOfType(child, TimelineDateArea)
48
- )
49
-
50
- const nodeAreaChild = childrenArray.find(
51
- (child): child is React.ReactElement => isElementOfType(child, TimelineNodeArea)
52
- )
53
-
54
- const detailAreaChild = childrenArray.find(
55
- (child): child is React.ReactElement => isElementOfType(child, TimelineDetailArea)
56
- )
57
-
58
- const otherChildren = childrenArray.filter(
59
- (child) =>
60
- !isElementOfType(child, TimelineDateArea) &&
61
- !isElementOfType(child, TimelineNodeArea) &&
62
- !isElementOfType(child, TimelineDetailArea)
63
- )
64
-
65
34
  return (
66
- <div
35
+ <div
67
36
  {...htmlProps}
68
37
  className={classnames(timelineItemCss, globalProps(props), className)}
69
38
  >
70
- {dateAreaChild || (
71
- <div className="pb_timeline_item_left_block">
72
- {date && (
73
- <DateStacked
74
- align="center"
75
- date={date}
76
- size="sm"
77
- />
78
- )}
79
- </div>
80
- )}
81
- {nodeAreaChild || (
82
- <div className="pb_timeline_item_step">
83
- <IconCircle icon={icon}
84
- size="xs"
85
- variant={iconColor}
86
- />
87
- <div className="pb_timeline_item_connector" />
88
- </div>
89
- )}
90
- {detailAreaChild || (
91
- <div className="pb_timeline_item_right_block">
92
- { otherChildren }
93
- </div>
94
- )}
39
+ <div className="pb_timeline_item_left_block">
40
+ {date &&
41
+ <DateStacked
42
+ align="center"
43
+ date={date}
44
+ size="sm"
45
+ />
46
+ }
47
+ </div>
48
+ <div className="pb_timeline_item_step">
49
+ <IconCircle
50
+ icon={icon}
51
+ size="xs"
52
+ variant={iconColor}
53
+ />
54
+ <div className="pb_timeline_item_connector" />
55
+ </div>
56
+ <div className="pb_timeline_item_right_block">
57
+ {children}
58
+ </div>
95
59
  </div>
96
60
  )
97
61
  }
@@ -4,11 +4,10 @@ examples:
4
4
  - timeline_default: Default
5
5
  - timeline_vertical: Vertical
6
6
  - timeline_with_date: With Date
7
- - timeline_with_children: With Children
8
7
 
9
8
 
10
9
  react:
11
10
  - timeline_default: Default
12
11
  - timeline_vertical: Vertical
13
12
  - timeline_with_date: With Date
14
- - timeline_with_children: With Children
13
+
@@ -1,4 +1,3 @@
1
1
  export { default as TimelineDefault } from './_timeline_default.jsx'
2
2
  export { default as TimelineVertical } from './_timeline_vertical.jsx'
3
3
  export { default as TimelineWithDate } from './_timeline_with_date.jsx'
4
- export { default as TimelineWithChildren } from './_timeline_with_children.jsx'
@@ -1,21 +1,25 @@
1
1
  <%= pb_content_tag do %>
2
- <% if date_area %>
3
- <%= date_area %>
4
- <% else %>
5
- <%= pb_rails("timeline/date_area", props: { date: date }) %>
6
- <% end %>
7
2
 
8
- <% if node_area %>
9
- <%= node_area %>
10
- <% else %>
11
- <%= pb_rails("timeline/node_area", props: { icon: icon, icon_color: icon_color }) %>
12
- <% end %>
13
-
14
- <% if detail_area %>
15
- <%= detail_area %>
16
- <% else %>
17
- <%= pb_rails("timeline/detail_area") do %>
18
- <%= content %>
3
+ <div class="pb_timeline_item_left_block">
4
+ <% if object.date.present? %>
5
+ <%= pb_rails("date_stacked", props: {
6
+ date: object.date,
7
+ size: "sm",
8
+ align: "center"
9
+ }) %>
19
10
  <% end %>
20
- <% end %>
11
+ </div>
12
+
13
+ <div class="pb_timeline_item_step">
14
+ <%= pb_rails("icon_circle", props: {
15
+ icon: object.icon,
16
+ variant: object.icon_color,
17
+ size: "xs"
18
+ }) %>
19
+ <div class="pb_timeline_item_connector"></div>
20
+ </div>
21
+
22
+ <div class="pb_timeline_item_right_block">
23
+ <%= content.presence %>
24
+ </div>
21
25
  <% end %>
@@ -13,10 +13,6 @@ module Playbook
13
13
  values: %w[solid dotted],
14
14
  default: "solid"
15
15
 
16
- renders_one :date_area
17
- renders_one :node_area
18
- renders_one :detail_area
19
-
20
16
  def classname
21
17
  generate_classname("pb_timeline_item_kit", line_style)
22
18
  end
@@ -2,10 +2,6 @@ import React from 'react'
2
2
  import { render, screen } from '../utilities/test-utils'
3
3
 
4
4
  import Timeline from './_timeline'
5
- import TimelineItem from './_item'
6
- import TimelineDateArea from './_date_area'
7
- import TimelineNodeArea from './_node_area'
8
- import TimelineDetailArea from './_detail_area'
9
5
  import TitleDetail from '../pb_title_detail/_title_detail'
10
6
 
11
7
  const testId = 'timeline'
@@ -47,91 +43,18 @@ const TimelineDefault = (props) => (
47
43
  </>
48
44
  )
49
45
 
50
- const TimelineWithChildren = (props) => (
51
- <>
52
- <Timeline
53
- className={className}
54
- data={{ testid: testId }}
55
- orientation="horizontal"
56
- showDate
57
- {...props}
58
- >
59
- <TimelineItem lineStyle="solid"
60
- {...props}
61
- >
62
- <TimelineDateArea date={new Date()} />
63
- <TimelineNodeArea icon="user"
64
- iconColor="royal"
65
- />
66
- <TimelineDetailArea>
67
- <TitleDetail
68
- detail="37-27 74th Street"
69
- title="Jackson Heights"
70
- {...props}
71
- />
72
- </TimelineDetailArea>
73
- </TimelineItem>
74
-
75
- <TimelineItem lineStyle="dotted"
76
- {...props}
77
- >
78
- <TimelineNodeArea icon="check"
79
- iconColor="teal"
80
- />
81
- <TimelineDetailArea>
82
- <TitleDetail
83
- detail="81 Gate St Brooklyn"
84
- title="Greenpoint"
85
- {...props}
86
- />
87
- </TimelineDetailArea>
88
- </TimelineItem>
89
-
90
- <TimelineItem lineStyle="solid"
91
- {...props}
92
- >
93
- <TimelineDateArea
94
- date={new Date(new Date().setDate(new Date().getDate() + 1))}
95
- />
96
- <TimelineNodeArea icon="map-marker-alt"
97
- iconColor="purple"
98
- />
99
- <TimelineDetailArea>
100
- <TitleDetail
101
- detail="72 E St Astoria"
102
- title="Society Hill"
103
- {...props}
104
- />
105
- </TimelineDetailArea>
106
- </TimelineItem>
107
- </Timeline>
108
- </>
109
- )
110
-
111
46
  test('should pass data prop', () => {
112
47
  render(<TimelineDefault />)
113
48
  const kit = screen.getByTestId(testId)
114
49
  expect(kit).toBeInTheDocument()
115
50
  })
116
51
 
117
- test('should pass data prop using children', () => {
118
- render(<TimelineWithChildren />)
119
- const kit = screen.getByTestId(testId)
120
- expect(kit).toBeInTheDocument()
121
- })
122
-
123
52
  test('should pass className prop', () => {
124
53
  render(<TimelineDefault />)
125
54
  const kit = screen.getByTestId(testId)
126
55
  expect(kit).toHaveClass(className)
127
56
  })
128
57
 
129
- test('should pass className prop with children', () => {
130
- render(<TimelineWithChildren />)
131
- const kit = screen.getByTestId(testId)
132
- expect(kit).toHaveClass(className)
133
- })
134
-
135
58
  test('should pass aria prop', () => {
136
59
  render(<TimelineDefault />)
137
60
  const kit = screen.getByTestId(testId)
@@ -163,10 +86,3 @@ test('should pass showDate prop', () => {
163
86
  const kit = screen.getByTestId(testId)
164
87
  expect(kit).toHaveClass('pb_timeline_kit__horizontal__with_date')
165
88
  })
166
-
167
- test('should pass showDate prop with Children', () => {
168
- const props = { showDate: true }
169
- render(<TimelineWithChildren {...props} />)
170
- const kit = screen.getByTestId(testId)
171
- expect(kit).toHaveClass('pb_timeline_kit__horizontal__with_date')
172
- })
@@ -136,15 +136,12 @@ const Typeahead = ({
136
136
  }
137
137
  }
138
138
 
139
- const filteredProps: TypeaheadProps = {...props}
140
- delete filteredProps.truncate
141
-
142
139
  const dataProps = buildDataProps(data)
143
140
  const htmlProps = buildHtmlProps(htmlOptions)
144
141
  const classes = classnames(
145
142
  'pb_typeahead_kit react-select',
146
143
  `mb_${marginBottom}`,
147
- globalProps(filteredProps),
144
+ globalProps(props),
148
145
  className
149
146
  )
150
147
 
@@ -16,7 +16,7 @@ type Props = {
16
16
  const MultiValue = (props: Props) => {
17
17
  const { removeProps } = props
18
18
  const { imageUrl, label } = props.data
19
- const { dark, multiKit, pillColor, truncate } = props.selectProps
19
+ const { dark, multiKit, pillColor } = props.selectProps
20
20
 
21
21
  const formPillProps = {
22
22
  marginRight: 'xs',
@@ -51,7 +51,6 @@ const MultiValue = (props: Props) => {
51
51
  name={label}
52
52
  size={multiKit === 'smallPill' ? 'small' : ''}
53
53
  text=''
54
- truncate={truncate}
55
54
  {...props}
56
55
  />
57
56
  }
@@ -65,7 +64,6 @@ const MultiValue = (props: Props) => {
65
64
  name=''
66
65
  size={multiKit === 'smallPill' ? 'small' : ''}
67
66
  text={label}
68
- truncate={truncate}
69
67
  {...props}
70
68
  />
71
69
  }
@@ -65,10 +65,10 @@ module Playbook
65
65
  def typeahead_react_options
66
66
  base_options = {
67
67
  className: classname,
68
+ pillColor: pill_color,
68
69
  dark: dark,
69
70
  defaultValue: default_options,
70
71
  error: error,
71
- htmlOptions: html_options,
72
72
  id: id,
73
73
  inline: inline,
74
74
  isMulti: is_multi,
@@ -77,10 +77,8 @@ module Playbook
77
77
  multiKit: multi_kit,
78
78
  name: name,
79
79
  options: options,
80
- pillColor: pill_color,
81
80
  placeholder: placeholder,
82
81
  plusIcon: plus_icon,
83
- truncate: truncate,
84
82
  }
85
83
 
86
84
  base_options[:getOptionLabel] = get_option_label if get_option_label.present?