playbook_ui 9.17.0 → 9.18.0.flow.bin.alpha

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