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.
Files changed (52) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +3 -1
  3. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb +2 -2
  4. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md +4 -1
  5. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx +90 -0
  6. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +5 -0
  7. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +2 -0
  8. data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
  9. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +7 -4
  10. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx +6 -3
  11. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +1 -6
  12. data/app/pb_kits/playbook/pb_nav/item.html.erb +7 -19
  13. data/app/pb_kits/playbook/pb_nav/nav.html.erb +3 -8
  14. data/app/pb_kits/playbook/pb_online_status/online_status.html.erb +1 -6
  15. data/app/pb_kits/playbook/pb_popover/popover.html.erb +1 -6
  16. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss +4 -0
  17. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx +7 -5
  18. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.html.erb +1 -0
  19. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.jsx +18 -0
  20. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_rails.md +1 -0
  21. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_react.md +1 -0
  22. data/app/pb_kits/playbook/pb_progress_pills/docs/example.yml +2 -0
  23. data/app/pb_kits/playbook/pb_progress_pills/docs/index.js +1 -0
  24. data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb +1 -1
  25. data/app/pb_kits/playbook/pb_progress_pills/progress_pills.rb +6 -0
  26. data/app/pb_kits/playbook/pb_progress_pills/progress_pills.test.js +26 -1
  27. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb +96 -0
  28. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx +101 -0
  29. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.md +1 -0
  30. data/app/pb_kits/playbook/pb_table/docs/example.yml +3 -1
  31. data/app/pb_kits/playbook/pb_table/docs/index.js +2 -1
  32. data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx +29 -2
  33. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +31 -3
  34. data/app/pb_kits/playbook/pb_table/table_body.html.erb +13 -7
  35. data/app/pb_kits/playbook/pb_table/table_body.rb +2 -0
  36. data/app/pb_kits/playbook/pb_table/table_row.html.erb +13 -7
  37. data/app/pb_kits/playbook/pb_table/table_row.rb +4 -0
  38. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb +14 -0
  39. data/app/pb_kits/playbook/pb_text_input/index.js +9 -0
  40. data/app/pb_kits/playbook/pb_text_input/text_input.rb +5 -2
  41. data/dist/chunks/{_typeahead-btjo1UN5.js → _typeahead-C_q1qAtC.js} +4 -4
  42. data/dist/chunks/_weekday_stacked-CB-T-41Z.js +45 -0
  43. data/dist/chunks/{lib-DjpLC8uO.js → lib-WQEeEj3t.js} +1 -1
  44. data/dist/chunks/{pb_form_validation-S56UaHZl.js → pb_form_validation-Cq64l4zn.js} +1 -1
  45. data/dist/chunks/vendor.js +1 -1
  46. data/dist/playbook-doc.js +1 -1
  47. data/dist/playbook-rails-react-bindings.js +1 -1
  48. data/dist/playbook-rails.js +1 -1
  49. data/dist/playbook.css +1 -1
  50. data/lib/playbook/version.rb +1 -1
  51. metadata +15 -6
  52. data/dist/chunks/_weekday_stacked-TIh9nTmZ.js +0 -45
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 21317a1c7d5325bd88ac09a06b74859e30a5fcf6748c6b4b710c500189733796
4
- data.tar.gz: 0f6e8ac0625c5ba45989ab65b84603c15e777699e9726e2a7769d6e2aa57dd5e
3
+ metadata.gz: a02907e0ddf056d53adf2ff51c95d9a4f6ac497ba12c70c81edb1432dfcd148a
4
+ data.tar.gz: 4e5c6cf857e84be3a940be3db3fc843270f9262d1da4ec37639d0faa59957881
5
5
  SHA512:
6
- metadata.gz: a7555df6aeccfb138dd8a45ff0a86b1e1843ba3ae6640a29d27899f2a9972b717f26cda50b79da966a5681b5eea56394f0a97823b165e27194add95c3e892158
7
- data.tar.gz: 275833538e43720396649195b958886d4d4cca24f5b9e8e977fc1b7ec520d6e1151665de6d02086b11e05c45414f2b9c03d941df3fd43ad2fcd78ce403f4472b
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("draggable/draggable_container", props: {tag:"tbody"}) do %>
46
+ <%= pb_rails("table/table_body", props: {draggable_container: true}) do %>
47
47
  <% initial_items.each do |item| %>
48
- <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], tag:"tr"}) do %>
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, make use of the `tag` prop on the draggable_container to set it to 'tbody' and the same prop on the draggable_item to set that to 'tr'. This will create the functionality seen here.
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
- <div
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
- </div>
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
- <div
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
- </div>
57
+ </Tag>
55
58
  );
56
59
  };
57
60
 
@@ -1,8 +1,3 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- data: object.data,
4
- id: object.id,
5
- class: object.classname,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
  <%= react_component("MultiLevelSelect", object.multi_level_select_options) %>
8
3
  <% end %>
@@ -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
- <%= content_tag(object.tag,
5
- aria: object.aria,
6
- class: object.classname,
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
- <%= content_tag(object.tag,
31
- aria: object.aria,
32
- class: object.classname,
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
- <%= content_tag(:nav,
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
- <%= content_tag(:div, class: "pb_nav_list_title") do %>
9
- <%= content_tag(:a, class: "pb_nav_list_item_link_text", href: object.link) do %>
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,7 +1,2 @@
1
- <%= content_tag(:div,
2
- aria: object.aria.merge!(label: object.status),
3
- class: object.classname,
4
- data: object.data,
5
- id: object.id,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
  <% end %>
@@ -1,9 +1,4 @@
1
- <%= content_tag(:div,
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 %>
@@ -28,6 +28,10 @@
28
28
  [class*=pb_progress_pill] {
29
29
  @include pb_progress_pill;
30
30
 
31
+ &.full_width_pill {
32
+ max-width: none;
33
+ }
34
+
31
35
  &[class*=_inactive] {
32
36
  background-color: $border_light;
33
37
  &.dark {
@@ -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
@@ -1,2 +1,3 @@
1
1
  export { default as ProgressPillsDefault } from './_progress_pills_default.jsx'
2
2
  export { default as ProgressPillsStatus } from './_progress_pills_status.jsx'
3
+ export { default as ProgressPillsFullWidth } from './_progress_pills_full_width.jsx'
@@ -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>