playbook_ui 7.3.0 → 7.4.0.pre.alpha6
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +1 -3
- data/app/pb_kits/playbook/data/menu.yml +2 -2
- data/app/pb_kits/playbook/index.js +2 -2
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb +3 -2
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx +2 -1
- data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +4 -1
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.html.erb +5 -2
- data/app/pb_kits/playbook/pb_date/_date.html.erb +8 -64
- data/app/pb_kits/playbook/pb_date/_date.jsx +66 -115
- data/app/pb_kits/playbook/pb_date/_date.scss +0 -30
- data/app/pb_kits/playbook/pb_date/date.rb +9 -20
- data/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb +6 -21
- data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +12 -43
- data/app/pb_kits/playbook/pb_date/docs/example.yml +0 -4
- data/app/pb_kits/playbook/pb_date/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +14 -19
- data/app/pb_kits/playbook/pb_flex/_flex.jsx +1 -1
- data/app/pb_kits/playbook/pb_flex/_flex.scss +0 -4
- data/app/pb_kits/playbook/pb_flex/flex.rb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -52
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +1 -19
- data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb +1 -1
- data/app/pb_kits/playbook/pb_list/_list.jsx +9 -2
- data/app/pb_kits/playbook/pb_progress_step/progress_step.rb +2 -2
- data/app/pb_kits/playbook/pb_radio/_radio.jsx +0 -3
- data/app/pb_kits/playbook/pb_selectable_list/_item.jsx +90 -0
- data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.html.erb +11 -0
- data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx +47 -0
- data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss +17 -0
- data/app/pb_kits/playbook/pb_selectable_list/_selectable_list_item.html.erb +18 -0
- data/app/pb_kits/playbook/pb_selectable_list/docs/_description.md +3 -0
- data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.html.erb +30 -0
- data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx +32 -0
- data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.html.erb +30 -0
- data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx +32 -0
- data/app/pb_kits/playbook/pb_selectable_list/docs/example.yml +12 -0
- data/app/pb_kits/playbook/pb_selectable_list/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list.rb +24 -0
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb +28 -0
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +19 -46
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +10 -46
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb +4 -4
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +2 -3
- data/lib/playbook/version.rb +1 -1
- metadata +18 -38
- data/app/pb_kits/playbook/pb_background/_background.html.erb +0 -14
- data/app/pb_kits/playbook/pb_background/_background.jsx +0 -63
- data/app/pb_kits/playbook/pb_background/_background.scss +0 -35
- data/app/pb_kits/playbook/pb_background/background.rb +0 -35
- data/app/pb_kits/playbook/pb_background/docs/_background_dark.html.erb +0 -3
- data/app/pb_kits/playbook/pb_background/docs/_background_dark.jsx +0 -13
- data/app/pb_kits/playbook/pb_background/docs/_background_gradient.html.erb +0 -3
- data/app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx +0 -13
- data/app/pb_kits/playbook/pb_background/docs/_background_image.html.erb +0 -13
- data/app/pb_kits/playbook/pb_background/docs/_background_image.jsx +0 -30
- data/app/pb_kits/playbook/pb_background/docs/_background_light.html.erb +0 -3
- data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx +0 -13
- data/app/pb_kits/playbook/pb_background/docs/_background_white.html.erb +0 -3
- data/app/pb_kits/playbook/pb_background/docs/_background_white.jsx +0 -14
- data/app/pb_kits/playbook/pb_background/docs/_description.md +0 -1
- data/app/pb_kits/playbook/pb_background/docs/example.yml +0 -15
- data/app/pb_kits/playbook/pb_background/docs/index.js +0 -6
- data/app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb +0 -24
- data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx +0 -35
- data/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb +0 -27
- data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx +0 -43
- data/app/pb_kits/playbook/pb_date_time/_date_time.html.erb +0 -31
- data/app/pb_kits/playbook/pb_date_time/_date_time.jsx +0 -73
- data/app/pb_kits/playbook/pb_date_time/_date_time.scss +0 -26
- data/app/pb_kits/playbook/pb_date_time/date_time.rb +0 -29
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.html.erb +0 -17
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.jsx +0 -35
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.html.erb +0 -20
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx +0 -38
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.html.erb +0 -26
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx +0 -75
- data/app/pb_kits/playbook/pb_date_time/docs/_description.md +0 -1
- data/app/pb_kits/playbook/pb_date_time/docs/example.yml +0 -11
- data/app/pb_kits/playbook/pb_date_time/docs/index.js +0 -3
@@ -10,36 +10,25 @@ module Playbook
|
|
10
10
|
partial "pb_date/date"
|
11
11
|
|
12
12
|
prop :date, required: true
|
13
|
-
prop :alignment, type: Playbook::Props::Enum,
|
14
|
-
values: %w[left center right],
|
15
|
-
default: "left"
|
16
|
-
prop :show_icon, type: Playbook::Props::Boolean,
|
17
|
-
default: false
|
18
|
-
prop :show_day_of_week, type: Playbook::Props::Boolean,
|
19
|
-
default: false
|
20
13
|
prop :size, type: Playbook::Props::Enum,
|
21
|
-
values: %w[lg
|
22
|
-
default: "
|
14
|
+
values: %w[lg sm xs],
|
15
|
+
default: "sm"
|
23
16
|
prop :timezone, default: "America/New_York"
|
24
17
|
|
25
18
|
def classname
|
26
|
-
generate_classname("pb_date_kit"
|
19
|
+
generate_classname("pb_date_kit")
|
27
20
|
end
|
28
21
|
|
29
|
-
def
|
30
|
-
pb_date_time.to_day_of_week
|
22
|
+
def xs_date
|
23
|
+
"#{pb_date_time.to_day_of_week.upcase} · #{pb_date_time.to_month.upcase} #{pb_date_time.to_day}".html_safe
|
31
24
|
end
|
32
25
|
|
33
|
-
def
|
34
|
-
pb_date_time.to_day
|
26
|
+
def lg_date
|
27
|
+
"#{pb_date_time.to_month.upcase} #{pb_date_time.to_day}"
|
35
28
|
end
|
36
29
|
|
37
|
-
def
|
38
|
-
pb_date_time.to_month.
|
39
|
-
end
|
40
|
-
|
41
|
-
def year
|
42
|
-
pb_date_time.to_year
|
30
|
+
def sm_date
|
31
|
+
"#{pb_date_time.to_day_of_week.upcase} · #{pb_date_time.to_month.upcase} #{pb_date_time.to_day}".html_safe
|
43
32
|
end
|
44
33
|
|
45
34
|
private
|
@@ -1,39 +1,24 @@
|
|
1
1
|
<%= pb_rails("date", props: {
|
2
2
|
date: Date.today,
|
3
|
-
size: "
|
3
|
+
size: "lg"
|
4
4
|
}) %>
|
5
5
|
|
6
6
|
<br>
|
7
7
|
|
8
8
|
<%= pb_rails("date", props: {
|
9
|
-
date:
|
10
|
-
size: "sm"
|
9
|
+
date: DateTime.now
|
11
10
|
}) %>
|
12
11
|
|
13
12
|
<br>
|
14
13
|
|
15
14
|
<%= pb_rails("date", props: {
|
16
|
-
date:
|
17
|
-
|
18
|
-
size: "sm"
|
19
|
-
}) %>
|
20
|
-
|
21
|
-
<br>
|
22
|
-
<br>
|
23
|
-
|
24
|
-
<%= pb_rails("date", props: {
|
25
|
-
date: Date.today,
|
26
|
-
}) %>
|
27
|
-
|
28
|
-
<br>
|
29
|
-
|
30
|
-
<%= pb_rails("date", props: {
|
31
|
-
date: "2012-08-02T15:49:29Z",
|
15
|
+
date: DateTime.now,
|
16
|
+
timezone: "Asia/Tokyo"
|
32
17
|
}) %>
|
33
18
|
|
34
19
|
<br>
|
35
20
|
|
36
21
|
<%= pb_rails("date", props: {
|
37
|
-
date:
|
38
|
-
|
22
|
+
date: Date.new(2010, 11, 12),
|
23
|
+
size: "xs"
|
39
24
|
}) %>
|
@@ -1,59 +1,28 @@
|
|
1
1
|
import React from 'react'
|
2
|
-
import { Date
|
2
|
+
import { Date } from '../../'
|
3
3
|
|
4
|
-
const DateDefault = (
|
4
|
+
const DateDefault = () => {
|
5
5
|
return (
|
6
|
-
|
7
|
-
<
|
8
|
-
size="
|
9
|
-
value=
|
10
|
-
{...props}
|
6
|
+
<div>
|
7
|
+
<Date
|
8
|
+
size="lg"
|
9
|
+
value="1995-12-25"
|
11
10
|
/>
|
12
11
|
|
13
12
|
<br />
|
14
13
|
|
15
|
-
<
|
16
|
-
|
17
|
-
value="2012-08-03"
|
18
|
-
{...props}
|
14
|
+
<Date
|
15
|
+
value="17 Mar 69"
|
19
16
|
/>
|
20
17
|
|
21
18
|
<br />
|
22
19
|
|
23
|
-
<
|
24
|
-
|
25
|
-
|
26
|
-
value="2017-12-03"
|
27
|
-
{...props}
|
20
|
+
<Date
|
21
|
+
size="xs"
|
22
|
+
value="2020-04-20T04:20:00.000Z"
|
28
23
|
/>
|
29
|
-
|
30
|
-
<br />
|
31
|
-
<br />
|
32
|
-
|
33
|
-
<FormattedDate
|
34
|
-
value={new Date()}
|
35
|
-
{...props}
|
36
|
-
/>
|
37
|
-
|
38
|
-
<br />
|
39
|
-
|
40
|
-
<FormattedDate
|
41
|
-
value="2012-08-03"
|
42
|
-
{...props}
|
43
|
-
/>
|
44
|
-
|
45
|
-
<br />
|
46
|
-
|
47
|
-
<FormattedDate
|
48
|
-
showDayOfWeek
|
49
|
-
value="2017-12-03"
|
50
|
-
{...props}
|
51
|
-
/>
|
52
|
-
</>
|
24
|
+
</div>
|
53
25
|
)
|
54
26
|
}
|
55
27
|
|
56
28
|
export default DateDefault
|
57
|
-
|
58
|
-
// *Development Note* - We are reviewing this kit for a potential name change due to naming collisions when `new Date()` is used.
|
59
|
-
// To avoid this bug, please use name spacing as shown in the code examples. ie `import { Date as AliasedComponentName } from '../../'
|
@@ -3,25 +3,20 @@
|
|
3
3
|
class: object.classname + object.error_class,
|
4
4
|
data: object.data,
|
5
5
|
id: object.id) do %>
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
name: object.name,
|
21
|
-
placeholder: object.placeholder,
|
22
|
-
required: object.required,
|
23
|
-
}) %>
|
24
|
-
<% end %>
|
6
|
+
<div class="input_wrapper">
|
7
|
+
<%= pb_rails("text_input", props: {
|
8
|
+
aria: object.input_aria,
|
9
|
+
autocomplete: false,
|
10
|
+
dark: object.dark,
|
11
|
+
data: object.input_data,
|
12
|
+
disabled: object.disable_input,
|
13
|
+
error: object.error,
|
14
|
+
id: object.picker_id,
|
15
|
+
label: object.hide_label ? nil : object.label,
|
16
|
+
name: object.name,
|
17
|
+
placeholder: object.placeholder,
|
18
|
+
required: object.required
|
19
|
+
}) %>
|
25
20
|
<% if !object.hide_icon %>
|
26
21
|
<div
|
27
22
|
class="<%= object.icon_wrapper_class %>"
|
@@ -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",
|
17
17
|
wrap?: boolean,
|
18
18
|
}
|
19
19
|
|
@@ -14,7 +14,6 @@
|
|
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" } %>
|
18
17
|
<%= form.text_field :example_text_field, props: { label: true } %>
|
19
18
|
<%= form.telephone_field :example_phone_field, props: { label: true } %>
|
20
19
|
<%= form.email_field :example_email_field, props: { label: true } %>
|
@@ -34,60 +33,10 @@
|
|
34
33
|
name: "checkbox-name",
|
35
34
|
class: "checkbox-class"
|
36
35
|
%>
|
37
|
-
<%= form.date_picker :example_date_picker_1, props: { label: true } %>
|
36
|
+
<%= form.date_picker :example_date_picker_1, props: { default_date: "blank", label: true } %>
|
38
37
|
|
39
38
|
<%= form.actions do |action| %>
|
40
39
|
<%= action.submit %>
|
41
40
|
<%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
|
42
41
|
<% end %>
|
43
42
|
<% 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: { label: true, required: true } %>
|
31
|
+
<%= form.date_picker :example_date_picker_2, props: { default_date: 'blank', 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: { label: true } %>
|
55
|
+
<%= form.date_picker :example_date_picker_field_1, props: { default_date: 'blank', 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: { label: true, required: true } %>
|
55
|
+
<%= form.date_picker :example_date_picker_field_2, props: { default_date: 'blank', label: true, required: true } %>
|
56
56
|
|
57
57
|
<%= form.actions do |action| %>
|
58
58
|
<%= action.submit %>
|
@@ -8,30 +8,12 @@ module Playbook
|
|
8
8
|
prefix = @object_name
|
9
9
|
html_attribute_name = "#{prefix}[#{name}]"
|
10
10
|
html_id = "#{prefix}_#{name}"
|
11
|
-
|
12
11
|
props[:label] = @template.label(@object_name, name) if props[:label] == true
|
13
|
-
props[:label] = "Date Picker" if props[:label].nil?
|
14
12
|
|
15
13
|
props[:name] = html_attribute_name
|
16
14
|
props[:picker_id] = html_id
|
17
15
|
|
18
|
-
|
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
|
16
|
+
@template.pb_rails("date_picker", props: props)
|
35
17
|
end
|
36
18
|
end
|
37
19
|
end
|
@@ -17,7 +17,9 @@ type ListProps = {
|
|
17
17
|
ordered: boolean,
|
18
18
|
role?: string,
|
19
19
|
tabIndex?: string,
|
20
|
+
text?: string,
|
20
21
|
size?: string,
|
22
|
+
variant?: string,
|
21
23
|
xpadding: boolean,
|
22
24
|
}
|
23
25
|
|
@@ -36,6 +38,8 @@ const List = (props: ListProps) => {
|
|
36
38
|
size = '',
|
37
39
|
tabIndex,
|
38
40
|
xpadding = false,
|
41
|
+
variant,
|
42
|
+
text,
|
39
43
|
} = props
|
40
44
|
|
41
45
|
const layoutClass = {
|
@@ -44,6 +48,9 @@ const List = (props: ListProps) => {
|
|
44
48
|
default: '',
|
45
49
|
}
|
46
50
|
|
51
|
+
const childrenWithProps = React.Children.map(children, (child) => {
|
52
|
+
return React.cloneElement(child, { text, variant })
|
53
|
+
})
|
47
54
|
const ariaProps = buildAriaProps(aria)
|
48
55
|
const dataProps = buildDataProps(data)
|
49
56
|
const classes = classnames(
|
@@ -70,7 +77,7 @@ const List = (props: ListProps) => {
|
|
70
77
|
role={role}
|
71
78
|
tabIndex={tabIndex}
|
72
79
|
>
|
73
|
-
{
|
80
|
+
{childrenWithProps}
|
74
81
|
</ol>
|
75
82
|
<Else />
|
76
83
|
<ul
|
@@ -81,7 +88,7 @@ const List = (props: ListProps) => {
|
|
81
88
|
role={role}
|
82
89
|
tabIndex={tabIndex}
|
83
90
|
>
|
84
|
-
{
|
91
|
+
{childrenWithProps}
|
85
92
|
</ul>
|
86
93
|
</If>
|
87
94
|
</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
|
-
|
20
|
-
|
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
|