playbook_ui_docs 13.14.0.pre.alpha.play1101betaicons1825 → 13.14.0.pre.alpha.play1106filter1748
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/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
|
-

|
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
|
-

|
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>
|