playbook_ui 12.13.0.pre.alpha.PLAY705phonenumberkit438 → 12.13.0.pre.alpha.addingProductTokens439

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.
Files changed (20) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_card/_card.scss +2 -3
  3. data/app/pb_kits/playbook/pb_card/card.rb +1 -1
  4. data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb +22 -35
  5. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +34 -37
  6. data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +27 -44
  7. data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx +21 -33
  8. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb +7 -7
  9. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx +6 -8
  10. data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.html.erb +4 -4
  11. data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.jsx +5 -5
  12. data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.html.erb +3 -3
  13. data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx +3 -3
  14. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +9 -23
  15. data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.html.erb +6 -6
  16. data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx +6 -6
  17. data/app/pb_kits/playbook/tokens/_colors.scss +55 -15
  18. data/app/pb_kits/playbook/utilities/_colors.scss +7 -13
  19. data/lib/playbook/version.rb +1 -1
  20. metadata +1 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 8ffc2f1f3d1df264f744d65f5b89a07812fe6e560e9c9137e3f91e2b1eb17816
4
- data.tar.gz: a85d780b532e6930b7588a22d566023d965398cb73ea2267e8f12ab5e46f3114
3
+ metadata.gz: 5810ed238e19013cd9913f7751d768a9b0e8c29cb9fb12e7b94f040eb90252ec
4
+ data.tar.gz: '08a0f2529b37414524c4dbb79c3ea1c7efa4a388ade459dc6a77836f93ab1c0e'
5
5
  SHA512:
6
- metadata.gz: b346f34311944e98fb46a98c01fce27798f102ab81cc93db231ddfa570648b613a43a0bb40c8c628b3bc434366d8216f44977c657a5f9dd6fff67c655ce7edec
7
- data.tar.gz: 0a807e7b97cd9f9524572abc04563d13e25fd0dff7b032e9479a0a41847502b515ee64508432ac7b0e63d48202c9a282022d678923aef7cf408ac6d1cec34b6f
6
+ metadata.gz: 64c3596d0dd7835e6ee4ae6b1bfd55be5a8f87f4be5f90d0a584e60c5c3d0dc89c49b82ba8936417d210daeed87487bf99a218430bf9fec5084c0074601408bb
7
+ data.tar.gz: 7a51f19a279eca809c072cd7b34b39b4efc30a766d28538e1548715036076438c00d442134d26d31357239b24f9ccb4c787b2cea4015c2445d165848e1e8718b
data/app/pb_kits/playbook/pb_card/_card.scss CHANGED
@@ -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
- [class^=pb_body_kit] {
33
- color: lightenText($color_value);
34
- }
33
+ color: lightenText($color_value);
35
34
  }
36
35
  }
37
36
  &[class*=_white] {
data/app/pb_kits/playbook/pb_card/card.rb CHANGED
@@ -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
data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb CHANGED
@@ -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
- <br>
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
- color: "lighter"
6
+ dark: true
9
7
  }) %>
10
8
  <% end %>
11
9
 
12
- <br>
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
- <br>
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
- text: "Light"
25
- }) %>
18
+ text: "Light",
19
+ dark: false
20
+ }) %>
26
21
  <% end %>
27
22
 
28
- <br>
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: "windows", dark: true }) do %>
25
+ <%= pb_rails("card", props: { background: "product_1_background", dark: true, margin_bottom: "sm" }) do %>
35
26
  <%= pb_rails("body", props: {
36
- text: "Windows",
37
- color: "lighter"
38
- }) %>
27
+ text: "Product 1 Background",
28
+ dark: true
29
+ }) %>
39
30
  <% end %>
40
31
 
41
- <br>
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
- text: "Siding"
46
- }) %>
34
+ text: "Product 7 Highlight",
35
+ dark: true
36
+ }) %>
47
37
  <% end %>
48
38
 
49
- <br>
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
- text: "Doors"
54
- }) %>
41
+ text: "Product 2 Highlight",
42
+ dark: true
43
+ }) %>
55
44
  <% end %>
56
-
57
- <br>
data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx CHANGED
@@ -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
- color="lighter"
23
+ dark
25
24
  text="Dark"
26
- {...props}
27
25
  />
28
26
  </Card>
29
27
 
30
- <br />
31
-
32
- <Card>
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
- <br />
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="windows"
57
+ background="product_1_background"
58
+ marginBottom="sm"
62
59
  {...props}
63
- >
60
+ >
64
61
  <Body
65
- color="lighter"
66
- text="Windows"
67
- {...props}
62
+ dark
63
+ text="Product 1 Background"
68
64
  />
