playbook_ui 9.18.0.flow.bin.alpha → 9.18.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (13) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_message/_message.jsx +9 -32
  3. data/app/pb_kits/playbook/pb_message/_message_mixins.scss +7 -33
  4. data/app/pb_kits/playbook/pb_message/docs/_message_default.html.erb +16 -18
  5. data/app/pb_kits/playbook/pb_message/docs/_message_default.jsx +16 -6
  6. data/app/pb_kits/playbook/pb_message/docs/example.yml +4 -6
  7. data/app/pb_kits/playbook/pb_message/docs/index.js +0 -1
  8. data/app/pb_kits/playbook/pb_message/message.html.erb +8 -23
  9. data/app/pb_kits/playbook/pb_message/message.rb +0 -2
  10. data/lib/playbook/version.rb +1 -1
  11. metadata +6 -7
  12. data/app/pb_kits/playbook/pb_message/docs/_message_timestamp.html.erb +0 -18
  13. data/app/pb_kits/playbook/pb_message/docs/_message_timestamp.jsx +0 -32
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 438b67100b8d040a3fefbf457fa99bf4f153d9cc0c7af51f9dee8f3fb3f2acc8
4
- data.tar.gz: 0ff43b2d3095ad3bc250b282a5bd9833725c019fc7ea669b1849daeb7b86415f
3
+ metadata.gz: 2aec51c9d597b2e3a14d3b23c29737bca579d0c96dc17e7d908499f5ed97974d
4
+ data.tar.gz: 99413586f7e6242856fbe3551903c52ef8fcd31d470a7654ce4049682b56df31
5
5
  SHA512:
6
- metadata.gz: 52d77e10bd9ff397a09c0519a551721769758980fc3269a6e55a1cac477892d52314890c25c8fd087cfd0393b1402511f4808ae2c27664a1ff1bf7377d2d5a2f
7
- data.tar.gz: f409fd2c09c690f54649162843f19d471aab82e1d99a3b779d7ffeed944b4887315e0cfbfece862e4fa53e0f4eda42b99049939d65c061843973f75ca37b903e
6
+ metadata.gz: 7533b83c384e5f23ddcf8b62cdbda1c9d7a34a561eb4c840bcc31037ad01fb3b905796056039873dbb4f3d87b07bbbfeda331340e669965a9328809c977e6c64
7
+ data.tar.gz: b8ea1004e16ca5668ba4572d3d18e8b8d828b1d17572fdc31788f78b98d518b6ce7bdb9e0befb4fa0544e5d6e160da960ec450781ab117a83206656e9429e8f7
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, Flex, Timestamp, Title } from '../'
4
+ import { Avatar, Body, Caption } 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,8 +17,6 @@ type MessageProps = {
17
17
  label?: string,
18
18
  message: string,
19
19
  timestamp?: string,
20
- timestampObject?: string,
21
- alignTimestamp?: string,
22
20
  }
23
21
 
