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