playbook_ui 9.17.0.pre.decouple.website2 → 9.19.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (55) hide show
  1. checksums.yaml +4 -4
  2. data/Rakefile +9 -5
  3. data/app/assets/images/clark.jpg +0 -0
  4. data/app/assets/images/full_page_samples.svg +7 -0
  5. data/app/assets/images/giant.jpg +0 -0
  6. data/app/assets/images/github-brands.svg +1 -0
  7. data/app/assets/images/landing-background.svg +36 -0
  8. data/app/assets/images/landing-image.svg +203 -0
  9. data/app/assets/images/pb-caret.svg +1 -0
  10. data/app/assets/images/pb-check.svg +11 -0
  11. data/app/assets/images/pb-logo.svg +28 -0
  12. data/app/assets/images/pb-white-logo.svg +15 -0
  13. data/app/assets/images/pb.logo.svg +28 -0
  14. data/app/pb_kits/playbook/index.js +97 -97
  15. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss +1 -2
  16. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx +2 -1
  17. data/app/pb_kits/playbook/pb_dialog/_dialog.jsx +3 -0
  18. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +2 -0
  19. data/app/pb_kits/playbook/pb_enhanced_element/index.js +1 -2
  20. data/app/pb_kits/playbook/pb_message/_message.jsx +32 -9
  21. data/app/pb_kits/playbook/pb_message/_message_mixins.scss +33 -7
  22. data/app/pb_kits/playbook/pb_message/docs/_message_default.html.erb +18 -16
  23. data/app/pb_kits/playbook/pb_message/docs/_message_default.jsx +6 -16
  24. data/app/pb_kits/playbook/pb_message/docs/_message_timestamp.html.erb +18 -0
  25. data/app/pb_kits/playbook/pb_message/docs/_message_timestamp.jsx +32 -0
  26. data/app/pb_kits/playbook/pb_message/docs/example.yml +6 -4
  27. data/app/pb_kits/playbook/pb_message/docs/index.js +1 -0
  28. data/app/pb_kits/playbook/pb_message/message.html.erb +23 -8
  29. data/app/pb_kits/playbook/pb_message/message.rb +2 -0
  30. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +2 -2
  31. data/app/pb_kits/playbook/pb_passphrase/_passphrase.jsx +4 -1
  32. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx +8 -10
  33. data/app/pb_kits/playbook/pb_select/_select.scss +1 -1
  34. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +1 -1
  35. data/app/pb_kits/playbook/pb_textarea/_textarea.scss +3 -3
  36. data/app/pb_kits/playbook/pb_title/_title.scss +1 -1
  37. data/app/pb_kits/playbook/pb_title/_title_mixin.scss +40 -1
  38. data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +16 -14
  39. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_async_createable.jsx +58 -0
  40. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
  41. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  42. data/app/pb_kits/playbook/react_rails_kits.js +13 -0
  43. data/app/pb_kits/playbook/tokens/_colors.scss +0 -4
  44. data/app/pb_kits/playbook/utilities/_colors.scss +4 -0
  45. data/app/pb_kits/playbook/utilities/accessibility.js +22 -0
  46. data/app/pb_kits/playbook/{playbook-rails.js → vendor.js} +5 -1
  47. data/lib/playbook.rb +15 -1
  48. data/lib/playbook/engine.rb +21 -11
  49. data/lib/playbook/props/nested_props.rb +1 -1
  50. data/lib/playbook/version.rb +2 -2
  51. metadata +138 -20
  52. data/app/pb_kits/playbook/_reset.scss +0 -42
  53. data/app/pb_kits/playbook/playbook-doc.js +0 -195
  54. data/app/pb_kits/playbook/playbook-rails-react-bindings.js +0 -35
  55. data/app/pb_kits/playbook/tokens/_titles.scss +0 -38
data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss CHANGED
@@ -1,5 +1,4 @@
1
- @import "../../tokens/titles";
2
-
1
+ @import "../../pb_title/title_mixin";
3
2
  // Header Styles
4
3
  .flatpickr-months {
5
4
  border-bottom: solid 1px $border_light;
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_enhanced_element/index.js CHANGED
@@ -26,12 +26,11 @@ export default class PbEnhancedElement {
26
26
  }
27
27
 
28
28
  static addMatch(element) {
29
- if (element._pbEnhanced || this.elements.has(element)) return
29
+ if (this.elements.has(element)) return
30
30
 
31
31
  const enhansedElement = new this(element)
32
32
  enhansedElement.connect()
33
33
  this.elements.set(element, enhansedElement)
34
- element._pbEnhanced = enhansedElement
35
34
  }
36
35
 
37
36
  static removeMatch(element) {
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 %>