playbook_ui 7.4.0.pre.alpha6 → 7.4.0.pre.test2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (88) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +3 -1
  3. data/app/pb_kits/playbook/data/menu.yml +2 -2
  4. data/app/pb_kits/playbook/index.js +2 -2
  5. data/app/pb_kits/playbook/pb_background/_background.html.erb +14 -0
  6. data/app/pb_kits/playbook/pb_background/_background.jsx +63 -0
  7. data/app/pb_kits/playbook/pb_background/_background.scss +35 -0
  8. data/app/pb_kits/playbook/pb_background/background.rb +35 -0
  9. data/app/pb_kits/playbook/pb_background/docs/_background_dark.html.erb +3 -0
  10. data/app/pb_kits/playbook/pb_background/docs/_background_dark.jsx +13 -0
  11. data/app/pb_kits/playbook/pb_background/docs/_background_gradient.html.erb +3 -0
  12. data/app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx +13 -0
  13. data/app/pb_kits/playbook/pb_background/docs/_background_image.html.erb +13 -0
  14. data/app/pb_kits/playbook/pb_background/docs/_background_image.jsx +30 -0
  15. data/app/pb_kits/playbook/pb_background/docs/_background_light.html.erb +3 -0
  16. data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx +13 -0
  17. data/app/pb_kits/playbook/pb_background/docs/_background_white.html.erb +3 -0
  18. data/app/pb_kits/playbook/pb_background/docs/_background_white.jsx +14 -0
  19. data/app/pb_kits/playbook/pb_background/docs/_description.md +1 -0
  20. data/app/pb_kits/playbook/pb_background/docs/example.yml +15 -0
  21. data/app/pb_kits/playbook/pb_background/docs/index.js +6 -0
  22. data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb +2 -3
  23. data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx +1 -2
  24. data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +1 -4
  25. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.html.erb +2 -5
  26. data/app/pb_kits/playbook/pb_date/_date.html.erb +64 -8
  27. data/app/pb_kits/playbook/pb_date/_date.jsx +115 -66
  28. data/app/pb_kits/playbook/pb_date/_date.scss +30 -0
  29. data/app/pb_kits/playbook/pb_date/date.rb +20 -9
  30. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb +24 -0
  31. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx +35 -0
  32. data/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb +21 -6
  33. data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +43 -12
  34. data/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb +27 -0
  35. data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx +43 -0
  36. data/app/pb_kits/playbook/pb_date/docs/example.yml +4 -0
  37. data/app/pb_kits/playbook/pb_date/docs/index.js +2 -0
  38. data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +19 -14
  39. data/app/pb_kits/playbook/pb_date_time/_date_time.html.erb +31 -0
  40. data/app/pb_kits/playbook/pb_date_time/_date_time.jsx +73 -0
  41. data/app/pb_kits/playbook/pb_date_time/_date_time.scss +26 -0
  42. data/app/pb_kits/playbook/pb_date_time/date_time.rb +29 -0
  43. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.html.erb +17 -0
  44. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.jsx +35 -0
  45. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.html.erb +20 -0
  46. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx +38 -0
  47. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.html.erb +26 -0
  48. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx +75 -0
  49. data/app/pb_kits/playbook/pb_date_time/docs/_description.md +1 -0
  50. data/app/pb_kits/playbook/pb_date_time/docs/example.yml +11 -0
  51. data/app/pb_kits/playbook/pb_date_time/docs/index.js +3 -0
  52. data/app/pb_kits/playbook/pb_flex/_flex.jsx +1 -1
  53. data/app/pb_kits/playbook/pb_flex/_flex.scss +4 -0
  54. data/app/pb_kits/playbook/pb_flex/flex.rb +1 -1
  55. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +52 -1
  56. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
  57. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +1 -1
  58. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb +1 -1
  59. data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +19 -1
  60. data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb +1 -1
  61. data/app/pb_kits/playbook/pb_list/_list.jsx +2 -9
  62. data/app/pb_kits/playbook/pb_progress_step/progress_step.rb +2 -2
  63. data/app/pb_kits/playbook/pb_radio/_radio.jsx +3 -0
  64. data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +46 -19
  65. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +46 -10
  66. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb +4 -4
  67. data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +3 -2
  68. data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +2 -0
  69. data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx +19 -0
  70. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb +7 -1
  71. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md +10 -1
  72. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +2 -0
  73. data/lib/playbook/version.rb +1 -1
  74. metadata +41 -20
  75. data/app/pb_kits/playbook/pb_selectable_list/_item.jsx +0 -90
  76. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.html.erb +0 -11
  77. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx +0 -47
  78. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss +0 -17
  79. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list_item.html.erb +0 -18
  80. data/app/pb_kits/playbook/pb_selectable_list/docs/_description.md +0 -3
  81. data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.html.erb +0 -30
  82. data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx +0 -32
  83. data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.html.erb +0 -30
  84. data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx +0 -32
  85. data/app/pb_kits/playbook/pb_selectable_list/docs/example.yml +0 -12
  86. data/app/pb_kits/playbook/pb_selectable_list/docs/index.js +0 -2
  87. data/app/pb_kits/playbook/pb_selectable_list/selectable_list.rb +0 -24
  88. data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb +0 -28
