playbook_ui 10.0.1 → 10.1.0
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 +1 -1
- data/app/pb_kits/playbook/pb_button/_button.scss +1 -0
- data/app/pb_kits/playbook/pb_button/_button_mixins.scss +18 -13
- data/app/pb_kits/playbook/pb_icon/_icon.jsx +3 -2
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +1 -1
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +11 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.html.erb +95 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx +64 -11
- data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb +2 -2
- data/app/pb_kits/playbook/pb_multiple_users/multiple_users.rb +3 -0
- data/app/pb_kits/playbook/pb_popover/_popover.scss +0 -8
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +2 -0
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx +3 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.jsx +4 -0
- data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.jsx +4 -0
- data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.scss +1 -1
- data/app/pb_kits/playbook/utilities/_number_spacing.scss +3 -0
- data/app/pb_kits/playbook/utilities/globalProps.js +7 -1
- data/lib/playbook/classnames.rb +1 -0
- data/lib/playbook/kit_base.rb +2 -0
- data/lib/playbook/number_spacing.rb +31 -0
- data/lib/playbook/version.rb +2 -2
- metadata +8 -4
- data/app/pb_kits/playbook/tokens/_fonts.scss +0 -97
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 4eac1f539de9ef040a2d8a04d06f67006e1f7fe858a2161cbc526a8303c66ff7
|
4
|
+
data.tar.gz: 91710c901df8071c7d3752a8d10c57a2595ae014137cc021cb65c7b43ef71e4f
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: c922a03b5f6f030294fe9765db29f0e30ad2efda6667269a68a77c438d809fc9c57fc40f3096d4bcf54710e3814e34feb6c8b71d347691577c7d68c717860bea
|
7
|
+
data.tar.gz: e074aa18cee2a0a17211040f8891f6e29625fdc9dc256399961702aa20680be8ec6ea5185af4dfd23573e982790c7709c03917e65ecb766f730bdbafc80508f8
|
@@ -1,4 +1,3 @@
|
|
1
|
-
@import 'tokens/fonts';
|
2
1
|
@import 'pb_background/background';
|
3
2
|
@import 'pb_body/body';
|
4
3
|
@import 'pb_bread_crumbs/bread_crumbs';
|
@@ -95,3 +94,4 @@
|
|
95
94
|
@import './utilities/spacing';
|
96
95
|
@import './utilities/max_width';
|
97
96
|
@import './utilities/positioning';
|
97
|
+
@import './utilities/number_spacing';
|
@@ -12,8 +12,17 @@ $pb_button_h_padding: 34px;
|
|
12
12
|
$pb_button_hover_darken: 4%;
|
13
13
|
$pb_button_border_width: 0px;
|
14
14
|
|
15
|
+
@mixin pb_button_variant($bg: $primary_action, $color: $text_dk_default, $border: transparent) {
|
16
|
+
background-color: $bg;
|
17
|
+
color: $color;
|
18
|
+
border-color: $border;
|
19
|
+
|
20
|
+
&:active {
|
21
|
+
border-color: darken($bg, $pb_button_hover_darken);
|
22
|
+
}
|
23
|
+
}
|
15
24
|
|
16
|
-
@mixin pb_button
|
25
|
+
@mixin pb_button {
|
17
26
|
text-rendering: optimizeLegibility;
|
18
27
|
font-size: $font_small;
|
19
28
|
font-weight: $bold;
|
@@ -21,15 +30,12 @@ $pb_button_border_width: 0px;
|
|
21
30
|
vertical-align: middle;
|
22
31
|
text-transform: none;
|
23
32
|
border-width: $pb_button_border_width;
|
24
|
-
border-color: $border;
|
25
33
|
border-style: solid;
|
26
34
|
border-radius: $border_rad_light;
|
27
35
|
min-height: $pb_button_size;
|
28
36
|
line-height: 1.5;
|
29
37
|
padding: $pb_button_v_padding $pb_button_h_padding;
|
30
38
|
cursor: pointer;
|
31
|
-
background-color: $bg;
|
32
|
-
color: $color;
|
33
39
|
outline: none;
|
34
40
|
transition: background $transition_default ease, color $transition_default ease;
|
35
41
|
box-sizing: border-box;
|
@@ -57,7 +63,6 @@ $pb_button_border_width: 0px;
|
|
57
63
|
&:active {
|
58
64
|
outline: none;
|
59
65
|
border-width: $pb_button_border_width;
|
60
|
-
border-color: darken($bg, $pb_button_hover_darken);
|
61
66
|
}
|
62
67
|
|
63
68
|
};
|
@@ -68,7 +73,7 @@ $pb_button_border_width: 0px;
|
|
68
73
|
|
69
74
|
// Primary ======================
|
70
75
|
@mixin pb_button_primary {
|
71
|
-
@include
|
76
|
+
@include pb_button_variant($primary_action, $text_dk_default, transparent);
|
72
77
|
|
73
78
|
@media (hover:hover) {
|
74
79
|
&:hover {
|
@@ -79,7 +84,7 @@ $pb_button_border_width: 0px;
|
|
79
84
|
|
80
85
|
// Secondary ====================
|
81
86
|
@mixin pb_button_secondary {
|
82
|
-
@include
|
87
|
+
@include pb_button_variant(rgba($primary_action, 0.05), $primary_action);
|
83
88
|
|
84
89
|
@media (hover:hover) {
|
85
90
|
&:hover {
|
@@ -90,7 +95,7 @@ $pb_button_border_width: 0px;
|
|
90
95
|
|
91
96
|
// Link =========================
|
92
97
|
@mixin pb_button_link {
|
93
|
-
@include
|
98
|
+
@include pb_button_variant($transparent, $primary_action);
|
94
99
|
|
95
100
|
@media (hover:hover) {
|
96
101
|
&:hover {
|
@@ -102,7 +107,7 @@ $pb_button_border_width: 0px;
|
|
102
107
|
// Disabled ====================
|
103
108
|
@mixin pb_button_disabled {
|
104
109
|
$disabled_color: rgba($charcoal, $opacity_5);
|
105
|
-
@include
|
110
|
+
@include pb_button_variant(rgba($slate, $opacity_4), $disabled_color);
|
106
111
|
pointer-events: none;
|
107
112
|
}
|
108
113
|
|
@@ -127,7 +132,7 @@ $pb_button_border_width: 0px;
|
|
127
132
|
|
128
133
|
// Dark Primary =================
|
129
134
|
@mixin pb_button_primary_dark{
|
130
|
-
@include
|
135
|
+
@include pb_button_variant($primary_action);
|
131
136
|
|
132
137
|
@media (hover:hover) {
|
133
138
|
&:hover {
|
@@ -138,7 +143,7 @@ $pb_button_border_width: 0px;
|
|
138
143
|
|
139
144
|
// Dark Secondary ==============
|
140
145
|
@mixin pb_button_secondary_dark{
|
141
|
-
@include
|
146
|
+
@include pb_button_variant(rgba($white, 0.2), $white);
|
142
147
|
|
143
148
|
@media (hover:hover) {
|
144
149
|
&:hover {
|
@@ -149,7 +154,7 @@ $pb_button_border_width: 0px;
|
|
149
154
|
|
150
155
|
// Dark Link =============
|
151
156
|
@mixin pb_button_link_dark {
|
152
|
-
@include
|
157
|
+
@include pb_button_variant($transparent, $white);
|
153
158
|
|
154
159
|
@media (hover:hover) {
|
155
160
|
&:hover {
|
@@ -161,6 +166,6 @@ $pb_button_border_width: 0px;
|
|
161
166
|
// Dark Disabled ====================
|
162
167
|
@mixin pb_button_disabled_dark {
|
163
168
|
$disabled_color: rgba($white, $opacity_5);
|
164
|
-
@include
|
169
|
+
@include pb_button_variant(rgba($slate, $opacity_5), $disabled_color);
|
165
170
|
pointer-events: none;
|
166
171
|
}
|
@@ -77,12 +77,13 @@ const Icon = (props: IconProps) => {
|
|
77
77
|
// Lets check and see if the icon prop is referring to a custom Power icon...
|
78
78
|
// If so, then set fa-icon to "custom"
|
79
79
|
// this ensures the JS will not do any further operations
|
80
|
-
faClasses[`fa-${icon}`] = customIcon ? 'custom' : icon
|
80
|
+
// faClasses[`fa-${icon}`] = customIcon ? 'custom' : icon
|
81
|
+
if (!customIcon) faClasses[`fa-${icon}`] = icon
|
81
82
|
|
82
83
|
const classes = classnames(
|
83
84
|
flipMap[flip],
|
84
85
|
'pb_icon_kit',
|
85
|
-
'far',
|
86
|
+
customIcon ? '' : 'far',
|
86
87
|
faClasses,
|
87
88
|
globalProps(props),
|
88
89
|
className
|
@@ -0,0 +1,11 @@
|
|
1
|
+
### Experimental: Not currently available in the Rails version!
|
2
|
+
|
3
|
+
When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:
|
4
|
+
|
5
|
+
Attributes must be React compatible e.g. <code>xmlns:xlink</code> should be <code>xmlnsXlink</code> and so on. <strong>There should be no hyphenated attributes and no semi-colons!.</strong>
|
6
|
+
|
7
|
+
Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
|
8
|
+
|
9
|
+
Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point __when designing instead of trying to retrofit the viewbox afterwards__!
|
10
|
+
|
11
|
+
You must source *your own SVG into the React component/view* you are working in. This can easily be done in a programmatic and maintainable way. So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.
|
@@ -0,0 +1,95 @@
|
|
1
|
+
<%= pb_rails("body", props: {
|
2
|
+
text: "xs",
|
3
|
+
color: "light"
|
4
|
+
}) %>
|
5
|
+
<%= pb_rails("multiple_users", props: {
|
6
|
+
users: [
|
7
|
+
{
|
8
|
+
name: "Patrick Welch",
|
9
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
10
|
+
},
|
11
|
+
{
|
12
|
+
name: "Lucille Sanchez",
|
13
|
+
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
|
14
|
+
},
|
15
|
+
{
|
16
|
+
name: "Beverly Reyes",
|
17
|
+
image_url: "https://randomuser.me/api/portraits/women/74.jpg",
|
18
|
+
},
|
19
|
+
{
|
20
|
+
name: "Keith Craig",
|
21
|
+
image_url: "https://randomuser.me/api/portraits/men/40.jpg",
|
22
|
+
},
|
23
|
+
{
|
24
|
+
name: "Alicia Cooper",
|
25
|
+
image_url: "https://randomuser.me/api/portraits/women/46.jpg",
|
26
|
+
}
|
27
|
+
]
|
28
|
+
}) %>
|
29
|
+
|
30
|
+
<br />
|
31
|
+
|
32
|
+
<%= pb_rails("multiple_users", props: {
|
33
|
+
margin_top: "xs",
|
34
|
+
size: "xs",
|
35
|
+
users: [
|
36
|
+
{
|
37
|
+
name: "Shawn Palmer",
|
38
|
+
image_url: "https://randomuser.me/api/portraits/men/93.jpg",
|
39
|
+
},
|
40
|
+
{
|
41
|
+
name: "Andrew Murray",
|
42
|
+
image_url: "https://randomuser.me/api/portraits/men/75.jpg",
|
43
|
+
}
|
44
|
+
]
|
45
|
+
}) %>
|
46
|
+
|
47
|
+
<br />
|
48
|
+
|
49
|
+
<%= pb_rails("body", props: {
|
50
|
+
text: "xxs",
|
51
|
+
margin_top: "xs",
|
52
|
+
color: "light"
|
53
|
+
}) %>
|
54
|
+
<%= pb_rails("multiple_users", props: {
|
55
|
+
size: "xxs",
|
56
|
+
users: [
|
57
|
+
{
|
58
|
+
name: "Patrick Welch",
|
59
|
+
image_url: "https://randomuser.me/api/portraits/men/9.jpg",
|
60
|
+
},
|
61
|
+
{
|
62
|
+
name: "Lucille Sanchez",
|
63
|
+
image_url: "https://randomuser.me/api/portraits/women/6.jpg",
|
64
|
+
},
|
65
|
+
{
|
66
|
+
name: "Beverly Reyes",
|
67
|
+
image_url: "https://randomuser.me/api/portraits/women/74.jpg",
|
68
|
+
},
|
69
|
+
{
|
70
|
+
name: "Keith Craig",
|
71
|
+
image_url: "https://randomuser.me/api/portraits/men/40.jpg",
|
72
|
+
},
|
73
|
+
{
|
74
|
+
name: "Alicia Cooper",
|
75
|
+
image_url: "https://randomuser.me/api/portraits/women/46.jpg",
|
76
|
+
}
|
77
|
+
]
|
78
|
+
}) %>
|
79
|
+
|
80
|
+
<br />
|
81
|
+
|
82
|
+
<%= pb_rails("multiple_users", props: {
|
83
|
+
margin_top: "xs",
|
84
|
+
size: "xxs",
|
85
|
+
users: [
|
86
|
+
{
|
87
|
+
name: "Shawn Palmer",
|
88
|
+
image_url: "https://randomuser.me/api/portraits/men/93.jpg",
|
89
|
+
},
|
90
|
+
{
|
91
|
+
name: "Andrew Murray",
|
92
|
+
image_url: "https://randomuser.me/api/portraits/men/75.jpg",
|
93
|
+
}
|
94
|
+
]
|
95
|
+
}) %>
|
@@ -1,11 +1,14 @@
|
|
1
1
|
import React from 'react'
|
2
|
-
import { MultipleUsers } from '../../'
|
2
|
+
import { Body, MultipleUsers } from '../../'
|
3
3
|
|
4
4
|
const MultipleUsersSize = (props) => {
|
5
5
|
return (
|
6
6
|
<div>
|
7
|
+
<Body
|
8
|
+
color="light"
|
9
|
+
text="xs"
|
10
|
+
/>
|
7
11
|
<MultipleUsers
|
8
|
-
size="xxs"
|
9
12
|
users={[
|
10
13
|
{
|
11
14
|
name: 'Patrick Welch',
|
@@ -32,20 +35,70 @@ const MultipleUsersSize = (props) => {
|
|
32
35
|
/>
|
33
36
|
|
34
37
|
<br />
|
38
|
+
|
39
|
+
<MultipleUsers
|
40
|
+
marginTop="xs"
|
41
|
+
size="xs"
|
42
|
+
users={[
|
43
|
+
{
|
44
|
+
name: 'Shawn Palmer',
|
45
|
+
imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
|
46
|
+
},
|
47
|
+
{
|
48
|
+
name: 'Andrew Murray Cooper Craig',
|
49
|
+
imageUrl: 'https://randomuser.me/api/portraits/men/75.jpg',
|
50
|
+
},
|
51
|
+
]}
|
52
|
+
{...props}
|
53
|
+
/>
|
54
|
+
|
55
|
+
<Body
|
56
|
+
color="light"
|
57
|
+
marginTop="xs"
|
58
|
+
text="xxs"
|
59
|
+
/>
|
60
|
+
<MultipleUsers
|
61
|
+
size="xxs"
|
62
|
+
users={[
|
63
|
+
{
|
64
|
+
name: 'Patrick Welch',
|
65
|
+
imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
|
66
|
+
},
|
67
|
+
{
|
68
|
+
name: 'Lucille Sanchez',
|
69
|
+
imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
|
70
|
+
},
|
71
|
+
{
|
72
|
+
name: 'Beverly Reyes',
|
73
|
+
imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
|
74
|
+
},
|
75
|
+
{
|
76
|
+
name: 'Keith Craig',
|
77
|
+
imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
|
78
|
+
},
|
79
|
+
{
|
80
|
+
name: 'Alicia Cooper',
|
81
|
+
imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
|
82
|
+
},
|
83
|
+
]}
|
84
|
+
{...props}
|
85
|
+
/>
|
86
|
+
|
35
87
|
<br />
|
36
88
|
|
37
89
|
<MultipleUsers
|
90
|
+
marginTop="xs"
|
38
91
|
size="xxs"
|
39
92
|
users={[
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
93
|
+
{
|
94
|
+
name: 'Shawn Palmer',
|
95
|
+
imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
|
96
|
+
},
|
97
|
+
{
|
98
|
+
name: 'Andrew Murray Cooper Craig',
|
99
|
+
imageUrl: 'https://randomuser.me/api/portraits/men/75.jpg',
|
100
|
+
},
|
101
|
+
]}
|
49
102
|
{...props}
|
50
103
|
/>
|
51
104
|
</div>
|
@@ -4,11 +4,11 @@
|
|
4
4
|
data: object.data,
|
5
5
|
id: object.id) do %>
|
6
6
|
<% object.users.take(object.display_count).each do |user| %>
|
7
|
-
<%= pb_rails("avatar", props: user.merge({size:
|
7
|
+
<%= pb_rails("avatar", props: user.merge({size: object.size, classname: "pb_multiple_users_item", dark: object.dark}) ) %>
|
8
8
|
<% end %>
|
9
9
|
|
10
10
|
<% if object.more_than_four %>
|
11
|
-
<div class="pb_multiple_users_item
|
11
|
+
<div class="pb_multiple_users_item multiple_users_badge_<%= object.size %>">
|
12
12
|
<%= "+#{object.users.count - object.display_count}" %>
|
13
13
|
</div>
|
14
14
|
<% end %>
|
@@ -4,6 +4,9 @@ module Playbook
|
|
4
4
|
module PbMultipleUsers
|
5
5
|
class MultipleUsers < Playbook::KitBase
|
6
6
|
prop :reverse, type: Playbook::Props::Boolean, default: false
|
7
|
+
prop :size, type: Playbook::Props::Enum,
|
8
|
+
values: %w[xxs xs],
|
9
|
+
default: "xs"
|
7
10
|
prop :users, type: Playbook::Props::HashArray, required: true
|
8
11
|
|
9
12
|
def more_than_four
|
@@ -23,6 +23,7 @@ type SelectableCardProps = {
|
|
23
23
|
checked: boolean,
|
24
24
|
children?: array<React.ReactChild>,
|
25
25
|
className?: string,
|
26
|
+
customIcon?: SVGElement,
|
26
27
|
dark?: boolean,
|
27
28
|
data: object,
|
28
29
|
disabled?: boolean,
|
@@ -43,6 +44,7 @@ const SelectableCard = ({
|
|
43
44
|
checked = false,
|
44
45
|
children,
|
45
46
|
className,
|
47
|
+
customIcon,
|
46
48
|
dark = false,
|
47
49
|
data = {},
|
48
50
|
disabled = false,
|
@@ -76,6 +78,7 @@ const SelectableCard = ({
|
|
76
78
|
return (
|
77
79
|
<div className="pb_selectable_card_circle">
|
78
80
|
<Icon
|
81
|
+
customIcon={customIcon}
|
79
82
|
fixedWidth
|
80
83
|
icon="check"
|
81
84
|
/>
|