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

Sign up to get free protection for your applications and to get access to all the features.
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