@@ -0,0 +1,73 @@
1
+ /* @flow */
2
+
3
+ import React from 'react'
4
+ import classnames from 'classnames'
5
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
6
+ import { globalProps } from '../utilities/globalProps.js'
7
+ import { Flex, Date as FormattedDate, Time } from '../'
8
+
9
+ type DateTimeProps = {
10
+ align?: "left" | "center" | "right",
11
+ aria?: object,
12
+ className?: string,
13
+ data?: object,
14
+ datetime: string,
15
+ id?: string,
16
+ size?: "sm" | "md",
17
+ showDayOfWeek: boolean,
18
+ showIcon?: boolean,
19
+ timeZone?: string
20
+ }
21
+
22
+ const DateTime = (props: DateTimeProps) => {
23
+ const {
24
+ align = 'left',
25
+ aria = {},
26
+ className,
27
+ data = {},
28
+ showDayOfWeek = false,
29
+ datetime,
30
+ id,
31
+ showIcon = false,
32
+ size = 'md',
33
+ timeZone = 'America/New_York',
34
+ } = props
35
+
36
+ const ariaProps = buildAriaProps(aria)
37
+ const dataProps = buildDataProps(data)
38
+ const classes = classnames(
39
+ buildCss('pb_date_time', size),
40
+ globalProps(props),
41
+ className
42
+ )
43
+
44
+ return (
45
+ <div
46
+ {...ariaProps}
47
+ {...dataProps}
48
+ className={classes}
49
+ id={id}
50
+ >
51
+ <Flex
52
+ horizontal={align}
53
+ vertical="baseline"
54
+ >
55
+ <FormattedDate
56
+ datetime={datetime}
57
+ showDayOfWeek={showDayOfWeek}
58
+ size={size}
59
+ timeZone={timeZone}
60
+ />
61
+ <Time
62
+ date={new Date()}
63
+ marginLeft="sm"
64
+ showIcon={showIcon}
65
+ size={size}
66
+ timeZone={timeZone}
67
+ />
68
+ </Flex>
69
+ </div>
70
+ )
71
+ }
72
+
73
+ export default DateTime
@@ -0,0 +1,26 @@
1
+ [class^=pb_date_time] {
2
+ [class*=pb_date_kit] > div:last-child {
3
+ margin-right: 0 !important;
4
+ }
5
+ &[class*=_center] {
6
+ display: flex;
7
+ justify-content: center;
8
+ text-align: center;
9
+ }
10
+ &[class*=_right] {
11
+ display: flex;
12
+ justify-content: flex-end;
13
+ text-align: right;
14
+ }
15
+ &[class*=dark] {
16
+ [class^=pb_title_kit] {
17
+ color: $text_dk_default !important;
18
+ }
19
+ & * {
20
+ @include caption_dark;
21
+ }
22
+ .pb_time {
23
+ color: $text_dk_default;
24
+ }
25
+ }
26
+ }
@@ -0,0 +1,29 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbDateTime
5
+ class DateTime
6
+ include Playbook::Props
7
+
8
+ partial "pb_date_time/date_time"
9
+
10
+ prop :date, type: Playbook::Props::Date,
11
+ default: ::DateTime.current
12
+ prop :align, type: Playbook::Props::Enum,
13
+ values: %w[left center right],
14
+ default: "left"
15
+ prop :timezone, type: Playbook::Props::String,
16
+ default: "America/New_York"
17
+ prop :size, type: Playbook::Props::Enum,
18
+ values: %w[sm md],
19
+ default: "md"
20
+ prop :dark, type: Playbook::Props::Boolean, default: false
21
+ prop :show_icon, type: Playbook::Props::Boolean, default: false
22
+ prop :show_day_of_week, type: Playbook::Props::Boolean, default: false
23
+
24
+ def classname
25
+ generate_classname("pb_date_time_kit", align)
26
+ end
27
+ end
28
+ end
29
+ end
@@ -0,0 +1,17 @@
1
+ <%= pb_rails("date_time", props: {
2
+ date: DateTime.now
3
+ }) %>
4
+
5
+ <br />
6
+
7
+ <%= pb_rails("date_time", props: {
8
+ date: DateTime.now,
9
+ align:"center"
10
+ }) %>
11
+
12
+ <br />
13
+
14
+ <%= pb_rails("date_time", props: {
15
+ date: DateTime.now,
16
+ align:"right"
17
+ }) %>
@@ -0,0 +1,35 @@
1
+ import React from 'react'
2
+ import DateTime from '../_date_time.jsx'
3
+
4
+ const DateTimeAlign = (props) => (
5
+ <div>
6
+ <DateTime
7
+ datetime={new Date()}
8
+ dayOfWeek
9
+ icon
10
+ {...props}
11
+ />
12
+
13
+ <br />
14
+
15
+ <DateTime
16
+ align="center"
17
+ datetime={new Date()}
18
+ dayOfWeek
19
+ icon
20
+ {...props}
21
+ />
22
+
23
+ <br />
24
+
25
+ <DateTime
26
+ align="right"
27
+ datetime={new Date()}
28
+ dayOfWeek
29
+ icon
30
+ {...props}
31
+ />
32
+ </div>
33
+ )
34
+
35
+ export default DateTimeAlign
@@ -0,0 +1,20 @@
1
+ <%= pb_rails("date_time", props: {
2
+ date: DateTime.now,
3
+ show_icon: true,
4
+ show_day_of_week: true
5
+ }) %>
6
+ <br />
7
+ <%= pb_rails("date_time", props: {
8
+ date: DateTime.now,
9
+ show_day_of_week: true
10
+ }) %>
11
+ <br />
12
+ <%= pb_rails("date_time", props: {
13
+ date: DateTime.now,
14
+ show_icon: true
15
+ }) %>
16
+ <br />
17
+ <%= pb_rails("date_time", props: {
18
+ date: DateTime.now,
19
+ timezone: "Asia/Tokyo"
20
+ }) %>
@@ -0,0 +1,38 @@
1
+ import React from 'react'
2
+ import DateTime from '../_date_time.jsx'
3
+
4
+ const DateTimeDefault = (props) => (
5
+ <div>
6
+ <DateTime
7
+ datetime={new Date()}
8
+ showDayOfWeek
9
+ showIcon
10
+ {...props}
11
+ />
12
+
13
+ <br />
14
+
15
+ <DateTime
16
+ datetime={new Date()}
17
+ showDayOfWeek
18
+ {...props}
19
+ />
20
+
21
+ <br />
22
+
23
+ <DateTime
24
+ datetime={new Date()}
25
+ showIcon
26
+ {...props}
27
+ />
28
+
29
+ <br />
30
+
31
+ <DateTime
32
+ datetime={new Date()}
33
+ {...props}
34
+ />
35
+ </div>
36
+ )
37
+
38
+ export default DateTimeDefault
@@ -0,0 +1,26 @@
1
+ <%= pb_rails("date_time", props: {
2
+ date: DateTime.now,
3
+ show_icon: true,
4
+ show_day_of_week: true,
5
+ size: "sm"
6
+ }) %>
7
+ <br>
8
+ <%= pb_rails("date_time", props: {
9
+ date: DateTime.now,
10
+ timezone: "Asia/Tokyo",
11
+ size: "sm"
12
+ }) %>
13
+
14
+ <br>
15
+ <br>
16
+
17
+ <%= pb_rails("date_time", props: {
18
+ date: DateTime.now,
19
+ show_icon: true,
20
+ show_day_of_week: true
21
+ }) %>
22
+ <br >
23
+ <%= pb_rails("date_time", props: {
24
+ date: DateTime.now,
25
+ timezone: "Asia/Tokyo"
26
+ }) %>
@@ -0,0 +1,75 @@
1
+ import React from 'react'
2
+ import DateTime from '../_date_time.jsx'
3
+
4
+ const DateTimeDefault = (props) => (
5
+ <div>
6
+ <DateTime
7
+ datetime={new Date()}
8
+ showDayOfWeek
9
+ showIcon
10
+ size="sm"
11
+ {...props}
12
+ />
13
+
14
+ <br />
15
+
16
+ <DateTime
17
+ datetime={new Date()}
18
+ showDayOfWeek
19
+ size="sm"
20
+ {...props}
21
+ />
22
+
23
+ <br />
24
+
25
+ <DateTime
26
+ datetime={new Date()}
27
+ showIcon
28
+ size="sm"
29
+ {...props}
30
+ />
31
+
32
+ <br />
33
+
34
+ <DateTime
35
+ datetime={new Date()}
36
+ size="sm"
37
+ {...props}
38
+ />
39
+
40
+ <br />
41
+ <br />
42
+
43
+ <DateTime
44
+ datetime={new Date()}
45
+ showDayOfWeek
46
+ showIcon
47
+ {...props}
48
+ />
49
+
50
+ <br />
51
+
52
+ <DateTime
53
+ datetime={new Date()}
54
+ showDayOfWeek
55
+ {...props}
56
+ />
57
+
58
+ <br />
59
+
60
+ <DateTime
61
+ datetime={new Date()}
62
+ showIcon
63
+ {...props}
64
+ />
65
+
66
+ <br />
67
+
68
+ <DateTime
69
+ datetime={new Date()}
70
+ {...props}
71
+ />
72
+ </div>
73
+ )
74
+
75
+ export default DateTimeDefault
@@ -0,0 +1 @@
1
+ Date Time is a composite kit that leverages the [Date](/kits/date) and [Time](/kits/time) kits. The Date Time kit is affected by time zones and defaults to "America/New_York".
@@ -0,0 +1,11 @@
1
+ examples:
2
+
3
+ rails:
4
+ - date_time_default: Default
5
+ - date_time_align: Alignment
6
+ - date_time_size: Size
7
+
8
+ react:
9
+ - date_time_default: Default
10
+ - date_time_align: Alignment
11
+ - date_time_size: Size
@@ -0,0 +1,3 @@
1
+ export { default as DateTimeDefault } from './_date_time_default.jsx'
2
+ export { default as DateTimeAlign } from './_date_time_align.jsx'
3
+ export { default as DateTimeSize } from './_date_time_size.jsx'
@@ -13,7 +13,7 @@ type FlexProps = {
13
13
  orientation?: "row" | "column",
14
14
  spacing?: "around" | "between" | "evenly" | "none",
15
15
  reverse?: boolean,
16
- vertical?: "top" | "center" | "bottom" | "stretch",
16
+ vertical?: "top" | "center" | "bottom" | "stretch" | "baseline",
17
17
  wrap?: boolean,
18
18
  }
