playbook_ui 11.10.0 → 11.11.0.pre.alpha.dialog2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (32) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +1 -0
  3. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +30 -1
  4. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +28 -0
  5. data/app/pb_kits/playbook/pb_dialog/dialog.rb +7 -35
  6. data/app/pb_kits/playbook/pb_dialog/dialogHelper.js +21 -0
  7. data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb +7 -0
  8. data/app/pb_kits/playbook/pb_dialog/dialog_body.rb +13 -0
  9. data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +13 -0
  10. data/app/pb_kits/playbook/pb_dialog/dialog_footer.rb +16 -0
  11. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +13 -0
  12. data/app/pb_kits/playbook/pb_dialog/dialog_header.rb +3 -20
  13. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +12 -0
  14. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb +11 -0
  15. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.html.erb +29 -0
  16. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +3 -0
  17. data/app/pb_kits/playbook/pb_user/_user.tsx +15 -1
  18. data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_rails.html.erb +36 -0
  19. data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_rails.md +1 -0
  20. data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.jsx +56 -0
  21. data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.md +1 -0
  22. data/app/pb_kits/playbook/pb_user/docs/_user_subtitle.html.erb +23 -0
  23. data/app/pb_kits/playbook/pb_user/docs/_user_subtitle.jsx +33 -0
  24. data/app/pb_kits/playbook/pb_user/docs/example.yml +4 -3
  25. data/app/pb_kits/playbook/pb_user/docs/index.js +2 -0
  26. data/app/pb_kits/playbook/pb_user/user.html.erb +10 -2
  27. data/app/pb_kits/playbook/pb_user/user.rb +1 -0
  28. data/app/pb_kits/playbook/pb_user/user.test.js +28 -0
  29. data/app/pb_kits/playbook/playbook-rails.js +4 -0
  30. data/lib/playbook/version.rb +2 -2
  31. metadata +21 -5
  32. data/app/pb_kits/playbook/pb_dialog/_dialog.html.erb +0 -10
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 0cae07073769e635a2939918a0073c3b64119f9ded3a1390688945395ecbd9df
4
- data.tar.gz: 38d8898737006ea27c5bcf4c2b65734dd1df5ef004a351638dc00015ca6bcbaa
3
+ metadata.gz: 6aefa801028f30170ea5d693cc2062bb8898282475fcc32c5437ac6e23a7a9cb
4
+ data.tar.gz: 8460114464053ed808a1c32d8d11a0adb458bddf5e5c12e35c0bf1b5b5db4408
5
5
  SHA512:
6
- metadata.gz: 787832d4132fb8a9373f06a684645f0945998476c5d5b2ab44718b0078eae552995cfe1d550a758a57f79d9a03267ffafee6882a5330fdf016d5c3a16f6a6ae2
7
- data.tar.gz: a675526b2eec32a03c1f2409919a30deba79dfcd8bf3c06970c7153d35e4d37db4f665b0d66e05dc117e1937b2cbbb7a68b17b1e67f8555b7926c4c4c7cc7107
6
+ metadata.gz: 0e44b3ebdbe70354baf021f710b215b757ad39c179d3c7548909f51af6387f0a95adf4058c058afe4247e696d32a692a9b417f780992abfa3cbdb9433bcbaf54
7
+ data.tar.gz: 92fcfdd0bf79e370b8aabeb42a1ef3f52502d05bee52e8f7ecd62a5db02f3e555e491ce7a73e3e2704e68a73d7a42c58b6cc2abae308fdc77894bd39d1fdd91b
@@ -121,3 +121,4 @@ export { default as PbTable } from './pb_table'
121
121
  export { default as PbTextarea } from './pb_textarea'
122
122
  export { default as PbTooltip } from './pb_tooltip'
123
123
  export { default as PbTypeahead } from './pb_typeahead'
124
+ export { default as dialogHelper } from './pb_dialog/dialogHelper'
@@ -68,7 +68,7 @@
68
68
  $opacity_visible: 1;
69
69
  $opacity_hidden: 0;
70
70
 
71
- @include pb_card;
71
+ // @include pb_card;
72
72
  background-color: $white;
73
73
  box-shadow: $shadow_deepest;
74
74
  border: 0;