24
22
  const Message = (props: MessageProps) => {
@@ -33,8 +31,6 @@ const Message = (props: MessageProps) => {
33
31
  label,
34
32
  message,
35
33
  timestamp,
36
- timestampObject,
37
- alignTimestamp = 'right',
38
34
  } = props
39
35
  const ariaProps = buildAriaProps(aria)
40
36
  const dataProps = buildDataProps(data)
@@ -60,37 +56,18 @@ const Message = (props: MessageProps) => {
60
56
  <Avatar
61
57
  imageUrl={avatarUrl}
62
58
  name={avatarName}
63
- size="xs"
59
+ size="sm"
64
60
  status={avatarStatus}
65
61
  />
66
62
  </If>
67
63
  <div className="content_wrapper">
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
- />
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>
94
71
  </div>
95
72
  </div>
96
73
  )
data/app/pb_kits/playbook/pb_message/_message_mixins.scss CHANGED
@@ -3,48 +3,22 @@
3
3
  @mixin pb_message {
4
4
  display: flex;
5
5
  justify-content: flex-start;
6
+ align-items: center;
6
7
 
7
8
  .content_wrapper {
8
- width: 100%;
9
-
10
- .pull-left {
11
- margin-left: $space-xs;
12
- }
13
-
14
- [class^=pb_flex_] {
15
- width: 100%;
16
- }
9
+ display: flex;
10
+ justify-content: center;
11
+ align-items: flex-start;
12
+ flex-direction: column;
17
13
 
18
14
  .message_text {
19
15
  margin: 0 0 $space-xs/2;
20
16
  }
21
-
22
- .message_title {
23
- font-size: $font_small;
24
- }
25
17
  }
26
18
 
27
- &[class*=_avatar] {
19
+ &[class*=_avatar] {
28
20
  .content_wrapper {
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;
21
+ margin-left: $space-sm;
48
22
  }
49
23
  }
50
24
  }
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: "Anna Black",
2
+ label: "Message",
3
3
  message: "How can we assist you today?",
4
4
  timestamp: "20 seconds ago",
5
5
  avatar_name: "Mike Bishop",
@@ -10,20 +10,27 @@
10
10
  <br><br>
11
11
 
12
12
  <%= pb_rails("message", props: {
13
- label: "Patrick Welch",
13
+ label: "Support",
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",
18
- align_timestamp: "left"
16
+ avatar_name:"Wade Winningham",
17
+ avatar_url: "https://randomuser.me/api/portraits/men/14.jpg"
19
18
  }) %>
20
19
 
21
20
  <br><br>
22
21
 
23
22
  <%= pb_rails("message", props: {
24
- label: "Lucille Sanchez",
25
- message: "Application for Kate Smith is waiting for your approval",
23
+ message: "To processs your order, I'll need your full name.",
26
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",
33
+ message: "Application for Kate Smith is waiting for your approval",
27
34
  avatar_name: "Becca Jacobs",
28
35
  avatar_url: "https://randomuser.me/api/portraits/women/50.jpg"
29
36
  }) %>
@@ -31,7 +38,7 @@
31
38
  <br><br>
32
39
 
33
40
  <%= pb_rails("message", props: {
34
- label: "Beverly Reyes",
41
+ label: "Complaint",
35
42
  message: "We're so sorry you had a bad experience!",
36
43
  timestamp: "2 days ago",
37
44
  avatar_name: "Tim Wenhold"
@@ -40,16 +47,7 @@
40
47
  <br><br>
41
48
 
42
49
  <%= pb_rails("message", props: {
43
- label: "Keith Craig",
50
+ label: "Support",
44
51
  message: "Please hold for one moment, I'll check with my manager.",
45
52
  timestamp: "2 days ago"
46
53
  }) %>
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="Anna Black"
11
+ label="Message"
12
12
  message="How can we assist you today?"
13
13
  timestamp="20 seconds ago"
14
14
  {...props}
@@ -18,10 +18,9 @@ const MessageDefault = (props) => {
18
18
  <br />
19
19
 
20
20
  <Message
21
- alignTimestamp="left"
22
21
  avatarName="Wade Winningham"
23
22
  avatarUrl="https://randomuser.me/api/portraits/men/14.jpg"
24
- label="Patrick Welch"
23
+ label="Support"
25
24
  message="We will escalate this issue to a Senior Support agent."
26
25
  timestamp="9 minutes ago"
27
26
  {...props}
@@ -30,10 +29,21 @@ const MessageDefault = (props) => {
30
29
  <br />
31
30
  <br />
32
31
 
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
+
33
43
  <Message
34
44
  avatarName="Becca Jacobs"
35
45
  avatarUrl="https://randomuser.me/api/portraits/women/50.jpg"
36
- label="Lucille Sanchez"
46
+ label="Application"
37
47
  message="Application for Kate Smith is waiting for your approval"
38
48
  timestamp="2 days ago"
39
49
  {...props}
@@ -44,7 +54,7 @@ const MessageDefault = (props) => {
44
54
 
45
55
  <Message
46
56
  avatarName="Timothy Wenhold"
47
- label="Beverly Reyes"
57
+ label="Complaint"
48
58
  message="We are so sorry you had a bad experience!"
49
59
  timestamp="2 days ago"
50
60
  {...props}
@@ -54,7 +64,7 @@ const MessageDefault = (props) => {
54
64
  <br />
55
65
 
56
66
  <Message
57
- label="Keith Craig"
67
+ label="Support"
58
68
  message="Please hold for one moment, I will check with my manager."
59
69
  timestamp="2 days ago"
60
70
  {...props}
data/app/pb_kits/playbook/pb_message/docs/example.yml CHANGED
@@ -1,11 +1,9 @@
1
1
  examples:
2
-
2
+
3
3
  rails:
4
4
  - message_default: Default
5
- - message_timestamp: With Timestamp Hover
6
-
7
-
5
+
6
+
8
7
  react:
9
8
  - message_default: Default
10
- - message_timestamp: With Timestamp Hover
11
-
9
+
data/app/pb_kits/playbook/pb_message/docs/index.js CHANGED
@@ -1,2 +1 @@
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,35 +6,20 @@
6
6
  <% if object.valid? %>
7
7
  <%= pb_rails("avatar", props: {
8
8
  name: object.avatar_name,
9
- size: "xs",
9
+ size: "sm",
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("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 %>
15
+ <%= pb_rails("caption", props: {
16
+ text: object.label
17
+ }) %>
35
18
  <%= pb_rails("body", props: {
36
- text: object.message,
37
- classname: "pb_message_body"
19
+ text: object.message
20
+ }) %>
21
+ <%= pb_rails("timestamp", props: {
22
+ text: object.timestamp
38
23
  }) %>
39
24
  </div>
40
25
  <% end %>
data/app/pb_kits/playbook/pb_message/message.rb CHANGED
@@ -9,8 +9,6 @@ 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"
14
12
 
15
13
  def classname
16
14
  generate_classname("pb_message_kit", avatar_class)
data/lib/playbook/version.rb CHANGED
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "9.17.0"
5
- VERSION = "9.18.0.flow.bin.alpha"
5
+ VERSION = "9.18.0"
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.18.0.flow.bin.alpha
4
+ version: 9.18.0
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-15 00:00:00.000000000 Z
12
+ date: 2021-06-10 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -1325,8 +1325,6 @@ 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
1330
1328
  - app/pb_kits/playbook/pb_message/docs/example.yml
1331
1329
  - app/pb_kits/playbook/pb_message/docs/index.js
1332
1330
  - app/pb_kits/playbook/pb_message/message.html.erb
@@ -2172,11 +2170,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
2172
2170
  version: '0'
2173
2171
  required_rubygems_version: !ruby/object:Gem::Requirement
2174
2172
  requirements:
2175
- - - ">"
2173
+ - - ">="
2176
2174
  - !ruby/object:Gem::Version
2177
- version: 1.3.1
2175
+ version: '0'
2178
2176
  requirements: []
2179
- rubygems_version: 3.1.4
2177
+ rubyforge_project:
2178
+ rubygems_version: 2.7.3
2180
2179
  signing_key:
2181
2180
  specification_version: 4
2182
2181
  summary: Playbook Design System
data/app/pb_kits/playbook/pb_message/docs/_message_timestamp.html.erb DELETED
@@ -1,18 +0,0 @@
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 DELETED
@@ -1,32 +0,0 @@
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