playbook_ui 13.28.0.pre.alpha.pbntr312tableheaderflexremoval3019 → 13.28.0.pre.alpha.play829selectablecardalignment2978
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +3 -2
- data/app/pb_kits/playbook/index.js +0 -2
- data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +1 -4
- data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +0 -16
- data/app/pb_kits/playbook/pb_card/_card_mixin.scss +2 -1
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +2 -5
- data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +0 -16
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +8 -14
- data/app/pb_kits/playbook/pb_collapsible/collapsible.test.js +0 -24
- data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +1 -7
- data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +1 -9
- data/app/pb_kits/playbook/pb_form_group/_form_group.scss +2 -2
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +1 -4
- data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +0 -16
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +1 -0
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx +30 -32
- data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +0 -2
- data/app/pb_kits/playbook/pb_table/_table.tsx +0 -5
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.jsx +32 -33
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/{_table_outer_padding.html.erb → _table_alignment_row.html.erb} +7 -7
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx +33 -33
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb +63 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx +50 -51
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb +52 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx +38 -37
- data/app/pb_kits/playbook/pb_table/docs/example.yml +9 -9
- data/app/pb_kits/playbook/pb_table/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_table/styles/_all.scss +0 -1
- data/app/pb_kits/playbook/pb_table/table.rb +1 -14
- data/app/pb_kits/playbook/pb_table/table.test.js +1 -5
- data/app/pb_kits/playbook/pb_table/table_header.html.erb +2 -0
- data/app/pb_kits/playbook/playbook-doc.js +0 -2
- data/app/pb_kits/playbook/utilities/globalProps.ts +1 -12
- data/dist/menu.yml +2 -5
- data/dist/playbook-rails.js +6 -6
- data/lib/playbook/classnames.rb +0 -1
- data/lib/playbook/kit_base.rb +0 -2
- data/lib/playbook/version.rb +1 -1
- metadata +6 -35
- data/app/pb_kits/playbook/pb_bar_graph/barGraph.test.js +0 -31
- data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js +0 -45
- data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap +0 -53
- data/app/pb_kits/playbook/pb_draggable/_draggable.scss +0 -10
- data/app/pb_kits/playbook/pb_draggable/_draggable.tsx +0 -53
- data/app/pb_kits/playbook/pb_draggable/context/index.tsx +0 -92
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx +0 -53
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx +0 -159
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx +0 -121
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +0 -9
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +0 -3
- data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +0 -65
- data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +0 -54
- data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx +0 -57
- data/app/pb_kits/playbook/pb_gauge/gauge.test.js +0 -35
- data/app/pb_kits/playbook/pb_line_graph/lineGraph.test.js +0 -52
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.html.erb +0 -33
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.md +0 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.html.erb +0 -34
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.md +0 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.html.erb +0 -54
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.md +0 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.md +0 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.html.erb +0 -53
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.md +0 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_outer_padding.jsx +0 -76
- data/app/pb_kits/playbook/pb_table/docs/_table_outer_padding.md +0 -1
- data/app/pb_kits/playbook/pb_table/styles/_outer_padding.scss +0 -21
- data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js +0 -61
- data/app/pb_kits/playbook/tokens/_vertical_align.scss +0 -18
- data/app/pb_kits/playbook/utilities/_vertical_align.scss +0 -16
- data/lib/playbook/vertical_align.rb +0 -37
data/lib/playbook/classnames.rb
CHANGED
data/lib/playbook/kit_base.rb
CHANGED
@@ -29,7 +29,6 @@ require "playbook/left"
|
|
29
29
|
require "playbook/top"
|
30
30
|
require "playbook/right"
|
31
31
|
require "playbook/bottom"
|
32
|
-
require "playbook/vertical_align"
|
33
32
|
|
34
33
|
module Playbook
|
35
34
|
include ActionView::Helpers
|
@@ -66,7 +65,6 @@ module Playbook
|
|
66
65
|
include Playbook::Top
|
67
66
|
include Playbook::Right
|
68
67
|
include Playbook::Bottom
|
69
|
-
include Playbook::VerticalAlign
|
70
68
|
|
71
69
|
prop :id
|
72
70
|
prop :data, type: Playbook::Props::HashProp, default: {}
|
data/lib/playbook/version.rb
CHANGED
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: 13.28.0.pre.alpha.
|
4
|
+
version: 13.28.0.pre.alpha.play829selectablecardalignment2978
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2024-
|
12
|
+
date: 2024-05-28 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -399,7 +399,6 @@ files:
|
|
399
399
|
- app/pb_kits/playbook/pb_badge/docs/index.js
|
400
400
|
- app/pb_kits/playbook/pb_bar_graph/_bar_graph.scss
|
401
401
|
- app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx
|
402
|
-
- app/pb_kits/playbook/pb_bar_graph/barGraph.test.js
|
403
402
|
- app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js
|
404
403
|
- app/pb_kits/playbook/pb_bar_graph/bar_graph.html.erb
|
405
404
|
- app/pb_kits/playbook/pb_bar_graph/bar_graph.rb
|
@@ -632,7 +631,6 @@ files:
|
|
632
631
|
- app/pb_kits/playbook/pb_circle_chart/ChartsTypes.ts
|
633
632
|
- app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss
|
634
633
|
- app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx
|
635
|
-
- app/pb_kits/playbook/pb_circle_chart/circleChart.test.js
|
636
634
|
- app/pb_kits/playbook/pb_circle_chart/circle_chart.html.erb
|
637
635
|
- app/pb_kits/playbook/pb_circle_chart/circle_chart.rb
|
638
636
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb
|
@@ -675,7 +673,6 @@ files:
|
|
675
673
|
- app/pb_kits/playbook/pb_circle_icon_button/docs/_footer.md
|
676
674
|
- app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml
|
677
675
|
- app/pb_kits/playbook/pb_circle_icon_button/docs/index.js
|
678
|
-
- app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap
|
679
676
|
- app/pb_kits/playbook/pb_collapsible/_collapsible.scss
|
680
677
|
- app/pb_kits/playbook/pb_collapsible/_collapsible.tsx
|
681
678
|
- app/pb_kits/playbook/pb_collapsible/_helper_functions.ts
|
@@ -1072,17 +1069,6 @@ files:
|
|
1072
1069
|
- app/pb_kits/playbook/pb_distribution_bar/docs/index.js
|
1073
1070
|
- app/pb_kits/playbook/pb_docs/kit_example.html.erb
|
1074
1071
|
- app/pb_kits/playbook/pb_docs/kit_example.rb
|
1075
|
-
- app/pb_kits/playbook/pb_draggable/_draggable.scss
|
1076
|
-
- app/pb_kits/playbook/pb_draggable/_draggable.tsx
|
1077
|
-
- app/pb_kits/playbook/pb_draggable/context/index.tsx
|
1078
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx
|
1079
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
|
1080
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx
|
1081
|
-
- app/pb_kits/playbook/pb_draggable/docs/example.yml
|
1082
|
-
- app/pb_kits/playbook/pb_draggable/docs/index.js
|
1083
|
-
- app/pb_kits/playbook/pb_draggable/draggable.test.jsx
|
1084
|
-
- app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx
|
1085
|
-
- app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx
|
1086
1072
|
- app/pb_kits/playbook/pb_dropdown/_dropdown.scss
|
1087
1073
|
- app/pb_kits/playbook/pb_dropdown/_dropdown.tsx
|
1088
1074
|
- app/pb_kits/playbook/pb_dropdown/context/index.tsx
|
@@ -1348,7 +1334,6 @@ files:
|
|
1348
1334
|
- app/pb_kits/playbook/pb_gauge/docs/index.js
|
1349
1335
|
- app/pb_kits/playbook/pb_gauge/gauge.html.erb
|
1350
1336
|
- app/pb_kits/playbook/pb_gauge/gauge.rb
|
1351
|
-
- app/pb_kits/playbook/pb_gauge/gauge.test.js
|
1352
1337
|
- app/pb_kits/playbook/pb_hashtag/_hashtag.scss
|
1353
1338
|
- app/pb_kits/playbook/pb_hashtag/_hashtag.tsx
|
1354
1339
|
- app/pb_kits/playbook/pb_hashtag/docs/_description.md
|
@@ -1647,7 +1632,6 @@ files:
|
|
1647
1632
|
- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.md
|
1648
1633
|
- app/pb_kits/playbook/pb_line_graph/docs/example.yml
|
1649
1634
|
- app/pb_kits/playbook/pb_line_graph/docs/index.js
|
1650
|
-
- app/pb_kits/playbook/pb_line_graph/lineGraph.test.js
|
1651
1635
|
- app/pb_kits/playbook/pb_line_graph/lineGraphSettings.js
|
1652
1636
|
- app/pb_kits/playbook/pb_line_graph/line_graph.html.erb
|
1653
1637
|
- app/pb_kits/playbook/pb_line_graph/line_graph.rb
|
@@ -2346,22 +2330,17 @@ files:
|
|
2346
2330
|
- app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb
|
2347
2331
|
- app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx
|
2348
2332
|
- app/pb_kits/playbook/pb_table/docs/_table_action_middle.md
|
2333
|
+
- app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb
|
2349
2334
|
- app/pb_kits/playbook/pb_table/docs/_table_alignment_column.jsx
|
2350
2335
|
- app/pb_kits/playbook/pb_table/docs/_table_alignment_column.md
|
2351
|
-
- app/pb_kits/playbook/pb_table/docs/
|
2352
|
-
- app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.md
|
2336
|
+
- app/pb_kits/playbook/pb_table/docs/_table_alignment_row.html.erb
|
2353
2337
|
- app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx
|
2354
2338
|
- app/pb_kits/playbook/pb_table/docs/_table_alignment_row.md
|
2355
|
-
- app/pb_kits/playbook/pb_table/docs/
|
2356
|
-
- app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.md
|
2339
|
+
- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb
|
2357
2340
|
- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx
|
2358
2341
|
- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.md
|
2359
|
-
- app/pb_kits/playbook/pb_table/docs/
|
2360
|
-
- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.md
|
2342
|
+
- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb
|
2361
2343
|
- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx
|
2362
|
-
- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.md
|
2363
|
-
- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.html.erb
|
2364
|
-
- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.md
|
2365
2344
|
- app/pb_kits/playbook/pb_table/docs/_table_container.html.erb
|
2366
2345
|
- app/pb_kits/playbook/pb_table/docs/_table_container.jsx
|
2367
2346
|
- app/pb_kits/playbook/pb_table/docs/_table_data_table.html.erb
|
@@ -2387,9 +2366,6 @@ files:
|
|
2387
2366
|
- app/pb_kits/playbook/pb_table/docs/_table_one_action.html.erb
|
2388
2367
|
- app/pb_kits/playbook/pb_table/docs/_table_one_action.jsx
|
2389
2368
|
- app/pb_kits/playbook/pb_table/docs/_table_one_action.md
|
2390
|
-
- app/pb_kits/playbook/pb_table/docs/_table_outer_padding.html.erb
|
2391
|
-
- app/pb_kits/playbook/pb_table/docs/_table_outer_padding.jsx
|
2392
|
-
- app/pb_kits/playbook/pb_table/docs/_table_outer_padding.md
|
2393
2369
|
- app/pb_kits/playbook/pb_table/docs/_table_responsive_table.html.erb
|
2394
2370
|
- app/pb_kits/playbook/pb_table/docs/_table_responsive_table.jsx
|
2395
2371
|
- app/pb_kits/playbook/pb_table/docs/_table_side_highlight.html.erb
|
@@ -2434,7 +2410,6 @@ files:
|
|
2434
2410
|
- app/pb_kits/playbook/pb_table/styles/_hover.scss
|
2435
2411
|
- app/pb_kits/playbook/pb_table/styles/_mobile.scss
|
2436
2412
|
- app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss
|
2437
|
-
- app/pb_kits/playbook/pb_table/styles/_outer_padding.scss
|
2438
2413
|
- app/pb_kits/playbook/pb_table/styles/_reset.scss
|
2439
2414
|
- app/pb_kits/playbook/pb_table/styles/_side_highlight.scss
|
2440
2415
|
- app/pb_kits/playbook/pb_table/styles/_single-line.scss
|
@@ -2734,7 +2709,6 @@ files:
|
|
2734
2709
|
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.md
|
2735
2710
|
- app/pb_kits/playbook/pb_treemap_chart/docs/example.yml
|
2736
2711
|
- app/pb_kits/playbook/pb_treemap_chart/docs/index.js
|
2737
|
-
- app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js
|
2738
2712
|
- app/pb_kits/playbook/pb_treemap_chart/treemap_chart.html.erb
|
2739
2713
|
- app/pb_kits/playbook/pb_treemap_chart/treemap_chart.rb
|
2740
2714
|
- app/pb_kits/playbook/pb_typeahead/_typeahead.scss
|
@@ -2876,7 +2850,6 @@ files:
|
|
2876
2850
|
- app/pb_kits/playbook/tokens/_titles.scss
|
2877
2851
|
- app/pb_kits/playbook/tokens/_transition.scss
|
2878
2852
|
- app/pb_kits/playbook/tokens/_typography.scss
|
2879
|
-
- app/pb_kits/playbook/tokens/_vertical_align.scss
|
2880
2853
|
- app/pb_kits/playbook/tokens/exports/_border_radius.scss
|
2881
2854
|
- app/pb_kits/playbook/tokens/exports/_colors.scss
|
2882
2855
|
- app/pb_kits/playbook/tokens/exports/_line_height.scss
|
@@ -2907,7 +2880,6 @@ files:
|
|
2907
2880
|
- app/pb_kits/playbook/utilities/_spacing.scss
|
2908
2881
|
- app/pb_kits/playbook/utilities/_text_align.scss
|
2909
2882
|
- app/pb_kits/playbook/utilities/_truncate.scss
|
2910
|
-
- app/pb_kits/playbook/utilities/_vertical_align.scss
|
2911
2883
|
- app/pb_kits/playbook/utilities/flexbox_global_props/_align_content.scss
|
2912
2884
|
- app/pb_kits/playbook/utilities/flexbox_global_props/_align_items.scss
|
2913
2885
|
- app/pb_kits/playbook/utilities/flexbox_global_props/_align_self.scss
|
@@ -3007,7 +2979,6 @@ files:
|
|
3007
2979
|
- lib/playbook/top.rb
|
3008
2980
|
- lib/playbook/truncate.rb
|
3009
2981
|
- lib/playbook/version.rb
|
3010
|
-
- lib/playbook/vertical_align.rb
|
3011
2982
|
- lib/playbook/z_index.rb
|
3012
2983
|
- lib/playbook_ui.rb
|
3013
2984
|
homepage: https://playbook.powerapp.cloud/
|
@@ -1,31 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { render, screen } from '../utilities/test-utils';
|
3
|
-
import BarGraph from './_bar_graph';
|
4
|
-
|
5
|
-
beforeEach(() => {
|
6
|
-
// Silences error logs within the test suite.
|
7
|
-
jest.spyOn(console, 'error');
|
8
|
-
jest.spyOn(console, 'warn');
|
9
|
-
console.error.mockImplementation(() => {});
|
10
|
-
console.warn.mockImplementation(() => {});
|
11
|
-
});
|
12
|
-
|
13
|
-
afterEach(() => {
|
14
|
-
console.error.mockRestore();
|
15
|
-
console.warn.mockRestore();
|
16
|
-
});
|
17
|
-
|
18
|
-
const testId = 'bargraph1';
|
19
|
-
|
20
|
-
test('bargraph uses exact classname', () => {
|
21
|
-
render(
|
22
|
-
<BarGraph
|
23
|
-
className='super_important_class'
|
24
|
-
data={{ testid: testId }}
|
25
|
-
id='bar-default'
|
26
|
-
/>
|
27
|
-
);
|
28
|
-
|
29
|
-
const kit = screen.getByTestId(testId);
|
30
|
-
expect(kit).toHaveClass('super_important_class');
|
31
|
-
});
|
@@ -1,45 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { render, screen } from '../utilities/test-utils';
|
3
|
-
import CircleChart from './_circle_chart';
|
4
|
-
|
5
|
-
beforeEach(() => {
|
6
|
-
// Silences error logs within the test suite.
|
7
|
-
jest.spyOn(console, 'error');
|
8
|
-
jest.spyOn(console, 'warn');
|
9
|
-
console.error.mockImplementation(() => {});
|
10
|
-
console.warn.mockImplementation(() => {});
|
11
|
-
});
|
12
|
-
|
13
|
-
afterEach(() => {
|
14
|
-
console.error.mockRestore();
|
15
|
-
console.warn.mockRestore();
|
16
|
-
});
|
17
|
-
|
18
|
-
const testId = 'circlechart1';
|
19
|
-
|
20
|
-
test('uses exact classname', () => {
|
21
|
-
const data = [
|
22
|
-
{
|
23
|
-
name: 'Waiting for Calls',
|
24
|
-
value: 41,
|
25
|
-
},
|
26
|
-
{
|
27
|
-
name: 'On Call',
|
28
|
-
value: 49,
|
29
|
-
},
|
30
|
-
{
|
31
|
-
name: 'After call',
|
32
|
-
value: 10,
|
33
|
-
},
|
34
|
-
]
|
35
|
-
render(
|
36
|
-
<CircleChart
|
37
|
-
chartData={data}
|
38
|
-
data={{ testid: testId }}
|
39
|
-
id='circlechartid'
|
40
|
-
/>
|
41
|
-
);
|
42
|
-
|
43
|
-
const kit = screen.getByTestId(testId);
|
44
|
-
expect(kit).toHaveClass('pb_circle_chart');
|
45
|
-
});
|
@@ -1,53 +0,0 @@
|
|
1
|
-
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
2
|
-
|
3
|
-
exports[`html structure is correct 1`] = `
|
4
|
-
<div>
|
5
|
-
<div
|
6
|
-
class="pb_collapsible_kit additional_class"
|
7
|
-
data-testid="collapsible1"
|
8
|
-
>
|
9
|
-
<div
|
10
|
-
class="pb_collapsible_main_kit cursor_pointer"
|
11
|
-
>
|
12
|
-
<div>
|
13
|
-
<div
|
14
|
-
class="pb_flex_kit_orientation_row_justify_content_left_align_items_center_spacing_between"
|
15
|
-
>
|
16
|
-
<div
|
17
|
-
class="pb_flex_item_kit"
|
18
|
-
>
|
19
|
-
<div>
|
20
|
-
Main Section
|
21
|
-
</div>
|
22
|
-
</div>
|
23
|
-
<div
|
24
|
-
class="pb_flex_item_kit"
|
25
|
-
>
|
26
|
-
<div
|
27
|
-
class="icon_wrapper"
|
28
|
-
style="vertical-align: middle; color: rgb(193, 205, 214);"
|
29
|
-
>
|
30
|
-
<i
|
31
|
-
class="pb_icon_kit far fa-fw fa-lg fa-chevron-down"
|
32
|
-
/>
|
33
|
-
<span
|
34
|
-
aria-label="chevron-down icon"
|
35
|
-
hidden=""
|
36
|
-
/>
|
37
|
-
</div>
|
38
|
-
</div>
|
39
|
-
</div>
|
40
|
-
</div>
|
41
|
-
</div>
|
42
|
-
<div
|
43
|
-
class="pb_collapsible_content_kit toggle-content"
|
44
|
-
data-collapsible-content="true"
|
45
|
-
style="height: 0px;"
|
46
|
-
>
|
47
|
-
<div>
|
48
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.
|
49
|
-
</div>
|
50
|
-
</div>
|
51
|
-
</div>
|
52
|
-
</div>
|
53
|
-
`;
|
@@ -1,53 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import classnames from "classnames";
|
3
|
-
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
|
4
|
-
import { globalProps } from "../utilities/globalProps";
|
5
|
-
import DraggableContainer from "./subcomponents/DraggableContainer";
|
6
|
-
import DraggableItem from "./subcomponents/DraggableItem";
|
7
|
-
|
8
|
-
type DraggableProps = {
|
9
|
-
aria?: { [key: string]: string };
|
10
|
-
className?: string;
|
11
|
-
children?: React.ReactNode;
|
12
|
-
data?: { [key: string]: string };
|
13
|
-
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
14
|
-
id?: string;
|
15
|
-
};
|
16
|
-
|
17
|
-
const Draggable = (props: DraggableProps) => {
|
18
|
-
const {
|
19
|
-
aria = {},
|
20
|
-
className,
|
21
|
-
children,
|
22
|
-
data = {},
|
23
|
-
htmlOptions = {},
|
24
|
-
id,
|
25
|
-
} = props;
|
26
|
-
|
27
|
-
|
28
|
-
const ariaProps = buildAriaProps(aria);
|
29
|
-
const dataProps = buildDataProps(data);
|
30
|
-
const htmlProps = buildHtmlProps(htmlOptions);
|
31
|
-
|
32
|
-
const classes = classnames(
|
33
|
-
buildCss("pb_draggable"),
|
34
|
-
globalProps(props),
|
35
|
-
className
|
36
|
-
);
|
37
|
-
|
38
|
-
return (
|
39
|
-
<div {...ariaProps}
|
40
|
-
{...dataProps}
|
41
|
-
{...htmlProps}
|
42
|
-
className={classes}
|
43
|
-
id={id}
|
44
|
-
>
|
45
|
-
{children}
|
46
|
-
</div>
|
47
|
-
);
|
48
|
-
};
|
49
|
-
|
50
|
-
Draggable.Container = DraggableContainer;
|
51
|
-
Draggable.Item = DraggableItem;
|
52
|
-
|
53
|
-
export default Draggable;
|
@@ -1,92 +0,0 @@
|
|
1
|
-
import React, { createContext, useState, useContext, useEffect } from "react";
|
2
|
-
|
3
|
-
const DragContext = createContext<any>({});
|
4
|
-
|
5
|
-
export const DraggableContext = () => {
|
6
|
-
return useContext(DragContext);
|
7
|
-
};
|
8
|
-
|
9
|
-
export const DraggableProvider = ({ children, initialItems, onChange }: any) => {
|
10
|
-
const [items, setItems] = useState([]);
|
11
|
-
const [dragData, setDragData] = useState<{ [key: string]: any }>({});
|
12
|
-
const [isDragging, setIsDragging] = useState("");
|
13
|
-
const [activeContainer, setActiveContainer] = useState("");
|
14
|
-
|
15
|
-
useEffect(() => {
|
16
|
-
setItems(initialItems);
|
17
|
-
}, [initialItems]);
|
18
|
-
|
19
|
-
useEffect(() => {
|
20
|
-
onChange(items);
|
21
|
-
}, [items]);
|
22
|
-
|
23
|
-
const handleDragStart = (id: string, container: string) => {
|
24
|
-
setDragData({ id: id, initialGroup: container });
|
25
|
-
setIsDragging(id);
|
26
|
-
};
|
27
|
-
|
28
|
-
const handleDragEnter = (id: string, container: string) => {
|
29
|
-
if (dragData?.id !== id) {
|
30
|
-
const newItems = [...items];
|
31
|
-
const draggedItem = newItems.find((item) => item.id === dragData.id);
|
32
|
-
const draggedIndex = newItems.indexOf(draggedItem);
|
33
|
-
const targetIndex = newItems.findIndex((item) => item.id === id);
|
34
|
-
|
35
|
-
newItems.splice(draggedIndex, 1);
|
36
|
-
newItems.splice(targetIndex, 0, draggedItem);
|
37
|
-
|
38
|
-
setItems(newItems);
|
39
|
-
setDragData({ id: dragData.id, initialGroup: container });
|
40
|
-
}
|
41
|
-
};
|
42
|
-
|
43
|
-
const handleDragEnd = () => {
|
44
|
-
setIsDragging("");
|
45
|
-
setActiveContainer("");
|
46
|
-
};
|
47
|
-
|
48
|
-
const changeCategory = (itemId: string, container: string) => {
|
49
|
-
const updatedItems = items.map((item) => {
|
50
|
-
if (item.id === itemId) {
|
51
|
-
return { ...item, container: container };
|
52
|
-
}
|
53
|
-
return item;
|
54
|
-
});
|
55
|
-
|
56
|
-
setItems(updatedItems);
|
57
|
-
};
|
58
|
-
|
59
|
-
const handleDrop = (container: string) => {
|
60
|
-
setIsDragging("");
|
61
|
-
setActiveContainer("");
|
62
|
-
const selected = dragData.id;
|
63
|
-
changeCategory(selected, container);
|
64
|
-
};
|
65
|
-
|
66
|
-
const handleDragOver = (e: Event, container: string) => {
|
67
|
-
e.preventDefault();
|
68
|
-
setActiveContainer(container);
|
69
|
-
};
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
const contextValue = {
|
74
|
-
items,
|
75
|
-
setItems,
|
76
|
-
dragData,
|
77
|
-
setDragData,
|
78
|
-
isDragging,
|
79
|
-
setIsDragging,
|
80
|
-
activeContainer,
|
81
|
-
setActiveContainer,
|
82
|
-
handleDragStart,
|
83
|
-
handleDragEnter,
|
84
|
-
handleDragEnd,
|
85
|
-
handleDrop,
|
86
|
-
handleDragOver,
|
87
|
-
};
|
88
|
-
|
89
|
-
return (
|
90
|
-
<DragContext.Provider value={contextValue}>{children}</DragContext.Provider>
|
91
|
-
);
|
92
|
-
};
|
@@ -1,53 +0,0 @@
|
|
1
|
-
import React, { useState } from "react";
|
2
|
-
import { SelectableList, Draggable, DraggableProvider } from "../../";
|
3
|
-
|
4
|
-
// Initial items to be dragged
|
5
|
-
const data = [
|
6
|
-
{
|
7
|
-
id: "1",
|
8
|
-
text: "Task 1",
|
9
|
-
},
|
10
|
-
{
|
11
|
-
id: "2",
|
12
|
-
text: "Task 2",
|
13
|
-
},
|
14
|
-
{
|
15
|
-
id: "3",
|
16
|
-
text: "Task 3",
|
17
|
-
},
|
18
|
-
{
|
19
|
-
id: "4",
|
20
|
-
text: "Task 4",
|
21
|
-
},
|
22
|
-
];
|
23
|
-
|
24
|
-
const DraggableDefault = (props) => {
|
25
|
-
const [initialState, setInitialState] = useState(data);
|
26
|
-
|
27
|
-
return (
|
28
|
-
<DraggableProvider initialItems={data}
|
29
|
-
onChange={(items) => setInitialState(items)}
|
30
|
-
>
|
31
|
-
<Draggable
|
32
|
-
{...props}
|
33
|
-
>
|
34
|
-
<Draggable.Container>
|
35
|
-
<SelectableList variant="checkbox">
|
36
|
-
{initialState.map(({ id, text }) => (
|
37
|
-
<Draggable.Item id={id}
|
38
|
-
key={id}
|
39
|
-
>
|
40
|
-
<SelectableList.Item label={text}
|
41
|
-
name={id}
|
42
|
-
value={id}
|
43
|
-
/>
|
44
|
-
</Draggable.Item>
|
45
|
-
))}
|
46
|
-
</SelectableList>
|
47
|
-
</Draggable.Container>
|
48
|
-
</Draggable>
|
49
|
-
</DraggableProvider>
|
50
|
-
);
|
51
|
-
};
|
52
|
-
|
53
|
-
export default DraggableDefault;
|
@@ -1,159 +0,0 @@
|
|
1
|
-
import React, { useState } from "react";
|
2
|
-
import {
|
3
|
-
Flex,
|
4
|
-
Caption,
|
5
|
-
Card,
|
6
|
-
FlexItem,
|
7
|
-
Badge,
|
8
|
-
Avatar,
|
9
|
-
Title,
|
10
|
-
Body,
|
11
|
-
Draggable,
|
12
|
-
DraggableProvider,
|
13
|
-
} from "../../";
|
14
|
-
|
15
|
-
// Initial groups to drag between
|
16
|
-
const containers = ["To Do", "In Progress", "Done"];
|
17
|
-
|
18
|
-
// Initial items to be dragged
|
19
|
-
const data = [
|
20
|
-
{
|
21
|
-
id: "1",
|
22
|
-
container: "To Do",
|
23
|
-
title: "Task 1",
|
24
|
-
description: "Bug fixes",
|
25
|
-
assignee_name: "Terry Miles",
|
26
|
-
assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
|
27
|
-
},
|
28
|
-
{
|
29
|
-
id: "2",
|
30
|
-
container: "To Do",
|
31
|
-
title: "Task 2",
|
32
|
-
description: "Documentation",
|
33
|
-
assignee_name: "Sophia Miles",
|
34
|
-
assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
|
35
|
-
},
|
36
|
-
{
|
37
|
-
id: "3",
|
38
|
-
container: "In Progress",
|
39
|
-
title: "Task 3",
|
40
|
-
description: "Add a variant",
|
41
|
-
assignee_name: "Alice Jones",
|
42
|
-
assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
|
43
|
-
},
|
44
|
-
{
|
45
|
-
id: "4",
|
46
|
-
container: "To Do",
|
47
|
-
title: "Task 4",
|
48
|
-
description: "Add jest tests",
|
49
|
-
assignee_name: "Mike James",
|
50
|
-
assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
|
51
|
-
},
|
52
|
-
{
|
53
|
-
id: "5",
|
54
|
-
container: "Done",
|
55
|
-
title: "Task 5",
|
56
|
-
description: "Alpha testing",
|
57
|
-
assignee_name: "James Guy",
|
58
|
-
assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
|
59
|
-
},
|
60
|
-
{
|
61
|
-
id: "6",
|
62
|
-
container: "In Progress",
|
63
|
-
title: "Task 6",
|
64
|
-
description: "Release",
|
65
|
-
assignee_name: "Sally Jones",
|
66
|
-
assignee_img: "https://randomuser.me/api/portraits/women/28.jpg",
|
67
|
-
},
|
68
|
-
];
|
69
|
-
|
70
|
-
const DraggableMultipleContainer = (props) => {
|
71
|
-
const [initialState, setInitialState] = useState(data);
|
72
|
-
|
73
|
-
const badgeProperties = (container) => {
|
74
|
-
switch (container) {
|
75
|
-
case "To Do":
|
76
|
-
return { text: "queue", color: "warning" };
|
77
|
-
case "In Progress":
|
78
|
-
return { text: "progress", color: "primary" };
|
79
|
-
default:
|
80
|
-
return { text: "done", color: "success" };
|
81
|
-
}
|
82
|
-
};
|
83
|
-
|
84
|
-
return (
|
85
|
-
<DraggableProvider initialItems={data}
|
86
|
-
onChange={(items) => setInitialState(items)}
|
87
|
-
>
|
88
|
-
<Draggable
|
89
|
-
display="flex"
|
90
|
-
justifyContent="center"
|
91
|
-
{...props}
|
92
|
-
>
|
93
|
-
{containers?.map((container) => (
|
94
|
-
<Draggable.Container
|
95
|
-
container={container}
|
96
|
-
key={container}
|
97
|
-
padding="sm"
|
98
|
-
>
|
99
|
-
<Caption textAlign="center">{container}</Caption>
|
100
|
-
<Flex
|
101
|
-
alignItems="stretch"
|
102
|
-
orientation="column"
|
103
|
-
>
|
104
|
-
{initialState
|
105
|
-
.filter((item) => item.container === container)
|
106
|
-
.map(
|
107
|
-
({
|
108
|
-
assignee_img,
|
109
|
-
assignee_name,
|
110
|
-
description,
|
111
|
-
id,
|
112
|
-
title,
|
113
|
-
}) => (
|
114
|
-
<Draggable.Item
|
115
|
-
container={container}
|
116
|
-
id={id}
|
117
|
-
key={id}
|
118
|
-
>
|
119
|
-
<Card
|
120
|
-
marginBottom="sm"
|
121
|
-
padding="sm"
|
122
|
-
>
|
123
|
-
<Flex justify="between">
|
124
|
-
<FlexItem>
|
125
|
-
<Flex>
|
126
|
-
<Avatar
|
127
|
-
imageUrl={assignee_img}
|
128
|
-
name={assignee_name}
|
129
|
-
size="xxs"
|
130
|
-
/>
|
131
|
-
<Title paddingLeft="xs"
|
132
|
-
size={4}
|
133
|
-
text={title}
|
134
|
-
/>
|
135
|
-
</Flex>
|
136
|
-
</FlexItem>
|
137
|
-
<Badge
|
138
|
-
marginLeft="sm"
|
139
|
-
rounded
|
140
|
-
text={badgeProperties(container).text}
|
141
|
-
variant={badgeProperties(container).color}
|
142
|
-
/>
|
143
|
-
</Flex>
|
144
|
-
<Body paddingTop="xs"
|
145
|
-
text={description}
|
146
|
-
/>
|
147
|
-
</Card>
|
148
|
-
</Draggable.Item>
|
149
|
-
)
|
150
|
-
)}
|
151
|
-
</Flex>
|
152
|
-
</Draggable.Container>
|
153
|
-
))}
|
154
|
-
</Draggable>
|
155
|
-
</DraggableProvider>
|
156
|
-
);
|
157
|
-
};
|
158
|
-
|
159
|
-
export default DraggableMultipleContainer;
|