@@ -167,4 +167,33 @@
167
167
  }
168
168
  }
169
169
  }
170
+
171
+ .dialog-button-class {
172
+ background-color: unset;
173
+ border: none;
174
+ cursor: pointer;
175
+ }
176
+
177
+ }
178
+
179
+ .pb_dialog_wrapper_rails {
180
+ .pb_dialog_rails {
181
+ top: 0 !important;
182
+ padding: unset !important;
183
+ margin: auto;
184
+
185
+ }
186
+ dialog::backdrop {
187
+ position: fixed;
188
+ top: 0;
189
+ left: 0;
190
+ right: 0;
191
+ bottom: 0;
192
+ display: flex;
193
+ align-items: center;
194
+ justify-content: center;
195
+ background-color: rgba($bg_dark, $opacity_4);
196
+ animation-name: overlayFade;
197
+ animation-duration: 0.2s;
198
+ }
170
199
  }
@@ -0,0 +1,28 @@
1
+ <div class="pb_dialog_wrapper_rails">
2
+ <%= content_tag(:dialog,
3
+ aria: object.aria,
4
+ data: object.data,
5
+ id: object.id,
6
+ class: object.classname) do %>
7
+ <% if object.title %>
8
+ <%= pb_rails("dialog/dialog_header", props: {title: object.title, id: object.id }) %>
9
+ <% end %>
10
+ <% if object.text %>
11
+ <%= pb_rails("dialog/dialog_body", props: { text: object.text }) %>
12
+ <% end %>
13
+ <% if object.cancel_button && object.confirm_button %>
14
+ <%= pb_rails("dialog/dialog_footer", props: {
15
+ cancel_button: object.cancel_button,
16
+ confirm_button: object.confirm_button,
17
+ id: object.id
18
+ }) %>
19
+ <% end %>
20
+ <%= content %>
21
+ <% end %>
22
+ </div>
23
+
24
+ <%= javascript_tag do %>
25
+ window.addEventListener("DOMContentLoaded", () => {
26
+ dialogHelper()
27
+ })
28
+ <% end %>
@@ -2,45 +2,17 @@
2
2
 
3
3
  module Playbook
4
4
  module PbDialog
5
- class Dialog
6
- include Playbook::Props
7
-
8
- partial "pb_dialog/dialog"
9
-
10
- prop :ref
11
- prop :cancel_button
12
- prop :closeable, type: Playbook::Props::Boolean, default: true
13
- prop :confirm_button
14
- prop :oncancel
15
- prop :onchange
16
- prop :onclose
17
- prop :onconfirm
18
- prop :opened, type: Playbook::Props::Boolean, default: false
5
+ class Dialog < Playbook::KitBase
19
6
  prop :size, type: Playbook::Props::Enum,
20
- values: %w[sm md lg content],
7
+ values: %w[sm md lg xl status_size content],
21
8
  default: "md"
22
- prop :text
23
9
  prop :title
24
- prop :trigger
10
+ prop :text
11
+ prop :confirm_button
12
+ prop :cancel_button
25
13
 
26
- def dialog_options
27
- {
28
- id: id,
29
- ref: ref,
30
- trigger: trigger,
31
- className: classname,
32
- cancelButton: cancel_button,
33
- closeable: closeable,
34
- confirmButton: confirm_button,
35
- onCancel: oncancel,
36
- onChange: onchange,
37
- onClose: onclose,
38
- onConfirm: onconfirm,
39
- opened: opened,
40
- size: size,
41
- text: text,
42
- title: title,
43
- }
14
+ def classname
15
+ generate_classname("pb_dialog pb_dialog_rails pb_dialog_#{size}")
44
16
  end
45
17
  end
46
18
  end
