playbook_ui 11.16.0 → 11.18.0.pre.alpha.pagutility1

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: ed9c5868b671e135987a4e3c391d8cdfa925217d8134552596aab8beb6dde627
4
- data.tar.gz: ffb9b388c45c05caf25b28c88f665525c24ceca2e7f52adf71bb5b70104dba73
3
+ metadata.gz: fb0f4b600e88ebbcdc4d4c155a7d8cb7faa46eca1d832fc80e9e5759221076d2
4
+ data.tar.gz: 7fdd9a62804fcac63d2694b3fc8838c23391c3e29dfaae9bd631fef8b3888afe
5
5
  SHA512:
6
- metadata.gz: aa935a21ba75a2fbaba40c7dd0c77554d12a5af159e0624ce965f7e81b8edca76922925b011cc3b1960db3fd6414de61f17c4b35f862105c55e0f48423e28d93
7
- data.tar.gz: 6b72e6f7857aecfd8030f75ac6e07de05c2f30ab38ab84274762e34e06bb81441c4520ad2fb4c82c37fcde314827bf5b149b9a6c79fb799381c7cf2481758b4a
6
+ metadata.gz: 59d538351cbd81240e48d527f5a3f3b860960c30c87d2f772036098abadd587a98e0f05b716687e337de6351663e77216670258bcfaad4936b1e521144a386a1
7
+ data.tar.gz: 2e6b4a3a58c2d79b2b03973feac6c509a49fcdca4a9fb46ccd5fb0c7e19b350dadbb6dcb80a8735d6d35d65f481b49399b1f2239520c5f0287fe5c58171204e4
@@ -103,3 +103,4 @@
103
103
  @import './utilities/line_height';
104
104
  @import './utilities/display';
105
105
  @import './utilities/flexbox';
106
+ @import './utilities/pagination';
@@ -1,19 +1,25 @@
1
+ /* eslint-disable react/no-multi-comp */
1
2
  // @flow
2
3
 
3
- import React from 'react'
4
- import ReactDOM from 'react-dom'
4
+ import React, {useEffect} from "react";
5
+ import ReactDOM from "react-dom";
5
6
 
6
7
  import {
7
8
  Popper,
8
9
  Manager as PopperManager,
9
10
  PopperProps,
10
11
  Reference as PopperReference,
11
- } from 'react-popper'
12
+ } from "react-popper";
12
13
 
13
- import { buildAriaProps, buildCss, buildDataProps, noop } from '../utilities/props'
14
+ import {
15
+ buildAriaProps,
16
+ buildCss,
17
+ buildDataProps,
18
+ noop,
19
+ } from "../utilities/props";
14
20
 
15
- import classnames from 'classnames'
16
- import { globalProps } from '../utilities/globalProps'
21
+ import classnames from "classnames";
22
+ import { globalProps } from "../utilities/globalProps";
17
23
 
18
24
  type PbPopoverProps = {
19
25
  aria?: object,
@@ -25,7 +31,7 @@ type PbPopoverProps = {
25
31
  reference: PopperReference,
26
32
  show?: boolean,
27
33
  shouldClosePopover?: () => boolean,
28
- } & PopperProps
34
+ } & PopperProps;
29
35
 
30
36
  // Prop enabled default modifiers here
31
37
  // https://popper.js.org/docs/v2/modifiers
@@ -34,17 +40,17 @@ const POPOVER_MODIFIERS = {
34
40
  offset: {
35
41
  //https://popper.js.org/docs/v2/modifiers/offset/
36
42
  enabled: true,
37
- name: 'offset',
43
+ name: "offset",
38
44
  options: {
39
45
  offset: [0, 20],
40
46
  },
41
- phase: 'main',
47
+ phase: "main",
42
48
  },
43
- }
49
+ };
44
50
 
45
51
  const popoverModifiers = ({ modifiers, offset }) => {
46
- return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers
47
- }
52
+ return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers;
53
+ };
48
54
 
49
55
  const Popover = (props: PbPopoverProps) => {
50
56
  const {
@@ -62,11 +68,14 @@ const Popover = (props: PbPopoverProps) => {
62
68
  maxWidth,
63
69
  minHeight,
64
70
  minWidth,
65
- } = props
66
-
67
- const popoverSpacing = globalProps(props).includes('dark') || !globalProps(props) ? 'p_sm' : globalProps(props)
68
- const overflowHandling = maxHeight || maxWidth ? 'overflow_handling' : ''
69
- const zIndexStyle = zIndex ? { zIndex: zIndex } : {}
71
+ } = props;
72
+
73
+ const popoverSpacing =
74
+ globalProps(props).includes("dark") || !globalProps(props)
75
+ ? "p_sm"
76
+ : globalProps(props);
77
+ const overflowHandling = maxHeight || maxWidth ? "overflow_handling" : "";
78
+ const zIndexStyle = zIndex ? { zIndex: zIndex } : {};
70
79
  const widthHeightStyles = () => {
71
80
  return Object.assign(
72
81
  {},
@@ -74,15 +83,15 @@ const Popover = (props: PbPopoverProps) => {
74
83
  maxWidth ? { maxWidth: maxWidth } : {},
75
84
  minHeight ? { minHeight: minHeight } : {},
76
85
  minWidth ? { minWidth: minWidth } : {}
77
- )
78
- }
79
- const ariaProps = buildAriaProps(aria)
80
- const dataProps = buildDataProps(data)
86
+ );
87
+ };
88
+ const ariaProps = buildAriaProps(aria);
89
+ const dataProps = buildDataProps(data);
81
90
  const classes = classnames(
82
- buildCss('pb_popover_kit'),
91
+ buildCss("pb_popover_kit"),
83
92
  globalProps(props),
84
93
  className
85
- )
94
+ );
86
95
 
