playbook_ui 11.19.0.pre.alpha.map1 → 11.19.0.pre.alpha.pagpassthrough1
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 -2
- data/app/pb_kits/playbook/data/menu.yml +1 -1
- data/app/pb_kits/playbook/index.js +2 -3
- data/app/pb_kits/playbook/pb_paginate/_paginate.scss +3 -0
- data/app/pb_kits/playbook/pb_paginate/docs/_paginate_default.html.erb +19 -0
- data/app/pb_kits/playbook/pb_paginate/docs/example.yml +6 -0
- data/app/pb_kits/playbook/pb_paginate/paginate.html.erb +5 -0
- data/app/pb_kits/playbook/pb_paginate/paginate.rb +14 -0
- data/app/pb_kits/playbook/playbook-doc.js +0 -2
- data/app/pb_kits/playbook/utilities/_pagination.scss +69 -0
- data/lib/playbook/pagination_renderer.rb +41 -0
- data/lib/playbook/version.rb +1 -1
- data/lib/playbook.rb +2 -0
- metadata +23 -8
- data/app/pb_kits/playbook/pb_map/_map.scss +0 -6
- data/app/pb_kits/playbook/pb_map/_map.tsx +0 -39
- data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx +0 -49
- data/app/pb_kits/playbook/pb_map/docs/example.yml +0 -6
- data/app/pb_kits/playbook/pb_map/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_map/map.test.jsx +0 -17
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: ff556241a73204fa1fcb1b7f9e8c5d3d41dde1cbab356e52f52c42ccab521c0d
|
|
4
|
+
data.tar.gz: be66d4782e1117833f5e34036a010f71486d91318ad6241e82487964d9583602
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 9763ce291cf8f35999f873b742e258a28c07f6c1cc42fc59399ff8f2d32cf80a27cb3a583188726c0449757d19edcde02460b4e0744f8fd1599343c1aa995ced
|
|
7
|
+
data.tar.gz: 6a93d271d454a850b50bc5a940242c97ba55962a9dc6cca4faf375eaf223e07385137f2c2409554d10be4291a7f052553a3bde48c9027e12b58869606f6ee71a
|
|
@@ -10,8 +10,8 @@ export { default as Background } from './pb_background/_background'
|
|
|
10
10
|
export { default as Badge } from './pb_badge/_badge'
|
|
11
11
|
export { default as BarGraph } from './pb_bar_graph/_bar_graph'
|
|
12
12
|
export { default as Body } from './pb_body/_body'
|
|
13
|
-
export { default as BreadCrumbItem } from './pb_bread_crumbs/_bread_crumb_item'
|
|
14
13
|
export { default as BreadCrumbs } from './pb_bread_crumbs/_bread_crumbs'
|
|
14
|
+
export { default as BreadCrumbItem } from './pb_bread_crumbs/_bread_crumb_item'
|
|
15
15
|
export { default as Button } from './pb_button/_button'
|
|
16
16
|
export { default as ButtonToolbar } from './pb_button_toolbar/_button_toolbar'
|
|
17
17
|
export { default as Caption } from './pb_caption/_caption'
|
|
@@ -53,12 +53,11 @@ export { default as LabelPill } from './pb_label_pill/_label_pill'
|
|
|
53
53
|
export { default as LabelValue } from './pb_label_value/_label_value'
|
|
54
54
|
export { default as Layout } from './pb_layout/_layout'
|
|
55
55
|
export { default as Legend } from './pb_legend/_legend'
|
|
56
|
-
export { default as Lightbox } from './pb_lightbox/_lightbox'
|
|
57
56
|
export { default as LineGraph } from './pb_line_graph/_line_graph'
|
|
58
57
|
export { default as List } from './pb_list/_list'
|
|
58
|
+
export { default as Lightbox } from './pb_lightbox/_lightbox'
|
|
59
59
|
export { default as ListItem } from './pb_list/_list_item'
|
|
60
60
|
export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
|
|
61
|
-
export { default as Map} from './pb_map/_map'
|
|
62
61
|
export { default as Message } from './pb_message/_message'
|
|
63
62
|
export { default as MultipleUsers } from './pb_multiple_users/_multiple_users'
|
|
64
63
|
export { default as MultipleUsersStacked } from './pb_multiple_users_stacked/_multiple_users_stacked'
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<%= pb_rails("title", props: { size: 4, text: "Default will_paginate"}) %>
|
|
2
|
+
<%= will_paginate @users %>
|
|
3
|
+
<%= pb_rails("body") do %>
|
|
4
|
+
You need to add: <code> require 'will_paginate'</code> in your app to use.
|
|
5
|
+
<% end %>
|
|
6
|
+
<br><br>
|
|
7
|
+
|
|
8
|
+
<%= pb_rails("title", props: { size: 4, text: "Playbook Renderer"}) %>
|
|
9
|
+
<%= will_paginate @users, renderer: Playbook::Pagination::Rails %>
|
|
10
|
+
<%= pb_rails("body") do %>
|
|
11
|
+
You need to also add: <code>require "playbook/pagination_renderer"</code> in your app to use.
|
|
12
|
+
<% end %>
|
|
13
|
+
<br><br>
|
|
14
|
+
|
|
15
|
+
<%= pb_rails("title", props: { size: 4, text: "Playbook Kit (Passthrough)"}) %>
|
|
16
|
+
<%= pb_rails("paginate", props: { stragety: "will_paginate", model: @users }) %>
|
|
17
|
+
<%= pb_rails("body") do %>
|
|
18
|
+
Same...You need to also add: <code>require "playbook/pagination_renderer"</code> in your app to use.
|
|
19
|
+
<% end %>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Playbook
|
|
4
|
+
module PbPaginate
|
|
5
|
+
class Paginate < ::Playbook::KitBase
|
|
6
|
+
prop :stragety # Need to add protection
|
|
7
|
+
prop :model # Need to add protection
|
|
8
|
+
|
|
9
|
+
def classname
|
|
10
|
+
generate_classname("pb_paginate")
|
|
11
|
+
end
|
|
12
|
+
end
|
|
13
|
+
end
|
|
14
|
+
end
|
|
@@ -55,7 +55,6 @@ import * as Lightbox from 'pb_lightbox/docs'
|
|
|
55
55
|
import * as LineGraphDocs from 'pb_line_graph/docs'
|
|
56
56
|
import * as List from 'pb_list/docs'
|
|
57
57
|
import * as LoadingInline from 'pb_loading_inline/docs'
|
|
58
|
-
import * as Map from 'pb_map/docs'
|
|
59
58
|
import * as Message from 'pb_message/docs'
|
|
60
59
|
import * as MultipleUsers from 'pb_multiple_users/docs'
|
|
61
60
|
import * as MultipleUsersStacked from 'pb_multiple_users_stacked/docs'
|
|
@@ -153,7 +152,6 @@ WebpackerReact.setup({
|
|
|
153
152
|
...LineGraphDocs,
|
|
154
153
|
...List,
|
|
155
154
|
...LoadingInline,
|
|
156
|
-
...Map,
|
|
157
155
|
...Message,
|
|
158
156
|
...MultipleUsers,
|
|
159
157
|
...MultipleUsersStacked,
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
@import "../tokens/colors";
|
|
2
|
+
@import "../tokens/typography";
|
|
3
|
+
@import "../tokens/border_radius";
|
|
4
|
+
@import "../tokens/shadows";
|
|
5
|
+
|
|
6
|
+
.pb_pagination {
|
|
7
|
+
display: inline-block;
|
|
8
|
+
border-radius: $border_rad_light;
|
|
9
|
+
border: 1px solid $border_light;
|
|
10
|
+
background-color: $white;
|
|
11
|
+
padding: 3px 0px 3.6px 0px;
|
|
12
|
+
margin: 10px 0;
|
|
13
|
+
li {
|
|
14
|
+
display: inline;
|
|
15
|
+
> a, li > span {
|
|
16
|
+
padding: 7px 13px;
|
|
17
|
+
text-decoration: none;
|
|
18
|
+
margin-left: -1px;
|
|
19
|
+
border: 0 !important;
|
|
20
|
+
}}
|
|
21
|
+
li:first-child > a, li:first-child > span {
|
|
22
|
+
padding: 7px 13px;
|
|
23
|
+
margin-left: .5px;
|
|
24
|
+
border-right: 1px solid $border_light !important;
|
|
25
|
+
z-index: 2;
|
|
26
|
+
}
|
|
27
|
+
li:last-child > a, li:last-child > span {
|
|
28
|
+
padding: 7px 13px;
|
|
29
|
+
margin-right: .5px;
|
|
30
|
+
border-left: 1px solid $border_light !important;
|
|
31
|
+
z-index: 2;
|
|
32
|
+
}
|
|
33
|
+
a {
|
|
34
|
+
color: $text_lt_default !important;
|
|
35
|
+
font-size: $text_small;
|
|
36
|
+
font-weight: $regular;
|
|
37
|
+
border: none;
|
|
38
|
+
|
|
39
|
+
&:hover {
|
|
40
|
+
background-color: $active_light;
|
|
41
|
+
color: $primary !important;
|
|
42
|
+
border-radius: $border_rad_light;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&:focus {
|
|
46
|
+
outline: 1px solid $primary !important;
|
|
47
|
+
border-radius: $border_rad_light;
|
|
48
|
+
outline-offset: -1px;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
.active > span {
|
|
52
|
+
background-color: $primary !important;
|
|
53
|
+
border-radius: $border_rad_light;
|
|
54
|
+
color: #fff;
|
|
55
|
+
padding: 7px 13px;
|
|
56
|
+
border: 0 !important;
|
|
57
|
+
text-decoration: none;
|
|
58
|
+
font-weight: $bold;
|
|
59
|
+
font-size: $text_small;
|
|
60
|
+
|
|
61
|
+
&:hover {
|
|
62
|
+
box-shadow: $shadow_deeper;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
.disabled > span {
|
|
66
|
+
padding: 7px 10px;
|
|
67
|
+
font-size: $text_small;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
require "will_paginate/view_helpers/action_view"
|
|
4
|
+
|
|
5
|
+
module Playbook
|
|
6
|
+
module Pagination
|
|
7
|
+
class Rails < WillPaginate::ActionView::LinkRenderer
|
|
8
|
+
def container_attributes
|
|
9
|
+
{ class: "pb_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; end
|
|
29
|
+
|
|
30
|
+
def previous_page
|
|
31
|
+
num = @collection.current_page > 1 && @collection.current_page - 1
|
|
32
|
+
previous_or_next_page(num, "<i class='far fa-chevron-left fa-xs'></i>", "prev")
|
|
33
|
+
end
|
|
34
|
+
|
|
35
|
+
def next_page
|
|
36
|
+
num = @collection.current_page < @collection.total_pages && @collection.current_page + 1
|
|
37
|
+
previous_or_next_page(num, "<i class='far fa-chevron-right fa-xs'></i>", "next")
|
|
38
|
+
end
|
|
39
|
+
end
|
|
40
|
+
end
|
|
41
|
+
end
|
data/lib/playbook/version.rb
CHANGED
data/lib/playbook.rb
CHANGED
|
@@ -12,6 +12,8 @@ require "playbook/pb_doc_helper"
|
|
|
12
12
|
require "playbook/kit_base"
|
|
13
13
|
require "playbook/kit_resolver"
|
|
14
14
|
require "playbook/markdown"
|
|
15
|
+
# require "playbook/pagination_renderer"
|
|
16
|
+
# REMOVED TO MAKE THIS AN OPTIONAL INCLUDE FOR CLIENTS
|
|
15
17
|
|
|
16
18
|
module Playbook
|
|
17
19
|
ROOT_PATH = Pathname.new(File.join(__dir__, ".."))
|
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.19.0.pre.alpha.
|
|
4
|
+
version: 11.19.0.pre.alpha.pagpassthrough1
|
|
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: 2023-01-
|
|
12
|
+
date: 2023-01-16 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionpack
|
|
@@ -269,6 +269,20 @@ dependencies:
|
|
|
269
269
|
- - '='
|
|
270
270
|
- !ruby/object:Gem::Version
|
|
271
271
|
version: 1.2018.9
|
|
272
|
+
- !ruby/object:Gem::Dependency
|
|
273
|
+
name: will_paginate
|
|
274
|
+
requirement: !ruby/object:Gem::Requirement
|
|
275
|
+
requirements:
|
|
276
|
+
- - '='
|
|
277
|
+
- !ruby/object:Gem::Version
|
|
278
|
+
version: 3.3.1
|
|
279
|
+
type: :development
|
|
280
|
+
prerelease: false
|
|
281
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
282
|
+
requirements:
|
|
283
|
+
- - '='
|
|
284
|
+
- !ruby/object:Gem::Version
|
|
285
|
+
version: 3.3.1
|
|
272
286
|
description: Playbook Design System. Built for Nitro, but powering all.
|
|
273
287
|
email:
|
|
274
288
|
- nitroux@powerhrg.com
|
|
@@ -1371,12 +1385,6 @@ files:
|
|
|
1371
1385
|
- app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb
|
|
1372
1386
|
- app/pb_kits/playbook/pb_loading_inline/loading_inline.rb
|
|
1373
1387
|
- app/pb_kits/playbook/pb_logistic/_logistic.jsx
|
|
1374
|
-
- app/pb_kits/playbook/pb_map/_map.scss
|
|
1375
|
-
- app/pb_kits/playbook/pb_map/_map.tsx
|
|
1376
|
-
- app/pb_kits/playbook/pb_map/docs/_map_default.jsx
|
|
1377
|
-
- app/pb_kits/playbook/pb_map/docs/example.yml
|
|
1378
|
-
- app/pb_kits/playbook/pb_map/docs/index.js
|
|
1379
|
-
- app/pb_kits/playbook/pb_map/map.test.jsx
|
|
1380
1388
|
- app/pb_kits/playbook/pb_message/_message.jsx
|
|
1381
1389
|
- app/pb_kits/playbook/pb_message/_message.scss
|
|
1382
1390
|
- app/pb_kits/playbook/pb_message/_message_mixins.scss
|
|
@@ -1469,6 +1477,11 @@ files:
|
|
|
1469
1477
|
- app/pb_kits/playbook/pb_online_status/docs/index.js
|
|
1470
1478
|
- app/pb_kits/playbook/pb_online_status/online_status.html.erb
|
|
1471
1479
|
- app/pb_kits/playbook/pb_online_status/online_status.rb
|
|
1480
|
+
- app/pb_kits/playbook/pb_paginate/_paginate.scss
|
|
1481
|
+
- app/pb_kits/playbook/pb_paginate/docs/_paginate_default.html.erb
|
|
1482
|
+
- app/pb_kits/playbook/pb_paginate/docs/example.yml
|
|
1483
|
+
- app/pb_kits/playbook/pb_paginate/paginate.html.erb
|
|
1484
|
+
- app/pb_kits/playbook/pb_paginate/paginate.rb
|
|
1472
1485
|
- app/pb_kits/playbook/pb_passphrase/_passphrase.jsx
|
|
1473
1486
|
- app/pb_kits/playbook/pb_passphrase/_passphrase.scss
|
|
1474
1487
|
- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb
|
|
@@ -2267,6 +2280,7 @@ files:
|
|
|
2267
2280
|
- app/pb_kits/playbook/utilities/_max_width.scss
|
|
2268
2281
|
- app/pb_kits/playbook/utilities/_mixins.scss
|
|
2269
2282
|
- app/pb_kits/playbook/utilities/_number_spacing.scss
|
|
2283
|
+
- app/pb_kits/playbook/utilities/_pagination.scss
|
|
2270
2284
|
- app/pb_kits/playbook/utilities/_positioning.scss
|
|
2271
2285
|
- app/pb_kits/playbook/utilities/_shadow.scss
|
|
2272
2286
|
- app/pb_kits/playbook/utilities/_spacing.scss
|
|
@@ -2332,6 +2346,7 @@ files:
|
|
|
2332
2346
|
- lib/playbook/markdown/template_handler.rb
|
|
2333
2347
|
- lib/playbook/number_spacing.rb
|
|
2334
2348
|
- lib/playbook/order.rb
|
|
2349
|
+
- lib/playbook/pagination_renderer.rb
|
|
2335
2350
|
- lib/playbook/pb_doc_helper.rb
|
|
2336
2351
|
- lib/playbook/pb_forms_helper.rb
|
|
2337
2352
|
- lib/playbook/pb_kit_helper.rb
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import classnames from 'classnames'
|
|
3
|
-
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
|
4
|
-
import { globalProps } from '../utilities/globalProps'
|
|
5
|
-
|
|
6
|
-
type MapProps = {
|
|
7
|
-
aria?: { [key: string]: string },
|
|
8
|
-
children?: React.ReactChild[] | React.ReactNode,
|
|
9
|
-
className?: string,
|
|
10
|
-
data?: { [key: string]: string },
|
|
11
|
-
id?: string,
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
const Map = (props: MapProps) => {
|
|
15
|
-
const {
|
|
16
|
-
aria = {},
|
|
17
|
-
children,
|
|
18
|
-
className,
|
|
19
|
-
data = {},
|
|
20
|
-
id,
|
|
21
|
-
} = props
|
|
22
|
-
|
|
23
|
-
const ariaProps = buildAriaProps(aria)
|
|
24
|
-
const dataProps = buildDataProps(data)
|
|
25
|
-
const classes = classnames(buildCss('pb_map'), globalProps(props), className)
|
|
26
|
-
|
|
27
|
-
return (
|
|
28
|
-
<div
|
|
29
|
-
{...ariaProps}
|
|
30
|
-
{...dataProps}
|
|
31
|
-
className={classes}
|
|
32
|
-
id={id}
|
|
33
|
-
>
|
|
34
|
-
{children}
|
|
35
|
-
</div>
|
|
36
|
-
)
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
export default Map
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import React, { useRef, useEffect } from 'react'
|
|
2
|
-
import Map from '../_map'
|
|
3
|
-
|
|
4
|
-
import maplibregl from 'maplibre-gl'
|
|
5
|
-
|
|
6
|
-
const MapDefault = () => {
|
|
7
|
-
|
|
8
|
-
const mapContainerRef = useRef(null)
|
|
9
|
-
|
|
10
|
-
useEffect(() => {
|
|
11
|
-
if (!maplibregl.supported()) {
|
|
12
|
-
alert('Your browser does not support MapLibre GL');
|
|
13
|
-
} else {
|
|
14
|
-
const map = new maplibregl.Map({
|
|
15
|
-
container: mapContainerRef.current,
|
|
16
|
-
style: 'https://api.maptiler.com/maps/positron/style.json?key=g8IQm57iZcbJ6Ky1HmG4',
|
|
17
|
-
center: [-75.379143, 39.831200],
|
|
18
|
-
zoom: 13,
|
|
19
|
-
})
|
|
20
|
-
//set marker/pin
|
|
21
|
-
/* eslint-disable-next-line */
|
|
22
|
-
const marker = new maplibregl.Marker({
|
|
23
|
-
color: "#0056CF",
|
|
24
|
-
}).setLngLat([-75.379143, 39.831200])
|
|
25
|
-
.setPopup(new maplibregl.Popup({className: 'map_popup'}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
|
|
26
|
-
.addTo(map);
|
|
27
|
-
|
|
28
|
-
//add controls
|
|
29
|
-
map.addControl(new maplibregl.NavigationControl())
|
|
30
|
-
|
|
31
|
-
}
|
|
32
|
-
}, [])
|
|
33
|
-
return (
|
|
34
|
-
<Map>
|
|
35
|
-
<div
|
|
36
|
-
ref={mapContainerRef}
|
|
37
|
-
style={{
|
|
38
|
-
position: 'absolute',
|
|
39
|
-
left: 0,
|
|
40
|
-
right: 0,
|
|
41
|
-
top: 0,
|
|
42
|
-
bottom: 0,
|
|
43
|
-
}}
|
|
44
|
-
/>
|
|
45
|
-
</Map>
|
|
46
|
-
)
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
export default MapDefault
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as MapDefault } from './_map_default.jsx'
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { renderKit } from '../utilities/test-utils'
|
|
2
|
-
|
|
3
|
-
import { Map } 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(Map , props)
|
|
16
|
-
expect(kit).toBeInTheDocument()
|
|
17
|
-
})
|