playbook_ui 12.9.1 → 12.10.0.pre.alpha.PLAY705phonenumberreturn372

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: c69bc1999d0d0eff6fb2fe27e30fcf7ba6ad31220226d8201c1e9fbeac7b4e5d
4
- data.tar.gz: 98b5b63fc62da2359e4739e85d8e6d44411739d08d6510b048e772d5c9956bb5
3
+ metadata.gz: 203044cb15b22597397b39bf38a531a0c158c55ec72ae4e3cdebe8ad8ec6a64a
4
+ data.tar.gz: e8fa151f4da651ffbf4789f3b160fbef3f5e70a0762512c0b1350b2c457f8459
5
5
  SHA512:
6
- metadata.gz: cc9fb71c1003c487e09a0ae2df98a7c3ecfb1b2fab12755bef90a329529adc23e82415d6b03179d38456fe95b3cdf75b763115901a876de6b96e7ba016f841e4
7
- data.tar.gz: 8a7e54dac38e626f767c3d22476577cced9e04b5a772f57b30687a913eaec6bc28dcc4fb943ffcc6af00db381b6d6b86e346a6912826ea424ff2616981a6b83a
6
+ metadata.gz: 7498a9c8f75ce5a49924ca0df255b9a62c71197b850c443ee2f7216298583018fb43d106d217b3afd230356c1e1d2f642fa0d0f4e85fc12a70c8e4a3ceadff5e
7
+ data.tar.gz: 235cbf4d84f40cf6c557fb986acc5c8665a0d837895740609957445c9a810fab8c2d306dc10bd9518d94a4a3d8c27f548ef00484c4f5210cc5f18527837b885f
@@ -52,6 +52,7 @@
52
52
  @import 'pb_list/list';
53
53
  @import 'pb_loading_inline/loading_inline';
54
54
  @import 'pb_map/map';
55
+ @import 'pb_map/pb_map_button_mixin';
55
56
  @import 'pb_message/message';
56
57
  @import 'pb_multiple_users/multiple_users';
57
58
  @import 'pb_multiple_users_stacked/multiple_users_stacked';
@@ -0,0 +1,8 @@
1
+ <%= pb_rails("body", props: {
2
+ line_height: "loose",
3
+ max_width: "md"
4
+ }) do %>
5
+ <p>Infuse your life with action. Don't wait for it to happen. Make it happen. Make your own future. Make your own hope. Make your own love. And whatever your beliefs, honor your creator, not by passively waiting for grace to come down from upon high, but by doing what you can to make grace happen... yourself, right now, right down here on Earth.</p>
6
+ <br />
7
+ <p>- Bradley Whitford</p>
8
+ <% end %>
@@ -0,0 +1,20 @@
1
+ import React from 'react'
2
+ import { Body } from '../..'
3
+
4
+ const BodyBlock = (props) => {
5
+ return (
6
+ <>
7
+ <Body
8
+ lineHeight='loose'
9
+ maxWidth='md'
10
+ {...props}
11
+ >
12
+ <p>{`Infuse your life with action. Don't wait for it to happen. Make it happen. Make your own future. Make your own hope. Make your own love. And whatever your beliefs, honor your creator, not by passively waiting for grace to come down from upon high, but by doing what you can to make grace happen... yourself, right now, right down here on Earth.`}</p>
13
+ <br />
14
+ <p>{`- Bradley Whitford`}</p>
15
+ </Body>
16
+ </>
17
+ )
18
+ }
19
+
20
+ export default BodyBlock
@@ -0,0 +1 @@
1
+ Using two global props can greatly improve the readability of articles and even forms. Set Max Width to `md`, and Line Height to `loose`.
@@ -2,8 +2,10 @@ examples:
2
2
  rails:
3
3
  - body_light: Default
4
4
  - body_block: Block
5
+ - body_articles: Best settings for articles
5
6
  - body_styled: Styled b/strong/a tags
6
7
  react:
7
8
  - body_light: Default
8
9
  - body_block: Block
10
+ - body_articles: Best settings for articles
9
11
  - body_styled: Styled b/strong/a tags
@@ -1,3 +1,4 @@
1
1
  export { default as BodyLight } from './_body_light.jsx'
2
2
  export { default as BodyBlock } from './_body_block.jsx'
3
3
  export { default as BodyStyled } from './_body_styled.jsx'
4
+ export { default as BodyArticles } from './_body_articles.jsx'
@@ -2,24 +2,102 @@
2
2
  @import "../tokens/colors";
3
3
  @import "../tokens/shadows";
4
4
  @import "../tokens/border_radius";
5
+ @import "./_pb_map_button_mixin.scss";
5
6
 
