playbook_ui 11.11.0.pre.alpha.dialog2 → 11.11.0.pre.alpha.paginate1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (33) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -0
  3. data/app/pb_kits/playbook/data/menu.yml +1 -0
  4. data/app/pb_kits/playbook/index.js +2 -2
  5. data/app/pb_kits/playbook/pb_dialog/_dialog.html.erb +10 -0
  6. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +1 -30
  7. data/app/pb_kits/playbook/pb_dialog/dialog.rb +35 -7
  8. data/app/pb_kits/playbook/pb_dialog/dialog_header.rb +20 -3
  9. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +0 -3
  10. data/app/pb_kits/playbook/pb_pagination/_pagination.scss +52 -0
  11. data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +41 -0
  12. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb +1 -0
  13. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx +12 -0
  14. data/app/pb_kits/playbook/pb_pagination/docs/example.yml +9 -0
  15. data/app/pb_kits/playbook/pb_pagination/docs/index.js +1 -0
  16. data/app/pb_kits/playbook/pb_pagination/pagination.html.erb +7 -0
  17. data/app/pb_kits/playbook/pb_pagination/pagination.rb +8 -0
  18. data/app/pb_kits/playbook/pb_pagination/pagination.test.jsx +17 -0
  19. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  20. data/app/pb_kits/playbook/playbook-rails.js +0 -4
  21. data/lib/playbook/pagination/pagination_renderer.rb +39 -0
  22. data/lib/playbook/version.rb +1 -1
  23. metadata +13 -12
  24. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +0 -28
  25. data/app/pb_kits/playbook/pb_dialog/dialogHelper.js +0 -21
  26. data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb +0 -7
  27. data/app/pb_kits/playbook/pb_dialog/dialog_body.rb +0 -13
  28. data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +0 -13
  29. data/app/pb_kits/playbook/pb_dialog/dialog_footer.rb +0 -16
  30. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +0 -13
  31. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +0 -12
  32. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb +0 -11
  33. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.html.erb +0 -29
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 6aefa801028f30170ea5d693cc2062bb8898282475fcc32c5437ac6e23a7a9cb
4
- data.tar.gz: 8460114464053ed808a1c32d8d11a0adb458bddf5e5c12e35c0bf1b5b5db4408
3
+ metadata.gz: c6b41796c2693b117dbbb0b3f6df657d367060abfd50fc55c4db6e3f1ed6c971
4
+ data.tar.gz: 7215f63899347c3044650422911ee5224b63f3858591dd5a0a17d555085aca3f
5
5
  SHA512:
6
- metadata.gz: 0e44b3ebdbe70354baf021f710b215b757ad39c179d3c7548909f51af6387f0a95adf4058c058afe4247e696d32a692a9b417f780992abfa3cbdb9433bcbaf54
7
- data.tar.gz: 92fcfdd0bf79e370b8aabeb42a1ef3f52502d05bee52e8f7ecd62a5db02f3e555e491ce7a73e3e2704e68a73d7a42c58b6cc2abae308fdc77894bd39d1fdd91b
6
+ metadata.gz: 8fb4dd90e9216feb799fdbfd3167d6b5088d7e54843030e916976f512607ecf12f5f09db978ae93b1ebb3d733ffd2e487acbc78996fc4b27d1be710a246ec8e9
7
+ data.tar.gz: 64fcecd54d4630c3001e5341a0382cb378d0bcad69631c7a5c872513a94592ae1c00d830fe41760fd205ffa6f42e98de9c57e105eccc9ad41ad15cfc1f339e19
@@ -103,3 +103,5 @@
103
103
  @import './utilities/line_height';
104
104
  @import './utilities/display';
105
105
  @import './utilities/flexbox';
106
+
107
+ @import 'pb_pagination/pagination';
@@ -104,3 +104,4 @@ kits:
104
104
  - title_detail
105
105
  - user_badge
106
106
  - walkthrough
107
+ - pagination
@@ -52,9 +52,9 @@ export { default as LabelPill } from './pb_label_pill/_label_pill'
52
52
  export { default as LabelValue } from './pb_label_value/_label_value'
53
53
  export { default as Layout } from './pb_layout/_layout'
54
54
  export { default as Legend } from './pb_legend/_legend'
55
+ export { default as Lightbox } from './pb_lightbox/_lightbox'
55
56
  export { default as LineGraph } from './pb_line_graph/_line_graph'
