playbook_ui 12.23.0 → 12.24.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/pb_avatar/docs/_avatar_swift.md +1 -0
- data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_card/_card.tsx +1 -0
- data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +6 -1
- data/app/pb_kits/playbook/pb_docs/kit_example.rb +13 -2
- data/app/pb_kits/playbook/pb_title/_title.scss +1 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb +1 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx +11 -6
- data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md +2 -2
- data/app/pb_kits/playbook/tokens/_screen_sizes.scss +19 -0
- data/app/pb_kits/playbook/utilities/_spacing.scss +27 -1
- data/app/pb_kits/playbook/utilities/globalProps.ts +61 -16
- data/lib/playbook/pb_doc_helper.rb +4 -1
- data/lib/playbook/spacing.rb +20 -5
- data/lib/playbook/version.rb +2 -2
- metadata +3 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: f27b3e255fc8158201600b6221f2091e84ceb753c83d6d28a045ca256729ec05
|
4
|
+
data.tar.gz: d2af8d464afa9225d3a3647dc83c2a241f208849978b39312d49f45b74415937
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: '018df9baaa8a9b1bc628873a71a2c1a5dde29e228be173511078a8f934cab375c7992f7bdd1b8e50523d401bd3554fb5f491f2fe98daf811c27e88c5ed6534a4'
|
7
|
+
data.tar.gz: 30cf511832a2ce5021ed6658e76f89c5ecacd040538b67e169e41071eb6451969cc8e0fe71a6855e8a413ae1465837fd122ba26baa07a49788031c21e2c00744
|
@@ -0,0 +1 @@
|
|
1
|
+
![image for avatar](https://images.unsplash.com/photo-1684237276530-a562fa8338b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=580&q=80)
|
@@ -7,7 +7,12 @@
|
|
7
7
|
<%= example %>
|
8
8
|
<br>
|
9
9
|
</div>
|
10
|
-
|
10
|
+
|
11
|
+
<% if (action_name == "kit_show_swift") %>
|
12
|
+
<div class="pb--kit-example-markdown pt_none <%= dark ? "dark" : "" %>">
|
13
|
+
<%= render_markdown(description) %>
|
14
|
+
</div>
|
15
|
+
<% end %>
|
11
16
|
<% if show_code %>
|
12
17
|
<div class="markdown pb--kit-example-markdown <%= dark ? "dark" : "" %>">
|
13
18
|
<%= render_markdown(description) %>
|
@@ -11,7 +11,7 @@ module Playbook
|
|
11
11
|
prop :example_title, type: Playbook::Props::String, required: true
|
12
12
|
prop :example_key, type: Playbook::Props::String, required: true
|
13
13
|
prop :show_code, type: Playbook::Props::Boolean, default: true
|
14
|
-
prop :type, type: Playbook::Props::Enum, values: %w[rails react], default: "rails"
|
14
|
+
prop :type, type: Playbook::Props::Enum, values: %w[rails react swift], default: "rails"
|
15
15
|
prop :dark, type: Playbook::Props::Boolean, default: false
|
16
16
|
|
17
17
|
def example
|
@@ -19,6 +19,9 @@ module Playbook
|
|
19
19
|
render inline: source
|
20
20
|
elsif type == "react"
|
21
21
|
react_component example_key.camelize, { dark: dark }
|
22
|
+
elsif type == "swift"
|
23
|
+
## render the markdown file
|
24
|
+
render inline: source
|
22
25
|
end
|
23
26
|
end
|
24
27
|
|
@@ -32,7 +35,11 @@ module Playbook
|
|
32
35
|
|
33
36
|
def source
|
34
37
|
@source ||= begin
|
35
|
-
extension = type == "
|
38
|
+
extension = if type == "rails"
|
39
|
+
"html.erb"
|
40
|
+
else
|
41
|
+
type == "swift" ? "swift" : "jsx"
|
42
|
+
end
|
36
43
|
stringified_code = read_kit_file("docs", "_#{example_key}.#{extension}")
|
37
44
|
sanitize_code(stringified_code)
|
38
45
|
end
|
@@ -42,6 +49,10 @@ module Playbook
|
|
42
49
|
read_kit_file("", "_#{example_key}.tsx")
|
43
50
|
end
|
44
51
|
|
52
|
+
def swift_source
|
53
|
+
read_kit_file("", "_#{example_key}.swift")
|
54
|
+
end
|
55
|
+
|
45
56
|
private
|
46
57
|
|
47
58
|
def sanitize_code(stringified_code)
|
@@ -1,15 +1,20 @@
|
|
1
|
-
import React from
|
1
|
+
import React from "react"
|
2
2
|
|
3
|
-
import Title from
|
3
|
+
import Title from "../_title"
|
4
4
|
|
5
5
|
const TitleLightWeight = (props) => {
|
6
6
|
return (
|
7
7
|
<div>
|
8
|
-
<Title
|
9
|
-
bold={false}
|
8
|
+
<Title bold={false}
|
10
9
|
size={1}
|
11
|
-
tag=
|
12
|
-
text=
|
10
|
+
tag='h1'
|
11
|
+
text='Title 1'
|
12
|
+
{...props}
|
13
|
+
/>
|
14
|
+
<Title bold={false}
|
15
|
+
size={2}
|
16
|
+
tag='h2'
|
17
|
+
text='Title 2'
|
13
18
|
{...props}
|
14
19
|
/>
|
15
20
|
</div>
|
@@ -1,4 +1,4 @@
|
|
1
1
|
##### Prop
|
2
|
-
Title `size 1` will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`.
|
3
|
-
Title `size
|
2
|
+
Title `size 1` & `size 2` will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`.
|
3
|
+
Title `size 3` uses a light font weight by default and will not accept a bold font weight.
|
4
4
|
Title `size 4` uses a heavy font weight by default and will not accept a lighter font weight.
|
@@ -38,6 +38,25 @@ $breakpoints_grid: (
|
|
38
38
|
)
|
39
39
|
);
|
40
40
|
|
41
|
+
$breakpoints_max_only: (
|
42
|
+
xl: (
|
43
|
+
max: $screen-xl-max
|
44
|
+
),
|
45
|
+
lg: (
|
46
|
+
max: $screen-lg-max
|
47
|
+
),
|
48
|
+
md: (
|
49
|
+
max: $screen-md-max
|
50
|
+
),
|
51
|
+
sm: (
|
52
|
+
max: $screen-sm-max
|
53
|
+
),
|
54
|
+
xs: (
|
55
|
+
max: $screen-xs-max,
|
56
|
+
)
|
57
|
+
);
|
58
|
+
|
59
|
+
|
41
60
|
@function breakpoint($breakpoint_name) {
|
42
61
|
@return map-get($breakpoints, $breakpoint_name);
|
43
62
|
}
|
@@ -7,7 +7,10 @@ $space_classes: (
|
|
7
7
|
md: $space_md,
|
8
8
|
lg: $space_lg,
|
9
9
|
xl: $space_xl,
|
10
|
-
none: 0
|
10
|
+
none: 0,
|
11
|
+
auto: auto,
|
12
|
+
initial: initial,
|
13
|
+
inherit: inherit
|
11
14
|
);
|
12
15
|
|
13
16
|
$positions: (
|
@@ -41,3 +44,26 @@ $positions: (
|
|
41
44
|
}
|
42
45
|
}
|
43
46
|
}
|
47
|
+
|
48
|
+
@each $size, $size_value in $breakpoints_max_only {
|
49
|
+
@each $position_name, $position in $positions {
|
50
|
+
@each $space_name, $space in $space_classes {
|
51
|
+
$min_size: map-get($size_value, "min");
|
52
|
+
$max_size: map-get($size_value, "max");
|
53
|
+
.#{$position_name}_#{$size}_#{$space_name} {
|
54
|
+
@if type-of($position)=="list" {
|
55
|
+
@each $coordinate in $position {
|
56
|
+
@include break_at( $max_size) {
|
57
|
+
#{$coordinate}: #{$space} !important;
|
58
|
+
}
|
59
|
+
}
|
60
|
+
}
|
61
|
+
@else {
|
62
|
+
@include break_at( $max_size) {
|
63
|
+
#{$position}: #{$space} !important;
|
64
|
+
}
|
65
|
+
}
|
66
|
+
}
|
67
|
+
}
|
68
|
+
}
|
69
|
+
}
|
@@ -22,7 +22,7 @@ type AlignItems = {
|
|
22
22
|
type AlignSelf = {
|
23
23
|
alignSelf?: Alignment & ("auto" | "stretch" | "baseline")
|
24
24
|
}
|
25
|
-
type AllSizes = None | Sizes
|
25
|
+
type AllSizes = None | Sizes | "auto" | "initial" | "inherit"
|
26
26
|
|
27
27
|
type BorderRadius = {
|
28
28
|
borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "rounded",
|
@@ -153,22 +153,67 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
|
|
153
153
|
padding,
|
154
154
|
}: Margin & Padding) => {
|
155
155
|
let css = ''
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
156
|
+
const spacingProps = {
|
157
|
+
marginRight,
|
158
|
+
marginLeft,
|
159
|
+
marginTop,
|
160
|
+
marginBottom,
|
161
|
+
marginX,
|
162
|
+
marginY,
|
163
|
+
margin,
|
164
|
+
paddingRight,
|
165
|
+
paddingLeft,
|
166
|
+
paddingTop,
|
167
|
+
paddingBottom,
|
168
|
+
paddingX,
|
169
|
+
paddingY,
|
170
|
+
padding,
|
171
|
+
};
|
172
|
+
|
173
|
+
function handleObjectValue(properties: Margin | Padding, prefix: string) {
|
174
|
+
let classResult = '';
|
175
|
+
|
176
|
+
Object.entries(properties).forEach(([key, value]) => {
|
177
|
+
classResult += `${prefix}_${key}_${value} `;
|
178
|
+
});
|
179
|
+
|
180
|
+
return classResult;
|
181
|
+
}
|
182
|
+
|
183
|
+
function getPrefix(key: string) {
|
184
|
+
const prefixes: Record<string, string> = {
|
185
|
+
marginRight: 'mr',
|
186
|
+
marginLeft: 'ml',
|
187
|
+
marginTop: 'mt',
|
188
|
+
marginBottom: 'mb',
|
189
|
+
marginX: 'mx',
|
190
|
+
marginY: 'my',
|
191
|
+
margin: 'm',
|
192
|
+
paddingRight: 'pr',
|
193
|
+
paddingLeft: 'pl',
|
194
|
+
paddingTop: 'pt',
|
195
|
+
paddingBottom: 'pb',
|
196
|
+
paddingX: 'px',
|
197
|
+
paddingY: 'py',
|
198
|
+
padding: 'p',
|
199
|
+
};
|
200
|
+
|
201
|
+
return prefixes[key];
|
202
|
+
}
|
203
|
+
|
204
|
+
Object.entries(spacingProps).forEach(([key, value]) => {
|
205
|
+
if (value) {
|
206
|
+
if (typeof value === 'object') {
|
207
|
+
css += handleObjectValue(value, getPrefix(key));
|
208
|
+
} else {
|
209
|
+
const prefix = getPrefix(key);
|
210
|
+
css += `${prefix}_${value} `;
|
211
|
+
}
|
212
|
+
}
|
213
|
+
});
|
214
|
+
return css.trim();
|
171
215
|
},
|
216
|
+
|
172
217
|
darkProps: ({ dark }: Dark) => dark ? 'dark' : '',
|
173
218
|
numberSpacingProps: ({ numberSpacing }: NumberSpacing) => {
|
174
219
|
let css = ''
|
@@ -84,8 +84,11 @@ module Playbook
|
|
84
84
|
def pb_doc_render_clickable_title(kit, type)
|
85
85
|
url = "#"
|
86
86
|
begin
|
87
|
-
url =
|
87
|
+
url = case type
|
88
|
+
when "react"
|
88
89
|
kit_show_reacts_path(kit)
|
90
|
+
when "swift"
|
91
|
+
kit_show_swift_path(kit)
|
89
92
|
else
|
90
93
|
kit_show_path(kit)
|
91
94
|
end
|
data/lib/playbook/spacing.rb
CHANGED
@@ -50,17 +50,32 @@ module Playbook
|
|
50
50
|
end
|
51
51
|
|
52
52
|
def spacing_values
|
53
|
-
%w[none xxs xs sm md lg xl]
|
53
|
+
%w[none xxs xs sm md lg xl auto initial inherit]
|
54
|
+
end
|
55
|
+
|
56
|
+
def screen_size_values
|
57
|
+
%w[xs sm md lg xl]
|
54
58
|
end
|
55
59
|
|
56
60
|
def spacing_props
|
57
61
|
selected_props = spacing_options.keys.select { |sk| try(sk) }
|
58
62
|
return nil unless selected_props.present?
|
59
63
|
|
60
|
-
selected_props.
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
+
responsive = selected_props.present? && try(selected_props.first).is_a?(::Hash)
|
65
|
+
css = ""
|
66
|
+
selected_props.each do |prop|
|
67
|
+
spacing_value = send(prop)
|
68
|
+
prefix = spacing_options[prop]
|
69
|
+
if responsive
|
70
|
+
spacing_value.each do |key, value|
|
71
|
+
css += "#{prefix}_#{key}_#{value} " if screen_size_values.include?(key.to_s) && spacing_values.include?(value.to_s)
|
72
|
+
end
|
73
|
+
elsif spacing_values.include?(spacing_value)
|
74
|
+
css += "#{prefix}_#{spacing_value} "
|
75
|
+
end
|
76
|
+
end
|
77
|
+
|
78
|
+
css.strip unless css.blank?
|
64
79
|
end
|
65
80
|
|
66
81
|
def max_width_props
|
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: 12.
|
4
|
+
version: 12.24.0
|
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-05-
|
12
|
+
date: 2023-05-26 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -311,6 +311,7 @@ files:
|
|
311
311
|
- app/pb_kits/playbook/pb_avatar/docs/_avatar_status.html.erb
|
312
312
|
- app/pb_kits/playbook/pb_avatar/docs/_avatar_status.jsx
|
313
313
|
- app/pb_kits/playbook/pb_avatar/docs/_avatar_status.md
|
314
|
+
- app/pb_kits/playbook/pb_avatar/docs/_avatar_swift.md
|
314
315
|
- app/pb_kits/playbook/pb_avatar/docs/_description.md
|
315
316
|
- app/pb_kits/playbook/pb_avatar/docs/_footer.md
|
316
317
|
- app/pb_kits/playbook/pb_avatar/docs/example.yml
|