6
7
  [class*="pb_map"] {
7
- font-family: $font_family_base !important;
8
+ .mapboxgl-map,
9
+ .maplibregl-map {
10
+ font-family: $font_family_base !important;
11
+ }
8
12
 
9
13
  .maplibregl-ctrl-attrib-button {
14
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='15' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 0C3.5625 0 0 3.59375 0 8C0 12.4375 3.5625 16 8 16C12.4062 16 16 12.4375 16 8C16 3.59375 12.4062 0 8 0ZM8 14.5C4.40625 14.5 1.5 11.5938 1.5 8C1.5 4.4375 4.40625 1.5 8 1.5C11.5625 1.5 14.5 4.4375 14.5 8C14.5 11.5938 11.5625 14.5 8 14.5ZM9.25 10.5H8.75V7.75C8.75 7.34375 8.40625 7 8 7H7C6.5625 7 6.25 7.34375 6.25 7.75C6.25 8.1875 6.5625 8.5 7 8.5H7.25V10.5H6.75C6.3125 10.5 6 10.8438 6 11.25C6 11.6875 6.3125 12 6.75 12H9.25C9.65625 12 10 11.6875 10 11.25C10 10.8438 9.65625 10.5 9.25 10.5ZM8 6C8.53125 6 9 5.5625 9 5C9 4.46875 8.53125 4 8 4C7.4375 4 7 4.46875 7 5C7 5.5625 7.4375 6 8 6Z' fill='%23687887'/%3e%3c/svg%3e");
15
+ background-repeat: no-repeat;
16
+ background-position: center;
17
+ background-color: unset !important;
10
18
  &:focus {
11
19
  box-shadow: unset;
12
20
  }
13
21
  &:focus-visible {
14
- box-shadow: 0 0 0 1px $primary_action;
22
+ box-shadow: inset 0 0 0 1px $primary_action;
15
23
  }
16
24
  &:hover {
17
25
  box-shadow: $shadow_deep;
26
+ background-color: $card_light !important;
27
+ }
28
+ &:active {
29
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='15' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 0C3.5625 0 0 3.59375 0 8C0 12.4375 3.5625 16 8 16C12.4062 16 16 12.4375 16 8C16 3.59375 12.4062 0 8 0ZM8 14.5C4.40625 14.5 1.5 11.5938 1.5 8C1.5 4.4375 4.40625 1.5 8 1.5C11.5625 1.5 14.5 4.4375 14.5 8C14.5 11.5938 11.5625 14.5 8 14.5ZM9.25 10.5H8.75V7.75C8.75 7.34375 8.40625 7 8 7H7C6.5625 7 6.25 7.34375 6.25 7.75C6.25 8.1875 6.5625 8.5 7 8.5H7.25V10.5H6.75C6.3125 10.5 6 10.8438 6 11.25C6 11.6875 6.3125 12 6.75 12H9.25C9.65625 12 10 11.6875 10 11.25C10 10.8438 9.65625 10.5 9.25 10.5ZM8 6C8.53125 6 9 5.5625 9 5C9 4.46875 8.53125 4 8 4C7.4375 4 7 4.46875 7 5C7 5.5625 7.4375 6 8 6Z' fill='%23242B42'/%3e%3c/svg%3e");
18
30
  }
19
31
  }
32
+
33
+ .mapboxgl-ctrl-attrib.mapboxgl-compact,
34
+ .maplibregl-ctrl-attrib.maplibregl-compact {
35
+ background-color: unset;
36
+ }
37
+ .mapboxgl-ctrl-attrib.mapboxgl-compact-show,
38
+ .maplibregl-ctrl-attrib.maplibregl-compact-show {
39
+ background-color: $card_light;
40
+ box-shadow: $shadow_deep;
41
+ color: $text_lt_default;
42
+ }
43
+
44
+ .mapboxgl-ctrl-group:not(:empty),
45
+ .maplibregl-ctrl-group:not(:empty) {
46
+ position: absolute;
47
+ top: 135px;
48
+ right: $space_xs + 3;
49
+ margin: unset;
50
+ box-shadow: unset;
51
+ border-radius: $border_radius_md;
52
+
53
+ .mapbox-gl-draw_ctrl-draw-btn {
54
+ width: $space_lg + 2;
55
+ height: $space_lg + 3;
56
+ box-shadow: $shadow_deep;
57
+ background: $card_light;
58
+ border: solid 1px $border_light;
59
+ }
60
+
61
+ .mapbox-gl-draw_polygon {
62
+ @include pb_map_button_states;
63
+ border-top-left-radius: $border_radius_md;
64
+ border-top-right-radius: $border_radius_md;
65
+ border-bottom-color: transparent;
66
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='15' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.13708 11.2535L0.417607 13.6935L0.04223 15.0386C-0.0516144 15.2888 0.0109485 15.5703 0.229919 15.758C0.417608 15.977 0.699141 16.0396 0.949392 15.977L2.2945 15.5703L4.73445 14.8509C5.04726 14.757 5.36008 14.6006 5.61033 14.4129H5.64161V14.3817C5.67289 14.3504 5.73546 14.3191 5.76674 14.2878C5.79802 14.2252 5.86058 14.194 5.89186 14.1627L15.4014 4.65312C16.0896 3.96493 16.1835 2.90136 15.6517 2.11932C15.5891 2.02547 15.4953 1.90035 15.4014 1.8065L14.1814 0.586527C13.3994 -0.195509 12.1169 -0.195509 11.3348 0.586527L1.82527 10.0961C1.76271 10.1587 1.66887 10.2525 1.6063 10.3463H1.57502V10.3776C1.38733 10.6279 1.23093 10.9407 1.13708 11.2535ZM11.9917 5.93566L6.1734 11.754L4.60932 11.3786L4.23395 9.81456L10.0523 3.99621L11.9917 5.93566ZM3.04525 11.1909L3.26422 12.1607C3.32678 12.4422 3.54575 12.6612 3.82729 12.7237L4.79701 12.974L4.54676 13.3181C4.4842 13.3494 4.39035 13.3806 4.29651 13.4119L3.57703 13.6309L1.85655 14.1314L2.35706 12.4109L2.57603 11.6914C2.60731 11.5976 2.63859 11.5038 2.66987 11.4412L3.04525 11.1909ZM9.86461 6.81154C10.0523 6.62385 10.0523 6.31103 9.86461 6.12335C9.67692 5.90438 9.33282 5.90438 9.14513 6.12335L6.14211 9.12637C5.95443 9.31405 5.95443 9.62687 6.14211 9.81456C6.3298 10.0022 6.6739 10.0022 6.86159 9.81456L9.86461 6.81154Z' fill='%23687887'/%3e%3c/svg%3e");
67
+ background-repeat: no-repeat;
68
+ background-position: center;
69
+ &.active {
70
+ background-color: darken($bg_light, 5%);
71
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='15' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.13708 11.2535L0.417607 13.6935L0.04223 15.0386C-0.0516144 15.2888 0.0109485 15.5703 0.229919 15.758C0.417608 15.977 0.699141 16.0396 0.949392 15.977L2.2945 15.5703L4.73445 14.8509C5.04726 14.757 5.36008 14.6006 5.61033 14.4129H5.64161V14.3817C5.67289 14.3504 5.73546 14.3191 5.76674 14.2878C5.79802 14.2252 5.86058 14.194 5.89186 14.1627L15.4014 4.65312C16.0896 3.96493 16.1835 2.90136 15.6517 2.11932C15.5891 2.02547 15.4953 1.90035 15.4014 1.8065L14.1814 0.586527C13.3994 -0.195509 12.1169 -0.195509 11.3348 0.586527L1.82527 10.0961C1.76271 10.1587 1.66887 10.2525 1.6063 10.3463H1.57502V10.3776C1.38733 10.6279 1.23093 10.9407 1.13708 11.2535ZM11.9917 5.93566L6.1734 11.754L4.60932 11.3786L4.23395 9.81456L10.0523 3.99621L11.9917 5.93566ZM3.04525 11.1909L3.26422 12.1607C3.32678 12.4422 3.54575 12.6612 3.82729 12.7237L4.79701 12.974L4.54676 13.3181C4.4842 13.3494 4.39035 13.3806 4.29651 13.4119L3.57703 13.6309L1.85655 14.1314L2.35706 12.4109L2.57603 11.6914C2.60731 11.5976 2.63859 11.5038 2.66987 11.4412L3.04525 11.1909ZM9.86461 6.81154C10.0523 6.62385 10.0523 6.31103 9.86461 6.12335C9.67692 5.90438 9.33282 5.90438 9.14513 6.12335L6.14211 9.12637C5.95443 9.31405 5.95443 9.62687 6.14211 9.81456C6.3298 10.0022 6.6739 10.0022 6.86159 9.81456L9.86461 6.81154Z' fill='%23242B42'/%3e%3c/svg%3e");
72
+ }
73
+ &:active {
74
+ &:focus {
75
+ border-bottom-color: transparent;
76
+ }
77
+ }
78
+ }
79
+
80
+ .mapbox-gl-draw_trash {
81
+ @include pb_map_button_states;
82
+ border-bottom-left-radius: $border_radius_md;
83
+ border-bottom-right-radius: $border_radius_md;
84
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='15' viewBox='0 0 14 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5 12.5C5 12.7813 4.75 13 4.5 13C4.21875 13 4 12.7813 4 12.5V6C4 5.75 4.21875 5.5 4.5 5.5C4.75 5.5 5 5.75 5 6V12.5ZM7.5 12.5C7.5 12.7813 7.25 13 7 13C6.71875 13 6.5 12.7813 6.5 12.5V6C6.5 5.75 6.71875 5.5 7 5.5C7.25 5.5 7.5 5.75 7.5 6V12.5ZM10 12.5C10 12.7813 9.75 13 9.5 13C9.21875 13 9 12.7813 9 12.5V6C9 5.75 9.21875 5.5 9.5 5.5C9.75 5.5 10 5.75 10 6V12.5ZM9.90625 0.78125L11.0625 2.5H13.25C13.6563 2.5 14 2.84375 14 3.25C14 3.6875 13.6563 4 13.25 4H13V13.5C13 14.9063 11.875 16 10.5 16H3.5C2.09375 16 1 14.9063 1 13.5V4H0.75C0.3125 4 0 3.6875 0 3.25C0 2.84375 0.3125 2.5 0.75 2.5H2.90625L4.0625 0.78125C4.375 0.3125 4.9375 0 5.53125 0H8.4375C9.03125 0 9.59375 0.3125 9.90625 0.78125ZM4.71875 2.5H9.25L8.65625 1.625C8.625 1.5625 8.53125 1.5 8.4375 1.5H5.53125C5.4375 1.5 5.34375 1.5625 5.3125 1.625L4.71875 2.5ZM2.5 13.5C2.5 14.0625 2.9375 14.5 3.5 14.5H10.5C11.0313 14.5 11.5 14.0625 11.5 13.5V4H2.5V13.5Z' fill='%23687887'/%3e%3c/svg%3e");
85
+ background-repeat: no-repeat;
86
+ background-position: center;
87
+ &:active {
88
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='15' viewBox='0 0 14 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5 12.5C5 12.7813 4.75 13 4.5 13C4.21875 13 4 12.7813 4 12.5V6C4 5.75 4.21875 5.5 4.5 5.5C4.75 5.5 5 5.75 5 6V12.5ZM7.5 12.5C7.5 12.7813 7.25 13 7 13C6.71875 13 6.5 12.7813 6.5 12.5V6C6.5 5.75 6.71875 5.5 7 5.5C7.25 5.5 7.5 5.75 7.5 6V12.5ZM10 12.5C10 12.7813 9.75 13 9.5 13C9.21875 13 9 12.7813 9 12.5V6C9 5.75 9.21875 5.5 9.5 5.5C9.75 5.5 10 5.75 10 6V12.5ZM9.90625 0.78125L11.0625 2.5H13.25C13.6563 2.5 14 2.84375 14 3.25C14 3.6875 13.6563 4 13.25 4H13V13.5C13 14.9063 11.875 16 10.5 16H3.5C2.09375 16 1 14.9063 1 13.5V4H0.75C0.3125 4 0 3.6875 0 3.25C0 2.84375 0.3125 2.5 0.75 2.5H2.90625L4.0625 0.78125C4.375 0.3125 4.9375 0 5.53125 0H8.4375C9.03125 0 9.59375 0.3125 9.90625 0.78125ZM4.71875 2.5H9.25L8.65625 1.625C8.625 1.5625 8.53125 1.5 8.4375 1.5H5.53125C5.4375 1.5 5.34375 1.5625 5.3125 1.625L4.71875 2.5ZM2.5 13.5C2.5 14.0625 2.9375 14.5 3.5 14.5H10.5C11.0313 14.5 11.5 14.0625 11.5 13.5V4H2.5V13.5Z' fill='%23242B42'/%3e%3c/svg%3e");
89
+ }
90
+ }
91
+ }
92
+
93
+ .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
94
+ .maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
95
+ margin-top: -1px;
96
+ }
97
+
20
98
  .custom-nav-control {
21
99
  position: absolute;
22
- right: $space_xs + 2;
100
+ right: $space_xs + 3;
23
101
  top: $space_xs + 2;
24
102
  z-index: 2;
25
103
 
@@ -30,7 +108,12 @@
30
108
  .map-zoom-in-button {
31
109
  border-bottom-left-radius: unset;
32
110
  border-bottom-right-radius: unset;
33
- border-bottom: transparent;
111
+ border-bottom-color: transparent;
112
+ &:active {
113
+ &:focus {
114
+ border-bottom-color: transparent;
115
+ }
116
+ }
34
117
  }
35
118
  .map-zoom-out-button {
36
119
  border-top-left-radius: unset;
@@ -41,38 +124,18 @@
41
124
  .map-zoom-in-button,
42
125
  .map-zoom-out-button,
43
126
  .map-flyto-button {
44
- border: solid 1px $border_light;
45
- cursor: pointer;
46
- padding: $space_xs + 2;
47
- text-align: center;
48
- color: $text_lt_light;
49
- background-color: $card_light;
50
-
51
- display: flex;
52
- justify-content: center;
53
- align-items: center;
127
+ @include pb_map_button;
54
128
 
55
129
  svg {
56
- width: $space_xs + 4;
130
+ width: $space_xs + 6;
57
131
  height: $space_sm;
58
132
  display: flex;
59
133
  }
60
-
61
- &:hover {
62
- background-color: darken($bg_light, 2%);
63
- }
64
-
65
- &:focus-visible {
66
- border: solid 1px $primary_action;
67
- box-shadow: unset;
68
- }
69
134
  }
70
135
 
71
136
  .map-flyto-button {
72
- border-radius: $border_radius_md;
73
137
  margin-top: $space_xs;
74
138
  box-shadow: $shadow_deep;
75
- background-color: $card_light;
76
139
  }
77
140
  }
78
141
 
@@ -80,6 +143,7 @@
80
143
  padding: $space_sm;
81
144
  background-color: $card_light;
82
145
  box-shadow: $shadow_deeper;
146
+ border-radius: $border_rad_heavier;
83
147
  }
