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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +2 -0
- data/app/pb_kits/playbook/data/menu.yml +1 -0
- data/app/pb_kits/playbook/index.js +2 -2
- data/app/pb_kits/playbook/pb_dialog/_dialog.html.erb +10 -0
- data/app/pb_kits/playbook/pb_dialog/_dialog.scss +1 -30
- data/app/pb_kits/playbook/pb_dialog/dialog.rb +35 -7
- data/app/pb_kits/playbook/pb_dialog/dialog_header.rb +20 -3
- data/app/pb_kits/playbook/pb_dialog/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_pagination/_pagination.scss +52 -0
- data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +41 -0
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb +1 -0
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx +12 -0
- data/app/pb_kits/playbook/pb_pagination/docs/example.yml +9 -0
- data/app/pb_kits/playbook/pb_pagination/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_pagination/pagination.html.erb +7 -0
- data/app/pb_kits/playbook/pb_pagination/pagination.rb +8 -0
- data/app/pb_kits/playbook/pb_pagination/pagination.test.jsx +17 -0
- data/app/pb_kits/playbook/playbook-doc.js +2 -0
- data/app/pb_kits/playbook/playbook-rails.js +0 -4
- data/lib/playbook/pagination/pagination_renderer.rb +39 -0
- data/lib/playbook/version.rb +1 -1
- metadata +13 -12
- data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +0 -28
- data/app/pb_kits/playbook/pb_dialog/dialogHelper.js +0 -21
- data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb +0 -7
- data/app/pb_kits/playbook/pb_dialog/dialog_body.rb +0 -13
- data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +0 -13
- data/app/pb_kits/playbook/pb_dialog/dialog_footer.rb +0 -16
- data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +0 -13
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +0 -12
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb +0 -11
- 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:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: c6b41796c2693b117dbbb0b3f6df657d367060abfd50fc55c4db6e3f1ed6c971
|
4
|
+
data.tar.gz: 7215f63899347c3044650422911ee5224b63f3858591dd5a0a17d555085aca3f
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 8fb4dd90e9216feb799fdbfd3167d6b5088d7e54843030e916976f512607ecf12f5f09db978ae93b1ebb3d733ffd2e487acbc78996fc4b27d1be710a246ec8e9
|
7
|
+
data.tar.gz: 64fcecd54d4630c3001e5341a0382cb378d0bcad69631c7a5c872513a94592ae1c00d830fe41760fd205ffa6f42e98de9c57e105eccc9ad41ad15cfc1f339e19
|
@@ -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
|
-
|
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
|
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
|
20
|
+
values: %w[sm md lg content],
|
8
21
|
default: "md"
|
9
|
-
prop :title
|
10
22
|
prop :text
|
11
|
-
prop :
|
12
|
-
prop :
|
23
|
+
prop :title
|
24
|
+
prop :trigger
|
13
25
|
|
14
|
-
def
|
15
|
-
|
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
|
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
|
9
|
-
|
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
|
@@ -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 @@
|
|
1
|
+
export { default as PaginationDefault } from './_pagination_default.jsx'
|
@@ -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", "…"), 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
|
data/lib/playbook/version.rb
CHANGED
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.
|
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-
|
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,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
|
-
}) %>
|