playbook_ui_docs 13.16.0.pre.alpha.PLAY11642006 → 13.16.0.pre.alpha.fonttest1972

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 (6) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +11 -5
  3. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +18 -44
  4. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +12 -7
  5. data/dist/playbook-doc.js +2 -2
  6. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 6e76062838c3387145a8744ce4618dcdb42098e18a6e1f9246fb20dca83fe60a
4
- data.tar.gz: f005eda8be0eedec6b8aa81384ef40f3faabb8d4717fe9452c71dd77c622043f
3
+ metadata.gz: eed01491ddcdcbd6e34b32458452eff53eedfb20bfce9e05d04aaaccb756f6ce
4
+ data.tar.gz: 88cb382a3a22a0db9dde7b52ff216298e2bc81fbdb6eb71eac675def0b2b0f29
5
5
  SHA512:
6
- metadata.gz: e93479eb99417510055d152c6f4b33ac557109e5f2cb19818db743f78f7d1d86a11db05544327b6907461c1dbfa6f2221330765c08de695823adba06915d03eb
7
- data.tar.gz: d3915284294de840babb966c77c54bd2f2de40866ddd3e641ef85ee20c63b0fe6aa83adf7b7208a02ed57403e95ded6f7772ce3b4521fac40c7fffd29261799c
6
+ metadata.gz: 69d3dc201cca549ef39800f49b5ba652430f310437f7aa4877fbff01fb6dfd3044231da8d5ab3fe2f5abd66ea1d7b421249b930cc09515535426819cdf123e76
7
+ data.tar.gz: 75ac9400faa2cf591bc4299de107387bab6c2bdcc9ab4d2cf673ca512650c196803a67159a26a3f1d8f41550b7117d389bc5cdb6cbc0add5e60deddf6c26ea41
data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb CHANGED
@@ -2,9 +2,15 @@
2
2
  <div class="icon-wrapper">
3
3
 
4
4
  <% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
5
- <p><%= pb_rails("icon", props: { icon: svg_url } ) %></p>
6
- <p><%= pb_rails("icon", props: { rotation: 90, icon: svg_url, size: "2x" } ) %></p>
7
- <p><%= pb_rails("icon", props: { spin: true, icon: svg_url, size: "3x" } ) %></p>
8
- <p><%= pb_rails("icon", props: { size: "5x", icon: svg_url } ) %></p>
9
- <p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", icon: svg_url } ) %></p>
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
+ } ) %>
10
16
  </div>
data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx CHANGED
@@ -1,59 +1,33 @@
1
1
  import React from 'react'
2
2
  import { Icon } from '../../'
3
3
 
4
+ // import Icons as config from 'power-icons'
4
5
  const config = {
5
- icon: (
6
- <svg viewBox="0 -256 1792 1792"
6
+ moon: (
7
+ <svg
8
+ ariaHidden="true"
9
+ focusable="false"
10
+ role="img"
11
+ viewBox="0 0 512 512"
7
12
  xmlns="http://www.w3.org/2000/svg"
8
13
  >
9
- <g transform="matrix(1,0,0,-1,53.152542,1217.0847)">
10
- <path d="m 384,64 q 0,26 -19,45 -19,19 -45,19 -26,0 -45,-19 -19,-19 -19,-45 0,-26 19,-45 19,-19 45,-19 26,0 45,19 19,19 19,45 z m 644,420 -682,-682 q -37,-37 -90,-37 -52,0 -91,37 L 59,-90 Q 21,-54 21,0 21,53 59,91 L 740,772 Q 779,674 854.5,598.5 930,523 1028,484 z m 634,435 q 0,-39 -23,-106 Q 1592,679 1474.5,595.5 1357,512 1216,512 1031,512 899.5,643.5 768,775 768,960 q 0,185 131.5,316.5 131.5,131.5 316.5,131.5 58,0 121.5,-16.5 63.5,-16.5 107.5,-46.5 16,-11 16,-28 0,-17 -16,-28 L 1152,1120 V 896 l 193,-107 q 5,3 79,48.5 74,45.5 135.5,81 61.5,35.5 70.5,35.5 15,0 23.5,-10 8.5,-10 8.5,-25 z" />
11
- </g>
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
+ />
12
18
  </svg>
13
19
  ),
14
20
  }
15
21
 
16
22
  const IconCustom = (props) => {
17
23
  return (
18
- <React.Fragment>
19
- <p>
20
- <Icon
21
- icon={config.icon}
22
- {...props}
23
- />
24
- </p>
25
- <p>
26
- <Icon
27
- icon={config.icon}
28
- rotation={90}
29
- size="2x"
30
- {...props}
31
- />
32
- </p>
33
- <p>
34
- <Icon
35
- icon={config.icon}
36
- size="3x"
37
- spin
38
- {...props}
39
- />
40
- </p>
41
- <p>
42
- <Icon
43
- icon={config.icon}
44
- size="5x"
45
- {...props}
46
- />
47
- </p>
48
- <p>
49
- <Icon
50
- flip="horizontal"
51
- icon={config.icon}
52
- size="5x"
53
- {...props}
54
- />
55
- </p>
56
- </React.Fragment>
24
+ <div>
25
+ <Icon
26
+ customIcon={config.moon}
27
+ size="7x"
28
+ {...props}
29
+ />
30
+ </div>
57
31
  )
58
32
  }
59
33
 
data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md CHANGED
@@ -1,14 +1,19 @@
1
1
  # Tips for Custom Icons
2
2
 
3
- ### React
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.
4
8
 
5
- - Providing a valid React `<SVG>` element to the `icon` prop results in an `<SVG>` node within the working view.
6
- - Sending the absolute path to your SVG (e.g. `/my/path/to/icon.svg`) results in an `img` node with the `src` attribute set to the provided path:
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
7
14
 
8
- ```html
9
- <img src="host.com/my/path/to/icon.svg" />
10
- ```
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.
11
16
 
12
17
  ### Rails
13
18
 
14
- Sending the absolute path to the `icon` prop results in an `<SVG>` tag within the working view.
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.