84
148
 
85
149
  &.dark {
@@ -88,11 +152,25 @@
88
152
  hue-rotate(185deg);
89
153
  }
90
154
 
155
+ .mapboxgl-marker,
156
+ .maplibregl-marker svg g:nth-of-type(1) g:nth-of-type(5) circle {
157
+ fill: $bg_dark;
158
+ }
159
+
160
+ .maplibregl-ctrl-attrib-button {
161
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='15' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 0C3.5625 0 0 3.59375 0 8C0 12.4375 3.5625 16 8 16C12.4062 16 16 12.4375 16 8C16 3.59375 12.4062 0 8 0ZM8 14.5C4.40625 14.5 1.5 11.5938 1.5 8C1.5 4.4375 4.40625 1.5 8 1.5C11.5625 1.5 14.5 4.4375 14.5 8C14.5 11.5938 11.5625 14.5 8 14.5ZM9.25 10.5H8.75V7.75C8.75 7.34375 8.40625 7 8 7H7C6.5625 7 6.25 7.34375 6.25 7.75C6.25 8.1875 6.5625 8.5 7 8.5H7.25V10.5H6.75C6.3125 10.5 6 10.8438 6 11.25C6 11.6875 6.3125 12 6.75 12H9.25C9.65625 12 10 11.6875 10 11.25C10 10.8438 9.65625 10.5 9.25 10.5ZM8 6C8.53125 6 9 5.5625 9 5C9 4.46875 8.53125 4 8 4C7.4375 4 7 4.46875 7 5C7 5.5625 7.4375 6 8 6Z' fill='%23ffffff99'/%3e%3c/svg%3e");
162
+ &:hover {
163
+ background-color: $bg_dark !important;
164
+ }
165
+ &:active {
166
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='15' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 0C3.5625 0 0 3.59375 0 8C0 12.4375 3.5625 16 8 16C12.4062 16 16 12.4375 16 8C16 3.59375 12.4062 0 8 0ZM8 14.5C4.40625 14.5 1.5 11.5938 1.5 8C1.5 4.4375 4.40625 1.5 8 1.5C11.5625 1.5 14.5 4.4375 14.5 8C14.5 11.5938 11.5625 14.5 8 14.5ZM9.25 10.5H8.75V7.75C8.75 7.34375 8.40625 7 8 7H7C6.5625 7 6.25 7.34375 6.25 7.75C6.25 8.1875 6.5625 8.5 7 8.5H7.25V10.5H6.75C6.3125 10.5 6 10.8438 6 11.25C6 11.6875 6.3125 12 6.75 12H9.25C9.65625 12 10 11.6875 10 11.25C10 10.8438 9.65625 10.5 9.25 10.5ZM8 6C8.53125 6 9 5.5625 9 5C9 4.46875 8.53125 4 8 4C7.4375 4 7 4.46875 7 5C7 5.5625 7.4375 6 8 6Z' fill='%23FFFFFF'/%3e%3c/svg%3e");
167
+ }
168
+ }
169
+
91
170
  .pb_section_separator_kit_card_horizontal::after {
92
171
  background: $border_dark;
93
172
  }
94
173
  .custom-nav-control-zoom {
95
- border: solid 1px #0a0527;
96
174
  background: $bg_dark;
97
175
  }
98
176
 
@@ -108,12 +186,56 @@
108
186
  .map-zoom-in-button,
109
187
  .map-zoom-out-button,
