playbook_ui 9.18.0.flow.bin.alpha → 9.18.0

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.
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