playbook_ui 12.13.0 → 12.14.0
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_card/_card.scss +2 -3
- data/app/pb_kits/playbook/pb_card/card.rb +1 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb +22 -35
- data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +34 -37
- data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +27 -44
- data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx +21 -33
- data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb +7 -7
- data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx +6 -8
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +8 -1
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +4 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx +43 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md +3 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_layout/_layout.tsx +6 -1
- data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.html.erb +4 -4
- data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.jsx +5 -5
- data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.html.erb +3 -3
- data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx +3 -3
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +23 -9
- data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.html.erb +6 -6
- data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx +6 -6
- data/app/pb_kits/playbook/tokens/_colors.scss +55 -15
- data/app/pb_kits/playbook/tokens/_positioning.scss +13 -0
- data/app/pb_kits/playbook/utilities/_colors.scss +7 -13
- data/app/pb_kits/playbook/utilities/_positioning.scss +20 -0
- data/app/pb_kits/playbook/utilities/globalProps.ts +11 -2
- data/lib/playbook/classnames.rb +1 -0
- data/lib/playbook/kit_base.rb +2 -0
- data/lib/playbook/position.rb +33 -0
- data/lib/playbook/version.rb +2 -2
- metadata +5 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a42d45fa9c0cb3563d9253c5c676edcd535e813873bca8f31162258372554bb9
|
|
4
|
+
data.tar.gz: 162a8abeed8d622e81d218e90c6a1d693a17d068d489234cbd0fb39f2c50ac7e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: de1b0f03c8ca91aedae5581617fab0920bde4bfbaa034137021a0f3fe87932a6cb963231f9add0470a606046341d3c5a0b8d3819803ae7eb34af9415f4c340b6
|
|
7
|
+
data.tar.gz: e5f9702e6a3f812e3ae0080cc604406fbc7f115f2b1fcf7f83e2537e9502a833d93436abe3f3c9c0795d013791f62ba43631be32298891143a8fbf58728f2ef4
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
@import "card_mixin";
|
|
2
|
+
@import "../utilities/colors";
|
|
2
3
|
|
|
3
4
|
[class^=pb_card_kit] {
|
|
4
5
|
@include pb_card;
|
|
@@ -29,9 +30,7 @@
|
|
|
29
30
|
@each $color_name, $color_value in $pb_card_header_colors {
|
|
30
31
|
&[class*=_#{$color_name}] {
|
|
31
32
|
@include pb_card_header_color($color_value);
|
|
32
|
-
|
|
33
|
-
color: lightenText($color_value);
|
|
34
|
-
}
|
|
33
|
+
color: lightenText($color_value);
|
|
35
34
|
}
|
|
36
35
|
}
|
|
37
36
|
&[class*=_white] {
|
|
@@ -15,7 +15,7 @@ module Playbook
|
|
|
15
15
|
values: %w[xs sm md lg xl none rounded],
|
|
16
16
|
default: "md"
|
|
17
17
|
prop :background, type: Playbook::Props::Enum,
|
|
18
|
-
values: %w[white light dark windows siding doors solar roofing gutters insulation none],
|
|
18
|
+
values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight windows siding doors solar roofing gutters insulation none],
|
|
19
19
|
default: "none"
|
|
20
20
|
|
|
21
21
|
def classname
|
|
@@ -1,57 +1,44 @@
|
|
|
1
|
-
<%= pb_rails("title", props: { text: "Card Colors", tag: "h4", size: 4 }) %>
|
|
1
|
+
<%= pb_rails("title", props: { text: "Card Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
<%= pb_rails("card", props: { background: "dark", dark: true }) do %>
|
|
3
|
+
<%= pb_rails("card", props: { background: "dark", dark: true, margin_bottom: "sm" }) do %>
|
|
6
4
|
<%= pb_rails("body", props: {
|
|
7
5
|
text: "Dark",
|
|
8
|
-
|
|
6
|
+
dark: true
|
|
9
7
|
}) %>
|
|
10
8
|
<% end %>
|
|
11
9
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
<%= pb_rails("card") do %>
|
|
10
|
+
<%= pb_rails("card", props: { margin_bottom: "sm" }) do %>
|
|
15
11
|
<%= pb_rails("body", props: {
|
|
16
|
-
text: "White"
|
|
12
|
+
text: "White / Default"
|
|
17
13
|
}) %>
|
|
18
14
|
<% end %>
|
|
19
15
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
<%= pb_rails("card", props: { background: "light" }) do %>
|
|
16
|
+
<%= pb_rails("card", props: { background: "light", margin_bottom: "sm" }) do %>
|
|
23
17
|
<%= pb_rails("body", props: {
|
|
24
|
-
|
|
25
|
-
|
|
18
|
+
text: "Light",
|
|
19
|
+
dark: false
|
|
20
|
+
}) %>
|
|
26
21
|
<% end %>
|
|
27
22
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
<%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4 }) %>
|
|
31
|
-
|
|
32
|
-
<br>
|
|
23
|
+
<%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
|
|
33
24
|
|
|
34
|
-
<%= pb_rails("card", props: { background: "
|
|
25
|
+
<%= pb_rails("card", props: { background: "product_1_background", dark: true, margin_bottom: "sm" }) do %>
|
|
35
26
|
<%= pb_rails("body", props: {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}) %>
|
|
27
|
+
text: "Product 1 Background",
|
|
28
|
+
dark: true
|
|
29
|
+
}) %>
|
|
39
30
|
<% end %>
|
|
40
31
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
<%= pb_rails("card", props: { background: "siding" }) do %>
|
|
32
|
+
<%= pb_rails("card", props: { background: "product_7_highlight", margin_bottom: "sm" }) do %>
|
|
44
33
|
<%= pb_rails("body", props: {
|
|
45
|
-
|
|
46
|
-
|
|
34
|
+
text: "Product 7 Highlight",
|
|
35
|
+
dark: true
|
|
36
|
+
}) %>
|
|
47
37
|
<% end %>
|
|
48
38
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
<%= pb_rails("card", props: { background: "doors" }) do %>
|
|
39
|
+
<%= pb_rails("card", props: { background: "product_2_background", margin_bottom: "sm" }) do %>
|
|
52
40
|
<%= pb_rails("body", props: {
|
|
53
|
-
|
|
54
|
-
|
|
41
|
+
text: "Product 2 Highlight",
|
|
42
|
+
dark: true
|
|
43
|
+
}) %>
|
|
55
44
|
<% end %>
|
|
56
|
-
|
|
57
|
-
<br>
|
|
@@ -8,91 +8,88 @@ const CardBackground = (props) => {
|
|
|
8
8
|
<div>
|
|
9
9
|
<Title
|
|
10
10
|
{...props}
|
|
11
|
+
marginBottom="sm"
|
|
11
12
|
size={4}
|
|
12
13
|
tag="h4"
|
|
13
14
|
text="Card Colors"
|
|
14
15
|
/>
|
|
15
|
-
|
|
16
|
-
<br />
|
|
17
|
-
|
|
18
16
|
<Card
|
|
19
17
|
background="dark"
|
|
20
18
|
dark
|
|
19
|
+
marginBottom="sm"
|
|
21
20
|
{...props}
|
|
22
21
|
>
|
|
23
22
|
<Body
|
|
24
|
-
|
|
23
|
+
dark
|
|
25
24
|
text="Dark"
|
|
26
|
-
{...props}
|
|
27
25
|
/>
|
|
28
26
|
</Card>
|
|
29
27
|
|
|
30
|
-
<
|
|
31
|
-
|
|
32
|
-
|
|
28
|
+
<Card
|
|
29
|
+
marginBottom="sm"
|
|
30
|
+
{...props}
|
|
31
|
+
>
|
|
33
32
|
<Body
|
|
34
|
-
text="White"
|
|
33
|
+
text="White / Default"
|
|
34
|
+
{...props}
|
|
35
35
|
/>
|
|
36
36
|
</Card>
|
|
37
37
|
|
|
38
|
-
<br />
|
|
39
38
|
|
|
40
39
|
<Card
|
|
41
40
|
background="light"
|
|
41
|
+
marginBottom="sm"
|
|
42
42
|
{...props}
|
|
43
43
|
>
|
|
44
|
-
<Body
|
|
45
|
-
text="Light"
|
|
46
|
-
/>
|
|
44
|
+
<Body text="Light" />
|
|
47
45
|
</Card>
|
|
48
46
|
|
|
49
|
-
|
|
50
|
-
|
|
47
|
+
|
|
51
48
|
<Title
|
|
52
49
|
{...props}
|
|
50
|
+
marginBottom="sm"
|
|
53
51
|
size={4}
|
|
54
52
|
tag="h4"
|
|
55
53
|
text="Product Colors"
|
|
56
54
|
/>
|
|
57
55
|
|
|
58
|
-
<br />
|
|
59
|
-
|
|
60
56
|
<Card
|
|
61
|
-
background="
|
|
57
|
+
background="product_1_background"
|
|
58
|
+
marginBottom="sm"
|
|
62
59
|
{...props}
|
|
63
|
-
|
|
60
|
+
>
|
|
64
61
|
<Body
|
|
65
|
-
|
|
66
|
-
text="
|
|
67
|
-
{...props}
|
|
62
|
+
dark
|
|
63
|
+
text="Product 1 Background"
|
|
68
64
|
/>
|
|
69
65
|
</Card>
|
|
70
66
|
|
|
71
|
-
|
|
67
|
+
|
|
72
68
|
|
|
73
|
-
<Card
|
|
74
|
-
background="
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
<Body
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
69
|
+
<Card
|
|
70
|
+
background="product_7_highlight"
|
|
71
|
+
marginBottom="sm"
|
|
72
|
+
{...props} >
|
|
73
|
+
<Body
|
|
74
|
+
dark
|
|
75
|
+
text="Product 7 Highlight"
|
|
76
|
+
/>
|
|
81
77
|
</Card>
|
|
82
78
|
|
|
83
|
-
|
|
79
|
+
|
|
84
80
|
|
|
85
|
-
<Card
|
|
86
|
-
background="
|
|
81
|
+
<Card
|
|
82
|
+
background="product_2_highlight"
|
|
83
|
+
marginBottom="sm"
|
|
87
84
|
{...props}
|
|
88
85
|
>
|
|
89
86
|
<Body
|
|
90
|
-
|
|
91
|
-
|
|
87
|
+
dark
|
|
88
|
+
text="Product 2 Highlight"
|
|
92
89
|
/>
|
|
93
90
|
</Card>
|
|
94
91
|
|
|
95
|
-
|
|
92
|
+
|
|
96
93
|
</div>
|
|
97
94
|
)
|
|
98
95
|
}
|
|
@@ -1,74 +1,57 @@
|
|
|
1
|
-
<%= pb_rails("title", props: { text: "Category Colors", tag: "h4", size: 4 }) %>
|
|
1
|
+
<%= pb_rails("title", props: { text: "Category Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
<%= pb_rails("card/card_header", props: { padding: "sm" }) do %>
|
|
7
|
-
<%= pb_rails("body", props: { text: "category_1", dark: true }) %>
|
|
8
|
-
<% end %>
|
|
9
|
-
<%= pb_rails("card/card_body", props: { padding: "md" }) do %>
|
|
10
|
-
Body
|
|
11
|
-
<% end %>
|
|
3
|
+
<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
|
|
4
|
+
<%= pb_rails("card/card_header", props: { padding: "sm" }) do %>
|
|
5
|
+
<%= pb_rails("body", props: { text: "Category 1", dark: true }) %>
|
|
12
6
|
<% end %>
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
<%= pb_rails("card", props: { padding: "none", header: true}) do %>
|
|
17
|
-
<%= pb_rails("card/card_header", props: { padding: "sm", header_color: "category_2" }) do %>
|
|
18
|
-
<%= pb_rails("body", props: { text: "category_2", dark: true }) %>
|
|
19
|
-
|
|
20
|
-
<% end %>
|
|
21
|
-
<%= pb_rails("card/card_body", props: { padding: "md" }) do %>
|
|
22
|
-
Body
|
|
23
|
-
<% end %>
|
|
7
|
+
<%= pb_rails("card/card_body", props: { padding: "md" }) do %>
|
|
8
|
+
Category 1
|
|
24
9
|
<% end %>
|
|
10
|
+
<% end %>
|
|
25
11
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
<%= pb_rails("
|
|
12
|
+
<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
|
|
13
|
+
<%= pb_rails("card/card_header", props: { padding: "sm", header_color: "category_3" }) do %>
|
|
14
|
+
<%= pb_rails("body", props: { text: "Category 3", dark: false }) %>
|
|
15
|
+
<% end %>
|
|
16
|
+
<%= pb_rails("card/card_body", props: { padding: "md", }) do %>
|
|
17
|
+
Body
|
|
18
|
+
<% end %>
|
|
19
|
+
<% end %>
|
|
29
20
|
|
|
30
|
-
|
|
21
|
+
<%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
|
|
31
22
|
|
|
32
|
-
<%= pb_rails("card", props: { padding: "none", header: true}) do %>
|
|
33
|
-
<%= pb_rails("card/card_header", props: { padding: "sm", header_color: "
|
|
34
|
-
<%= pb_rails("body", props: { text: "
|
|
23
|
+
<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
|
|
24
|
+
<%= pb_rails("card/card_header", props: { padding: "sm", header_color: "product_2_background" }) do %>
|
|
25
|
+
<%= pb_rails("body", props: { text: "Product 2 Background", dark: true }) %>
|
|
35
26
|
<% end %>
|
|
36
27
|
<%= pb_rails("card/card_body", props: { padding: "md" }) do %>
|
|
37
28
|
Body
|
|
38
29
|
<% end %>
|
|
39
30
|
<% end %>
|
|
40
31
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
<%= pb_rails("
|
|
44
|
-
<%= pb_rails("card/card_header", props: { padding: "sm", header_color: "gutters" }) do %>
|
|
45
|
-
<%= pb_rails("body", props: { text: "Gutters", dark: true }) %>
|
|
32
|
+
<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
|
|
33
|
+
<%= pb_rails("card/card_header", props: { padding: "sm", header_color: "product_6_background" }) do %>
|
|
34
|
+
<%= pb_rails("body", props: { text: "Product 6 Background", dark: true }) %>
|
|
46
35
|
<% end %>
|
|
47
36
|
<%= pb_rails("card/card_body", props: { padding: "md" }) do %>
|
|
48
37
|
Body
|
|
49
38
|
<% end %>
|
|
50
39
|
<% end %>
|
|
51
40
|
|
|
52
|
-
|
|
41
|
+
<%= pb_rails("title", props: { text: "Background Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
|
|
53
42
|
|
|
54
|
-
<%= pb_rails("
|
|
55
|
-
|
|
56
|
-
<br>
|
|
57
|
-
|
|
58
|
-
<%= pb_rails("card", props: { padding: "none", header: true}) do %>
|
|
43
|
+
<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
|
|
59
44
|
<%= pb_rails("card/card_header", props: { padding: "sm", header_color: "white" }) do %>
|
|
60
|
-
<%= pb_rails("body", props: { text: "White" }) %>
|
|
45
|
+
<%= pb_rails("body", props: { text: "White", dark: false }) %>
|
|
61
46
|
<% end %>
|
|
62
47
|
<%= pb_rails("card/card_body", props: { padding: "md" }) do %>
|
|
63
48
|
Body
|
|
64
49
|
<% end %>
|
|
65
50
|
<% end %>
|
|
66
51
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
<%= pb_rails("card", props: { padding: "none", header: true}) do %>
|
|
52
|
+
<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
|
|
70
53
|
<%= pb_rails("card/card_header", props: { padding: "sm", header_color: "bg_dark" }) do %>
|
|
71
|
-
<%= pb_rails("body", props: { text: "Dark" }) %>
|
|
54
|
+
<%= pb_rails("body", props: { text: "Dark", dark: true }) %>
|
|
72
55
|
<% end %>
|
|
73
56
|
<%= pb_rails("card/card_body", props: { padding: "md" }) do %>
|
|
74
57
|
Body
|
|
@@ -9,21 +9,21 @@ const CardHeader = (props) => {
|
|
|
9
9
|
<div>
|
|
10
10
|
<Title
|
|
11
11
|
{...props}
|
|
12
|
+
marginBottom='sm'
|
|
12
13
|
size={4}
|
|
13
14
|
tag="h4"
|
|
14
15
|
text="Category Colors"
|
|
15
16
|
/>
|
|
16
17
|
|
|
17
|
-
<br />
|
|
18
|
-
|
|
19
18
|
<Card
|
|
20
19
|
{...props}
|
|
20
|
+
marginBottom='sm'
|
|
21
21
|
padding="none"
|
|
22
22
|
>
|
|
23
|
-
<Card.Header>
|
|
23
|
+
<Card.Header headerColor="category_1" >
|
|
24
24
|
<Body
|
|
25
|
-
|
|
26
|
-
text="
|
|
25
|
+
dark
|
|
26
|
+
text="Category 1"
|
|
27
27
|
/>
|
|
28
28
|
</Card.Header>
|
|
29
29
|
<Card.Body>
|
|
@@ -34,19 +34,15 @@ const CardHeader = (props) => {
|
|
|
34
34
|
</Card.Body>
|
|
35
35
|
</Card>
|
|
36
36
|
|
|
37
|
-
<br />
|
|
38
|
-
|
|
39
37
|
<Card
|
|
40
38
|
{...props}
|
|
39
|
+
marginBottom='sm'
|
|
41
40
|
padding="none"
|
|
42
41
|
>
|
|
43
42
|
<Card.Header
|
|
44
|
-
headerColor="
|
|
43
|
+
headerColor="category_3"
|
|
45
44
|
>
|
|
46
|
-
<Body
|
|
47
|
-
{...props}
|
|
48
|
-
text="category_2"
|
|
49
|
-
/>
|
|
45
|
+
<Body text="Category 3" />
|
|
50
46
|
</Card.Header>
|
|
51
47
|
<Card.Body
|
|
52
48
|
padding="md"
|
|
@@ -58,27 +54,27 @@ const CardHeader = (props) => {
|
|
|
58
54
|
</Card.Body>
|
|
59
55
|
</Card>
|
|
60
56
|
|
|
61
|
-
<br />
|
|
62
57
|
|
|
63
58
|
<Title
|
|
64
59
|
{...props}
|
|
60
|
+
marginBottom='sm'
|
|
65
61
|
size={4}
|
|
66
62
|
tag="h4"
|
|
67
63
|
text="Product Colors"
|
|
68
64
|
/>
|
|
69
65
|
|
|
70
|
-
<br />
|
|
71
|
-
|
|
72
66
|
<Card
|
|
73
67
|
{...props}
|
|
68
|
+
marginBottom='sm'
|
|
74
69
|
padding="none"
|
|
75
70
|
>
|
|
76
71
|
<Card.Header
|
|
77
|
-
headerColor="
|
|
72
|
+
headerColor="product_2_background"
|
|
78
73
|
>
|
|
79
74
|
<Body
|
|
80
75
|
{...props}
|
|
81
|
-
|
|
76
|
+
dark
|
|
77
|
+
text="Product 2 Background"
|
|
82
78
|
/>
|
|
83
79
|
</Card.Header>
|
|
84
80
|
<Card.Body>
|
|
@@ -89,18 +85,16 @@ const CardHeader = (props) => {
|
|
|
89
85
|
</Card.Body>
|
|
90
86
|
</Card>
|
|
91
87
|
|
|
92
|
-
<br />
|
|
93
|
-
|
|
94
88
|
<Card
|
|
95
89
|
{...props}
|
|
90
|
+
marginBottom='sm'
|
|
96
91
|
padding="none"
|
|
97
92
|
>
|
|
98
|
-
<Card.Header
|
|
99
|
-
headerColor="gutters"
|
|
100
|
-
>
|
|
93
|
+
<Card.Header headerColor="product_6_background" >
|
|
101
94
|
<Body
|
|
102
95
|
{...props}
|
|
103
|
-
|
|
96
|
+
dark
|
|
97
|
+
text="Product 6 Background"
|
|
104
98
|
/>
|
|
105
99
|
</Card.Header>
|
|
106
100
|
<Card.Body>
|
|
@@ -111,28 +105,24 @@ const CardHeader = (props) => {
|
|
|
111
105
|
</Card.Body>
|
|
112
106
|
</Card>
|
|
113
107
|
|
|
114
|
-
<br />
|
|
115
108
|
|
|
116
109
|
<Title
|
|
117
110
|
{...props}
|
|
111
|
+
marginBottom='sm'
|
|
118
112
|
size={4}
|
|
119
113
|
tag="h4"
|
|
120
114
|
text="Background Colors"
|
|
121
115
|
/>
|
|
122
116
|
|
|
123
|
-
<br />
|
|
124
|
-
|
|
125
117
|
<Card
|
|
126
118
|
{...props}
|
|
119
|
+
marginBottom='sm'
|
|
127
120
|
padding="none"
|
|
128
121
|
>
|
|
129
122
|
<Card.Header
|
|
130
123
|
headerColor="white"
|
|
131
124
|
>
|
|
132
|
-
<Body
|
|
133
|
-
{...props}
|
|
134
|
-
text="White"
|
|
135
|
-
/>
|
|
125
|
+
<Body text="White" />
|
|
136
126
|
</Card.Header>
|
|
137
127
|
<Card.Body>
|
|
138
128
|
<Body
|
|
@@ -142,8 +132,6 @@ const CardHeader = (props) => {
|
|
|
142
132
|
</Card.Body>
|
|
143
133
|
</Card>
|
|
144
134
|
|
|
145
|
-
<br />
|
|
146
|
-
|
|
147
135
|
<Card
|
|
148
136
|
{...props}
|
|
149
137
|
padding="none"
|
|
@@ -152,7 +140,7 @@ const CardHeader = (props) => {
|
|
|
152
140
|
headerColor="dark"
|
|
153
141
|
>
|
|
154
142
|
<Body
|
|
155
|
-
|
|
143
|
+
dark
|
|
156
144
|
text="Dark"
|
|
157
145
|
/>
|
|
158
146
|
</Card.Header>
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
<%= pb_rails("card", props: {highlight: {position: "side", color:"
|
|
2
|
-
|
|
1
|
+
<%= pb_rails("card", props: {highlight: {position: "side", color:"product_6_highlight"}, margin_bottom: "sm"}) do %>
|
|
2
|
+
Side Position & Product 6 Highlight Color
|
|
3
3
|
<% end %>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
<%= pb_rails("card", props: {highlight: {position: "top", color:"warning"}}) do %>
|
|
8
|
-
Card content
|
|
4
|
+
<%= pb_rails("card", props: {highlight: {position: "top", color:"warning"}, margin_bottom: "sm"}) do %>
|
|
5
|
+
Top Position & Warning Color
|
|
9
6
|
<% end %>
|
|
7
|
+
<%= pb_rails("card", props: {highlight: {position: "side", color:"category_2"}, margin_bottom: "sm"}) do %>
|
|
8
|
+
Side Position & Category 2 Color
|
|
9
|
+
<% end %>
|
|
@@ -7,27 +7,25 @@ const CardHighlight = (props) => {
|
|
|
7
7
|
<div>
|
|
8
8
|
<Card
|
|
9
9
|
{...props}
|
|
10
|
-
highlight={{ position: 'side', color: '
|
|
10
|
+
highlight={{ position: 'side', color: 'product_6_highlight' }}
|
|
11
|
+
marginBottom="sm"
|
|
11
12
|
>
|
|
12
|
-
{'
|
|
13
|
+
{'Side Position & Product 6 Highlight Color'}
|
|
13
14
|
</Card>
|
|
14
15
|
|
|
15
|
-
<br />
|
|
16
|
-
|
|
17
16
|
<Card
|
|
18
17
|
{...props}
|
|
19
18
|
highlight={{ position: 'top', color: 'warning' }}
|
|
19
|
+
marginBottom="sm"
|
|
20
20
|
>
|
|
21
|
-
{'
|
|
21
|
+
{'Top Position & Warning Color'}
|
|
22
22
|
</Card>
|
|
23
23
|
|
|
24
|
-
<br />
|
|
25
|
-
|
|
26
24
|
<Card
|
|
27
25
|
{...props}
|
|
28
26
|
highlight={{ position: 'side', color: 'category_2' }}
|
|
29
27
|
>
|
|
30
|
-
{'
|
|
28
|
+
{'Side Position & Category 2 Color'}
|
|
31
29
|
</Card>
|
|
32
30
|
</div>
|
|
33
31
|
)
|
|
@@ -78,6 +78,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
|
78
78
|
mode = 'single',
|
|
79
79
|
name,
|
|
80
80
|
onChange = () => { void 0 },
|
|
81
|
+
onClose,
|
|
81
82
|
pickerId,
|
|
82
83
|
placeholder = 'Select Date',
|
|
83
84
|
plugins = false,
|
|
@@ -95,9 +96,13 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
|
95
96
|
const inputAriaProps = buildAriaProps(inputAria)
|
|
96
97
|
const inputDataProps = buildDataProps(inputData)
|
|
97
98
|
|
|
99
|
+
const filteredProps = {...props}
|
|
100
|
+
delete filteredProps?.position
|
|
101
|
+
|
|
98
102
|
const classes = classnames(
|
|
99
103
|
buildCss('pb_date_picker_kit'),
|
|
100
|
-
|
|
104
|
+
//@ts-ignore
|
|
105
|
+
globalProps(filteredProps),
|
|
101
106
|
error ? 'error' : null,
|
|
102
107
|
className
|
|
103
108
|
)
|
|
@@ -117,8 +122,10 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
|
117
122
|
minDate,
|
|
118
123
|
mode,
|
|
119
124
|
onChange,
|
|
125
|
+
onClose,
|
|
120
126
|
pickerId,
|
|
121
127
|
plugins,
|
|
128
|
+
// @ts-ignore
|
|
122
129
|
position,
|
|
123
130
|
positionElement,
|
|
124
131
|
selectionType,
|
|
@@ -19,6 +19,7 @@ type DatePickerConfig = {
|
|
|
19
19
|
hideIcon?: boolean;
|
|
20
20
|
inLine?: boolean,
|
|
21
21
|
onChange: (dateStr: string, selectedDates: Date[]) => void,
|
|
22
|
+
onClose: (dateStr: Date[] | string, selectedDates: Date[] | string) => void,
|
|
22
23
|
selectionType?: "month" | "week" | "",
|
|
23
24
|
showTimezone?: boolean,
|
|
24
25
|
staticPosition: boolean,
|
|
@@ -41,6 +42,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
|
41
42
|
minDate,
|
|
42
43
|
mode,
|
|
43
44
|
onChange = () => {},
|
|
45
|
+
onClose = () => {},
|
|
44
46
|
pickerId,
|
|
45
47
|
plugins,
|
|
46
48
|
position = "auto",
|
|
@@ -151,9 +153,10 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
|
151
153
|
window.addEventListener('resize', calendarResizer)
|
|
152
154
|
if (!staticPosition && scrollContainer) attachToScroll(scrollContainer)
|
|
153
155
|
}],
|
|
154
|
-
onClose: [() => {
|
|
156
|
+
onClose: [(selectedDates, dateStr) => {
|
|
155
157
|
window.removeEventListener('resize', calendarResizer)
|
|
156
158
|
if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer as HTMLElement)
|
|
159
|
+
onClose(selectedDates, dateStr)
|
|
157
160
|
}],
|
|
158
161
|
onChange: [(selectedDates, dateStr) => {
|
|
159
162
|
onChange(dateStr, selectedDates)
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
/* eslint-disable react/no-multi-comp */
|
|
2
|
+
import React, { useState } from 'react'
|
|
3
|
+
import { DatePicker,LabelValue } from '../..'
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
const DatePickerOnClose = (props) => {
|
|
7
|
+
const today = new Date()
|
|
8
|
+
const [dateString, setDateString] = useState(today.toLocaleDateString())
|
|
9
|
+
const [dateObj, setDateObj] = useState([today])
|
|
10
|
+
|
|
11
|
+
const handleOnClose = (selectedDates, dateStr) => {
|
|
12
|
+
setDateString(dateStr)
|
|
13
|
+
setDateObj(selectedDates)
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
return (
|
|
18
|
+
<div>
|
|
19
|
+
<DatePicker
|
|
20
|
+
defaultDate={dateString}
|
|
21
|
+
enableTime
|
|
22
|
+
marginBottom="lg"
|
|
23
|
+
onClose={handleOnClose}
|
|
24
|
+
pickerId="date-picker-on-close"
|
|
25
|
+
showTimezone
|
|
26
|
+
{...props}
|
|
27
|
+
/>
|
|
28
|
+
<LabelValue
|
|
29
|
+
label="Date Object"
|
|
30
|
+
marginBottom="lg"
|
|
31
|
+
value={dateObj[0] ? dateObj[0].toString() : ''}
|
|
32
|
+
{...props}
|
|
33
|
+
/>
|
|
34
|
+
<LabelValue
|
|
35
|
+
label="Date String"
|
|
36
|
+
value={dateString}
|
|
37
|
+
{...props}
|
|
38
|
+
/>
|
|
39
|
+
</div>
|
|
40
|
+
)
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
export default DatePickerOnClose
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
The `onClose` handler function has access to two arguments: `dateStr` and `selectedDates`.
|
|
2
|
+
|
|
3
|
+
The first, `dateStr`, is a string of the chosen date. The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
|
|
@@ -19,3 +19,4 @@ export { default as DatePickerWeek } from './_date_picker_week.jsx'
|
|
|
19
19
|
export { default as DatePickerPositions } from './_date_picker_positions.jsx'
|
|
20
20
|
export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
|
|
21
21
|
export { default as DatePickerAllowInput } from './_date_picker_allow_input'
|
|
22
|
+
export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
|
|
@@ -151,6 +151,10 @@ const Layout = (props: LayoutPropTypes) => {
|
|
|
151
151
|
const nonSideChildren = layoutChildren.filter(
|
|
152
152
|
(child: React.ReactElement & {type: {displayName: string}}) => child.type?.displayName !== 'Side'
|
|
153
153
|
)
|
|
154
|
+
|
|
155
|
+
const filteredProps = {...props}
|
|
156
|
+
delete filteredProps?.position
|
|
157
|
+
|
|
154
158
|
return (
|
|
155
159
|
<div
|
|
156
160
|
{...ariaProps}
|
|
@@ -159,7 +163,8 @@ const Layout = (props: LayoutPropTypes) => {
|
|
|
159
163
|
layoutCss,
|
|
160
164
|
layoutCollapseCss,
|
|
161
165
|
className,
|
|
162
|
-
|
|
166
|
+
//@ts-ignore
|
|
167
|
+
globalProps(filteredProps)
|
|
163
168
|
)}
|
|
164
169
|
>
|
|
165
170
|
{subComponentTags('Side')}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<%= pb_rails("legend", props: { color: "data_8", text: "
|
|
2
|
-
<%= pb_rails("legend", props: { color: "warning", text: "
|
|
3
|
-
<%= pb_rails("legend", props: { color: "
|
|
4
|
-
<%= pb_rails("legend", props: { color: "category_7", text: "
|
|
1
|
+
<%= pb_rails("legend", props: { color: "data_8", text: "Data 8" }) %>
|
|
2
|
+
<%= pb_rails("legend", props: { color: "warning", text: "Warning" }) %>
|
|
3
|
+
<%= pb_rails("legend", props: { color: "product_6_highlight", text: "Product 6 (highlight)" }) %>
|
|
4
|
+
<%= pb_rails("legend", props: { color: "category_7", text: "Category 7" }) %>
|
|
@@ -5,22 +5,22 @@ const LegendColors = (props) => (
|
|
|
5
5
|
<div>
|
|
6
6
|
<Legend
|
|
7
7
|
color="data_8"
|
|
8
|
-
text="
|
|
8
|
+
text="Data 8"
|
|
9
9
|
{...props}
|
|
10
10
|
/>
|
|
11
11
|
<Legend
|
|
12
12
|
color="warning"
|
|
13
|
-
text="
|
|
13
|
+
text="Warning"
|
|
14
14
|
{...props}
|
|
15
15
|
/>
|
|
16
16
|
<Legend
|
|
17
|
-
color="
|
|
18
|
-
text="
|
|
17
|
+
color="product_6_highlight"
|
|
18
|
+
text="Product 6 (highlight)"
|
|
19
19
|
{...props}
|
|
20
20
|
/>
|
|
21
21
|
<Legend
|
|
22
22
|
color="category_7"
|
|
23
|
-
text="
|
|
23
|
+
text="Category 7"
|
|
24
24
|
{...props}
|
|
25
25
|
/>
|
|
26
26
|
</div>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<%= pb_rails("legend", props: { color: "#dc418a", text: "
|
|
2
|
-
<%= pb_rails("legend", props: { color: "#3ef0b8", text: "
|
|
3
|
-
<%= pb_rails("legend", props: { color: "#ab8b04", text: "
|
|
1
|
+
<%= pb_rails("legend", props: { color: "#dc418a", text: "Custom Legend Color 1" }) %>
|
|
2
|
+
<%= pb_rails("legend", props: { color: "#3ef0b8", text: "Custom Legend Color 2" }) %>
|
|
3
|
+
<%= pb_rails("legend", props: { color: "#ab8b04", text: "Custom Legend Color 3" }) %>
|
|
@@ -5,17 +5,17 @@ const LegendCustomColors = (props) => (
|
|
|
5
5
|
<div>
|
|
6
6
|
<Legend
|
|
7
7
|
color="#dc418a"
|
|
8
|
-
text="
|
|
8
|
+
text="Custom Legend Color 1"
|
|
9
9
|
{...props}
|
|
10
10
|
/>
|
|
11
11
|
<Legend
|
|
12
12
|
color="#3ef0b8"
|
|
13
|
-
text="
|
|
13
|
+
text="Custom Legend Color 2"
|
|
14
14
|
{...props}
|
|
15
15
|
/>
|
|
16
16
|
<Legend
|
|
17
17
|
color="#ab8b04"
|
|
18
|
-
text="
|
|
18
|
+
text="Custom Legend Color 3"
|
|
19
19
|
{...props}
|
|
20
20
|
/>
|
|
21
21
|
</div>
|
|
@@ -89,6 +89,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
|
|
|
89
89
|
const [itiInit, setItiInit] = useState<any>()
|
|
90
90
|
const [error, setError] = useState('')
|
|
91
91
|
const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
|
|
92
|
+
const [selectedData, setSelectedData] = useState()
|
|
92
93
|
|
|
93
94
|
const validateTooLongNumber = (itiInit: any) => {
|
|
94
95
|
const error = itiInit.getValidationError()
|
|
@@ -121,10 +122,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
|
|
|
121
122
|
validateOnlyNumbers()
|
|
122
123
|
}
|
|
123
124
|
|
|
125
|
+
const getCurrentSelectedData = (itiInit: any, inputValue: string) => {
|
|
126
|
+
return { ...itiInit.getSelectedCountryData(), number: inputValue }
|
|
127
|
+
}
|
|
128
|
+
|
|
124
129
|
const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
|
|
125
130
|
setInputValue(evt.target.value)
|
|
126
131
|
validateTooLongNumber(itiInit)
|
|
127
|
-
|
|
132
|
+
const phoneNumberData = getCurrentSelectedData(itiInit, evt.target.value)
|
|
133
|
+
setSelectedData(phoneNumberData)
|
|
134
|
+
onChange(phoneNumberData)
|
|
128
135
|
isValid(itiInit.isValidNumber())
|
|
129
136
|
}
|
|
130
137
|
|
|
@@ -136,15 +143,21 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
|
|
|
136
143
|
|
|
137
144
|
useEffect(() => {
|
|
138
145
|
const telInputInit = new intlTelInput(inputRef.current, {
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
146
|
+
separateDialCode: true,
|
|
147
|
+
preferredCountries,
|
|
148
|
+
allowDropdown: !disabled,
|
|
149
|
+
initialCountry,
|
|
150
|
+
onlyCountries,
|
|
151
|
+
}
|
|
145
152
|
)
|
|
146
|
-
|
|
147
|
-
inputRef.current.addEventListener("countrychange", () =>
|
|
153
|
+
|
|
154
|
+
inputRef.current.addEventListener("countrychange", (evt: Event) => {
|
|
155
|
+
validateTooLongNumber(telInputInit)
|
|
156
|
+
const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
|
|
157
|
+
setSelectedData(phoneNumberData)
|
|
158
|
+
onChange(phoneNumberData)
|
|
159
|
+
})
|
|
160
|
+
|
|
148
161
|
inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
|
|
149
162
|
inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
|
|
150
163
|
|
|
@@ -156,6 +169,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
|
|
|
156
169
|
<TextInput
|
|
157
170
|
className={dropDownIsOpen ? 'dropdown_open' : ''}
|
|
158
171
|
dark={dark}
|
|
172
|
+
data-phone-number={JSON.stringify(selectedData)}
|
|
159
173
|
disabled={disabled}
|
|
160
174
|
error={error}
|
|
161
175
|
id={id}
|
|
@@ -9,22 +9,22 @@
|
|
|
9
9
|
</tr>
|
|
10
10
|
</thead>
|
|
11
11
|
<tbody>
|
|
12
|
-
<%= pb_rails("table/table_row", props: { side_highlight_color: "
|
|
13
|
-
<td>
|
|
12
|
+
<%= pb_rails("table/table_row", props: { side_highlight_color: "product_1_highlight" }) do %>
|
|
13
|
+
<td>Product 1</td>
|
|
14
14
|
<td>Value 2</td>
|
|
15
15
|
<td>Value 3</td>
|
|
16
16
|
<td>Value 4</td>
|
|
17
17
|
<td>Value 5</td>
|
|
18
18
|
<% end %>
|
|
19
|
-
<%= pb_rails("table/table_row", props: { side_highlight_color: "
|
|
20
|
-
<td>
|
|
19
|
+
<%= pb_rails("table/table_row", props: { side_highlight_color: "product_2_highlight" }) do %>
|
|
20
|
+
<td>Product 2</td>
|
|
21
21
|
<td>Value 2</td>
|
|
22
22
|
<td>Value 3</td>
|
|
23
23
|
<td>Value 4</td>
|
|
24
24
|
<td>Value 5</td>
|
|
25
25
|
<% end %>
|
|
26
|
-
<%= pb_rails("table/table_row", props: { side_highlight_color: "
|
|
27
|
-
<td>
|
|
26
|
+
<%= pb_rails("table/table_row", props: { side_highlight_color: "product_3_highlight" }) do %>
|
|
27
|
+
<td>Product 3</td>
|
|
28
28
|
<td>Value 2</td>
|
|
29
29
|
<td>Value 3</td>
|
|
30
30
|
<td>Value 4</td>
|
|
@@ -21,30 +21,30 @@ const TableSideHighlight = (props) => {
|
|
|
21
21
|
</thead>
|
|
22
22
|
<tbody>
|
|
23
23
|
<TableRow
|
|
24
|
-
sideHighlightColor="
|
|
24
|
+
sideHighlightColor="product_1_highlight"
|
|
25
25
|
{...props}
|
|
26
26
|
>
|
|
27
|
-
<td>{'
|
|
27
|
+
<td>{'Product 1'}</td>
|
|
28
28
|
<td>{'Value 2'}</td>
|
|
29
29
|
<td>{'Value 3'}</td>
|
|
30
30
|
<td>{'Value 4'}</td>
|
|
31
31
|
<td>{'Value 5'}</td>
|
|
32
32
|
</TableRow>
|
|
33
33
|
<TableRow
|
|
34
|
-
sideHighlightColor="
|
|
34
|
+
sideHighlightColor="product_2_highlight"
|
|
35
35
|
{...props}
|
|
36
36
|
>
|
|
37
|
-
<td>{'
|
|
37
|
+
<td>{'Product 2'}</td>
|
|
38
38
|
<td>{'Value 2'}</td>
|
|
39
39
|
<td>{'Value 3'}</td>
|
|
40
40
|
<td>{'Value 4'}</td>
|
|
41
41
|
<td>{'Value 5'}</td>
|
|
42
42
|
</TableRow>
|
|
43
43
|
<TableRow
|
|
44
|
-
sideHighlightColor="
|
|
44
|
+
sideHighlightColor="product_3_highlight"
|
|
45
45
|
{...props}
|
|
46
46
|
>
|
|
47
|
-
<td>{'
|
|
47
|
+
<td>{'Product 3'}</td>
|
|
48
48
|
<td>{'Value 2'}</td>
|
|
49
49
|
<td>{'Value 3'}</td>
|
|
50
50
|
<td>{'Value 4'}</td>
|
|
@@ -213,22 +213,62 @@ $status_color_text: (
|
|
|
213
213
|
$primary_action: $primary !default;
|
|
214
214
|
|
|
215
215
|
/* Product colors ---------------------*/
|
|
216
|
-
$
|
|
217
|
-
$
|
|
218
|
-
$
|
|
219
|
-
$
|
|
220
|
-
$
|
|
221
|
-
$
|
|
222
|
-
$
|
|
216
|
+
$product_1_background: #003DB2 !default;
|
|
217
|
+
$product_1_highlight: #0057FF !default;
|
|
218
|
+
$product_2_background: #6000AC !default;
|
|
219
|
+
$product_2_highlight: #8200E9 !default;
|
|
220
|
+
$product_3_background: #B85C00 !default;
|
|
221
|
+
$product_3_highlight: #CE7500 !default;
|
|
222
|
+
$product_4_background: #007E8F !default;
|
|
223
|
+
$product_4_highlight: #00B9D2 !default;
|
|
224
|
+
$product_5_background: #760B24 !default;
|
|
225
|
+
$product_5_highlight: #B8032E !default;
|
|
226
|
+
$product_6_background: #008540 !default;
|
|
227
|
+
$product_6_highlight: #00A851 !default;
|
|
228
|
+
$product_7_background: #96006C !default;
|
|
229
|
+
$product_7_highlight: #CD0094 !default;
|
|
230
|
+
$product_8_background: #144075 !default;
|
|
231
|
+
$product_8_highlight: #1A569E !default;
|
|
232
|
+
$product_9_background: #fcc419 !default;
|
|
233
|
+
$product_9_highlight: #ffd43b !default;
|
|
234
|
+
$product_10_background: #20c997 !default;
|
|
235
|
+
$product_10_highlight: #38d9a9 !default;
|
|
236
|
+
$windows: $product_1_background !default; // deprecated
|
|
237
|
+
$siding: $product_2_background !default; // deprecated
|
|
238
|
+
$doors: $product_3_background !default; // deprecated
|
|
239
|
+
$solar: $product_4_background !default; // deprecated
|
|
240
|
+
$roofing: $product_5_background !default; // deprecated
|
|
241
|
+
$gutters: $product_6_background !default; // deprecated
|
|
242
|
+
$insulation: $product_7_background !default; // deprecated
|
|
223
243
|
$product_colors: (
|
|
224
|
-
windows:
|
|
225
|
-
siding:
|
|
226
|
-
doors:
|
|
227
|
-
solar:
|
|
228
|
-
roofing:
|
|
229
|
-
gutters:
|
|
230
|
-
insulation:
|
|
231
|
-
|
|
244
|
+
windows: $windows,
|
|
245
|
+
siding: $siding,
|
|
246
|
+
doors: $doors,
|
|
247
|
+
solar: $solar,
|
|
248
|
+
roofing: $roofing,
|
|
249
|
+
gutters: $gutters,
|
|
250
|
+
insulation: $insulation,
|
|
251
|
+
product_1_background: $product_1_background,
|
|
252
|
+
product_1_highlight: $product_1_highlight,
|
|
253
|
+
product_2_background: $product_2_background,
|
|
254
|
+
product_2_highlight: $product_2_highlight,
|
|
255
|
+
product_3_background: $product_3_background,
|
|
256
|
+
product_3_highlight: $product_3_highlight,
|
|
257
|
+
product_4_background: $product_4_background,
|
|
258
|
+
product_4_highlight: $product_4_highlight,
|
|
259
|
+
product_5_background: $product_5_background,
|
|
260
|
+
product_5_highlight: $product_5_highlight,
|
|
261
|
+
product_6_background: $product_6_background,
|
|
262
|
+
product_6_highlight: $product_6_highlight,
|
|
263
|
+
product_7_background: $product_7_background,
|
|
264
|
+
product_7_highlight: $product_7_highlight,
|
|
265
|
+
product_8_background: $product_8_background,
|
|
266
|
+
product_8_highlight: $product_8_highlight,
|
|
267
|
+
product_9_background: $product_9_background,
|
|
268
|
+
product_9_highlight: $product_9_highlight,
|
|
269
|
+
product_10_background: $product_10_background,
|
|
270
|
+
product_10_highlight: $product_10_highlight
|
|
271
|
+
) !default;
|
|
232
272
|
|
|
233
273
|
/* Category colors ---------------------*/
|
|
234
274
|
$category_1: $royal !default;
|
|
@@ -1,3 +1,16 @@
|
|
|
1
|
+
$relative: relative !default;
|
|
2
|
+
$absolute: absolute !default;
|
|
3
|
+
$fixed: fixed !default;
|
|
4
|
+
$sticky: sticky !default;
|
|
5
|
+
$static: static !default;
|
|
6
|
+
$position: (
|
|
7
|
+
relative: $relative,
|
|
8
|
+
absolute: $absolute,
|
|
9
|
+
fixed: $fixed,
|
|
10
|
+
sticky: $sticky,
|
|
11
|
+
static: $static
|
|
12
|
+
);
|
|
13
|
+
|
|
1
14
|
// z_index variables
|
|
2
15
|
$z_1: 100 !default;
|
|
3
16
|
$z_2: 200 !default;
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
// Color Helper Utilities
|
|
2
|
+
|
|
1
3
|
@function shade($color, $percentage) {
|
|
2
4
|
@return mix($charcoal, $color, $percentage);
|
|
3
5
|
}
|
|
@@ -14,9 +16,12 @@
|
|
|
14
16
|
@return $text_color;
|
|
15
17
|
}
|
|
16
18
|
|
|
19
|
+
|
|
20
|
+
// Generate Color Helper Classes
|
|
21
|
+
|
|
17
22
|
@mixin background-color($colors-list) {
|
|
18
23
|
@each $name, $color in $colors-list {
|
|
19
|
-
|
|
24
|
+
.pb_web_#{$name} {
|
|
20
25
|
background-color: $color !important;
|
|
21
26
|
}
|
|
22
27
|
}
|
|
@@ -28,15 +33,4 @@
|
|
|
28
33
|
color: $color !important;
|
|
29
34
|
}
|
|
30
35
|
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.bg_gradient {
|
|
34
|
-
background: $gradient_start;
|
|
35
|
-
background: -moz-linear-gradient(-45deg, $gradient_start 0%, $gradient_end 100%);
|
|
36
|
-
background: -webkit-linear-gradient(-45deg, $gradient_start 0%, $gradient_end 100%);
|
|
37
|
-
background: linear-gradient(135deg, $gradient_start 0%, $gradient_end 100%);
|
|
38
|
-
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$gradient_start}', endColorstr='#{$gradient_end}',GradientType=1 );
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
@include text-color($text_colors);
|
|
42
|
-
@include background-color($background_colors);
|
|
36
|
+
}
|
|
@@ -1,3 +1,23 @@
|
|
|
1
|
+
.position_relative {
|
|
2
|
+
position: relative;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.position_absolute {
|
|
6
|
+
position: absolute;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.position_fixed {
|
|
10
|
+
position: fixed;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.position_sticky {
|
|
14
|
+
position: sticky;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.position_static {
|
|
18
|
+
position: static;
|
|
19
|
+
}
|
|
20
|
+
|
|
1
21
|
.z_index_1 {
|
|
2
22
|
z-index: 100;
|
|
3
23
|
}
|
|
@@ -100,6 +100,10 @@ type Padding = {
|
|
|
100
100
|
padding?: AllSizes,
|
|
101
101
|
}
|
|
102
102
|
|
|
103
|
+
type Position = {
|
|
104
|
+
position?: "relative" | "absolute" | "fixed" | "sticky" | "static",
|
|
105
|
+
}
|
|
106
|
+
|
|
103
107
|
type Shadow = {
|
|
104
108
|
shadow?: "none" | "deep" | "deeper" | "deepest",
|
|
105
109
|
}
|
|
@@ -115,7 +119,7 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf &
|
|
|
115
119
|
BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
|
|
116
120
|
FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
|
|
117
121
|
LineHeight & Margin & MaxWidth & NumberSpacing & Order & Padding &
|
|
118
|
-
Shadow & ZIndex
|
|
122
|
+
Position & Shadow & ZIndex
|
|
119
123
|
|
|
120
124
|
const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
|
|
121
125
|
const keys: string[] = Object.keys(prop)
|
|
@@ -283,7 +287,12 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
|
|
|
283
287
|
} else {
|
|
284
288
|
return order ? `flex_order_${order}` : ''
|
|
285
289
|
}
|
|
286
|
-
}
|
|
290
|
+
},
|
|
291
|
+
positionProps: ({ position }: Position) => {
|
|
292
|
+
let css = ''
|
|
293
|
+
css += position && position !== 'static' ? `position_${position}` : ''
|
|
294
|
+
return css
|
|
295
|
+
},
|
|
287
296
|
}
|
|
288
297
|
|
|
289
298
|
type DefaultProps = {[key: string]: string} | Record<string, unknown>
|
data/lib/playbook/classnames.rb
CHANGED
data/lib/playbook/kit_base.rb
CHANGED
|
@@ -19,6 +19,7 @@ require "playbook/flex"
|
|
|
19
19
|
require "playbook/flex_grow"
|
|
20
20
|
require "playbook/flex_shrink"
|
|
21
21
|
require "playbook/order"
|
|
22
|
+
require "playbook/position"
|
|
22
23
|
|
|
23
24
|
module Playbook
|
|
24
25
|
class KitBase < ViewComponent::Base
|
|
@@ -43,6 +44,7 @@ module Playbook
|
|
|
43
44
|
include Playbook::FlexGrow
|
|
44
45
|
include Playbook::FlexShrink
|
|
45
46
|
include Playbook::Order
|
|
47
|
+
include Playbook::Position
|
|
46
48
|
|
|
47
49
|
prop :id
|
|
48
50
|
prop :data, type: Playbook::Props::Hash, default: {}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Playbook
|
|
4
|
+
module Position
|
|
5
|
+
def self.included(base)
|
|
6
|
+
base.prop :position
|
|
7
|
+
end
|
|
8
|
+
|
|
9
|
+
private
|
|
10
|
+
|
|
11
|
+
def position_props
|
|
12
|
+
selected_props = position_options.keys.select { |sk| try(sk) }
|
|
13
|
+
return nil unless selected_props.present?
|
|
14
|
+
|
|
15
|
+
selected_props.map do |k|
|
|
16
|
+
value = send(k)
|
|
17
|
+
return nil unless position_values.include? value
|
|
18
|
+
|
|
19
|
+
"position_#{value}"
|
|
20
|
+
end.compact.join(" ")
|
|
21
|
+
end
|
|
22
|
+
|
|
23
|
+
def position_options
|
|
24
|
+
{
|
|
25
|
+
position: "position",
|
|
26
|
+
}
|
|
27
|
+
end
|
|
28
|
+
|
|
29
|
+
def position_values
|
|
30
|
+
%w[relative absolute fixed sticky]
|
|
31
|
+
end
|
|
32
|
+
end
|
|
33
|
+
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: 12.
|
|
4
|
+
version: 12.14.0
|
|
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: 2023-04-
|
|
12
|
+
date: 2023-04-06 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionpack
|
|
@@ -738,6 +738,8 @@ files:
|
|
|
738
738
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.md
|
|
739
739
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx
|
|
740
740
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md
|
|
741
|
+
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx
|
|
742
|
+
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md
|
|
741
743
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.html.erb
|
|
742
744
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.jsx
|
|
743
745
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
|
|
@@ -2438,6 +2440,7 @@ files:
|
|
|
2438
2440
|
- lib/playbook/pb_doc_helper.rb
|
|
2439
2441
|
- lib/playbook/pb_forms_helper.rb
|
|
2440
2442
|
- lib/playbook/pb_kit_helper.rb
|
|
2443
|
+
- lib/playbook/position.rb
|
|
2441
2444
|
- lib/playbook/props.rb
|
|
2442
2445
|
- lib/playbook/props/array.rb
|
|
2443
2446
|
- lib/playbook/props/base.rb
|