56
57
  export { default as List } from './pb_list/_list'
57
- export { default as Lightbox } from './pb_lightbox/_lightbox'
58
58
  export { default as ListItem } from './pb_list/_list_item'
59
59
  export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
60
60
  export { default as Message } from './pb_message/_message'
@@ -63,6 +63,7 @@ export { default as MultipleUsersStacked } from './pb_multiple_users_stacked/_mu
63
63
  export { default as Nav } from './pb_nav/_nav'
64
64
  export { default as NavItem } from './pb_nav/_item'
65
65
  export { default as OnlineStatus } from './pb_online_status/_online_status'
66
+ export { default as Pagination} from './pb_pagination/_pagination'
66
67
  export { default as Passphrase } from './pb_passphrase/_passphrase'
67
68
  export { default as PbReactPopover } from './pb_popover/_popover'
68
69
  export { default as Person } from './pb_person/_person'
@@ -121,4 +122,3 @@ export { default as PbTable } from './pb_table'
121
122
  export { default as PbTextarea } from './pb_textarea'
122
123
  export { default as PbTooltip } from './pb_tooltip'
123
124
  export { default as PbTypeahead } from './pb_typeahead'
124
- export { default as dialogHelper } from './pb_dialog/dialogHelper'
@@ -0,0 +1,10 @@
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 %>
@@ -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,33 +167,4 @@
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
- }
199
170
  }
@@ -2,17 +2,45 @@
2
2
 
3
3
  module Playbook
4
4
  module PbDialog
5
- class Dialog < Playbook::KitBase
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
6
19
  prop :size, type: Playbook::Props::Enum,
7
- values: %w[sm md lg xl status_size content],
20
+ values: %w[sm md lg content],
8
21
  default: "md"
9
- prop :title
10
22
  prop :text
11
- prop :confirm_button
12
- prop :cancel_button
23
+ prop :title
24
+ prop :trigger
13
25
 
14
- def classname
15
- generate_classname("pb_dialog pb_dialog_rails pb_dialog_#{size}")
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
+ }
16
44
  end
17
45
  end
18
46
  end
@@ -2,11 +2,28 @@
2
2
 
3
3
  module Playbook
4
4
  module PbDialog
5
- class DialogHeader < Playbook::KitBase
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
6
15
  prop :title
7
16
 
8
- def classname
9
- generate_classname("dialog_header")
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
+ }
10
27
  end
11
28
  end
12
29
  end
@@ -1,9 +1,6 @@
1
1
  examples:
2
2
 
3
3
  rails:
4
- - dialog_default: Simple
5
- - dialog_compound_components: Complex
6
- - dialog_sizes: Sizes
7
4
 
8
5
  react:
9
6
  - dialog_default: Simple
