playbook_ui 9.17.0 → 9.18.0.flow.bin.alpha

Sign up to get free protection for your applications and to get access to all the features.
Files changed (17) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx +2 -1
  3. data/app/pb_kits/playbook/pb_dialog/_dialog.jsx +3 -0
  4. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +2 -0
  5. data/app/pb_kits/playbook/pb_message/_message.jsx +32 -9
  6. data/app/pb_kits/playbook/pb_message/_message_mixins.scss +33 -7
  7. data/app/pb_kits/playbook/pb_message/docs/_message_default.html.erb +18 -16
  8. data/app/pb_kits/playbook/pb_message/docs/_message_default.jsx +6 -16
  9. data/app/pb_kits/playbook/pb_message/docs/_message_timestamp.html.erb +18 -0
  10. data/app/pb_kits/playbook/pb_message/docs/_message_timestamp.jsx +32 -0
  11. data/app/pb_kits/playbook/pb_message/docs/example.yml +6 -4
  12. data/app/pb_kits/playbook/pb_message/docs/index.js +1 -0
  13. data/app/pb_kits/playbook/pb_message/message.html.erb +23 -8
  14. data/app/pb_kits/playbook/pb_message/message.rb +2 -0
  15. data/app/pb_kits/playbook/pb_passphrase/_passphrase.jsx +4 -1
  16. data/lib/playbook/version.rb +2 -2
  17. metadata +7 -6
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 910e4092e8a35d776f1c8aaed3d3affffcbccf5482fa1dd25b0bbeccb8410ca6
4
- data.tar.gz: 57aa2a44fd3a8c8fc691774ddf9e484dd461db2386fbdf05e049a699c9186f87
3
+ metadata.gz: 438b67100b8d040a3fefbf457fa99bf4f153d9cc0c7af51f9dee8f3fb3f2acc8
4
+ data.tar.gz: 0ff43b2d3095ad3bc250b282a5bd9833725c019fc7ea669b1849daeb7b86415f
5
5
  SHA512:
6
- metadata.gz: 8737b69eda6c1ed2abc12765f42e69ce15c184ae118726539f3dae3921fde3397dc1d8db8f2f2b5ed2c479483008189546cf78ccb6e72763c3c2d80b184ca2b4
7
- data.tar.gz: 42feb68b57bd9e3f3752062d277365f33b5bbbc1757e042dfffa8d5c9b70bab3fde1d2649e3ba70a1122201dfa5c61c194a6f97fa592c84e573ff75f921a160d
6
+ metadata.gz: 52d77e10bd9ff397a09c0519a551721769758980fc3269a6e55a1cac477892d52314890c25c8fd087cfd0393b1402511f4808ae2c27664a1ff1bf7377d2d5a2f
7
+ data.tar.gz: f409fd2c09c690f54649162843f19d471aab82e1d99a3b779d7ffeed944b4887315e0cfbfece862e4fa53e0f4eda42b99049939d65c061843973f75ca37b903e
data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx CHANGED
@@ -29,7 +29,8 @@ const DateTimeDefault = (props) => (
29
29
  <br />
30
30
 
31
31
  <DateTime
32
- datetime={new Date('2020-12-31 14:24:09 -0500')}
32
+ datetime={new Date('2020/12/31 14:24:09 -0500')}
33
+ timeZone="Asia/Tokyo"
33
34
  {...props}
34
35
  />
35
36
  </div>
data/app/pb_kits/playbook/pb_dialog/_dialog.jsx CHANGED
@@ -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}>
data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx CHANGED
@@ -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"
data/app/pb_kits/playbook/pb_message/_message.jsx CHANGED
@@ -1,7 +1,7 @@
1
1
  /* @flow */
2
2
 
3
3
  import React from 'react'
4
- import { Avatar, Body, Caption } from '../'
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="sm"
63
+ size="xs"
60
64
  status={avatarStatus}
61
65
  />
62
66
  </If>
63
67
  <div className="content_wrapper">
64
- <If condition={label}>
65
- <Caption>{label}</Caption>
66
- </If>
67
- <Body>{message}</Body>
68
- <If condition={timestamp}>
69
- <Caption size="xs">{timestamp}</Caption>
70
- </If>
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
  )
data/app/pb_kits/playbook/pb_message/_message_mixins.scss CHANGED
@@ -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
- display: flex;
10
- justify-content: center;
11
- align-items: flex-start;
12
- flex-direction: column;
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-sm;
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
  }
