playbook_ui 14.17.0.pre.alpha.PLAY20547327 → 14.17.0.pre.alpha.alphaforaudiences7167

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.
Files changed (122) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +3 -23
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +3 -67
  4. data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts +2 -1
  5. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +19 -29
  6. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +128 -67
  7. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +0 -9
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +2 -1
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +2 -2
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +2 -6
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +2 -6
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -7
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -5
  16. data/app/pb_kits/playbook/pb_background/_background.scss +0 -26
  17. data/app/pb_kits/playbook/pb_background/_background.tsx +3 -5
  18. data/app/pb_kits/playbook/pb_background/background.test.js +0 -5
  19. data/app/pb_kits/playbook/pb_background/docs/example.yml +0 -1
  20. data/app/pb_kits/playbook/pb_background/docs/index.js +0 -1
  21. data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx +45 -19
  22. data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +0 -1
  23. data/app/pb_kits/playbook/pb_copy_button/docs/index.js +1 -2
  24. data/app/pb_kits/playbook/pb_draggable/_draggable.scss +20 -43
  25. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx +105 -102
  26. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md +3 -3
  27. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx +48 -50
  28. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md +1 -1
  29. data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table.jsx → _draggable_with_table_react.jsx} +1 -1
  30. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +1 -3
  31. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +6 -9
  32. data/app/pb_kits/playbook/pb_draggable/docs/index.js +1 -4
  33. data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +0 -68
  34. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +3 -4
  35. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +1 -1
  36. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  37. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +3 -23
  38. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +5 -15
  39. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +6 -39
  40. data/app/pb_kits/playbook/pb_layout/_layout.scss +1 -70
  41. data/app/pb_kits/playbook/pb_layout/_layout.tsx +2 -29
  42. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +118 -322
  43. data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +1 -1
  44. data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx +43 -74
  45. data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx +4 -21
  46. data/app/pb_kits/playbook/pb_overlay/_overlay.scss +22 -49
  47. data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +4 -15
  48. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +7 -1
  49. data/app/pb_kits/playbook/pb_overlay/docs/example.yml +0 -3
  50. data/app/pb_kits/playbook/pb_overlay/docs/index.js +0 -3
  51. data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx +1 -39
  52. data/app/pb_kits/playbook/pb_table/_table.tsx +2 -2
  53. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +1 -3
  54. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +1 -3
  55. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +1 -3
  56. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +1 -3
  57. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md +1 -1
  58. data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -2
  59. data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +1 -1
  60. data/app/pb_kits/playbook/pb_table/styles/_headers.scss +7 -19
  61. data/app/pb_kits/playbook/pb_table/table.rb +1 -13
  62. data/app/pb_kits/playbook/pb_table/table_header.rb +1 -13
  63. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +5 -13
  64. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +0 -2
  65. data/app/pb_kits/playbook/pb_text_input/docs/index.js +0 -1
  66. data/app/pb_kits/playbook/pb_text_input/inputMask.ts +1 -8
  67. data/dist/chunks/_typeahead-7W5Ha5Td.js +22 -0
  68. data/dist/chunks/_weekday_stacked-DSKatW3m.js +45 -0
  69. data/dist/chunks/lib-BGzBzFZX.js +29 -0
  70. data/dist/chunks/{pb_form_validation-Bx1OK6xs.js → pb_form_validation-BvNy9Bd6.js} +1 -1
  71. data/dist/chunks/vendor.js +1 -1
  72. data/dist/playbook-doc.js +1 -1
  73. data/dist/playbook-rails-react-bindings.js +1 -1
  74. data/dist/playbook-rails.js +1 -1
  75. data/dist/playbook.css +1 -1
  76. data/lib/playbook/version.rb +1 -1
  77. metadata +18 -49
  78. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx +0 -66
  79. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md +0 -10
  80. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx +0 -58
  81. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md +0 -6
  82. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx +0 -64
  83. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md +0 -8
  84. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx +0 -55
  85. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md +0 -3
  86. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +0 -33
  87. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md +0 -3
  88. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +0 -97
  89. data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx +0 -35
  90. data/app/pb_kits/playbook/pb_background/docs/_background_overlay.md +0 -1
  91. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx +0 -54
  92. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md +0 -3
  93. data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts +0 -45
  94. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx +0 -110
  95. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md +0 -5
  96. data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx +0 -79
  97. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx +0 -63
  98. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md +0 -3
  99. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx +0 -39
  100. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md +0 -1
  101. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx +0 -40
  102. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md +0 -5
  103. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb +0 -34
  104. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md +0 -1
  105. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb +0 -36
  106. data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md +0 -1
  107. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx +0 -94
  108. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md +0 -1
  109. data/dist/chunks/_typeahead-aRwivA3u.js +0 -22
  110. data/dist/chunks/_weekday_stacked-Bm5175-u.js +0 -45
  111. data/dist/chunks/lib-Cj4H6j1c.js +0 -29
  112. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default_react.md → _draggable_default.md} +0 -0
  113. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default.html.erb → _draggable_default_rails.html.erb} +0 -0
  114. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers_react.md → _draggable_multiple_containers.md} +0 -0
  115. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers.html.erb → _draggable_multiple_containers_rails.html.erb} +0 -0
  116. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards_react.md → _draggable_with_cards.md} +0 -0
  117. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards.html.erb → _draggable_with_cards_rails.html.erb} +0 -0
  118. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list_react.md → _draggable_with_list.md} +0 -0
  119. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list.html.erb → _draggable_with_list_rails.html.erb} +0 -0
  120. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list_react.md → _draggable_with_selectable_list.md} +0 -0
  121. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list.html.erb → _draggable_with_selectable_list_rails.html.erb} +0 -0
  122. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table_rails.md → _draggable_with_table.md} +0 -0