@@ -0,0 +1,21 @@
1
+ const dialogHelper = () => {
2
+ const openTrigger = document.querySelectorAll("[data-open-dialog]");
3
+ const closeTrigger = document.querySelectorAll("[data-close-dialog]");
4
+
5
+ openTrigger.forEach((open) => {
6
+ open.addEventListener("click", () => {
7
+ var openTriggerData = open.dataset.openDialog;
8
+ if (document.getElementById(openTriggerData).open) return;
9
+ document.getElementById(openTriggerData).showModal();
10
+ });
11
+ });
12
+
13
+ closeTrigger.forEach((close) => {
14
+ close.addEventListener("click", () => {
15
+ var closeTriggerData = close.dataset.closeDialog;
16
+ document.getElementById(closeTriggerData).close();
17
+ });
18
+ });
19
+ };
20
+
21
+ export default dialogHelper;
@@ -0,0 +1,7 @@
1
+ <%= content_tag(:div,
2
+ id: object.id,
3
+ data: object.data,
4
+ class: object.classname,
5
+ aria: object.aria) do %>
6
+ <%= content.presence || object.text %>
7
+ <% end %>
@@ -0,0 +1,13 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbDialog
5
+ class DialogBody < Playbook::KitBase
6
+ prop :text
7
+
8
+ def classname
9
+ generate_classname("dialog_body p_sm")
10
+ end
11
+ end
12
+ end
13
+ end
@@ -0,0 +1,13 @@
1
+ <%= content_tag(:div,
2
+ id: object.id,
3
+ data: object.data,
4
+ aria: object.aria) do %>
5
+ <%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>
6
+ <%= pb_rails("button", props: { type: "submit", id: object.confirm_button_id }) do %>
7
+ <%= object.confirm_button %>
8
+ <% end %>
9
+ <%= pb_rails("button", props: { data: {"close-dialog": "#{object.id}" }, id: object.cancel_button_id, variant: "link"}) do %>
10
+ <%= object.cancel_button %>
11
+ <% end %>
12
+ <% end %>
13
+ <% end %>
@@ -0,0 +1,16 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbDialog
5
+ class DialogFooter < Playbook::KitBase
6
+ prop :cancel_button
7
+ prop :confirm_button
8
+ prop :confirm_button_id
9
+ prop :cancel_button_id
10
+
11
+ def classname
12
+ generate_classname("dialog_footer")
13
+ end
14
+ end
15
+ end
16
+ end
@@ -0,0 +1,13 @@
1
+ <%= content_tag(:div,
2
+ id: object.id,
3
+ data: object.data,
4
+ aria: object.aria) do %>
5
+ <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
6
+ <%= content.presence || object.title %>
7
+
8
+ <button class="dialog-button-class" data-close-dialog= <%= object.id %> >
9
+ <%= pb_rails("icon", props:{icon: "times"}) %>
10
+ </button>
11
+ <% end %>
12
+ <%= pb_rails("section_separator") %>
13
+ <% end %>
@@ -2,28 +2,11 @@
2
2
 
3
3
  module Playbook
4
4
  module PbDialog
5
- class DialogHeader
6
- include Playbook::Props
7
-
8
- partial "pb_dialog/child_kits/dialog_header"
9
-
10
- prop :closeable, type: Playbook::Props::Boolean, default: true
11
- prop :padding
12
- prop :separator, type: Playbook::Props::Boolean, default: true
13
- prop :spacing
14
- prop :text
5
+ class DialogHeader < Playbook::KitBase
15
6
  prop :title
16
7
 
17
- def dialog_header_options
18
- {
19
- id: id,
20
- closeable: closeable,
21
- padding: padding,
22
- separator: separator,
23
- spacing: spacing,
24
- text: text,
25
- title: title,
26
- }
8
+ def classname
9
+ generate_classname("dialog_header")
27
10
  end
28
11
  end
29
12
  end
