playbook_ui 14.10.0.pre.rc.18 → 14.10.0.pre.rc.20

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 057da55d90c93598787796c2c64b565dd6410aa974406a65d7df82b9528dd489
4
- data.tar.gz: 13660184146eb30b551fe9e69638cecf14ded4abda9dfd9f92c14a9f93d4d41b
3
+ metadata.gz: 8004b611a0e7ed5891628daf08be8b7560b22d0faa48631442fc94116f6fba30
4
+ data.tar.gz: 5e7b1d10c69dc6148f1778ea2d9c912cc220d199a54db0d9f9179c75ba5bfdd2
5
5
  SHA512:
6
- metadata.gz: 6f3b48f03c998a0f10f4976cec5319efe86ab32f6d2b9b02f43fc40d5f0cd4f41a3634c1da93e1ca451ba1d697de6e7063ed2b192b011aed9de25f1840958341
7
- data.tar.gz: c339943f7409425a921a363e01d09d97973853583cb23e871ffb1ea1e7aa8f1f3de8c379117897c015ff0b25d3ba6ac8ff7a38196f6891dc2899db55da3cd07b
6
+ metadata.gz: 79e6cc10512af3e174eb5a6e11b9b638c63af121d7c9a398aaae6086e083bd3569dbcd2ab11dc0f436858a3c4c2aefe2d7677252c8cff64d5f60b75c211e4281
7
+ data.tar.gz: 2405a386d65dc6880cc5ffb3dc835a7556caa55ce59eea569cf42205a6f090d1f9ad413fc29b52c210fef9e7d51c0d84e19aaf8eec7215746f1d847086ea08e9
@@ -18,7 +18,7 @@ type HomeAddressStreetProps = {
18
18
  className?: string,
19
19
  data?: { [key: string]: string },
20
20
  dark?: boolean,
21
- emphasis: "street" | "city",
21
+ emphasis: "street" | "city" | "none",
22
22
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
23
23
  homeId: string,
24
24
  houseStyle: string,
@@ -129,6 +129,22 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
129
129
  </div>
130
130
  </div>
131
131
  }
132
+ {emphasis == 'none' &&
133
+ <div>
134
+ <Body dark={dark}>
135
+ {joinPresent([titleize(address), houseStyle], ' · ')}
136
+ </Body>
137
+ <Body dark={dark}>{titleize(addressCont)}</Body>
138
+ <div>
139
+ <Body
140
+ color="light"
141
+ dark={dark}
142
+ >
143
+ {`${titleize(city)}, ${state} ${zipcode}`}
144
+ </Body>
145
+ </div>
146
+ </div>
147
+ }
132
148
  {homeId &&
133
149
  <Hashtag
134
150
  classname="home-hashtag"
@@ -24,4 +24,20 @@
24
24
  state: "PA",
25
25
  zipcode: "19382",
26
26
  territory: "PHL",
27
- }) %>
27
+ }) %>
28
+
29
+ <br>
30
+ <br>
31
+
32
+ <%= pb_rails("home_address_street", props: {
33
+ address: "70 Prospect Ave",
34
+ address_cont: "Apt M18",
35
+ city: "West Chester",
36
+ emphasis: "none",
37
+ home_id: 8250263,
38
+ home_url: "https://powerhrg.com/",
39
+ house_style: "Colonial",
40
+ state: "PA",
41
+ zipcode: "19382",
42
+ territory: "PHL",
43
+ }) %>
@@ -32,6 +32,21 @@ const HomeAddressStreetEmphasis = (props) => {
32
32
  zipcode="19382"
33
33
  {...props}
34
34
  />
35
+ <br />
36
+ <br />
37
+ <HomeAddressStreet
38
+ address="70 Prospect Ave"
39
+ addressCont="Apt M18"
40
+ city="West Chester"
41
+ emphasis="none"
42
+ homeId="8250263"
43
+ homeUrl="https://powerhrg.com/"
44
+ houseStyle="Colonial"
45
+ state="PA"
46
+ territory="PHL"
47
+ zipcode="19382"
48
+ {...props}
49
+ />
35
50
  </div>
36
51
  )
37
52
  }
@@ -1,2 +1,3 @@
1
1
  Emphasis on street happens by default. (no prop needed)
2
- Emphasis on "city" makes the city emphasized, rather than the street.
2
+ Emphasis on "city" makes the city emphasized, rather than the street.
3
+ Adding "none" to emphasis prop will provide no emphasis.
@@ -7,7 +7,7 @@ module Playbook
7
7
  prop :address_cont
8
8
  prop :city
9
9
  prop :emphasis, type: Playbook::Props::Enum,
