playbook_ui 5.5.1 → 6.0.0
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 +0 -2
- data/app/pb_kits/playbook/data/menu.yml +0 -2
- data/app/pb_kits/playbook/index.js +0 -1
- data/app/pb_kits/playbook/packs/examples.js +0 -4
- data/app/pb_kits/playbook/pb_button/_button.jsx +2 -0
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.html.erb +21 -11
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss +10 -0
- data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +14 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb +26 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb +20 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb +22 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +5 -1
- data/app/pb_kits/playbook/pb_image/_image.html.erb +2 -1
- data/app/pb_kits/playbook/pb_image/_image.jsx +31 -8
- data/app/pb_kits/playbook/pb_image/docs/_default_image.jsx +3 -3
- data/app/pb_kits/playbook/pb_label_value/_label_value.html.erb +20 -2
- data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +109 -5
- data/app/pb_kits/playbook/pb_label_value/_label_value.scss +0 -10
- data/app/pb_kits/playbook/pb_label_value/docs/_description.md +3 -1
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.html.erb +39 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.jsx +50 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.md +1 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_dark.html.erb +43 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_dark.jsx +54 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.html.erb +72 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.jsx +92 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples_dark.html.erb +80 -0
- data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples_dark.jsx +101 -0
- data/app/pb_kits/playbook/pb_label_value/docs/example.yml +9 -0
- data/app/pb_kits/playbook/pb_label_value/docs/index.js +5 -0
- data/app/pb_kits/playbook/pb_label_value/label_value.rb +19 -2
- data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.jsx +5 -1
- data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss +12 -1
- data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.html.erb +9 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.jsx +26 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.md +1 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb +8 -1
- data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.html.erb +2 -2
- data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx +24 -10
- data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss +3 -1
- data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.rb +6 -0
- data/app/pb_kits/playbook/pb_title/_title.scss +3 -4
- data/app/pb_kits/playbook/pb_title/title.rb +2 -2
- data/app/pb_kits/playbook/plugins/pb_chart.js +49 -4
- data/lib/playbook/version.rb +1 -1
- metadata +18 -23
- data/app/pb_kits/playbook/pb_installer/_installer.html.erb +0 -16
- data/app/pb_kits/playbook/pb_installer/_installer.jsx +0 -54
- data/app/pb_kits/playbook/pb_installer/_installer.scss +0 -7
- data/app/pb_kits/playbook/pb_installer/docs/_installer_default.html.erb +0 -8
- data/app/pb_kits/playbook/pb_installer/docs/_installer_default.jsx +0 -16
- data/app/pb_kits/playbook/pb_installer/docs/example.yml +0 -9
- data/app/pb_kits/playbook/pb_installer/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_installer/installer.rb +0 -18
- data/app/pb_kits/playbook/pb_label_value/docs/index.html.erb +0 -25
- data/app/pb_kits/playbook/pb_logistic/_logistic.html.erb +0 -20
- data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +0 -111
- data/app/pb_kits/playbook/pb_logistic/_logistic.scss +0 -7
- data/app/pb_kits/playbook/pb_logistic/docs/_logistic_dark.html.erb +0 -27
- data/app/pb_kits/playbook/pb_logistic/docs/_logistic_dark.jsx +0 -39
- data/app/pb_kits/playbook/pb_logistic/docs/_logistic_default.html.erb +0 -24
- data/app/pb_kits/playbook/pb_logistic/docs/_logistic_default.jsx +0 -35
- data/app/pb_kits/playbook/pb_logistic/docs/example.yml +0 -11
- data/app/pb_kits/playbook/pb_logistic/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_logistic/logistic.rb +0 -31
@@ -0,0 +1,101 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Flex, LabelValue, Title } from '../../'
|
3
|
+
|
4
|
+
const LabelValueDetailsExamplesDark = () => {
|
5
|
+
return (
|
6
|
+
<div>
|
7
|
+
<Title
|
8
|
+
dark
|
9
|
+
marginBottom="sm"
|
10
|
+
size={4}
|
11
|
+
text="Patient Profile"
|
12
|
+
/>
|
13
|
+
|
14
|
+
<Flex>
|
15
|
+
<Flex
|
16
|
+
marginRight="lg"
|
17
|
+
orientation="column"
|
18
|
+
>
|
19
|
+
<LabelValue
|
20
|
+
dark
|
21
|
+
icon="user"
|
22
|
+
label="Age"
|
23
|
+
paddingBottom="sm"
|
24
|
+
title="24 yrs old"
|
25
|
+
variant="details"
|
26
|
+
/>
|
27
|
+
<LabelValue
|
28
|
+
dark
|
29
|
+
icon="weight"
|
30
|
+
label="Weight"
|
31
|
+
title="91 kg"
|
32
|
+
variant="details"
|
33
|
+
/>
|
34
|
+
</Flex>
|
35
|
+
<Flex
|
36
|
+
orientation="column"
|
37
|
+
>
|
38
|
+
<LabelValue
|
39
|
+
dark
|
40
|
+
icon="tint"
|
41
|
+
label="Blood"
|
42
|
+
paddingBottom="sm"
|
43
|
+
title="A +"
|
44
|
+
variant="details"
|
45
|
+
/>
|
46
|
+
<LabelValue
|
47
|
+
dark
|
48
|
+
icon="arrows-v"
|
49
|
+
label="Height"
|
50
|
+
title="187 cm"
|
51
|
+
variant="details"
|
52
|
+
/>
|
53
|
+
</Flex>
|
54
|
+
</Flex>
|
55
|
+
|
56
|
+
<br />
|
57
|
+
<br />
|
58
|
+
<br />
|
59
|
+
|
60
|
+
<Title
|
61
|
+
dark
|
62
|
+
marginBottom="sm"
|
63
|
+
size={4}
|
64
|
+
text="Workout Schedule"
|
65
|
+
/>
|
66
|
+
|
67
|
+
<LabelValue
|
68
|
+
active
|
69
|
+
dark
|
70
|
+
description="6 sets • 8 reps • 40-100 kg"
|
71
|
+
icon="dumbbell"
|
72
|
+
label="Chest"
|
73
|
+
paddingBottom="sm"
|
74
|
+
title="Bench Press"
|
75
|
+
variant="details"
|
76
|
+
/>
|
77
|
+
<LabelValue
|
78
|
+
active
|
79
|
+
dark
|
80
|
+
description="5 sets • 12 reps • 20-40 kg"
|
81
|
+
icon="dumbbell"
|
82
|
+
label="Biceps"
|
83
|
+
paddingBottom="sm"
|
84
|
+
title="Barbell Curl"
|
85
|
+
variant="details"
|
86
|
+
/>
|
87
|
+
<LabelValue
|
88
|
+
active
|
89
|
+
dark
|
90
|
+
description="8 sets • 8 reps • 40-120 kg"
|
91
|
+
icon="dumbbell"
|
92
|
+
label="Back"
|
93
|
+
paddingBottom="sm"
|
94
|
+
title="Back Squat"
|
95
|
+
variant="details"
|
96
|
+
/>
|
97
|
+
</div>
|
98
|
+
)
|
99
|
+
}
|
100
|
+
|
101
|
+
export default LabelValueDetailsExamplesDark
|
@@ -2,9 +2,18 @@ examples:
|
|
2
2
|
|
3
3
|
rails:
|
4
4
|
- label_value_default: Default
|
5
|
+
- label_value_details: Details
|
6
|
+
- label_value_details_examples: Other Examples
|
5
7
|
- label_value_dark: Dark
|
8
|
+
- label_value_details_dark: Details Dark
|
9
|
+
- label_value_details_examples_dark: Other Examples Dark
|
6
10
|
|
7
11
|
|
8
12
|
react:
|
9
13
|
- label_value_default: Default
|
14
|
+
- label_value_details: Details
|
15
|
+
- label_value_details_examples: Other Examples
|
10
16
|
- label_value_dark: Dark
|
17
|
+
- label_value_details_dark: Details Dark
|
18
|
+
- label_value_details_examples_dark: Other Examples Dark
|
19
|
+
|
@@ -1,2 +1,7 @@
|
|
1
1
|
export { default as LabelValueDefault } from './_label_value_default.jsx'
|
2
|
+
export { default as LabelValueDetails } from './_label_value_details.jsx'
|
3
|
+
export { default as LabelValueDetailsExamples } from './_label_value_details_examples.jsx'
|
4
|
+
|
2
5
|
export { default as LabelValueDark } from './_label_value_dark.jsx'
|
6
|
+
export { default as LabelValueDetailsDark } from './_label_value_details_dark.jsx'
|
7
|
+
export { default as LabelValueDetailsExamplesDark } from './_label_value_details_examples_dark.jsx'
|
@@ -8,11 +8,24 @@ module Playbook
|
|
8
8
|
partial "pb_label_value/label_value"
|
9
9
|
|
10
10
|
prop :label, required: true
|
11
|
-
prop :value
|
11
|
+
prop :value
|
12
12
|
prop :dark, type: Playbook::Props::Boolean, default: false
|
13
|
+
prop :variant, type: Playbook::Props::Enum,
|
14
|
+
values: %w[default details],
|
15
|
+
default: "default"
|
16
|
+
prop :icon
|
17
|
+
prop :description
|
18
|
+
prop :title
|
19
|
+
prop :date
|
20
|
+
prop :active, type: Playbook::Props::Boolean, default: false
|
21
|
+
|
13
22
|
|
14
23
|
def classname
|
15
|
-
generate_classname("pb_label_value_kit", dark_class)
|
24
|
+
generate_classname("pb_label_value_kit", variant_class, dark_class)
|
25
|
+
end
|
26
|
+
|
27
|
+
def date_element
|
28
|
+
"· #{date.strftime('%m/%d')}".html_safe
|
16
29
|
end
|
17
30
|
|
18
31
|
private
|
@@ -20,6 +33,10 @@ module Playbook
|
|
20
33
|
def dark_class
|
21
34
|
dark ? "dark" : nil
|
22
35
|
end
|
36
|
+
|
37
|
+
def variant_class
|
38
|
+
variant == "details" ? "details" : nil
|
39
|
+
end
|
23
40
|
end
|
24
41
|
end
|
25
42
|
end
|
@@ -14,6 +14,7 @@ type ProgressSimpleProps = {
|
|
14
14
|
muted: Boolean,
|
15
15
|
percent: String,
|
16
16
|
value: Number,
|
17
|
+
variant?: "default" | "positive" | "negative",
|
17
18
|
width: String,
|
18
19
|
}
|
19
20
|
|
@@ -26,12 +27,15 @@ const ProgressSimple = (props: ProgressSimpleProps) => {
|
|
26
27
|
muted = false,
|
27
28
|
percent = '',
|
28
29
|
value,
|
30
|
+
variant = 'default',
|
29
31
|
width = '100%',
|
30
32
|
} = props
|
31
33
|
const styles = {
|
32
34
|
width: width,
|
33
35
|
}
|
34
36
|
|
37
|
+
const variantStyle = variant == 'default' ? '' : variant
|
38
|
+
|
35
39
|
const valueStyles = {
|
36
40
|
width: percent ? `${percent}%` : `${(value * 100) / max}%`,
|
37
41
|
}
|
@@ -44,7 +48,7 @@ const ProgressSimple = (props: ProgressSimpleProps) => {
|
|
44
48
|
|
45
49
|
const kitClass = classnames(
|
46
50
|
className,
|
47
|
-
buildCss('pb_progress_simple_kit',
|
51
|
+
buildCss('pb_progress_simple_kit', { muted: muted }, variantStyle, align)
|
48
52
|
)
|
49
53
|
|
50
54
|
return (
|
@@ -1,5 +1,6 @@
|
|
1
1
|
@import "../tokens/colors";
|
2
2
|
@import "../tokens/opacity";
|
3
|
+
@import "../tokens/colors";
|
3
4
|
|
4
5
|
$pb_progress_simple_height: 4px;
|
5
6
|
|
@@ -22,8 +23,18 @@ $pb_progress_simple_height: 4px;
|
|
22
23
|
height: $pb_progress_simple_height;
|
23
24
|
border-radius: $pb_progress_simple_height/2;
|
24
25
|
background: rgba($primary, $opacity-1);
|
26
|
+
&[class*=_positive] {
|
27
|
+
.progress_simple_value {
|
28
|
+
background: $success;
|
29
|
+
}
|
30
|
+
}
|
31
|
+
&[class*=_negative] {
|
32
|
+
.progress_simple_value {
|
33
|
+
background: $error;
|
34
|
+
}
|
35
|
+
}
|
25
36
|
|
26
|
-
|
37
|
+
[class^=progress_simple_value] {
|
27
38
|
width: 0%;
|
28
39
|
height: 100%;
|
29
40
|
border-radius: $pb_progress_simple_height/2;
|
@@ -0,0 +1,9 @@
|
|
1
|
+
<%= pb_rails("progress_simple", props: { percent: 64.9, variant: "default" }) %>
|
2
|
+
|
3
|
+
<br>
|
4
|
+
|
5
|
+
<%= pb_rails("progress_simple", props: { percent: 90, variant: "positive" }) %>
|
6
|
+
|
7
|
+
<br>
|
8
|
+
|
9
|
+
<%= pb_rails("progress_simple", props: { percent: 10, variant: "negative" }) %>
|
@@ -0,0 +1,26 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { ProgressSimple } from '../..'
|
3
|
+
|
4
|
+
const ProgressSimpleVariants = () => {
|
5
|
+
return (
|
6
|
+
<div>
|
7
|
+
<ProgressSimple percent={64.5} />
|
8
|
+
|
9
|
+
<br />
|
10
|
+
|
11
|
+
<ProgressSimple
|
12
|
+
percent={90}
|
13
|
+
variant="positive"
|
14
|
+
/>
|
15
|
+
|
16
|
+
<br />
|
17
|
+
|
18
|
+
<ProgressSimple
|
19
|
+
percent={10}
|
20
|
+
variant="negative"
|
21
|
+
/>
|
22
|
+
</div>
|
23
|
+
)
|
24
|
+
}
|
25
|
+
|
26
|
+
export default ProgressSimpleVariants
|
@@ -0,0 +1 @@
|
|
1
|
+
Progress Simple can pass colors - primary, green and red. Variants names are `default`, `positive`, and `negative` respectively.
|
@@ -4,6 +4,7 @@ examples:
|
|
4
4
|
- progress_simple_default: Default
|
5
5
|
- progress_simple_value: Setting Values
|
6
6
|
- progress_simple_width: Progress Bar Width
|
7
|
+
- progress_simple_variants: Variants
|
7
8
|
- progress_simple_muted: Muted
|
8
9
|
- progress_simple_align: Align
|
9
10
|
|
@@ -12,6 +13,7 @@ examples:
|
|
12
13
|
- progress_simple_default: Default
|
13
14
|
- progress_simple_value: Setting Values
|
14
15
|
- progress_simple_width: Progress Bar Width
|
16
|
+
- progress_simple_variants: Variants
|
15
17
|
- progress_simple_muted: Muted
|
16
18
|
- progress_simple_align: Align
|
17
19
|
|
@@ -3,3 +3,5 @@ export { default as ProgressSimpleDefault } from './_progress_simple_default.jsx
|
|
3
3
|
export { default as ProgressSimpleMuted } from './_progress_simple_muted.jsx'
|
4
4
|
export { default as ProgressSimpleValue } from './_progress_simple_value.jsx'
|
5
5
|
export { default as ProgressSimpleWidth } from './_progress_simple_width.jsx'
|
6
|
+
export { default as ProgressSimpleVariants } from './_progress_simple_variants.jsx'
|
7
|
+
|
@@ -21,6 +21,9 @@ module Playbook
|
|
21
21
|
# Should we be allowing the user to pass this value at all?
|
22
22
|
# could this possibly be [sm, md, lg]?
|
23
23
|
prop :width, default: "100%"
|
24
|
+
prop :variant, type: Playbook::Props::Enum,
|
25
|
+
values: %w[default positive negative],
|
26
|
+
default: "default"
|
24
27
|
|
25
28
|
def number_value
|
26
29
|
validate_required_progress_props
|
@@ -53,7 +56,7 @@ module Playbook
|
|
53
56
|
end
|
54
57
|
|
55
58
|
def classname
|
56
|
-
generate_classname("pb_progress_simple_kit", muted_class, align)
|
59
|
+
generate_classname("pb_progress_simple_kit", muted_class, variant_class, align)
|
57
60
|
end
|
58
61
|
|
59
62
|
private
|
@@ -62,6 +65,10 @@ module Playbook
|
|
62
65
|
muted ? "muted" : nil
|
63
66
|
end
|
64
67
|
|
68
|
+
def variant_class
|
69
|
+
variant == "default" ? nil : variant
|
70
|
+
end
|
71
|
+
|
65
72
|
def validate_required_progress_props
|
66
73
|
unless percent || value || max
|
67
74
|
raise(
|
@@ -4,10 +4,10 @@
|
|
4
4
|
class: object.classname) do %>
|
5
5
|
<div class="pb_time_range_inline_wrapper">
|
6
6
|
<% if object.icon == true %>
|
7
|
-
<%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, text: pb_rails("icon", props: { icon: "clock", dark: object.dark, classname:"pb_time_range_inline_icon", fixed_width: true, size: object.size }) }) %>
|
7
|
+
<%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "clock", dark: object.dark, classname:"pb_time_range_inline_icon", fixed_width: true, size: object.size }) }) %>
|
8
8
|
<% end %>
|
9
9
|
<%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, text: object.format_start_time_string }) %>
|
10
|
-
<%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, classname:"
|
10
|
+
<%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, classname:"pb_time_range_inline_arrow", text: pb_rails("icon", props: { icon: "long-arrow-right", fixed_width: true, classname:"pb_time_range_inline_arrow"}) }) %>
|
11
11
|
<%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, text: object.format_end_time_string }) %>
|
12
12
|
<% if object.timezone == true %>
|
13
13
|
<%= pb_rails(object.text_kit, props: { tag: "span", color: object.text_timezone_color, classname:"pb_time_range_inline_timezone", text: object.pb_date_end_time.to_timezone.upcase }) %>
|
@@ -45,19 +45,33 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
|
|
45
45
|
startTime,
|
46
46
|
endTime,
|
47
47
|
} = props
|
48
|
-
const separator =
|
48
|
+
const separator = (
|
49
|
+
<Body color="light">
|
50
|
+
<Icon
|
51
|
+
className="pb_time_range_inline_arrow"
|
52
|
+
dark={dark}
|
53
|
+
fixedWidth
|
54
|
+
icon="long-arrow-right"
|
55
|
+
/>
|
56
|
+
</Body>
|
57
|
+
)
|
49
58
|
|
50
59
|
const iconContent = () => {
|
51
60
|
return (
|
52
61
|
<If condition={icon}>
|
53
|
-
<
|
54
|
-
|
55
|
-
dark={dark}
|
56
|
-
fixedWidth
|
57
|
-
icon="clock"
|
58
|
-
size={size}
|
62
|
+
<Body
|
63
|
+
color="light"
|
59
64
|
tag="span"
|
60
|
-
|
65
|
+
>
|
66
|
+
<Icon
|
67
|
+
className="pb_time_range_inline_icon"
|
68
|
+
dark={dark}
|
69
|
+
fixedWidth
|
70
|
+
icon="clock"
|
71
|
+
size={size}
|
72
|
+
tag="span"
|
73
|
+
/>
|
74
|
+
</Body>
|
61
75
|
</If>
|
62
76
|
)
|
63
77
|
}
|
@@ -80,7 +94,7 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
|
|
80
94
|
</time>
|
81
95
|
</Caption>
|
82
96
|
<Caption
|
83
|
-
className="
|
97
|
+
className="pb_time_range_inline_arrow"
|
84
98
|
dark={dark}
|
85
99
|
tag="span"
|
86
100
|
>
|
@@ -119,7 +133,7 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
|
|
119
133
|
</time>
|
120
134
|
</Body>
|
121
135
|
<Body
|
122
|
-
className="
|
136
|
+
className="pb_time_range_inline_arrow"
|
123
137
|
dark={dark}
|
124
138
|
tag="span"
|
125
139
|
>
|
@@ -1,3 +1,4 @@
|
|
1
|
+
|
1
2
|
[class^=pb_time_range_inline_kit] {
|
2
3
|
&[class*=_center] {
|
3
4
|
& > [class^=pb_caption],
|
@@ -19,7 +20,8 @@
|
|
19
20
|
}
|
20
21
|
[class^=pb_time_range_inline_wrapper] {
|
21
22
|
display: flex;
|
22
|
-
|
23
|
+
align-items: center;
|
24
|
+
[class*=pb_time_range_inline_arrow] {
|
23
25
|
margin-left: 4px;
|
24
26
|
margin-right: 4px;
|
25
27
|
}
|
@@ -17,8 +17,8 @@ module Playbook
|
|
17
17
|
default: "h3"
|
18
18
|
prop :text
|
19
19
|
prop :variant, type: Playbook::Props::Enum,
|
20
|
-
|
21
|
-
|
20
|
+
values: [nil, "link"],
|
21
|
+
default: nil
|
22
22
|
|
23
23
|
def classname
|
24
24
|
generate_classname("pb_title_kit", size, dark_class, variant)
|