playbook_ui 12.4.0.pre.alpha.map1 → 12.5.0
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_date_picker/_date_picker.tsx +37 -33
- data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +55 -0
- data/app/pb_kits/playbook/pb_loading_inline/loading_inline.test.js +41 -0
- data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx +0 -1
- data/app/pb_kits/playbook/pb_map/docs/_map_default.md +3 -3
- data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx +7 -6
- data/app/pb_kits/playbook/pb_message/{_message.jsx → _message.tsx} +35 -35
- data/app/pb_kits/playbook/pb_message/message.test.js +63 -0
- data/app/pb_kits/playbook/pb_passphrase/{_passphrase.jsx → _passphrase.tsx} +56 -56
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb +3 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.html.erb +15 -0
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +43 -0
- data/app/pb_kits/playbook/pb_popover/_popover.tsx +3 -3
- data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss +1 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +4 -0
- data/app/pb_kits/playbook/playbook-rails-react-bindings.js +2 -0
- data/lib/playbook/version.rb +1 -1
- metadata +11 -6
- data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.jsx +0 -37
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 92319a3771d2aa0a3198e988dc95b91e977ee532db2884cd6197912cb045caae
|
4
|
+
data.tar.gz: caaa026385dd1d94a65175ba00ef818caab6a901c5bb0da90cd24920158e885f
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 7469df006da7d11b70de500123a4d260db2a2c8c0b79ee80766dde6a760eaa81c71b59880aad14ee48a7d9ee91b2c6237e766b8c046a19b088b61830b0e5f2b6
|
7
|
+
data.tar.gz: 7e0f3a0e05f403da3b31e8b21ab01ee92fb4139a5223af663a62f9672ff381009a75cd1a9f30ea57289e28ffda043f23cab7364eae1e54973e9f4922d8884f28
|
@@ -14,7 +14,7 @@ type DatePickerProps = {
|
|
14
14
|
aria?: {[key: string]: string},
|
15
15
|
className?: string,
|
16
16
|
dark?: boolean,
|
17
|
-
data?:
|
17
|
+
data?: { [key: string]: string },
|
18
18
|
defaultDate?: string,
|
19
19
|
disableDate?: number[],
|
20
20
|
disableInput?: boolean,
|
@@ -27,8 +27,8 @@ type DatePickerProps = {
|
|
27
27
|
hideLabel?: boolean,
|
28
28
|
id?: string,
|
29
29
|
inLine?: boolean,
|
30
|
-
inputAria?:
|
31
|
-
inputData?:
|
30
|
+
inputAria?: {[key: string]: string},
|
31
|
+
inputData?: {[key: string]: string},
|
32
32
|
inputOnChange?: (arg: string) => void,
|
33
33
|
inputValue?: any,
|
34
34
|
label?: string,
|
@@ -47,7 +47,7 @@ type DatePickerProps = {
|
|
47
47
|
yearRange?: number[],
|
48
48
|
} & GlobalProps
|
49
49
|
|
50
|
-
const DatePicker = (props: DatePickerProps) => {
|
50
|
+
const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
51
51
|
if (props.plugins) deprecatedProps('Date Picker', ['plugins'])
|
52
52
|
|
53
53
|
const {
|
@@ -67,7 +67,7 @@ const DatePicker = (props: DatePickerProps) => {
|
|
67
67
|
hideIcon = false,
|
68
68
|
hideLabel = false,
|
69
69
|
id,
|
70
|
-
inLine =
|
70
|
+
inLine = false,
|
71
71
|
inputAria,
|
72
72
|
inputData,
|
73
73
|
inputOnChange,
|
@@ -77,7 +77,7 @@ const DatePicker = (props: DatePickerProps) => {
|
|
77
77
|
minDate,
|
78
78
|
mode = 'single',
|
79
79
|
name,
|
80
|
-
onChange = () => {},
|
80
|
+
onChange = () => { void 0 },
|
81
81
|
pickerId,
|
82
82
|
placeholder = 'Select Date',
|
83
83
|
plugins = false,
|
@@ -163,36 +163,40 @@ const DatePicker = (props: DatePickerProps) => {
|
|
163
163
|
value={inputValue}
|
164
164
|
/>
|
165
165
|
|
166
|
-
{!hideIcon &&
|
166
|
+
{ !hideIcon &&
|
167
167
|
<div
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
<Icon
|
172
|
-
className="cal_icon"
|
173
|
-
icon="calendar-alt"
|
174
|
-
/>
|
175
|
-
</div>
|
176
|
-
}
|
177
|
-
|
178
|
-
|
179
|
-
{ hideIcon && inLine ? <><div
|
180
|
-
className={iconWrapperClass()}
|
181
|
-
id={`${pickerId}-icon-plus`}
|
182
|
-
>
|
168
|
+
className={iconWrapperClass()}
|
169
|
+
id={`cal-icon-${pickerId}`}
|
170
|
+
>
|
183
171
|
<Icon
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
>
|
190
|
-
<Icon
|
191
|
-
className="angle_down_icon"
|
192
|
-
icon="angle-down" />
|
193
|
-
</div></> : null}
|
194
|
-
|
172
|
+
className="cal_icon"
|
173
|
+
icon="calendar-alt"
|
174
|
+
/>
|
175
|
+
</div>
|
176
|
+
}
|
195
177
|
|
178
|
+
{ hideIcon && inLine ?
|
179
|
+
<div>
|
180
|
+
<div
|
181
|
+
className={iconWrapperClass()}
|
182
|
+
id={`${pickerId}-icon-plus`}
|
183
|
+
>
|
184
|
+
<Icon
|
185
|
+
className="date-picker-plus-icon"
|
186
|
+
icon="plus"
|
187
|
+
/>
|
188
|
+
</div>
|
189
|
+
<div
|
190
|
+
className={iconWrapperClass()}
|
191
|
+
id={`${pickerId}-angle-down`}
|
192
|
+
>
|
193
|
+
<Icon
|
194
|
+
className="angle_down_icon"
|
195
|
+
icon="angle-down"
|
196
|
+
/>
|
197
|
+
</div>
|
198
|
+
</div>
|
199
|
+
: null }
|
196
200
|
</div>
|
197
201
|
</div>
|
198
202
|
)
|
@@ -0,0 +1,55 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import classnames from 'classnames'
|
3
|
+
|
4
|
+
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
5
|
+
import { globalProps } from '../utilities/globalProps'
|
6
|
+
|
7
|
+
import Body from '../pb_body/_body'
|
8
|
+
import Icon from '../pb_icon/_icon'
|
9
|
+
|
10
|
+
type LoadingInlineProps = {
|
11
|
+
align?: "left" | "center" | "right",
|
12
|
+
aria?: { [key: string]: string },
|
13
|
+
className?: string,
|
14
|
+
data?: { [key: string]: string },
|
15
|
+
id?: string,
|
16
|
+
}
|
17
|
+
|
18
|
+
const LoadingInline = (props: LoadingInlineProps) => {
|
19
|
+
const {
|
20
|
+
align = 'left',
|
21
|
+
aria = {},
|
22
|
+
className,
|
23
|
+
data = {},
|
24
|
+
id,
|
25
|
+
} = props
|
26
|
+
|
27
|
+
const ariaProps = buildAriaProps(aria)
|
28
|
+
const dataProps = buildDataProps(data)
|
29
|
+
const classes = classnames(
|
30
|
+
buildCss(`pb_loading_inline_kit_${align}`),
|
31
|
+
globalProps(props),
|
32
|
+
className
|
33
|
+
)
|
34
|
+
|
35
|
+
return (
|
36
|
+
<div
|
37
|
+
{...ariaProps}
|
38
|
+
{...dataProps}
|
39
|
+
className={classes}
|
40
|
+
id={id}
|
41
|
+
>
|
42
|
+
<Body color="light">
|
43
|
+
<Icon
|
44
|
+
aria={{ label: 'loading icon' }}
|
45
|
+
fixedWidth
|
46
|
+
icon="spinner"
|
47
|
+
pulse
|
48
|
+
/>
|
49
|
+
{' Loading'}
|
50
|
+
</Body>
|
51
|
+
</div>
|
52
|
+
)
|
53
|
+
}
|
54
|
+
|
55
|
+
export default LoadingInline
|
@@ -0,0 +1,41 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
3
|
+
import LoadingInline from './_loading_inline'
|
4
|
+
|
5
|
+
const testId = "loadingInline"
|
6
|
+
|
7
|
+
test('should render custom class and data', () => {
|
8
|
+
render(
|
9
|
+
<LoadingInline
|
10
|
+
className='custom-class'
|
11
|
+
data={{ testid: testId }}
|
12
|
+
/>
|
13
|
+
)
|
14
|
+
|
15
|
+
const kit = screen.getByTestId(testId)
|
16
|
+
expect(kit).toHaveClass('custom-class')
|
17
|
+
})
|
18
|
+
|
19
|
+
test('should render id', () => {
|
20
|
+
render(
|
21
|
+
<LoadingInline
|
22
|
+
data={{ testid: testId }}
|
23
|
+
id={testId}
|
24
|
+
/>
|
25
|
+
)
|
26
|
+
|
27
|
+
const kit = screen.getByTestId(testId)
|
28
|
+
expect(kit).toHaveProperty('id', testId)
|
29
|
+
})
|
30
|
+
|
31
|
+
test('should render aria-label', () => {
|
32
|
+
render(
|
33
|
+
<LoadingInline
|
34
|
+
aria={{ label: testId }}
|
35
|
+
data={{ testid: testId }}
|
36
|
+
/>
|
37
|
+
)
|
38
|
+
|
39
|
+
const kit = screen.getByTestId(testId)
|
40
|
+
expect(kit).toHaveAttribute('aria-label', testId)
|
41
|
+
})
|
@@ -2,12 +2,12 @@ This kit provides a wrapping class to place around the MapLibre library. Complet
|
|
2
2
|
|
3
3
|
Basic setup to start using MapLibre:
|
4
4
|
- Install the npm package using `yarn add maplibre-gl`
|
5
|
-
-
|
5
|
+
- To include the maplibre css, include a link to the CSS file as a CDN in your stylesheet using the following syntax: `@import url("https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css");`
|
6
6
|
OR include it as a link in the <head> tag `<link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />`
|
7
|
-
- To use Maplibre, you must also set a height on the containing div.
|
8
7
|
- You can now use MapLibre within the Map Kit as shown in this example.
|
9
8
|
|
10
9
|
__Notes__ :
|
11
|
-
- The MapLibre Marker allows us to pass it a HEX value as a color prop but for Playbook styling we recommend importing our `MapTheme` file and passing `mapTheme.marker` to the Marker color prop.
|
12
10
|
- To enable custom buttons, set `zoomBtns` and `flyTo` to true and pass in `zoomInClick`, `zoomOutClick` and `flyToClick` as shown in this doc example.
|
11
|
+
- Use `mapTheme.marker` to set the Marker color.
|
12
|
+
- To use Maplibre, you must also set a height and width to the containing div (.pb_map) and set position to 'relative'.
|
13
13
|
- `scrollZoom` has been disabled in these doc examples for page usability
|
@@ -2,12 +2,14 @@ import React, { useRef, useEffect } from 'react'
|
|
2
2
|
import { Map } from '../../'
|
3
3
|
import maplibregl from 'maplibre-gl'
|
4
4
|
import MapboxDraw from "@mapbox/mapbox-gl-draw";
|
5
|
-
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
|
6
5
|
import mapTheme from '../pbMapTheme'
|
7
6
|
|
8
7
|
const MapWithPlugin = (props) => {
|
8
|
+
//set Map instance to access from outside useEffect
|
9
|
+
const mapContainerRef = useRef(null)
|
9
10
|
|
10
|
-
|
11
|
+
//Set default position
|
12
|
+
const defaultPosition = [-75.379143, 39.831200]
|
11
13
|
|
12
14
|
//This function should contain all maplibre related code
|
13
15
|
const loadMap = ( { target: map }) => {
|
@@ -15,11 +17,11 @@ const MapWithPlugin = (props) => {
|
|
15
17
|
/* eslint-disable-next-line */
|
16
18
|
const marker = new maplibregl.Marker({
|
17
19
|
color: mapTheme.marker,
|
18
|
-
}).setLngLat(
|
20
|
+
}).setLngLat(defaultPosition)
|
19
21
|
.setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
|
20
22
|
.addTo(map);
|
21
23
|
|
22
|
-
//add zoom controls
|
24
|
+
//add maplibre default zoom controls
|
23
25
|
map.addControl(new maplibregl.NavigationControl({showCompass: false}))
|
24
26
|
|
25
27
|
// disable map zoom when using scroll
|
@@ -39,9 +41,8 @@ const MapWithPlugin = (props) => {
|
|
39
41
|
useEffect(() => {
|
40
42
|
new maplibregl.Map({
|
41
43
|
container: mapContainerRef.current,
|
42
|
-
style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
|
43
44
|
center: [-75.379143, 39.831200],
|
44
|
-
|
45
|
+
...mapTheme.mapConfig
|
45
46
|
}).on('load', loadMap)
|
46
47
|
}, [])
|
47
48
|
|
@@ -13,11 +13,11 @@ import Timestamp from '../pb_timestamp/_timestamp'
|
|
13
13
|
import Title from '../pb_title/_title'
|
14
14
|
|
15
15
|
type MessageProps = {
|
16
|
-
aria:
|
16
|
+
aria: { [key: string]: string },
|
17
17
|
avatarName?: string,
|
18
|
-
avatarStatus?:
|
18
|
+
avatarStatus?: "away" | "offline" | "online",
|
19
19
|
avatarUrl?: string,
|
20
|
-
children?:
|
20
|
+
children?: React.ReactChild[] | React.ReactChild,
|
21
21
|
className?: string,
|
22
22
|
data?: object,
|
23
23
|
id?: string,
|
@@ -61,53 +61,53 @@ const Message = (props: MessageProps) => {
|
|
61
61
|
|
62
62
|
return (
|
63
63
|
<div
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
64
|
+
{...ariaProps}
|
65
|
+
{...dataProps}
|
66
|
+
className={classes}
|
67
|
+
id={id}
|
68
68
|
>
|
69
|
-
|
69
|
+
{shouldDisplayAvatar &&
|
70
70
|
<Avatar
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
71
|
+
imageUrl={avatarUrl}
|
72
|
+
name={avatarName}
|
73
|
+
size="xs"
|
74
|
+
status={avatarStatus}
|
75
75
|
/>
|
76
|
-
|
76
|
+
}
|
77
77
|
<div className="content_wrapper">
|
78
78
|
<Flex
|
79
|
-
|
80
|
-
|
79
|
+
justify={alignTimestamp === 'left' ? 'none' : 'between'}
|
80
|
+
orientation="row"
|
81
81
|
>
|
82
|
-
|
82
|
+
{label &&
|
83
83
|
<Title
|
84
|
-
|
85
|
-
|
86
|
-
|
84
|
+
className="message_title"
|
85
|
+
size={4}
|
86
|
+
text={label}
|
87
87
|
/>
|
88
|
-
|
88
|
+
}
|
89
89
|
<Timestamp
|
90
|
-
|
91
|
-
|
92
|
-
|
90
|
+
className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
|
91
|
+
text={timestamp}
|
92
|
+
timestamp={''}
|
93
|
+
timezone={timezone}
|
93
94
|
/>
|
94
|
-
|
95
|
+
{timestampObject &&
|
95
96
|
<Timestamp
|
96
|
-
|
97
|
-
|
98
|
-
|
97
|
+
className={`pull-${alignTimestamp} message_timestamp`}
|
98
|
+
text={''}
|
99
|
+
timestamp={timestampObject}
|
100
|
+
timezone={timezone}
|
99
101
|
/>
|
100
|
-
|
102
|
+
}
|
101
103
|
</Flex>
|
102
|
-
|
104
|
+
{message &&
|
103
105
|
<Body
|
104
|
-
|
105
|
-
|
106
|
+
className="pb_message_body"
|
107
|
+
text={message}
|
106
108
|
/>
|
107
|
-
|
108
|
-
|
109
|
-
{ children }
|
110
|
-
</If>
|
109
|
+
}
|
110
|
+
{children}
|
111
111
|
</div>
|
112
112
|
</div>
|
113
113
|
)
|
@@ -0,0 +1,63 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
3
|
+
import Message from './_message'
|
4
|
+
import Image from './../pb_image/_image'
|
5
|
+
|
6
|
+
const testId = "message"
|
7
|
+
|
8
|
+
const MessageDefault = () => {
|
9
|
+
return (
|
10
|
+
<>
|
11
|
+
<Message
|
12
|
+
avatarName="Becca Jacobs"
|
13
|
+
avatarUrl="https://randomuser.me/api/portraits/women/50.jpg"
|
14
|
+
className='custom-class'
|
15
|
+
data={{ testid: testId }}
|
16
|
+
label="Lucille Sanchez"
|
17
|
+
message="Application for Kate Smith is waiting for your approval"
|
18
|
+
timestamp="2 days ago"
|
19
|
+
>
|
20
|
+
<Image
|
21
|
+
alt="picture of a misty forest"
|
22
|
+
size="md"
|
23
|
+
url="https://unsplash.it/500/400/?image=634"
|
24
|
+
/>
|
25
|
+
</Message>
|
26
|
+
</>
|
27
|
+
)
|
28
|
+
}
|
29
|
+
|
30
|
+
test('should render message', () => {
|
31
|
+
render(<MessageDefault />)
|
32
|
+
|
33
|
+
const kit = screen.getByText('Application for Kate Smith is waiting for your approval')
|
34
|
+
expect(kit).toBeInTheDocument()
|
35
|
+
})
|
36
|
+
|
37
|
+
test('should render label', () => {
|
38
|
+
render(<MessageDefault />)
|
39
|
+
|
40
|
+
const kit = screen.getByText('Lucille Sanchez')
|
41
|
+
expect(kit).toBeInTheDocument()
|
42
|
+
})
|
43
|
+
|
44
|
+
test('should render timestamp', () => {
|
45
|
+
render(<MessageDefault />)
|
46
|
+
|
47
|
+
const kit = screen.getByText('2 days ago')
|
48
|
+
expect(kit).toBeInTheDocument()
|
49
|
+
})
|
50
|
+
|
51
|
+
test('should render custom class and data', () => {
|
52
|
+
render(<MessageDefault />)
|
53
|
+
|
54
|
+
const kit = screen.getByTestId(testId)
|
55
|
+
expect(kit).toHaveClass('custom-class')
|
56
|
+
})
|
57
|
+
|
58
|
+
test('should render a children', () => {
|
59
|
+
render(<MessageDefault />)
|
60
|
+
|
61
|
+
const kit = screen.getByAltText('picture of a misty forest')
|
62
|
+
expect(kit).toBeInTheDocument()
|
63
|
+
})
|
@@ -15,7 +15,7 @@ import PbReactPopover from '../pb_popover/_popover'
|
|
15
15
|
import TextInput from '../pb_text_input/_text_input'
|
16
16
|
|
17
17
|
type PassphraseProps = {
|
18
|
-
aria?:
|
18
|
+
aria?: { [key: string]: string },
|
19
19
|
confirmation?: boolean,
|
20
20
|
className?: string,
|
21
21
|
data?: object,
|
@@ -23,7 +23,7 @@ type PassphraseProps = {
|
|
23
23
|
id?: string,
|
24
24
|
inputProps?: {},
|
25
25
|
label?: string,
|
26
|
-
onChange: (String) => void,
|
26
|
+
onChange: (inputValue: String) => void,
|
27
27
|
showTipsBelow?: "always" | "xs" | "sm" | "md" | "lg" | "xl",
|
28
28
|
tips?: Array<string>,
|
29
29
|
uncontrolled?: boolean,
|
@@ -40,7 +40,7 @@ const Passphrase = (props: PassphraseProps) => {
|
|
40
40
|
id,
|
41
41
|
inputProps = {},
|
42
42
|
label = confirmation ? "Confirm Passphrase" : "Passphrase",
|
43
|
-
onChange = () => {},
|
43
|
+
onChange = () => { },
|
44
44
|
showTipsBelow = "always",
|
45
45
|
tips = [],
|
46
46
|
uncontrolled = false,
|
@@ -62,11 +62,11 @@ const Passphrase = (props: PassphraseProps) => {
|
|
62
62
|
)
|
63
63
|
|
64
64
|
const toggleShowPopover = () => setShowPopover(!showPopover)
|
65
|
-
const handleShouldClosePopover = (shouldClosePopover) => {
|
65
|
+
const handleShouldClosePopover = (shouldClosePopover: boolean) => {
|
66
66
|
setShowPopover(!shouldClosePopover)
|
67
67
|
}
|
68
68
|
|
69
|
-
const toggleShowPassphrase = (e) => {
|
69
|
+
const toggleShowPassphrase = (e: React.MouseEvent<HTMLElement>) => {
|
70
70
|
e.preventDefault()
|
71
71
|
setShowPassphrase(!showPassphrase)
|
72
72
|
}
|
@@ -86,54 +86,54 @@ const Passphrase = (props: PassphraseProps) => {
|
|
86
86
|
|
87
87
|
const popoverReference = (
|
88
88
|
<CircleIconButton
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
89
|
+
className={tipClass}
|
90
|
+
dark={dark}
|
91
|
+
icon="info-circle"
|
92
|
+
onClick={toggleShowPopover}
|
93
|
+
variant="link"
|
94
94
|
/>
|
95
95
|
)
|
96
96
|
|
97
97
|
return (
|
98
|
-
<div
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
98
|
+
<div
|
99
|
+
{...ariaProps}
|
100
|
+
{...dataProps}
|
101
|
+
className={classes}
|
102
|
+
id={id}
|
103
103
|
>
|
104
104
|
<label>
|
105
105
|
<Flex align="baseline">
|
106
|
-
<Caption
|
107
|
-
|
108
|
-
|
106
|
+
<Caption
|
107
|
+
className="passphrase-label"
|
108
|
+
text={label}
|
109
109
|
/>
|
110
|
-
|
110
|
+
{tips.length > 0 && !confirmation &&
|
111
111
|
<PbReactPopover
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
112
|
+
className="passphrase-tips"
|
113
|
+
closeOnClick="outside"
|
114
|
+
placement="right"
|
115
|
+
reference={popoverReference}
|
116
|
+
shouldClosePopover={handleShouldClosePopover}
|
117
|
+
show={showPopover}
|
118
118
|
>
|
119
|
-
<Flex
|
120
|
-
|
121
|
-
|
119
|
+
<Flex
|
120
|
+
align="center"
|
121
|
+
orientation="column"
|
122
122
|
>
|
123
|
-
<Caption
|
124
|
-
|
125
|
-
|
123
|
+
<Caption
|
124
|
+
marginBottom="xs"
|
125
|
+
text="Tips for a good passphrase"
|
126
126
|
/>
|
127
127
|
<div>
|
128
128
|
{tips.map((tip, i) => (
|
129
|
-
<Caption
|
130
|
-
|
131
|
-
|
132
|
-
|
129
|
+
<Caption
|
130
|
+
key={i}
|
131
|
+
marginBottom="xs"
|
132
|
+
size="xs"
|
133
133
|
>
|
134
|
-
<Icon
|
135
|
-
|
136
|
-
|
134
|
+
<Icon
|
135
|
+
icon="shield-check"
|
136
|
+
marginRight="xs"
|
137
137
|
/>
|
138
138
|
{tip}
|
139
139
|
</Caption>
|
@@ -141,34 +141,34 @@ const Passphrase = (props: PassphraseProps) => {
|
|
141
141
|
</div>
|
142
142
|
</Flex>
|
143
143
|
</PbReactPopover>
|
144
|
-
|
144
|
+
}
|
145
145
|
</Flex>
|
146
146
|
<div className="passphrase-text-input-wrapper">
|
147
147
|
<TextInput
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
148
|
+
className="passphrase-text-input"
|
149
|
+
dark={dark}
|
150
|
+
marginBottom="xs"
|
151
|
+
onChange={handleChange}
|
152
|
+
placeholder="Enter a passphrase..."
|
153
|
+
type={showPassphrase ? "text" : "password"}
|
154
|
+
value={displayValue}
|
155
|
+
{...inputProps}
|
156
156
|
/>
|
157
|
-
<span
|
158
|
-
|
159
|
-
|
157
|
+
<span
|
158
|
+
className="show-passphrase-icon"
|
159
|
+
onClick={toggleShowPassphrase}
|
160
160
|
>
|
161
161
|
<Body
|
162
|
-
|
163
|
-
|
164
|
-
|
162
|
+
className={showPassphrase ? "hide-icon" : ""}
|
163
|
+
color="light"
|
164
|
+
dark={dark}
|
165
165
|
>
|
166
166
|
<Icon icon="eye-slash" />
|
167
167
|
</Body>
|
168
168
|
<Body
|
169
|
-
|
170
|
-
|
171
|
-
|
169
|
+
className={showPassphrase ? "" : "hide-icon"}
|
170
|
+
color="light"
|
171
|
+
dark={dark}
|
172
172
|
>
|
173
173
|
<Icon icon="eye" />
|
174
174
|
</Body>
|
@@ -0,0 +1,15 @@
|
|
1
|
+
<%= react_component("PhoneNumberInput", object.phone_number_input_options) %>
|
2
|
+
|
3
|
+
<script>
|
4
|
+
const formatToGlobalCountryName = () => {
|
5
|
+
return countryName.split('(')[0].trim()
|
6
|
+
}
|
7
|
+
|
8
|
+
const formatAllCountries = () => {
|
9
|
+
let countryData = window.intlTelInputGlobals.getCountryData()
|
10
|
+
for (let i = 0; i < countryData.length; i++) {
|
11
|
+
let country = countryData[i]
|
12
|
+
country.name = formatToGlobalCountryName(country.name)
|
13
|
+
}
|
14
|
+
}
|
15
|
+
</script>
|
@@ -0,0 +1,43 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Playbook
|
4
|
+
module PbPhoneNumberInput
|
5
|
+
class PhoneNumberInput < Playbook::KitBase
|
6
|
+
prop :disabled, type: Playbook::Props::Boolean,
|
7
|
+
default: false
|
8
|
+
prop :initial_country, type: Playbook::Props::String,
|
9
|
+
default: ""
|
10
|
+
prop :is_valid
|
11
|
+
prop :label, type: Playbook::Props::String,
|
12
|
+
default: ""
|
13
|
+
prop :name, type: Playbook::Props::String,
|
14
|
+
default: ""
|
15
|
+
prop :onchange
|
16
|
+
prop :only_countries, type: Playbook::Props::Array,
|
17
|
+
default: []
|
18
|
+
prop :preferred_countries, type: Playbook::Props::Array,
|
19
|
+
default: []
|
20
|
+
prop :value, type: Playbook::Props::String,
|
21
|
+
default: ""
|
22
|
+
|
23
|
+
def classname
|
24
|
+
generate_classname("pb_phone_number_input")
|
25
|
+
end
|
26
|
+
|
27
|
+
def phone_number_input_options
|
28
|
+
{
|
29
|
+
id: id,
|
30
|
+
disabled: disabled,
|
31
|
+
initialCountry: initial_country,
|
32
|
+
isValid: is_valid,
|
33
|
+
label: label,
|
34
|
+
name: name,
|
35
|
+
onChange: onchange,
|
36
|
+
onlyCountries: only_countries,
|
37
|
+
preferredCountries: preferred_countries,
|
38
|
+
value: value,
|
39
|
+
}
|
40
|
+
end
|
41
|
+
end
|
42
|
+
end
|
43
|
+
end
|
@@ -28,9 +28,9 @@ type PbPopoverProps = {
|
|
28
28
|
offset?: boolean;
|
29
29
|
reference: PopperReference & any;
|
30
30
|
show?: boolean;
|
31
|
-
shouldClosePopover?: (arg0: boolean) =>
|
32
|
-
} & GlobalProps &
|
33
|
-
|
31
|
+
shouldClosePopover?: (arg0: boolean) => void;
|
32
|
+
} & GlobalProps & Omit<PopperProps<any>, 'children'>
|
33
|
+
& { children?: React.ReactChild[] | React.ReactChild }
|
34
34
|
|
35
35
|
// Prop enabled default modifiers here
|
36
36
|
// https://popper.js.org/docs/v2/modifiers
|
@@ -17,6 +17,7 @@ import Passphrase from './pb_passphrase/_passphrase'
|
|
17
17
|
import RichTextEditor from './pb_rich_text_editor/_rich_text_editor'
|
18
18
|
import TreemapChart from './pb_treemap_chart/_treemap_chart'
|
19
19
|
import Typeahead from './pb_typeahead/_typeahead'
|
20
|
+
import PhoneNumberInput from './pb_phone_number_input/_phone_number_input'
|
20
21
|
|
21
22
|
WebpackerReact.registerComponents({
|
22
23
|
BarGraph,
|
@@ -33,6 +34,7 @@ WebpackerReact.registerComponents({
|
|
33
34
|
TreemapChart,
|
34
35
|
Typeahead,
|
35
36
|
Gauge,
|
37
|
+
PhoneNumberInput
|
36
38
|
})
|
37
39
|
|
38
40
|
ujs.setup(
|
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.
|
4
|
+
version: 12.5.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -1379,8 +1379,8 @@ files:
|
|
1379
1379
|
- app/pb_kits/playbook/pb_list/item.rb
|
1380
1380
|
- app/pb_kits/playbook/pb_list/list.html.erb
|
1381
1381
|
- app/pb_kits/playbook/pb_list/list.rb
|
1382
|
-
- app/pb_kits/playbook/pb_loading_inline/_loading_inline.jsx
|
1383
1382
|
- app/pb_kits/playbook/pb_loading_inline/_loading_inline.scss
|
1383
|
+
- app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
|
1384
1384
|
- app/pb_kits/playbook/pb_loading_inline/docs/_description.md
|
1385
1385
|
- app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_light.html.erb
|
1386
1386
|
- app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_light.jsx
|
@@ -1388,6 +1388,7 @@ files:
|
|
1388
1388
|
- app/pb_kits/playbook/pb_loading_inline/docs/index.js
|
1389
1389
|
- app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb
|
1390
1390
|
- app/pb_kits/playbook/pb_loading_inline/loading_inline.rb
|
1391
|
+
- app/pb_kits/playbook/pb_loading_inline/loading_inline.test.js
|
1391
1392
|
- app/pb_kits/playbook/pb_logistic/_logistic.jsx
|
1392
1393
|
- app/pb_kits/playbook/pb_map/_map.scss
|
1393
1394
|
- app/pb_kits/playbook/pb_map/_map.tsx
|
@@ -1399,8 +1400,8 @@ files:
|
|
1399
1400
|
- app/pb_kits/playbook/pb_map/docs/index.js
|
1400
1401
|
- app/pb_kits/playbook/pb_map/map.test.jsx
|
1401
1402
|
- app/pb_kits/playbook/pb_map/pbMapTheme.ts
|
1402
|
-
- app/pb_kits/playbook/pb_message/_message.jsx
|
1403
1403
|
- app/pb_kits/playbook/pb_message/_message.scss
|
1404
|
+
- app/pb_kits/playbook/pb_message/_message.tsx
|
1404
1405
|
- app/pb_kits/playbook/pb_message/_message_mixins.scss
|
1405
1406
|
- app/pb_kits/playbook/pb_message/docs/_description.md
|
1406
1407
|
- app/pb_kits/playbook/pb_message/docs/_footer.md
|
@@ -1413,6 +1414,7 @@ files:
|
|
1413
1414
|
- app/pb_kits/playbook/pb_message/docs/index.js
|
1414
1415
|
- app/pb_kits/playbook/pb_message/message.html.erb
|
1415
1416
|
- app/pb_kits/playbook/pb_message/message.rb
|
1417
|
+
- app/pb_kits/playbook/pb_message/message.test.js
|
1416
1418
|
- app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx
|
1417
1419
|
- app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
|
1418
1420
|
- app/pb_kits/playbook/pb_multiple_users/docs/_description.md
|
@@ -1497,8 +1499,8 @@ files:
|
|
1497
1499
|
- app/pb_kits/playbook/pb_pagination/docs/example.yml
|
1498
1500
|
- app/pb_kits/playbook/pb_pagination/pagination.html.erb
|
1499
1501
|
- app/pb_kits/playbook/pb_pagination/pagination.rb
|
1500
|
-
- app/pb_kits/playbook/pb_passphrase/_passphrase.jsx
|
1501
1502
|
- app/pb_kits/playbook/pb_passphrase/_passphrase.scss
|
1503
|
+
- app/pb_kits/playbook/pb_passphrase/_passphrase.tsx
|
1502
1504
|
- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb
|
1503
1505
|
- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.jsx
|
1504
1506
|
- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.md
|
@@ -1556,6 +1558,7 @@ files:
|
|
1556
1558
|
- app/pb_kits/playbook/pb_person_contact/person_contact.rb
|
1557
1559
|
- app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss
|
1558
1560
|
- app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx
|
1561
|
+
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb
|
1559
1562
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx
|
1560
1563
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.md
|
1561
1564
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx
|
@@ -1566,6 +1569,8 @@ files:
|
|
1566
1569
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
|
1567
1570
|
- app/pb_kits/playbook/pb_phone_number_input/docs/example.yml
|
1568
1571
|
- app/pb_kits/playbook/pb_phone_number_input/docs/index.js
|
1572
|
+
- app/pb_kits/playbook/pb_phone_number_input/phone_number_input.html.erb
|
1573
|
+
- app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb
|
1569
1574
|
- app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js
|
1570
1575
|
- app/pb_kits/playbook/pb_phone_number_input/types.d.ts
|
1571
1576
|
- app/pb_kits/playbook/pb_pill/_pill.scss
|
@@ -2423,9 +2428,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
2423
2428
|
version: '0'
|
2424
2429
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
2425
2430
|
requirements:
|
2426
|
-
- - "
|
2431
|
+
- - ">="
|
2427
2432
|
- !ruby/object:Gem::Version
|
2428
|
-
version:
|
2433
|
+
version: '0'
|
2429
2434
|
requirements: []
|
2430
2435
|
rubygems_version: 3.3.7
|
2431
2436
|
signing_key:
|
@@ -1,37 +0,0 @@
|
|
1
|
-
/* @flow */
|
2
|
-
|
3
|
-
import React from 'react'
|
4
|
-
import classnames from 'classnames'
|
5
|
-
|
6
|
-
import { globalProps } from '../utilities/globalProps'
|
7
|
-
|
8
|
-
import Body from '../pb_body/_body'
|
9
|
-
import Icon from '../pb_icon/_icon'
|
10
|
-
type LoadingInlineProps = {
|
11
|
-
align?: "left" | "center" | "right",
|
12
|
-
className?: string,
|
13
|
-
dark?: boolean,
|
14
|
-
data?: string,
|
15
|
-
id?: string,
|
16
|
-
}
|
17
|
-
|
18
|
-
const LoadingInline = (props: LoadingInlineProps) => {
|
19
|
-
const { align = 'left' } = props
|
20
|
-
return (
|
21
|
-
<div
|
22
|
-
className={classnames(`pb_loading_inline_kit_${align}`, globalProps(props))}
|
23
|
-
>
|
24
|
-
<Body color="light">
|
25
|
-
<Icon
|
26
|
-
aria={{ label: 'loading icon' }}
|
27
|
-
fixedWidth
|
28
|
-
icon="spinner"
|
29
|
-
pulse
|
30
|
-
/>
|
31
|
-
{' Loading'}
|
32
|
-
</Body>
|
33
|
-
</div>
|
34
|
-
)
|
35
|
-
}
|
36
|
-
|
37
|
-
export default LoadingInline
|