playbook_ui 11.10.0.pre.alpha.pagination1 → 11.10.0.pre.alpha.pre.bold1
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/pb_filter/docs/_filter_default.html.erb +1 -2
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb +1 -2
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx +1 -0
- data/app/pb_kits/playbook/pb_title/_title.scss +7 -0
- data/app/pb_kits/playbook/pb_title/_title.tsx +4 -1
- data/app/pb_kits/playbook/pb_title/docs/{_title_light.html.erb → _title_default.html.erb} +1 -1
- data/app/pb_kits/playbook/pb_title/docs/{_title_light.jsx → _title_default.jsx} +2 -2
- data/app/pb_kits/playbook/pb_title/docs/{_title_light.md → _title_default.md} +0 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb +3 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx +33 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md +3 -0
- data/app/pb_kits/playbook/pb_title/docs/example.yml +4 -2
- data/app/pb_kits/playbook/pb_title/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_title/title.rb +6 -1
- data/app/pb_kits/playbook/pb_title/title.test.js +13 -0
- data/app/pb_kits/playbook/tokens/_titles.scss +11 -0
- data/lib/playbook/version.rb +2 -2
- metadata +8 -11
- data/app/pb_kits/playbook/pb_pagination/_pagination.scss +0 -59
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb +0 -1
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.md +0 -1
- data/app/pb_kits/playbook/pb_pagination/docs/example.yml +0 -6
- data/app/pb_kits/playbook/pb_pagination/pagination.html.erb +0 -7
- data/app/pb_kits/playbook/pb_pagination/pagination.rb +0 -11
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 3a43eeb1b663289ece01c3728bf0c0d0348b53dcaa3ff791ac1fe255320d6f82
|
|
4
|
+
data.tar.gz: cf333518cc9c0532f39673f3203331652d592d4bad9b39556c07ffa126aa2a9c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 9d28385a01e24ac9aca74db35b63c0d4799373a9912f0a42202f3dfa5e67a4a93f1c1299de00a4b545007a8c53a82928f990219b1db1ef25b8ff791a68aae003
|
|
7
|
+
data.tar.gz: 754c695cdb22bf7dfbf63550804c6f464773df5f33106995dad2266e0dc5c01e2545b88f63a9b909839cdaf5f2b10bbeb6167af180160fc88bef775ba61ba0f6
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
pb_rails("filter", props: {
|
|
3
3
|
min_width: "360px",
|
|
4
4
|
id: "1",
|
|
5
|
+
margin_bottom: "xl",
|
|
5
6
|
filters: [
|
|
6
7
|
{ name: "name", value: "John Wick" },
|
|
7
8
|
{ name: "city", value: "San Francisco"}
|
|
@@ -35,8 +36,6 @@
|
|
|
35
36
|
<% end %>
|
|
36
37
|
<% end %>
|
|
37
38
|
|
|
38
|
-
<br>
|
|
39
|
-
<br>
|
|
40
39
|
|
|
41
40
|
<%=
|
|
42
41
|
pb_rails("filter", props: {
|
|
@@ -22,6 +22,7 @@ const FilterDefault = (props) => {
|
|
|
22
22
|
'Full Name': 'John Wick',
|
|
23
23
|
'City': 'San Francisco',
|
|
24
24
|
}}
|
|
25
|
+
marginBottom="xl"
|
|
25
26
|
minWidth="375px"
|
|
26
27
|
onSortChange={SortingChangeCallback}
|
|
27
28
|
results={1}
|
|
@@ -72,7 +73,6 @@ const FilterDefault = (props) => {
|
|
|
72
73
|
|
|
73
74
|
</Filter>
|
|
74
75
|
|
|
75
|
-
<br />
|
|
76
76
|
|
|
77
77
|
<Filter
|
|
78
78
|
double
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
pb_rails("filter", props: {
|
|
3
3
|
min_width: "360px",
|
|
4
4
|
id: "3",
|
|
5
|
+
margin_bottom: "xl",
|
|
5
6
|
background: false,
|
|
6
7
|
filters: [
|
|
7
8
|
{ name: "name", value: "John Wick" },
|
|
@@ -37,8 +38,6 @@
|
|
|
37
38
|
<% end %>
|
|
38
39
|
<% end %>
|
|
39
40
|
|
|
40
|
-
<br>
|
|
41
|
-
|
|
42
41
|
<%=
|
|
43
42
|
pb_rails("filter", props: {
|
|
44
43
|
min_width: "360px",
|
|
@@ -6,16 +6,19 @@
|
|
|
6
6
|
&[class*=_1] {
|
|
7
7
|
@include pb_title_1;
|
|
8
8
|
@include title_colors;
|
|
9
|
+
@include pb_title_bold;
|
|
9
10
|
}
|
|
10
11
|
|
|
11
12
|
&[class*=_2] {
|
|
12
13
|
@include pb_title_2;
|
|
13
14
|
@include title_colors;
|
|
15
|
+
@include pb_title_bold;
|
|
14
16
|
}
|
|
15
17
|
|
|
16
18
|
&[class*=_3] {
|
|
17
19
|
@include pb_title_3;
|
|
18
20
|
@include title_colors;
|
|
21
|
+
@include pb_title_bold;
|
|
19
22
|
}
|
|
20
23
|
|
|
21
24
|
&[class*=_4] {
|
|
@@ -26,4 +29,8 @@
|
|
|
26
29
|
&.dark {
|
|
27
30
|
@include pb_title_dark;
|
|
28
31
|
}
|
|
32
|
+
|
|
33
|
+
&[class*=_thin] {
|
|
34
|
+
@include pb_title_thin;
|
|
35
|
+
}
|
|
29
36
|
}
|
|
@@ -5,6 +5,7 @@ import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalPr
|
|
|
5
5
|
|
|
6
6
|
type TitleProps = {
|
|
7
7
|
aria?: {[key: string]: string},
|
|
8
|
+
bold?: boolean,
|
|
8
9
|
children?: React.ReactChild[] | React.ReactChild,
|
|
9
10
|
className?: string,
|
|
10
11
|
color?: "default" | "light" | "lighter" | "success" | "error" | "link",
|
|
@@ -20,6 +21,7 @@ const Title = (props: TitleProps): React.ReactElement => {
|
|
|
20
21
|
if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
|
|
21
22
|
const {
|
|
22
23
|
aria = {},
|
|
24
|
+
bold = true,
|
|
23
25
|
children,
|
|
24
26
|
className,
|
|
25
27
|
color,
|
|
@@ -33,8 +35,9 @@ const Title = (props: TitleProps): React.ReactElement => {
|
|
|
33
35
|
|
|
34
36
|
const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
|
|
35
37
|
const dataProps: {[key: string]: string | number} = buildDataProps(data)
|
|
38
|
+
const getBold = bold ? '' : 'thin'
|
|
36
39
|
const classes = classnames(
|
|
37
|
-
buildCss('pb_title_kit', `size_${size}`, variant, color),
|
|
40
|
+
buildCss('pb_title_kit', `size_${size}`, variant, color, getBold),
|
|
38
41
|
globalProps(props),
|
|
39
42
|
className,
|
|
40
43
|
)
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
<br/>
|
|
7
7
|
|
|
8
|
-
<%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>
|
|
8
|
+
<%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>
|
|
9
9
|
<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>
|
|
10
10
|
<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
|
|
11
11
|
<%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>
|
|
@@ -2,7 +2,7 @@ import React from 'react'
|
|
|
2
2
|
|
|
3
3
|
import Title from '../_title'
|
|
4
4
|
|
|
5
|
-
const
|
|
5
|
+
const TitleDefault = (props) => {
|
|
6
6
|
return (
|
|
7
7
|
<div>
|
|
8
8
|
<Title
|
|
@@ -38,4 +38,4 @@ const TitleLight = (props) => {
|
|
|
38
38
|
)
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
export default
|
|
41
|
+
export default TitleDefault
|
|
File without changes
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import Title from '../_title'
|
|
4
|
+
|
|
5
|
+
const TitleLightWeight = (props) => {
|
|
6
|
+
return (
|
|
7
|
+
<div>
|
|
8
|
+
<Title
|
|
9
|
+
bold={false}
|
|
10
|
+
size={3}
|
|
11
|
+
tag="h3"
|
|
12
|
+
text="Title 3"
|
|
13
|
+
{...props}
|
|
14
|
+
/>
|
|
15
|
+
<Title
|
|
16
|
+
bold={false}
|
|
17
|
+
size={2}
|
|
18
|
+
tag="h2"
|
|
19
|
+
text="Title 2"
|
|
20
|
+
{...props}
|
|
21
|
+
/>
|
|
22
|
+
<Title
|
|
23
|
+
bold={false}
|
|
24
|
+
size={1}
|
|
25
|
+
tag="h1"
|
|
26
|
+
text="Title 1"
|
|
27
|
+
{...props}
|
|
28
|
+
/>
|
|
29
|
+
</div>
|
|
30
|
+
)
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export default TitleLightWeight
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
examples:
|
|
2
2
|
rails:
|
|
3
|
-
-
|
|
3
|
+
- title_default: Default UI
|
|
4
|
+
- title_light_weight: Light Weight UI
|
|
4
5
|
- title_colors: Colors
|
|
5
6
|
|
|
6
7
|
react:
|
|
7
|
-
-
|
|
8
|
+
- title_default: Default UI
|
|
9
|
+
- title_light_weight: Light Weight UI
|
|
8
10
|
- title_colors: Colors
|
|
@@ -17,9 +17,14 @@ module Playbook
|
|
|
17
17
|
values: [nil, "link"],
|
|
18
18
|
default: nil,
|
|
19
19
|
deprecated: true
|
|
20
|
+
prop :bold, type: Playbook::Props::Boolean, default: true
|
|
20
21
|
|
|
21
22
|
def classname
|
|
22
|
-
generate_classname("pb_title_kit", size, variant, color)
|
|
23
|
+
generate_classname("pb_title_kit", size, variant, color, is_bold)
|
|
24
|
+
end
|
|
25
|
+
|
|
26
|
+
def is_bold
|
|
27
|
+
bold ? nil : "thin"
|
|
23
28
|
end
|
|
24
29
|
end
|
|
25
30
|
end
|
|
@@ -15,6 +15,19 @@ test('returns namespaced class name', () => {
|
|
|
15
15
|
expect(kit).toHaveClass('pb_title_kit_size_3')
|
|
16
16
|
})
|
|
17
17
|
|
|
18
|
+
test('with thin font weight', () => {
|
|
19
|
+
render(
|
|
20
|
+
<Title
|
|
21
|
+
bold={false}
|
|
22
|
+
data={{ testid: 'primary-test' }}
|
|
23
|
+
text="Test thin font weight"
|
|
24
|
+
/>
|
|
25
|
+
)
|
|
26
|
+
|
|
27
|
+
const kit = screen.getByTestId('primary-test')
|
|
28
|
+
expect(kit).toHaveClass('pb_title_kit_size_3_thin')
|
|
29
|
+
})
|
|
30
|
+
|
|
18
31
|
test('with colors', () => {
|
|
19
32
|
render(
|
|
20
33
|
<Title
|
|
@@ -31,8 +31,19 @@
|
|
|
31
31
|
|
|
32
32
|
@mixin pb_title_4 {
|
|
33
33
|
@include pb_title($heading_4, $bolder);
|
|
34
|
+
letter-spacing: -0.03em !important;
|
|
34
35
|
}
|
|
35
36
|
|
|
36
37
|
@mixin pb_title_dark {
|
|
37
38
|
color: $text_dk_default;
|
|
38
39
|
}
|
|
40
|
+
|
|
41
|
+
@mixin pb_title_bold {
|
|
42
|
+
font-weight: $bolder;
|
|
43
|
+
letter-spacing: 0em;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@mixin pb_title_thin {
|
|
47
|
+
font-weight: $lighter;
|
|
48
|
+
letter-spacing: $lspace_tight;
|
|
49
|
+
}
|
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.10.0.pre.alpha.
|
|
4
|
+
version: 11.10.0.pre.alpha.pre.bold1
|
|
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-10-
|
|
12
|
+
date: 2022-10-27 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionpack
|
|
@@ -1433,12 +1433,6 @@ files:
|
|
|
1433
1433
|
- app/pb_kits/playbook/pb_online_status/docs/index.js
|
|
1434
1434
|
- app/pb_kits/playbook/pb_online_status/online_status.html.erb
|
|
1435
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/docs/_pagination_default.html.erb
|
|
1438
|
-
- app/pb_kits/playbook/pb_pagination/docs/_pagination_default.md
|
|
1439
|
-
- app/pb_kits/playbook/pb_pagination/docs/example.yml
|
|
1440
|
-
- app/pb_kits/playbook/pb_pagination/pagination.html.erb
|
|
1441
|
-
- app/pb_kits/playbook/pb_pagination/pagination.rb
|
|
1442
1436
|
- app/pb_kits/playbook/pb_passphrase/_passphrase.jsx
|
|
1443
1437
|
- app/pb_kits/playbook/pb_passphrase/_passphrase.scss
|
|
1444
1438
|
- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb
|
|
@@ -2001,9 +1995,12 @@ files:
|
|
|
2001
1995
|
- app/pb_kits/playbook/pb_title/docs/_title_colors.html.erb
|
|
2002
1996
|
- app/pb_kits/playbook/pb_title/docs/_title_colors.jsx
|
|
2003
1997
|
- app/pb_kits/playbook/pb_title/docs/_title_colors.md
|
|
2004
|
-
- app/pb_kits/playbook/pb_title/docs/
|
|
2005
|
-
- app/pb_kits/playbook/pb_title/docs/
|
|
2006
|
-
- app/pb_kits/playbook/pb_title/docs/
|
|
1998
|
+
- app/pb_kits/playbook/pb_title/docs/_title_default.html.erb
|
|
1999
|
+
- app/pb_kits/playbook/pb_title/docs/_title_default.jsx
|
|
2000
|
+
- app/pb_kits/playbook/pb_title/docs/_title_default.md
|
|
2001
|
+
- app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb
|
|
2002
|
+
- app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx
|
|
2003
|
+
- app/pb_kits/playbook/pb_title/docs/_title_light_weight.md
|
|
2007
2004
|
- app/pb_kits/playbook/pb_title/docs/example.yml
|
|
2008
2005
|
- app/pb_kits/playbook/pb_title/docs/index.js
|
|
2009
2006
|
- app/pb_kits/playbook/pb_title/title.html.erb
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
@import "tokens/colors";
|
|
2
|
-
@import "tokens/typography";
|
|
3
|
-
@import "tokens/border_radius";
|
|
4
|
-
@import "tokens/shadows";
|
|
5
|
-
|
|
6
|
-
.pb_pagination {
|
|
7
|
-
.pagination > li > a,
|
|
8
|
-
.pagination > li > span {
|
|
9
|
-
border: 0 !important;
|
|
10
|
-
margin-top: 1px;
|
|
11
|
-
margin-bottom: 1px;
|
|
12
|
-
}
|
|
13
|
-
.pagination > li:first-child > a,
|
|
14
|
-
.pagination > li:first-child > span {
|
|
15
|
-
border-right: 1px solid $border_light !important;
|
|
16
|
-
z-index: 2;
|
|
17
|
-
}
|
|
18
|
-
.pagination > li:last-child > a,
|
|
19
|
-
.pagination > li:last-child > span {
|
|
20
|
-
border-left: 1px solid $border_light !important;
|
|
21
|
-
z-index: 2;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.pagination {
|
|
25
|
-
border: 1px solid $border_light;
|
|
26
|
-
background-color: $white;
|
|
27
|
-
|
|
28
|
-
a {
|
|
29
|
-
color: $text_lt_default !important;
|
|
30
|
-
font-size: $text_small;
|
|
31
|
-
font-weight: $bold;
|
|
32
|
-
border: none;
|
|
33
|
-
margin-left: 1px;
|
|
34
|
-
margin-right: 1px;
|
|
35
|
-
|
|
36
|
-
&:hover {
|
|
37
|
-
background-color: $active_light;
|
|
38
|
-
color: $primary !important;
|
|
39
|
-
border-radius: $border_rad_light;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
&:focus {
|
|
43
|
-
outline: 1px solid $primary !important;
|
|
44
|
-
border-radius: $border_rad_light;
|
|
45
|
-
outline-offset: -1px;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
.active > span {
|
|
49
|
-
background-color: $primary;
|
|
50
|
-
border-radius: $border_rad_light;
|
|
51
|
-
margin-left: 1px;
|
|
52
|
-
margin-right: 1px;
|
|
53
|
-
|
|
54
|
-
&:hover {
|
|
55
|
-
box-shadow: $shadow_deeper;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<%= pb_rails("pagination") %>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
To apply our pagination CSS styles in rails, wrap the `will_paginate` component in our pagination component.
|