@@ -0,0 +1,52 @@
1
+ @import "tokens/colors";
2
+ @import "tokens/typography";
3
+ @import "tokens/border_radius";
4
+ @import "tokens/shadows";
5
+
6
+ .pb_pagination {
7
+ li > a, li > span {
8
+ border: 0 !important;
9
+ margin-top: 1px;
10
+ margin-bottom: 1px;
11
+ }
12
+ li:first-child > a, li:first-child > span {
13
+ border-right: 1px solid $border_light !important;
14
+ z-index: 2;
15
+ }
16
+ li:last-child > a, li:last-child > span {
17
+ border-left: 1px solid $border_light !important;
18
+ z-index: 2;
19
+ }
20
+ border: 1px solid $border_light;
21
+ background-color: $white;
22
+ a {
23
+ color: $text_lt_default !important;
24
+ font-size: $text_small;
25
+ font-weight: $bold;
26
+ border: none;
27
+ margin-left: 1px;
28
+ margin-right: 1px;
29
+
30
+ &:hover {
31
+ background-color: $active_light;
32
+ color: $primary !important;
33
+ border-radius: $border_rad_light;
34
+ }
35
+
36
+ &:focus {
37
+ outline: 1px solid $primary !important;
38
+ border-radius: $border_rad_light;
39
+ outline-offset: -1px;
40
+ }
41
+ }
42
+ .active > span {
43
+ background-color: $primary;
44
+ border-radius: $border_rad_light;
45
+ margin-left: 1px;
46
+ margin-right: 1px;
47
+
48
+ &:hover {
49
+ box-shadow: $shadow_deeper;
50
+ }
51
+ }
52
+ }
@@ -0,0 +1,41 @@
1
+
2
+
3
+ /* @flow */
4
+
5
+ import React from 'react'
6
+ import classnames from 'classnames'
7
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
8
+ import { globalProps } from '../utilities/globalProps'
9
+
10
+ type PaginationProps = {
11
+ aria?: { [key: string]: string },
12
+ className?: string,
13
+ data?: { [key: string]: string },
14
+ id?: string,
15
+ }
16
+
17
+ const Pagination = (props: PaginationProps) => {
18
+ const {
19
+ aria = {},
20
+ className,
21
+ data = {},
22
+ id,
23
+ } = props
24
+
25
+ const ariaProps = buildAriaProps(aria)
26
+ const dataProps = buildDataProps(data)
27
+ const classes = classnames(buildCss('pb_pagination'), globalProps(props), className)
28
+
29
+ return (
30
+ <div
31
+ {...ariaProps}
32
+ {...dataProps}
33
+ className={classes}
34
+ id={id}
35
+ >
36
+ {className}
37
+ </div>
38
+ )
39
+ }
40
+
41
+ export default Pagination
@@ -0,0 +1 @@
1
+ <%= pb_rails("pagination") %>
@@ -0,0 +1,12 @@
1
+ import React from 'react'
2
+ import Pagination from '../_pagination'
3
+
4
+ const PaginationDefault = (props) => (
5
+ <div>
6
+ <Pagination
7
+ {...props}
8
+ />
9
+ </div>
10
+ )
11
+
12
+ export default PaginationDefault
@@ -0,0 +1,9 @@
1
+ examples:
2
+
3
+ rails:
4
+ - pagination_default: Default
5
+
6
+
7
+ react:
8
+ - pagination_default: Default
9
+
@@ -0,0 +1 @@
1
+ export { default as PaginationDefault } from './_pagination_default.jsx'
@@ -0,0 +1,7 @@
1
+ <%= content_tag(:div,
2
+ aria: object.aria,
3
+ class: object.classname,
4
+ data: object.data,
5
+ id: object.id) do %>
6
+ <span>PAGINATION CONTENT</span>
7
+ <% end %>
@@ -0,0 +1,8 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbPagination
5
+ class Pagination < ::Playbook::KitBase
6
+ end
7
+ end
8
+ end
@@ -0,0 +1,17 @@
1
+ import { renderKit } from '../utilities/test-utils'
2
+
3
+ import { Pagination } from '../'
4
+
5
+ /* See these resources for more testing info:
6
+ - https://github.com/testing-library/jest-dom#usage for useage and examples
7
+ - https://jestjs.io/docs/en/using-matchers
8
+ */
9
+
10
+ test('generated scaffold test - update me', () => {
11
+ const props = {
12
+ data: { testid: 'default' }
13
+ }
14
+
15
+ const kit = renderKit(Pagination , props)
16
+ expect(kit).toBeInTheDocument()
17
+ })
@@ -60,6 +60,7 @@ import * as MultipleUsers from 'pb_multiple_users/docs'
60
60
  import * as MultipleUsersStacked from 'pb_multiple_users_stacked/docs'
61
61
  import * as Nav from 'pb_nav/docs'
62
62
  import * as OnlineStatus from 'pb_online_status/docs'
63
+ import * as Pagination from 'pb_pagination/docs'
63
64
  import * as Passphrase from 'pb_passphrase/docs'
64
65
  import * as PbReactPopover from 'pb_popover/docs'
65
66
  import * as Person from 'pb_person/docs'
