playbook_ui 9.16.0 → 9.19.0.pre.alphafonts
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_time/docs/_date_time_default.jsx +2 -1
- data/app/pb_kits/playbook/pb_dialog/_dialog.jsx +3 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +2 -0
- data/app/pb_kits/playbook/pb_message/_message.jsx +32 -9
- data/app/pb_kits/playbook/pb_message/_message_mixins.scss +33 -7
- data/app/pb_kits/playbook/pb_message/docs/_message_default.html.erb +18 -16
- data/app/pb_kits/playbook/pb_message/docs/_message_default.jsx +6 -16
- data/app/pb_kits/playbook/pb_message/docs/_message_timestamp.html.erb +18 -0
- data/app/pb_kits/playbook/pb_message/docs/_message_timestamp.jsx +32 -0
- data/app/pb_kits/playbook/pb_message/docs/example.yml +6 -4
- data/app/pb_kits/playbook/pb_message/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_message/message.html.erb +23 -8
- data/app/pb_kits/playbook/pb_message/message.rb +2 -0
- data/app/pb_kits/playbook/pb_passphrase/_passphrase.jsx +4 -1
- data/app/pb_kits/playbook/tokens/_fonts.scss +84 -69
- data/fonts/ProximaNova-Black.woff +0 -0
- data/fonts/ProximaNova-Black.woff2 +0 -0
- data/fonts/ProximaNova-BlackIt.woff +0 -0
- data/fonts/ProximaNova-BlackIt.woff2 +0 -0
- data/fonts/ProximaNova-Bold.woff +0 -0
- data/fonts/ProximaNova-Bold.woff2 +0 -0
- data/fonts/ProximaNova-BoldIt.woff +0 -0
- data/fonts/ProximaNova-BoldIt.woff2 +0 -0
- data/fonts/ProximaNova-Extrabld.woff +0 -0
- data/fonts/ProximaNova-Extrabld.woff2 +0 -0
- data/fonts/ProximaNova-ExtrabldIt.woff +0 -0
- data/fonts/ProximaNova-ExtrabldIt.woff2 +0 -0
- data/fonts/ProximaNova-Light.woff +0 -0
- data/fonts/ProximaNova-Light.woff2 +0 -0
- data/fonts/ProximaNova-LightIt.woff +0 -0
- data/fonts/ProximaNova-LightIt.woff2 +0 -0
- data/fonts/ProximaNova-Regular.woff +0 -0
- data/fonts/ProximaNova-Regular.woff2 +0 -0
- data/fonts/ProximaNova-RegularIt.woff +0 -0
- data/fonts/ProximaNova-RegularIt.woff2 +0 -0
- data/fonts/ProximaNova-Semibold.woff +0 -0
- data/fonts/ProximaNova-Semibold.woff2 +0 -0
- data/fonts/ProximaNova-SemiboldIt.woff +0 -0
- data/fonts/ProximaNova-SemiboldIt.woff2 +0 -0
- data/fonts/ProximaNova-Thin.woff +0 -0
- data/fonts/ProximaNova-Thin.woff2 +0 -0
- data/fonts/ProximaNova-ThinIt.woff +0 -0
- data/fonts/ProximaNova-ThinIt.woff2 +0 -0
- data/lib/playbook/version.rb +2 -2
- metadata +34 -4
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 7a2ab0323f151a127420d46821a35890ef2cb2d34fcd002a86da2ca59fa29923
|
|
4
|
+
data.tar.gz: b2235fe0affc01adcab836a3a49151d31730de088be020c48e96d1748d9e600c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 724c3f13a2f9c777ed3eced3f174ce52ec6725359199d4695937321ee58e8178155ee3edf428042a49bfb961cf0a43c47339c6a37a0ee213c11e638b203d4d69
|
|
7
|
+
data.tar.gz: 93a62f288aa7353732f3f5bef4a308b29369cf781bef1b2735668d4439aa7411ccb5b1f40b7e3fb622dec1c69f2375035c0a7eca5392cd168a8374fd93dc6520
|
|
@@ -25,6 +25,7 @@ type DialogProps = {
|
|
|
25
25
|
onClose?: () => void,
|
|
26
26
|
onConfirm?: () => void,
|
|
27
27
|
opened: boolean,
|
|
28
|
+
portalClassName?: string,
|
|
28
29
|
shouldCloseOnOverlayClick: boolean,
|
|
29
30
|
size?: "sm" | "md" | "lg" | "content",
|
|
30
31
|
text?: string,
|
|
@@ -46,6 +47,7 @@ const Dialog = (props: DialogProps) => {
|
|
|
46
47
|
onCancel = () => {},
|
|
47
48
|
onConfirm = () => {},
|
|
48
49
|
onClose = () => {},
|
|
50
|
+
portalClassName,
|
|
49
51
|
shouldCloseOnOverlayClick = true,
|
|
50
52
|
text,
|
|
51
53
|
title,
|
|
@@ -107,6 +109,7 @@ const Dialog = (props: DialogProps) => {
|
|
|
107
109
|
isOpen={modalIsOpened}
|
|
108
110
|
onRequestClose={onClose}
|
|
109
111
|
overlayClassName={overlayClassNames}
|
|
112
|
+
portalClassName={portalClassName}
|
|
110
113
|
shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
|
|
111
114
|
>
|
|
112
115
|
<If condition={title}>
|
|
@@ -11,11 +11,13 @@ const DialogDefault = () => {
|
|
|
11
11
|
<Button onClick={open}>{'Open Dialog'}</Button>
|
|
12
12
|
<Dialog
|
|
13
13
|
cancelButton="Cancel"
|
|
14
|
+
className="wrapper"
|
|
14
15
|
confirmButton="Okay"
|
|
15
16
|
onCancel={close}
|
|
16
17
|
onClose={close}
|
|
17
18
|
onConfirm={close}
|
|
18
19
|
opened={isOpen}
|
|
20
|
+
portalClassName="portal"
|
|
19
21
|
size="sm"
|
|
20
22
|
text="Hello Body Text, Nice to meet ya."
|
|
21
23
|
title="Header Title is the Title Prop"
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* @flow */
|
|
2
2
|
|
|
3
3
|
import React from 'react'
|
|
4
|
-
import { Avatar, Body,
|
|
4
|
+
import { Avatar, Body, Flex, Timestamp, Title } from '../'
|
|
5
5
|
import classnames from 'classnames'
|
|
6
6
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
|
7
7
|
import { globalProps } from '../utilities/globalProps.js'
|
|
@@ -17,6 +17,8 @@ type MessageProps = {
|
|
|
17
17
|
label?: string,
|
|
18
18
|
message: string,
|
|
19
19
|
timestamp?: string,
|
|
20
|
+
timestampObject?: string,
|
|
21
|
+
alignTimestamp?: string,
|
|
20
22
|
}
|
|
21
23
|
|
|
22
24
|
const Message = (props: MessageProps) => {
|
|
@@ -31,6 +33,8 @@ const Message = (props: MessageProps) => {
|
|
|
31
33
|
label,
|
|
32
34
|
message,
|
|
33
35
|
timestamp,
|
|
36
|
+
timestampObject,
|
|
37
|
+
alignTimestamp = 'right',
|
|
34
38
|
} = props
|
|
35
39
|
const ariaProps = buildAriaProps(aria)
|
|
36
40
|
const dataProps = buildDataProps(data)
|
|
@@ -56,18 +60,37 @@ const Message = (props: MessageProps) => {
|
|
|
56
60
|
<Avatar
|
|
57
61
|
imageUrl={avatarUrl}
|
|
58
62
|
name={avatarName}
|
|
59
|
-
size="
|
|
63
|
+
size="xs"
|
|
60
64
|
status={avatarStatus}
|
|
61
65
|
/>
|
|
62
66
|
</If>
|
|
63
67
|
<div className="content_wrapper">
|
|
64
|
-
<
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
68
|
+
<Flex
|
|
69
|
+
justify={alignTimestamp === 'left' ? 'none' : 'between'}
|
|
70
|
+
orientation="row"
|
|
71
|
+
>
|
|
72
|
+
<If condition={label}>
|
|
73
|
+
<Title
|
|
74
|
+
className="message_title"
|
|
75
|
+
size={4}
|
|
76
|
+
text={label}
|
|
77
|
+
/>
|
|
78
|
+
</If>
|
|
79
|
+
<Timestamp
|
|
80
|
+
className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
|
|
81
|
+
text={timestamp}
|
|
82
|
+
/>
|
|
83
|
+
<If condition={timestampObject}>
|
|
84
|
+
<Timestamp
|
|
85
|
+
className={`pull-${alignTimestamp} message_timestamp`}
|
|
86
|
+
timestamp={timestampObject}
|
|
87
|
+
/>
|
|
88
|
+
</If>
|
|
89
|
+
</Flex>
|
|
90
|
+
<Body
|
|
91
|
+
className="pb_message_body"
|
|
92
|
+
text={message}
|
|
93
|
+
/>
|
|
71
94
|
</div>
|
|
72
95
|
</div>
|
|
73
96
|
)
|
|
@@ -3,22 +3,48 @@
|
|
|
3
3
|
@mixin pb_message {
|
|
4
4
|
display: flex;
|
|
5
5
|
justify-content: flex-start;
|
|
6
|
-
align-items: center;
|
|
7
6
|
|
|
8
7
|
.content_wrapper {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
width: 100%;
|
|
9
|
+
|
|
10
|
+
.pull-left {
|
|
11
|
+
margin-left: $space-xs;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
[class^=pb_flex_] {
|
|
15
|
+
width: 100%;
|
|
16
|
+
}
|
|
13
17
|
|
|
14
18
|
.message_text {
|
|
15
19
|
margin: 0 0 $space-xs/2;
|
|
16
20
|
}
|
|
21
|
+
|
|
22
|
+
.message_title {
|
|
23
|
+
font-size: $font_small;
|
|
24
|
+
}
|
|
17
25
|
}
|
|
18
26
|
|
|
19
|
-
&[class*=_avatar]
|
|
27
|
+
&[class*=_avatar] {
|
|
20
28
|
.content_wrapper {
|
|
21
|
-
margin-left: $space-
|
|
29
|
+
margin-left: $space-xs;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.pb_message_body {
|
|
34
|
+
font-size: 15px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.message_timestamp {
|
|
38
|
+
display: none;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&:hover {
|
|
42
|
+
.message_timestamp {
|
|
43
|
+
display: block;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.message_humanized_time {
|
|
47
|
+
display: none;
|
|
22
48
|
}
|
|
23
49
|
}
|
|
24
50
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<%= pb_rails("message", props: {
|
|
2
|
-
label: "
|
|
2
|
+
label: "Anna Black",
|
|
3
3
|
message: "How can we assist you today?",
|
|
4
4
|
timestamp: "20 seconds ago",
|
|
5
5
|
avatar_name: "Mike Bishop",
|
|
@@ -10,27 +10,20 @@
|
|
|
10
10
|
<br><br>
|
|
11
11
|
|
|
12
12
|
<%= pb_rails("message", props: {
|
|
13
|
-
label: "
|
|
13
|
+
label: "Patrick Welch",
|
|
14
14
|
message: "We'll escalate this issue to a Senior Support agent.",
|
|
15
15
|
timestamp: "9 minutes ago",
|
|
16
|
-
avatar_name:"Wade Winningham",
|
|
17
|
-
avatar_url: "https://randomuser.me/api/portraits/men/14.jpg"
|
|
16
|
+
avatar_name: "Wade Winningham",
|
|
17
|
+
avatar_url: "https://randomuser.me/api/portraits/men/14.jpg",
|
|
18
|
+
align_timestamp: "left"
|
|
18
19
|
}) %>
|
|
19
20
|
|
|
20
21
|
<br><br>
|
|
21
22
|
|
|
22
23
|
<%= pb_rails("message", props: {
|
|
23
|
-
|
|
24
|
-
timestamp: "4 hours ago",
|
|
25
|
-
avatar_name: "Lisa Thompson",
|
|
26
|
-
avatar_url: "https://randomuser.me/api/portraits/women/39.jpg"
|
|
27
|
-
}) %>
|
|
28
|
-
|
|
29
|
-
<br><br>
|
|
30
|
-
|
|
31
|
-
<%= pb_rails("message", props: {
|
|
32
|
-
label: "Application",
|
|
24
|
+
label: "Lucille Sanchez",
|
|
33
25
|
message: "Application for Kate Smith is waiting for your approval",
|
|
26
|
+
timestamp: "4 hours ago",
|
|
34
27
|
avatar_name: "Becca Jacobs",
|
|
35
28
|
avatar_url: "https://randomuser.me/api/portraits/women/50.jpg"
|
|
36
29
|
}) %>
|
|
@@ -38,7 +31,7 @@
|
|
|
38
31
|
<br><br>
|
|
39
32
|
|
|
40
33
|
<%= pb_rails("message", props: {
|
|
41
|
-
label: "
|
|
34
|
+
label: "Beverly Reyes",
|
|
42
35
|
message: "We're so sorry you had a bad experience!",
|
|
43
36
|
timestamp: "2 days ago",
|
|
44
37
|
avatar_name: "Tim Wenhold"
|
|
@@ -47,7 +40,16 @@
|
|
|
47
40
|
<br><br>
|
|
48
41
|
|
|
49
42
|
<%= pb_rails("message", props: {
|
|
50
|
-
label: "
|
|
43
|
+
label: "Keith Craig",
|
|
51
44
|
message: "Please hold for one moment, I'll check with my manager.",
|
|
52
45
|
timestamp: "2 days ago"
|
|
53
46
|
}) %>
|
|
47
|
+
|
|
48
|
+
<br><br>
|
|
49
|
+
|
|
50
|
+
<%= pb_rails("message", props: {
|
|
51
|
+
label: "",
|
|
52
|
+
message: "We're so sorry you had a bad experience!",
|
|
53
|
+
timestamp: "2 days ago",
|
|
54
|
+
avatar_name: "Tim Wenhold"
|
|
55
|
+
}) %>
|
|
@@ -8,7 +8,7 @@ const MessageDefault = (props) => {
|
|
|
8
8
|
avatarName="Mike Bishop"
|
|
9
9
|
avatarStatus="online"
|
|
10
10
|
avatarUrl="https://randomuser.me/api/portraits/men/50.jpg"
|
|
11
|
-
label="
|
|
11
|
+
label="Anna Black"
|
|
12
12
|
message="How can we assist you today?"
|
|
13
13
|
timestamp="20 seconds ago"
|
|
14
14
|
{...props}
|
|
@@ -18,9 +18,10 @@ const MessageDefault = (props) => {
|
|
|
18
18
|
<br />
|
|
19
19
|
|
|
20
20
|
<Message
|
|
21
|
+
alignTimestamp="left"
|
|
21
22
|
avatarName="Wade Winningham"
|
|
22
23
|
avatarUrl="https://randomuser.me/api/portraits/men/14.jpg"
|
|
23
|
-
label="
|
|
24
|
+
label="Patrick Welch"
|
|
24
25
|
message="We will escalate this issue to a Senior Support agent."
|
|
25
26
|
timestamp="9 minutes ago"
|
|
26
27
|
{...props}
|
|
@@ -29,21 +30,10 @@ const MessageDefault = (props) => {
|
|
|
29
30
|
<br />
|
|
30
31
|
<br />
|
|
31
32
|
|
|
32
|
-
<Message
|
|
33
|
-
avatarName="Lisa Thompson"
|
|
34
|
-
avatarUrl="https://randomuser.me/api/portraits/women/39.jpg"
|
|
35
|
-
message="To process your order, I will need your full name."
|
|
36
|
-
timestamp="4 hours ago"
|
|
37
|
-
{...props}
|
|
38
|
-
/>
|
|
39
|
-
|
|
40
|
-
<br />
|
|
41
|
-
<br />
|
|
42
|
-
|
|
43
33
|
<Message
|
|
44
34
|
avatarName="Becca Jacobs"
|
|
45
35
|
avatarUrl="https://randomuser.me/api/portraits/women/50.jpg"
|
|
46
|
-
label="
|
|
36
|
+
label="Lucille Sanchez"
|
|
47
37
|
message="Application for Kate Smith is waiting for your approval"
|
|
48
38
|
timestamp="2 days ago"
|
|
49
39
|
{...props}
|
|
@@ -54,7 +44,7 @@ const MessageDefault = (props) => {
|
|
|
54
44
|
|
|
55
45
|
<Message
|
|
56
46
|
avatarName="Timothy Wenhold"
|
|
57
|
-
label="
|
|
47
|
+
label="Beverly Reyes"
|
|
58
48
|
message="We are so sorry you had a bad experience!"
|
|
59
49
|
timestamp="2 days ago"
|
|
60
50
|
{...props}
|
|
@@ -64,7 +54,7 @@ const MessageDefault = (props) => {
|
|
|
64
54
|
<br />
|
|
65
55
|
|
|
66
56
|
<Message
|
|
67
|
-
label="
|
|
57
|
+
label="Keith Craig"
|
|
68
58
|
message="Please hold for one moment, I will check with my manager."
|
|
69
59
|
timestamp="2 days ago"
|
|
70
60
|
{...props}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<%= pb_rails("message", props: {
|
|
2
|
+
label: "Anna Black",
|
|
3
|
+
message: "Hover over me to check out the real time I was made!",
|
|
4
|
+
timestamp: "4 hours ago",
|
|
5
|
+
timestamp_object: DateTime.current,
|
|
6
|
+
avatar_name: "Lisa Thompson",
|
|
7
|
+
avatar_url: "https://randomuser.me/api/portraits/women/39.jpg"
|
|
8
|
+
}) %>
|
|
9
|
+
<br><br>
|
|
10
|
+
<%= pb_rails("message", props: {
|
|
11
|
+
label: "Becca Jacobs",
|
|
12
|
+
message: "Application for Kate Smith is waiting for your approval",
|
|
13
|
+
timestamp: "12.20p",
|
|
14
|
+
align_timestamp: "left",
|
|
15
|
+
timestamp_object: DateTime.current,
|
|
16
|
+
avatar_name: "Lisa Thompson",
|
|
17
|
+
avatar_url: "https://randomuser.me/api/portraits/women/39.jpg"
|
|
18
|
+
}) %>
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Message } from '../../'
|
|
3
|
+
|
|
4
|
+
const MessageTimestamp = (props) => {
|
|
5
|
+
return (
|
|
6
|
+
<>
|
|
7
|
+
<Message
|
|
8
|
+
avatarName="Wade Winningham"
|
|
9
|
+
avatarUrl="https://randomuser.me/api/portraits/men/14.jpg"
|
|
10
|
+
label="Anna Black"
|
|
11
|
+
message="We will escalate this issue to a Senior Support agent."
|
|
12
|
+
timestamp="9 minutes ago"
|
|
13
|
+
timestampObject={new Date}
|
|
14
|
+
{...props}
|
|
15
|
+
/>
|
|
16
|
+
<br />
|
|
17
|
+
<br />
|
|
18
|
+
<Message
|
|
19
|
+
alignTimestamp="left"
|
|
20
|
+
avatarName="Wade Winningham"
|
|
21
|
+
avatarUrl="https://randomuser.me/api/portraits/men/14.jpg"
|
|
22
|
+
label="Becca Jacobs"
|
|
23
|
+
message="Application for Kate Smith is waiting for your approval"
|
|
24
|
+
timestamp="12.20p"
|
|
25
|
+
timestampObject={new Date}
|
|
26
|
+
{...props}
|
|
27
|
+
/>
|
|
28
|
+
</>
|
|
29
|
+
)
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export default MessageTimestamp
|
|
@@ -6,20 +6,35 @@
|
|
|
6
6
|
<% if object.valid? %>
|
|
7
7
|
<%= pb_rails("avatar", props: {
|
|
8
8
|
name: object.avatar_name,
|
|
9
|
-
size: "
|
|
9
|
+
size: "xs",
|
|
10
10
|
image_url: object.avatar_url,
|
|
11
11
|
status: object.avatar_status
|
|
12
12
|
}) %>
|
|
13
13
|
<% end %>
|
|
14
14
|
<div class="content_wrapper">
|
|
15
|
-
<%= pb_rails("
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
<%= pb_rails("flex", props: { orientation: "row", justify: object.align_timestamp == "left" ? "none" : "between" }) do %>
|
|
16
|
+
<% if object.label.present? %>
|
|
17
|
+
<%= pb_rails("title", props: {
|
|
18
|
+
size: 4,
|
|
19
|
+
text: object.label,
|
|
20
|
+
classname: "message_title"
|
|
21
|
+
}) %>
|
|
22
|
+
<% end %>
|
|
23
|
+
|
|
24
|
+
<%= pb_rails("timestamp", props: {
|
|
25
|
+
text: object.timestamp,
|
|
26
|
+
classname: "pull-#{object.align_timestamp} #{object.timestamp_object.present? ? 'message_humanized_time' : nil}"
|
|
27
|
+
}) %>
|
|
28
|
+
<% if object.timestamp_object.present? %>
|
|
29
|
+
<%= pb_rails("timestamp", props: {
|
|
30
|
+
timestamp: object.timestamp_object,
|
|
31
|
+
classname: "pull-#{object.align_timestamp} message_timestamp"
|
|
32
|
+
}) %>
|
|
33
|
+
<% end %>
|
|
34
|
+
<% end %>
|
|
18
35
|
<%= pb_rails("body", props: {
|
|
19
|
-
text: object.message
|
|
20
|
-
|
|
21
|
-
<%= pb_rails("timestamp", props: {
|
|
22
|
-
text: object.timestamp
|
|
36
|
+
text: object.message,
|
|
37
|
+
classname: "pb_message_body"
|
|
23
38
|
}) %>
|
|
24
39
|
</div>
|
|
25
40
|
<% end %>
|