playbook_ui_docs 15.4.0 → 15.5.0.pre.alpha.PLAY2554homeaddressstreetaccessibility12695

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 (141) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx +2 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx +1 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx +3 -1
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx +1 -1
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx +3 -1
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.jsx +2 -1
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
  9. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant.html.erb +9 -0
  10. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant.jsx +24 -0
  11. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant_rails.md +1 -0
  12. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant_react.md +1 -0
  13. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb +2 -2
  14. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx +1 -2
  15. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb +2 -2
  16. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx +2 -0
  17. data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +2 -0
  18. data/app/pb_kits/playbook/pb_copy_button/docs/index.js +1 -0
  19. data/app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.md +1 -0
  20. data/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals_rails.md +1 -0
  21. data/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals_react.md +1 -0
  22. data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.html.erb +10 -0
  23. data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.jsx +10 -0
  24. data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.md +1 -0
  25. data/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol_rails.md +1 -0
  26. data/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol_react.md +1 -0
  27. data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb +7 -0
  28. data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx +7 -0
  29. data/app/pb_kits/playbook/pb_currency/docs/_description.md +2 -2
  30. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_show_current_year.html.erb +4 -0
  31. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_show_current_year.jsx +43 -0
  32. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_show_current_year.md +1 -0
  33. data/app/pb_kits/playbook/pb_date_range_inline/docs/_description.md +1 -1
  34. data/app/pb_kits/playbook/pb_date_range_inline/docs/example.yml +3 -2
  35. data/app/pb_kits/playbook/pb_date_range_inline/docs/index.js +1 -0
  36. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_current_year.html.erb +12 -0
  37. data/app/pb_kits/playbook/pb_date_stacked/docs/{_date_stacked_not_current_year.jsx → _date_stacked_current_year.jsx} +6 -5
  38. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_current_year.md +1 -0
  39. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.html.erb +1 -1
  40. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx +1 -1
  41. data/app/pb_kits/playbook/pb_date_stacked/docs/_description.md +1 -1
  42. data/app/pb_kits/playbook/pb_date_stacked/docs/example.yml +2 -2
  43. data/app/pb_kits/playbook/pb_date_stacked/docs/index.js +1 -1
  44. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year.html.erb +4 -0
  45. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year.jsx +14 -0
  46. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year_rails.md +1 -0
  47. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year_react.md +1 -0
  48. data/app/pb_kits/playbook/pb_date_time/docs/example.yml +3 -1
  49. data/app/pb_kits/playbook/pb_date_time/docs/index.js +1 -0
  50. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.html.erb +4 -0
  51. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.jsx +22 -0
  52. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.md +1 -0
  53. data/app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml +3 -1
  54. data/app/pb_kits/playbook/pb_date_time_stacked/docs/index.js +1 -0
  55. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +33 -2
  56. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.jsx +180 -0
  57. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.md +22 -0
  58. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +3 -2
  59. data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
  60. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.jsx +2 -1
  61. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.jsx +2 -1
  62. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.jsx +2 -1
  63. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.jsx +2 -1
  64. data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx +1 -0
  65. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.jsx +4 -1
  66. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.html.erb +124 -0
  67. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx +147 -12
  68. data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx +1 -1
  69. data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.html.erb +21 -0
  70. data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.jsx +113 -0
  71. data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.md +1 -0
  72. data/app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.html.erb +30 -0
  73. data/app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.jsx +117 -0
  74. data/app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.md +1 -0
  75. data/app/pb_kits/playbook/pb_nav/docs/example.yml +4 -0
  76. data/app/pb_kits/playbook/pb_nav/docs/index.js +3 -1
  77. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_description.md +3 -1
  78. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx +1 -1
  79. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx +1 -1
  80. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.md +1 -0
  81. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx +1 -1
  82. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx +1 -1
  83. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx +1 -1
  84. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx +1 -2
  85. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb +1 -1
  86. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx +1 -1
  87. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.md +11 -0
  88. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx +1 -1
  89. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx +1 -1
  90. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx +1 -2
  91. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx +1 -2
  92. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_description.md +3 -1
  93. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx +2 -1
  94. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx +2 -1
  95. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx +1 -1
  96. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md +2 -1
  97. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx +2 -1
  98. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx +1 -1
  99. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx +1 -1
  100. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx +1 -1
  101. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.md +1 -0
  102. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx +1 -1
  103. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx +2 -1
  104. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx +1 -1
  105. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx +1 -1
  106. data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_description.md +3 -1
  107. data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.jsx +1 -1
  108. data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.md +2 -2
  109. data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_complex.jsx +2 -1
  110. data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_default.md +1 -0
  111. data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_full_circle.jsx +2 -1
  112. data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_height.jsx +2 -1
  113. data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_min_max.jsx +2 -1
  114. data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.jsx +2 -1
  115. data/app/pb_kits/playbook/pb_pb_line_graph/docs/_description.md +3 -1
  116. data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_colors.jsx +1 -1
  117. data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_default.md +1 -0
  118. data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_position.html.erb +1 -1
  119. data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.jsx +4 -1
  120. data/app/pb_kits/playbook/pb_progress_step/docs/_description.md +1 -5
  121. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_color.html.erb +14 -0
  122. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_color.jsx +29 -0
  123. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_color.md +3 -0
  124. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.jsx +31 -0
  125. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.md +1 -0
  126. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb +4 -1
  127. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx +14 -3
  128. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.md +3 -0
  129. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.md +3 -0
  130. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.html.erb +1 -7
  131. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.md +1 -0
  132. data/app/pb_kits/playbook/pb_progress_step/docs/example.yml +3 -0
  133. data/app/pb_kits/playbook/pb_progress_step/docs/index.js +2 -0
  134. data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx +3 -1
  135. data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.jsx +3 -1
  136. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.jsx +4 -1
  137. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx +2 -1
  138. data/app/pb_kits/playbook/pb_user/docs/_user_font_options.jsx +1 -1
  139. metadata +46 -5
  140. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.html.erb +0 -5
  141. data/dist/playbook-doc.js +0 -19
