playbook_ui 13.28.0.pre.alpha.PBNTR296dropdownwithform2941 → 13.28.0.pre.alpha.PBNTR297gradientoverlay3029

Sign up to get free protection for your applications and to get access to all the features.
Files changed (106) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +3 -3
  3. data/app/pb_kits/playbook/index.js +3 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +2 -2
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb +40 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.md +3 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md +1 -1
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -1
  9. data/app/pb_kits/playbook/pb_advanced_table/table_body.html.erb +1 -1
  10. data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +14 -4
  11. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +10 -2
  12. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +1 -1
  13. data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +2 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb +34 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb +31 -0
  16. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +4 -1
  17. data/app/pb_kits/playbook/pb_bar_graph/barGraph.test.js +31 -0
  18. data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +16 -0
  19. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +2 -1
  20. data/app/pb_kits/playbook/pb_bar_graph/docs/{_bar_graph_custom.html.erb → _bar_graph_custom_rails.html.erb} +3 -3
  21. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.md +2 -0
  22. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -1
  23. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +2 -1
  24. data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +1 -2
  25. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +9 -3
  26. data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js +45 -0
  27. data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +22 -1
  28. data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap +53 -0
  29. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +14 -8
  30. data/app/pb_kits/playbook/pb_collapsible/collapsible.test.js +24 -0
  31. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +7 -1
  32. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +9 -1
  33. data/app/pb_kits/playbook/pb_draggable/_draggable.scss +10 -0
  34. data/app/pb_kits/playbook/pb_draggable/_draggable.tsx +53 -0
  35. data/app/pb_kits/playbook/pb_draggable/context/index.tsx +92 -0
  36. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx +53 -0
  37. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx +159 -0
  38. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx +121 -0
  39. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +9 -0
  40. data/app/pb_kits/playbook/pb_draggable/docs/index.js +3 -0
  41. data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +65 -0
  42. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +54 -0
  43. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx +57 -0
  44. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +2 -2
  45. data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +4 -1
  46. data/app/pb_kits/playbook/pb_gauge/gauge.rb +6 -1
  47. data/app/pb_kits/playbook/pb_gauge/gauge.test.js +35 -0
  48. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +8 -2
  49. data/app/pb_kits/playbook/pb_line_graph/lineGraph.test.js +52 -0
  50. data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +22 -1
  51. data/app/pb_kits/playbook/pb_overlay/_overlay.scss +12 -0
  52. data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +93 -0
  53. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.jsx +40 -0
  54. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +7 -0
  55. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx +36 -0
  56. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.md +5 -0
  57. data/app/pb_kits/playbook/pb_overlay/docs/example.yml +4 -0
  58. data/app/pb_kits/playbook/pb_overlay/docs/index.js +2 -0
  59. data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx +66 -0
  60. data/app/pb_kits/playbook/pb_pill/docs/_description.md +1 -1
  61. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +1 -0
  62. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx +30 -32
  63. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +0 -2
  64. data/app/pb_kits/playbook/pb_table/_table.tsx +5 -0
  65. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.jsx +33 -32
  66. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.md +1 -1
  67. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.md +2 -0
  68. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx +33 -33
  69. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.md +1 -1
  70. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.html.erb +34 -0
  71. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.md +2 -0
  72. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx +51 -50
  73. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.md +1 -1
  74. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.html.erb +54 -0
  75. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.md +2 -0
  76. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx +37 -38
  77. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.md +1 -0
  78. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.html.erb +53 -0
  79. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.md +1 -0
  80. data/app/pb_kits/playbook/pb_table/docs/{_table_alignment_row.html.erb → _table_outer_padding.html.erb} +7 -7
  81. data/app/pb_kits/playbook/pb_table/docs/_table_outer_padding.jsx +76 -0
  82. data/app/pb_kits/playbook/pb_table/docs/_table_outer_padding.md +1 -0
  83. data/app/pb_kits/playbook/pb_table/docs/example.yml +9 -9
  84. data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
  85. data/app/pb_kits/playbook/pb_table/styles/_all.scss +1 -0
  86. data/app/pb_kits/playbook/pb_table/styles/_outer_padding.scss +21 -0
  87. data/app/pb_kits/playbook/pb_table/table.rb +14 -1
  88. data/app/pb_kits/playbook/pb_table/table.test.js +5 -1
  89. data/app/pb_kits/playbook/pb_tooltip/index.js +1 -0
  90. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +12 -9
  91. data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js +61 -0
  92. data/app/pb_kits/playbook/pb_treemap_chart/treemap_chart.rb +6 -1
  93. data/app/pb_kits/playbook/playbook-doc.js +4 -0
  94. data/app/pb_kits/playbook/tokens/_vertical_align.scss +18 -0
  95. data/app/pb_kits/playbook/utilities/_vertical_align.scss +16 -0
  96. data/app/pb_kits/playbook/utilities/globalProps.ts +12 -1
  97. data/dist/menu.yml +7 -2
  98. data/dist/playbook-rails.js +6 -6
  99. data/lib/playbook/classnames.rb +1 -0
  100. data/lib/playbook/kit_base.rb +2 -0
  101. data/lib/playbook/version.rb +1 -1
  102. data/lib/playbook/vertical_align.rb +37 -0
  103. metadata +50 -7
  104. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb +0 -63
  105. data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb +0 -52
  106. /data/app/pb_kits/playbook/pb_table/docs/{_table_alignment_column.html.erb → _table_alignment_column_rails.html.erb} +0 -0
