playbook_ui 12.9.1 → 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} +40 -32
- 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 +21 -13
- /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
|
|
@@ -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?:
|
|
10
|
+
aria?: { [key: string]: string },
|
|
13
11
|
borderless?: boolean,
|
|
14
|
-
children?: React.
|
|
15
|
-
className?: 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?:
|
|
18
|
+
onClick?: React.MouseEventHandler<HTMLElement>,
|
|
21
19
|
orientation?: "vertical" | "horizontal",
|
|
22
|
-
link:
|
|
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
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
55
|
+
{...ariaProps}
|
|
56
|
+
{...dataProps}
|
|
57
|
+
className={cardCss}
|
|
58
|
+
id={id}
|
|
60
59
|
>
|
|
61
|
-
|
|
60
|
+
{title &&
|
|
62
61
|
<div className="pb_nav_list_title">
|
|
63
62
|
<a
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
63
|
+
className="pb_nav_list_item_link_text"
|
|
64
|
+
href={link}
|
|
65
|
+
onClick={onClick}
|
|
67
66
|
>
|
|
68
67
|
<Caption
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
68
|
+
dark={dark}
|
|
69
|
+
size="md"
|
|
70
|
+
text={`${title}`}
|
|
72
71
|
/>
|
|
73
72
|
</a>
|
|
74
73
|
</div>
|
|
75
|
-
|
|
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
|
+
})
|
data/app/pb_kits/playbook/pb_rich_text_editor/{_rich_text_editor.jsx → _rich_text_editor.tsx}
RENAMED
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
/* @flow */
|
|
2
|
-
/* eslint-disable react-hooks/rules-of-hooks */
|
|
3
|
-
|
|
4
1
|
import React, { useEffect, useState } from 'react'
|
|
5
2
|
import classnames from 'classnames'
|
|
6
3
|
import inlineFocus from './inlineFocus'
|
|
@@ -18,11 +15,21 @@ try {
|
|
|
18
15
|
|
|
19
16
|
import { TrixEditor } from "react-trix"
|
|
20
17
|
|
|
18
|
+
type Editor = {
|
|
19
|
+
attributeIsActive?: Function,
|
|
20
|
+
element?: HTMLElement,
|
|
21
|
+
getSelectedDocument?: Function,
|
|
22
|
+
getSelectedRange?: () => Array<number>,
|
|
23
|
+
insertHTML?: Function,
|
|
24
|
+
loadHTML?: Function,
|
|
25
|
+
setSelectedRange?: (range: Array<number>) => void,
|
|
26
|
+
}
|
|
27
|
+
|
|
21
28
|
type RichTextEditorProps = {
|
|
22
|
-
aria?:
|
|
29
|
+
aria?: { [key: string]: string },
|
|
23
30
|
toolbarBottom?: Boolean,
|
|
24
31
|
className?: string,
|
|
25
|
-
data?:
|
|
32
|
+
data?: { [key: string]: string },
|
|
26
33
|
focus?: boolean,
|
|
27
34
|
id?: string,
|
|
28
35
|
inline?: boolean,
|
|
@@ -53,19 +60,19 @@ const RichTextEditor = (props: RichTextEditorProps) => {
|
|
|
53
60
|
} = props
|
|
54
61
|
|
|
55
62
|
const ariaProps = buildAriaProps(aria),
|
|
56
|
-
|
|
57
|
-
|
|
63
|
+
dataProps = buildDataProps(data),
|
|
64
|
+
[editor, setEditor] = useState<Editor>()
|
|
58
65
|
|
|
59
|
-
const handleOnEditorReady = (editorInstance) => setEditor(editorInstance),
|
|
60
|
-
|
|
66
|
+
const handleOnEditorReady = (editorInstance: Editor) => setEditor(editorInstance),
|
|
67
|
+
element = editor?.element
|
|
61
68
|
|
|
62
69
|
// DOM manipulation must wait for editor to be ready
|
|
63
70
|
if (editor) {
|
|
64
|
-
const toolbarElement = element.parentElement.querySelector('trix-toolbar'),
|
|
65
|
-
|
|
71
|
+
const toolbarElement = element.parentElement.querySelector('trix-toolbar') as HTMLElement,
|
|
72
|
+
blockCodeButton = toolbarElement.querySelector('[data-trix-attribute=code]') as HTMLElement
|
|
66
73
|
|
|
67
|
-
let inlineCodeButton = toolbarElement.querySelector('[data-trix-attribute=inlineCode]')
|
|
68
|
-
if (!inlineCodeButton) inlineCodeButton = blockCodeButton.cloneNode(true)
|
|
74
|
+
let inlineCodeButton = toolbarElement.querySelector('[data-trix-attribute=inlineCode]') as HTMLElement
|
|
75
|
+
if (!inlineCodeButton) inlineCodeButton = blockCodeButton.cloneNode(true) as HTMLElement
|
|
69
76
|
|
|
70
77
|
// set button attributes
|
|
71
78
|
inlineCodeButton.dataset.trixAttribute = 'inlineCode'
|
|
@@ -93,8 +100,8 @@ const RichTextEditor = (props: RichTextEditorProps) => {
|
|
|
93
100
|
|
|
94
101
|
focus
|
|
95
102
|
? (document.addEventListener('trix-focus', useFocus),
|
|
96
|
-
|
|
97
|
-
|
|
103
|
+
document.addEventListener('trix-blur', useFocus),
|
|
104
|
+
useFocus())
|
|
98
105
|
: null
|
|
99
106
|
|
|
100
107
|
document.addEventListener('trix-focus', inlineFocus)
|
|
@@ -110,11 +117,11 @@ const RichTextEditor = (props: RichTextEditorProps) => {
|
|
|
110
117
|
|
|
111
118
|
useEffect(() => {
|
|
112
119
|
if (!element) return
|
|
113
|
-
element.addEventListener('click', ({target}) => {
|
|
114
|
-
const trixEditorContainer = target.closest('.pb_rich_text_editor_kit')
|
|
120
|
+
element.addEventListener('click', ({ target }: Event) => {
|
|
121
|
+
const trixEditorContainer = (target as Element).closest('.pb_rich_text_editor_kit')
|
|
115
122
|
if (!trixEditorContainer) return
|
|
116
123
|
|
|
117
|
-
const anchorElement = target.closest('a')
|
|
124
|
+
const anchorElement = (target as Element).closest('a')
|
|
118
125
|
if (!anchorElement) return
|
|
119
126
|
|
|
120
127
|
if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
|
|
@@ -122,11 +129,11 @@ const RichTextEditor = (props: RichTextEditorProps) => {
|
|
|
122
129
|
}, [element])
|
|
123
130
|
|
|
124
131
|
const richTextEditorClass = 'pb_rich_text_editor_kit',
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
132
|
+
simpleClass = simple ? 'simple' : '',
|
|
133
|
+
focusClass = focus ? 'focus-editor-targets' : '',
|
|
134
|
+
stickyClass = sticky ? 'sticky' : '',
|
|
135
|
+
inlineClass = inline ? 'inline' : '',
|
|
136
|
+
toolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
|
|
130
137
|
|
|
131
138
|
let css = classnames(globalProps(props), className)
|
|
132
139
|
css = classnames(
|
|
@@ -141,17 +148,18 @@ const RichTextEditor = (props: RichTextEditorProps) => {
|
|
|
141
148
|
|
|
142
149
|
return (
|
|
143
150
|
<div
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
151
|
+
{...ariaProps}
|
|
152
|
+
{...dataProps}
|
|
153
|
+
className={css}
|
|
147
154
|
>
|
|
148
155
|
<TrixEditor
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
156
|
+
className=""
|
|
157
|
+
fileParamName={name}
|
|
158
|
+
mergeTags={[]}
|
|
159
|
+
onChange={onChange}
|
|
160
|
+
onEditorReady={handleOnEditorReady}
|
|
161
|
+
placeholder={placeholder}
|
|
162
|
+
value={value}
|
|
155
163
|
/>
|
|
156
164
|
</div>
|
|
157
165
|
)
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const inlineFocus = () => {
|
|
2
|
-
const trixEditorElement = event.target
|
|
2
|
+
const trixEditorElement = event.target as Element
|
|
3
3
|
const trixEditorContainer = trixEditorElement.closest('.pb_rich_text_editor_kit')
|
|
4
4
|
|
|
5
5
|
if (!trixEditorContainer.classList.contains('inline')) return
|
|
@@ -2,7 +2,7 @@ const useFocus = () => {
|
|
|
2
2
|
const allTrixEditors = document.querySelectorAll(
|
|
3
3
|
'.focus-editor-targets trix-editor'
|
|
4
4
|
)
|
|
5
|
-
allTrixEditors.forEach((editorElement) => {
|
|
5
|
+
allTrixEditors.forEach((editorElement: any) => {
|
|
6
6
|
const toolbarElement = editorElement.toolbarElement
|
|
7
7
|
if (editorElement == document.activeElement) {
|
|
8
8
|
editorElement.classList.add('focused-editor')
|
|
@@ -140,10 +140,12 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
|
|
|
140
140
|
{...dataProps}
|
|
141
141
|
className={css}
|
|
142
142
|
>
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
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,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 =
|
|
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("
|
|
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
|
data/lib/playbook/version.rb
CHANGED
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.
|
|
4
|
+
version: 12.10.0.pre.alpha.PLAY677richtexteditorts370
|
|
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-
|
|
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.
|
|
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
|
|
@@ -1705,8 +1710,8 @@ files:
|
|
|
1705
1710
|
- app/pb_kits/playbook/pb_radio/radio.html.erb
|
|
1706
1711
|
- app/pb_kits/playbook/pb_radio/radio.rb
|
|
1707
1712
|
- app/pb_kits/playbook/pb_radio/radio.test.js
|
|
1708
|
-
- app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx
|
|
1709
1713
|
- app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss
|
|
1714
|
+
- app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx
|
|
1710
1715
|
- app/pb_kits/playbook/pb_rich_text_editor/_trix_styles.scss
|
|
1711
1716
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.html.erb
|
|
1712
1717
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx
|
|
@@ -1729,11 +1734,11 @@ files:
|
|
|
1729
1734
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml
|
|
1730
1735
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/index.js
|
|
1731
1736
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/templates.js
|
|
1732
|
-
- app/pb_kits/playbook/pb_rich_text_editor/inlineFocus.
|
|
1737
|
+
- app/pb_kits/playbook/pb_rich_text_editor/inlineFocus.ts
|
|
1733
1738
|
- app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.html.erb
|
|
1734
1739
|
- app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb
|
|
1735
1740
|
- app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js
|
|
1736
|
-
- app/pb_kits/playbook/pb_rich_text_editor/useFocus.
|
|
1741
|
+
- app/pb_kits/playbook/pb_rich_text_editor/useFocus.ts
|
|
1737
1742
|
- app/pb_kits/playbook/pb_section_separator/_section_separator.scss
|
|
1738
1743
|
- app/pb_kits/playbook/pb_section_separator/_section_separator.tsx
|
|
1739
1744
|
- app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss
|
|
@@ -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:
|
|
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
|