playbook_ui 11.11.0.pre.alpha.paginate2 → 11.11.0.pre.alpha.renderer1
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +0 -2
- data/app/pb_kits/playbook/data/menu.yml +0 -1
- data/app/pb_kits/playbook/index.js +2 -2
- data/app/pb_kits/playbook/pb_dialog/_dialog.scss +25 -1
- data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +22 -0
- data/app/pb_kits/playbook/pb_dialog/dialog.rb +7 -35
- data/app/pb_kits/playbook/pb_dialog/dialogHelper.js +16 -0
- data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb +7 -0
- data/app/pb_kits/playbook/pb_dialog/dialog_body.rb +13 -0
- data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +13 -0
- data/app/pb_kits/playbook/pb_dialog/dialog_footer.rb +16 -0
- data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +13 -0
- data/app/pb_kits/playbook/pb_dialog/dialog_header.rb +3 -20
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +12 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb +11 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.html.erb +29 -0
- data/app/pb_kits/playbook/pb_dialog/docs/example.yml +3 -0
- data/app/pb_kits/playbook/playbook-doc.js +0 -2
- data/app/pb_kits/playbook/playbook-rails.js +4 -0
- data/lib/playbook/version.rb +1 -1
- data/lib/playbook.rb +0 -1
- metadata +12 -27
- data/app/pb_kits/playbook/pb_dialog/_dialog.html.erb +0 -10
- data/app/pb_kits/playbook/pb_pagination/_pagination.scss +0 -52
- data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +0 -41
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb +0 -1
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx +0 -12
- data/app/pb_kits/playbook/pb_pagination/docs/example.yml +0 -9
- data/app/pb_kits/playbook/pb_pagination/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_pagination/pagination.html.erb +0 -7
- data/app/pb_kits/playbook/pb_pagination/pagination.rb +0 -8
- data/app/pb_kits/playbook/pb_pagination/pagination.test.jsx +0 -17
- data/lib/playbook/pagination_renderer.rb +0 -43
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 87186c6f2089fba7fd9caad01934cbe9037ceb88f81bdc1c8562c2925580312c
|
|
4
|
+
data.tar.gz: ae086a8528f1ed1011116bd40d30ee2b726cb6f06db27f017d6da9417438ddc0
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e3718b986e0d2c1eeecbb0ed3323e921fe0ee307a36e728787ffcc6838ac3d155900546d4f419ffa55e961612a4d2316e49a4d41e1182975201f2f98e104a008
|
|
7
|
+
data.tar.gz: 83e882bb65924091cc7713e7f78cb18f65d6684367bda59b9550d5827b5393eea81bf5f72bea2a17abf9bfff112cd84fd7306f5645414013aa483c62ac53a356
|
|
@@ -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'
|
|
56
55
|
export { default as LineGraph } from './pb_line_graph/_line_graph'
|
|
57
56
|
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,7 +63,6 @@ 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'
|
|
67
66
|
export { default as Passphrase } from './pb_passphrase/_passphrase'
|
|
68
67
|
export { default as PbReactPopover } from './pb_popover/_popover'
|
|
69
68
|
export { default as Person } from './pb_person/_person'
|
|
@@ -122,3 +121,4 @@ export { default as PbTable } from './pb_table'
|
|
|
122
121
|
export { default as PbTextarea } from './pb_textarea'
|
|
123
122
|
export { default as PbTooltip } from './pb_tooltip'
|
|
124
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;
|
|
@@ -80,6 +80,7 @@
|
|
|
80
80
|
animation-duration: $animation-duration;
|
|
81
81
|
outline: none;
|
|
82
82
|
animation-timing-function: $easeInOutQuint;
|
|
83
|
+
margin: auto;
|
|
83
84
|
|
|
84
85
|
&[class*="_status_size"] {
|
|
85
86
|
width: $status_size;
|
|
@@ -167,4 +168,27 @@
|
|
|
167
168
|
}
|
|
168
169
|
}
|
|
169
170
|
}
|
|
171
|
+
|
|
172
|
+
.dialog-button-class {
|
|
173
|
+
background-color: unset;
|
|
174
|
+
border: none;
|
|
175
|
+
cursor: pointer;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.pb_dialog_wrapper_rails {
|
|
181
|
+
dialog::backdrop {
|
|
182
|
+
position: fixed;
|
|
183
|
+
top: 0;
|
|
184
|
+
left: 0;
|
|
185
|
+
right: 0;
|
|
186
|
+
bottom: 0;
|
|
187
|
+
display: flex;
|
|
188
|
+
align-items: center;
|
|
189
|
+
justify-content: center;
|
|
190
|
+
background-color: rgba($bg_dark, $opacity_4);
|
|
191
|
+
animation-name: overlayFade;
|
|
192
|
+
animation-duration: 0.2s;
|
|
193
|
+
}
|
|
170
194
|
}
|
|
@@ -0,0 +1,22 @@
|
|
|
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>
|
|
@@ -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 :
|
|
10
|
+
prop :text
|
|
11
|
+
prop :confirm_button
|
|
12
|
+
prop :cancel_button
|
|
25
13
|
|
|
26
|
-
def
|
|
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_#{size}")
|
|
44
16
|
end
|
|
45
17
|
end
|
|
46
18
|
end
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
document.addEventListener("DOMContentLoaded", function () {
|
|
2
|
+
const openTrigger = document.querySelectorAll('[data-open-dialog]');
|
|
3
|
+
const closeTrigger = document.querySelectorAll('[data-close-dialog]');
|
|
4
|
+
openTrigger.forEach((open) => {
|
|
5
|
+
open.addEventListener("click", () => {
|
|
6
|
+
var openTriggerData = open.dataset.openDialog
|
|
7
|
+
document.getElementById(openTriggerData).showModal()
|
|
8
|
+
});
|
|
9
|
+
})
|
|
10
|
+
closeTrigger.forEach((close) => {
|
|
11
|
+
close.addEventListener("click", () => {
|
|
12
|
+
var closeTriggerData = close.dataset.closeDialog
|
|
13
|
+
document.getElementById(closeTriggerData).close()
|
|
14
|
+
})
|
|
15
|
+
})
|
|
16
|
+
});
|
|
@@ -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}) 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"}) 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
|
|
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
|
+
}) %>
|
|
@@ -60,7 +60,6 @@ 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'
|
|
64
63
|
import * as Passphrase from 'pb_passphrase/docs'
|
|
65
64
|
import * as PbReactPopover from 'pb_popover/docs'
|
|
66
65
|
import * as Person from 'pb_person/docs'
|
|
@@ -158,7 +157,6 @@ WebpackerReact.setup({
|
|
|
158
157
|
...MultipleUsersStacked,
|
|
159
158
|
...Nav,
|
|
160
159
|
...OnlineStatus,
|
|
161
|
-
...Pagination,
|
|
162
160
|
...Passphrase,
|
|
163
161
|
...PbReactPopover,
|
|
164
162
|
...Person,
|
|
@@ -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
|
|
data/lib/playbook/version.rb
CHANGED
data/lib/playbook.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.renderer1
|
|
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-08 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionpack
|
|
@@ -123,20 +123,6 @@ dependencies:
|
|
|
123
123
|
- - "~>"
|
|
124
124
|
- !ruby/object:Gem::Version
|
|
125
125
|
version: 0.3.2
|
|
126
|
-
- !ruby/object:Gem::Dependency
|
|
127
|
-
name: will_paginate
|
|
128
|
-
requirement: !ruby/object:Gem::Requirement
|
|
129
|
-
requirements:
|
|
130
|
-
- - "~>"
|
|
131
|
-
- !ruby/object:Gem::Version
|
|
132
|
-
version: '3.3'
|
|
133
|
-
type: :runtime
|
|
134
|
-
prerelease: false
|
|
135
|
-
version_requirements: !ruby/object:Gem::Requirement
|
|
136
|
-
requirements:
|
|
137
|
-
- - "~>"
|
|
138
|
-
- !ruby/object:Gem::Version
|
|
139
|
-
version: '3.3'
|
|
140
126
|
- !ruby/object:Gem::Dependency
|
|
141
127
|
name: byebug
|
|
142
128
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -822,18 +808,26 @@ files:
|
|
|
822
808
|
- app/pb_kits/playbook/pb_date_year_stacked/docs/example.yml
|
|
823
809
|
- app/pb_kits/playbook/pb_date_year_stacked/docs/index.js
|
|
824
810
|
- app/pb_kits/playbook/pb_dialog/_close_icon.tsx
|
|
825
|
-
- app/pb_kits/playbook/pb_dialog/_dialog.html.erb
|
|
826
811
|
- app/pb_kits/playbook/pb_dialog/_dialog.scss
|
|
827
812
|
- app/pb_kits/playbook/pb_dialog/_dialog.tsx
|
|
828
813
|
- app/pb_kits/playbook/pb_dialog/_dialog_context.tsx
|
|
829
814
|
- app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.tsx
|
|
830
815
|
- app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx
|
|
831
816
|
- app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx
|
|
817
|
+
- app/pb_kits/playbook/pb_dialog/dialog.html.erb
|
|
832
818
|
- app/pb_kits/playbook/pb_dialog/dialog.rb
|
|
833
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
|
|
834
826
|
- app/pb_kits/playbook/pb_dialog/dialog_header.rb
|
|
827
|
+
- app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb
|
|
835
828
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx
|
|
836
829
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.md
|
|
830
|
+
- app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb
|
|
837
831
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx
|
|
838
832
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx
|
|
839
833
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.md
|
|
@@ -845,6 +839,7 @@ files:
|
|
|
845
839
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.md
|
|
846
840
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx
|
|
847
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
|
|
848
843
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx
|
|
849
844
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx
|
|
850
845
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.md
|
|
@@ -1447,15 +1442,6 @@ files:
|
|
|
1447
1442
|
- app/pb_kits/playbook/pb_online_status/docs/index.js
|
|
1448
1443
|
- app/pb_kits/playbook/pb_online_status/online_status.html.erb
|
|
1449
1444
|
- app/pb_kits/playbook/pb_online_status/online_status.rb
|
|
1450
|
-
- app/pb_kits/playbook/pb_pagination/_pagination.scss
|
|
1451
|
-
- app/pb_kits/playbook/pb_pagination/_pagination.tsx
|
|
1452
|
-
- app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb
|
|
1453
|
-
- app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx
|
|
1454
|
-
- app/pb_kits/playbook/pb_pagination/docs/example.yml
|
|
1455
|
-
- app/pb_kits/playbook/pb_pagination/docs/index.js
|
|
1456
|
-
- app/pb_kits/playbook/pb_pagination/pagination.html.erb
|
|
1457
|
-
- app/pb_kits/playbook/pb_pagination/pagination.rb
|
|
1458
|
-
- app/pb_kits/playbook/pb_pagination/pagination.test.jsx
|
|
1459
1445
|
- app/pb_kits/playbook/pb_passphrase/_passphrase.jsx
|
|
1460
1446
|
- app/pb_kits/playbook/pb_passphrase/_passphrase.scss
|
|
1461
1447
|
- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb
|
|
@@ -2313,7 +2299,6 @@ files:
|
|
|
2313
2299
|
- lib/playbook/markdown/template_handler.rb
|
|
2314
2300
|
- lib/playbook/number_spacing.rb
|
|
2315
2301
|
- lib/playbook/order.rb
|
|
2316
|
-
- lib/playbook/pagination_renderer.rb
|
|
2317
2302
|
- lib/playbook/pb_doc_helper.rb
|
|
2318
2303
|
- lib/playbook/pb_forms_helper.rb
|
|
2319
2304
|
- lib/playbook/pb_kit_helper.rb
|
|
@@ -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 %>
|
|
@@ -1,52 +0,0 @@
|
|
|
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 !important;
|
|
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
|
-
}
|
|
@@ -1,41 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<%= pb_rails("pagination") %>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as PaginationDefault } from './_pagination_default.jsx'
|
|
@@ -1,17 +0,0 @@
|
|
|
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
|
-
})
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
# frozen_string_literal: true
|
|
2
|
-
|
|
3
|
-
require "will_paginate/view_helpers/action_view"
|
|
4
|
-
|
|
5
|
-
module Playbook
|
|
6
|
-
module Pagination
|
|
7
|
-
class LinkRenderer < WillPaginate::ActionView::LinkRenderer
|
|
8
|
-
def container_attributes
|
|
9
|
-
{ class: "pb_pagination pagination" }
|
|
10
|
-
end
|
|
11
|
-
|
|
12
|
-
def page_number(page)
|
|
13
|
-
if page == current_page
|
|
14
|
-
tag("li", tag("span", page), class: "active")
|
|
15
|
-
else
|
|
16
|
-
tag("li", link(page, page, rel: rel_value(page)))
|
|
17
|
-
end
|
|
18
|
-
end
|
|
19
|
-
|
|
20
|
-
def previous_or_next_page(page, text, classname)
|
|
21
|
-
if page
|
|
22
|
-
tag("li", link(text, page), class: classname)
|
|
23
|
-
else
|
|
24
|
-
tag("li", tag("span", text), class: "%s disabled")
|
|
25
|
-
end
|
|
26
|
-
end
|
|
27
|
-
|
|
28
|
-
def gap
|
|
29
|
-
tag("li", tag("span", "…"), class: "disabled")
|
|
30
|
-
end
|
|
31
|
-
|
|
32
|
-
def previous_page
|
|
33
|
-
num = @collection.current_page > 1 && @collection.current_page - 1
|
|
34
|
-
previous_or_next_page(num, "<i class='far fa-chevron-left'></i>", "prev")
|
|
35
|
-
end
|
|
36
|
-
|
|
37
|
-
def next_page
|
|
38
|
-
num = @collection.current_page < @collection.total_pages && @collection.current_page + 1
|
|
39
|
-
previous_or_next_page(num, "<i class='far fa-chevron-right'></i>", "next")
|
|
40
|
-
end
|
|
41
|
-
end
|
|
42
|
-
end
|
|
43
|
-
end
|