69
65
  </Card>
70
66
 
71
- <br />
67
+
72
68
 
73
- <Card
74
- background="siding"
75
- {...props}
76
- >
77
- <Body
78
- text="Siding"
79
- {...props}
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
- <br />
79
+
84
80
 
85
- <Card
86
- background="doors"
81
+ <Card
82
+ background="product_2_highlight"
83
+ marginBottom="sm"
87
84
  {...props}
88
85
  >
89
86
  <Body
90
- text="Doors"
91
- {...props}
87
+ dark
88
+ text="Product 2 Highlight"
92
89
  />
93
90
  </Card>
94
91
 
95
- <br />
92
+
96
93
  </div>
97
94
  )
98
95
  }
data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb CHANGED
@@ -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
- <br>
4
-
5
- <%= pb_rails("card", props: { padding: "none", header: true}) do %>
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
- <br>
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
- <br>
27
-
28
- <%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4 }) %>
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
- <br>
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: "siding" }) do %>
34
- <%= pb_rails("body", props: { text: "Siding", dark: true }) %>
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
- <br>
42
-
43
- <%= pb_rails("card", props: { padding: "none", header: true}) do %>
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
- <br>
41
+ <%= pb_rails("title", props: { text: "Background Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
53
42
 
54
- <%= pb_rails("title", props: { text: "Background Colors", tag: "h4", size: 4 }) %>
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
- <br>
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
data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx CHANGED
@@ -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
- {...props}
26
- text="category_1"
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="category_2"
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="siding"
72
+ headerColor="product_2_background"
78
73
  >
79
74
  <Body
80
75
  {...props}
81
- text="Siding"
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
- text="Gutters"
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
- {...props}
143
+ dark
156
144
  text="Dark"
157
145
  />
158
146
  </Card.Header>
data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb CHANGED
@@ -1,9 +1,9 @@
1
- <%= pb_rails("card", props: {highlight: {position: "side", color:"windows"}}) do %>
2
- Card content
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
- <br>
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 %>
data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx CHANGED
@@ -7,27 +7,25 @@ const CardHighlight = (props) => {
7
7
  <div>
8
8
  <Card
9
9
  {...props}
10
- highlight={{ position: 'side', color: 'windows' }}
10
+ highlight={{ position: 'side', color: 'product_6_highlight' }}
11
+ marginBottom="sm"
11
12
  >
12
- {'Card content'}
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
- {'Card content'}
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
- {'Card content'}
28
+ {'Side Position & Category 2 Color'}
31
29
  </Card>
32
30
  </div>
33
31
  )
data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.html.erb CHANGED
@@ -1,4 +1,4 @@
1
- <%= pb_rails("legend", props: { color: "data_8", text: "Windows" }) %>
2
- <%= pb_rails("legend", props: { color: "warning", text: "Windows" }) %>
3
- <%= pb_rails("legend", props: { color: "windows", text: "Windows" }) %>
4
- <%= pb_rails("legend", props: { color: "category_7", text: "Windows" }) %>
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" }) %>
data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.jsx CHANGED
@@ -5,22 +5,22 @@ const LegendColors = (props) => (
5
5
  <div>
6
6
  <Legend
7
7
  color="data_8"
8
- text="Windows"
8
+ text="Data 8"
9
9
  {...props}
10
10
  />
11
11
  <Legend
12
12
  color="warning"
13
- text="Windows"
13
+ text="Warning"
14
14
  {...props}
15
15
  />
16
16
  <Legend
17
- color="windows"
18
- text="Windows"
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="Windows"
23
+ text="Category 7"
24
24
  {...props}
25
25
  />
26
26
  </div>
data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.html.erb CHANGED
@@ -1,3 +1,3 @@
1
- <%= pb_rails("legend", props: { color: "#dc418a", text: "Windows" }) %>
2
- <%= pb_rails("legend", props: { color: "#3ef0b8", text: "Windows" }) %>
3
- <%= pb_rails("legend", props: { color: "#ab8b04", text: "Windows" }) %>
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" }) %>
data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx CHANGED
@@ -5,17 +5,17 @@ const LegendCustomColors = (props) => (
5
5
  <div>
6
6
  <Legend
7
7
  color="#dc418a"
8
- text="Windows"
8
+ text="Custom Legend Color 1"
9
9
  {...props}
10
10
  />
11
11
  <Legend
12
12
  color="#3ef0b8"
13
- text="Windows"
13
+ text="Custom Legend Color 2"
14
14
  {...props}
15
15
  />
16
16
  <Legend
17
17
  color="#ab8b04"
18
- text="Windows"
18
+ text="Custom Legend Color 3"
19
19
  {...props}
20
20
  />
21
21
  </div>
data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx CHANGED
@@ -89,7 +89,6 @@ 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()
93
92
 
94
93
  const validateTooLongNumber = (itiInit: any) => {
95
94
  const error = itiInit.getValidationError()
@@ -122,16 +121,10 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
122
121
  validateOnlyNumbers()
123
122
  }
124
123
 
125
- const getCurrentSelectedData = (itiInit: any, inputValue: string) => {
126
- return { ...itiInit.getSelectedCountryData(), number: inputValue }
127
- }
128
-
129
124
  const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
130
125
  setInputValue(evt.target.value)
131
126
  validateTooLongNumber(itiInit)
132
- const phoneNumberData = getCurrentSelectedData(itiInit, evt.target.value)
133
- setSelectedData(phoneNumberData)
134
- onChange(phoneNumberData)
127
+ onChange(evt)
135
128
  isValid(itiInit.isValidNumber())
136
129
  }
137
130
 
@@ -143,21 +136,15 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
143
136
 
144
137
  useEffect(() => {
145
138
  const telInputInit = new intlTelInput(inputRef.current, {
146
- separateDialCode: true,
147
- preferredCountries,
148
- allowDropdown: !disabled,
149
- initialCountry,
150
- onlyCountries,
151
- }
139
+ separateDialCode: true,
140
+ preferredCountries,
141
+ allowDropdown: !disabled,
142
+ initialCountry,
143
+ onlyCountries,
144
+ }
152
145
  )
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
-
146
+
147
+ inputRef.current.addEventListener("countrychange", () => validateTooLongNumber(telInputInit))
161
148
  inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
162
149
  inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
163
150
 
@@ -169,7 +156,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
169
156
  <TextInput
170
157
  className={dropDownIsOpen ? 'dropdown_open' : ''}
171
158
  dark={dark}
172
- data-phone-number={JSON.stringify(selectedData)}
173
159
  disabled={disabled}
174
160
  error={error}
175
161
  id={id}
data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.html.erb CHANGED
@@ -9,22 +9,22 @@
9
9
  </tr>
10
10
  </thead>
11
11
  <tbody>
12
- <%= pb_rails("table/table_row", props: { side_highlight_color: "solar" }) do %>
13
- <td>Solar</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: "roofing" }) do %>
20
- <td>Roofing</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: "gutters" }) do %>
27
- <td>Gutters</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>
data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx CHANGED
@@ -21,30 +21,30 @@ const TableSideHighlight = (props) => {
21
21
  </thead>
22
22
  <tbody>
23
23
  <TableRow
24
- sideHighlightColor="solar"
24
+ sideHighlightColor="product_1_highlight"
25
25
  {...props}
26
26
  >
27
- <td>{'Solar'}</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="roofing"
34
+ sideHighlightColor="product_2_highlight"
35
35
  {...props}
36
36
  >
37
- <td>{'Roofing'}</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="gutters"
44
+ sideHighlightColor="product_3_highlight"
45
45
  {...props}
46
46
  >
47
- <td>{'Gutters'}</td>
47
+ <td>{'Product 3'}</td>
48
48
  <td>{'Value 2'}</td>
49
49
  <td>{'Value 3'}</td>
50
50
  <td>{'Value 4'}</td>
data/app/pb_kits/playbook/tokens/_colors.scss CHANGED
@@ -213,22 +213,62 @@ $status_color_text: (
213
213
  $primary_action: $primary !default;
214
214
 
215
215
  /* Product colors ---------------------*/
216
- $windows: $royal !default;
217
- $siding: $yellow !default;
218
- $doors: $teal !default;
219
- $solar: $green !default;
220
- $roofing: $slate !default;
221
- $gutters: $purple !default;
222
- $insulation: $red !default;
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: $windows,
225
- siding: $siding,
226
- doors: $doors,
227
- solar: $solar,
228
- roofing: $roofing,
229
- gutters: $gutters,
230
- insulation: $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;
data/app/pb_kits/playbook/utilities/_colors.scss CHANGED
@@ -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
- .#{$name} {
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
+ }
data/lib/playbook/version.rb CHANGED
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "12.13.0"
5
- VERSION = "12.13.0.pre.alpha.PLAY705phonenumberkit438"
5
+ VERSION = "12.13.0.pre.alpha.addingProductTokens439"
6
6
  end
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.13.0.pre.alpha.PLAY705phonenumberkit438
4
+ version: 12.13.0.pre.alpha.addingProductTokens439
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX