playbook_ui_docs 15.3.0.pre.alpha.PLAY2001selectablecarddisabledstyles11833 → 15.3.0.pre.alpha.PLAY2012currencyallownonstring11930

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 (29) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx +4 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.md +3 -2
  4. data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb +1 -1
  5. data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx +1 -1
  6. data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.md +1 -0
  7. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.md +1 -1
  8. data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.html.erb +7 -14
  9. data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx +6 -15
  10. data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.jsx +68 -0
  11. data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to_react.md +1 -0
  12. data/app/pb_kits/playbook/pb_popover/docs/example.yml +1 -0
  13. data/app/pb_kits/playbook/pb_popover/docs/index.js +1 -0
  14. data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible.html.erb +63 -0
  15. data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible.jsx +89 -0
  16. data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_rails.md +4 -0
  17. data/app/pb_kits/playbook/pb_table/docs/_table_with_dynamic_collapsible_react.md +3 -0
  18. data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
  19. data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
  20. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.html.erb +64 -0
  21. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.jsx +70 -0
  22. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.md +1 -0
  23. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_options.html.erb +67 -1
  24. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_value.jsx +68 -6
  25. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
  26. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +2 -1
  27. data/dist/playbook-doc.js +2 -2
  28. metadata +13 -3
  29. /data/app/pb_kits/playbook/pb_popover/docs/{_popover_append_to.md → _popover_append_to_rails.md} +0 -0
data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_options.html.erb CHANGED
@@ -25,11 +25,77 @@
25
25
  ]
26
26
  %>
27
27
 
28
+ <%
29
+ grouped_options = [
30
+ {
31
+ label: "Warm Colors",
32
+ options: [
33
+ { label: "Red", value: "#FF0000" },
34
+ { label: "Orange", value: "#FFA500" },
35
+ { label: "Yellow", value: "#FFFF00" },
36
+ { label: "Coral", value: "#FF7F50" },
37
+ { label: "Gold", value: "#FFD700" }
38
+ ]
39
+ },
40
+ {
41
+ label: "Cool Colors",
42
+ options: [
43
+ { label: "Blue", value: "#0000FF" },
44
+ { label: "Teal", value: "#008080" },
45
+ { label: "Cyan", value: "#00FFFF" },
46
+ { label: "Navy", value: "#000080" },
47
+ { label: "Turquoise", value: "#40E0D0" }
48
+ ]
49
+ },
50
+ {
51
+ label: "Neutrals",
52
+ options: [
53
+ { label: "White", value: "#FFFFFF" },
54
+ { label: "Black", value: "#000000" },
55
+ { label: "Gray", value: "#808080" },
56
+ { label: "Beige", value: "#F5F5DC" },
57
+ { label: "Silver", value: "#C0C0C0" }
58
+ ]
59
+ },
60
+ {
61
+ label: "Earth Tones",
62
+ options: [
63
+ { label: "Brown", value: "#A52A2A" },
64
+ { label: "Olive", value: "#808000" },
65
+ { label: "Forest Green", value: "#228B22" },
66
+ { label: "Tan", value: "#D2B48C" },
67
+ { label: "Maroon", value: "#800000" }
68
+ ]
69
+ },
70
+ {
71
+ label: "Fun Shades",
72
+ options: [
73
+ { label: "Pink", value: "#FFC0CB" },
74
+ { label: "Magenta", value: "#FF00FF" },
75
+ { label: "Lime", value: "#00FF00" },
76
+ { label: "Purple", value: "#800080" },
77
+ { label: "Indigo", value: "#4B0082" }
78
+ ]
79
+ }
80
+ ]
81
+ %>
82
+
83
+
28
84
  <%= pb_rails("typeahead", props: {
29
85
  default_options: [{ label: 'Gray', value: '#808080' }],
30
86
  id: "typeahead-default-value",
31
87
  options: options,
32
- label: "Colors",
88
+ label: "Default Value with basic options",
89
+ name: :foo,
90
+ is_multi: false
91
+ })
92
+ %>
93
+
94
+ <%= pb_rails("typeahead", props: {
95
+ default_options:[{ label: "Pink", value: "#FFC0CB" }],
96
+ id: "typeahead-default-value-grouped-options",
97
+ options: grouped_options,
98
+ label: "Default Value with grouped options",
33
99
  name: :foo,
34
100
  is_multi: false
35
101
  })
