playbook_ui 12.6.0.pre.alpha.cssphone1 → 12.6.0.pre.alpha.menuyml1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|