110
188
  .map-flyto-button {
111
- color: $text_dk_default;
189
+ @include pb_map_button_dark;
190
+ }
191
+
192
+ .maplibregl-ctrl-attrib-button {
193
+ background-color: $text_dk_light;
194
+ }
195
+ .mapboxgl-ctrl-attrib.mapboxgl-compact-show,
196
+ .maplibregl-ctrl-attrib.maplibregl-compact-show {
112
197
  background-color: $bg_dark;
113
- border-color: $border_dark;
198
+ box-shadow: $shadow_deep;
199
+ color: $text_dk_light;
200
+ a {
201
+ color: $text_dk_light;
202
+ }
203
+ }
114
204
 
115
- &:hover {
116
- background-color: #221e3d;
205
+ .mapboxgl-ctrl-group:not(:empty),
206
+ .maplibregl-ctrl-group:not(:empty) {
207
+ background-color: $bg_dark;
208
+
209
+ .mapbox-gl-draw_ctrl-draw-btn {
210
+ @include pb_map_button_dark;
211
+ }
212
+
213
+ .mapbox-gl-draw_polygon {
214
+ border-bottom-color: transparent;
215
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='15' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.13708 11.2535L0.417607 13.6935L0.04223 15.0386C-0.0516144 15.2888 0.0109485 15.5703 0.229919 15.758C0.417608 15.977 0.699141 16.0396 0.949392 15.977L2.2945 15.5703L4.73445 14.8509C5.04726 14.757 5.36008 14.6006 5.61033 14.4129H5.64161V14.3817C5.67289 14.3504 5.73546 14.3191 5.76674 14.2878C5.79802 14.2252 5.86058 14.194 5.89186 14.1627L15.4014 4.65312C16.0896 3.96493 16.1835 2.90136 15.6517 2.11932C15.5891 2.02547 15.4953 1.90035 15.4014 1.8065L14.1814 0.586527C13.3994 -0.195509 12.1169 -0.195509 11.3348 0.586527L1.82527 10.0961C1.76271 10.1587 1.66887 10.2525 1.6063 10.3463H1.57502V10.3776C1.38733 10.6279 1.23093 10.9407 1.13708 11.2535ZM11.9917 5.93566L6.1734 11.754L4.60932 11.3786L4.23395 9.81456L10.0523 3.99621L11.9917 5.93566ZM3.04525 11.1909L3.26422 12.1607C3.32678 12.4422 3.54575 12.6612 3.82729 12.7237L4.79701 12.974L4.54676 13.3181C4.4842 13.3494 4.39035 13.3806 4.29651 13.4119L3.57703 13.6309L1.85655 14.1314L2.35706 12.4109L2.57603 11.6914C2.60731 11.5976 2.63859 11.5038 2.66987 11.4412L3.04525 11.1909ZM9.86461 6.81154C10.0523 6.62385 10.0523 6.31103 9.86461 6.12335C9.67692 5.90438 9.33282 5.90438 9.14513 6.12335L6.14211 9.12637C5.95443 9.31405 5.95443 9.62687 6.14211 9.81456C6.3298 10.0022 6.6739 10.0022 6.86159 9.81456L9.86461 6.81154Z' fill='%23ffffff99'/%3e%3c/svg%3e");
216
+ &:focus-visible {
217
+ border: solid 1px $primary_action;
218
+ }
219
+ &:active {
220
+ &:focus {
221
+ border-bottom-color: transparent;
222
+ }
223
+ }
224
+ &.active {
225
+ background-color: $bg_dark;
226
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='15' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1.13708 11.2535L0.417607 13.6935L0.04223 15.0386C-0.0516144 15.2888 0.0109485 15.5703 0.229919 15.758C0.417608 15.977 0.699141 16.0396 0.949392 15.977L2.2945 15.5703L4.73445 14.8509C5.04726 14.757 5.36008 14.6006 5.61033 14.4129H5.64161V14.3817C5.67289 14.3504 5.73546 14.3191 5.76674 14.2878C5.79802 14.2252 5.86058 14.194 5.89186 14.1627L15.4014 4.65312C16.0896 3.96493 16.1835 2.90136 15.6517 2.11932C15.5891 2.02547 15.4953 1.90035 15.4014 1.8065L14.1814 0.586527C13.3994 -0.195509 12.1169 -0.195509 11.3348 0.586527L1.82527 10.0961C1.76271 10.1587 1.66887 10.2525 1.6063 10.3463H1.57502V10.3776C1.38733 10.6279 1.23093 10.9407 1.13708 11.2535ZM11.9917 5.93566L6.1734 11.754L4.60932 11.3786L4.23395 9.81456L10.0523 3.99621L11.9917 5.93566ZM3.04525 11.1909L3.26422 12.1607C3.32678 12.4422 3.54575 12.6612 3.82729 12.7237L4.79701 12.974L4.54676 13.3181C4.4842 13.3494 4.39035 13.3806 4.29651 13.4119L3.57703 13.6309L1.85655 14.1314L2.35706 12.4109L2.57603 11.6914C2.60731 11.5976 2.63859 11.5038 2.66987 11.4412L3.04525 11.1909ZM9.86461 6.81154C10.0523 6.62385 10.0523 6.31103 9.86461 6.12335C9.67692 5.90438 9.33282 5.90438 9.14513 6.12335L6.14211 9.12637C5.95443 9.31405 5.95443 9.62687 6.14211 9.81456C6.3298 10.0022 6.6739 10.0022 6.86159 9.81456L9.86461 6.81154Z' fill='%23FFFFFF'/%3e%3c/svg%3e");
227
+ }
228
+ }
229
+
230
+ .mapbox-gl-draw_trash {
231
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='15' viewBox='0 0 14 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5 12.5C5 12.7813 4.75 13 4.5 13C4.21875 13 4 12.7813 4 12.5V6C4 5.75 4.21875 5.5 4.5 5.5C4.75 5.5 5 5.75 5 6V12.5ZM7.5 12.5C7.5 12.7813 7.25 13 7 13C6.71875 13 6.5 12.7813 6.5 12.5V6C6.5 5.75 6.71875 5.5 7 5.5C7.25 5.5 7.5 5.75 7.5 6V12.5ZM10 12.5C10 12.7813 9.75 13 9.5 13C9.21875 13 9 12.7813 9 12.5V6C9 5.75 9.21875 5.5 9.5 5.5C9.75 5.5 10 5.75 10 6V12.5ZM9.90625 0.78125L11.0625 2.5H13.25C13.6563 2.5 14 2.84375 14 3.25C14 3.6875 13.6563 4 13.25 4H13V13.5C13 14.9063 11.875 16 10.5 16H3.5C2.09375 16 1 14.9063 1 13.5V4H0.75C0.3125 4 0 3.6875 0 3.25C0 2.84375 0.3125 2.5 0.75 2.5H2.90625L4.0625 0.78125C4.375 0.3125 4.9375 0 5.53125 0H8.4375C9.03125 0 9.59375 0.3125 9.90625 0.78125ZM4.71875 2.5H9.25L8.65625 1.625C8.625 1.5625 8.53125 1.5 8.4375 1.5H5.53125C5.4375 1.5 5.34375 1.5625 5.3125 1.625L4.71875 2.5ZM2.5 13.5C2.5 14.0625 2.9375 14.5 3.5 14.5H10.5C11.0313 14.5 11.5 14.0625 11.5 13.5V4H2.5V13.5Z' fill='%23ffffff99'/%3e%3c/svg%3e");
232
+ &:focus-visible {
233
+ border: solid 1px $primary_action;
234
+ }
235
+ &:active {
236
+ background-color: $bg_dark;
237
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='15' viewBox='0 0 14 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5 12.5C5 12.7813 4.75 13 4.5 13C4.21875 13 4 12.7813 4 12.5V6C4 5.75 4.21875 5.5 4.5 5.5C4.75 5.5 5 5.75 5 6V12.5ZM7.5 12.5C7.5 12.7813 7.25 13 7 13C6.71875 13 6.5 12.7813 6.5 12.5V6C6.5 5.75 6.71875 5.5 7 5.5C7.25 5.5 7.5 5.75 7.5 6V12.5ZM10 12.5C10 12.7813 9.75 13 9.5 13C9.21875 13 9 12.7813 9 12.5V6C9 5.75 9.21875 5.5 9.5 5.5C9.75 5.5 10 5.75 10 6V12.5ZM9.90625 0.78125L11.0625 2.5H13.25C13.6563 2.5 14 2.84375 14 3.25C14 3.6875 13.6563 4 13.25 4H13V13.5C13 14.9063 11.875 16 10.5 16H3.5C2.09375 16 1 14.9063 1 13.5V4H0.75C0.3125 4 0 3.6875 0 3.25C0 2.84375 0.3125 2.5 0.75 2.5H2.90625L4.0625 0.78125C4.375 0.3125 4.9375 0 5.53125 0H8.4375C9.03125 0 9.59375 0.3125 9.90625 0.78125ZM4.71875 2.5H9.25L8.65625 1.625C8.625 1.5625 8.53125 1.5 8.4375 1.5H5.53125C5.4375 1.5 5.34375 1.5625 5.3125 1.625L4.71875 2.5ZM2.5 13.5C2.5 14.0625 2.9375 14.5 3.5 14.5H10.5C11.0313 14.5 11.5 14.0625 11.5 13.5V4H2.5V13.5Z' fill='%23FFFFFF'/%3e%3c/svg%3e");
238
+ }
117
239
  }
118
240
  }
119
241
  }
