playbook_ui 9.19.0.pre.alpha.pre.fonts2 → 10.0.1.alpha.railscusticon
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 +0 -1
- data/app/pb_kits/playbook/pb_avatar/_avatar.jsx +1 -1
- data/app/pb_kits/playbook/pb_avatar/_avatar.scss +5 -0
- data/app/pb_kits/playbook/pb_avatar/avatar.rb +1 -1
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.html.erb +10 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +9 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.html.erb +1 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.jsx +5 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.html.erb +1 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.jsx +6 -0
- 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_dialog/_dialog.jsx +8 -1
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +3 -1
- data/app/pb_kits/playbook/pb_icon/_icon.jsx +41 -21
- data/app/pb_kits/playbook/pb_icon/_icon.scss +9 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +22 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +34 -0
- data/app/pb_kits/playbook/pb_icon/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_icon/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_icon/icon.html.erb +13 -7
- data/app/pb_kits/playbook/pb_icon/icon.rb +33 -1
- data/app/pb_kits/playbook/pb_message/_message.jsx +11 -4
- data/app/pb_kits/playbook/pb_message/docs/_message_default.html.erb +21 -0
- data/app/pb_kits/playbook/pb_message/docs/_message_default.jsx +32 -0
- data/app/pb_kits/playbook/pb_message/message.html.erb +9 -4
- data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx +10 -2
- data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss +8 -1
- 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 +108 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.md +1 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/index.js +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_rich_text_editor/_rich_text_editor.scss +2 -0
- data/lib/playbook/version.rb +2 -2
- metadata +8 -5
- data/app/pb_kits/playbook/tokens/_fonts.scss +0 -98
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 2fac834bfee4b1e2becacc6beb81454bc07c2245b4aa5868ce39f15680f17b75
|
4
|
+
data.tar.gz: 3906161634d9eff14a41c5c754f754b371aeb7ab9e9619a050f4b4bec81eaa59
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 3e85c115a8506cf4b388bdb0e07e3fa34b516f861ed72e7796355caff50439489c5073484c5691b995192a914395ed40ddd906c85fedc0e97843486699619a3d
|
7
|
+
data.tar.gz: 4f875cce483498737eca8abab11167a83272706cb345f2068a70d928f50ef67e6a0ddaa267ab7a716c005bdeeb7c0b88d0407efad90b59045892e5f198155e85
|
@@ -3,6 +3,7 @@
|
|
3
3
|
@import "../tokens/typography";
|
4
4
|
|
5
5
|
$avatar-sizes: (
|
6
|
+
"xxs": 20px,
|
6
7
|
"xs": 28px,
|
7
8
|
"sm": 38px,
|
8
9
|
"md": 60px,
|
@@ -68,6 +69,10 @@ $avatar-sizes: (
|
|
68
69
|
bottom: auto;
|
69
70
|
left: auto;
|
70
71
|
|
72
|
+
&.size_xxs {
|
73
|
+
right: -5px;
|
74
|
+
}
|
75
|
+
|
71
76
|
&.size_xs {
|
72
77
|
right: -4px;
|
73
78
|
}
|
@@ -1,3 +1,13 @@
|
|
1
|
+
<%= pb_rails("avatar", props: {
|
2
|
+
name: "Terry Johnson",
|
3
|
+
size: "xxs",
|
4
|
+
image_alt: "Terry Johnson Standing",
|
5
|
+
image_url: "https://randomuser.me/api/portraits/men/44.jpg",
|
6
|
+
status: "away"
|
7
|
+
}) %>
|
8
|
+
|
9
|
+
<br>
|
10
|
+
|
1
11
|
<%= pb_rails("avatar", props: {
|
2
12
|
name: "Terry Johnson",
|
3
13
|
size: "xs",
|
@@ -4,6 +4,15 @@ import { Avatar } from '../../'
|
|
4
4
|
const AvatarDefault = (props) => {
|
5
5
|
return (
|
6
6
|
<div>
|
7
|
+
<Avatar
|
8
|
+
imageAlt="Terry Johnson Standing"
|
9
|
+
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
10
|
+
name="Terry Johnson"
|
11
|
+
size="xxs"
|
12
|
+
status="online"
|
13
|
+
{...props}
|
14
|
+
/>
|
15
|
+
<br />
|
7
16
|
<Avatar
|
8
17
|
imageAlt="Terry Johnson Standing"
|
9
18
|
imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
@@ -1,3 +1,4 @@
|
|
1
|
+
<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "xxs" }) %>
|
1
2
|
<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "xs" }) %>
|
2
3
|
<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "sm" }) %>
|
3
4
|
<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "md" }) %>
|
@@ -1,3 +1,4 @@
|
|
1
|
+
<%= pb_rails("avatar", props: { image_url: "", name: "Terry Johnson", size: "xxs" }) %>
|
1
2
|
<%= pb_rails("avatar", props: { image_url: true, name: "Terry Johnson", size: "xs" }) %>
|
2
3
|
<%= pb_rails("avatar", props: { image_url: 4, name: "Terry Johnson", size: "sm" }) %>
|
3
4
|
<%= pb_rails("avatar", props: { image_url: "https://google.com", name: "Terry Johnson", size: "md" }) %>
|
@@ -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
|
}
|
@@ -22,6 +22,7 @@ type DialogProps = {
|
|
22
22
|
confirmButton?: string,
|
23
23
|
data?: object,
|
24
24
|
id?: string,
|
25
|
+
loading?: boolean,
|
25
26
|
onCancel?: () => void,
|
26
27
|
onChange?: () => void,
|
27
28
|
onClose?: () => void,
|
@@ -45,6 +46,7 @@ const Dialog = (props: DialogProps) => {
|
|
45
46
|
id,
|
46
47
|
size = 'md',
|
47
48
|
children,
|
49
|
+
loading = false,
|
48
50
|
opened,
|
49
51
|
onCancel = () => {},
|
50
52
|
onConfirm = () => {},
|
@@ -123,7 +125,12 @@ const Dialog = (props: DialogProps) => {
|
|
123
125
|
|
124
126
|
<If condition={cancelButton && confirmButton}>
|
125
127
|
<Dialog.Footer>
|
126
|
-
<Button
|
128
|
+
<Button
|
129
|
+
loading={loading}
|
130
|
+
onClick={onConfirm}
|
131
|
+
>
|
132
|
+
{confirmButton}
|
133
|
+
</Button>
|
127
134
|
<Button
|
128
135
|
id="cancel-button"
|
129
136
|
onClick={onCancel}
|
@@ -5,6 +5,7 @@ const DialogDefault = () => {
|
|
5
5
|
const [isOpen, setIsOpen] = useState(false)
|
6
6
|
const close = () => setIsOpen(false)
|
7
7
|
const open = () => setIsOpen(true)
|
8
|
+
const [isLoading, setIsLoading] = useState(false)
|
8
9
|
|
9
10
|
return (
|
10
11
|
<>
|
@@ -13,9 +14,10 @@ const DialogDefault = () => {
|
|
13
14
|
cancelButton="Cancel"
|
14
15
|
className="wrapper"
|
15
16
|
confirmButton="Okay"
|
17
|
+
loading={isLoading}
|
16
18
|
onCancel={close}
|
17
19
|
onClose={close}
|
18
|
-
onConfirm={
|
20
|
+
onConfirm={() => setIsLoading(!isLoading)}
|
19
21
|
opened={isOpen}
|
20
22
|
portalClassName="portal"
|
21
23
|
size="sm"
|
@@ -9,6 +9,7 @@ type IconProps = {
|
|
9
9
|
aria?: object,
|
10
10
|
border?: boolean,
|
11
11
|
className?: string,
|
12
|
+
customIcon?: SVGElement,
|
12
13
|
data?: object,
|
13
14
|
fixedWidth?: boolean,
|
14
15
|
flip?: "horizontal" | "vertical" | "both" | "none",
|
@@ -46,6 +47,7 @@ const Icon = (props: IconProps) => {
|
|
46
47
|
aria = {},
|
47
48
|
border = false,
|
48
49
|
className,
|
50
|
+
customIcon,
|
49
51
|
data = {},
|
50
52
|
fixedWidth = true,
|
51
53
|
flip = false,
|
@@ -59,22 +61,29 @@ const Icon = (props: IconProps) => {
|
|
59
61
|
size,
|
60
62
|
spin = false,
|
61
63
|
} = props
|
64
|
+
|
65
|
+
const faClasses = {
|
66
|
+
'fa-border': border,
|
67
|
+
'fa-fw': fixedWidth,
|
68
|
+
'fa-inverse': inverse,
|
69
|
+
'fa-li': listItem,
|
70
|
+
'fa-pulse': pulse,
|
71
|
+
'fa-spin': spin,
|
72
|
+
[`fa-${size}`]: size,
|
73
|
+
[`fa-pull-${pull}`]: pull,
|
74
|
+
[`fa-rotate-${rotation}`]: rotation,
|
75
|
+
}
|
76
|
+
|
77
|
+
// Lets check and see if the icon prop is referring to a custom Power icon...
|
78
|
+
// If so, then set fa-icon to "custom"
|
79
|
+
// this ensures the JS will not do any further operations
|
80
|
+
faClasses[`fa-${icon}`] = customIcon ? 'custom' : icon
|
81
|
+
|
62
82
|
const classes = classnames(
|
63
83
|
flipMap[flip],
|
64
84
|
'pb_icon_kit',
|
65
85
|
'far',
|
66
|
-
|
67
|
-
'fa-border': border,
|
68
|
-
'fa-fw': fixedWidth,
|
69
|
-
'fa-inverse': inverse,
|
70
|
-
'fa-li': listItem,
|
71
|
-
'fa-pulse': pulse,
|
72
|
-
'fa-spin': spin,
|
73
|
-
[`fa-${icon}`]: icon,
|
74
|
-
[`fa-${size}`]: size,
|
75
|
-
[`fa-pull-${pull}`]: pull,
|
76
|
-
[`fa-rotate-${rotation}`]: rotation,
|
77
|
-
},
|
86
|
+
faClasses,
|
78
87
|
globalProps(props),
|
79
88
|
className
|
80
89
|
)
|
@@ -83,17 +92,28 @@ const Icon = (props: IconProps) => {
|
|
83
92
|
const ariaProps = buildAriaProps(aria)
|
84
93
|
const dataProps = buildDataProps(data)
|
85
94
|
|
95
|
+
// Add a conditional here to show only the SVG if custom
|
86
96
|
return (
|
87
97
|
<>
|
88
|
-
<
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
98
|
+
<If condition={customIcon}>
|
99
|
+
{
|
100
|
+
React.cloneElement(customIcon, {
|
101
|
+
...dataProps,
|
102
|
+
className: classes,
|
103
|
+
id,
|
104
|
+
})
|
105
|
+
}
|
106
|
+
<Else />
|
107
|
+
<i
|
108
|
+
{...dataProps}
|
109
|
+
className={classes}
|
110
|
+
id={id}
|
111
|
+
/>
|
112
|
+
<span
|
113
|
+
{...ariaProps}
|
114
|
+
hidden
|
115
|
+
/>
|
116
|
+
</If>
|
97
117
|
</>
|
98
118
|
)
|
99
119
|
}
|
@@ -0,0 +1,22 @@
|
|
1
|
+
<%# SVG fill color inherited from css color property %>
|
2
|
+
<div class="icon-wrapper" style="color:blue;">
|
3
|
+
|
4
|
+
<p><%= pb_rails("icon", props: { custom_icon: "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg", size: "2x" } ) %></p>
|
5
|
+
<p><%= pb_rails("icon", props: { custom_icon: "app/javascript/images/powergon.svg", size: "3x" } ) %></p>
|
6
|
+
|
7
|
+
<%= pb_rails("icon", props: { flip: "vertical", custom_icon: "app/javascript/images/powergon.svg", size: "5x" } ) %>
|
8
|
+
<%= pb_rails("icon", props: { rotation: 90, custom_icon: "app/javascript/images/powergon.svg", size: "5x" } ) %>
|
9
|
+
<%= pb_rails("icon", props: { spin: true, custom_icon: "app/javascript/images/powergon.svg", size: "5x" } ) %>
|
10
|
+
<%= pb_rails("icon", props: { custom_icon: "app/javascript/images/powergon.svg", size: "8x" } ) %>
|
11
|
+
|
12
|
+
|
13
|
+
<%# <%= pb_rails("icon", props: { custom_icon: "https://en.wikipedia.org/wiki/Portable_Network_Graphics#/media/File:PNG_transparency_demonstration_1.png", size: "8x" } ) %>
|
14
|
+
|
15
|
+
|
16
|
+
<%= pb_rails("body", props: {
|
17
|
+
text: "Custom icons must be SVGs. They can be locally or remotely
|
18
|
+
sourced and are compatible with other icon props (size, rotation,
|
19
|
+
spin, flip, etc). Their SVG fill colors will be inherited from
|
20
|
+
parent element's css color properties."
|
21
|
+
} ) %>
|
22
|
+
</div>
|
@@ -0,0 +1,34 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Icon } from '../../'
|
3
|
+
|
4
|
+
// import Icons as config from 'power-icons'
|
5
|
+
const config = {
|
6
|
+
moon: (
|
7
|
+
<svg
|
8
|
+
aria-hidden="true"
|
9
|
+
focusable="false"
|
10
|
+
role="img"
|
11
|
+
viewBox="0 0 512 512"
|
12
|
+
xmlns="http://www.w3.org/2000/svg"
|
13
|
+
>
|
14
|
+
<path
|
15
|
+
d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm16 352c0 8.8-7.2 16-16 16H288l-12.8 9.6L208 428v-60H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h384c8.8 0 16 7.2 16 16v288zM336 184h-56v-56c0-8.8-7.2-16-16-16h-16c-8.8 0-16 7.2-16 16v56h-56c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h56v56c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-56h56c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"
|
16
|
+
fill="currentColor"
|
17
|
+
/>
|
18
|
+
</svg>
|
19
|
+
),
|
20
|
+
}
|
21
|
+
|
22
|
+
const IconCustom = (props) => {
|
23
|
+
return (
|
24
|
+
<div>
|
25
|
+
<Icon
|
26
|
+
customIcon={config.moon}
|
27
|
+
size="7x"
|
28
|
+
{...props}
|
29
|
+
/>
|
30
|
+
</div>
|
31
|
+
)
|
32
|
+
}
|
33
|
+
|
34
|
+
export default IconCustom
|
@@ -7,6 +7,7 @@ examples:
|
|
7
7
|
- icon_pull: Icon Pull
|
8
8
|
- icon_border: Icon Border
|
9
9
|
- icon_sizes: Icon Sizes
|
10
|
+
- icon_custom: Icon Custom
|
10
11
|
|
11
12
|
react:
|
12
13
|
- icon_default: Icon Default
|
@@ -16,3 +17,4 @@ examples:
|
|
16
17
|
- icon_pull: Icon Pull
|
17
18
|
- icon_border: Icon Border
|
18
19
|
- icon_sizes: Icon Sizes
|
20
|
+
- icon_custom: Icon Custom
|
@@ -5,3 +5,4 @@ export { default as IconAnimate } from './_icon_animate.jsx'
|
|
5
5
|
export { default as IconPull } from './_icon_pull.jsx'
|
6
6
|
export { default as IconBorder } from './_icon_border.jsx'
|
7
7
|
export { default as IconSizes } from './_icon_sizes.jsx'
|
8
|
+
export { default as IconCustom } from './_icon_custom.jsx'
|
@@ -1,7 +1,13 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
1
|
+
<% if object.custom_icon %>
|
2
|
+
<%= object.render_svg(object.custom_icon) %>
|
3
|
+
<% else %>
|
4
|
+
<%= content_tag(:i, nil,
|
5
|
+
id: object.id,
|
6
|
+
data: object.data,
|
7
|
+
class: object.classname
|
8
|
+
) %>
|
9
|
+
<%= content_tag(:span, nil,
|
10
|
+
aria: { label: "#{object.icon} icon" }.merge(object.aria),
|
11
|
+
hidden: true
|
12
|
+
) %>
|
13
|
+
<% end %>
|
@@ -1,5 +1,7 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
|
+
require "open-uri"
|
4
|
+
|
3
5
|
module Playbook
|
4
6
|
module PbIcon
|
5
7
|
class Icon < Playbook::KitBase
|
@@ -10,7 +12,9 @@ module Playbook
|
|
10
12
|
prop :flip, type: Playbook::Props::Enum,
|
11
13
|
values: ["horizontal", "vertical", "both", nil],
|
12
14
|
default: nil
|
13
|
-
prop :icon
|
15
|
+
prop :icon
|
16
|
+
prop :custom_icon, type: Playbook::Props::String,
|
17
|
+
default: nil
|
14
18
|
prop :inverse, type: Playbook::Props::Boolean,
|
15
19
|
default: false
|
16
20
|
prop :list_item, type: Playbook::Props::Boolean,
|
@@ -48,6 +52,34 @@ module Playbook
|
|
48
52
|
)
|
49
53
|
end
|
50
54
|
|
55
|
+
def custom_icon_classname
|
56
|
+
generate_classname(
|
57
|
+
"pb_icon_kit",
|
58
|
+
border_class,
|
59
|
+
fixed_width_class,
|
60
|
+
flip_class,
|
61
|
+
inverse_class,
|
62
|
+
list_item_class,
|
63
|
+
pull_class,
|
64
|
+
pulse_class,
|
65
|
+
rotation_class,
|
66
|
+
size_class,
|
67
|
+
spin_class,
|
68
|
+
separator: " "
|
69
|
+
)
|
70
|
+
end
|
71
|
+
|
72
|
+
def render_svg(path)
|
73
|
+
if File.extname(path) == ".svg"
|
74
|
+
doc = Nokogiri::XML(open(path)) # rubocop:disable Security/Open
|
75
|
+
svg = doc.at_css "svg"
|
76
|
+
svg["class"] = "pb_custom_icon " + object.custom_icon_classname
|
77
|
+
raw doc
|
78
|
+
else
|
79
|
+
raise("Custom icon must be an svg. Please check your path and file type.")
|
80
|
+
end
|
81
|
+
end
|
82
|
+
|
51
83
|
private
|
52
84
|
|
53
85
|
def border_class
|
@@ -17,6 +17,7 @@ type MessageProps = {
|
|
17
17
|
avatarName?: string,
|
18
18
|
avatarStatus?: string,
|
19
19
|
avatarUrl?: string,
|
20
|
+
children?: array<React.ReactNode> | React.ReactNode,
|
20
21
|
className?: string,
|
21
22
|
data?: object,
|
22
23
|
id?: string,
|
@@ -33,6 +34,7 @@ const Message = (props: MessageProps) => {
|
|
33
34
|
avatarName,
|
34
35
|
avatarStatus = null,
|
35
36
|
avatarUrl,
|
37
|
+
children,
|
36
38
|
className,
|
37
39
|
data = {},
|
38
40
|
id,
|
@@ -93,10 +95,15 @@ const Message = (props: MessageProps) => {
|
|
93
95
|
/>
|
94
96
|
</If>
|
95
97
|
</Flex>
|
96
|
-
<
|
97
|
-
|
98
|
-
|
99
|
-
|
98
|
+
<If condition={message}>
|
99
|
+
<Body
|
100
|
+
className="pb_message_body"
|
101
|
+
text={message}
|
102
|
+
/>
|
103
|
+
</If>
|
104
|
+
<If condition={children}>
|
105
|
+
{ children }
|
106
|
+
</If>
|
100
107
|
</div>
|
101
108
|
</div>
|
102
109
|
)
|
@@ -53,3 +53,24 @@
|
|
53
53
|
timestamp: "2 days ago",
|
54
54
|
avatar_name: "Tim Wenhold"
|
55
55
|
}) %>
|
56
|
+
|
57
|
+
<br><br>
|
58
|
+
|
59
|
+
<%= pb_rails("message", props: {
|
60
|
+
label: "",
|
61
|
+
timestamp: "2 days ago",
|
62
|
+
avatar_name: "Tim Wenhold"
|
63
|
+
}) do %>
|
64
|
+
<%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>
|
65
|
+
<% end %>
|
66
|
+
|
67
|
+
<br><br>
|
68
|
+
|
69
|
+
<%= pb_rails("message", props: {
|
70
|
+
label: "",
|
71
|
+
message: "Please hold for one moment, I'll check with my manager.",
|
72
|
+
timestamp: "2 days ago",
|
73
|
+
avatar_name: "Tim Wenhold"
|
74
|
+
}) do %>
|
75
|
+
<%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>
|
76
|
+
<% end %>
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
|
3
3
|
import Message from '../_message'
|
4
|
+
import Image from '../../pb_image/_image'
|
4
5
|
|
5
6
|
const MessageDefault = (props) => {
|
6
7
|
return (
|
@@ -61,6 +62,37 @@ const MessageDefault = (props) => {
|
|
61
62
|
{...props}
|
62
63
|
/>
|
63
64
|
|
65
|
+
<br />
|
66
|
+
<br />
|
67
|
+
|
68
|
+
<Message
|
69
|
+
label="Keith Craig"
|
70
|
+
timestamp="2 days ago"
|
71
|
+
{...props}
|
72
|
+
>
|
73
|
+
<Image
|
74
|
+
alt="picture of a misty forest"
|
75
|
+
size="md"
|
76
|
+
url="https://unsplash.it/500/400/?image=634"
|
77
|
+
/>
|
78
|
+
</Message>
|
79
|
+
|
80
|
+
<br />
|
81
|
+
<br />
|
82
|
+
|
83
|
+
<Message
|
84
|
+
label="Keith Craig"
|
85
|
+
message="Please hold for one moment, I will check with my manager."
|
86
|
+
timestamp="2 days ago"
|
87
|
+
{...props}
|
88
|
+
>
|
89
|
+
<Image
|
90
|
+
alt="picture of a misty forest"
|
91
|
+
size="md"
|
92
|
+
url="https://unsplash.it/500/400/?image=634"
|
93
|
+
/>
|
94
|
+
</Message>
|
95
|
+
|
64
96
|
</div>
|
65
97
|
)
|
66
98
|
}
|
@@ -32,9 +32,14 @@
|
|
32
32
|
}) %>
|
33
33
|
<% end %>
|
34
34
|
<% end %>
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
35
|
+
<% if content.present? %>
|
36
|
+
<%= content %>
|
37
|
+
<% end %>
|
38
|
+
<% if object.message.present? %>
|
39
|
+
<%= pb_rails("body", props: {
|
40
|
+
text: object.message,
|
41
|
+
classname: "pb_message_body"
|
42
|
+
}) %>
|
43
|
+
<% end %>
|
39
44
|
</div>
|
40
45
|
<% end %>
|
@@ -16,6 +16,7 @@ type MultipleUsersProps = {
|
|
16
16
|
id?: string,
|
17
17
|
maxDisplayedUsers?: number,
|
18
18
|
reverse?: boolean,
|
19
|
+
size?: string,
|
19
20
|
users: array<object>,
|
20
21
|
}
|
21
22
|
|
@@ -28,6 +29,7 @@ const MultipleUsers = (props: MultipleUsersProps) => {
|
|
28
29
|
id,
|
29
30
|
maxDisplayedUsers = 4,
|
30
31
|
reverse = false,
|
32
|
+
size = 'xs',
|
31
33
|
users,
|
32
34
|
} = props
|
33
35
|
|
@@ -36,6 +38,7 @@ const MultipleUsers = (props: MultipleUsersProps) => {
|
|
36
38
|
const usersToDisplay = users.slice(0, displayCount)
|
37
39
|
|
38
40
|
const reverseClass = reverse === true ? 'reverse' : ''
|
41
|
+
const avatarSizeClass = size === 'xxs' ? 'xxs' : 'xs'
|
39
42
|
const ariaProps = buildAriaProps(aria)
|
40
43
|
const dataProps = buildDataProps(data)
|
41
44
|
const classes = classnames(
|
@@ -44,6 +47,11 @@ const MultipleUsers = (props: MultipleUsersProps) => {
|
|
44
47
|
className
|
45
48
|
)
|
46
49
|
|
50
|
+
const itemClasses = classnames(
|
51
|
+
'pb_multiple_users_item',
|
52
|
+
buildCss('multiple_users_badge', avatarSizeClass)
|
53
|
+
)
|
54
|
+
|
47
55
|
return (
|
48
56
|
<div
|
49
57
|
{...ariaProps}
|
@@ -57,12 +65,12 @@ const MultipleUsers = (props: MultipleUsersProps) => {
|
|
57
65
|
className="pb_multiple_users_item"
|
58
66
|
dark={dark}
|
59
67
|
key={index}
|
60
|
-
size=
|
68
|
+
size={size}
|
61
69
|
/>
|
62
70
|
))}
|
63
71
|
|
64
72
|
<If condition={users.length > maxDisplayedUsers}>
|
65
|
-
<div className=
|
73
|
+
<div className={itemClasses}>
|
66
74
|
{`+${users.length - 3}`}
|
67
75
|
</div>
|
68
76
|
</If>
|
@@ -6,11 +6,13 @@
|
|
6
6
|
$pb_multiple_users_overlap: -9px;
|
7
7
|
$pb_multiple_users_border_size: 1px;
|
8
8
|
$pb_multiple_users_size: map-get($avatar-sizes, "xs");
|
9
|
+
$pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
|
9
10
|
|
10
11
|
[class^=pb_multiple_users_kit] {
|
11
12
|
display: inline-flex;
|
12
13
|
|
13
|
-
.
|
14
|
+
.multiple_users_badge_xs,
|
15
|
+
.multiple_users_badge_xxs {
|
14
16
|
display: flex;
|
15
17
|
align-items: center;
|
16
18
|
justify-content: center;
|
@@ -24,6 +26,11 @@ $pb_multiple_users_size: map-get($avatar-sizes, "xs");
|
|
24
26
|
font-size: $font_smallest - 1;
|
25
27
|
}
|
26
28
|
|
29
|
+
.multiple_users_badge_xxs {
|
30
|
+
width: $pb_multiple_users_size_xxs;
|
31
|
+
height: $pb_multiple_users_size_xxs;
|
32
|
+
}
|
33
|
+
|
27
34
|
.pb_multiple_users_item {
|
28
35
|
margin-left: $pb_multiple_users_overlap;
|
29
36
|
margin-right: 0;
|
@@ -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
|
+
}) %>
|
@@ -0,0 +1,108 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Body, MultipleUsers } from '../../'
|
3
|
+
|
4
|
+
const MultipleUsersSize = (props) => {
|
5
|
+
return (
|
6
|
+
<div>
|
7
|
+
<Body
|
8
|
+
color="light"
|
9
|
+
text="xs"
|
10
|
+
/>
|
11
|
+
<MultipleUsers
|
12
|
+
users={[
|
13
|
+
{
|
14
|
+
name: 'Patrick Welch',
|
15
|
+
imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
|
16
|
+
},
|
17
|
+
{
|
18
|
+
name: 'Lucille Sanchez',
|
19
|
+
imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
|
20
|
+
},
|
21
|
+
{
|
22
|
+
name: 'Beverly Reyes',
|
23
|
+
imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
|
24
|
+
},
|
25
|
+
{
|
26
|
+
name: 'Keith Craig',
|
27
|
+
imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
|
28
|
+
},
|
29
|
+
{
|
30
|
+
name: 'Alicia Cooper',
|
31
|
+
imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
|
32
|
+
},
|
33
|
+
]}
|
34
|
+
{...props}
|
35
|
+
/>
|
36
|
+
|
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
|
+
|
87
|
+
<br />
|
88
|
+
|
89
|
+
<MultipleUsers
|
90
|
+
marginTop="xs"
|
91
|
+
size="xxs"
|
92
|
+
users={[
|
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
|
+
]}
|
102
|
+
{...props}
|
103
|
+
/>
|
104
|
+
</div>
|
105
|
+
)
|
106
|
+
}
|
107
|
+
|
108
|
+
export default MultipleUsersSize
|
@@ -0,0 +1 @@
|
|
1
|
+
User avatar default size is `xs` or `28px`, but you can pass in `xxs` to change avatar size to `20px`.
|
@@ -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
|
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:
|
4
|
+
version: 10.0.1.alpha.railscusticon
|
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: 2021-
|
12
|
+
date: 2021-07-09 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -1004,6 +1004,8 @@ files:
|
|
1004
1004
|
- app/pb_kits/playbook/pb_icon/docs/_icon_animate.md
|
1005
1005
|
- app/pb_kits/playbook/pb_icon/docs/_icon_border.html.erb
|
1006
1006
|
- app/pb_kits/playbook/pb_icon/docs/_icon_border.jsx
|
1007
|
+
- app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb
|
1008
|
+
- app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx
|
1007
1009
|
- app/pb_kits/playbook/pb_icon/docs/_icon_default.html.erb
|
1008
1010
|
- app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx
|
1009
1011
|
- app/pb_kits/playbook/pb_icon/docs/_icon_flip.html.erb
|
@@ -1223,6 +1225,9 @@ files:
|
|
1223
1225
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default.jsx
|
1224
1226
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse.html.erb
|
1225
1227
|
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse.jsx
|
1228
|
+
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.html.erb
|
1229
|
+
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx
|
1230
|
+
- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.md
|
1226
1231
|
- app/pb_kits/playbook/pb_multiple_users/docs/example.yml
|
1227
1232
|
- app/pb_kits/playbook/pb_multiple_users/docs/index.js
|
1228
1233
|
- app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb
|
@@ -1972,7 +1977,6 @@ files:
|
|
1972
1977
|
- app/pb_kits/playbook/tokens/_animation-curves.scss
|
1973
1978
|
- app/pb_kits/playbook/tokens/_border_radius.scss
|
1974
1979
|
- app/pb_kits/playbook/tokens/_colors.scss
|
1975
|
-
- app/pb_kits/playbook/tokens/_fonts.scss
|
1976
1980
|
- app/pb_kits/playbook/tokens/_line_height.scss
|
1977
1981
|
- app/pb_kits/playbook/tokens/_opacity.scss
|
1978
1982
|
- app/pb_kits/playbook/tokens/_positioning.scss
|
@@ -2063,8 +2067,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
2063
2067
|
- !ruby/object:Gem::Version
|
2064
2068
|
version: 1.3.1
|
2065
2069
|
requirements: []
|
2066
|
-
|
2067
|
-
rubygems_version: 2.7.3
|
2070
|
+
rubygems_version: 3.1.4
|
2068
2071
|
signing_key:
|
2069
2072
|
specification_version: 4
|
2070
2073
|
summary: Playbook Design System
|
@@ -1,98 +0,0 @@
|
|
1
|
-
@font-face {
|
2
|
-
src: url('fonts/ProximaNova-Regular.woff2') format('woff2');
|
3
|
-
font-family: 'Proxima Nova';
|
4
|
-
font-style: normal;
|
5
|
-
font-weight: 500;
|
6
|
-
|
7
|
-
}
|
8
|
-
@font-face {
|
9
|
-
src: url('fonts/ProximaNova-Light.woff2') format('woff2');
|
10
|
-
font-family: 'Proxima Nova';
|
11
|
-
font-style: normal;
|
12
|
-
font-weight: 400;
|
13
|
-
|
14
|
-
}
|
15
|
-
@font-face {
|
16
|
-
src: url('fonts/ProximaNova-Thin.woff2') format('woff2');
|
17
|
-
font-family: 'Proxima Nova';
|
18
|
-
font-style: normal;
|
19
|
-
font-weight: 100;
|
20
|
-
|
21
|
-
}
|
22
|
-
@font-face {
|
23
|
-
src: url('fonts/ProximaNova-Semibold.woff2') format('woff2');
|
24
|
-
font-family: 'Proxima Nova';
|
25
|
-
font-style: normal;
|
26
|
-
font-weight: 600;
|
27
|
-
|
28
|
-
}
|
29
|
-
@font-face {
|
30
|
-
src: url('fonts/ProximaNova-Bold.woff2') format('woff2');
|
31
|
-
font-family: 'Proxima Nova';
|
32
|
-
font-style: normal;
|
33
|
-
font-weight: 700;
|
34
|
-
|
35
|
-
}
|
36
|
-
@font-face {
|
37
|
-
src: url('fonts/ProximaNova-Extrabld.woff2') format('woff2');
|
38
|
-
font-family: 'Proxima Nova';
|
39
|
-
font-style: normal;
|
40
|
-
font-weight: 800;
|
41
|
-
|
42
|
-
}
|
43
|
-
@font-face {
|
44
|
-
src: url('fonts/ProximaNova-Black.woff2') format('woff2');
|
45
|
-
font-family: 'Proxima Nova';
|
46
|
-
font-style: normal;
|
47
|
-
font-weight: 900;
|
48
|
-
|
49
|
-
}
|
50
|
-
@font-face {
|
51
|
-
src: url('fonts/ProximaNova-RegularIt.woff2') format('woff2');
|
52
|
-
font-family: 'Proxima Nova';
|
53
|
-
font-style: italic;
|
54
|
-
font-weight: 500;
|
55
|
-
|
56
|
-
}
|
57
|
-
@font-face {
|
58
|
-
src: url('fonts/ProximaNova-LightIt.woff2') format('woff2');
|
59
|
-
font-family: 'Proxima Nova';
|
60
|
-
font-style: italic;
|
61
|
-
font-weight: 400;
|
62
|
-
|
63
|
-
}
|
64
|
-
@font-face {
|
65
|
-
src: url('fonts/ProximaNova-ThinIt.woff2') format('woff2');
|
66
|
-
font-family: 'Proxima Nova';
|
67
|
-
font-style: italic;
|
68
|
-
font-weight: 100;
|
69
|
-
|
70
|
-
}
|
71
|
-
@font-face {
|
72
|
-
src: url('fonts/ProximaNova-SemiboldIt.woff2') format('woff2');
|
73
|
-
font-family: 'Proxima Nova';
|
74
|
-
font-style: italic;
|
75
|
-
font-weight: 600;
|
76
|
-
|
77
|
-
}
|
78
|
-
@font-face {
|
79
|
-
src: url('fonts/ProximaNova-BoldIt.woff2') format('woff2');
|
80
|
-
font-family: 'Proxima Nova';
|
81
|
-
font-style: italic;
|
82
|
-
font-weight: 700;
|
83
|
-
|
84
|
-
}
|
85
|
-
@font-face {
|
86
|
-
src: url('fonts/ProximaNova-ExtrabldIt.woff2') format('woff2');
|
87
|
-
font-family: 'Proxima Nova';
|
88
|
-
font-style: italic;
|
89
|
-
font-weight: 800;
|
90
|
-
|
91
|
-
}
|
92
|
-
@font-face {
|
93
|
-
src: url('fonts/ProximaNova-BlackIt.woff2') format('woff2');
|
94
|
-
font-family: 'Proxima Nova';
|
95
|
-
font-style: italic;
|
96
|
-
font-weight: 900;
|
97
|
-
|
98
|
-
}
|