@@ -0,0 +1,12 @@
1
+ <%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
2
+
3
+ <%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg" }) do %>
4
+ <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex" } ) do %>
5
+ <%= pb_rails("caption", props: { text: "This is a complex dialog" }) %>
6
+ <% end %>
7
+ <%= pb_rails("dialog/dialog_body") do %>
8
+ <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
9
+ <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
10
+ <% end %>
11
+ <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Cancel", confirm_button: "Confirm", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
12
+ <% end %>
@@ -0,0 +1,11 @@
1
+ <%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-1"} }) %>
2
+
3
+ <%= pb_rails("dialog", props: {
4
+ id:"dialog-1",
5
+ size: "sm",
6
+ title: "This is a header",
7
+ text: "This is a dialog.",
8
+ cancel_button: "Cancel",
9
+ confirm_button: "Confirm",
10
+ confirm_button_id: "confirm-button-1"
11
+ }) %>
@@ -0,0 +1,29 @@
1
+ <%= pb_rails("button", props: { text: "Small Dialog", data:{"open-dialog": "dialog-sm"} }) %>
2
+ <%= pb_rails("button", props: { text: "Medium Dialog", data:{"open-dialog": "dialog-md"} }) %>
3
+ <%= pb_rails("button", props: { text: "Large Dialog", data:{"open-dialog": "dialog-lg"} }) %>
4
+
5
+ <%= pb_rails("dialog", props: {
6
+ id:"dialog-sm",
7
+ size: "sm",
8
+ title: "This is a header",
9
+ text: "I am a small dialog",
10
+ cancel_button: "Cancel",
11
+ confirm_button: "Confirm",
12
+ }) %>
13
+
14
+
15
+ <%= pb_rails("dialog", props: {
16
+ id:"dialog-md",
17
+ size: "md",
18
+ title: "This is a header",
19
+ text: "I am a medium dialog",
20
+ cancel_button: "Cancel", confirm_button: "Confirm",
21
+ }) %>
22
+
23
+ <%= pb_rails("dialog", props: {
24
+ id:"dialog-lg", size: "lg",
25
+ title: "This is a header",
26
+ text: "I am a large dialog",
27
+ cancel_button: "Cancel",
28
+ confirm_button: "Confirm"
29
+ }) %>
@@ -1,6 +1,9 @@
1
1
  examples:
2
2
 
3
3
  rails:
4
+ - dialog_default: Simple
5
+ - dialog_compound_components: Complex
6
+ - dialog_sizes: Sizes
4
7
 
5
8
  react:
6
9
  - dialog_default: Simple
@@ -1,4 +1,3 @@
1
-
2
1
  import React from 'react'
3
2
  import classnames from 'classnames'
4
3
 
@@ -21,6 +20,7 @@ type UserProps = {
21
20
  name?: string,
22
21
  orientation?: "horiztonal" | "vertical",
23
22
  size?: "sm" | "md" | "lg",
23
+ subtitle?: string | Array<Node> | Node,
24
24
  territory?: string,
25
25
  title?: string,
26
26
  } & GlobalProps
@@ -38,6 +38,7 @@ const User = (props: UserProps) => {
38
38
  name,
39
39
  orientation = 'horizontal',
40
40
  size = 'sm',
41
+ subtitle,
41
42
  territory = '',
42
43
  title = '',
43
44
  } = props
@@ -81,6 +82,19 @@ const User = (props: UserProps) => {
81
82
  >
82
83
  {territory === '' ? title : `${territory} • ${title}`}
83
84
  </Body>
85
+ { typeof(subtitle) === 'string' &&
86
+ <Body
87
+ color="light"
88
+ dark={dark}
89
+ text={subtitle}
90
+ variant={null}
91
+ />
92
+ }
93
+ { typeof(subtitle) !== 'string' &&
94
+ <>
95
+ {subtitle}
96
+ </>
97
+ }
84
98
  </div>
85
99
  </div>
86
100
  )
