playbook_ui_docs 13.14.0.pre.alpha.play1101betaicons1825 → 13.14.0.pre.alpha.play1106filter1748
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_button/docs/_button_props_swift.md +0 -11
- data/app/pb_kits/playbook/pb_button/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +4 -5
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx +4 -8
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx +4 -8
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx +2 -4
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +1 -1
- data/app/pb_kits/playbook/pb_dialog/docs/example.yml +0 -7
- data/app/pb_kits/playbook/pb_person/docs/example.yml +0 -4
- data/app/pb_kits/playbook/pb_select/docs/example.yml +0 -5
- data/app/pb_kits/playbook/pb_user/docs/example.yml +0 -7
- data/dist/playbook-doc.js +8 -8
- metadata +2 -49
- data/app/pb_kits/playbook/pb_beta_icon/docs/_description.md +0 -1
- data/app/pb_kits/playbook/pb_beta_icon/docs/_footer.md +0 -2
- data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_animate.html.erb +0 -3
- data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_animate.jsx +0 -35
- data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_animate.md +0 -1
- data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_border.html.erb +0 -1
- data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_border.jsx +0 -19
- data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_border_swift.md +0 -7
- data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_custom.html.erb +0 -16
- data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_custom.jsx +0 -34
- data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_custom.md +0 -19
- data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_default.html.erb +0 -1
- data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_default.jsx +0 -17
- data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_default_swift.md +0 -7
- data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_fa_kit.html.erb +0 -1
- data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_fa_kit.jsx +0 -21
- data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_fa_kit.md +0 -7
- data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_flip.html.erb +0 -3
- data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_flip.jsx +0 -33
- data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_flip_swift.md +0 -11
- data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_props_swift.md +0 -8
- data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_pull.html.erb +0 -2
- data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_pull.jsx +0 -26
- data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_pull.md +0 -1
- data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_rotate.html.erb +0 -3
- data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_rotate.jsx +0 -33
- data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_rotate_swift.md +0 -11
- data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_sizes.html.erb +0 -16
- data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_sizes.jsx +0 -133
- data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_sizes_swift.md +0 -46
- data/app/pb_kits/playbook/pb_beta_icon/docs/example.yml +0 -30
- data/app/pb_kits/playbook/pb_beta_icon/docs/index.js +0 -9
- data/app/pb_kits/playbook/pb_button/docs/_button_reaction_swift.md +0 -26
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default_swift.md +0 -11
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_props_table.md +0 -13
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes_swift.md +0 -18
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status_swift.md +0 -14
- data/app/pb_kits/playbook/pb_person/docs/_person_default_swift.md +0 -8
- data/app/pb_kits/playbook/pb_person/docs/_person_props_swift.md +0 -5
- data/app/pb_kits/playbook/pb_select/docs/_select_default_swift.md +0 -15
- data/app/pb_kits/playbook/pb_select/docs/_select_error_swift.md +0 -18
- data/app/pb_kits/playbook/pb_select/docs/_select_props_table.md +0 -8
- data/app/pb_kits/playbook/pb_user/docs/_user_horizontal_swift.md +0 -37
- data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md +0 -10
- data/app/pb_kits/playbook/pb_user/docs/_user_size_swift.md +0 -35
- data/app/pb_kits/playbook/pb_user/docs/_user_text_only_swift.md +0 -27
- data/app/pb_kits/playbook/pb_user/docs/_user_vertical_size_swift.md +0 -35
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui_docs
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 13.14.0.pre.alpha.
|
4
|
+
version: 13.14.0.pre.alpha.play1106filter1748
|
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:
|
12
|
+
date: 2023-12-21 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: playbook_ui
|
@@ -122,38 +122,6 @@ files:
|
|
122
122
|
- app/pb_kits/playbook/pb_bar_graph/docs/_description.md
|
123
123
|
- app/pb_kits/playbook/pb_bar_graph/docs/example.yml
|
124
124
|
- app/pb_kits/playbook/pb_bar_graph/docs/index.js
|
125
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_description.md
|
126
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_footer.md
|
127
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_icon_animate.html.erb
|
128
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_icon_animate.jsx
|
129
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_icon_animate.md
|
130
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_icon_border.html.erb
|
131
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_icon_border.jsx
|
132
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_icon_border_swift.md
|
133
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_icon_custom.html.erb
|
134
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_icon_custom.jsx
|
135
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_icon_custom.md
|
136
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_icon_default.html.erb
|
137
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_icon_default.jsx
|
138
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_icon_default_swift.md
|
139
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_icon_fa_kit.html.erb
|
140
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_icon_fa_kit.jsx
|
141
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_icon_fa_kit.md
|
142
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_icon_flip.html.erb
|
143
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_icon_flip.jsx
|
144
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_icon_flip_swift.md
|
145
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_icon_props_swift.md
|
146
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_icon_pull.html.erb
|
147
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_icon_pull.jsx
|
148
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_icon_pull.md
|
149
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_icon_rotate.html.erb
|
150
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_icon_rotate.jsx
|
151
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_icon_rotate_swift.md
|
152
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_icon_sizes.html.erb
|
153
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_icon_sizes.jsx
|
154
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/_icon_sizes_swift.md
|
155
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/example.yml
|
156
|
-
- app/pb_kits/playbook/pb_beta_icon/docs/index.js
|
157
125
|
- app/pb_kits/playbook/pb_body/docs/_body_articles.html.erb
|
158
126
|
- app/pb_kits/playbook/pb_body/docs/_body_articles.jsx
|
159
127
|
- app/pb_kits/playbook/pb_body/docs/_body_articles.md
|
@@ -211,7 +179,6 @@ files:
|
|
211
179
|
- app/pb_kits/playbook/pb_button/docs/_button_reaction.html.erb
|
212
180
|
- app/pb_kits/playbook/pb_button/docs/_button_reaction.jsx
|
213
181
|
- app/pb_kits/playbook/pb_button/docs/_button_reaction.md
|
214
|
-
- app/pb_kits/playbook/pb_button/docs/_button_reaction_swift.md
|
215
182
|
- app/pb_kits/playbook/pb_button/docs/_button_size.html.erb
|
216
183
|
- app/pb_kits/playbook/pb_button/docs/_button_size.jsx
|
217
184
|
- app/pb_kits/playbook/pb_button/docs/_button_size.md
|
@@ -544,14 +511,12 @@ files:
|
|
544
511
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb
|
545
512
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx
|
546
513
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_default.md
|
547
|
-
- app/pb_kits/playbook/pb_dialog/docs/_dialog_default_swift.md
|
548
514
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.html.erb
|
549
515
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx
|
550
516
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.md
|
551
517
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.html.erb
|
552
518
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx
|
553
519
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.md
|
554
|
-
- app/pb_kits/playbook/pb_dialog/docs/_dialog_props_table.md
|
555
520
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.html.erb
|
556
521
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx
|
557
522
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.md
|
@@ -562,14 +527,12 @@ files:
|
|
562
527
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.md
|
563
528
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.html.erb
|
564
529
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx
|
565
|
-
- app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes_swift.md
|
566
530
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.html.erb
|
567
531
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx
|
568
532
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.md
|
569
533
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_status.html.erb
|
570
534
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx
|
571
535
|
- app/pb_kits/playbook/pb_dialog/docs/_dialog_status.md
|
572
|
-
- app/pb_kits/playbook/pb_dialog/docs/_dialog_status_swift.md
|
573
536
|
- app/pb_kits/playbook/pb_dialog/docs/example.yml
|
574
537
|
- app/pb_kits/playbook/pb_dialog/docs/index.js
|
575
538
|
- app/pb_kits/playbook/pb_distribution_bar/docs/_description.md
|
@@ -1113,8 +1076,6 @@ files:
|
|
1113
1076
|
- app/pb_kits/playbook/pb_person/docs/_person_default.html.erb
|
1114
1077
|
- app/pb_kits/playbook/pb_person/docs/_person_default.jsx
|
1115
1078
|
- app/pb_kits/playbook/pb_person/docs/_person_default.md
|
1116
|
-
- app/pb_kits/playbook/pb_person/docs/_person_default_swift.md
|
1117
|
-
- app/pb_kits/playbook/pb_person/docs/_person_props_swift.md
|
1118
1079
|
- app/pb_kits/playbook/pb_person/docs/example.yml
|
1119
1080
|
- app/pb_kits/playbook/pb_person/docs/index.js
|
1120
1081
|
- app/pb_kits/playbook/pb_person_contact/docs/_description.md
|
@@ -1294,7 +1255,6 @@ files:
|
|
1294
1255
|
- app/pb_kits/playbook/pb_select/docs/_select_custom_select.jsx
|
1295
1256
|
- app/pb_kits/playbook/pb_select/docs/_select_default.html.erb
|
1296
1257
|
- app/pb_kits/playbook/pb_select/docs/_select_default.jsx
|
1297
|
-
- app/pb_kits/playbook/pb_select/docs/_select_default_swift.md
|
1298
1258
|
- app/pb_kits/playbook/pb_select/docs/_select_disabled.html.erb
|
1299
1259
|
- app/pb_kits/playbook/pb_select/docs/_select_disabled.jsx
|
1300
1260
|
- app/pb_kits/playbook/pb_select/docs/_select_disabled_options.html.erb
|
@@ -1302,7 +1262,6 @@ files:
|
|
1302
1262
|
- app/pb_kits/playbook/pb_select/docs/_select_error.html.erb
|
1303
1263
|
- app/pb_kits/playbook/pb_select/docs/_select_error.jsx
|
1304
1264
|
- app/pb_kits/playbook/pb_select/docs/_select_error.md
|
1305
|
-
- app/pb_kits/playbook/pb_select/docs/_select_error_swift.md
|
1306
1265
|
- app/pb_kits/playbook/pb_select/docs/_select_inline.html.erb
|
1307
1266
|
- app/pb_kits/playbook/pb_select/docs/_select_inline.jsx
|
1308
1267
|
- app/pb_kits/playbook/pb_select/docs/_select_inline_compact.html.erb
|
@@ -1310,7 +1269,6 @@ files:
|
|
1310
1269
|
- app/pb_kits/playbook/pb_select/docs/_select_multiple.html.erb
|
1311
1270
|
- app/pb_kits/playbook/pb_select/docs/_select_multiple.jsx
|
1312
1271
|
- app/pb_kits/playbook/pb_select/docs/_select_multiple.md
|
1313
|
-
- app/pb_kits/playbook/pb_select/docs/_select_props_table.md
|
1314
1272
|
- app/pb_kits/playbook/pb_select/docs/_select_required.html.erb
|
1315
1273
|
- app/pb_kits/playbook/pb_select/docs/_select_required.jsx
|
1316
1274
|
- app/pb_kits/playbook/pb_select/docs/_select_value_text_same.html.erb
|
@@ -1705,19 +1663,14 @@ files:
|
|
1705
1663
|
- app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.md
|
1706
1664
|
- app/pb_kits/playbook/pb_user/docs/_user_default.html.erb
|
1707
1665
|
- app/pb_kits/playbook/pb_user/docs/_user_default.jsx
|
1708
|
-
- app/pb_kits/playbook/pb_user/docs/_user_horizontal_swift.md
|
1709
|
-
- app/pb_kits/playbook/pb_user/docs/_user_props_table.md
|
1710
1666
|
- app/pb_kits/playbook/pb_user/docs/_user_size.html.erb
|
1711
1667
|
- app/pb_kits/playbook/pb_user/docs/_user_size.jsx
|
1712
|
-
- app/pb_kits/playbook/pb_user/docs/_user_size_swift.md
|
1713
1668
|
- app/pb_kits/playbook/pb_user/docs/_user_subtitle.html.erb
|
1714
1669
|
- app/pb_kits/playbook/pb_user/docs/_user_subtitle.jsx
|
1715
1670
|
- app/pb_kits/playbook/pb_user/docs/_user_text_only.html.erb
|
1716
1671
|
- app/pb_kits/playbook/pb_user/docs/_user_text_only.jsx
|
1717
|
-
- app/pb_kits/playbook/pb_user/docs/_user_text_only_swift.md
|
1718
1672
|
- app/pb_kits/playbook/pb_user/docs/_user_vertical_size.html.erb
|
1719
1673
|
- app/pb_kits/playbook/pb_user/docs/_user_vertical_size.jsx
|
1720
|
-
- app/pb_kits/playbook/pb_user/docs/_user_vertical_size_swift.md
|
1721
1674
|
- app/pb_kits/playbook/pb_user/docs/_user_with_territory.html.erb
|
1722
1675
|
- app/pb_kits/playbook/pb_user/docs/_user_with_territory.jsx
|
1723
1676
|
- app/pb_kits/playbook/pb_user/docs/example.yml
|
@@ -1 +0,0 @@
|
|
1
|
-
An icon is a graphic symbol that represents an object (ie a file) or a function. They can be used to give the user feedback.
|
@@ -1,35 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
|
3
|
-
import Icon from '../_icon'
|
4
|
-
|
5
|
-
const IconAnimate = (props) => {
|
6
|
-
return (
|
7
|
-
<div>
|
8
|
-
<p>
|
9
|
-
<Icon
|
10
|
-
fixedWidth
|
11
|
-
icon="spinner"
|
12
|
-
size="2x"
|
13
|
-
spin
|
14
|
-
{...props}
|
15
|
-
/>
|
16
|
-
{' '}
|
17
|
-
<span>{'Spin'}</span>
|
18
|
-
</p>
|
19
|
-
<br />
|
20
|
-
<p>
|
21
|
-
<Icon
|
22
|
-
fixedWidth
|
23
|
-
icon="spinner"
|
24
|
-
pulse
|
25
|
-
size="2x"
|
26
|
-
{...props}
|
27
|
-
/>
|
28
|
-
{' '}
|
29
|
-
<span>{'Pulse'}</span>
|
30
|
-
</p>
|
31
|
-
</div>
|
32
|
-
)
|
33
|
-
}
|
34
|
-
|
35
|
-
export default IconAnimate
|
@@ -1 +0,0 @@
|
|
1
|
-
A spinner icon can show a user that something is loading or saving.
|
@@ -1 +0,0 @@
|
|
1
|
-
<%= pb_rails("icon", props: { icon: "user", border: true, fixed_width: true, size: "2x" }) %>
|
@@ -1,19 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
|
3
|
-
import Icon from '../_icon'
|
4
|
-
|
5
|
-
const IconBorder = (props) => {
|
6
|
-
return (
|
7
|
-
<div>
|
8
|
-
<Icon
|
9
|
-
border
|
10
|
-
fixedWidth
|
11
|
-
icon="user"
|
12
|
-
size="2x"
|
13
|
-
{...props}
|
14
|
-
/>
|
15
|
-
</div>
|
16
|
-
)
|
17
|
-
}
|
18
|
-
|
19
|
-
export default IconBorder
|
@@ -1,16 +0,0 @@
|
|
1
|
-
<%# SVG fill color inherited from css color property %>
|
2
|
-
<div class="icon-wrapper">
|
3
|
-
|
4
|
-
<% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
|
5
|
-
<p><%= pb_rails("icon", props: { custom_icon: svg_url } ) %></p>
|
6
|
-
<p><%= pb_rails("icon", props: { rotation: 90, custom_icon: svg_url, size: "2x" } ) %></p>
|
7
|
-
<p><%= pb_rails("icon", props: { spin: true, custom_icon: svg_url, size: "3x" } ) %></p>
|
8
|
-
<p><%= pb_rails("icon", props: { size: "5x", custom_icon: svg_url } ) %></p>
|
9
|
-
<p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", custom_icon: svg_url } ) %></p>
|
10
|
-
|
11
|
-
<%= pb_rails("body", props: {
|
12
|
-
text: "Custom icons are compatible with other icon props (size, rotation,
|
13
|
-
spin, flip, etc). Their SVG fill colors will be inherited from
|
14
|
-
parent element's css color properties."
|
15
|
-
} ) %>
|
16
|
-
</div>
|
@@ -1,34 +0,0 @@
|
|
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
|
-
ariaHidden="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
|
@@ -1,19 +0,0 @@
|
|
1
|
-
# Tips for Custom Icons
|
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 component/view* you are working on. This can easily be done in programmatic and maintainable ways.
|
12
|
-
|
13
|
-
### React
|
14
|
-
|
15
|
-
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.
|
16
|
-
|
17
|
-
### Rails
|
18
|
-
|
19
|
-
Some Rails applications use only webpack(er) which means using `image_url` will be successful over `image_path` in most cases especially development where Webpack Dev Server is serving assets over HTTP. Rails applications still using Asset Pipeline may use `image_path` or `image_url`. Of course, YMMV depending on any custom configurations in your Rails application.
|
@@ -1 +0,0 @@
|
|
1
|
-
<%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>
|
@@ -1 +0,0 @@
|
|
1
|
-
<%= pb_rails("icon", props: { icon: "powergon", font_style: "fak", fixed_width: true, size: "5x" }) %>
|
@@ -1,21 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
|
3
|
-
import Icon from '../_icon'
|
4
|
-
|
5
|
-
import '../../../../../../playbook-website/app/javascript/scripts/custom-icons'
|
6
|
-
|
7
|
-
const IconFaKit = (props) => {
|
8
|
-
return (
|
9
|
-
<div>
|
10
|
-
<Icon
|
11
|
-
{...props}
|
12
|
-
fixedWidth
|
13
|
-
fontStyle="fak"
|
14
|
-
icon="powergon"
|
15
|
-
size="5x"
|
16
|
-
/>
|
17
|
-
</div>
|
18
|
-
)
|
19
|
-
}
|
20
|
-
|
21
|
-
export default IconFaKit
|
@@ -1,7 +0,0 @@
|
|
1
|
-
Our Icon kit allows integration with [FontAwesome's custom kit](https://fontawesome.com/v6/docs/web/setup/use-kit#contentHeader) functionality out-of-the-box.
|
2
|
-
|
3
|
-
All you need to do is 3 things:
|
4
|
-
1) Import your custom-icon.js file as outlined in the FontAwesome docs.
|
5
|
-
2) Use our fontStyle prop called "fak" so that our Icon component knows you are using a "fa-kit" icon.
|
6
|
-
3) Pass in your FaKit name as a string to our icon prop (This is the name that you designated when you uploaded the icon on their site).
|
7
|
-
|
@@ -1,3 +0,0 @@
|
|
1
|
-
<%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "horizontal", size: "2x" }) %>
|
2
|
-
<%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "vertical", size: "2x" }) %>
|
3
|
-
<%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "both", size: "2x" }) %>
|
@@ -1,33 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
|
3
|
-
import Icon from '../_icon'
|
4
|
-
|
5
|
-
const IconFlip = (props) => {
|
6
|
-
return (
|
7
|
-
<div>
|
8
|
-
<Icon
|
9
|
-
fixedWidth
|
10
|
-
flip="horizontal"
|
11
|
-
icon="question-circle"
|
12
|
-
size="2x"
|
13
|
-
{...props}
|
14
|
-
/>
|
15
|
-
<Icon
|
16
|
-
fixedWidth
|
17
|
-
flip="vertical"
|
18
|
-
icon="question-circle"
|
19
|
-
size="2x"
|
20
|
-
{...props}
|
21
|
-
/>
|
22
|
-
<Icon
|
23
|
-
fixedWidth
|
24
|
-
flip="both"
|
25
|
-
icon="question-circle"
|
26
|
-
size="2x"
|
27
|
-
{...props}
|
28
|
-
/>
|
29
|
-
</div>
|
30
|
-
)
|
31
|
-
}
|
32
|
-
|
33
|
-
export default IconFlip
|
@@ -1,11 +0,0 @@
|
|
1
|
-
![icon-flipped](https://github.com/powerhome/playbook/assets/92755007/2776fb83-942d-4a38-9dff-9dcb73940dfe)
|
2
|
-
|
3
|
-
```swift
|
4
|
-
|
5
|
-
HStack(spacing: Spacing.xSmall) {
|
6
|
-
PbBetaIcon(FontAwesome.questionCircle, flipped: [.horizontal])
|
7
|
-
PbBetaIcon(FontAwesome.questionCircle, flipped: [.vertical])
|
8
|
-
PbBetaIcon(FontAwesome.questionCircle, flipped: [.horizontal, .vertical])
|
9
|
-
}
|
10
|
-
|
11
|
-
```
|
@@ -1,8 +0,0 @@
|
|
1
|
-
### Props
|
2
|
-
| Name | Type | Description | Default | Values |
|
3
|
-
| --- | ----------- | --------- | --------- | --------- |
|
4
|
-
| **Icon** | `PlaybookGenericIcon` | Sets the kit's Icon | | |
|
5
|
-
| **Size** | `IconSize` | Changes the size of the Icon | `.x1` | `xSmall` `small` `large` `x1` `x2` `x3` `x4` `x5` `x6` `x7` `x8` `x9` `x10` |
|
6
|
-
| **Rotation** | `IconRotation` | Rotates the Icon | `.zero` | `.zero` `.right` `.straight` `.obtuse` |
|
7
|
-
| **Border** | `Bool` | Adds a border | `false` | `true` `false` |
|
8
|
-
| **Flipped** | `[Axis]` | Flips the Icon | `nil` | `[.horizontal]` `[.vertical]` `[.horizontal, .vertical]` |
|
@@ -1,26 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
|
3
|
-
import Icon from '../_icon'
|
4
|
-
|
5
|
-
const IconPull = (props) => {
|
6
|
-
return (
|
7
|
-
<div>
|
8
|
-
<Icon
|
9
|
-
fixedWidth
|
10
|
-
icon="arrow-left"
|
11
|
-
pull="left"
|
12
|
-
size="2x"
|
13
|
-
{...props}
|
14
|
-
/>
|
15
|
-
<Icon
|
16
|
-
fixedWidth
|
17
|
-
icon="arrow-right"
|
18
|
-
pull="right"
|
19
|
-
size="2x"
|
20
|
-
{...props}
|
21
|
-
/>
|
22
|
-
</div>
|
23
|
-
)
|
24
|
-
}
|
25
|
-
|
26
|
-
export default IconPull
|
@@ -1 +0,0 @@
|
|
1
|
-
Icon Pull can be used to indicate that the user can perform a pull action.
|
@@ -1,3 +0,0 @@
|
|
1
|
-
<%= pb_rails("icon", props: { icon: "user", fixed_width: true, rotation: 90, size: "2x" }) %>
|
2
|
-
<%= pb_rails("icon", props: { icon: "user", fixed_width: true, rotation: 180, size: "2x" }) %>
|
3
|
-
<%= pb_rails("icon", props: { icon: "user", fixed_width: true, rotation: 270, size: "2x" }) %>
|
@@ -1,33 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
|
3
|
-
import Icon from '../_icon'
|
4
|
-
|
5
|
-
const IconRotate = (props) => {
|
6
|
-
return (
|
7
|
-
<div>
|
8
|
-
<Icon
|
9
|
-
fixedWidth
|
10
|
-
icon="user"
|
11
|
-
rotation={90}
|
12
|
-
size="2x"
|
13
|
-
{...props}
|
14
|
-
/>
|
15
|
-
<Icon
|
16
|
-
fixedWidth
|
17
|
-
icon="user"
|
18
|
-
rotation={180}
|
19
|
-
size="2x"
|
20
|
-
{...props}
|
21
|
-
/>
|
22
|
-
<Icon
|
23
|
-
fixedWidth
|
24
|
-
icon="user"
|
25
|
-
rotation={270}
|
26
|
-
size="2x"
|
27
|
-
{...props}
|
28
|
-
/>
|
29
|
-
</div>
|
30
|
-
)
|
31
|
-
}
|
32
|
-
|
33
|
-
export default IconRotate
|
@@ -1,11 +0,0 @@
|
|
1
|
-
![icon-rotate](https://github.com/powerhome/playbook/assets/92755007/29a6c127-a8a0-4dd9-a8cb-6401f772f11e)
|
2
|
-
|
3
|
-
```swift
|
4
|
-
|
5
|
-
HStack(spacing: Spacing.xSmall) {
|
6
|
-
PbBetaIcon(FontAwesome.user, rotation: .right)
|
7
|
-
PbBetaIcon(FontAwesome.user, rotation: .zero)
|
8
|
-
PbBetaIcon(FontAwesome.user, rotation: .obtuse)
|
9
|
-
}
|
10
|
-
|
11
|
-
```
|
@@ -1,16 +0,0 @@
|
|
1
|
-
<p><%= pb_rails("icon", props: { icon: "user", size: "lg" }) %> <span>Large</span></p>
|
2
|
-
<p><%= pb_rails("icon", props: { icon: "user", size: "sm" }) %> <span>Small</span></p>
|
3
|
-
<p><%= pb_rails("icon", props: { icon: "user", size: "xs" }) %> <span>XSmall</span></p>
|
4
|
-
|
5
|
-
<br/><br/>
|
6
|
-
|
7
|
-
<p><%= pb_rails("icon", props: { icon: "user", size: "1x" }) %> <span>1x</span></p>
|
8
|
-
<p><%= pb_rails("icon", props: { icon: "user", size: "2x" }) %> <span>2x</span></p>
|
9
|
-
<p><%= pb_rails("icon", props: { icon: "user", size: "3x" }) %> <span>3x</span></p>
|
10
|
-
<p><%= pb_rails("icon", props: { icon: "user", size: "4x" }) %> <span>4x</span></p>
|
11
|
-
<p><%= pb_rails("icon", props: { icon: "user", size: "5x" }) %> <span>5x</span></p>
|
12
|
-
<p><%= pb_rails("icon", props: { icon: "user", size: "6x" }) %> <span>6x</span></p>
|
13
|
-
<p><%= pb_rails("icon", props: { icon: "user", size: "7x" }) %> <span>7x</span></p>
|
14
|
-
<p><%= pb_rails("icon", props: { icon: "user", size: "8x" }) %> <span>8x</span></p>
|
15
|
-
<p><%= pb_rails("icon", props: { icon: "user", size: "9x" }) %> <span>9x</span></p>
|
16
|
-
<p><%= pb_rails("icon", props: { icon: "user", size: "10x" }) %> <span>10x</span></p>
|