data/app/pb_kits/playbook/pb_message/docs/_message_default.html.erb CHANGED
@@ -1,5 +1,5 @@
1
1
  <%= pb_rails("message", props: {
2
- label: "Message",
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: "Support",
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
- message: "To processs your order, I'll need your full name.",
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: "Complaint",
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: "Support",
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
+ }) %>
data/app/pb_kits/playbook/pb_message/docs/_message_default.jsx CHANGED
@@ -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="Message"
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="Support"
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="Application"
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="Complaint"
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="Support"
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}
data/app/pb_kits/playbook/pb_message/docs/_message_timestamp.html.erb ADDED
@@ -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
+ }) %>
data/app/pb_kits/playbook/pb_message/docs/_message_timestamp.jsx ADDED
@@ -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
data/app/pb_kits/playbook/pb_message/docs/example.yml CHANGED
@@ -1,9 +1,11 @@
1
1
  examples:
2
-
2
+
3
3
  rails:
4
4
  - message_default: Default
5
-
6
-
5
+ - message_timestamp: With Timestamp Hover
6
+
7
+
7
8
  react:
8
9
  - message_default: Default
9
-
10
+ - message_timestamp: With Timestamp Hover
11
+
data/app/pb_kits/playbook/pb_message/docs/index.js CHANGED
@@ -1 +1,2 @@
1
1
  export { default as MessageDefault } from './_message_default.jsx'
2
+ export { default as MessageTimestamp } from './_message_timestamp.jsx'
data/app/pb_kits/playbook/pb_message/message.html.erb CHANGED
@@ -6,20 +6,35 @@
6
6
  <% if object.valid? %>
7
7
  <%= pb_rails("avatar", props: {
8
8
  name: object.avatar_name,
9
- size: "sm",
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("caption", props: {
16
- text: object.label
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 %>
data/app/pb_kits/playbook/pb_message/message.rb CHANGED
@@ -9,6 +9,8 @@ module Playbook
9
9
  prop :label
10
10
  prop :message
11
11
  prop :timestamp
12
+ prop :timestamp_object
13
+ prop :align_timestamp, type: Playbook::Props::Enum, values: %w[left right], default: "right"
12
14
 
13
15
  def classname
14
16
  generate_classname("pb_message_kit", avatar_class)
data/app/pb_kits/playbook/pb_passphrase/_passphrase.jsx CHANGED
@@ -74,7 +74,10 @@ const Passphrase = (props: PassphraseProps) => {
74
74
  }
75
75
 
76
76
  const [showPassphrase, setShowPassphrase] = useState(false)
77
- const toggleShowPassphrase = () => setShowPassphrase(!showPassphrase)
77
+ const toggleShowPassphrase = (e) => {
78
+ e.preventDefault()
79
+ setShowPassphrase(!showPassphrase)
80
+ }
78
81
 
79
82
  const classes = classnames(buildCss('pb_passphrase'), globalProps(props), className)
80
83
 
data/lib/playbook/version.rb CHANGED
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "9.16.0"
5
- VERSION = "9.17.0"
4
+ PREVIOUS_VERSION = "9.17.0"
5
+ VERSION = "9.18.0.flow.bin.alpha"
6
6
  end
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: 9.17.0
4
+ version: 9.18.0.flow.bin.alpha
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: 2021-06-03 00:00:00.000000000 Z
12
+ date: 2021-06-15 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -1325,6 +1325,8 @@ files:
1325
1325
  - app/pb_kits/playbook/pb_message/docs/_message_default.html.erb
1326
1326
  - app/pb_kits/playbook/pb_message/docs/_message_default.jsx
1327
1327
  - app/pb_kits/playbook/pb_message/docs/_message_default.md
1328
+ - app/pb_kits/playbook/pb_message/docs/_message_timestamp.html.erb
1329
+ - app/pb_kits/playbook/pb_message/docs/_message_timestamp.jsx
1328
1330
  - app/pb_kits/playbook/pb_message/docs/example.yml
1329
1331
  - app/pb_kits/playbook/pb_message/docs/index.js
1330
1332
  - app/pb_kits/playbook/pb_message/message.html.erb
@@ -2170,12 +2172,11 @@ required_ruby_version: !ruby/object:Gem::Requirement
2170
2172
  version: '0'
2171
2173
  required_rubygems_version: !ruby/object:Gem::Requirement
2172
2174
  requirements:
2173
- - - ">="
2175
+ - - ">"
2174
2176
  - !ruby/object:Gem::Version
2175
- version: '0'
2177
+ version: 1.3.1
2176
2178
  requirements: []
2177
- rubyforge_project:
2178
- rubygems_version: 2.7.3
2179
+ rubygems_version: 3.1.4
2179
2180
  signing_key:
2180
2181
  specification_version: 4
2181
2182
  summary: Playbook Design System