87
96
  return (
88
97
  <Popper
@@ -99,20 +108,14 @@ const Popover = (props: PbPopoverProps) => {
99
108
  data-placement={placement}
100
109
  id={id}
101
110
  ref={ref}
102
- style={Object.assign(
103
- {},
104
- style,
105
- zIndexStyle
106
- )}
111
+ style={Object.assign({}, style, zIndexStyle)}
107
112
  >
108
113
  <div
109
- className={classnames(
110
- `${buildCss('pb_popover_tooltip')} show`
111
- )}
114
+ className={classnames(`${buildCss("pb_popover_tooltip")} show`)}
112
115
  >
113
116
  <div
114
117
  className={classnames(
115
- 'pb_popover_body',
118
+ "pb_popover_body",
116
119
  popoverSpacing,
117
120
  overflowHandling
118
121
  )}
@@ -122,25 +125,33 @@ const Popover = (props: PbPopoverProps) => {
122
125
  </div>
123
126
  </div>
124
127
  </div>
125
- )
128
+ );
126
129
  }}
127
130
  </Popper>
128
- )
129
- }
130
-
131
- export default class PbReactPopover extends React.Component<PbPopoverProps> {
132
- static defaultProps = {
133
- modifiers: [],
134
- offset: false,
135
- placement: 'left',
136
- portal: 'body',
137
- show: false,
138
- shouldClosePopover: noop,
139
- usePortal: true,
140
- }
141
-
142
- componentDidMount() {
143
- const { closeOnClick, shouldClosePopover } = this.props
131
+ );
132
+ };
133
+
134
+ const PbReactPopover = (props: PbPopoverProps) => {
135
+ const {
136
+ className,
137
+ children,
138
+ modifiers = [],
139
+ offset = false,
140
+ placement = "left",
141
+ portal = "body",
142
+ reference,
143
+ referenceElement,
144
+ show = false,
145
+ usePortal = true,
146
+ zIndex,
147
+ maxHeight,
148
+ maxWidth,
149
+ minHeight,
150
+ minWidth,
151
+ } = props;
152
+
153
+ useEffect(() => {
154
+ const { closeOnClick, shouldClosePopover = noop } = props
144
155
 
145
156
  if (!closeOnClick) return
146
157
 
@@ -151,87 +162,66 @@ export default class PbReactPopover extends React.Component<PbPopoverProps> {
151
162
  target.closest('.pb_popover_reference_wrapper') !== null
152
163
 
153
164
  switch (closeOnClick) {
154
- case 'outside':
155
- if (!targetIsPopover || targetIsReference) {
156
- shouldClosePopover(true)
157
- }
158
- break
159
- case 'inside':
160
- if (targetIsPopover || targetIsReference) {
165
+ case 'outside':
166
+ if (!targetIsPopover || targetIsReference) {
167
+ shouldClosePopover(true)
168
+ }
169
+ break
170
+ case 'inside':
171
+ if (targetIsPopover || targetIsReference) {
172
+ shouldClosePopover(true)
173
+ }
174
+ break
175
+ case 'any':
161
176
  shouldClosePopover(true)
162
- }
163
- break
164
- case 'any':
165
- shouldClosePopover(true)
166
- break
177
+ break
167
178
  }
168
- })
169
- }
170
-
171
- props: PbPopoverProps
172
-
173
- render() {
174
- const {
175
- className,
176
- children,
177
- modifiers,
178
- offset,
179
- placement,
180
- portal,
181
- reference,
182
- referenceElement,
183
- show,
184
- usePortal,
185
- zIndex,
186
- maxHeight,
187
- maxWidth,
188
- minHeight,
189
- minWidth,
190
- } = this.props
191
-
192
- const popoverComponent = (
193
- <Popover
194
- {...this.props}
195
- className={className}
196
- maxHeight={maxHeight}
197
- maxWidth={maxWidth}
198
- minHeight={minHeight}
199
- minWidth={minWidth}
200
- modifiers={modifiers}
201
- offset={offset}
202
- placement={placement}
203
- referenceElement={referenceElement}
204
- zIndex={zIndex}
205
- >
206
- {children}
207
- </Popover>
208
- )
209
-
210
- return (
211
- <PopperManager>
212
- <If condition={reference && !referenceElement}>
213
- <PopperReference>
214
- {({ ref }) => (
215
- <span
216
- className="pb_popover_reference_wrapper"
217
- ref={ref}
218
- >
219
- <reference.type {...reference.props} />
220
- </span>
221
- )}
222
- </PopperReference>
223
- </If>
224
- <If condition={show}>
225
- <If condition={usePortal}>
226
- {ReactDOM.createPortal(
227
- popoverComponent,
228
- document.querySelector(portal)
229
- )}
230
- <Else />
231
- {popoverComponent}
232
- </If>
179
+ }, { capture: true })
180
+ }, [])
181
+
182
+ const popoverComponent = (
183
+ <Popover
184
+ className={className}
185
+ maxHeight={maxHeight}
186
+ maxWidth={maxWidth}
187
+ minHeight={minHeight}
188
+ minWidth={minWidth}
189
+ modifiers={modifiers}
190
+ offset={offset}
191
+ placement={placement}
192
+ referenceElement={referenceElement}
193
+ zIndex={zIndex}
194
+ {...props}
195
+ >
196
+ {children}
197
+ </Popover>
198
+ );
199
+
200
+ return (
201
+ <PopperManager>
202
+ <If condition={reference && !referenceElement}>
203
+ <PopperReference>
204
+ {({ ref }) => (
205
+ <span className="pb_popover_reference_wrapper"
206
+ ref={ref}
207
+ >
208
+ <reference.type {...reference.props} />
209
+ </span>
210
+ )}
211
+ </PopperReference>
212
+ </If>
213
+ <If condition={show}>
214
+ <If condition={usePortal}>
215
+ {ReactDOM.createPortal(
216
+ popoverComponent,
217
+ document.querySelector(portal)
218
+ )}
219
+ <Else />
220
+ {popoverComponent}
233
221
  </If>
234
- </PopperManager>
235
- )
236
- }
237
- }
222
+ </If>
223
+ </PopperManager>
224
+ );
225
+ };
226
+
227
+ export default PbReactPopover;
@@ -31,7 +31,7 @@ const PopoverClose = (props) => {
31
31
  }