@@ -0,0 +1,36 @@
1
+ <div class="pb--doc-demo-row">
2
+ <%= pb_rails("user", props: {
3
+ align: "left",
4
+ avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
5
+ name: "Anna Black",
6
+ orientation: "horizontal",
7
+ size: "md",
8
+ territory: "PHL",
9
+ title: "Remodeling Consultant"
10
+ }) do %>
11
+ <%= pb_rails("flex", props: { align: "center" }) do %>
12
+ <%= pb_rails("icon", props: { icon: "users" }) %>
13
+ <%= pb_rails("caption", props: { padding_left: "xs", text: "Admin" }) %>
14
+ <% end %>
15
+ <% end %>
16
+
17
+ <%= pb_rails("user", props: {
18
+ align: "left",
19
+ avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
20
+ name: "Anna Black",
21
+ orientation: "horizontal",
22
+ size: "md",
23
+ }) do %>
24
+ <%= pb_rails("contact", props: {
25
+ contact_type: "cell",
26
+ contact_value: "349-185-9988"
27
+ }) %>
28
+ <%= pb_rails("contact", props: {
29
+ contact_value: 5555555555
30
+ }) %>
31
+ <%= pb_rails("contact", props: {
32
+ contact_type: "email",
33
+ contact_value: "email@example.com"
34
+ }) %>
35
+ <% end %>
36
+ </div>
@@ -0,0 +1 @@
1
+ The kit accepts block content and whatever is passed as block content will display in the subtitle section.
@@ -0,0 +1,56 @@
1
+ import React from "react"
2
+ import { Caption, Contact, Flex, Icon, User } from "../.."
3
+
4
+ const MentorSubtitle = (
5
+ <Flex>
6
+ <Icon icon="users" />
7
+ <Caption
8
+ paddingLeft="xs"
9
+ text="Admin"
10
+ />
11
+ </Flex>
12
+ )
13
+
14
+ const ContactSubtitle = (
15
+ <>
16
+ <Contact
17
+ contactType="cell"
18
+ contactValue="349-185-9988"
19
+ />
20
+ <Contact
21
+ contactValue="5555555555"
22
+ />
23
+ <Contact
24
+ contactType="email"
25
+ contactValue="email@example.com"
26
+ />
27
+ </>
28
+ )
29
+
30
+ const UserBlockContentSubtitleReact = (props) => {
31
+ return (
32
+ <div className="pb--doc-demo-row">
33
+ <User
34
+ align="left"
35
+ avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
36
+ name="Anna Black"
37
+ orientation="horizontal"
38
+ subtitle={MentorSubtitle}
39
+ territory="PHL"
40
+ title="Remodeling Consultant"
41
+ {...props}
42
+ />
43
+
44
+ <User
45
+ align="left"
46
+ avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
47
+ name="Anna Black"
48
+ orientation="horizontal"
49
+ subtitle={ContactSubtitle}
50
+ {...props}
51
+ />
52
+ </div>
53
+ )
54
+ }
55
+
56
+ export default UserBlockContentSubtitleReact
@@ -0,0 +1 @@
1
+ The `subtitle` prop accepts strings as well as nodes. Whatever node is passed will display in the subtitle section.
@@ -0,0 +1,23 @@
1
+ <div class="pb--doc-demo-row">
2
+ <%= pb_rails("user", props: {
3
+ align: "center",
4
+ avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
5
+ name: "Anna Black",
6
+ orientation: "vertical",
7
+ size: "md",
8
+ subtitle: "User ID: 12345",
9
+ territory: "PHL",
10
+ title: "Remodeling Consultant"
11
+ }) %>
12
+
13
+ <%= pb_rails("user", props: {
14
+ align: "left",
15
+ avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
16
+ name: "Anna Black",
17
+ orientation: "horizontal",
18
+ size: "md",
19
+ subtitle: "User ID: 12345",
20
+ territory: "PHL",
21
+ title: "Remodeling Consultant"
22
+ }) %>
23
+ </div>
@@ -0,0 +1,33 @@
1
+ import React from "react"
2
+ import { User } from "../../"
3
+
4
+ const UserSubtitle = (props) => {
5
+ return (
6
+ <div className="pb--doc-demo-row">
7
+ <User
8
+ align="center"
9
+ avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
10
+ name="Anna Black"
11
+ orientation="vertical"
12
+ size="lg"
13
+ subtitle="User ID: 12345"
14
+ territory="PHL"
15
+ title="Remodeling Consultant"
16
+ {...props}
17
+ />
18
+
19
+ <User
20
+ align="left"
21
+ avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
22
+ name="Anna Black"
23
+ orientation="horizontal"
24
+ subtitle="User ID: 12345"
25
+ territory="PHL"
26
+ title="Remodeling Consultant"
27
+ {...props}
28
+ />
29
+ </div>
30
+ )
31
+ }
32
+
33
+ export default UserSubtitle
@@ -6,9 +6,8 @@ examples:
6
6
  - user_text_only: Text Only
7
7
  - user_size: Horizontal Size
8
8
  - user_vertical_size: Vertical Size
9
-
10
-
11
-
9
+ - user_subtitle: Subtitle
10
+ - user_block_content_subtitle_rails: Block Content Subtitle
12
11
 
13
12
  react:
14
13
  - user_default: Default