@@ -1,6 +1,6 @@
1
1
  import React from 'react'
2
2
  import PbLineGraph from '../../pb_pb_line_graph/_pb_line_graph'
3
- import { colors } from 'playbook-ui'
3
+ import colors from '../../tokens/exports/_colors.module.scss'
4
4
 
5
5
  const data = [{
6
6
  name: 'Installation',
@@ -0,0 +1 @@
1
+ In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.
@@ -37,7 +37,7 @@
37
37
  },
38
38
  } %>
39
39
 
40
- <%= pb_rails("title", props: {size: 4, text: "align | vertical_align", padding_top: "sm", padding_bottom: "sm"})%>
40
+ <%= pb_rails("title", props: {size: 4, text: "align | verticalAlign", padding_top: "sm", padding_bottom: "sm"})%>
41
41
  <%= pb_rails("pb_line_graph", props: {options: chartOptionsFirst}) %>
42
42
 
43
43
  <% chartOptionsSecond = {
@@ -1,5 +1,8 @@
1
1
  import React, { useState } from "react";
2
- import { PbReactPopover, CircleIconButton, Body, Flex } from "playbook-ui";
2
+ import PbReactPopover from "../_popover";
3
+ import Body from "../../pb_body/_body";
4
+ import Flex from "../../pb_flex/_flex";
5
+ import CircleIconButton from "../../pb_circle_icon_button/_circle_icon_button";
3
6
 
4
7
  const PopoverAppendTo = (props) => {
5
8
  const [showParentPopover, setShowParentPopover] = useState(false);
@@ -1,5 +1 @@
1
- Progress step kit is used to show the progress of a process. There are three types of steps in this kit: completed, active, and inactive. Completed steps are indicated by a solid, blue circle (with or without an icon). The current, or active, step is indicated by an outlined blue circle. The inactive, or future, step is indicated by a solid gray circle.
2
-
3
- **Tracker**
4
- You must set the icon prop to true for this kit.
5
- This variant takes children just like the default progress step. It is best to use the caption kit for children in this variant.
1
+ Progress Step kit is used to show the progress of a process. There are three types of steps in this kit: completed, active, and inactive. Completed steps are indicated by a solid, blue circle (with or without an icon). The current, or active, step is indicated by an outlined blue circle. The inactive, or future, step is indicated by a solid gray circle.
@@ -0,0 +1,14 @@
1
+ <br><br>
2
+ <%= pb_rails("progress_step",props:{ variant:"tracker", icon:true, color: "info"}) do %>
3
+ <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
4
+ <%= pb_rails("caption", props:{text: "Ordered"})%>
5
+ <% end %>
6
+ <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
7
+ <%= pb_rails("caption", props:{text: "Shipped"})%>
8
+ <% end %>
9
+ <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
10
+ <%= pb_rails("caption", props:{text: "Delivered"})%>
11
+ <% end %>
12
+ <% end %>
13
+
14
+ <br>
@@ -0,0 +1,29 @@
1
+ import React from 'react'
2
+
3
+ import ProgressStep from '../_progress_step.tsx'
4
+ import ProgressStepItem from '../_progress_step_item.tsx'
5
+ import Caption from '../../pb_caption/_caption'
6
+
7
+ const ProgressStepColor = (props) => (
8
+ <div>
9
+ <br />
10
+ <ProgressStep
11
+ color="info"
12
+ icon
13
+ variant="tracker"
14
+ {...props}
15
+ >
16
+ <ProgressStepItem status="complete">
17
+ <Caption>{'Ordered'}</Caption>
18
+ </ProgressStepItem>
19
+ <ProgressStepItem status="active">
20
+ <Caption>{'Shipped'}</Caption>
21
+ </ProgressStepItem>
22
+ <ProgressStepItem status="inactive">
23
+ <Caption>{'Delivered'}</Caption>
24
+ </ProgressStepItem>
25
+ </ProgressStep>
26
+ </div>
27
+ )
28
+
29
+ export default ProgressStepColor
@@ -0,0 +1,3 @@
1
+ The `color` prop can also be used to set color for the tracker variant. Options for color are `primary` and `info` with default being set to `primary`.
2
+
3
+ **NOTE**: The `color` prop is only available with the `tracker` variant.
@@ -0,0 +1,31 @@
1
+ import React from 'react'
2
+
3
+ import ProgressStep from '../_progress_step.tsx'
4
+ import ProgressStepItem from '../_progress_step_item.tsx'
5
+ import Caption from '../../pb_caption/_caption'
6
+
7
+ const ProgressStepCustomIcon = (props) => (
8
+ <div>
9
+ <br />
10
+ <ProgressStep
11
+ icon
12
+ variant="tracker"
13
+ {...props}
14
+ >
15
+ <ProgressStepItem status="complete">
16
+ <Caption>{'Ordered'}</Caption>
17
+ </ProgressStepItem>
18
+ <ProgressStepItem
19
+ icon="exclamation-triangle"
20
+ status="active"
21
+ >
22
+ <Caption>{'Shipped'}</Caption>
23
+ </ProgressStepItem>
24
+ <ProgressStepItem status="inactive">
25
+ <Caption>{'Delivered'}</Caption>
26
+ </ProgressStepItem>
27
+ </ProgressStep>
28
+ </div>
29
+ )
30
+
31
+ export default ProgressStepCustomIcon
@@ -0,0 +1 @@
1
+ Custom icons can also be set for individual steps. Simply use the `icon` prop for the relevant `ProgressStepItem`/`progress_step_item` as shown here.
@@ -39,7 +39,10 @@
39
39
  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
40
40
  step 2
41
41
  <% end %>
42
- <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
42
+ <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
43
43
  step 3
44
+ <% end %>
45
+ <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
46
+ step 4
44
47
  <% end %>
45
48
  <% end %>
@@ -6,7 +6,6 @@ import ProgressStepItem from '../_progress_step_item.tsx'
6
6
  const ProgressStepDefault = (props) => (
7
7
  <div>
8
8
  <ProgressStep
9
- icon
10
9
  {...props}
11
10
  >
12
11
  <ProgressStepItem status="complete" />
@@ -19,12 +18,24 @@ const ProgressStepDefault = (props) => (
19
18
 
20
19
  <ProgressStep {...props}>
21
20
  <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
22
- <ProgressStepItem status="active">{'Step 2'}</ProgressStepItem>
23
- <ProgressStepItem status="inactive">{'Step 3'}</ProgressStepItem>
21
+ <ProgressStepItem status="complete">{'Step 2'}</ProgressStepItem>
22
+ <ProgressStepItem status="active">{'Step 3'}</ProgressStepItem>
23
+ <ProgressStepItem status="inactive">{'Step 4'}</ProgressStepItem>
24
+ <ProgressStepItem status="inactive">{'Step 5'}</ProgressStepItem>
24
25
  </ProgressStep>
25
26
 
26
27
  <br />
27
28
  <br />
29
+
30
+ <ProgressStep
31
+ icon
32
+ {...props}
33
+ >
34
+ <ProgressStepItem status="complete">{'Step 1'}</ProgressStepItem>
35
+ <ProgressStepItem status="complete">{'Step 2'}</ProgressStepItem>
36
+ <ProgressStepItem status="active">{'Step 3'}</ProgressStepItem>
37
+ <ProgressStepItem status="inactive">{'Step 4'}</ProgressStepItem>
38
+ </ProgressStep>
28
39
  </div>
29
40
  )
30
41
 
@@ -0,0 +1,3 @@
1
+ The default Progress Step kit sets orientation to horizontal and can be used with completed, active, and inactive steps as shown here.
2
+
3
+ `icon` is a boolean prop that can also be set to true to render icons within the steps indicator. `icon` is false by default.
@@ -0,0 +1,3 @@
1
+ The `variant` prop can be set to `tracker` to achieve this UI. Tracker is only available with the horizontal orientation and it is also recommended that you set the `icon` prop to true for this variant.
2
+
3
+ This variant takes children just like the default progress step, however, it is best to use the caption kit for children in this variant.
@@ -25,13 +25,7 @@
25
25
  Child
26
26
  <% end %>
27
27
  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
28
- <%= pb_rails("card", props: {highlight: {position: "side", color:"windows"}}) do %>
29
- Card content
30
- <% end %>
31
- <br>
32
- <%= pb_rails("card", props: {highlight: {position: "side", color:"windows"}}) do %>
33
- Card content
34
- <% end %>
28
+ Child
35
29
  <% end %>
36
30
  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
37
31
  Child
@@ -0,0 +1 @@
1
+ `orientation` can also be set to `vertical` as shown here. By default, this is set to `horizontal`.
@@ -3,6 +3,7 @@ examples:
3
3
  - progress_step_default: Default
4
4
  - progress_step_vertical: Vertical
5
5
  - progress_step_tracker: Tracker
6
+ - progress_step_color: Color
6
7
  - progress_step_custom_icon: Custom Icon
7
8
  - progress_step_tooltip: Tooltip
8
9
 
@@ -10,4 +11,6 @@ examples:
10
11
  - progress_step_default: Default
11
12
  - progress_step_vertical: Vertical
12
13
  - progress_step_tracker: Tracker
14
+ - progress_step_color: Color
15
+ - progress_step_custom_icon: Custom Icon
13
16
  - progress_step_tracker_click_events: Using State
@@ -2,3 +2,5 @@ export { default as ProgressStepDefault } from './_progress_step_default.jsx'
2
2
  export { default as ProgressStepVertical } from './_progress_step_vertical.jsx'
3
3
  export { default as ProgressStepTracker } from './_progress_step_tracker.jsx'
4
4
  export { default as ProgressStepTrackerClickEvents } from './_progress_step_tracker_click_events.jsx'
5
+ export { default as ProgressStepColor } from './_progress_step_color.jsx'
6
+ export { default as ProgressStepCustomIcon } from './_progress_step_custom_icon.jsx'
@@ -1,6 +1,8 @@
1
1
  import React from "react"
2
2
  import { useForm } from "react-hook-form"
3
- import { Radio, Flex, Body } from "playbook-ui"
3
+ import Radio from "../_radio"
4
+ import Body from "../../pb_body/_body"
5
+ import Flex from "../../pb_flex/_flex"
4
6
 
5
7
  const RadioReactHook = () => {
6
8
  const { register, watch } = useForm({
@@ -1,6 +1,8 @@
1
1
  import React, { useState } from "react"
2
2
  import { useForm } from "react-hook-form"
3
- import { Button, Body, Select } from "playbook-ui"
3
+ import Select from "../_select"
4
+ import Body from "../../pb_body/_body"
5
+ import Button from "../../pb_button/_button"
4
6
 
5
7
  const SelectReactHook = (props) => {
6
8
  const { register, handleSubmit, formState: { errors } } = useForm({
@@ -1,5 +1,8 @@
1
1
  import React from 'react'
2
- import { Button, Tooltip, Flex, FlexItem } from 'playbook-ui';
2
+ import Tooltip from '../_tooltip'
3
+ import Button from '../../pb_button/_button'
4
+ import Flex from '../../pb_flex/_flex'
5
+ import FlexItem from '../../pb_flex/_flex_item'
3
6
 
4
7
  const TooltipSizing = (props) => {
5
8
 
@@ -1,6 +1,7 @@
1
1
  import React from 'react'
2
2
 
3
- import { Typeahead, Title } from 'playbook-ui'
3
+ import Typeahead from '../_typeahead'
4
+ import Title from '../../pb_title/_title'
4
5
  import { useForm } from 'react-hook-form'
5
6
 
6
7
  const languages = [
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { User } from 'playbook-ui'
2
+ import User from '../../pb_user/_user'
3
3
 
4
4
  const UserFontOptions = (props) => {
5
5
  return (
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui_docs
3
3
  version: !ruby/object:Gem::Version
4
- version: 15.4.0
4
+ version: 15.5.0.pre.alpha.PLAY2554homeaddressstreetaccessibility12695
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: 2025-11-10 00:00:00.000000000 Z
12
+ date: 2025-12-01 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: playbook_ui
@@ -533,6 +533,10 @@ files:
533
533
  - app/pb_kits/playbook/pb_contact/docs/_description.md
534
534
  - app/pb_kits/playbook/pb_contact/docs/example.yml
535
535
  - app/pb_kits/playbook/pb_contact/docs/index.js
536
+ - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant.html.erb
537
+ - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant.jsx
538
+ - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant_rails.md
539
+ - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant_react.md
536
540
  - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb
537
541
  - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx
538
542
  - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb
@@ -546,6 +550,7 @@ files:
546
550
  - app/pb_kits/playbook/pb_copy_button/docs/index.js
547
551
  - app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.html.erb
548
552
  - app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.jsx
553
+ - app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.md
549
554
  - app/pb_kits/playbook/pb_currency/docs/_currency_alignment.html.erb
550
555
  - app/pb_kits/playbook/pb_currency/docs/_currency_alignment.jsx
551
556
  - app/pb_kits/playbook/pb_currency/docs/_currency_alignment_swift.md
@@ -554,10 +559,15 @@ files:
554
559
  - app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md
555
560
  - app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.html.erb
556
561
  - app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals.jsx
562
+ - app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals_rails.md
563
+ - app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals_react.md
557
564
  - app/pb_kits/playbook/pb_currency/docs/_currency_negative.html.erb
558
565
  - app/pb_kits/playbook/pb_currency/docs/_currency_negative.jsx
566
+ - app/pb_kits/playbook/pb_currency/docs/_currency_negative.md
559
567
  - app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.html.erb
560
568
  - app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.jsx
569
+ - app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol_rails.md
570
+ - app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol_react.md
561
571
  - app/pb_kits/playbook/pb_currency/docs/_currency_null_display.html.erb
562
572
  - app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx
563
573
  - app/pb_kits/playbook/pb_currency/docs/_currency_null_display_rails.md
@@ -696,6 +706,9 @@ files:
696
706
  - app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx
697
707
  - app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default_swift.md
698
708
  - app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_props_swift.md
709
+ - app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_show_current_year.html.erb
710
+ - app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_show_current_year.jsx
711
+ - app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_show_current_year.md
699
712
  - app/pb_kits/playbook/pb_date_range_inline/docs/_description.md
700
713
  - app/pb_kits/playbook/pb_date_range_inline/docs/example.yml
701
714
  - app/pb_kits/playbook/pb_date_range_inline/docs/index.js
@@ -710,11 +723,12 @@ files:
710
723
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.html.erb
711
724
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.jsx
712
725
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold_swift.md
726
+ - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_current_year.html.erb
727
+ - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_current_year.jsx
728
+ - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_current_year.md
713
729
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.html.erb
714
730
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx
715
731
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default_swift.md
716
- - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.html.erb
717
- - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.jsx
718
732
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year_swift.md
719
733
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_props_swift.md
720
734
  - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reverse.html.erb
@@ -733,6 +747,10 @@ files:
733
747
  - app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx
734
748
  - app/pb_kits/playbook/pb_date_time/docs/_date_time_default_swift.md
735
749
  - app/pb_kits/playbook/pb_date_time/docs/_date_time_props_swift.md
750
+ - app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year.html.erb
751
+ - app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year.jsx
752
+ - app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year_rails.md
753
+ - app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year_react.md
736
754
  - app/pb_kits/playbook/pb_date_time/docs/_date_time_size.html.erb
737
755
  - app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx
738
756
  - app/pb_kits/playbook/pb_date_time/docs/_date_time_size_swift.md
@@ -743,6 +761,9 @@ files:
743
761
  - app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx
744
762
  - app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default_swift.md
745
763
  - app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_props_swift.md
764
+ - app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.html.erb
765
+ - app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.jsx
766
+ - app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.md
746
767
  - app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml
747
768
  - app/pb_kits/playbook/pb_date_time_stacked/docs/index.js
748
769
  - app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.html.erb
@@ -834,6 +855,8 @@ files:
834
855
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md
835
856
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.html.erb
836
857
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
858
+ - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.jsx
859
+ - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.md
837
860
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md
838
861
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_react.md
839
862
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.html.erb
@@ -1547,6 +1570,9 @@ files:
1547
1570
  - app/pb_kits/playbook/pb_nav/docs/_description.md
1548
1571
  - app/pb_kits/playbook/pb_nav/docs/_horizontal_nav.html.erb
1549
1572
  - app/pb_kits/playbook/pb_nav/docs/_horizontal_nav.jsx
1573
+ - app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.html.erb
1574
+ - app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.jsx
1575
+ - app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.md
1550
1576
  - app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.html.erb
1551
1577
  - app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.jsx
1552
1578
  - app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.md
@@ -1579,6 +1605,9 @@ files:
1579
1605
  - app/pb_kits/playbook/pb_nav/docs/_subtle_with_icons_nav.jsx
1580
1606
  - app/pb_kits/playbook/pb_nav/docs/_tab_nav.html.erb
1581
1607
  - app/pb_kits/playbook/pb_nav/docs/_tab_nav.md
1608
+ - app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.html.erb
1609
+ - app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.jsx
1610
+ - app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.md
1582
1611
  - app/pb_kits/playbook/pb_nav/docs/_with_icons_nav.html.erb
1583
1612
  - app/pb_kits/playbook/pb_nav/docs/_with_icons_nav.jsx
1584
1613
  - app/pb_kits/playbook/pb_nav/docs/_with_img_nav.html.erb
@@ -1666,6 +1695,7 @@ files:
1666
1695
  - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_react.md
1667
1696
  - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.html.erb
1668
1697
  - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx
1698
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.md
1669
1699
  - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.html.erb
1670
1700
  - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx
1671
1701
  - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.md
@@ -1676,6 +1706,7 @@ files:
1676
1706
  - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx
1677
1707
  - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb
1678
1708
  - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx
1709
+ - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.md
1679
1710
  - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.html.erb
1680
1711
  - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx
1681
1712
  - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.html.erb
@@ -1705,6 +1736,7 @@ files:
1705
1736
  - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx
1706
1737
  - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.html.erb
1707
1738
  - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx
1739
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.md
1708
1740
  - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.html.erb
1709
1741
  - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx
1710
1742
  - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx
@@ -1723,6 +1755,7 @@ files:
1723
1755
  - app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_complex.md
1724
1756
  - app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_default.html.erb
1725
1757
  - app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_default.jsx
1758
+ - app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_default.md
1726
1759
  - app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_disable_animation.html.erb
1727
1760
  - app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_disable_animation.jsx
1728
1761
  - app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_full_circle.html.erb
@@ -1749,6 +1782,7 @@ files:
1749
1782
  - app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_colors.md
1750
1783
  - app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_default.html.erb
1751
1784
  - app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_default.jsx
1785
+ - app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_default.md
1752
1786
  - app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_height.html.erb
1753
1787
  - app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_height.jsx
1754
1788
  - app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_height.md
@@ -1882,15 +1916,23 @@ files:
1882
1916
  - app/pb_kits/playbook/pb_progress_simple/docs/example.yml
1883
1917
  - app/pb_kits/playbook/pb_progress_simple/docs/index.js
1884
1918
  - app/pb_kits/playbook/pb_progress_step/docs/_description.md
1919
+ - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_color.html.erb
1920
+ - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_color.jsx
1921
+ - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_color.md
1885
1922
  - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.html.erb
1923
+ - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.jsx
1924
+ - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.md
1886
1925
  - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb
1887
1926
  - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx
1927
+ - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.md
1888
1928
  - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tooltip.html.erb
1889
1929
  - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.html.erb
1890
1930
  - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.jsx
1931
+ - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.md
1891
1932
  - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker_click_events.jsx
1892
1933
  - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.html.erb
1893
1934
  - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.jsx
1935
+ - app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.md
1894
1936
  - app/pb_kits/playbook/pb_progress_step/docs/example.yml
1895
1937
  - app/pb_kits/playbook/pb_progress_step/docs/index.js
1896
1938
  - app/pb_kits/playbook/pb_radio/docs/_description.md
@@ -2620,7 +2662,6 @@ files:
2620
2662
  - app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_variant.jsx
2621
2663
  - app/pb_kits/playbook/pb_weekday_stacked/docs/example.yml
2622
2664
  - app/pb_kits/playbook/pb_weekday_stacked/docs/index.js
2623
- - dist/playbook-doc.js
2624
2665
  homepage: https://playbook.powerapp.cloud/
2625
2666
  licenses:
2626
2667
  - ISC
@@ -1,5 +0,0 @@
1
- <%= pb_rails("date_stacked", props: { date: Date.new(2018, 03, 20) }) %>
2
-
3
- <br>
4
-
5
- <%= pb_rails("date_stacked", props: { date: Date.new(2018, 03, 20), size: "md"}) %>