19
19
 
@@ -71,6 +71,10 @@
71
71
  align-items: stretch;
72
72
  }
73
73
 
74
+ &[class*=align_items_baseline] {
75
+ align-items: baseline;
76
+ }
77
+
74
78
  // Spacing
75
79
  &[class*=spacing_around] {
76
80
  justify-content: space-around;
@@ -26,7 +26,7 @@ module Playbook
26
26
  default: false
27
27
 
28
28
  prop :vertical, type: Playbook::Props::Enum,
29
- values: %w[top center bottom stretch],
29
+ values: %w[top center bottom stretch baseline],
30
30
  default: "top"
31
31
 
32
32
  prop :wrap, type: Playbook::Props::Boolean,
@@ -14,6 +14,7 @@
14
14
  %>
15
15
 
16
16
  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
17
+ <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
17
18
  <%= form.text_field :example_text_field, props: { label: true } %>
18
19
  <%= form.telephone_field :example_phone_field, props: { label: true } %>
19
20
  <%= form.email_field :example_email_field, props: { label: true } %>
@@ -33,10 +34,60 @@
33
34
  name: "checkbox-name",
34
35
  class: "checkbox-class"
35
36
  %>
36
- <%= form.date_picker :example_date_picker_1, props: { default_date: "blank", label: true } %>
37
+ <%= form.date_picker :example_date_picker_1, props: { label: true } %>
37
38
 
38
39
  <%= form.actions do |action| %>
39
40
  <%= action.submit %>
40
41
  <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
41
42
  <% end %>
42
43
  <% end %>
44
+
45
+ <!-- form.typeahead user results example template -->
46
+ <template data-typeahead-example-result-option>
47
+ <%= pb_rails("user", props: {
48
+ name: tag(:slot, name: "name"),
49
+ orientation: "horizontal",
50
+ align: "left",
51
+ avatar_url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=",
52
+ avatar: true
53
+ }) %>
54
+ </template>
55
+
56
+ <!-- form.typeahead JS example implementation -->
57
+ <%= javascript_tag defer: "defer" do %>
58
+ document.addEventListener("pb-typeahead-kit-search", function(event) {
59
+ if (!event.target.dataset || !event.target.dataset.typeaheadExample1) return;
60
+
61
+ fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
62
+ .then(response => response.json())
63
+ .then((result) => {
64
+ const resultOptionTemplate = document.querySelector("[data-typeahead-example-result-option]")
65
+
66
+ event.detail.setResults((result.items || []).map((user) => {
67
+ const wrapper = resultOptionTemplate.content.cloneNode(true)
68
+ wrapper.children[0].dataset.user = JSON.stringify(user)
69
+ wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
70
+ wrapper.querySelector('img').dataset.src = user.avatar_url
71
+ return wrapper
72
+ }))
73
+ })
74
+ })
75
+
76
+
77
+ document.addEventListener("pb-typeahead-kit-result-option-selected", function(event) {
78
+ if (!event.target.dataset.typeaheadExample1) return;
79
+
80
+ const selectedUserJSON = event.detail.selected.firstElementChild.dataset.user
81
+ const selectedUserData = JSON.parse(selectedUserJSON)
82
+
83
+ // set the input field's value
84
+ event.target.querySelector('input[name=example_user]').value = selectedUserData.login
85
+
86
+ // log the selected option's dataset
87
+ console.log('The selected user data:')
88
+ console.dir(selectedUserData)
89
+
90
+ // do even more with the data later - TBD
91
+ event.target.dataset.user = selectedUserJSON
92
+ })
93
+ <% end %>
@@ -28,7 +28,7 @@
28
28
  <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
29
29
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
30
30
  <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
31
- <%= form.date_picker :example_date_picker_2, props: { default_date: 'blank', label: true, required: true } %>
31
+ <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
32
32
 
33
33
  <%= form.actions do |action| %>
34
34
  <%= action.submit %>
@@ -52,7 +52,7 @@
52
52
  <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { label: true } %>
53
53
  <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { label: true } %>
54
54
  <%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true } %>