@@ -16,3 +15,5 @@ examples:
16
15
  - user_text_only: Text Only
17
16
  - user_size: Horizontal Size
18
17
  - user_vertical_size: Vertical Size
18
+ - user_subtitle: Subtitle
19
+ - user_block_content_subtitle_react: Block Content Subtitle
@@ -3,3 +3,5 @@ export { default as UserWithTerritory } from './_user_with_territory.jsx'
3
3
  export { default as UserTextOnly } from './_user_text_only.jsx'
4
4
  export { default as UserSize } from './_user_size.jsx'
5
5
  export { default as UserVerticalSize } from './_user_vertical_size.jsx'
6
+ export { default as UserSubtitle } from './_user_subtitle.jsx'
7
+ export { default as UserBlockContentSubtitleReact } from './_user_block_content_subtitle_react.jsx'
@@ -10,13 +10,21 @@
10
10
  image_url: object.avatar_url
11
11
  }) %>
12
12
  <% end %>
13
- <%= content_tag(:div,
14
- class: "content_wrapper") do %>
13
+ <%= content_tag(:div, class: "content_wrapper") do %>
15
14
  <%= pb_rails("title", props: { text: object.name, size: object.title_size, dark: object.dark }) %>
16
15
  <%= pb_rails("body", props: {
17
16
  text: "#{object.details}",
18
17
  dark: object.dark,
19
18
  color: "light"
20
19
  }) %>
20
+ <% if content %>
21
+ <%= content.presence %>
22
+ <% else %>
23
+ <%= pb_rails("body", props: {
24
+ text: "#{object.subtitle}",
25
+ dark: object.dark,
26
+ color: "light"
27
+ }) %>
28
+ <% end %>
21
29
  <% end %>
22
30
  <% end %>
@@ -16,6 +16,7 @@ module Playbook
16
16
  prop :size, type: Playbook::Props::Enum,
17
17
  values: %w[lg md sm],
18
18
  default: "sm"
19
+ prop :subtitle
19
20
  prop :title
20
21
  prop :territory
21
22
 
@@ -0,0 +1,28 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../utilities/test-utils'
3
+ import User from './_user'
4
+ import Caption from "../pb_caption/_caption"
5
+
6
+ test('subtitle prop adds subtitle text', () => {
7
+ render(
8
+ <User
9
+ data={{ testid: 'test-subtitle' }}
10
+ subtitle='test subtitle'
11
+ />
12
+ )
13
+
14
+ expect(screen.getByTestId('test-subtitle')).toHaveTextContent('test subtitle')
15
+ })
16
+
17
+ test('subtitle prop accepts a node', () => {
18
+ const TestCaption = <Caption text='test caption' />
19
+
20
+ render(
21
+ <User
22
+ data={{ testid: 'test-subtitle-block' }}
23
+ subtitle={TestCaption}
24
+ />
25
+ )
26
+
27
+ expect(screen.getByTestId('test-subtitle-block')).toHaveTextContent('test caption')
28
+ })
@@ -9,6 +9,10 @@ import './pb_form/pb_form_validation'
9
9
  import datePickerHelper from './pb_date_picker/date_picker_helper'
10
10
  window.datePickerHelper = datePickerHelper
11
11
 
12
+ // Dialog
13
+ import dialogHelper from './pb_dialog/dialogHelper'
14
+ window.dialogHelper = dialogHelper
15
+
12
16
  // Lazy image loading
13
17
  import 'lazysizes'
14
18
 
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "11.9.0"
5
- VERSION = "11.10.0"
4
+ PREVIOUS_VERSION = "11.11.0"
5
+ VERSION = "11.11.0.pre.alpha.dialog2"
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: 11.10.0
4
+ version: 11.11.0.pre.alpha.dialog2
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: 2022-10-25 00:00:00.000000000 Z
12
+ date: 2022-11-11 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -808,18 +808,26 @@ files:
808
808
  - app/pb_kits/playbook/pb_date_year_stacked/docs/example.yml
809
809
  - app/pb_kits/playbook/pb_date_year_stacked/docs/index.js
810
810
  - app/pb_kits/playbook/pb_dialog/_close_icon.tsx