@@ -157,6 +158,7 @@ WebpackerReact.setup({
157
158
  ...MultipleUsersStacked,
158
159
  ...Nav,
159
160
  ...OnlineStatus,
161
+ ...Pagination,
160
162
  ...Passphrase,
161
163
  ...PbReactPopover,
162
164
  ...Person,
@@ -9,10 +9,6 @@ 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
-
16
12
  // Lazy image loading
17
13
  import 'lazysizes'
18
14
 
@@ -0,0 +1,39 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ class LinkRenderer < WillPaginate::ActionView::LinkRenderer
5
+ def container_attributes
6
+ { class: "pb_pagination pagination" }
7
+ end
8
+
9
+ def page_number(page)
10
+ if page == current_page
11
+ tag("li", tag("span", page), class: "active")
12
+ else
13
+ tag("li", link(page, page, rel: rel_value(page)))
14
+ end
15
+ end
16
+
17
+ def previous_or_next_page(page, text, classname)
18
+ if page
19
+ tag("li", link(text, page), class: classname)
20
+ else
21
+ tag("li", tag("span", text), class: "%s disabled")
22
+ end
23
+ end
24
+
25
+ def gap
26
+ tag("li", tag("span", "&hellip;"), class: "disabled")
27
+ end
28
+
29
+ def previous_page
30
+ num = @collection.current_page > 1 && @collection.current_page - 1
31
+ previous_or_next_page(num, "<i class='far fa-chevron-left'></i>", "prev")
32
+ end
33
+
34
+ def next_page
35
+ num = @collection.current_page < @collection.total_pages && @collection.current_page + 1
36
+ previous_or_next_page(num, "<i class='far fa-chevron-right'></i>", "next")
37
+ end
38
+ end
39
+ end
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "11.11.0"
5
- VERSION = "11.11.0.pre.alpha.dialog2"
5
+ VERSION = "11.11.0.pre.alpha.paginate1"
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.11.0.pre.alpha.dialog2
4
+ version: 11.11.0.pre.alpha.paginate1
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-11-11 00:00:00.000000000 Z
12
+ date: 2022-11-09 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -808,26 +808,18 @@ 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
811
812
  - app/pb_kits/playbook/pb_dialog/_dialog.scss
812
813
  - app/pb_kits/playbook/pb_dialog/_dialog.tsx
813
814
  - app/pb_kits/playbook/pb_dialog/_dialog_context.tsx
814
815
  - app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.tsx
815
816
  - app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx
816
817
  - 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
826
820
  - app/pb_kits/playbook/pb_dialog/dialog_header.rb
827
- - app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb
828
821
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx
829
822
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.md
830
- - app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb
831
823
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx
832
824
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx
833
825
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.md
@@ -839,7 +831,6 @@ files:
839
831
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.md
840
832
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx
841
833
  - 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
843
834
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx
844
835
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx
845
836
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.md
@@ -1442,6 +1433,15 @@ files:
1442
1433
  - app/pb_kits/playbook/pb_online_status/docs/index.js
1443
1434
  - app/pb_kits/playbook/pb_online_status/online_status.html.erb
1444
1435
  - app/pb_kits/playbook/pb_online_status/online_status.rb
1436
+ - app/pb_kits/playbook/pb_pagination/_pagination.scss
1437
+ - app/pb_kits/playbook/pb_pagination/_pagination.tsx
1438
+ - app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb
1439
+ - app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx
1440
+ - app/pb_kits/playbook/pb_pagination/docs/example.yml
1441
+ - app/pb_kits/playbook/pb_pagination/docs/index.js
1442
+ - app/pb_kits/playbook/pb_pagination/pagination.html.erb
1443
+ - app/pb_kits/playbook/pb_pagination/pagination.rb
1444
+ - app/pb_kits/playbook/pb_pagination/pagination.test.jsx
1445
1445
  - app/pb_kits/playbook/pb_passphrase/_passphrase.jsx
1446
1446
  - app/pb_kits/playbook/pb_passphrase/_passphrase.scss
1447
1447
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb
@@ -2299,6 +2299,7 @@ files:
2299
2299
  - lib/playbook/markdown/template_handler.rb
2300
2300
  - lib/playbook/number_spacing.rb
2301
2301
  - lib/playbook/order.rb
2302
+ - lib/playbook/pagination/pagination_renderer.rb
2302
2303
  - lib/playbook/pb_doc_helper.rb
2303
2304
  - lib/playbook/pb_forms_helper.rb
2304
2305
  - lib/playbook/pb_kit_helper.rb
@@ -1,28 +0,0 @@
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 %>
@@ -1,21 +0,0 @@
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;
@@ -1,7 +0,0 @@
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 %>
@@ -1,13 +0,0 @@
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
@@ -1,13 +0,0 @@
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 %>
@@ -1,16 +0,0 @@
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
@@ -1,13 +0,0 @@
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 %>
@@ -1,12 +0,0 @@
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 %>
@@ -1,11 +0,0 @@
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
- }) %>
@@ -1,29 +0,0 @@
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
- }) %>