@@ -6,8 +6,6 @@ import Caption from '../../pb_caption/_caption'
6
6
  import Draggable from '../../pb_draggable/_draggable'
7
7
  import { DraggableProvider } from '../../pb_draggable/context'
8
8
 
9
-
10
-
11
9
  // Initial items to be dragged
12
10
  const dataPrimary = [
13
11
  {
@@ -44,54 +42,54 @@ const DraggableDropZonesColors = (props) => {
44
42
 
45
43
  return (
46
44
  <>
47
- <Caption marginBottom="xs"
48
- text="Primary"
49
- />
50
- <DraggableProvider
51
- dropZone={{type: "shadow", color: "primary"}}
52
- initialItems={dataPrimary}
53
- onReorder={(items) => setInitialPrimaryState(items)}
54
- >
55
- <Draggable.Container {...props}>
56
- <Flex>
57
- {initialPrimaryState.map(({ id, url }) => (
58
- <Draggable.Item dragId={id}
59
- key={id}
60
- marginRight="sm"
61
- >
62
- <Image alt={id}
63
- size="md"
64
- url={url}
65
- />
66
- </Draggable.Item>
67
- ))}
68
- </Flex>
69
- </Draggable.Container>
70
- </DraggableProvider>
71
- <Caption marginBottom="xs"
72
- text="Purple"
73
- />
74
- <DraggableProvider
75
- dropZone={{type: "outline", color: "purple"}}
76
- initialItems={dataPurple}
77
- onReorder={(items) => setInitialPurpleState(items)}
78
- >
79
- <Draggable.Container {...props}>
80
- <Flex>
81
- {initialPurpleState.map(({ id, url }) => (
82
- <Draggable.Item dragId={id}
83
- key={id}
84
- marginRight="sm"
85
- >
86
- <Image alt={id}
87
- size="md"
88
- url={url}
89
- />
90
- </Draggable.Item>
91
- ))}
92
- </Flex>
93
- </Draggable.Container>
94
- </DraggableProvider>
45
+ <Caption marginBottom="xs">
46
+ Primary
47
+ </Caption>
48
+ <DraggableProvider
49
+ dropZone={{type: "shadow", color: "primary"}}
50
+ initialItems={dataPrimary}
51
+ onReorder={(items) => setInitialPrimaryState(items)}
52
+ >
53
+ <Draggable.Container {...props}>
54
+ <Flex>
55
+ {initialPrimaryState.map(({ id, url }) => (
56
+ <Draggable.Item dragId={id}
57
+ key={id}
58
+ marginRight="sm"
59
+ >
60
+ <Image alt={id}
61
+ size="md"
62
+ url={url}
63
+ />
64
+ </Draggable.Item>
65
+ ))}
66
+ </Flex>
67
+ </Draggable.Container>
68
+ </DraggableProvider>
69
+ <Caption marginBottom="xs">
70
+ Purple
71
+ </Caption>
72
+ <DraggableProvider
73
+ dropZone={{type: "outline", color: "purple"}}
74
+ initialItems={dataPurple}
75
+ onReorder={(items) => setInitialPurpleState(items)}
76
+ >
77
+ <Draggable.Container {...props}>
78
+ <Flex>
79
+ {initialPurpleState.map(({ id, url }) => (
80
+ <Draggable.Item dragId={id}
81
+ key={id}
82
+ marginRight="sm"
83
+ >
84
+ <Image alt={id}
85
+ size="md"
86
+ url={url}
87
+ />
88
+ </Draggable.Item>
89
+ ))}
90
+ </Flex>
91
+ </Draggable.Container>
92
+ </DraggableProvider>
95
93
  </>
96
94
  );
97
95
  };
@@ -1 +1 @@
1
- The default `color` for Draggable kit drop zones is "neutral", with "primary" or "purple" as additional options. When `type` is set to "line", the default color is "primary" and "purple" is the only other option.
1
+ By default, the Draggable kit sets the default color of drop zones to "neutral" (or "primary" if using the "line" style.)
@@ -1,7 +1,7 @@
1
1
  import React, { useState } from "react";
2
2
 
3
3
  import Flex from '../../pb_flex/_flex'
4
- import { DraggableProvider } from '../context'
4
+ import { DraggableProvider } from '../../pb_draggable/context'
5
5
  import Avatar from '../../pb_avatar/_avatar'
6
6
  import Body from '../../pb_body/_body'
7
7
  import Table from '../../pb_table/_table'
@@ -2,6 +2,4 @@ The draggable kit can also be used in conjunction with the table kit to create d
2
2
 
3
3
  - Wrap the Table with the `DraggableProvider` and manage state as shown.
4
4
  - use the `draggableContainer` prop on the Table.Body to designate it as the Draggable Container
5
- - use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here.
6
-
7
- We recommending using the default `dropZone type` with the Table kit.
5
+ - use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here.
@@ -4,17 +4,14 @@ examples:
4
4
  - draggable_with_list: Draggable with List Kit
5
5
  - draggable_with_selectable_list: Draggable with SelectableList Kit
6
6
  - draggable_with_cards: Draggable with Cards
7
- - draggable_with_table: Draggable with Table
7
+ - draggable_with_table_react: Draggable with Table
8
8
  - draggable_multiple_containers: Dragging Across Multiple Containers
9
- - draggable_drop_zones: Draggable Drop Zones
10
- - draggable_drop_zones_colors: Draggable Drop Zones Colors
11
- - draggable_drop_zones_line: Draggable Drop Zones Line
12
9
 
13
10
  rails:
14
- - draggable_default: Default
15
- - draggable_with_list: Draggable with List Kit
16
- - draggable_with_selectable_list: Draggable with SelectableList Kit
17
- - draggable_with_cards: Draggable with Cards
11
+ - draggable_default_rails: Default
12
+ - draggable_with_list_rails: Draggable with List Kit
13
+ - draggable_with_selectable_list_rails: Draggable with SelectableList Kit
14
+ - draggable_with_cards_rails: Draggable with Cards
18
15
  - draggable_with_table: Draggable with Table
19
- - draggable_multiple_containers: Dragging Across Multiple Containers
16
+ - draggable_multiple_containers_rails: Dragging Across Multiple Containers
20
17
 
@@ -3,7 +3,4 @@ export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
3
3
  export { default as DraggableWithList } from './_draggable_with_list.jsx'
4
4
  export { default as DraggableWithSelectableList } from './_draggable_with_selectable_list.jsx'
5
5
  export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
6
- export { default as DraggableWithTable } from './_draggable_with_table.jsx'
7
- export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
8
- export { default as DraggableDropZonesColors } from './_draggable_drop_zones_colors.jsx'
9
- export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
6
+ export { default as DraggableWithTableReact } from './_draggable_with_table_react.jsx'
@@ -128,58 +128,6 @@ const DraggableKitWithCard = () => {
128
128
  );
129
129
  };
130
130
 
131
- const DraggableWithLineVertical = () => {
132
- const [initialState, setInitialState] = useState(data);
133
- return (
134
- <div data-testid={testId}>
135
- <DraggableProvider
136
- dropZone={{ type: "line" }}
137
- initialItems={data}
138
- onReorder={(items) => setInitialState(items)}
139
- >
140
- <Draggable>
141
- <Draggable.Container>
142
- {initialState.map(({ id, text }) => (
143
- <Draggable.Item
144
- dragId={id}
145
- key={id}
146
- >
147
- {text}
148
- </Draggable.Item>
149
- ))}
150
- </Draggable.Container>
151
- </Draggable>
152
- </DraggableProvider>
153
- </div>
154
- );
155
- };
156
-
157
- const DraggableWithLineHorizontal = () => {
158
- const [initialState, setInitialState] = useState(data);
159
- return (
160
- <div data-testid={testId}>
161
- <DraggableProvider
162
- dropZone={{ type: "line", direction: "horizontal" }}
163
- initialItems={data}
164
- onReorder={(items) => setInitialState(items)}
165
- >
166
- <Draggable>
167
- <Draggable.Container>
168
- {initialState.map(({ id, text }) => (
169
- <Draggable.Item
170
- dragId={id}
171
- key={id}
172
- >
173
- {text}
174
- </Draggable.Item>
175
- ))}
176
- </Draggable.Container>
177
- </Draggable>
178
- </DraggableProvider>
179
- </div>
180
- );
181
- };
182
-
183
131
  test("generated default kit and classname", () => {
184
132
  render(<DefaultDraggableKit />);
185
133
  const kit = screen.getByTestId(testId);
@@ -240,19 +188,3 @@ test("generated dragHandle with Card", () => {
240
188
  const dragHandle = card.querySelector(".pb_custom_icon");
241
189
  expect(dragHandle).toBeInTheDocument();
242
190
  });
243
-
244
- test("line dropZone with default direction applies 'line_vertical' class to container", () => {
245
- render(<DraggableWithLineVertical />);
246
- const kit = screen.getByTestId(testId);
247
- const container = kit.querySelector(".pb_draggable_container");
248
-
249
- expect(container).toHaveClass("line_vertical");
250
- });
251
-
252
- test("line dropZone with horizontal direction applies 'line_horizontal' class to container", () => {
253
- render(<DraggableWithLineHorizontal />);
254
- const kit = screen.getByTestId(testId);
255
- const container = kit.querySelector(".pb_draggable_container");
256
-
257
- expect(container).toHaveClass("line_horizontal");
258
- });
@@ -31,7 +31,7 @@ const DraggableContainer = (props: DraggableContainerProps) => {
31
31
  } = contextValues;
32
32
 
33
33
  // Only get direction if dropZone is 'line'
34
- const direction = dropZone === 'line' ? (contextValues.direction || 'vertical') : null;
34
+ const direction = dropZone === 'line' ? (contextValues.direction || 'vertical') : 'vertical';
35
35
 
36
36
  const ariaProps = buildAriaProps(aria);
37
37
  const dataProps = buildDataProps(data);
@@ -41,9 +41,8 @@ const DraggableContainer = (props: DraggableContainerProps) => {
41
41
  const classes = classnames(
42
42
  buildCss("pb_draggable_container"),
43
43
  `${activeContainer === container ? "active" : ""}`,
44
- // Line variant gets line_{direction} classname on container no matter what
45
- dropZone === 'line' && direction === 'vertical' ? 'line_vertical' : '',
46
- dropZone === 'line' && direction === 'horizontal' ? 'line_horizontal' : '',
44
+ // Only add vertical class if dropZone is 'line' and direction is 'vertical'
45
+ (dropZone === 'line' && direction === 'vertical') ? 'vertical' : '',
47
46
  globalProps(props),
48
47
  className
49
48
  );
@@ -35,7 +35,7 @@ type DropdownProps = {
35
35
  label?: string;
36
36
  onSelect?: (arg: GenericObject) => null;
37
37
  options: GenericObject;
38
- separators?: boolean;
38
+ separators: boolean;
39
39
  triggerRef?: any;
40
40
  variant?: "default" | "subtle";
41
41
  };
@@ -22,7 +22,7 @@ type DropdownOptionProps = {
22
22
  data?: { [key: string]: string };
23
23
  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
24
24
  id?: string;
25
- key?: string | number;
25
+ key?: string;
26
26
  option?: GenericObject;
27
27
  padding?: string;
28
28
  } & GlobalProps;
@@ -85,19 +85,11 @@
85
85
  .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
86
86
  border-bottom-right-radius: 0;
87
87
  border-top-right-radius: 0;
88
- border-right-color: transparent;
88
+ border-right-width: 0;
89
89
  }
90
- [class^=pb_text_input_kit] .text_input_wrapper input:focus,
91
- [class^=pb_text_input_kit] .text_input_wrapper .text_input:focus {
92
- border-right-color: $primary;
93
- }
94
- [class^=pb_text_input_kit].error .text_input_wrapper input,
95
- [class^=pb_text_input_kit].error .text_input_wrapper .text_input {
96
- border-right-color: $error;
97
- }
98
90
  }
99
91
 
100
- & > [class^=pb_phone_number_input]:not(:first-child), [class^=pb_passphrase]:not(:first-child) {
92
+ & > [class^=pb_phone_number_input]:not(:first-child) {
101
93
  .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
102
94
  border-bottom-left-radius: 0;
103
95
  border-top-left-radius: 0;
@@ -115,16 +107,8 @@
115
107
  .text_input {
116
108
  border-bottom-right-radius: 0;
117
109
  border-top-right-radius: 0;
118
- border-right-color: transparent;
110
+ border-right: none;
119
111
  }
120
- [class^=pb_text_input_kit] .text_input_wrapper input:focus,
121
- [class^=pb_text_input_kit] .text_input_wrapper .text_input:focus {
122
- border-right-color: $primary;
123
- }
124
- [class^=pb_text_input_kit].error .text_input_wrapper input,
125
- [class^=pb_text_input_kit].error .text_input_wrapper .text_input {
126
- border-right-color: $error;
127
- }
128
112
  }
129
113
 
130
114
  &[class*=rails] > [class^=pb_date_picker_kit] {
@@ -243,8 +227,4 @@
243
227
  padding-left: calc(var(--iti-flag-width) + 1px);
244
228
  }
245
229
  }
246
-
247
- &:has(> [class^="pb_select"]):has(> .pb_passphrase) [class^="pb_select"] {
248
- align-self: baseline;
249
- }
250
230
  }
@@ -1,4 +1,5 @@
1
- <%= pb_rails("flex", props: {orientation: "column", row_gap:"md"}) do %>
1
+ <div>
2
+
2
3
  <%= pb_rails("form_group") do %>
3
4
  <%= pb_rails("text_input", props: { placeholder: "Enter Artist Name" }) %>
4
5
  <%= pb_rails("select", props: {
@@ -16,6 +17,8 @@
16
17
  ]
17
18
  }) %>