55
- <%= form.date_picker :example_date_picker_field_1, props: { default_date: 'blank', label: true } %>
55
+ <%= form.date_picker :example_date_picker_field_1, props: { label: true } %>
56
56
 
57
57
  <%= form.actions do |action| %>
58
58
  <%= action.submit %>
@@ -52,7 +52,7 @@
52
52
  <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { required: true, blank_selection: "Select One...", label: true } %>
53
53
  <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { required: true, blank_selection: "Select One...", label: true } %>
54
54
  <%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true, required: true } %>
55
- <%= form.date_picker :example_date_picker_field_2, props: { default_date: 'blank', label: true, required: true } %>
55
+ <%= form.date_picker :example_date_picker_field_2, props: { label: true, required: true } %>
56
56
 
57
57
  <%= form.actions do |action| %>
58
58
  <%= action.submit %>
@@ -8,12 +8,30 @@ module Playbook
8
8
  prefix = @object_name
9
9
  html_attribute_name = "#{prefix}[#{name}]"
10
10
  html_id = "#{prefix}_#{name}"
11
+
11
12
  props[:label] = @template.label(@object_name, name) if props[:label] == true
13
+ props[:label] = "Date Picker" if props[:label].nil?
12
14
 
13
15
  props[:name] = html_attribute_name
