playbook_ui 12.6.0.pre.alpha.cssphone1 → 12.6.0.pre.alpha.menuyml1
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/pb_phone_number_input/_phone_number_input.scss +16 -52
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +20 -21
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx +0 -1
- data/lib/playbook/pb_doc_helper.rb +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +2 -3
- data/app/pb_kits/playbook/data/menu.yml +0 -110
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 7dc9d2cb8ac952c33f7ef2c586e30977c004e1ff2431291b063bd7c72b4df5b4
|
|
4
|
+
data.tar.gz: ca6d879c13d19a9bc8ac01b662cfd5cca2d5d534d467dadf7e552c5e21fa9ff8
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: bb1c152743ea0f67492a860445e1f4fa0679bc09547633c141a2a56c9c9f97c708084102ba9ca46526cba35ec5b6ae20e7e6a08b03a117bd062ea7dd421851fe
|
|
7
|
+
data.tar.gz: 2e3aeee302b7f6c8b7746bd414a47c4c82b0538ed56a047b9ced38d63faf2ff536b63615d741395f0c0ed97cfbc7304cb144bfc6df75428fbd14ed4092176f7a
|
|
@@ -1,46 +1,16 @@
|
|
|
1
1
|
@import "../tokens/colors";
|
|
2
2
|
|
|
3
|
-
$transform-rotate-deg: 135deg;
|
|
4
|
-
$input-max-width: 284px;
|
|
5
|
-
$dropdown-min-width: 340px;
|
|
6
|
-
$flag-min-resolution: 192dpi;
|
|
7
|
-
|
|
8
3
|
.pb_phone_number_input {
|
|
9
4
|
input::placeholder {
|
|
10
5
|
color: $focus_input_light;
|
|
11
6
|
}
|
|
12
7
|
|
|
13
|
-
.text_input {
|
|
14
|
-
max-width: $input-max-width;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.dropdown_open {
|
|
18
|
-
.text_input {
|
|
19
|
-
border-color: $primary !important;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.iti__selected-flag:focus-visible {
|
|
23
|
-
outline-style: none;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
8
|
.iti__country {
|
|
28
9
|
padding: 5px 10px 5px 16px;
|
|
29
|
-
transition: $transition_default;
|
|
30
10
|
}
|
|
31
11
|
|
|
32
12
|
.iti__selected-flag {
|
|
33
|
-
padding: 0
|
|
34
|
-
|
|
35
|
-
&[aria-expanded="true"] {
|
|
36
|
-
color: $primary_action;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
&:focus-visible {
|
|
40
|
-
outline-style: solid;
|
|
41
|
-
border-radius: $space_xxs 0px 0px $space_xxs;
|
|
42
|
-
outline-color: $primary;
|
|
43
|
-
}
|
|
13
|
+
padding: 0 6px 0 16px;
|
|
44
14
|
}
|
|
45
15
|
|
|
46
16
|
.iti__country.iti__highlight {
|
|
@@ -61,11 +31,6 @@ $flag-min-resolution: 192dpi;
|
|
|
61
31
|
|
|
62
32
|
.iti__flag {
|
|
63
33
|
background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/img/flags.png");
|
|
64
|
-
border-radius: 1px;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.iti--separate-dial-code {
|
|
68
|
-
width: 100%;
|
|
69
34
|
}
|
|
70
35
|
|
|
71
36
|
.iti--separate-dial-code .iti__selected-flag {
|
|
@@ -87,50 +52,49 @@ $flag-min-resolution: 192dpi;
|
|
|
87
52
|
|
|
88
53
|
.iti__arrow::before {
|
|
89
54
|
border-style: solid;
|
|
90
|
-
border-width:
|
|
55
|
+
border-width: 0.1em 0.1em 0 0;
|
|
91
56
|
content: '';
|
|
92
57
|
display: inline-block;
|
|
93
|
-
height:
|
|
94
|
-
left:
|
|
58
|
+
height: 0.6em;
|
|
59
|
+
left: 0.1em;
|
|
95
60
|
position: relative;
|
|
96
61
|
vertical-align: top;
|
|
97
|
-
width:
|
|
98
|
-
top:
|
|
99
|
-
transform: rotate(
|
|
62
|
+
width: 0.6em;
|
|
63
|
+
top: 10px;
|
|
64
|
+
transform: rotate(135deg);
|
|
65
|
+
font-size: 0.5em;
|
|
100
66
|
color: $slate;
|
|
101
67
|
}
|
|
102
68
|
|
|
103
69
|
.iti__arrow.iti__arrow--up::before {
|
|
104
|
-
transform: rotate(-
|
|
105
|
-
top:
|
|
106
|
-
color: $primary_action;
|
|
70
|
+
transform: rotate(-45deg);
|
|
71
|
+
top: 12px;
|
|
107
72
|
}
|
|
108
73
|
|
|
109
74
|
.iti__active::after {
|
|
110
75
|
float: right;
|
|
111
76
|
content: "";
|
|
112
|
-
margin-top:
|
|
113
|
-
transform: rotate(
|
|
114
|
-
height:
|
|
115
|
-
width:
|
|
77
|
+
margin-top: 5px;
|
|
78
|
+
transform: rotate(45deg);
|
|
79
|
+
height: 12px;
|
|
80
|
+
width: 6px;
|
|
116
81
|
border-bottom: 2px solid;
|
|
117
82
|
border-right: 2px solid;
|
|
118
83
|
border-radius: 1px;
|
|
119
84
|
}
|
|
120
85
|
|
|
121
86
|
.iti__country-list {
|
|
122
|
-
min-width:
|
|
87
|
+
min-width: 340px;
|
|
123
88
|
border-radius: $border_radius_md;
|
|
124
89
|
border: 1px solid $border_light;
|
|
125
90
|
box-shadow: $shadow_deep;
|
|
126
|
-
margin-top: 1px;
|
|
127
91
|
}
|
|
128
92
|
|
|
129
93
|
.iti__divider {
|
|
130
94
|
border-bottom: 1px solid $border_light;
|
|
131
95
|
}
|
|
132
96
|
|
|
133
|
-
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution:
|
|
97
|
+
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
|
134
98
|
.iti__flag {
|
|
135
99
|
background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/img/flags@2x.png");
|
|
136
100
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/* @flow */
|
|
2
|
-
import React, { useEffect, useRef, useState } from
|
|
3
|
-
import classnames from
|
|
4
|
-
import { buildAriaProps, buildCss, buildDataProps } from
|
|
5
|
-
import { globalProps } from
|
|
6
|
-
import intlTelInput from
|
|
7
|
-
import
|
|
8
|
-
import
|
|
2
|
+
import React, { useEffect, useRef, useState } from "react"
|
|
3
|
+
import classnames from "classnames"
|
|
4
|
+
import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
|
|
5
|
+
import { globalProps } from "../utilities/globalProps"
|
|
6
|
+
import intlTelInput from "intl-tel-input"
|
|
7
|
+
import "intl-tel-input/build/css/intlTelInput.css"
|
|
8
|
+
import TextInput from "../pb_text_input/_text_input"
|
|
9
9
|
|
|
10
10
|
declare global {
|
|
11
11
|
interface Window {
|
|
@@ -50,7 +50,7 @@ const formatAllCountries = () => {
|
|
|
50
50
|
formatAllCountries()
|
|
51
51
|
|
|
52
52
|
const containOnlyNumbers = (value: string) => {
|
|
53
|
-
return /^
|
|
53
|
+
return /^(\++)*(\d+)$/.test(value)
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
const PhoneNumberInput = (props: PhoneNumberInputProps) => {
|
|
@@ -85,8 +85,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
|
|
|
85
85
|
const inputRef = useRef<HTMLInputElement>()
|
|
86
86
|
const [inputValue, setInputValue] = useState(value)
|
|
87
87
|
const [itiInit, setItiInit] = useState<any>()
|
|
88
|
-
const [error, setError] = useState(
|
|
89
|
-
const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
|
|
88
|
+
const [error, setError] = useState("")
|
|
90
89
|
|
|
91
90
|
const validateTooLongNumber = (itiInit: any) => {
|
|
92
91
|
const error = itiInit.getValidationError()
|
|
@@ -134,17 +133,18 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
|
|
|
134
133
|
|
|
135
134
|
useEffect(() => {
|
|
136
135
|
const telInputInit = new intlTelInput(inputRef.current, {
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
136
|
+
utilsScript:
|
|
137
|
+
"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js",
|
|
138
|
+
separateDialCode: true,
|
|
139
|
+
preferredCountries,
|
|
140
|
+
allowDropdown: !disabled,
|
|
141
|
+
initialCountry,
|
|
142
|
+
onlyCountries,
|
|
143
|
+
})
|
|
144
|
+
|
|
145
|
+
inputRef.current.addEventListener("countrychange", () =>
|
|
146
|
+
validateTooLongNumber(telInputInit)
|
|
143
147
|
)
|
|
144
|
-
|
|
145
|
-
inputRef.current.addEventListener("countrychange", () => validateTooLongNumber(telInputInit))
|
|
146
|
-
inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
|
|
147
|
-
inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
|
|
148
148
|
|
|
149
149
|
setItiInit(telInputInit)
|
|
150
150
|
}, [])
|
|
@@ -152,7 +152,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
|
|
|
152
152
|
return (
|
|
153
153
|
<div {...ariaProps} {...dataProps} className={classes}>
|
|
154
154
|
<TextInput
|
|
155
|
-
className={dropDownIsOpen ? 'dropdown_open' : ''}
|
|
156
155
|
disabled={disabled}
|
|
157
156
|
error={error}
|
|
158
157
|
id={id}
|
|
@@ -45,7 +45,7 @@ module Playbook
|
|
|
45
45
|
|
|
46
46
|
# rubocop:disable Naming/AccessorMethodName
|
|
47
47
|
def get_kits
|
|
48
|
-
menu = YAML.load_file(
|
|
48
|
+
menu = YAML.load_file(Rails.root.join("config/menu.yml"))
|
|
49
49
|
menu["kits"]
|
|
50
50
|
end
|
|
51
51
|
# rubocop:enable Naming/AccessorMethodName
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 12.6.0.pre.alpha.
|
|
4
|
+
version: 12.6.0.pre.alpha.menuyml1
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2023-03-
|
|
12
|
+
date: 2023-03-07 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
|
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
kits:
|
|
2
|
-
- avatars:
|
|
3
|
-
- avatar
|
|
4
|
-
- avatar_action_button
|
|
5
|
-
- multiple_users
|
|
6
|
-
- multiple_users_stacked
|
|
7
|
-
- user
|
|
8
|
-
- background
|
|
9
|
-
- bread_crumbs
|
|
10
|
-
- buttons:
|
|
11
|
-
- button
|
|
12
|
-
- button_toolbar
|
|
13
|
-
- circle_icon_button
|
|
14
|
-
- card
|
|
15
|
-
- collapsible
|
|
16
|
-
- charts_and_graphs:
|
|
17
|
-
- bar_graph
|
|
18
|
-
- circle_chart
|
|
19
|
-
- distribution_bar
|
|
20
|
-
- gauge
|
|
21
|
-
- legend
|
|
22
|
-
- line_graph
|
|
23
|
-
- treemap_chart
|
|
24
|
-
- dialog
|
|
25
|
-
- filter
|
|
26
|
-
- fixed_confirmation_toast
|
|
27
|
-
- forms:
|
|
28
|
-
- checkbox
|
|
29
|
-
- date_picker
|
|
30
|
-
- file_upload
|
|
31
|
-
- form
|
|
32
|
-
- form_group
|
|
33
|
-
- form_pill
|
|
34
|
-
- passphrase
|
|
35
|
-
- phone_number_input
|
|
36
|
-
- radio
|
|
37
|
-
- rich_text_editor
|
|
38
|
-
- select
|
|
39
|
-
- selectable_card
|
|
40
|
-
- selectable_card_icon
|
|
41
|
-
- selectable_icon
|
|
42
|
-
- selectable_list
|
|
43
|
-
- text_input
|
|
44
|
-
- textarea
|
|
45
|
-
- toggle
|
|
46
|
-
- typeahead
|
|
47
|
-
- highlight
|
|
48
|
-
- icon
|
|
49
|
-
- icon_circle
|
|
50
|
-
- icon_stat_value
|
|
51
|
-
- icon_value
|
|
52
|
-
- image
|
|
53
|
-
- layouts:
|
|
54
|
-
- flex
|
|
55
|
-
- layout
|
|
56
|
-
- lightbox
|
|
57
|
-
- list
|
|
58
|
-
- loading_inline
|
|
59
|
-
- map
|
|
60
|
-
- multi_level_select
|
|
61
|
-
- nav
|
|
62
|
-
- tags:
|
|
63
|
-
- badge
|
|
64
|
-
- hashtag
|
|
65
|
-
- pill
|
|
66
|
-
- pagination
|
|
67
|
-
- popover
|
|
68
|
-
- progress:
|
|
69
|
-
- progress_pills
|
|
70
|
-
- progress_simple
|
|
71
|
-
- progress_step
|
|
72
|
-
- section_separator
|
|
73
|
-
- star_rating
|
|
74
|
-
- table
|
|
75
|
-
- timeline
|
|
76
|
-
- time_and_date:
|
|
77
|
-
- date
|
|
78
|
-
- date_range_inline
|
|
79
|
-
- date_range_stacked
|
|
80
|
-
- date_stacked
|
|
81
|
-
- date_time
|
|
82
|
-
- date_time_stacked
|
|
83
|
-
- date_year_stacked
|
|
84
|
-
- time
|
|
85
|
-
- time_range_inline
|
|
86
|
-
- time_stacked
|
|
87
|
-
- timestamp
|
|
88
|
-
- weekday_stacked
|
|
89
|
-
- tooltip
|
|
90
|
-
- typography:
|
|
91
|
-
- body
|
|
92
|
-
- caption
|
|
93
|
-
- title
|
|
94
|
-
- typography_patterns:
|
|
95
|
-
- contact
|
|
96
|
-
- currency
|
|
97
|
-
- dashboard_value
|
|
98
|
-
- home_address_street
|
|
99
|
-
- label_pill
|
|
100
|
-
- label_value
|
|
101
|
-
- message
|
|
102
|
-
- person
|
|
103
|
-
- person_contact
|
|
104
|
-
- source
|
|
105
|
-
- stat_change
|
|
106
|
-
- stat_value
|
|
107
|
-
- title_count
|
|
108
|
-
- title_detail
|
|
109
|
-
- user_badge
|
|
110
|
-
- walkthrough
|