@@ -1,4 +1,4 @@
1
- import React, { useEffect } from 'react'
1
+ import React, { useEffect, ReactElement } from 'react'
2
2
  import classnames from 'classnames'
3
3
  import useCollapsible from './useCollapsible'
4
4
 
@@ -11,9 +11,16 @@ import CollapsibleContext from './context'
11
11
  import { IconSizes } from "../pb_icon/_icon"
12
12
  import CollapsibleIcon from './child_kits/CollapsibleIcon'
13
13
 
14
+ type CollapsibleMainProps = {
15
+ children: React.ReactNode
16
+ }
17
+
18
+ type CollapsibleContentProps = {
19
+ children: React.ReactNode
20
+ }
14
21
 
15
22
  type CollapsibleProps = {
16
- children?: React.ReactElement | [] | any,
23
+ children?: [ReactElement<CollapsibleMainProps>, ReactElement<CollapsibleContentProps>],
17
24
  aria?: {[key: string]: string},
18
25
  className?: string,
19
26
  collapsed?: boolean,
@@ -30,7 +37,7 @@ type CollapsibleProps = {
30
37
  const Collapsible = ({
31
38
  aria = {},
32
39
  className,
33
- children = [],
40
+ children,
34
41
  collapsed = true,
35
42
  data = {},
36
43
  htmlOptions = {},
@@ -48,13 +55,12 @@ const Collapsible = ({
48
55
  setIsCollapsed(collapsed)
49
56
  },[collapsed])
50
57
 
51
- const CollapsibleParent = React.Children.toArray(children) as React.ReactElement[]
52
-
53
- if (CollapsibleParent.length !== 2) {
58
+ if (children.length !== 2) {
54
59
  throw new Error('Collapsible requires <CollapsibleMain> and <CollapsibleContent> to function properly.')
55
60
  }
56
- const FirstChild = CollapsibleParent[0]
57
- const SecondChild = CollapsibleParent[1]
61
+
62
+ const FirstChild = children[0]
63
+ const SecondChild = children[1]
58
64
 
59
65
  const Main = FirstChild.type === CollapsibleMain ? FirstChild : null
60
66
  const Content = SecondChild.type === CollapsibleContent ? SecondChild : null
@@ -48,3 +48,27 @@ test('returns namespaced additional_class class name', () => {
48
48
  const kit = screen.getByTestId(testId)
49
49
  expect(kit).toHaveClass(`${kitClass} additional_class`)
50
50
  })
51
+
52
+ test('html structure is correct', () => {
53
+ const { container } = render(
54
+ <Collapsible
55
+ className="additional_class"
56
+ data={{ testid: testId }}
57
+ iconColor='lighter'
58
+ iconSize="lg"
59
+ >
60
+ <Collapsible.Main>
61
+ <div>{'Main Section'}</div>
62
+ </Collapsible.Main>
63
+ <Collapsible.Content>
64
+ <div>
65
+ {
66
+ '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.'
67
+ }
68
+ </div>
69
+ </Collapsible.Content>
70
+ </Collapsible>
71
+ )
72
+
73
+ expect(container).toMatchSnapshot()
74
+ })
@@ -3,6 +3,12 @@ import typography from '../tokens/exports/_typography.scss'
3
3
 
4
4
  import { ThemeProps } from './themeTypes'
5
5
 
6
+ interface CustomTreemapOptions extends Highcharts.SeriesTreemapOptions {
7
+ traverseUpButton?: {
8
+ position: { y: number };
9
+ };
10
+ }
11
+
6
12
  const highchartsDarkTheme: ThemeProps = {
7
13
  lang: {
8
14
  thousandsSep: ',',
@@ -200,7 +206,7 @@ const highchartsDarkTheme: ThemeProps = {
200
206
  traverseUpButton: {
201
207
  position: { y: -50 },
202
208
  },
203
- },
209
+ } as CustomTreemapOptions,
204
210
  },
205
211
  credits: {
206
212
  enabled: false
@@ -3,6 +3,13 @@ import typography from '../tokens/exports/_typography.scss'
3
3
 
4
4
  import { ThemeProps } from './themeTypes'
5
5
 
6
+ interface CustomTreemapOptions extends Highcharts.SeriesTreemapOptions {
7
+ traverseUpButton?: {
8
+ position: { y: number };
9
+ };
10
+ }
11
+
12
+
6
13
  const highchartsTheme: ThemeProps = {
7
14
  lang: {
8
15
  thousandsSep: ',',
@@ -150,6 +157,7 @@ const highchartsTheme: ThemeProps = {
150
157
  fontSize: typography.text_smaller,
151
158
  color: colors.text_lt_light,
152
159
  fontWeight: typography.regular,
160
+ textOutline: '2px $white',
153
161
  },
154
162
  },
155
163
  },
@@ -198,7 +206,7 @@ const highchartsTheme: ThemeProps = {
198
206
  traverseUpButton: {
199
207
  position: { y: -50 },
200
208
  },
201
- },
209
+ } as CustomTreemapOptions,
202
210
  },
203
211
  credits: {
204
212
  enabled: false
@@ -0,0 +1,10 @@
1
+ @import "../tokens/colors";
2
+
3
+ .pb_draggable {
4
+ .is_dragging {
5
+ opacity: 40%;
6
+ }
7
+ .active {
8
+ opacity: 60%;
9
+ }
10
+ }
@@ -0,0 +1,53 @@
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;
@@ -0,0 +1,92 @@
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
+ };
@@ -0,0 +1,53 @@
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;
@@ -0,0 +1,159 @@
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;
@@ -0,0 +1,121 @@
1
+ import React, { useState } from "react";
2
+ import {
3
+ Flex,
4
+ Badge,
5
+ Title,
6
+ Icon,
7
+ Draggable,
8
+ DraggableProvider,
9
+ Card,
10
+ Caption,
11
+ } from "../../";
12
+
13
+ // Initial items to be dragged
14
+ const data = [
15
+ {
16
+ id: "1",
17
+ text: "Joe Black",
18
+ },
19
+ {
20
+ id: "2",
21
+ text: "Nancy White",
22
+ },
23
+ {
24
+ id: "3",
25
+ text: "Bill Green",
26
+ },
27
+ ];
28
+
29
+ const DraggableWithCards = (props) => {
30
+ const [initialState, setInitialState] = useState(data);
31
+
32
+ return (
33
+ <DraggableProvider
34
+ initialItems={data}
35
+ onChange={(items) => setInitialState(items)}
36
+ >
37
+ <Draggable {...props}>
38
+ <Draggable.Container>
39
+ {initialState.map(({ id, text }) => (
40
+ <Draggable.Item id={id}
41
+ key={id}
42
+ >
43
+ <Card
44
+ highlight={{ position: "side", color: "primary" }}
45
+ marginBottom="xs"
46
+ >
47
+ <Flex alignItems="stretch"
48
+ flexDirection="column"
49
+ >
50
+ <Flex gap="xs">
51
+ <Title size={4}
52
+ text={text}
53
+ />
54
+ <Badge
55
+ text="35-12345"
56
+ variant="primary"
57
+ />
58
+ </Flex>
59
+
60
+ <Flex
61
+ gap="sm"
62
+ spacing="between"
63
+ >
64
+ <Caption
65
+ size="xs"
66
+ text="8:00A"
67
+ />
68
+ <Flex gap="xxs">
69
+ <Caption
70
+ size="xs"
71
+ text="Township Name"
72
+ />
73
+ <Caption size="xs"
74
+ text="•"
75
+ />
76
+ <Caption size="xs"
77
+ text="90210"
78
+ />
79
+ </Flex>
80
+ </Flex>
81
+
82
+ <Flex gap="xxs"
83
+ spacing="between"
84
+ >
85
+ <Flex gap="xxs">
86
+ <Caption color="error"
87
+ size="xs"
88
+ >
89
+ <Icon icon="house-circle-exclamation" />
90
+ </Caption>
91
+ <Caption color="success"
92
+ size="xs">
93
+ <Icon icon="file-circle-check" />
94
+ </Caption>
95
+ </Flex>
96
+ <Flex>
97
+ <Badge rounded
98
+ text="Schedule QA"
99
+ variant="warning"
100
+ />
101
+ <Badge rounded
102
+ text="Flex"
103
+ variant="primary"
104
+ />
105
+ <Badge rounded
106
+ text="R99"
107
+ variant="primary"
108
+ />
109
+ </Flex>
110
+ </Flex>
111
+ </Flex>
112
+ </Card>
113
+ </Draggable.Item>
114
+ ))}
115
+ </Draggable.Container>
116
+ </Draggable>
117
+ </DraggableProvider>
118
+ );
119
+ };
120
+
121
+ export default DraggableWithCards;
@@ -0,0 +1,9 @@
1
+ examples:
2
+
3
+
4
+ react:
5
+ - draggable_default: Default
6
+ - draggable_with_cards: Draggable with Cards
7
+ - draggable_multiple_containers: Dragging Across Multiple Containers
8
+
9
+
@@ -0,0 +1,3 @@
1
+ export { default as DraggableDefault } from './_draggable_default.jsx'
2
+ export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
3
+ export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'