14
16
  props[:picker_id] = html_id
15
17
 
16
- @template.pb_rails("date_picker", props: props)
18
+ input = text_field(
19
+ name,
20
+ autocomplete: "off",
21
+ disabled: props[:disable_input],
22
+ data: props[:input_data],
23
+ aria: props[:input_aria],
24
+ props: {
25
+ error: props[:error],
26
+ label: props[:hide_label] ? nil : props[:label],
27
+ placeholder: props[:placeholder],
28
+ required: props[:required],
29
+ }
30
+ )
31
+
32
+ @template.pb_rails("date_picker", props: props) do
33
+ input
34
+ end
17
35
  end
18
36
  end
19
37
  end
@@ -38,7 +38,7 @@ module Playbook
38
38
  end
39
39
 
40
40
  def address_house_style
41
- "#{address.titleize} #{separator} #{house_style}"
41
+ "#{address&.titleize} #{separator} #{house_style}"
42
42
  end
43
43
 
44
44
  def address_house_style2
@@ -17,9 +17,7 @@ type ListProps = {
17
17
  ordered: boolean,
18
18
  role?: string,
19
19
  tabIndex?: string,
20
- text?: string,
21
20
  size?: string,
22
- variant?: string,
23
21
  xpadding: boolean,
24
22
  }