811
- - app/pb_kits/playbook/pb_dialog/_dialog.html.erb
812
811
  - app/pb_kits/playbook/pb_dialog/_dialog.scss
813
812
  - app/pb_kits/playbook/pb_dialog/_dialog.tsx
814
813
  - app/pb_kits/playbook/pb_dialog/_dialog_context.tsx
815
814
  - app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.tsx
816
815
  - app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx
817
816
  - app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx
817
+ - app/pb_kits/playbook/pb_dialog/dialog.html.erb
818
818
  - app/pb_kits/playbook/pb_dialog/dialog.rb
819
819
  - app/pb_kits/playbook/pb_dialog/dialog.test.jsx
820
+ - app/pb_kits/playbook/pb_dialog/dialogHelper.js
821
+ - app/pb_kits/playbook/pb_dialog/dialog_body.html.erb
822
+ - app/pb_kits/playbook/pb_dialog/dialog_body.rb
823
+ - app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb
824
+ - app/pb_kits/playbook/pb_dialog/dialog_footer.rb
825
+ - app/pb_kits/playbook/pb_dialog/dialog_header.html.erb
820
826
  - app/pb_kits/playbook/pb_dialog/dialog_header.rb
827
+ - app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb
821
828
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx
822
829
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.md
830
+ - app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb
823
831
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx
824
832
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx
825
833
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.md
@@ -831,6 +839,7 @@ files:
831
839
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.md
832
840
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx
833
841
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.md
842
+ - app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.html.erb
834
843
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx
835
844
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx
836
845
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.md
@@ -2130,10 +2139,16 @@ files:
2130
2139
  - app/pb_kits/playbook/pb_user/_user.tsx
2131
2140
  - app/pb_kits/playbook/pb_user/docs/_description.md
2132
2141
  - app/pb_kits/playbook/pb_user/docs/_footer.md
2142
+ - app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_rails.html.erb
2143
+ - app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_rails.md
2144
+ - app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.jsx
2145
+ - app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.md
2133
2146
  - app/pb_kits/playbook/pb_user/docs/_user_default.html.erb
2134
2147
  - app/pb_kits/playbook/pb_user/docs/_user_default.jsx
2135
2148
  - app/pb_kits/playbook/pb_user/docs/_user_size.html.erb
2136
2149
  - app/pb_kits/playbook/pb_user/docs/_user_size.jsx
2150
+ - app/pb_kits/playbook/pb_user/docs/_user_subtitle.html.erb
2151
+ - app/pb_kits/playbook/pb_user/docs/_user_subtitle.jsx
2137
2152
  - app/pb_kits/playbook/pb_user/docs/_user_text_only.html.erb
2138
2153
  - app/pb_kits/playbook/pb_user/docs/_user_text_only.jsx
2139
2154
  - app/pb_kits/playbook/pb_user/docs/_user_vertical_size.html.erb
@@ -2144,6 +2159,7 @@ files:
2144
2159
  - app/pb_kits/playbook/pb_user/docs/index.js
2145
2160
  - app/pb_kits/playbook/pb_user/user.html.erb
2146
2161
  - app/pb_kits/playbook/pb_user/user.rb
2162
+ - app/pb_kits/playbook/pb_user/user.test.js
2147
2163
  - app/pb_kits/playbook/pb_user_badge/_user_badge.jsx
2148
2164
  - app/pb_kits/playbook/pb_user_badge/_user_badge.scss
2149
2165
  - app/pb_kits/playbook/pb_user_badge/badges/million-dollar.svg
@@ -2321,9 +2337,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
2321
2337
  version: '0'
2322
2338
  required_rubygems_version: !ruby/object:Gem::Requirement
2323
2339
  requirements:
2324
- - - ">="
2340
+ - - ">"
2325
2341
  - !ruby/object:Gem::Version
2326
- version: '0'
2342
+ version: 1.3.1
2327
2343
  requirements: []
2328
2344
  rubygems_version: 3.3.7
2329
2345
  signing_key:
@@ -1,10 +0,0 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- aria: object.aria,
6
- dark: object.dark) do %>
7
- <% if object.children %>
8
- <%= pb_rails("dialog/dialog_header", props: { children: object.children }) %>
9
- <% end %>
10
- <% end %>