data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_value.jsx CHANGED
@@ -27,14 +27,76 @@ const options = [
27
27
  { label: 'Coral', value: '#FF7F50' }
28
28
  ]
29
29
 
30
+ const groupedOptions = [
31
+ {
32
+ label: "Warm Colors",
33
+ options: [
34
+ { label: "Red", value: "#FF0000" },
35
+ { label: "Orange", value: "#FFA500" },
36
+ { label: "Yellow", value: "#FFFF00" },
37
+ { label: "Coral", value: "#FF7F50" },
38
+ { label: "Gold", value: "#FFD700" }
39
+ ]
40
+ },
41
+ {
42
+ label: "Cool Colors",
43
+ options: [
44
+ { label: "Blue", value: "#0000FF" },
45
+ { label: "Teal", value: "#008080" },
46
+ { label: "Cyan", value: "#00FFFF" },
47
+ { label: "Navy", value: "#000080" },
48
+ { label: "Turquoise", value: "#40E0D0" }
49
+ ]
50
+ },
51
+ {
52
+ label: "Neutrals",
53
+ options: [
54
+ { label: "White", value: "#FFFFFF" },
55
+ { label: "Black", value: "#000000" },
56
+ { label: "Gray", value: "#808080" },
57
+ { label: "Beige", value: "#F5F5DC" },
58
+ { label: "Silver", value: "#C0C0C0" }
59
+ ]
60
+ },
61
+ {
62
+ label: "Earth Tones",
63
+ options: [
64
+ { label: "Brown", value: "#A52A2A" },
65
+ { label: "Olive", value: "#808000" },
66
+ { label: "Forest Green", value: "#228B22" },
67
+ { label: "Tan", value: "#D2B48C" },
68
+ { label: "Maroon", value: "#800000" }
69
+ ]
70
+ },
71
+ {
72
+ label: "Fun Shades",
73
+ options: [
74
+ { label: "Pink", value: "#FFC0CB" },
75
+ { label: "Magenta", value: "#FF00FF" },
76
+ { label: "Lime", value: "#00FF00" },
77
+ { label: "Purple", value: "#800080" },
78
+ { label: "Indigo", value: "#4B0082" }
79
+ ]
80
+ }
81
+ ]
82
+
30
83
  const TypeaheadDefaultValue = (props) => {
31
84
  return (
32
- <Typeahead
33
- defaultValue={options[10]}
34
- label="Colors"
35
- options={options}
36
- {...props}
37
- />
85
+ <>
86
+ <Typeahead
87
+ defaultValue={options[10]}
88
+ label="Default Value with basic options"
89
+ options={options}
90
+ {...props}
91
+ />
92
+ <br />
93
+ <Typeahead
94
+ defaultValue={{ label: "Pink", value: "#FFC0CB" }}
95
+ label="Default Value with grouped options"
96
+ options={groupedOptions}
97
+ {...props}
98
+ />
99
+ </>
38
100
  )
39
101
  }
40
102
 
data/app/pb_kits/playbook/pb_typeahead/docs/example.yml CHANGED
@@ -1,6 +1,7 @@
1
1
  examples:
2
2
  rails:
3
3
  - typeahead_default: Default
4
+ - typeahead_custom_options: With Grouped Options
4
5
  - typeahead_default_options: With Default Options
5
6
  - typeahead_with_context: With Context
6
7
  - typeahead_with_pills: With Pills
@@ -20,6 +21,7 @@ examples:
20
21
 
21
22
  react:
22
23
  - typeahead_default: Default
24
+ - typeahead_custom_options: With Grouped Options
23
25
  - typeahead_default_value: With Default Value
24
26
  - typeahead_react_hook: React Hook
25
27
  - typeahead_with_highlight: With Highlight
data/app/pb_kits/playbook/pb_typeahead/docs/index.js CHANGED
@@ -16,4 +16,5 @@ export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.j
16
16
  export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
17
17
  export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'
18
18
  export { default as TypeaheadPreserveInput } from './_typeahead_preserve_input.jsx'
19
- export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'
19
+ export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'
20
+ export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'