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.
Files changed (61) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_button/docs/_button_props_swift.md +0 -11
  3. data/app/pb_kits/playbook/pb_button/docs/example.yml +0 -1
  4. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +4 -5
  5. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx +4 -8
  6. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx +4 -8
  7. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx +2 -4
  8. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +1 -1
  9. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +0 -7
  10. data/app/pb_kits/playbook/pb_person/docs/example.yml +0 -4
  11. data/app/pb_kits/playbook/pb_select/docs/example.yml +0 -5
  12. data/app/pb_kits/playbook/pb_user/docs/example.yml +0 -7
  13. data/dist/playbook-doc.js +8 -8
  14. metadata +2 -49
  15. data/app/pb_kits/playbook/pb_beta_icon/docs/_description.md +0 -1
  16. data/app/pb_kits/playbook/pb_beta_icon/docs/_footer.md +0 -2
  17. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_animate.html.erb +0 -3
  18. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_animate.jsx +0 -35
  19. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_animate.md +0 -1
  20. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_border.html.erb +0 -1
  21. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_border.jsx +0 -19
  22. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_border_swift.md +0 -7
  23. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_custom.html.erb +0 -16
  24. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_custom.jsx +0 -34
  25. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_custom.md +0 -19
  26. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_default.html.erb +0 -1
  27. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_default.jsx +0 -17
  28. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_default_swift.md +0 -7
  29. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_fa_kit.html.erb +0 -1
  30. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_fa_kit.jsx +0 -21
  31. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_fa_kit.md +0 -7
  32. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_flip.html.erb +0 -3
  33. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_flip.jsx +0 -33
  34. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_flip_swift.md +0 -11
  35. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_props_swift.md +0 -8
  36. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_pull.html.erb +0 -2
  37. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_pull.jsx +0 -26
  38. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_pull.md +0 -1
  39. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_rotate.html.erb +0 -3
  40. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_rotate.jsx +0 -33
  41. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_rotate_swift.md +0 -11
  42. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_sizes.html.erb +0 -16
  43. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_sizes.jsx +0 -133
  44. data/app/pb_kits/playbook/pb_beta_icon/docs/_icon_sizes_swift.md +0 -46
  45. data/app/pb_kits/playbook/pb_beta_icon/docs/example.yml +0 -30
  46. data/app/pb_kits/playbook/pb_beta_icon/docs/index.js +0 -9
  47. data/app/pb_kits/playbook/pb_button/docs/_button_reaction_swift.md +0 -26
  48. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default_swift.md +0 -11
  49. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_props_table.md +0 -13
  50. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes_swift.md +0 -18
  51. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status_swift.md +0 -14
  52. data/app/pb_kits/playbook/pb_person/docs/_person_default_swift.md +0 -8
  53. data/app/pb_kits/playbook/pb_person/docs/_person_props_swift.md +0 -5
  54. data/app/pb_kits/playbook/pb_select/docs/_select_default_swift.md +0 -15
  55. data/app/pb_kits/playbook/pb_select/docs/_select_error_swift.md +0 -18
  56. data/app/pb_kits/playbook/pb_select/docs/_select_props_table.md +0 -8
  57. data/app/pb_kits/playbook/pb_user/docs/_user_horizontal_swift.md +0 -37
  58. data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md +0 -10
  59. data/app/pb_kits/playbook/pb_user/docs/_user_size_swift.md +0 -35
  60. data/app/pb_kits/playbook/pb_user/docs/_user_text_only_swift.md +0 -27
  61. 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.play1101betaicons1825
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: 2024-01-05 00:00:00.000000000 Z
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,2 +0,0 @@
1
- ### Things to Avoid
2
- Be careful of use cases where there should be a clickable area around the icon. Icon Circle Button may need to be used instead.
@@ -1,3 +0,0 @@
1
- <p><%= pb_rails("icon", props: { icon: "spinner", spin: true, fixed_width: true, size: "2x" }) %> <span>Spin</span></p>
2
- <br/>
3
- <p><%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, size: "2x" }) %> <span>Pulse</span></p>
@@ -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,7 +0,0 @@
1
- ![card-border](https://github.com/powerhome/playbook/assets/92755007/442640c8-1b4f-455d-8517-5ca5cd120664)
2
-
3
- ```swift
4
-
5
- PbBetaIcon(FontAwesome.user, border: true)
6
-
7
- ```
@@ -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,17 +0,0 @@
1
- import React from 'react'
2
-
3
- import Icon from '../_icon'
4
-
5
- const IconDefault = (props) => {
6
- return (
7
- <div>
8
- <Icon
9
- fixedWidth
10
- icon="user"
11
- {...props}
12
- />
13
- </div>
14
- )
15
- }
16
-
17
- export default IconDefault
@@ -1,7 +0,0 @@
1
- ![card-default](https://github.com/powerhome/playbook/assets/92755007/8c7e5454-1d42-4d13-9107-ffc5773a136a)
2
-
3
- ```swift
4
-
5
- PbBetaIcon.fontAwesome(.user, size: .x1)
6
-
7
- ```
@@ -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,2 +0,0 @@
1
- <%= pb_rails("icon", props: { icon: "arrow-left", pull: "left", fixed_width: true, size: "2x" }) %>
2
- <%= pb_rails("icon", props: { icon: "arrow-right", pull: "right", fixed_width: true, size: "2x" }) %>
@@ -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>