playbook_ui 14.13.0.pre.alpha.play1884progresspill6064 → 14.13.0.pre.alpha.play1900progresspillwidth6122
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +3 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb +2 -2
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md +4 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx +90 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +7 -4
- data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx +6 -3
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +1 -6
- data/app/pb_kits/playbook/pb_nav/item.html.erb +7 -19
- data/app/pb_kits/playbook/pb_nav/nav.html.erb +3 -8
- data/app/pb_kits/playbook/pb_online_status/online_status.html.erb +1 -6
- data/app/pb_kits/playbook/pb_popover/popover.html.erb +1 -6
- data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss +4 -0
- data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx +7 -5
- data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.html.erb +1 -0
- data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.jsx +18 -0
- data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_rails.md +1 -0
- data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_react.md +1 -0
- data/app/pb_kits/playbook/pb_progress_pills/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_progress_pills/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb +1 -1
- data/app/pb_kits/playbook/pb_progress_pills/progress_pills.rb +6 -0
- data/app/pb_kits/playbook/pb_progress_pills/progress_pills.test.js +26 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb +96 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx +101 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_table/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx +29 -2
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +31 -3
- data/app/pb_kits/playbook/pb_table/table_body.html.erb +13 -7
- data/app/pb_kits/playbook/pb_table/table_body.rb +2 -0
- data/app/pb_kits/playbook/pb_table/table_row.html.erb +13 -7
- data/app/pb_kits/playbook/pb_table/table_row.rb +4 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb +14 -0
- data/app/pb_kits/playbook/pb_text_input/index.js +9 -0
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +5 -2
- data/dist/chunks/{_typeahead-btjo1UN5.js → _typeahead-C_q1qAtC.js} +4 -4
- data/dist/chunks/_weekday_stacked-CB-T-41Z.js +45 -0
- data/dist/chunks/{lib-DjpLC8uO.js → lib-WQEeEj3t.js} +1 -1
- data/dist/chunks/{pb_form_validation-S56UaHZl.js → pb_form_validation-Cq64l4zn.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +15 -6
- data/dist/chunks/_weekday_stacked-TIh9nTmZ.js +0 -45
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: a02907e0ddf056d53adf2ff51c95d9a4f6ac497ba12c70c81edb1432dfcd148a
|
4
|
+
data.tar.gz: 4e5c6cf857e84be3a940be3db3fc843270f9262d1da4ec37639d0faa59957881
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 8fce9df686f16eaa94f41618dfa227130a3cb7fb0edaa13175f282229de0ef54ceb54ee5a9ca1a02658839d0646c031729d13585921c2b67f530b277e9b211be
|
7
|
+
data.tar.gz: 1284d4254039885bc88c61d6ff1509378ab5b09fc508f1cea2eb40e5727a9e4a4931cedc7f286004b102978a380a3507f727d25521902124c6858b2a46173a43
|
@@ -29,6 +29,7 @@ type DatePickerProps = {
|
|
29
29
|
hideLabel?: boolean,
|
30
30
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
31
31
|
id?: string,
|
32
|
+
initializeOnce?: boolean,
|
32
33
|
inLine?: boolean,
|
33
34
|
inputAria?: { [key: string]: string },
|
34
35
|
inputData?: { [key: string]: string },
|
@@ -73,6 +74,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
73
74
|
hideLabel = false,
|
74
75
|
htmlOptions = {},
|
75
76
|
id,
|
77
|
+
initializeOnce = false,
|
76
78
|
inLine = false,
|
77
79
|
inputAria = {},
|
78
80
|
inputData = {},
|
@@ -134,7 +136,7 @@ useEffect(() => {
|
|
134
136
|
yearRange,
|
135
137
|
required: false,
|
136
138
|
}, scrollContainer)
|
137
|
-
})
|
139
|
+
}, initializeOnce ? [] : undefined)
|
138
140
|
const filteredProps = {...props}
|
139
141
|
if (filteredProps.marginBottom === undefined) {
|
140
142
|
filteredProps.marginBottom = "sm"
|
@@ -43,9 +43,9 @@
|
|
43
43
|
<% end %>
|
44
44
|
<% end %>
|
45
45
|
|
46
|
-
<%= pb_rails("
|
46
|
+
<%= pb_rails("table/table_body", props: {draggable_container: true}) do %>
|
47
47
|
<% initial_items.each do |item| %>
|
48
|
-
<%= pb_rails("
|
48
|
+
<%= pb_rails("table/table_row", props:{drag_id: item[:id], draggable_item: true}) do %>
|
49
49
|
<%= pb_rails("table/table_cell", props: { text: item[:id]}) %>
|
50
50
|
<%= pb_rails("table/table_cell") do %>
|
51
51
|
<%= pb_rails("flex", props:{align:"center"}) do %>
|
@@ -1 +1,4 @@
|
|
1
|
-
The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this
|
1
|
+
The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this:
|
2
|
+
|
3
|
+
- use the `draggable_container` prop on the table/table_body to designate it as the Draggable Container
|
4
|
+
- use the `draggable_item` prop on the table/table_row to designate it as the Draggable Item. Make sure to also pass id to the `drag_id` prop here.
|
@@ -0,0 +1,90 @@
|
|
1
|
+
import React, { useState } from "react";
|
2
|
+
import { Flex, Table, Body, Avatar, DraggableProvider } from "playbook-ui";
|
3
|
+
|
4
|
+
// Initial items to be dragged
|
5
|
+
const data = [
|
6
|
+
{
|
7
|
+
id: "1",
|
8
|
+
task: "Task 1",
|
9
|
+
assignee_name: "Terry Miles",
|
10
|
+
assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
|
11
|
+
},
|
12
|
+
{
|
13
|
+
id: "2",
|
14
|
+
task: "Task 2",
|
15
|
+
assignee_name: "Sophia Miles",
|
16
|
+
assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
|
17
|
+
},
|
18
|
+
{
|
19
|
+
id: "3",
|
20
|
+
task: "Task 3",
|
21
|
+
assignee_name: "Alice Jones",
|
22
|
+
assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
|
23
|
+
},
|
24
|
+
{
|
25
|
+
id: "4",
|
26
|
+
task: "Task 4",
|
27
|
+
assignee_name: "Mike James",
|
28
|
+
assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
|
29
|
+
},
|
30
|
+
{
|
31
|
+
id: "5",
|
32
|
+
task: "Task 5",
|
33
|
+
assignee_name: "James Guy",
|
34
|
+
assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
|
35
|
+
}
|
36
|
+
];
|
37
|
+
|
38
|
+
const DraggableWithTableReact = (props) => {
|
39
|
+
const [initialState, setInitialState] = useState(data);
|
40
|
+
|
41
|
+
return (
|
42
|
+
<>
|
43
|
+
<DraggableProvider initialItems={data}
|
44
|
+
onReorder={(items) => setInitialState(items)}
|
45
|
+
>
|
46
|
+
<Table
|
47
|
+
responsive="none"
|
48
|
+
size="sm"
|
49
|
+
{...props}
|
50
|
+
>
|
51
|
+
<Table.Head>
|
52
|
+
<Table.Row>
|
53
|
+
<Table.Header>{"id"}</Table.Header>
|
54
|
+
<Table.Header>{"name"}</Table.Header>
|
55
|
+
<Table.Header>{"task number"}</Table.Header>
|
56
|
+
</Table.Row>
|
57
|
+
</Table.Head>
|
58
|
+
<Table.Body draggableContainer>
|
59
|
+
{initialState.map(({ id, task, assignee_name, assignee_img }) => (
|
60
|
+
<Table.Row
|
61
|
+
dragId={id}
|
62
|
+
draggableItem
|
63
|
+
key={id}
|
64
|
+
>
|
65
|
+
<Table.Cell>{id}</Table.Cell>
|
66
|
+
<Table.Cell>
|
67
|
+
<Flex align="center">
|
68
|
+
<Avatar
|
69
|
+
imageUrl={assignee_img}
|
70
|
+
size="xs"
|
71
|
+
/>
|
72
|
+
<Body
|
73
|
+
paddingLeft="xxs"
|
74
|
+
text={assignee_name}
|
75
|
+
{...props}
|
76
|
+
/>
|
77
|
+
</Flex>
|
78
|
+
</Table.Cell>
|
79
|
+
<Table.Cell>{task}</Table.Cell>
|
80
|
+
</Table.Row>
|
81
|
+
))}
|
82
|
+
</Table.Body>
|
83
|
+
</Table>
|
84
|
+
</DraggableProvider>
|
85
|
+
</>
|
86
|
+
|
87
|
+
);
|
88
|
+
};
|
89
|
+
|
90
|
+
export default DraggableWithTableReact;
|
@@ -0,0 +1,5 @@
|
|
1
|
+
The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this:
|
2
|
+
|
3
|
+
- Wrap the Table with the `DraggableProvider` and manage state as shown.
|
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.
|
@@ -4,7 +4,9 @@ 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_react: Draggable with Table
|
7
8
|
- draggable_multiple_containers: Dragging Across Multiple Containers
|
9
|
+
|
8
10
|
rails:
|
9
11
|
- draggable_default_rails: Default
|
10
12
|
- draggable_with_list_rails: Draggable with List Kit
|
@@ -2,4 +2,5 @@ export { default as DraggableDefault } from './_draggable_default.jsx'
|
|
2
2
|
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
|
-
export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
|
5
|
+
export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
|
6
|
+
export { default as DraggableWithTableReact } from './_draggable_with_table_react.jsx'
|
@@ -17,10 +17,11 @@ type DraggableContainerProps = {
|
|
17
17
|
data?: { [key: string]: string };
|
18
18
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
19
19
|
id?: string;
|
20
|
+
tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col' | 'tbody',
|
20
21
|
};
|
21
22
|
|
22
23
|
const DraggableContainer = (props: DraggableContainerProps) => {
|
23
|
-
const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id } = props;
|
24
|
+
const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id, tag="div" } = props;
|
24
25
|
|
25
26
|
const { handleDragOver, handleDrop, activeContainer } = DraggableContext();
|
26
27
|
|
@@ -28,6 +29,8 @@ const DraggableContainer = (props: DraggableContainerProps) => {
|
|
28
29
|
const dataProps = buildDataProps(data);
|
29
30
|
const htmlProps = buildHtmlProps(htmlOptions);
|
30
31
|
|
32
|
+
const Tag: React.ReactElement | any = `${tag}`;
|
33
|
+
|
31
34
|
const classes = classnames(
|
32
35
|
buildCss("pb_draggable_container"),
|
33
36
|
`${activeContainer === container ? "active" : ""}`,
|
@@ -36,18 +39,18 @@ const DraggableContainer = (props: DraggableContainerProps) => {
|
|
36
39
|
);
|
37
40
|
|
38
41
|
return (
|
39
|
-
<
|
42
|
+
<Tag
|
40
43
|
{...ariaProps}
|
41
44
|
{...dataProps}
|
42
45
|
{...htmlProps}
|
43
46
|
className={classes}
|
44
47
|
id={id}
|
45
48
|
key={container}
|
46
|
-
onDragOver={(e) => handleDragOver(e, container)}
|
49
|
+
onDragOver={(e: Event) => handleDragOver(e, container)}
|
47
50
|
onDrop={() => handleDrop(container)}
|
48
51
|
>
|
49
52
|
{children}
|
50
|
-
</
|
53
|
+
</Tag>
|
51
54
|
);
|
52
55
|
};
|
53
56
|
|
@@ -18,10 +18,11 @@ type DraggableItemProps = {
|
|
18
18
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
19
19
|
id?: string;
|
20
20
|
dragId?: string;
|
21
|
+
tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col' | 'tbody',
|
21
22
|
};
|
22
23
|
|
23
24
|
const DraggableItem = (props: DraggableItemProps) => {
|
24
|
-
const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id, dragId } = props;
|
25
|
+
const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id, dragId, tag="div" } = props;
|
25
26
|
|
26
27
|
const { isDragging, handleDragStart, handleDragEnter, handleDragEnd } =
|
27
28
|
DraggableContext();
|
@@ -30,6 +31,8 @@ const DraggableItem = (props: DraggableItemProps) => {
|
|
30
31
|
const dataProps = buildDataProps(data);
|
31
32
|
const htmlProps = buildHtmlProps(htmlOptions);
|
32
33
|
|
34
|
+
const Tag: React.ReactElement | any = `${tag}`;
|
35
|
+
|
33
36
|
const classes = classnames(
|
34
37
|
buildCss("pb_draggable_item"),
|
35
38
|
`${isDragging === dragId ? "is_dragging" : ""}`,
|
@@ -38,7 +41,7 @@ const DraggableItem = (props: DraggableItemProps) => {
|
|
38
41
|
);
|
39
42
|
|
40
43
|
return (
|
41
|
-
<
|
44
|
+
<Tag
|
42
45
|
{...ariaProps}
|
43
46
|
{...dataProps}
|
44
47
|
{...htmlProps}
|
@@ -51,7 +54,7 @@ const DraggableItem = (props: DraggableItemProps) => {
|
|
51
54
|
onDragStart={() => handleDragStart(dragId, container)}
|
52
55
|
>
|
53
56
|
{children}
|
54
|
-
</
|
57
|
+
</Tag>
|
55
58
|
);
|
56
59
|
};
|
57
60
|
|
@@ -1,15 +1,9 @@
|
|
1
1
|
<% if object.collapsible %>
|
2
2
|
<%= pb_rails("collapsible", props: { name: "collapsible-nav-example", classname: object.collapsible_nav_classname }) do %>
|
3
3
|
<%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark, classname:object.margin_classes }) do %>
|
4
|
-
<%=
|
5
|
-
|
6
|
-
|
7
|
-
data: object.data,
|
8
|
-
dark: object.dark,
|
9
|
-
id: object.id,
|
10
|
-
href: object.link && object.link,
|
11
|
-
target: object.link && object.target,
|
12
|
-
**combined_html_options
|
4
|
+
<%= pb_content_tag( object.tag,
|
5
|
+
href: object.link && object.link,
|
6
|
+
target: object.link && object.target
|
13
7
|
) do %>
|
14
8
|
<% if object.image_url %>
|
15
9
|
<%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
|
@@ -20,22 +14,16 @@
|
|
20
14
|
<span class="pb_nav_list_item_text_collapsible">
|
21
15
|
<%= object.text %>
|
22
16
|
</span>
|
23
|
-
<% end %>
|
17
|
+
<% end %>
|
24
18
|
<% end %>
|
25
19
|
<%= pb_rails("collapsible/collapsible_content", props: {collapsed: object.collapsed}) do %>
|
26
20
|
<%= content.presence %>
|
27
21
|
<% end %>
|
28
22
|
<% end %>
|
29
23
|
<% else %>
|
30
|
-
<%=
|
31
|
-
|
32
|
-
|
33
|
-
**combined_html_options,
|
34
|
-
data: object.data,
|
35
|
-
dark: object.dark,
|
36
|
-
id: object.id,
|
37
|
-
href: object.link && object.link,
|
38
|
-
target: object.link && object.target
|
24
|
+
<%= pb_content_tag( object.tag,
|
25
|
+
href: object.link && object.link,
|
26
|
+
target: object.link && object.target
|
39
27
|
) do %>
|
40
28
|
<% if object.image_url %>
|
41
29
|
<%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
|
@@ -1,12 +1,7 @@
|
|
1
|
-
<%=
|
2
|
-
aria: object.aria,
|
3
|
-
class: object.classname,
|
4
|
-
data: object.data,
|
5
|
-
id: object.id,
|
6
|
-
**combined_html_options) do %>
|
1
|
+
<%= pb_content_tag(:nav) do %>
|
7
2
|
<% if object.title %>
|
8
|
-
<%=
|
9
|
-
<%=
|
3
|
+
<%= pb_content_tag do %>
|
4
|
+
<%= pb_content_tag(:a) do %>
|
10
5
|
<%= pb_rails("caption", props: { text: object.title, dark: dark }) %>
|
11
6
|
<% end %>
|
12
7
|
<% end %>
|
@@ -1,9 +1,4 @@
|
|
1
|
-
<%=
|
2
|
-
aria: object.aria,
|
3
|
-
class: object.classname,
|
4
|
-
data: object.data,
|
5
|
-
id: object.id,
|
6
|
-
**combined_html_options) do %>
|
1
|
+
<%= pb_content_tag do %>
|
7
2
|
<div class="pb_popover_tooltip hide" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
|
8
3
|
<div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
|
9
4
|
<%= content.presence %>
|
@@ -13,6 +13,7 @@ type ProgressPillsProps = {
|
|
13
13
|
className?: string,
|
14
14
|
data?: { [key: string]: string },
|
15
15
|
dark?: boolean,
|
16
|
+
fullWidthPill?: boolean,
|
16
17
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
17
18
|
id?: string,
|
18
19
|
steps?: number,
|
@@ -20,19 +21,19 @@ type ProgressPillsProps = {
|
|
20
21
|
value?: string,
|
21
22
|
}
|
22
23
|
|
23
|
-
const ProgressPill = ({ active, dark, steps: step }: ProgressPillsProps) => (
|
24
|
+
const ProgressPill = ({ active, dark, steps: step, fullWidthPill }: ProgressPillsProps) => (
|
24
25
|
<div
|
25
26
|
className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${dark ? ' dark' : ''
|
26
|
-
}`}
|
27
|
+
}${fullWidthPill ? ' full_width_pill' : ''}`}
|
27
28
|
key={step}
|
28
29
|
/>
|
29
30
|
)
|
30
31
|
|
31
|
-
const showSteps = (steps: number, active: number, dark: boolean) => {
|
32
|
+
const showSteps = (steps: number, active: number, dark: boolean, fullWidthPill: boolean) => {
|
32
33
|
const items = []
|
33
34
|
|
34
35
|
for (let step = 1; step <= steps; step++) {
|
35
|
-
items.push(ProgressPill({ steps: step, active, dark }))
|
36
|
+
items.push(ProgressPill({ steps: step, active, dark, fullWidthPill }))
|
36
37
|
}
|
37
38
|
|
38
39
|
return items
|
@@ -44,6 +45,7 @@ const ProgressPills = (props: ProgressPillsProps) => {
|
|
44
45
|
aria = { hidden: 'true' },
|
45
46
|
className,
|
46
47
|
data = {},
|
48
|
+
fullWidthPill = false,
|
47
49
|
htmlOptions = {},
|
48
50
|
id,
|
49
51
|
steps = 3,
|
@@ -79,7 +81,7 @@ const ProgressPills = (props: ProgressPillsProps) => {
|
|
79
81
|
text={value}
|
80
82
|
/>
|
81
83
|
</div>}
|
82
|
-
<div className="progress_pills">{showSteps(steps, active, dark)}</div>
|
84
|
+
<div className="progress_pills">{showSteps(steps, active, dark, fullWidthPill)}</div>
|
83
85
|
</div>
|
84
86
|
)
|
85
87
|
}
|
@@ -0,0 +1 @@
|
|
1
|
+
<%= pb_rails("progress_pills", props: { aria: { label: "2 out of 5 steps complete" }, steps: 5, active: 2, full_width_pill: true }) %>
|
@@ -0,0 +1,18 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import ProgressPills from '../_progress_pills'
|
3
|
+
|
4
|
+
const ProgressPillsFullWidth = (props) => {
|
5
|
+
return (
|
6
|
+
<>
|
7
|
+
<ProgressPills
|
8
|
+
active={2}
|
9
|
+
aria={{ label: '2 out of 5 steps complete' }}
|
10
|
+
fullWidthPill
|
11
|
+
steps={5}
|
12
|
+
{...props}
|
13
|
+
/>
|
14
|
+
</>
|
15
|
+
)
|
16
|
+
}
|
17
|
+
|
18
|
+
export default ProgressPillsFullWidth
|
@@ -0,0 +1 @@
|
|
1
|
+
Pass `full_width_pill: true` to the Progress Pill kit to get true 100% full width pills. The kit will take up the full width of the container that it is in.
|
@@ -0,0 +1 @@
|
|
1
|
+
Pass `fullWidthPill` to the Progress Pill kit to get true 100% full width pills. The kit will take up the full width of the container that it is in.
|
@@ -3,9 +3,11 @@ examples:
|
|
3
3
|
rails:
|
4
4
|
- progress_pills_default: Default
|
5
5
|
- progress_pills_status: Status
|
6
|
+
- progress_pills_full_width: Full Container Width
|
6
7
|
|
7
8
|
|
8
9
|
|
9
10
|
react:
|
10
11
|
- progress_pills_default: Default
|
11
12
|
- progress_pills_status: Status
|
13
|
+
- progress_pills_full_width: Full Container Width
|
@@ -14,7 +14,7 @@
|
|
14
14
|
|
15
15
|
<div class="progress_pills">
|
16
16
|
<% object.each_step do |step| %>
|
17
|
-
<span class="pb_progress_pill<%= object.active_step(step) %><%= object.dark_pill %>"></span>
|
17
|
+
<span class="pb_progress_pill<%= object.active_step(step) %><%= object.make_full_width %><%= object.dark_pill %>"></span>
|
18
18
|
<% end %>
|
19
19
|
</div>
|
20
20
|
|
@@ -9,6 +9,8 @@ module Playbook
|
|
9
9
|
prop :steps, type: Playbook::Props::Number,
|
10
10
|
default: 3
|
11
11
|
prop :title
|
12
|
+
prop :full_width_pill, type: Playbook::Props::Boolean,
|
13
|
+
default: false
|
12
14
|
|
13
15
|
def classname
|
14
16
|
generate_classname("pb_progress_pills_kit")
|
@@ -26,6 +28,10 @@ module Playbook
|
|
26
28
|
step <= active ? "_active" : "_inactive"
|
27
29
|
end
|
28
30
|
|
31
|
+
def make_full_width
|
32
|
+
full_width_pill ? " full_width_pill" : nil
|
33
|
+
end
|
34
|
+
|
29
35
|
def aria_attributes
|
30
36
|
return aria if aria.present?
|
31
37
|
|
@@ -23,6 +23,20 @@ const ProgressPillsDefault = () => {
|
|
23
23
|
)
|
24
24
|
}
|
25
25
|
|
26
|
+
const ProgressPillsFullWidth = () => {
|
27
|
+
return (
|
28
|
+
<ProgressPills
|
29
|
+
active={2}
|
30
|
+
aria={{ label: ariaLabel }}
|
31
|
+
data={{ testid: testId }}
|
32
|
+
fullWidthPill
|
33
|
+
steps={3}
|
34
|
+
title={title}
|
35
|
+
value={value}
|
36
|
+
/>
|
37
|
+
)
|
38
|
+
}
|
39
|
+
|
26
40
|
test('should pass data prop', () => {
|
27
41
|
render(<ProgressPillsDefault />)
|
28
42
|
const kit = screen.getByTestId(testId)
|
@@ -51,4 +65,15 @@ test('should render value', () => {
|
|
51
65
|
render(<ProgressPillsDefault />)
|
52
66
|
const kit = screen.getByText(value)
|
53
67
|
expect(kit).toBeInTheDocument()
|
54
|
-
})
|
68
|
+
})
|
69
|
+
|
70
|
+
test('should apply fullWidthPill styling when fullWidthPill prop is true', () => {
|
71
|
+
render(<ProgressPillsFullWidth />)
|
72
|
+
const container = screen.getByTestId(testId)
|
73
|
+
const pillElements = container.querySelectorAll('.full_width_pill')
|
74
|
+
|
75
|
+
expect(pillElements.length).toBeGreaterThan(0)
|
76
|
+
pillElements.forEach((pill) => {
|
77
|
+
expect(pill).toHaveClass('full_width_pill')
|
78
|
+
})
|
79
|
+
})
|
@@ -0,0 +1,96 @@
|
|
1
|
+
<% checkboxes = [
|
2
|
+
{ name: 'Coffee', id: 'coffee', checked: false },
|
3
|
+
{ name: 'Ice Cream', id: 'ice-cream', checked: false },
|
4
|
+
{ name: 'Chocolate', id: 'chocolate', checked: true }
|
5
|
+
] %>
|
6
|
+
|
7
|
+
<%= pb_rails("flex", props: { justify: "end", margin_bottom: "sm" }) do %>
|
8
|
+
<%= pb_rails("flex", props: { justify: "end", margin_bottom: "sm" }) do %>
|
9
|
+
<%= pb_rails("button", props: { text: "Delete", id: "delete-button" }) %>
|
10
|
+
<% end %>
|
11
|
+
<% end %>
|
12
|
+
|
13
|
+
<%= pb_rails("table", props: { size: "sm" }) do %>
|
14
|
+
<%= pb_rails("table/table_head") do %>
|
15
|
+
<%= pb_rails("table/table_row") do %>
|
16
|
+
<%= pb_rails("table/table_header") do %>
|
17
|
+
<%= pb_rails("checkbox", props: {
|
18
|
+
checked: true,
|
19
|
+
value: "checkbox-value",
|
20
|
+
name: "main-checkbox-selectable",
|
21
|
+
indeterminate: true,
|
22
|
+
id: "checkbox-selectable"
|
23
|
+
}) %>
|
24
|
+
<% end %>
|
25
|
+
<%= pb_rails("table/table_header", props: { text: "Column 1" }) %>
|
26
|
+
<%= pb_rails("table/table_header", props: { text: "Column 2" }) %>
|
27
|
+
<%= pb_rails("table/table_header", props: { text: "Column 3" }) %>
|
28
|
+
<%= pb_rails("table/table_header", props: { text: "Column 4" }) %>
|
29
|
+
<%= pb_rails("table/table_header", props: { text: "Column 5" }) %>
|
30
|
+
<% end %>
|
31
|
+
<% end %>
|
32
|
+
<%= pb_rails("table/table_body") do %>
|
33
|
+
<% checkboxes.each_with_index do |checkbox, index| %>
|
34
|
+
<%= pb_rails("table/table_row") do %>
|
35
|
+
<%= pb_rails("table/table_cell") do %>
|
36
|
+
<%= pb_rails("checkbox", props: { checked: checkbox[:checked], id: "#{checkbox[:id]}-selectable-checkbox", name: "#{checkbox[:id]}-selectable-checkbox", on_change: "updateCheckboxes(#{index})", value: "check-box value" }) %>
|
37
|
+
<% end %>
|
38
|
+
<%= pb_rails("table/table_cell") do %>
|
39
|
+
<%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xs", url: "https://unsplash.it/500/400/?image=634" }) %>
|
40
|
+
<% end %>
|
41
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
|
42
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
|
43
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
|
44
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
|
45
|
+
<% end %>
|
46
|
+
<% end %>
|
47
|
+
<% end %>
|
48
|
+
<% end %>
|
49
|
+
|
50
|
+
<script>
|
51
|
+
document.addEventListener('DOMContentLoaded', function() {
|
52
|
+
const mainCheckboxWrapper = document.getElementById('checkbox-selectable');
|
53
|
+
const mainCheckbox = document.getElementsByName("main-checkbox-selectable")[0];
|
54
|
+
const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="selectable-checkbox"]');
|
55
|
+
const deleteButton = document.getElementById('delete-button');
|
56
|
+
|
57
|
+
const updateDeleteButton = () => {
|
58
|
+
const anyChecked = Array.from(childCheckboxes).some(checkbox => checkbox.checked);
|
59
|
+
deleteButton.style.display = anyChecked ? 'block' : 'none';
|
60
|
+
};
|
61
|
+
|
62
|
+
const updateMainCheckbox = () => {
|
63
|
+
// Count the number of checked child checkboxes
|
64
|
+
const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
|
65
|
+
// Determine if the main checkbox should be in an indeterminate state
|
66
|
+
const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
|
67
|
+
|
68
|
+
// Set the main checkbox states
|
69
|
+
mainCheckbox.indeterminate = indeterminate;
|
70
|
+
mainCheckbox.checked = checkedCount > 0;
|
71
|
+
|
72
|
+
// Determine the icon class to add and remove based on the number of checked checkboxes
|
73
|
+
const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
|
74
|
+
const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
|
75
|
+
|
76
|
+
// Add and remove the icon class to the main checkbox wrapper
|
77
|
+
mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
|
78
|
+
mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
|
79
|
+
|
80
|
+
// Toggle the visibility of the checkbox icon based on the indeterminate state
|
81
|
+
mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
|
82
|
+
mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
|
83
|
+
|
84
|
+
updateDeleteButton();
|
85
|
+
};
|
86
|
+
|
87
|
+
mainCheckbox.addEventListener('change', function() {
|
88
|
+
childCheckboxes.forEach(cb => cb.checked = this.checked);
|
89
|
+
updateMainCheckbox();
|
90
|
+
});
|
91
|
+
|
92
|
+
childCheckboxes.forEach(cb => {
|
93
|
+
cb.addEventListener('change', updateMainCheckbox);
|
94
|
+
});
|
95
|
+
});
|
96
|
+
</script>
|