@@ -0,0 +1,53 @@
1
+ @import "../tokens/typography";
2
+ @import "../tokens/colors";
3
+ @import "../tokens/shadows";
4
+ @import "../tokens/border_radius";
5
+
6
+ @mixin pb_map_button_states {
7
+ &:hover {
8
+ background-color: darken($bg_light, 2%);
9
+ }
10
+ &:focus-visible {
11
+ border: solid 1px $primary_action;
12
+ box-shadow: unset;
13
+ }
14
+ &:active {
15
+ color: $text_lt_default;
16
+ background-color: darken($bg_light, 5%);
17
+ &:focus {
18
+ border: solid 1px $border_light;
19
+ }
20
+ }
21
+ }
22
+
23
+ @mixin pb_map_button {
24
+ @include pb_map_button_states;
25
+ border: solid 1px $border_light;
26
+ border-radius: $border_radius_md;
27
+ cursor: pointer;
28
+ padding: $space_xs + 1;
29
+ text-align: center;
30
+ color: $text_lt_light;
31
+ background-color: $card_light;
32
+ min-height: 0;
33
+
34
+ display: flex;
35
+ justify-content: center;
36
+ align-items: center;
37
+ }
38
+
39
+ @mixin pb_map_button_dark {
40
+ color: $text_dk_light;
41
+ background-color: $bg_dark;
42
+ border-color: $border_dark;
43
+ &:hover {
44
+ background-color: #221e3d;
45
+ }
46
+ &:active {
47
+ color: $text_dk_default;
48
+ background-color: $bg_dark;
49
+ &:focus {
50
+ border: solid 1px $border_dark;
51
+ }
52
+ }
53
+ }
@@ -1,7 +1,6 @@
1
1
  import React, { useRef, useEffect, useState } from 'react'
2
- import { Map } from '../../'
2
+ import { Map, mapTheme } from '../../'
3
3
  import maplibregl from 'maplibre-gl'
4
- import mapTheme from '../pbMapTheme'
5
4
 
