playbook_ui 7.3.0.pre.alpha1 → 7.3.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/pb_bar_graph/bar_graph.rb +2 -1
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx +1 -1
- 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 -21
- 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 +19 -14
- data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +32 -1
- data/app/pb_kits/playbook/pb_gauge/_gauge.jsx +1 -1
- data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +2 -1
- data/app/pb_kits/playbook/pb_progress_step/progress_step.rb +2 -2
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +11 -7
- data/lib/playbook/version.rb +1 -1
- metadata +3 -8
- 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
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: fdfd0f438e77b126a7b74b3db809043b80d2996ffe7b7d25ff222778af93ce38
|
4
|
+
data.tar.gz: d657df63807e0befd169fd80a095f32a999fd3c5ecc9c07fa3de6d0a886a5116
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 4cf4dfbd8fa778828660e01899c168a240ea4102148fecafa3f40b48eafbfdd8e79a6aeae99aa92005f7bd90a934e4dc7d1c254568a0b05f95d1d2dd8f056d51
|
7
|
+
data.tar.gz: 998dafb493bd31563299d2d78912094d83f10a9d9e3ddbda97074acd12ba560f201e7cc53689d235d977621c7723170f2fd53b35b1e3a6f51a0a2f2915d3197b
|
@@ -16,7 +16,7 @@ module Playbook
|
|
16
16
|
prop :subtitle
|
17
17
|
prop :title
|
18
18
|
prop :x_axis_categories, type: Playbook::Props::Array,
|
19
|
-
|
19
|
+
default: []
|
20
20
|
prop :y_axis_min, type: Playbook::Props::Numeric
|
21
21
|
prop :y_axis_max, type: Playbook::Props::Numeric
|
22
22
|
prop :legend, type: Playbook::Props::Boolean,
|
@@ -32,6 +32,7 @@ module Playbook
|
|
32
32
|
def chart_options
|
33
33
|
{
|
34
34
|
id: id,
|
35
|
+
className: classname,
|
35
36
|
chartData: chart_data,
|
36
37
|
type: chart_type,
|
37
38
|
title: title,
|
@@ -101,7 +101,7 @@ const CircleChart = (props: CircleChartProps) => {
|
|
101
101
|
useEffect(() => {
|
102
102
|
if (componentDidMount.current) {
|
103
103
|
Highcharts.charts.forEach((chart) => {
|
104
|
-
if (chart.renderTo.id === id) {
|
104
|
+
if (chart && chart.renderTo.id === id) {
|
105
105
|
const updatedValueArray = chartData.map((obj) => {
|
106
106
|
return obj.value
|
107
107
|
})
|
@@ -1,70 +1,14 @@
|
|
1
1
|
<%= content_tag(:div,
|
2
2
|
id: object.id,
|
3
3
|
data: object.data,
|
4
|
-
class: object.classname
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
<%= pb_rails("body", props: {
|
11
|
-
color: "light",
|
12
|
-
tag: "div",
|
13
|
-
}) do %>
|
14
|
-
<%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
|
15
|
-
<% end %>
|
16
|
-
<% end %>
|
17
|
-
|
18
|
-
<!-- day_of_week -->
|
19
|
-
<% if object.show_day_of_week %>
|
20
|
-
<%= pb_rails("title", props: { tag: "div", text: object.day_of_week, size: 4 }) %>
|
21
|
-
<%= pb_rails("body", props: {
|
22
|
-
text: "•",
|
23
|
-
color: "light",
|
24
|
-
tag: "div",
|
25
|
-
}) %>
|
26
|
-
<% end %>
|
27
|
-
|
28
|
-
<!-- month day, year -->
|
29
|
-
|
30
|
-
<%# if not current year %>
|
31
|
-
<% if object.year.to_s == DateTime.now.year.to_s %>
|
32
|
-
<%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}", size: 4 }) %>
|
33
|
-
<%# if is current year %>
|
4
|
+
class: object.classname) do %>
|
5
|
+
<% if object.size == "lg" %>
|
6
|
+
<%= pb_rails("title", props: { text: object.lg_date, size: 3 }) %>
|
7
|
+
<% elsif object.size == "sm" %>
|
8
|
+
<%= pb_rails("icon", props: { icon: "calendar", fixed_width: true }) %>
|
9
|
+
<%= pb_rails("title", props: { tag: "span", text: object.sm_date, size: 4 }) %>
|
34
10
|
<% else %>
|
35
|
-
<%= pb_rails("title", props: {
|
36
|
-
<% end %>
|
37
|
-
|
38
|
-
<% else %>
|
39
|
-
|
40
|
-
<!-- icon -->
|
41
|
-
<% if object.show_icon %>
|
42
|
-
<%= pb_rails("body", props: {
|
43
|
-
color: "light",
|
44
|
-
tag: "div",
|
45
|
-
}) do %>
|
46
|
-
<%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
|
47
|
-
<% end %>
|
48
|
-
<% end %>
|
49
|
-
|
50
|
-
<!-- day_of_week -->
|
51
|
-
<% if object.show_day_of_week %>
|
52
|
-
<%= pb_rails("caption", props: { tag: "div", text: object.day_of_week }) %>
|
53
|
-
<%= pb_rails("caption", props: {
|
54
|
-
text: "•",
|
55
|
-
color: "light",
|
56
|
-
tag: "div",
|
57
|
-
}) %>
|
58
|
-
<% end %>
|
59
|
-
|
60
|
-
<!-- month day, year -->
|
61
|
-
|
62
|
-
<%# if not current year %>
|
63
|
-
<% if object.year.to_s == DateTime.now.year.to_s %>
|
64
|
-
<%= pb_rails("caption", props: { tag: "span", text: "#{object.month} #{object.day}" }) %>
|
65
|
-
<%# if is current year %>
|
66
|
-
<% else %>
|
67
|
-
<%= pb_rails("caption", props: { tag: "span", text: "#{object.month} #{object.day}, #{object.year}" }) %>
|
68
|
-
<% end %>
|
11
|
+
<%= pb_rails("title", props: { text: object.xs_date, size: 4 }) %>
|
69
12
|
<% end %>
|
70
13
|
<% end %>
|
14
|
+
|
@@ -2,131 +2,82 @@
|
|
2
2
|
|
3
3
|
import React from 'react'
|
4
4
|
import DateTime from '../pb_kit/dateTime.js'
|
5
|
-
import {
|
5
|
+
import { Icon } from '../'
|
6
6
|
import classnames from 'classnames'
|
7
7
|
import { globalProps } from '../utilities/globalProps.js'
|
8
|
-
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
9
8
|
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
showDayOfWeek?: boolean,
|
17
|
-
showIcon?: boolean,
|
18
|
-
size?: string,
|
19
|
-
value: string | date,
|
9
|
+
const defaultDateString = (value: DateTime) => {
|
10
|
+
const weekday = value.toWeekday().toUpperCase()
|
11
|
+
const month = value.toMonth().toUpperCase()
|
12
|
+
const day = value.toDay()
|
13
|
+
|
14
|
+
return `${weekday} · ${month} ${day}`
|
20
15
|
}
|
21
16
|
|
22
|
-
const
|
23
|
-
const
|
24
|
-
|
25
|
-
alignment = 'left',
|
26
|
-
className,
|
27
|
-
data = {},
|
28
|
-
id,
|
29
|
-
showDayOfWeek = false,
|
30
|
-
showIcon = false,
|
31
|
-
size = 'md',
|
32
|
-
value,
|
33
|
-
} = props
|
17
|
+
const largeDateString = (value: DateTime) => {
|
18
|
+
const month = value.toMonth().toUpperCase()
|
19
|
+
const day = value.toDay()
|
34
20
|
|
35
|
-
|
36
|
-
|
37
|
-
const month = dateTimestamp.toMonth()
|
38
|
-
const day = dateTimestamp.toDay()
|
39
|
-
const year = dateTimestamp.toYear()
|
40
|
-
const currentYear = new Date().getFullYear().toString()
|
21
|
+
return `${month} ${day}`
|
22
|
+
}
|
41
23
|
|
42
|
-
|
43
|
-
|
24
|
+
type DateSubcomponent = {
|
25
|
+
value: DateTime,
|
26
|
+
}
|
44
27
|
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
28
|
+
const ExtraSmallDate = ({ value, ...props }: DateSubcomponent) => (
|
29
|
+
<h3 className={classnames('pb_title_kit_4', globalProps(props))}>
|
30
|
+
{defaultDateString(value)}
|
31
|
+
</h3>
|
32
|
+
)
|
50
33
|
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
34
|
+
const SmallDate = ({ value, ...props }: DateSubcomponent) => (
|
35
|
+
<h3 className={classnames('pb_title_kit_4', globalProps(props))}>
|
36
|
+
<Icon
|
37
|
+
fixedWidth
|
38
|
+
icon="calendar"
|
39
|
+
/>
|
40
|
+
{defaultDateString(value)}
|
41
|
+
</h3>
|
42
|
+
)
|
59
43
|
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
<If condition={showIcon}>
|
98
|
-
<Body
|
99
|
-
className="pb_icon_kit_container"
|
100
|
-
color="light"
|
101
|
-
tag="span"
|
102
|
-
>
|
103
|
-
<Icon
|
104
|
-
fixedWidth
|
105
|
-
icon="calendar-alt"
|
106
|
-
/>
|
107
|
-
</Body>
|
108
|
-
</If>
|
109
|
-
<If condition={showDayOfWeek}>
|
110
|
-
<Caption tag="div">
|
111
|
-
{weekday}
|
112
|
-
</Caption>
|
113
|
-
<Caption
|
114
|
-
color="light"
|
115
|
-
tag="div"
|
116
|
-
text=" • "
|
117
|
-
/>
|
118
|
-
</If>
|
119
|
-
<Caption tag="span">
|
120
|
-
{month}
|
121
|
-
{' '}
|
122
|
-
{day}
|
123
|
-
<If condition={currentYear != year}>
|
124
|
-
{`, ${year}`}
|
125
|
-
</If>
|
126
|
-
</Caption>
|
127
|
-
</>
|
128
|
-
</If>
|
129
|
-
</div>
|
44
|
+
const LargeDate = ({ value, ...props }: DateSubcomponent) => (
|
45
|
+
<h3 className={classnames('pb_title_kit_3', globalProps(props))}>
|
46
|
+
{largeDateString(value)}
|
47
|
+
</h3>
|
48
|
+
)
|
49
|
+
|
50
|
+
type PbDateProps = {
|
51
|
+
size?: "xs" | "sm" | "lg",
|
52
|
+
value?: string,
|
53
|
+
className?: string
|
54
|
+
}
|
55
|
+
|
56
|
+
const PbDate = ({ size, value, className, ...props }: PbDateProps) => {
|
57
|
+
const date = new DateTime({ value: value })
|
58
|
+
|
59
|
+
if (size == 'xs')
|
60
|
+
return (
|
61
|
+
<ExtraSmallDate
|
62
|
+
{...props}
|
63
|
+
className={className}
|
64
|
+
value={date}
|
65
|
+
/>
|
66
|
+
)
|
67
|
+
if (size == 'lg')
|
68
|
+
return (
|
69
|
+
<LargeDate
|
70
|
+
{...props}
|
71
|
+
className={className}
|
72
|
+
value={date}
|
73
|
+
/>
|
74
|
+
)
|
75
|
+
return (
|
76
|
+
<SmallDate
|
77
|
+
{...props}
|
78
|
+
className={className}
|
79
|
+
value={date}
|
80
|
+
/>
|
130
81
|
)
|
131
82
|
}
|
132
83
|
|
@@ -1,32 +1,2 @@
|
|
1
1
|
@import "../pb_icon/icon";
|
2
2
|
@import "../pb_title/title";
|
3
|
-
|
4
|
-
[class^=pb_date_kit] {
|
5
|
-
display: flex;
|
6
|
-
flex-direction: row;
|
7
|
-
align-items: center;
|
8
|
-
> div, .pb_icon_kit_container {
|
9
|
-
margin-right: 4px !important;
|
10
|
-
}
|
11
|
-
|
12
|
-
&[class*=_center] {
|
13
|
-
display: flex;
|
14
|
-
flex-direction: row;
|
15
|
-
align-items: center;
|
16
|
-
justify-content: center;
|
17
|
-
margin-right: 4px !important;
|
18
|
-
}
|
19
|
-
|
20
|
-
&[class*=_right] {
|
21
|
-
display: flex;
|
22
|
-
flex-direction: row;
|
23
|
-
align-items: center;
|
24
|
-
justify-content: flex-end;
|
25
|
-
margin-left: 4px !important;
|
26
|
-
}
|
27
|
-
&.dark {
|
28
|
-
[class^=pb_title_kit] {
|
29
|
-
color: $text_dk_default !important;
|
30
|
-
}
|
31
|
-
}
|
32
|
-
}
|
@@ -10,37 +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
|
-
# Size to be deprecated.
|
21
13
|
prop :size, type: Playbook::Props::Enum,
|
22
|
-
values: %w[lg
|
23
|
-
default: "
|
14
|
+
values: %w[lg sm xs],
|
15
|
+
default: "sm"
|
24
16
|
prop :timezone, default: "America/New_York"
|
25
17
|
|
26
18
|
def classname
|
27
|
-
generate_classname("pb_date_kit"
|
19
|
+
generate_classname("pb_date_kit")
|
28
20
|
end
|
29
21
|
|
30
|
-
def
|
31
|
-
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
|
32
24
|
end
|
33
25
|
|
34
|
-
def
|
35
|
-
pb_date_time.to_day
|
26
|
+
def lg_date
|
27
|
+
"#{pb_date_time.to_month.upcase} #{pb_date_time.to_day}"
|
36
28
|
end
|
37
29
|
|
38
|
-
def
|
39
|
-
pb_date_time.to_month.
|
40
|
-
end
|
41
|
-
|
42
|
-
def year
|
43
|
-
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
|
44
32
|
end
|
45
33
|
|
46
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,20 +3,25 @@
|
|
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
|
-
|
6
|
+
<% if object.children %>
|
7
|
+
<div class="input_wrapper">
|
8
|
+
<%= capture(&object.children) %>
|
9
|
+
<% else %>
|
10
|
+
<div class="input_wrapper">
|
11
|
+
<%= pb_rails("text_input", props: {
|
12
|
+
aria: object.input_aria,
|
13
|
+
autocomplete: false,
|
14
|
+
dark: object.dark,
|
15
|
+
data: object.input_data,
|
16
|
+
disabled: object.disable_input,
|
17
|
+
error: object.error,
|
18
|
+
id: object.picker_id,
|
19
|
+
label: object.hide_label ? nil : object.label,
|
20
|
+
name: object.name,
|
21
|
+
placeholder: object.placeholder,
|
22
|
+
required: object.required,
|
23
|
+
}) %>
|
24
|
+
<% end %>
|
20
25
|
<% if !object.hide_icon %>
|
21
26
|
<div
|
22
27
|
class="<%= object.icon_wrapper_class %>"
|
@@ -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: {
|
55
|
+
<%= form.date_picker :example_date_picker_field_1, props: { label: true } %>
|
56
56
|
|
57
57
|
<%= form.actions do |action| %>
|
58
58
|
<%= action.submit %>
|
@@ -8,12 +8,43 @@ 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
|
-
|
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
|
+
puts "
|
33
|
+
|
34
|
+
|
35
|
+
|
36
|
+
|
37
|
+
|
38
|
+
#{props}
|
39
|
+
|
40
|
+
|
41
|
+
|
42
|
+
|
43
|
+
"
|
44
|
+
|
45
|
+
@template.pb_rails("date_picker", props: props) do
|
46
|
+
input
|
47
|
+
end
|
17
48
|
end
|
18
49
|
end
|
19
50
|
end
|
@@ -88,7 +88,7 @@ const Gauge = (props: GaugeProps) => {
|
|
88
88
|
useEffect(() => {
|
89
89
|
if (componentDidMount.current) {
|
90
90
|
Highcharts.charts.forEach((chart) => {
|
91
|
-
if (chart.renderTo.id === id) {
|
91
|
+
if (chart && chart.renderTo.id === id) {
|
92
92
|
chart.series[0].setData([chartData[0].value])
|
93
93
|
chart.series[0].data[0].name = chartData[0].name
|
94
94
|
}
|
@@ -16,7 +16,7 @@ module Playbook
|
|
16
16
|
prop :subtitle
|
17
17
|
prop :title
|
18
18
|
prop :x_axis_categories, type: Playbook::Props::Array,
|
19
|
-
|
19
|
+
default: []
|
20
20
|
prop :y_axis_min, type: Playbook::Props::Numeric
|
21
21
|
prop :y_axis_max, type: Playbook::Props::Numeric
|
22
22
|
prop :legend, type: Playbook::Props::Boolean,
|
@@ -32,6 +32,7 @@ module Playbook
|
|
32
32
|
def chart_options
|
33
33
|
{
|
34
34
|
id: id,
|
35
|
+
className: classname,
|
35
36
|
chartData: chart_data,
|
36
37
|
type: chart_type,
|
37
38
|
title: title,
|
@@ -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
|
@@ -6,13 +6,13 @@ module Playbook
|
|
6
6
|
include Playbook::Props
|
7
7
|
|
8
8
|
prop :async, type: Playbook::Props::Boolean,
|
9
|
-
|
9
|
+
default: false
|
10
10
|
prop :label
|
11
11
|
prop :load_options
|
12
12
|
prop :name
|
13
13
|
prop :options, type: Playbook::Props::HashArray, default: []
|
14
14
|
prop :pills, type: Playbook::Props::Boolean,
|
15
|
-
|
15
|
+
default: false
|
16
16
|
|
17
17
|
prop :placeholder
|
18
18
|
prop :search_term_minimum_length, default: 3
|
@@ -38,13 +38,17 @@ module Playbook
|
|
38
38
|
isMulti: true,
|
39
39
|
label: label,
|
40
40
|
options: options,
|
41
|
-
placeholder: placeholder
|
41
|
+
placeholder: placeholder,
|
42
42
|
}
|
43
43
|
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
44
|
+
if async
|
45
|
+
base_options.merge!(
|
46
|
+
{
|
47
|
+
async: true,
|
48
|
+
loadOptions: load_options,
|
49
|
+
}
|
50
|
+
)
|
51
|
+
end
|
48
52
|
|
49
53
|
base_options
|
50
54
|
end
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 7.3.0.pre.
|
4
|
+
version: 7.3.0.pre.alpha6
|
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: 2020-10-
|
12
|
+
date: 2020-10-21 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -668,14 +668,10 @@ files:
|
|
668
668
|
- app/pb_kits/playbook/pb_date/_date.jsx
|
669
669
|
- app/pb_kits/playbook/pb_date/_date.scss
|
670
670
|
- app/pb_kits/playbook/pb_date/date.rb
|
671
|
-
- app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb
|
672
|
-
- app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx
|
673
671
|
- app/pb_kits/playbook/pb_date/docs/_date_default.html.erb
|
674
672
|
- app/pb_kits/playbook/pb_date/docs/_date_default.jsx
|
675
673
|
- app/pb_kits/playbook/pb_date/docs/_date_timezone.html.erb
|
676
674
|
- app/pb_kits/playbook/pb_date/docs/_date_timezone.md
|
677
|
-
- app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb
|
678
|
-
- app/pb_kits/playbook/pb_date/docs/_date_variants.jsx
|
679
675
|
- app/pb_kits/playbook/pb_date/docs/_description.md
|
680
676
|
- app/pb_kits/playbook/pb_date/docs/example.yml
|
681
677
|
- app/pb_kits/playbook/pb_date/docs/index.js
|
@@ -1874,8 +1870,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
1874
1870
|
- !ruby/object:Gem::Version
|
1875
1871
|
version: 1.3.1
|
1876
1872
|
requirements: []
|
1877
|
-
|
1878
|
-
rubygems_version: 2.7.3
|
1873
|
+
rubygems_version: 3.1.4
|
1879
1874
|
signing_key:
|
1880
1875
|
specification_version: 4
|
1881
1876
|
summary: Playbook Design System
|
@@ -1,24 +0,0 @@
|
|
1
|
-
<%= pb_rails("date", props: {
|
2
|
-
date: DateTime.now,
|
3
|
-
show_icon: true,
|
4
|
-
show_day_of_week: true
|
5
|
-
}) %>
|
6
|
-
|
7
|
-
<br><br>
|
8
|
-
|
9
|
-
<%= pb_rails("date", props: {
|
10
|
-
date: DateTime.now,
|
11
|
-
show_icon: true,
|
12
|
-
show_day_of_week: true,
|
13
|
-
alignment: "center"
|
14
|
-
}) %>
|
15
|
-
|
16
|
-
<br><br>
|
17
|
-
|
18
|
-
<%= pb_rails("date", props: {
|
19
|
-
date: DateTime.now,
|
20
|
-
show_icon: true,
|
21
|
-
show_day_of_week: true,
|
22
|
-
alignment: "right"
|
23
|
-
}) %>
|
24
|
-
|
@@ -1,35 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Date as FormattedDate } from '../..'
|
3
|
-
|
4
|
-
const DateAlignment = (props) => {
|
5
|
-
return (
|
6
|
-
<div>
|
7
|
-
<FormattedDate
|
8
|
-
dayOfWeek
|
9
|
-
icon
|
10
|
-
value="1995-12-25"
|
11
|
-
{...props}
|
12
|
-
/>
|
13
|
-
|
14
|
-
<br />
|
15
|
-
|
16
|
-
<FormattedDate
|
17
|
-
alignment="center"
|
18
|
-
dayOfWeek
|
19
|
-
icon
|
20
|
-
value="2020-12-25"
|
21
|
-
{...props}
|
22
|
-
/>
|
23
|
-
|
24
|
-
<br />
|
25
|
-
|
26
|
-
<FormattedDate
|
27
|
-
alignment="right"
|
28
|
-
value={new Date()}
|
29
|
-
{...props}
|
30
|
-
/>
|
31
|
-
</div>
|
32
|
-
)
|
33
|
-
}
|
34
|
-
|
35
|
-
export default DateAlignment
|
@@ -1,27 +0,0 @@
|
|
1
|
-
<div>
|
2
|
-
<%= pb_rails("date", props: {
|
3
|
-
date: DateTime.now,
|
4
|
-
}) %>
|
5
|
-
|
6
|
-
<br>
|
7
|
-
|
8
|
-
<%= pb_rails("date", props: {
|
9
|
-
date: DateTime.now,
|
10
|
-
show_icon: true
|
11
|
-
}) %>
|
12
|
-
|
13
|
-
<br>
|
14
|
-
|
15
|
-
<%= pb_rails("date", props: {
|
16
|
-
date: DateTime.now,
|
17
|
-
show_day_of_week: true
|
18
|
-
}) %>
|
19
|
-
|
20
|
-
<br>
|
21
|
-
|
22
|
-
<%= pb_rails("date", props: {
|
23
|
-
date: DateTime.now,
|
24
|
-
show_icon: true,
|
25
|
-
show_day_of_week: true
|
26
|
-
}) %>
|
27
|
-
</div>
|
@@ -1,43 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Date as FormattedDate } from '../..'
|
3
|
-
|
4
|
-
const DateVariants = (props) => {
|
5
|
-
return (
|
6
|
-
<div>
|
7
|
-
<FormattedDate
|
8
|
-
value="1995-12-25"
|
9
|
-
{...props}
|
10
|
-
/>
|
11
|
-
|
12
|
-
<br />
|
13
|
-
<br />
|
14
|
-
|
15
|
-
<FormattedDate
|
16
|
-
showIcon
|
17
|
-
value="1995-12-25"
|
18
|
-
{...props}
|
19
|
-
/>
|
20
|
-
|
21
|
-
<br />
|
22
|
-
<br />
|
23
|
-
|
24
|
-
<FormattedDate
|
25
|
-
showDayOfWeek
|
26
|
-
value="1995-12-25"
|
27
|
-
{...props}
|
28
|
-
/>
|
29
|
-
|
30
|
-
<br />
|
31
|
-
<br />
|
32
|
-
|
33
|
-
<FormattedDate
|
34
|
-
showDayOfWeek
|
35
|
-
showIcon
|
36
|
-
value="1995-12-25"
|
37
|
-
{...props}
|
38
|
-
/>
|
39
|
-
</div>
|
40
|
-
)
|
41
|
-
}
|
42
|
-
|
43
|
-
export default DateVariants
|