10
- values: %w[street city],
10
+ values: %w[street city none],
11
11
  default: "street"
12
12
  prop :home_id, type: Playbook::Props::Number
13
13
  prop :home_url
@@ -77,6 +77,20 @@ module Playbook
77
77
  }
78
78
  end
79
79
 
80
+ def none_emphasis_props
81
+ {
82
+ address_house_style: address_house_style,
83
+ address_house_style2: address_house_style2,
84
+ city_state_zip: city_state_zip,
85
+ dark: dark,
86
+ home_id: home_id,
87
+ home_url: home_url,
88
+ target: target_option,
89
+ new_window: new_window,
90
+ territory: territory,
91
+ }
92
+ end
93
+
80
94
  def target_option
81
95
  if target && home_url
82
96
  target
@@ -0,0 +1,32 @@
1
+ <%= pb_rails "body", props: {
2
+ classname: "pb_home_address_street_address",
3
+ size: 4,
4
+ text: object.address_house_style,
5
+ dark: object.dark
6
+ } %>
7
+ <%= pb_rails "body", props: {
8
+ classname: "pb_home_address_street_address",
9
+ size: 4,
10
+ text: object.address_house_style2,
11
+ dark: object.dark
12
+ } %>
13
+ <%= pb_rails "body", props: {
14
+ color: "light",
15
+ text: object.city_state_zip,
16
+ dark: object.dark
17
+ } %>
18
+
19
+ <% if object.home_id %>
20
+ <%= pb_rails("hashtag", props: {
21
+ text: "#{object.home_id}",
22
+ url: object.home_url || "#",
23
+ type: "home",
24
+ dark: object.dark,
25
+ classname: "home-hashtag",
26
+ new_window: object.new_window,
27
+ target: object.target_option}) %>
28
+ <% end %>
29
+
30
+ <%= pb_rails "body", props: { color: "light", tag: "span", dark: object.dark } do %>
31
+ <small><%= object.territory %></small>
32
+ <% end %>
@@ -0,0 +1,29 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbHomeAddressStreet
5
+ class NoneEmphasis < Playbook::KitBase
6
+ prop :address_house_style
7
+ prop :address_house_style2
8
+ prop :city_state_zip
9
+ prop :home_id, type: Playbook::Props::Number
10
+ prop :home_url
11
+ prop :new_window, type: Playbook::Props::Boolean,
12
+ default: false
13
+ prop :target
14
+ prop :territory
15
+ prop :dark, type: Playbook::Props::Boolean,
16
+ default: false
17
+
18
+ def target_option
19
+ if target && home_url
20
+ target
21
+ elsif new_window
22
+ "_blank"
23
+ else
24
+ "_self"
25
+ end
26
+ end
27
+ end
28
+ end
29
+ end
@@ -90,50 +90,7 @@
90
90
  }
91
91
  }
92
92
  }
93
- &[class*=dark] {
94
- .pb_typeahead_wrapper .pb_typeahead_loading_indicator {
95
- color: $text_dk_light;
96
- }
97
- [class^=pb_text_input_kit].dark .text_input_wrapper .text_input {
98
- display: inherit !important;
99
- }
100
- .typeahead-kit-select__menu {
101
- background-color: $bg_dark;
102
- color: $white;
103
- z-index: $z_1;
104
- }
105
- .typeahead-kit-select__option:hover {
106
- background-color: $active_dark;
107
- }
108
- .typeahead-kit-select__indicator:hover {
109
- color: $white;
110
- }
111
- .typeahead-kit-select__input {
112
- color: white;
113
- input:focus {
114
- box-shadow: none;
115
- }
116
- }
117
- .typeahead-kit-select__single-value {
118
- color: white;
119
- }
120
- .typeahead-kit-select__option--is-focused {
121
- background-color: $active_dark;
122
- }
123
- [class^=pb_list_kit] {
124
- background-color: $bg_dark;
125
- }
126
- .pb_item_kit {
127
- button {
128
- color: white !important;
129
- }
130
- @media (hover:hover) {
131
- &:hover {
132
- background-color: rgba($white,.1);
133
- }
134
- }
135
- }
136
- }
93
+
137
94
  &.react-select, &.react-select .dark {
138
95
  .text_input {
139
96
  display: inherit;
@@ -182,7 +139,7 @@
182
139
  }
183
140
  }
184
141
  }
185
-
142
+
186
143
  .typeahead-kit-select__menu {
187
144
  z-index: $z_1;
188
145
  .typeahead-kit-select__menu-list {
@@ -215,5 +172,117 @@
215
172
  }
216
173
  }
217
174
  }
218
- }
219
175
 