6
5
  const MapDefault = (props) => {
7
6
 
@@ -1,28 +1,35 @@
1
- import React, { useRef, useEffect } from 'react'
2
- import { Map } from '../../'
1
+ import React, { useRef, useEffect, useState } from 'react'
2
+ import { Map, mapTheme } from '../../'
3
3
  import maplibregl from 'maplibre-gl'
4
4
  import MapboxDraw from "@mapbox/mapbox-gl-draw";
5
- import mapTheme from '../pbMapTheme'
6
5
 
7
6
  const MapWithPlugin = (props) => {
8
7
  //set Map instance to access from outside useEffect
8
+ const [mapInstance, setMapInstance] = useState(null)
9
9
  const mapContainerRef = useRef(null)
10
10
 
11
11
  //Set default position
12
12
  const defaultPosition = [-75.379143, 39.831200]
13
13
 
14
+ // linking Maplibre methods to PB custom zoom in, zoom out, and fly to buttons
15
+ const handleZoomIn = (map) => {map.zoomIn({...mapTheme.zoomConfig})}
16
+ const handleZoomOut = (map) => {map.zoomOut({...mapTheme.zoomConfig})}
17
+ const handleFlyTo = (map) => {map.flyTo({
18
+ center: defaultPosition,
19
+ ... mapTheme.flyToConfig
20
+ });}
21
+
14
22
  //This function should contain all maplibre related code
15
23
  const loadMap = ( { target: map }) => {
16
24
  //set marker/pin
17
- /* eslint-disable-next-line */
18
- const marker = new maplibregl.Marker({
25
+ new maplibregl.Marker({
19
26
  color: mapTheme.marker,
20
27
  }).setLngLat(defaultPosition)
21
28
  .setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
22
29
  .addTo(map);
23
30
 
24
31
  //add maplibre default zoom controls
25
- map.addControl(new maplibregl.NavigationControl({showCompass: false}))
32
+ // map.addControl(new maplibregl.NavigationControl({showCompass: false}))
26
33
 
27
34
  // disable map zoom when using scroll
28
35
  map.scrollZoom.disable();
@@ -36,12 +43,20 @@ const MapWithPlugin = (props) => {
36
43
  }
37
44
  });
38
45
  map.addControl(draw);
46
+
47
+ //add attributioncontrols
48
+ map.addControl(new maplibregl.AttributionControl({
49
+ compact: true
50
+ }));
51
+
52
+ //set map instance
53
+ setMapInstance(map)
39
54
  }
40
55
 
41
56
  useEffect(() => {
42
57
  new maplibregl.Map({
43
58
  container: mapContainerRef.current,
44
- center: [-75.379143, 39.831200],
59
+ center: defaultPosition,
45
60
  ...mapTheme.mapConfig
46
61
  }).on('load', loadMap)
47
62
  }, [])
@@ -49,7 +64,13 @@ const MapWithPlugin = (props) => {
49
64
 
50
65
 
51
66
  return (
52
- <Map {...props} >
67
+ <Map flyTo
68
+ flyToClick={()=> {handleFlyTo(mapInstance)}}
69
+ zoomBtns
70
+ zoomInClick={() => {handleZoomIn(mapInstance)}}
71
+ zoomOutClick={()=> {handleZoomOut(mapInstance)}}
72
+ {...props}
73
+ >
53
74
  <div
54
75
  ref={mapContainerRef}
55
76
  style={{
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import classnames from 'classnames'
5
3
 
@@ -11,16 +9,16 @@ import Image from '../pb_image/_image'
11
9
 
12
10
  type NavItemProps = {
13
11
  active?: boolean,
14
- aria?: object,
15
- children: React.Node,
12
+ aria?: { [key: string]: string },
13
+ children?: React.ReactNode[] | React.ReactNode,
16
14
  className?: string,
17
15
  data?: object,
18
16
  iconLeft: string,
19
17
  iconRight: string,
20
18
  id?: string,
21
- imageUrl: String,
19
+ imageUrl: string,
22
20
  link: string,
23
- onClick?: EventHandler,
21
+ onClick?: React.MouseEventHandler<HTMLElement>,
24
22
  target?: '_blank' | '_self' | '_parent' | '_top',
25
23
  text: string,
26
24
  }
@@ -37,12 +35,12 @@ const NavItem = (props: NavItemProps) => {
37
35
  id,
38
36
  imageUrl,
39
37
  link,
40
- onClick = () => {},
38
+ onClick = () => { },
41
39
  target = '_self',
42
40
  text = '',
43
41
  } = props
44
- const Tag = link ? 'a' : 'div'
45
42
 
43
+ const Tag = link ? 'a' : 'div'
46
44
  const activeClass = active === true ? 'active' : ''
47
45
  const ariaProps = buildAriaProps(aria)
48
46
  const dataProps = buildDataProps(data)
@@ -50,57 +48,61 @@ const NavItem = (props: NavItemProps) => {
50
48
 
51
49
  return (
52
50
  <li
53
- {...ariaProps}
54
- {...dataProps}
55
- className={classes}
56
- id={id}
51
+ {...ariaProps}
52
+ {...dataProps}
53
+ className={classes}
54
+ id={id}
57
55
  >
58
56
  <Tag
59
- className="pb_nav_list_item_link"
60
- href={link}
61
- onClick={onClick}
62
- target={target}
57
+ className="pb_nav_list_item_link"
58
+ href={link}
59
+ onClick={onClick}
60
+ target={target}
63
61
  >
64
- <If condition={imageUrl}>
62
+ {imageUrl &&
65
63
  <div
66
- className="pb_nav_list_item_icon_section"
67
- key={imageUrl}
64
+ className="pb_nav_list_item_icon_section"
65
+ key={imageUrl}
68
66
  >
69
67
  <Image
70
- className="pb_nav_img_wrapper"
71
- url={imageUrl}
68
+ className="pb_nav_img_wrapper"
69
+ url={imageUrl}
72
70
  />
73
71
  </div>
74
- </If>
75
- <If condition={iconLeft}>
72
+ }
73
+
74
+ {iconLeft &&
76
75
  <div
77
- className="pb_nav_list_item_icon_section"
78
- key={iconLeft}
76
+ className="pb_nav_list_item_icon_section"
77
+ key={iconLeft}
79
78
  >
80
79
  <Icon
81
- className="pb_nav_list_item_icon_left"
82
- fixedWidth
83
- icon={iconLeft}
80
+ className="pb_nav_list_item_icon_left"
81
+ fixedWidth
82
+ icon={iconLeft}
84
83
  />
85
84
  </div>
86
- </If>
85
+ }
86
+
87
87
  <span className="pb_nav_list_item_text">
88
88
  {text || children}
89
89
  </span>
90
- <If condition={iconRight}>
90
+
91
+ {iconRight &&
91
92
  <div
92
- className="pb_nav_list_item_icon_section"
93
- key={iconRight}
93
+ className="pb_nav_list_item_icon_section"
94
+ key={iconRight}
94
95
  >
95
96
  <Icon
96
- className="pb_nav_list_item_icon_right"
97
- fixedWidth
98
- icon={iconRight}
97
+ className="pb_nav_list_item_icon_right"
98
+ fixedWidth
99
+ icon={iconRight}
99
100
  />
100
101
  </div>
101
- </If>
102
+ }
102
103
  </Tag>
103
104
  </li>
104
105
  )
105
106
  }
107
+
106
108
  export default NavItem
@@ -0,0 +1,119 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../utilities/test-utils'
3
+
4
+ import Nav from './_nav'
5
+ import NavItem from './_item'
6
+
7
+ const navTestId = 'nav'
8
+ const itemTestId = 'item'
9
+ const navClassName = 'custom-class-name-nav'
10
+ const itemClassName = 'custom-class-name-item'
11
+ const navTitle = 'Menu'
12
+ const itemTitle = 'Photos'
13
+ const itemImageUrl = 'https://upload.wikimedia.org/wikipedia/commons/0/00/Apple_News_icon_%28macOS%29.png'
14
+
15
+ const NavDefault = (props = []) => {
16
+ return (
17
+ <Nav
18
+ aria={{ label: navTestId }}
19
+ className={navClassName}
20
+ data={{ testid: navTestId }}
21
+ title={navTitle}
22
+ {...props}
23
+ >
24
+ <NavItem
25
+ aria={{ label: itemTestId }}
26
+ className={itemClassName}
27
+ data={{ testid: itemTestId }}
28
+ imageUrl={itemImageUrl}
29
+ link="#"
30
+ text={itemTitle}
31
+ />
32
+ <NavItem
33
+ link="#"
34
+ text="Music"
35
+ />
36
+ <NavItem
37
+ active
38
+ link="#"
39
+ text="Video"
40
+ />
41
+ <NavItem
42
+ link="#"
43
+ text="Files"
44
+ />
45
+ </Nav>
46
+ )
47
+ }
48
+
49
+ test('should pass data prop', () => {
50
+ render(<NavDefault />)
51
+ const kit = screen.getByTestId(navTestId)
52
+ expect(kit).toBeInTheDocument()
53
+ })
54
+
55
+ test('should pass className prop', () => {
56
+ render(<NavDefault />)
57
+ const kit = screen.getByTestId(navTestId)
58
+ expect(kit).toHaveClass(navClassName)
59
+ })
60
+
61
+ test('should pass aria prop', () => {
62
+ render(<NavDefault />)
63
+ const kit = screen.getByTestId(navTestId)
64
+ expect(kit).toHaveAttribute('aria-label', navTestId)
65
+ })
66
+
67
+ test('should render nav title', () => {
68
+ render(<NavDefault />)
69
+ const kit = screen.getByText(navTitle)
70
+ expect(kit).toBeInTheDocument()
71
+ })
72
+
73
+ test('should not be borderless by default', () => {
74
+ render(<NavDefault />)
75
+ const kit = screen.getByTestId(navTestId)
76
+ expect(kit).toHaveClass('pb_nav_list_normal_vertical_highlight')
77
+ })
78
+
79
+ test('should be borderless', () => {
80
+ render(<NavDefault borderless />)
81
+ const kit = screen.getByTestId(navTestId)
82
+ expect(kit).toHaveClass('pb_nav_list_normal_vertical_highlight_borderless')
83
+ })
84
+
85
+ test('should highlight by default', () => {
86
+ render(<NavDefault />)
87
+ const kit = screen.getByTestId(navTestId)
88
+ expect(kit).toHaveClass('pb_nav_list_normal_vertical_highlight')
89
+ })
90
+
91
+ test('should not highlight', () => {
92
+ render(<NavDefault highlight={false} />)
93
+ const kit = screen.getByTestId(navTestId)
94
+ expect(kit).toHaveClass('pb_nav_list_normal_vertical')
95
+ })
96
+
97
+ test('should have vertical orientation by default', () => {
98
+ render(<NavDefault />)
99
+ const kit = screen.getByTestId(navTestId)
100
+ expect(kit).toHaveClass('pb_nav_list_normal_vertical_highlight')
101
+ })
102
+
103
+ test('should change orientation', () => {
104
+ render(<NavDefault orientation='horizontal' />)
105
+ const kit = screen.getByTestId(navTestId)
106
+ expect(kit).toHaveClass('pb_nav_list_normal_horizontal_highlight')
107
+ })
108
+
109
+ test('should have normal variant by default', () => {
110
+ render(<NavDefault />)
111
+ const kit = screen.getByTestId(navTestId)
112
+ expect(kit).toHaveClass('pb_nav_list_normal_vertical_highlight')
113
+ })
114
+
115
+ test('should change variant', () => {
116
+ render(<NavDefault variant='subtle' />)
117
+ const kit = screen.getByTestId(navTestId)
118
+ expect(kit).toHaveClass('pb_nav_list_subtle_vertical_highlight')
119
+ })
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import classnames from 'classnames'
5
3
 
@@ -9,20 +7,21 @@ import { globalProps } from '../utilities/globalProps'
9
7
  import Caption from '../pb_caption/_caption'
10
8
 
11
9
  type NavProps = {
12
- aria?: object,
10
+ aria?: { [key: string]: string },
13
11
  borderless?: boolean,
14
- children?: React.Node,
15
- className?: string | array<string>,
12
+ children?: React.ReactNode[] | React.ReactNode,
13
+ className?: string | string[],
16
14
  data?: object,
17
15
  dark?: boolean,
18
16
  highlight?: boolean,
19
17
  id?: string,
20
- onClick?: EventHandler,
18
+ onClick?: React.MouseEventHandler<HTMLElement>,
21
19
  orientation?: "vertical" | "horizontal",
22
- link: SVGFESpecularLightingElement,
20
+ link: string,
23
21
  title: string,
24
22
  variant?: "normal" | "subtle",
25
23
  }
24
+
26
25
  const Nav = (props: NavProps) => {
27
26
  const {
28
27
  aria = {},
@@ -34,7 +33,7 @@ const Nav = (props: NavProps) => {
34
33
  highlight = true,
35
34
  id,
36
35
  link = '#',
37
- onClick = () => {},
36
+ onClick = () => { },
38
37
  orientation = 'vertical',
39
38
  title = '',
40
39
  variant = 'normal',
@@ -53,26 +52,26 @@ const Nav = (props: NavProps) => {
53
52
 
54
53
  return (
55
54
  <nav
56
- {...ariaProps}
57
- {...dataProps}
58
- className={cardCss}
59
- id={id}
55
+ {...ariaProps}
56
+ {...dataProps}
57
+ className={cardCss}
58
+ id={id}
60
59
  >
61
- <If condition={title}>
60
+ {title &&
62
61
  <div className="pb_nav_list_title">
63
62
  <a
64
- className="pb_nav_list_item_link_text"
65
- href={link}
66
- onClick={onClick}
63
+ className="pb_nav_list_item_link_text"
64
+ href={link}
65
+ onClick={onClick}
67
66
  >
68
67
  <Caption
69
- dark={dark}
70
- size="md"
71
- text={`${title}`}
68
+ dark={dark}
69
+ size="md"
70
+ text={`${title}`}
72
71
  />
73
72
  </a>
74
73
  </div>
75
- </If>
74
+ }
76
75
  <ul>{children}</ul>
77
76
  </nav>
78
77
  )
@@ -0,0 +1,83 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../utilities/test-utils'
3
+
4
+ import Nav from './_nav'
5
+ import NavItem from './_item'
6
+
7
+ const navTestId = 'nav'
8
+ const itemTestId = 'item'
9
+ const navClassName = 'custom-class-name-nav'
10
+ const itemClassName = 'custom-class-name-item'
11
+ const navTitle = 'Menu'
12
+ const itemTitle = 'Photos'
13
+ const itemImageUrl = 'https://upload.wikimedia.org/wikipedia/commons/0/00/Apple_News_icon_%28macOS%29.png'
14
+
15
+ const NavDefault = (props) => {
16
+ return (
17
+ <Nav
18
+ aria={{ label: navTestId }}
19
+ className={navClassName}
20
+ data={{ testid: navTestId }}
21
+ title={navTitle}
22
+ >
23
+ <NavItem
24
+ aria={{ label: itemTestId }}
25
+ className={itemClassName}
26
+ data={{ testid: itemTestId }}
27
+ imageUrl={itemImageUrl}
28
+ link="#"
29
+ text={itemTitle}
30
+ {...props}
31
+ />
32
+ <NavItem
33
+ link="#"
34
+ text="Music"
35
+ />
36
+ <NavItem
37
+ active
38
+ link="#"
39
+ text="Video"
40
+ />
41
+ <NavItem
42
+ link="#"
43
+ text="Files"
44
+ />
45
+ </Nav>
46
+ )
47
+ }
48
+
49
+ test('should pass data prop', () => {
50
+ render(<NavDefault />)
51
+ const kit = screen.getByTestId(itemTestId)
52
+ expect(kit).toBeInTheDocument()
53
+ })
54
+
55
+ test('should pass className prop', () => {
56
+ render(<NavDefault />)
57
+ const kit = screen.getByTestId(itemTestId)
58
+ expect(kit).toHaveClass(itemClassName)
59
+ })
60
+
61
+ test('should pass aria prop', () => {
62
+ render(<NavDefault />)
63
+ const kit = screen.getByTestId(itemTestId)
64
+ expect(kit).toHaveAttribute('aria-label', itemTestId)
65
+ })
66
+
67
+ test('should render title', () => {
68
+ render(<NavDefault />)
69
+ const kit = screen.getByText(itemTitle)
70
+ expect(kit).toBeInTheDocument()
71
+ })
72
+
73
+ test('should have a right icon', () => {
74
+ render(<NavDefault iconRight="angle-down" />)
75
+ const kit = screen.getByTestId(itemTestId)
76
+ expect(kit).toContainHTML('<i class="pb_icon_kit far fa-fw fa-angle-down pb_nav_list_item_icon_right" />')
77
+ })
78
+
79
+ test('should have a left icon', () => {
80
+ render(<NavDefault iconLeft="users-class" />)
81
+ const kit = screen.getByTestId(itemTestId)
82
+ expect(kit).toContainHTML('<i class="pb_icon_kit far fa-fw fa-users-class pb_nav_list_item_icon_left" />')
83
+ })
@@ -121,10 +121,15 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
121
121
  validateOnlyNumbers()
122
122
  }
123
123
 
124
+ const getCurrentSelectedData = (itiInit: any, inputValue: string) => {
125
+ return {...itiInit.getSelectedCountryData(), number: inputValue}
126
+ }
127
+
124
128
  const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
125
129
  setInputValue(evt.target.value)
126
130
  validateTooLongNumber(itiInit)
127
- onChange(evt)
131
+ const selectedData = getCurrentSelectedData(itiInit, evt.target.value)
132
+ onChange(selectedData)
128
133
  isValid(itiInit.isValidNumber())
129
134
  }
130
135
 
@@ -144,7 +149,12 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
144
149
  }
145
150
  )
146
151
 
147
- inputRef.current.addEventListener("countrychange", () => validateTooLongNumber(telInputInit))
152
+ inputRef.current.addEventListener("countrychange", (evt: Event) => {
153
+ validateTooLongNumber(telInputInit)
154
+ const selectedData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
155
+ onChange(selectedData)
156
+ })
157
+
148
158
  inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
149
159
  inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
150
160
 
@@ -140,10 +140,12 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
140
140
  {...dataProps}
141
141
  className={css}
142
142
  >
143
- <Caption
144
- className="pb_text_input_kit_label"
145
- text={label}
146
- />
143
+ {label &&
144
+ <Caption
145
+ className="pb_text_input_kit_label"
146
+ text={label}
147
+ />
148
+ }
147
149
  <div className={`${addOnCss} text_input_wrapper`}>
148
150
  {render}
149
151
 
@@ -0,0 +1,4 @@
1
+ <%= pb_rails("text_input", props: {
2
+ placeholder: "Enter email address",
3
+ type: "email"
4
+ }) %>
@@ -0,0 +1,23 @@
1
+ import React, { useState } from 'react'
2
+
3
+ import TextInput from '../_text_input'
4
+
5
+ const TextInputNoLabel = (props) => {
6
+ const [email, setEmail] = useState('')
7
+
8
+ const handleUpdateEmail = ({ target }) => {
9
+ setEmail(target.value)
10
+ }
11
+ return (
12
+ <div>
13
+ <TextInput
14
+ onChange={handleUpdateEmail}
15
+ placeholder="Enter email address"
16
+ type="email"
17
+ value={email}
18
+ {...props}
19
+ />
20
+ </div>
21
+ )
22
+ }
23
+ export default TextInputNoLabel
@@ -6,6 +6,7 @@ examples:
6
6
  - text_input_disabled: Disabled
7
7
  - text_input_add_on: Add On
8
8
  - text_input_inline: Inline
9
+ - text_input_no_label: No Label
9
10
  react:
10
11
  - text_input_default: Default
11
12
  - text_input_error: With Error
@@ -13,3 +14,4 @@ examples:
13
14
  - text_input_disabled: Disabled
14
15
  - text_input_add_on: Add On
15
16
  - text_input_inline: Inline
17
+ - text_input_no_label: No Label
@@ -4,3 +4,4 @@ export { default as TextInputError } from './_text_input_error.jsx'
4
4
  export { default as TextInputDisabled } from './_text_input_disabled.jsx'
5
5
  export { default as TextInputAddOn } from './_text_input_add_on.jsx'
6
6
  export { default as TextInputInline } from './_text_input_inline.jsx'
7
+ export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
@@ -27,9 +27,9 @@ module Playbook
27
27
 
28
28
  # Deal with lists of kits, used in Playbook doc and Externally
29
29
  # rubocop:disable Style/StringConcatenation
30
- def pb_kits(type: "rails", limit_examples: false, dark_mode: false)
30
+ def pb_kits(type: "rails", limit_examples: false, dark_mode: false, method: get_kits)
31
31
  display_kits = []
32
- kits = get_kits
32
+ kits = method
33
33
  kits.each do |kit|
34
34
  if kit.is_a?(Hash)
35
35
  nav_hash_array(kit).each do |sub_kit|
@@ -45,7 +45,12 @@ module Playbook
45
45
 
46
46
  # rubocop:disable Naming/AccessorMethodName
47
47
  def get_kits
48
- menu = YAML.load_file(Playbook::Engine.root.join("app/pb_kits/playbook/data/menu.yml"))
48
+ menu = YAML.load_file(Playbook::Engine.root.join("dist/menu.yml"))
49
+ menu["kits"]
50
+ end
51
+
52
+ def get_kits_pb_website
53
+ menu = YAML.load_file(Rails.root.join("config/menu.yml"))
49
54
  menu["kits"]
50
55
  end
51
56
  # rubocop:enable Naming/AccessorMethodName
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "12.9.0"
5
- VERSION = "12.9.1"
4
+ PREVIOUS_VERSION = "12.10.0"
5
+ VERSION = "12.10.0.pre.alpha.PLAY705phonenumberreturn372"
6
6
  end
metadata CHANGED
@@ -1,15 +1,15 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 12.9.1
4
+ version: 12.10.0.pre.alpha.PLAY705phonenumberreturn372
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
8
8
  - Power Devs
9
- autorequire:
9
+ autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2023-03-17 00:00:00.000000000 Z
12
+ date: 2023-03-23 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -294,7 +294,6 @@ files:
294
294
  - Rakefile
295
295
  - app/pb_kits/playbook/_playbook.scss
296
296
  - app/pb_kits/playbook/_reset.scss
297
- - app/pb_kits/playbook/data/menu.yml
298
297
  - app/pb_kits/playbook/index.js
299
298
  - app/pb_kits/playbook/pb_avatar/_avatar.scss
300
299
  - app/pb_kits/playbook/pb_avatar/_avatar.tsx
@@ -406,6 +405,9 @@ files:
406
405
  - app/pb_kits/playbook/pb_body/body.html.erb
407
406
  - app/pb_kits/playbook/pb_body/body.rb
408
407
  - app/pb_kits/playbook/pb_body/body.test.js
408
+ - app/pb_kits/playbook/pb_body/docs/_body_articles.html.erb
409
+ - app/pb_kits/playbook/pb_body/docs/_body_articles.jsx
410
+ - app/pb_kits/playbook/pb_body/docs/_body_articles.md
409
411
  - app/pb_kits/playbook/pb_body/docs/_body_block.html.erb
410
412
  - app/pb_kits/playbook/pb_body/docs/_body_block.jsx
411
413
  - app/pb_kits/playbook/pb_body/docs/_body_light.html.erb
@@ -1396,6 +1398,7 @@ files:
1396
1398
  - app/pb_kits/playbook/pb_logistic/_logistic.jsx
1397
1399
  - app/pb_kits/playbook/pb_map/_map.scss
1398
1400
  - app/pb_kits/playbook/pb_map/_map.tsx
1401
+ - app/pb_kits/playbook/pb_map/_pb_map_button_mixin.scss
1399
1402
  - app/pb_kits/playbook/pb_map/docs/_map_default.jsx
1400
1403
  - app/pb_kits/playbook/pb_map/docs/_map_default.md
1401
1404
  - app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx
@@ -1461,9 +1464,11 @@ files:
1461
1464
  - app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb
1462
1465
  - app/pb_kits/playbook/pb_nav/_bold_mixin.scss
1463
1466
  - app/pb_kits/playbook/pb_nav/_horizontal_nav.scss
1464
- - app/pb_kits/playbook/pb_nav/_item.jsx
1465
- - app/pb_kits/playbook/pb_nav/_nav.jsx
1467
+ - app/pb_kits/playbook/pb_nav/_item.tsx
1466
1468
  - app/pb_kits/playbook/pb_nav/_nav.scss
1469
+ - app/pb_kits/playbook/pb_nav/_nav.test.js
1470
+ - app/pb_kits/playbook/pb_nav/_nav.tsx
1471
+ - app/pb_kits/playbook/pb_nav/_nav_item.test.js
1467
1472
  - app/pb_kits/playbook/pb_nav/_subtle_mixin.scss
1468
1473
  - app/pb_kits/playbook/pb_nav/_vertical_nav.scss
1469
1474
  - app/pb_kits/playbook/pb_nav/docs/_block_nav.html.erb
@@ -2000,6 +2005,8 @@ files:
2000
2005
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_error.md
2001
2006
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.html.erb
2002
2007
  - app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.jsx
2008
+ - app/pb_kits/playbook/pb_text_input/docs/_text_input_no_label.html.erb
2009
+ - app/pb_kits/playbook/pb_text_input/docs/_text_input_no_label.jsx
2003
2010
  - app/pb_kits/playbook/pb_text_input/docs/example.yml
2004
2011
  - app/pb_kits/playbook/pb_text_input/docs/index.js
2005
2012
  - app/pb_kits/playbook/pb_text_input/text_input.html.erb
@@ -2384,6 +2391,7 @@ files:
2384
2391
  - app/pb_kits/playbook/utilities/test/globalProps/justifySelf.test.js
2385
2392
  - app/pb_kits/playbook/utilities/test/globalProps/order.test.js
2386
2393
  - app/pb_kits/playbook/utilities/text.ts
2394
+ - dist/menu.yml
2387
2395
  - dist/reset.css
2388
2396
  - lib/playbook.rb
2389
2397
  - lib/playbook/align_content.rb
@@ -2445,7 +2453,7 @@ homepage: http://playbook.powerapp.cloud
2445
2453
  licenses:
2446
2454
  - ISC
2447
2455
  metadata: {}
2448
- post_install_message:
2456
+ post_install_message:
2449
2457
  rdoc_options: []
2450
2458
  require_paths:
2451
2459
  - lib
@@ -2456,12 +2464,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
2456
2464
  version: '0'
2457
2465
  required_rubygems_version: !ruby/object:Gem::Requirement
2458
2466
  requirements:
2459
- - - ">="
2467
+ - - ">"
2460
2468
  - !ruby/object:Gem::Version
2461
- version: '0'
2469
+ version: 1.3.1
2462
2470
  requirements: []
2463
2471
  rubygems_version: 3.3.7
2464
- signing_key:
2472
+ signing_key:
2465
2473
  specification_version: 4
2466
2474
  summary: Playbook Design System
2467
2475
  test_files: []
File without changes