playbook_ui 12.9.1.pre.alpha.play664tiptapinvestigation353 → 12.10.0.pre.alpha.PLAY677richtexteditorts370
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +1 -0
- data/app/pb_kits/playbook/pb_body/docs/_body_articles.html.erb +8 -0
- data/app/pb_kits/playbook/pb_body/docs/_body_articles.jsx +20 -0
- data/app/pb_kits/playbook/pb_body/docs/_body_articles.md +1 -0
- data/app/pb_kits/playbook/pb_body/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_body/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_map/_map.scss +153 -31
- data/app/pb_kits/playbook/pb_map/_pb_map_button_mixin.scss +53 -0
- data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx +1 -2
- data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx +29 -8
- data/app/pb_kits/playbook/pb_nav/{_item.jsx → _item.tsx} +38 -36
- data/app/pb_kits/playbook/pb_nav/_nav.test.js +119 -0
- data/app/pb_kits/playbook/pb_nav/{_nav.jsx → _nav.tsx} +19 -20
- data/app/pb_kits/playbook/pb_nav/_nav_item.test.js +83 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/{_rich_text_editor.jsx → _rich_text_editor.tsx} +42 -46
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/{inlineFocus.js → inlineFocus.ts} +1 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/{useFocus.js → useFocus.ts} +1 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +6 -4
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_no_label.html.erb +4 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_no_label.jsx +23 -0
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
- data/lib/playbook/pb_doc_helper.rb +8 -3
- data/lib/playbook/version.rb +2 -2
- metadata +16 -10
- data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap.jsx +0 -66
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_tip_tap.jsx +0 -15
- /data/{app/pb_kits/playbook/data → dist}/menu.yml +0 -0
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 6065952cf0606995f373c8718e0a1895be1177aee77691a23ebc0626a3d8245e
|
|
4
|
+
data.tar.gz: 275df6169d763462916e7a01ebdfd12518689c3e2d826e5da6cfb2cf774aba7a
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 492c73dd0792f7a0e52db3c0052d430dcb030f8dfdd5bba0a227c43888d8dfb8e761702ceb2a0d662462b3dc0d2fd1a988b7b39effaad14298b2cbb72c528d49
|
|
7
|
+
data.tar.gz: 150a33c6b0d6b4f1246d8e7125944cb645cae7faa5f41bed277e8911a20f1b8a16d5925f774b48e9d0dbb9140beedb5b6caa9069e83c11ec9abc1ccd89e7de6b
|
|
@@ -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
|
|
@@ -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
|
-
|
|
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 +
|
|
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
|
-
|
|
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 +
|
|
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
|
-
|
|
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
|
-
|
|
198
|
+
box-shadow: $shadow_deep;
|
|
199
|
+
color: $text_dk_light;
|
|
200
|
+
a {
|
|
201
|
+
color: $text_dk_light;
|
|
202
|
+
}
|
|
203
|
+
}
|
|
114
204
|
|
|
115
|
-
|
|
116
|
-
|
|
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,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
|
-
|
|
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:
|
|
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
|
|
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?:
|
|
15
|
-
children
|
|
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:
|
|
19
|
+
imageUrl: string,
|
|
22
20
|
link: string,
|
|
23
|
-
onClick?:
|
|
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
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
51
|
+
{...ariaProps}
|
|
52
|
+
{...dataProps}
|
|
53
|
+
className={classes}
|
|
54
|
+
id={id}
|
|
57
55
|
>
|
|
58
56
|
<Tag
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
57
|
+
className="pb_nav_list_item_link"
|
|
58
|
+
href={link}
|
|
59
|
+
onClick={onClick}
|
|
60
|
+
target={target}
|
|
63
61
|
>
|
|
64
|
-
|
|
62
|
+
{imageUrl &&
|
|
65
63
|
<div
|
|
66
|
-
|
|
67
|
-
|
|
64
|
+
className="pb_nav_list_item_icon_section"
|
|
65
|
+
key={imageUrl}
|
|
68
66
|
>
|
|
69
67
|
<Image
|
|
70
|
-
|
|
71
|
-
|
|
68
|
+
className="pb_nav_img_wrapper"
|
|
69
|
+
url={imageUrl}
|
|
72
70
|
/>
|
|
73
71
|
</div>
|
|
74
|
-
|
|
75
|
-
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
{iconLeft &&
|
|
76
75
|
<div
|
|
77
|
-
|
|
78
|
-
|
|
76
|
+
className="pb_nav_list_item_icon_section"
|
|
77
|
+
key={iconLeft}
|
|
79
78
|
>
|
|
80
79
|
<Icon
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
80
|
+
className="pb_nav_list_item_icon_left"
|
|
81
|
+
fixedWidth
|
|
82
|
+
icon={iconLeft}
|
|
84
83
|
/>
|
|
85
84
|
</div>
|
|
86
|
-
|
|
85
|
+
}
|
|
86
|
+
|
|
87
87
|
<span className="pb_nav_list_item_text">
|
|
88
88
|
{text || children}
|
|
89
89
|
</span>
|
|
90
|
-
|
|
90
|
+
|
|
91
|
+
{iconRight &&
|
|
91
92
|
<div
|
|
92
|
-
|
|
93
|
-
|
|
93
|
+
className="pb_nav_list_item_icon_section"
|
|
94
|
+
key={iconRight}
|
|
94
95
|
>
|
|
95
96
|
<Icon
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
97
|
+
className="pb_nav_list_item_icon_right"
|
|
98
|
+
fixedWidth
|
|
99
|
+
icon={iconRight}
|
|
99
100
|
/>
|
|
100
101
|
</div>
|
|
101
|
-
|
|
102
|
+
}
|
|
102
103
|
</Tag>
|
|
103
104
|
</li>
|
|
104
105
|
)
|
|
105
106
|
}
|
|
107
|
+
|
|
106
108
|
export default NavItem
|