176
+ &[class*=dark] {
177
+ .pb_typeahead_wrapper .pb_typeahead_loading_indicator {
178
+ color: $text_dk_light;
179
+ }
180
+ .pb_text_input_kit_label {
181
+ color: $text_dk_light;
182
+ }
183
+ [class^=pb_text_input_kit].dark .text_input_wrapper .text_input {
184
+ display: inherit !important;
185
+ }
186
+ .typeahead-kit-select__menu {
187
+ background-color: $bg_dark;
188
+ color: $white;
189
+ z-index: $z_1;
190
+ .typeahead-kit-select__menu-list {
191
+ padding: 0;
192
+ }
193
+ .typeahead-kit-select__single-value {
194
+ color: white;
195
+ }
196
+
197
+ .typeahead-kit-select__option {
198
+ &.typeahead-kit-select__option--is-focused {
199
+ background-color: $hover_dark;
200
+ }
201
+ &.typeahead-kit-select__option--is-selected {
202
+ background-color: $active_dark;
203
+ }
204
+ }
205
+ }
206
+ .text_input_wrapper{
207
+ color: text_dk_default;
208
+ }
209
+ .typeahead-kit-select__option:hover {
210
+ background-color: $active_dark;
211
+ }
212
+ .typeahead-kit-select__indicator {
213
+ color: $text_dk_default;
214
+ }
215
+ .typeahead-kit-select__indicator:hover {
216
+ color: $text_dk_lighter;
217
+ }
218
+ .typeahead-kit-select__input {
219
+ color: white;
220
+ input:focus {
221
+ box-shadow: none;
222
+ }
223
+ }
224
+ .typeahead-kit-select__option--is-focused {
225
+ background-color: $active_dark;
226
+ }
227
+ [class^=pb_list_kit] {
228
+ background-color: $bg_dark;
229
+ }
230
+ .pb_item_kit {
231
+ button {
232
+ color: white !important;
233
+ }
234
+ @media (hover:hover) {
235
+ &:hover {
236
+ background-color: $hover_dark;
237
+ }
238
+ }
239
+ }
240
+
241
+ .text_input {
242
+ .typeahead-kit-select__input-container{
243
+ color: $text_dk_default
244
+ }
245
+ .typeahead-kit-select {
246
+ &__single-value{
247
+ color: $text_dk_default;
248
+ }
249
+ }
250
+ &.typeahead-kit-select {
251
+ &__single-value{
252
+ color: $text_dk_default;
253
+ }
254
+ &__control {
255
+ &--is-focused {
256
+ @include pb_textarea_focus;
257
+ @include transition_default;
258
+ border-color: $active_dark;
259
+ background-color: rgba($focus_input_dark,$opacity_5);
260
+ box-shadow: none;
261
+ .typeahead-plus-icon {
262
+ display: none;
263
+ }
264
+ }
265
+ }
266
+ }
267
+ }
268
+
269
+ &.inline {
270
+ &:not(:hover) {
271
+ .text_input {
272
+ background-color: transparent;
273
+ border-color: transparent;
274
+ }
275
+ .typeahead-kit-select__indicator {
276
+ color: transparent;
277
+ }
278
+ }
279
+
280
+ &:hover {
281
+ .text_input {
282
+ background-color: $hover_dark;
283
+ }
284
+ }
285
+ }
286
+
287
+ }
288
+ }
@@ -55,11 +55,18 @@ const TypeaheadWithHighlight = (props) => {
55
55
  marginRight="sm"
56
56
  name={name}
57
57
  size="sm"
58
+ {...props}
58
59
  />
59
60
  </FlexItem>
60
61
  <FlexItem>
61
- <Title size={4}><span dangerouslySetInnerHTML={{ __html: highlighted(name) }} /></Title>
62
- <Body color="light">
62
+ <Title
63
+ size={4}
64
+ {...props}
65
+ >
66
+ <span dangerouslySetInnerHTML={{ __html: highlighted(name) }} /></Title>
67
+ <Body color="light"
68
+ {...props}
69
+ >
63
70
  <span dangerouslySetInnerHTML={{ __html: highlighted(title) }} />{" • "}
64
71
  {territory}
65
72
  </Body>
@@ -25,8 +25,9 @@
25
25
  validation: object.validation,
26
26
  label: object.label,
27
27
  id: object.input_options[:id],
28
+ dark: object.dark,
28
29
  }) %>
29
- <%= pb_rails("list", props: { ordered: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
30
+ <%= pb_rails("list", props: { ordered: false, borderless: true, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
30
31
  <% end %>
31
32
  </div>
32
33
 
@@ -36,4 +37,4 @@
36
37
  <% end %>
37
38
  </template>
38
39
  <% end %>
39
- <% end %>
40
+ <% end %>