18
19
  <% end %>
20
+ <br>
21
+ <br>
19
22
  <%= pb_rails("form_group") do %>
20
23
  <%= pb_rails("select", props: {
21
24
  blank_selection: "Phone",
@@ -29,17 +32,4 @@
29
32
  id: "phone"
30
33
  }) %>
31
34
  <% end %>
32
- <%= pb_rails("form_group") do %>
33
- <%= pb_rails("phone_number_input", props: {
34
- id: "phone2"
35
- }) %>
36
- <%= pb_rails("select", props: {
37
- blank_selection: "Phone",
38
- options: [
39
- { value: "Cell" },
40
- { value: "Work" },
41
- { value: "Home" },
42
- ]
43
- }) %>
44
- <% end %>
45
- <% end %>
35
+ </div>
@@ -1,16 +1,11 @@
1
- import React, {useState} from 'react'
1
+ import React from 'react'
2
2
 
3
3
  import FormGroup from '../_form_group'
4
4
  import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
5
5
  import Select from '../../pb_select/_select'
6
6
  import TextInput from '../../pb_text_input/_text_input'
7
- import Flex from '../../pb_flex/_flex'
8
- import Passphrase from '../../pb_passphrase/_passphrase'
9
7
 
10
8
  const FormGroupSelect = (props) => {
11
- const [input, setInput] = useState("");
12
- const handleChange = (e) => setInput(e.target.value);
13
-
14
9
  const options = [
15
10
  { value: 'Country' },
16
11
  { value: 'Pop' },
@@ -30,10 +25,7 @@ const FormGroupSelect = (props) => {
30
25
  ]
31
26
 
32
27
  return (
33
- <Flex
34
- orientation="column"
35
- rowGap="md"
36
- >
28
+ <div>
37
29
  <FormGroup>
38
30
  <TextInput
39
31
  placeholder="Enter Artist Name"
@@ -45,43 +37,18 @@ const FormGroupSelect = (props) => {
45
37
  {...props}
46
38
  />
47
39
  </FormGroup>
40
+ <br />
41
+ <br />
48
42
  <FormGroup>
49
43
  <Select
50
44
  blankSelection="Phone"
51
45
  options={phoneOptions}
52
- {...props}
53
- />
46
+ />
54
47
  <PhoneNumberInput
55
48
  id='default'
56
- {...props}
57
49
  />
58
50
  </FormGroup>
59
- <FormGroup>
60
- <PhoneNumberInput
61
- id='default-2'
62
- {...props}
63
- />
64
- <Select
65
- blankSelection="Phone"
66
- options={phoneOptions}
67
- {...props}
68
- />
69
- </FormGroup>
70
- <FormGroup>
71
- <Select
72
- blankSelection="Phone"
73
- options={phoneOptions}
74
- {...props}
75
- />
76
- <Passphrase
77
- id="my-passphrase"
78
- label=""
79
- onChange={handleChange}
80
- value={input}
81
- {...props}
82
- />
83
- </FormGroup>
84
- </Flex>
51
+ </div>
85
52
  )
86
53
  }
87
54
 
@@ -210,78 +210,10 @@ $bracket-border-width: 4px;
210
210
  border-right: $bracket-border-width solid $border_light;
211
211
  }
212
212
 
213
- .polygon_node {
214
- position: absolute;
215
- top: calc(50% - 5px);
216
- right: -10px;
217
-
218
- width: 0;
219
- height: 0;
220
- border-top: 5px solid transparent;
221
- border-bottom: 5px solid transparent;
222
- border-left: 10px solid $border_light;
223
- }
224
-
225
213
  .layout_round_label {
226
214
  display: none;
227
215
  }
228
216
 
229
- .layout_participant,
230
- .layout_participant_winner,
231
- .layout_participant_self,
232
- .layout_participant_winner_self,
233
- .layout_participant_winner_self_last {
234
- height: 60px;
235
- }
236
-
237
- .layout_tbd {
238
- height: 140px;
239
- display: flex;
240
- flex-direction: column;
241
- justify-content: center;
242
- }
243
-
244
- .layout_participant_winner,
245
- .layout_participant_self,
246
- .layout_participant_winner_self,
247
- .layout_participant_winner_self_last {
248
- position: relative;
249
-
250
- &::after {
251
- content: "";
252
- position: absolute;
253
- top: 0;
254
- width: 4px;
255
- height: 100%;
256
- }
257
- }
258
-
259
- .layout_participant_winner::after {
260
- right: 0;
261
- background: $product_6_highlight;
262
- }
263
-
264
- .layout_participant_self::after {
265
- left: 0;
266
- background: $category_1;
267
- }
268
-
269
- .layout_participant_winner_self::after {
270
- right: 0;
271
- background: $product_6_highlight;
272
- }
273
-
274
- .layout_participant_winner_self_last::after {
275
- left: 0;
276
- background: $category_1;
277
- }
278
-
279
- .game_separator {
280
- &::before, &::after {
281
- height: 2px;
282
- }
283
- }
284
-
285
217
  @media (max-width: $screen-md-max) {
286
218
  flex-direction: column;
287
219
  .layout_round_label {
@@ -289,8 +221,7 @@ $bracket-border-width: 4px;
289
221
  }
290
222
  .layout_round .layout_game::after,
291
223
  .connector_container,
292
- .half_box,
293
- .polygon_node {
224
+ .half_box {
294
225
  display: none !important;
295
226
  }
296
227
  }
@@ -6,7 +6,6 @@ import { GlobalProps, globalProps, globalInlineProps } from '../utilities/global
6
6
 
7
7
  import { Round, RoundLabel } from "./subcomponents/_round";
8
8
  import Game from "./subcomponents/_game";
9
- import Participant from "./subcomponents/_participant";
10
9
 
11
10
  type LayoutPropTypes = {
12
11
  aria?: {[key: string]: string},
@@ -177,38 +176,13 @@ const Layout = (props: LayoutPropTypes) => {
177
176
  (child: React.ReactElement & {type: {displayName: string}}) => child.type?.displayName !== 'Side'
178
177
  )
179
178
 
180
- const numberOfRounds = Array.isArray(children) ? React.Children.toArray(children).filter(
179
+ const numberOfRounds = Array.isArray(nonSideChildren) ? React.Children.toArray(children).filter(
181
180
  (child) => {
182
181
  return (child as React.ReactElement).type === Layout.Round;
183
182
  }
184
183
  ).length : 0
185
-
186
- const lastRoundWithSelf = React.Children.toArray(children).filter((child) => {
187
- if ((child as React.ReactElement).type !== Layout.Round) {
188
- return false
189
- }
190
-
191
- const roundElement = child as React.ReactElement
192
-
193
- const gameChildren = React.Children.toArray(roundElement.props.children)
194
-
195
- const hasWinningSelfParticipant = gameChildren.some((gameChild) => {
196
- const gameElement = gameChild as React.ReactElement
197
-
198
- const participantChildren = React.Children.toArray(gameElement.props.children)
199
-
200
- return participantChildren.some((participantChild) => {
201
- const participantElement = participantChild as React.ReactElement
202
- const { self } = participantElement.props
203
- return self === true
204
- })
205
- })
206
-
207
- return hasWinningSelfParticipant
208
- }).length
209
-
210
184
  const bracketChildren = nonSideChildren.map(child =>
211
- React.isValidElement(child) ? React.cloneElement(child, { numberOfRounds, lastRoundWithSelf }) : child
185
+ React.isValidElement(child) ? React.cloneElement(child, { numberOfRounds }) : child
212
186
  )
213
187
 
214
188
  const filteredProps = {...props}
@@ -245,6 +219,5 @@ Layout.Footer = Footer
245
219
  Layout.Round = Round
246
220
  Layout.Game = Game
247
221
  Layout.RoundLabel = RoundLabel
248
- Layout.Participant = Participant
249
222
 
250
223
  export default Layout