25
23
 
@@ -38,8 +36,6 @@ const List = (props: ListProps) => {
38
36
  size = '',
39
37
  tabIndex,
40
38
  xpadding = false,
41
- variant,
42
- text,
43
39
  } = props
44
40
 
45
41
  const layoutClass = {
@@ -48,9 +44,6 @@ const List = (props: ListProps) => {
48
44
  default: '',
49
45
  }
50
46
 
51
- const childrenWithProps = React.Children.map(children, (child) => {
52
- return React.cloneElement(child, { text, variant })
53
- })
54
47
  const ariaProps = buildAriaProps(aria)
55
48
  const dataProps = buildDataProps(data)
56
49
  const classes = classnames(
@@ -77,7 +70,7 @@ const List = (props: ListProps) => {
77
70
  role={role}
78
71
  tabIndex={tabIndex}
79
72
  >
80
- {childrenWithProps}
73
+ {children}
81
74
  </ol>
82
75
  <Else />
83
76
  <ul
@@ -88,7 +81,7 @@ const List = (props: ListProps) => {
88
81
  role={role}
89
82
  tabIndex={tabIndex}
90
83
  >
91
- {childrenWithProps}
84
+ {children}
92
85
  </ul>
93
86
  </If>
94
87
  </div>
@@ -16,8 +16,8 @@ module Playbook
16
16
  values: %w[default tracker],
17
17
  default: "default"
18
18
  prop :color, type: Playbook::Props::Enum,
19
- values: %w[primary info],
20
- default: "primary"
19
+ values: %w[primary info],
20
+ default: "primary"
21
21
  def classname
22
22
  generate_classname("pb_progress_step_kit", orientation, icon_class, variant_class, color_class)
23
23
  end
@@ -19,6 +19,7 @@ type RadioProps = {
19
19
  label: String,
20
20
  name: String,
21
21
  value: String,
22
+ text: String,
22
23
  onChange: (Boolean)=>void,
23
24
  }
24
25
 
@@ -32,6 +33,7 @@ const Radio = ({
32
33
  id,
33
34
  label,
34
35
  name = 'radio_name',
36
+ text = 'Radio Text',
35
37
  value = 'radio_text',
36
38
  onChange = () => {},
37
39
  ...props
@@ -55,6 +57,7 @@ const Radio = ({
55
57
  id={id}
56
58
  name={name}
57
59
  onChange={onChange}
60
+ text={text}
58
61
  type="radio"
59
62
  value={value}
60
63
  />