32
32
 
33
33
  const handleAnyTogglePopover = () => {
34
- setAnyShowPopover(!showOutsidePopover)
34
+ setAnyShowPopover(!showAnyPopover)
35
35
  }
36
36
 
37
37
  const insidePopoverTrigger = (
@@ -1,6 +1,10 @@
1
1
  <%= pb_rails("button", props: { variant: "secondary", id: 'list' }) do %>
2
- Filter By
3
- <%= pb_rails("icon", props: { icon: "angle-down"}) %>
2
+ <%= pb_rails("flex", props: {align: "center"}) do %>
3
+ Filter By
4
+ <%= pb_rails("flex/flex_item", props: {margin_left: "xxs"}) do %>
5
+ <div id="arrow-icon" style="display: flex"></div>
6
+ <% end %>
7
+ <% end %>
4
8
  <% end %>
5
9
  <%= pb_rails("popover", props: {trigger_element_id: "list", tooltip_id: "list-tooltip", position: 'bottom', padding: "none"}) do %>
6
10
  <%= pb_rails("list", props: {ordered: false, dark: false, borderless: false, xpadding: true}) do %>
@@ -11,3 +15,21 @@
11
15
  <%= pb_rails("list/item") do %><a>Date Ended </a><% end %>
12
16
  <% end %>
13
17
  <% end %>
18
+
19
+
20
+ <script type="text/javascript">
21
+ const button = document.querySelector("#list")
22
+ let buttonClicked = false
23
+
24
+ const arrowDiv = document.querySelector("#arrow-icon")
25
+ arrowDiv.innerHTML = '<i class="far fa-angle-down"></i>'
26
+
27
+ button.onclick = () => {
28
+ buttonClicked = !buttonClicked
29
+ if (buttonClicked) {
30
+ arrowDiv.innerHTML = '<i class="far fa-angle-up"></i>'
31
+ } else {
32
+ arrowDiv.innerHTML = '<i class="far fa-angle-down"></i>'
33
+ }
34
+ }
35
+ </script>
@@ -5,6 +5,7 @@ import {
5
5
  List,
6
6
  ListItem,
7
7
  PbReactPopover,
8
+ Flex,
8
9
  } from '../..'
9
10
 
10
11
  const PopoverWithButton = (props) => {
@@ -19,11 +20,19 @@ const PopoverWithButton = (props) => {
19
20
  onClick={handleTogglePopover}
20
21
  variant="secondary"
21
22
  >
22
- {'Filter By'}
23
- <Icon
24
- fixedWidth
25
- icon="angle-down"
26
- />
23
+ <Flex align="center">
24
+ {"Filter By"}
25
+ <Flex
26
+ className={showPopover ? "fa-flip-vertical" : ""}
27
+ display="inline_flex"
28
+ >
29
+ <Icon
30
+ fixedWidth
31
+ icon="angle-down"
32
+ margin-left="xxs"
33
+ />
34
+ </Flex>
35
+ </Flex>
27
36
  </Button>
28
37
  )
29
38
 
@@ -9,7 +9,6 @@
9
9
  @import "side_highlight";
10
10
  @import "alignment";
11
11
  @import "hover";
12
- @import "as-cards";
13
12
  @import "single-line";
14
13
  @import "table-dark";
15
14
  @import "mobile";
@@ -81,6 +81,10 @@
81
81
  border-left-width: 1px !important;
82
82
  border-right-width: 1px !important;
83
83
  border-top-width: 1px !important;
84
+ &:after {
85
+ height: 0;
86
+ background-color: transparent;
87
+ }
84
88
 
85
89
  &:first-child {
86
90
  border-radius: $border_rad_light $border_rad_light 0 0 !important;
@@ -12,39 +12,42 @@ $transition-speed: 0.2s;
12
12
  tr {
13
13
  box-shadow: 0 0 0 $white;
14
14
  transition: box-shadow $transition-speed ease;
15
-
16
15
  td {
17
16
  border-top-color: transparent;
18
- border-top-width: 1px !important;
19
- transition: all $transition-speed ease;
17
+ border-top-width: 0;
18
+ transition: all $transition-speed ease;
20
19
  }
21
-
22
- @media (hover:hover) {
20
+ @media (hover:hover) {
21
+ td {
22
+ position: relative;
23
+ &:after {
24
+ transition: background-color $transition-speed ease, height $transition-speed ease;
25
+ content: "";
26
+ position: absolute;
27
+ display: block;
28
+ top: -1px;
29
+ left: 0;
30
+ right: 0;
31
+ height: 0;
32
+ background-color: transparent;
33
+ }
34
+ &:first-child:after {
35
+ left: -1px;
36
+ }
37
+ &:last-child:after {
38
+ right: -1px;
39
+ }
40
+ }
23
41
  &:hover {
24
42
  box-shadow: 0 2px 10px 0 rgba($slate, $opacity-6);
25
-
26
43
  td {
27
- background: $white;
28
44
  border-color: darken($border_light, 10%);
29
- border-top-width: 1px;
45
+ border-top-width: 0;
30
46
  border-top-color: transparent;
31
- }
32
- }
33
- }
34
- }
35
- }
36
- &.as-cards {
37
- tbody {
38
- tr {
39
- td {
40
- border-top-color: $border_light;
41
- border-top-width: 1px;
42
- }
43
- @media (hover:hover) {
44
- &:hover {
45
- td {
46
- border-top-width: 1px;
47
- border-top-color: $border_light;
47
+ &:after {
48
+ transition: background-color $transition-speed ease, height $transition-speed ease;
49
+ background-color: darken($border_light, 10%);
50
+ height: 1px;
48
51
  }
49
52
  }
50
53
  }
@@ -81,6 +81,10 @@
81
81
  border-left-width: 1px !important;
82
82
  border-right-width: 1px !important;
83
83
  border-top-width: 1px !important;
84
+ &:after {
85
+ height: 0;
86
+ background-color: transparent;
87
+ }
84
88
 
85
89
  &:first-child {
86
90
  border-radius: $border_rad_light $border_rad_light 0 0 !important;
@@ -81,6 +81,10 @@
81
81
  border-left-width: 1px !important;
82
82
  border-right-width: 1px !important;
83
83
  border-top-width: 1px !important;
84
+ &:after {
85
+ height: 0;
86
+ background-color: transparent;
87
+ }
84
88
 
85
89
  &:first-child {
86
90
  border-radius: $border_rad_light $border_rad_light 0 0 !important;
@@ -9,7 +9,6 @@
9
9
  td {
10
10
  white-space: nowrap;
11
11
  text-overflow: ellipsis;
12
- overflow: hidden;
13
12
 
14
13
  & > * {
15
14
  &:not(.btn, br) {
@@ -57,33 +57,6 @@
57
57
  }
58
58
  }
59
59
  }
60
-
61
- &.as-cards {
62
- border: 1px solid $border_light;
63
- border-radius: 4px;
64
-
65
- thead {
66
- tr {
67
- margin: $space-xs 0 0;
68
- padding: 0 $space-xs;
69
- border-bottom: 1px solid $border_light;
70
-
71
- th {
72
- border-width: 0;
73
- }
74
- }
75
- }
76
- tbody {
77
- tr {
78
- margin: $space-xs;
79
- width: calc(100% - #{$space-xs}*2);
80
-
81
- td {
82
- border-top-width: 1px;
83
- }
84
- }
85
- }
86
- }
87
60
  }
88
61
  }
89
62
  }
@@ -81,6 +81,10 @@
81
81
  border-left-width: 1px !important;
82
82
  border-right-width: 1px !important;
83
83
  border-top-width: 1px !important;
84
+ &:after {
85
+ height: 0;
86
+ background-color: transparent;
87
+ }
84
88
 
85
89
  &:first-child {
86
90
  border-radius: $border_rad_light $border_rad_light 0 0 !important;
@@ -3,6 +3,9 @@ import React from 'react'
3
3
  import classnames from 'classnames'
4
4
  import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
5
5
  import { globalProps } from '../utilities/globalProps'
6
+ import Veteran from './badges/veteran.jsx';
7
+ import MillionDollar from './badges/million-dollar.jsx';
8
+
6
9
 
7
10
  type UserBadgeProps = {
8
11
  aria?: object,
@@ -23,7 +26,7 @@ const UserBadge = (props: UserBadgeProps) => {
23
26
  size = 'md',
24
27
  } = props
25
28
 
26
- const image = require(`./badges/${badge}.svg`)
29
+ const image = badge === "million-dollar" ? <MillionDollar /> : <Veteran />
27
30
  const ariaProps = buildAriaProps(aria)
28
31
  const dataProps = buildDataProps(data)
29
32
  const classes = classnames(
@@ -40,7 +43,7 @@ const UserBadge = (props: UserBadgeProps) => {
40
43
  id={id}
41
44
  >
42
45
  <div className="pb_user_badge_wrapper">
43
- <img src={image} />
46
+ {image}
44
47
  </div>
45
48
  </div>
46
49
  )
@@ -0,0 +1,363 @@
1
+ import * as React from "react"
2
+
3
+ const MillionDollar = (props) => (
4
+ <svg
5
+ style={{
6
+ enableBackground: "new 0 0 242.9 242.9",
7
+ }}
8
+ viewBox="0 0 242.9 242.9"
9
+ xmlSpace="preserve"
10
+ xmlns="http://www.w3.org/2000/svg"
11
+ {...props}
12
+ >
13
+ <circle cx={121.5}
14
+ cy={121.5}
15
+ r={121.5}
16
+ />
17
+ <linearGradient
18
+ gradientUnits="userSpaceOnUse"
19
+ id="a"
20
+ x1={42.483}
21
+ x2={200.309}
22
+ y1={35.645}
23
+ y2={35.645}
24
+ >
25
+ <stop
26
+ offset={0}
27
+ style={{
28
+ stopColor: "#e6b711",
29
+ }}
30
+ />
31
+ <stop
32
+ offset={0.128}
33
+ style={{
34
+ stopColor: "#eac23c",
35
+ }}
36
+ />
37
+ <stop
38
+ offset={0.278}
39
+ style={{
40
+ stopColor: "#ec6",
41
+ }}
42
+ />
43
+ <stop
44
+ offset={0.413}
45
+ style={{
46
+ stopColor: "#f1d485",
47
+ }}
48
+ />
49
+ <stop
50
+ offset={0.527}
51
+ style={{
52
+ stopColor: "#f2d998",
53
+ }}
54
+ />
55
+ <stop
56
+ offset={0.607}
57
+ style={{
58
+ stopColor: "#f3db9f",
59
+ }}
60
+ />
61
+ <stop
62
+ offset={1}
63
+ style={{
64
+ stopColor: "#e6b711",
65
+ }}
66
+ />
67
+ </linearGradient>
68
+ <path
69
+ d="M56.4 53.8c16.9-16.2 39.8-26.2 65-26.2 25.2 0 48.1 10 64.9 26.2h14c-19.1-22.2-47.4-36.3-78.9-36.3-31.5 0-59.8 14.1-78.9 36.3h13.9z"
70
+ style={{
71
+ fill: "url(#a)",
72
+ }}
73
+ />
74
+ <linearGradient
75
+ gradientUnits="userSpaceOnUse"
76
+ id="b"
77
+ x1={17.407}
78
+ x2={44.897}
79
+ y1={132.179}
80
+ y2={132.179}
81
+ >
82
+ <stop
83
+ offset={0}
84
+ style={{
85
+ stopColor: "#e6b711",
86
+ }}
87
+ />
88
+ <stop
89
+ offset={0.128}
90
+ style={{
91
+ stopColor: "#eac23c",
92
+ }}
93
+ />
94
+ <stop
95
+ offset={0.278}
96
+ style={{
97
+ stopColor: "#ec6",
98
+ }}
99
+ />
100
+ <stop
101
+ offset={0.413}
102
+ style={{
103
+ stopColor: "#f1d485",
104
+ }}
105
+ />
106
+ <stop
107
+ offset={0.527}
108
+ style={{
109
+ stopColor: "#f2d998",
110
+ }}
111
+ />
112
+ <stop
113
+ offset={0.607}
114
+ style={{
115
+ stopColor: "#f3db9f",
116
+ }}
117
+ />
118
+ <stop
119
+ offset={1}
120
+ style={{
121
+ stopColor: "#e6b711",
122
+ }}
123
+ />
124
+ </linearGradient>
125
+ <path
126
+ d="M44.9 175.7c-10.9-15.3-17.3-34-17.3-54.2 0-14.1 3.1-27.5 8.8-39.5H25.3c-5 12.2-7.8 25.5-7.8 39.5 0 22.7 7.3 43.8 19.8 60.9l7.6-6.7z"
127
+ style={{
128
+ fill: "url(#b)",
129
+ }}
130
+ />
131
+ <linearGradient
132
+ gradientUnits="userSpaceOnUse"
133
+ id="c"
134
+ x1={52.914}
135
+ x2={189.715}
136
+ y1={212.573}
137
+ y2={212.573}
138
+ >
139
+ <stop
140
+ offset={0}
141
+ style={{
142
+ stopColor: "#e6b711",
143
+ }}
144
+ />
145
+ <stop
146
+ offset={0.128}
147
+ style={{
148
+ stopColor: "#eac23c",
149
+ }}
150
+ />
151
+ <stop
152
+ offset={0.278}
153
+ style={{
154
+ stopColor: "#ec6",
155
+ }}
156
+ />
157
+ <stop
158
+ offset={0.413}
159
+ style={{
160
+ stopColor: "#f1d485",
161
+ }}
162
+ />
163
+ <stop
164
+ offset={0.527}
165
+ style={{
166
+ stopColor: "#f2d998",
167
+ }}
168
+ />
169
+ <stop
170
+ offset={0.607}
171
+ style={{
172
+ stopColor: "#f3db9f",
173
+ }}
174
+ />
175
+ <stop
176
+ offset={1}
177
+ style={{
178
+ stopColor: "#e6b711",
179
+ }}
180
+ />
181
+ </linearGradient>
182
+ <path
183
+ d="M173 199.8c-14.8 9.8-32.5 15.5-51.6 15.5s-37-5.8-51.8-15.6H52.9c18.3 16.1 42.3 25.8 68.5 25.8 26.1 0 50-9.7 68.3-25.7H173z"
184
+ style={{
185
+ fill: "url(#c)",
186
+ }}
187
+ />
188
+ <linearGradient
189
+ gradientUnits="userSpaceOnUse"
190
+ id="d"
191
+ x1={31.123}
192
+ x2={207.766}
193
+ y1={136.159}
194
+ y2={136.159}
195
+ >
196
+ <stop
197
+ offset={0}
198
+ style={{
199
+ stopColor: "#e6b711",
200
+ }}
201
+ />
202
+ <stop
203
+ offset={0.128}
204
+ style={{
205
+ stopColor: "#eac23c",
206
+ }}
207
+ />
208
+ <stop
209
+ offset={0.278}
210
+ style={{
211
+ stopColor: "#ec6",
212
+ }}
213
+ />
214
+ <stop
215
+ offset={0.413}
216
+ style={{
217
+ stopColor: "#f1d485",
218
+ }}
219
+ />
220
+ <stop
221
+ offset={0.527}
222
+ style={{
223
+ stopColor: "#f2d998",
224
+ }}
225
+ />
226
+ <stop
227
+ offset={0.607}
228
+ style={{
229
+ stopColor: "#f3db9f",
230
+ }}
231
+ />
232
+ <stop
233
+ offset={1}
234
+ style={{
235
+ stopColor: "#e6b711",
236
+ }}
237
+ />
238
+ </linearGradient>
239
+ <path
240
+ d="M139.2 193v-1.8c5-.4 10.2-.5 13.4-5 3.8-5.2 3.2-15.4 3.2-21.5V78.5l-47.3 120.4L61.2 81.2v61.1c0 13.6.5 35.1 12.5 44.2 4.3 3.2 9 3.9 14.2 4.7v1.8H31.1v-1.8c1.6-.4 3.2-.7 4.8-1.1 22.6-5.7 22.9-32.4 22.9-51.1v-37.8c0-6.1.5-13.3-3.2-18.5-4.5-6.1-13.4-7.2-20.4-7.5v-1.8H96l29.6 75.4 29.9-75.4h52.3v1.8c-4.8.4-10.2.9-13.4 5-3.8 4.8-3.2 15.9-3.2 21.9v62.5c0 6.3-.7 16.1 3.2 21.5 3.2 4.3 6.2 4.7 11.2 5v1.8h-66.4z"
241
+ style={{
242
+ fill: "url(#d)",
243
+ }}
244
+ />
245
+ <linearGradient
246
+ gradientUnits="userSpaceOnUse"
247
+ id="e"
248
+ x1={30.453}
249
+ x2={213.794}
250
+ y1={63.629}
251
+ y2={63.629}
252
+ >
253
+ <stop
254
+ offset={0}
255
+ style={{
256
+ stopColor: "#e6b711",
257
+ }}
258
+ />
259
+ <stop
260
+ offset={0.128}
261
+ style={{
262
+ stopColor: "#eac23c",
263
+ }}
264
+ />
265
+ <stop
266
+ offset={0.278}
267
+ style={{
268
+ stopColor: "#ec6",
269
+ }}
270
+ />
271
+ <stop
272
+ offset={0.413}
273
+ style={{
274
+ stopColor: "#f1d485",
275
+ }}
276
+ />
277
+ <stop
278
+ offset={0.527}
279
+ style={{
280
+ stopColor: "#f2d998",
281
+ }}
282
+ />
283
+ <stop
284
+ offset={0.607}
285
+ style={{
286
+ stopColor: "#f3db9f",
287
+ }}
288
+ />
289
+ <stop
290
+ offset={1}
291
+ style={{
292
+ stopColor: "#e6b711",
293
+ }}
294
+ />
295
+ </linearGradient>
296
+ <path
297
+ d="M30.5 60.6h183.3v6.1H30.5z"
298
+ style={{
299
+ fill: "url(#e)",
300
+ }}
301
+ />
302
+ <linearGradient
303
+ gradientUnits="userSpaceOnUse"
304
+ id="f"
305
+ x1={196.676}
306
+ x2={225.538}
307
+ y1={132.923}
308
+ y2={132.923}
309
+ >
310
+ <stop
311
+ offset={0}
312
+ style={{
313
+ stopColor: "#e6b711",
314
+ }}
315
+ />
316
+ <stop
317
+ offset={0.128}
318
+ style={{
319
+ stopColor: "#eac23c",
320
+ }}
321
+ />
322
+ <stop
323
+ offset={0.278}
324
+ style={{
325
+ stopColor: "#ec6",
326
+ }}
327
+ />
328
+ <stop
329
+ offset={0.413}
330
+ style={{
331
+ stopColor: "#f1d485",
332
+ }}
333
+ />
334
+ <stop
335
+ offset={0.527}
336
+ style={{
337
+ stopColor: "#f2d998",
338
+ }}
339
+ />
340
+ <stop
341
+ offset={0.607}
342
+ style={{
343
+ stopColor: "#f3db9f",
344
+ }}
345
+ />
346
+ <stop
347
+ offset={1}
348
+ style={{
349
+ stopColor: "#e6b711",
350
+ }}
351
+ />
352
+ </linearGradient>
353
+ <path
354
+ d="M196.7 177.5c11.5-15.6 18.7-35.2 18.7-56 0-14.1-3.1-27.5-8.8-39.5h11.1c5 12.2 7.8 25.5 7.8 39.5 0 23.4-7.8 45-20.9 62.4l-7.9-6.4z"
355
+ style={{
356
+ fill: "url(#f)",
357
+ }}
358
+ />
359
+ </svg>
360
+ )
361
+
362
+ export default MillionDollar
363
+
@@ -0,0 +1,28 @@
1
+ import * as React from "react"
2
+
3
+ const Veteran = (props) => (
4
+ <svg
5
+ viewBox="0 0 200 250"
6
+ xmlSpace="preserve"
7
+ xmlns="http://www.w3.org/2000/svg"
8
+ {...props}
9
+ >
10
+ <path
11
+ d="M198.4 71.5V71c-.2-1.2-1.4-2.1-1.4-2.1L103.2 2.7c-.7-.4-1-.6-1.6-.6-1.3 0-2.3 1-2.3 2.3v67.1h-.6v29.6h99.8l-.1-29.6z"
12
+ fill="#004876"
13
+ />
14
+ <path
15
+ d="M172.9 159.2c-31.4 23-33.2 24.3-33.2 24.3l-40.5 3.2v-29.4l73.7 1.9z"
16
+ fill="#FFF"
17
+ />
18
+ <path
19
+ d="M99.3 125.4V33.5L1.6 102.7l-.1.1c-1 .7-1.5 1.8-1.5 3v67.4c0 1.2.6 2.3 1.5 3l.1.1 93.5 66.3c1.7 1.2 4.1 0 4.1-2.1v-28.9l40.5-28-40.5.7v-25h73.7l25.4-16.9.2-16.8H99.3z"
20
+ fill="#BB2432"
21
+ />
22
+ <path d="M99.3 101.1h99.3v24.3H99.3z"
23
+ fill="#FFF"
24
+ />
25
+ </svg>
26
+ )
27
+
28
+ export default Veteran
@@ -8,7 +8,7 @@ Colors -----------------------------*/
8
8
  $royal: #0056CF !default;
9
9
  $purple: #9E64E9 !default;
10
10
  $teal: #00C4D7 !default;
11
- $red: #FF2229 !default;
11
+ $red: #DA0014 !default;
12
12
  $red_dark: #ff4a50 !default;
13
13
  $yellow: #F9BB00 !default;
14
14
  $green: #00CA74 !default;
@@ -160,7 +160,7 @@ $warning_secondary: lighten($warning, 10%);
160
160
  $warning_subtle: rgba($warning, $opacity_1);
161
161
  $error: $red !default;
162
162
  $error_dark: $red_dark !default;
163
- $error_dark_body: lighten($error_dark, 2%);
163
+ $error_dark_body: $error_dark;
164
164
  $error_secondary: lighten($error, 10%);
165
165
  $error_subtle: rgba($error, $opacity_1);
166
166
  $info: $teal !default;
@@ -0,0 +1,68 @@
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
+ li {
13
+ display: inline;
14
+ > a, li > span {
15
+ padding: 7px 13px;
16
+ text-decoration: none;
17
+ margin-left: -1px;
18
+ border: 0 !important;
19
+ }}
20
+ li:first-child > a, li:first-child > span {
21
+ padding: 7px 13px;
22
+ margin-left: .5px;
23
+ border-right: 1px solid $border_light !important;
24
+ z-index: 2;
25
+ }
26
+ li:last-child > a, li:last-child > span {
27
+ padding: 7px 13px;
28
+ margin-right: .5px;
29
+ border-left: 1px solid $border_light !important;
30
+ z-index: 2;
31
+ }
32
+ a {
33
+ color: $text_lt_default !important;
34
+ font-size: $text_small;
35
+ font-weight: $regular;
36
+ border: none;
37
+
38
+ &:hover {
39
+ background-color: $active_light;
40
+ color: $primary !important;
41
+ border-radius: $border_rad_light;
42
+ }
43
+
44
+ &:focus {
45
+ outline: 1px solid $primary !important;
46
+ border-radius: $border_rad_light;
47
+ outline-offset: -1px;
48
+ }
49
+ }
50
+ .active > span {
51
+ background-color: $primary !important;
52
+ border-radius: $border_rad_light;
53
+ color: #fff;
54
+ padding: 7px 10px;
55
+ border: 0 !important;
56
+ text-decoration: none;
57
+ font-weight: $bold;
58
+ font-size: $text_small;
59
+
60
+ &:hover {
61
+ box-shadow: $shadow_deeper;
62
+ }
63
+ }
64
+ .disabled > span {
65
+ padding: 7px 10px;
66
+ font-size: $text_small;
67
+ }
68
+ }
@@ -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
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "11.15.0"
5
- VERSION = "11.16.0"
4
+ PREVIOUS_VERSION = "11.18.0"
5
+ VERSION = "11.18.0.pre.alpha.pagutility1"
6
6
  end
data/lib/playbook.rb CHANGED
@@ -12,6 +12,7 @@ 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"
15
16
 
16
17
  module Playbook
17
18
  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.16.0
4
+ version: 11.18.0.pre.alpha.pagutility1
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-03 00:00:00.000000000 Z
12
+ date: 2023-01-13 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -123,6 +123,20 @@ 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'
126
140
  - !ruby/object:Gem::Dependency
127
141
  name: byebug
128
142
  requirement: !ruby/object:Gem::Requirement
@@ -1876,7 +1890,6 @@ files:
1876
1890
  - app/pb_kits/playbook/pb_table/index.js
1877
1891
  - app/pb_kits/playbook/pb_table/styles/_alignment.scss
1878
1892
  - app/pb_kits/playbook/pb_table/styles/_all.scss
1879
- - app/pb_kits/playbook/pb_table/styles/_as-cards.scss
1880
1893
  - app/pb_kits/playbook/pb_table/styles/_content.scss
1881
1894
  - app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss
1882
1895
  - app/pb_kits/playbook/pb_table/styles/_headers.scss
@@ -2187,7 +2200,9 @@ files:
2187
2200
  - app/pb_kits/playbook/pb_user/user.test.js
2188
2201
  - app/pb_kits/playbook/pb_user_badge/_user_badge.jsx
2189
2202
  - app/pb_kits/playbook/pb_user_badge/_user_badge.scss
2203
+ - app/pb_kits/playbook/pb_user_badge/badges/million-dollar.jsx
2190
2204
  - app/pb_kits/playbook/pb_user_badge/badges/million-dollar.svg
2205
+ - app/pb_kits/playbook/pb_user_badge/badges/veteran.jsx
2191
2206
  - app/pb_kits/playbook/pb_user_badge/badges/veteran.svg
2192
2207
  - app/pb_kits/playbook/pb_user_badge/docs/_description.md
2193
2208
  - app/pb_kits/playbook/pb_user_badge/docs/_footer.md
@@ -2258,6 +2273,7 @@ files:
2258
2273
  - app/pb_kits/playbook/utilities/_max_width.scss
2259
2274
  - app/pb_kits/playbook/utilities/_mixins.scss
2260
2275
  - app/pb_kits/playbook/utilities/_number_spacing.scss
2276
+ - app/pb_kits/playbook/utilities/_pagination.scss
2261
2277
  - app/pb_kits/playbook/utilities/_positioning.scss
2262
2278
  - app/pb_kits/playbook/utilities/_shadow.scss
2263
2279
  - app/pb_kits/playbook/utilities/_spacing.scss
@@ -2323,6 +2339,7 @@ files:
2323
2339
  - lib/playbook/markdown/template_handler.rb
2324
2340
  - lib/playbook/number_spacing.rb
2325
2341
  - lib/playbook/order.rb
2342
+ - lib/playbook/pagination_renderer.rb
2326
2343
  - lib/playbook/pb_doc_helper.rb
2327
2344
  - lib/playbook/pb_forms_helper.rb
2328
2345
  - lib/playbook/pb_kit_helper.rb
@@ -2361,9 +2378,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
2361
2378
  version: '0'
2362
2379
  required_rubygems_version: !ruby/object:Gem::Requirement
2363
2380
  requirements:
2364
- - - ">="
2381
+ - - ">"
2365
2382
  - !ruby/object:Gem::Version
2366
- version: '0'
2383
+ version: 1.3.1
2367
2384
  requirements: []
2368
2385
  rubygems_version: 3.3.7
2369
2386
  signing_key:
@@ -1,49 +0,0 @@
1
- [class^=pb_table] {
2
- &.table-sm,
3
- &.table-md,
4
- &.table-lg {
5
- &.as-cards {
6
- thead {
7
- tr {
8
- display: flex;
9
- width: 100%;
10
-
11
- th {
12
- flex-grow: 1;
13
- }
14
- }
15
- }
16
- tbody {
17
- tr {
18
- display: flex;
19
- align-items: stretch;
20
- flex-direction: row;
21
- justify-content: flex-start;
22
- width: 100%;
23
- margin: $space-xs 0;
24
-
25
- td {
26
- background: $white;
27
- flex-grow: 1;
28
- border-width: 1px 0;
29
-
30
- &:first-child {
31
- border-left-width: 1px;
32
- border-radius: 4px 0 0 4px;
33
- }
34
- &:last-child {
35
- border-right-width: 1px;
36
- border-radius: 0 4px 4px 0;
37
- }
38
- }
39
-
40
- &:last-child {
41
- td {
42
- border-top-width: 1px !important;
43
- }
44
- }
45
- }
46
- }
47
- }
48
- }
49
- }