playbook_ui_docs 12.25.0.pre.alpha.railsmultilevelimprovements780 → 12.25.0.pre.alpha.railsmultilevelimprovements785

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 32c03f3180741d787ec711cae5916c44b644c86395b4aa2674a115375ddb62e5
4
- data.tar.gz: cf27a0c06ab7c53e2866cad873ffb9dbaf5ec8489146f37498bd4010e88c2934
3
+ metadata.gz: 2737ce30ca3cb270e8e3f6a2f9eafd78b76b07436b9d0337f2b235595b7b95f7
4
+ data.tar.gz: 44de39157e02ee1fd45ec9bb1e148288b63347ae020830ea6c98f92e72eded81
5
5
  SHA512:
6
- metadata.gz: 1db727b802ecf299e3172287d0b29d12c3486904f0a8b307126d344fa7afc89c3505be45c2c2fdb0320c1d2b58c2aeabebe73bd1971571c82b1efc7ee40e3a11
7
- data.tar.gz: c201d3b7c0279ef992c01cd617f4e372bff8f49be0f79cee60dac518b32c8614c4b8b64aa86b0bd71cffeae68d617dc887744811fe180774f8c5a07c420a4791
6
+ metadata.gz: d0c6d6e42d65dc939eb7190950432e516b19243d370bc8bef979f4011403ba4691c16d3303fda169c0d8eb1d4e7a73295b79ef46352c5920d3333ed486e622d8
7
+ data.tar.gz: da62f5d968a51fcedafe6d221371a416c48c8926c129c30276455673ca201088a68d1ffd2d5bab2a0493a3ca81cc583298e339fc92c974efa05b3b9be17c1963
@@ -0,0 +1 @@
1
+ Used for tables or designs with large amounts of data or text.
@@ -0,0 +1,34 @@
1
+ <%= pb_rails("detail", props: {
2
+ bold: true,
3
+ text: "I am a bold detail kit"
4
+ }) %>
5
+
6
+ <%= pb_rails("detail", props: {
7
+ bold: true,
8
+ color: "default",
9
+ text: "I am a bold detail kit"
10
+ }) %>
11
+
12
+ <%= pb_rails("detail", props: {
13
+ bold: true,
14
+ color: "lighter",
15
+ text: "I am a bold detail kit"
16
+ }) %>
17
+
18
+ <%= pb_rails("detail", props: {
19
+ bold: true,
20
+ color: "link",
21
+ text: "I am a bold detail kit"
22
+ }) %>
23
+
24
+ <%= pb_rails("detail", props: {
25
+ bold: true,
26
+ color: "error",
27
+ text: "I am a bold detail kit"
28
+ }) %>
29
+
30
+ <%= pb_rails("detail", props: {
31
+ bold: true,
32
+ color: "success",
33
+ text: "I am a bold detail kit"
34
+ }) %>
@@ -0,0 +1,49 @@
1
+ import React from 'react'
2
+ import { Detail } from '../..'
3
+
4
+ const DetailBold = (props) => (
5
+ <div>
6
+ <Detail
7
+ bold
8
+ text="I am a bold detail kit"
9
+ {...props}
10
+ />
11
+
12
+ <Detail
13
+ bold
14
+ color="default"
15
+ text="I am a bold detail kit"
16
+ {...props}
17
+ />
18
+
19
+ <Detail
20
+ bold
21
+ color="lighter"
22
+ text="I am a bold detail kit"
23
+ {...props}
24
+ />
25
+
26
+ <Detail
27
+ bold
28
+ color="link"
29
+ text="I am a bold detail kit"
30
+ {...props}
31
+ />
32
+
33
+ <Detail
34
+ bold
35
+ color="error"
36
+ text="I am a bold detail kit"
37
+ {...props}
38
+ />
39
+
40
+ <Detail
41
+ bold
42
+ color="success"
43
+ text="I am a bold detail kit"
44
+ {...props}
45
+ />
46
+ </div>
47
+ )
48
+
49
+ export default DetailBold
@@ -0,0 +1 @@
1
+ Use the `bold` prop to strongly emphasis your text.
@@ -0,0 +1,24 @@
1
+ <%= pb_rails("detail", props: {
2
+ text: "I am a detail kit",
3
+ color: "default"
4
+ }) %>
5
+
6
+ <%= pb_rails("detail", props: {
7
+ text: "I am a detail kit",
8
+ color: "lighter"
9
+ }) %>
10
+
11
+ <%= pb_rails("detail", props: {
12
+ text: "I am a detail kit",
13
+ color: "link"
14
+ }) %>
15
+
16
+ <%= pb_rails("detail", props: {
17
+ text: "I am a detail kit",
18
+ color: "error"
19
+ }) %>
20
+
21
+ <%= pb_rails("detail", props: {
22
+ text: "I am a detail kit",
23
+ color: "success"
24
+ }) %>
@@ -0,0 +1,38 @@
1
+ import React from 'react'
2
+ import { Detail } from '../..'
3
+
4
+ const DetailColors = (props) => (
5
+ <div>
6
+ <Detail
7
+ color="default"
8
+ text="I am a detail kit"
9
+ {...props}
10
+ />
11
+
12
+ <Detail
13
+ color="lighter"
14
+ text="I am a detail kit"
15
+ {...props}
16
+ />
17
+
18
+ <Detail
19
+ color="link"
20
+ text="I am a detail kit"
21
+ {...props}
22
+ />
23
+
24
+ <Detail
25
+ color="error"
26
+ text="I am a detail kit"
27
+ {...props}
28
+ />
29
+
30
+ <Detail
31
+ color="success"
32
+ text="I am a detail kit"
33
+ {...props}
34
+ />
35
+ </div>
36
+ )
37
+
38
+ export default DetailColors
@@ -0,0 +1,6 @@
1
+ ##### Prop
2
+ This kit uses the `light` color by default, and can be replaced with colors below:
3
+
4
+ `default` `lighter` `link` `error` `success`
5
+
6
+ These colors are not for standard usage. You can use the `color` prop to make fixes if colors are not appearing properly, but consult your UX team members if you are deciding to implement it.
@@ -0,0 +1,3 @@
1
+ <%= pb_rails("detail", props: {
2
+ text: "I am a detail kit"
3
+ }) %>
@@ -0,0 +1,13 @@
1
+ import React from 'react'
2
+ import { Detail } from '../..'
3
+
4
+ const DetailDefault = (props) => (
5
+ <div>
6
+ <Detail
7
+ text="I am a detail kit"
8
+ {...props}
9
+ />
10
+ </div>
11
+ )
12
+
13
+ export default DetailDefault
@@ -0,0 +1,22 @@
1
+ <%= pb_rails("detail") do %>
2
+ <b>This text is using the <%="<b>"%> tag.</b>
3
+ <br />
4
+ <br />
5
+ <strong>This text is using the <%="<strong>"%> tag.</strong>
6
+ <br />
7
+ <br />
8
+ <a>This text is using the <%="<a>"%> tag.</a>
9
+ <br />
10
+ <br />
11
+ <i>This text is using the <%="<i>"%> tag.</i>
12
+ <br />
13
+ <br />
14
+ This <em>word</em> is using an <%="<em>"%> tag.
15
+ <br />
16
+ <br />
17
+ <small>This text is using the <%="<small>"%> tag.</small>
18
+ <br />
19
+ <br />
20
+ <u>This text is using the <%="<u>"%> tag.</u>
21
+ <br />
22
+ <% end %>
@@ -0,0 +1,32 @@
1
+ import React from 'react'
2
+ import { Detail } from '../..'
3
+
4
+ const DetailStyled = (props) => (
5
+ <>
6
+ <Detail {...props}>
7
+ <b>{"This text is using the <b> tag."}</b>
8
+ <br />
9
+ <br />
10
+ <strong>{"This text is using the <strong> tag."}</strong>
11
+ <br />
12
+ <br />
13
+ <a>{"This text is using the <a> tag."}</a>
14
+ <br />
15
+ <br />
16
+ <i>{"This text is using the <i> tag."}</i>
17
+ <br />
18
+ <br />
19
+ {"This "}<em>{"word"}</em>{" is using an <em> tag."}
20
+ <br />
21
+ <br />
22
+ <small>{"This text is using the <small> tag."}</small>
23
+ <br />
24
+ <br />
25
+ <u>{"This text is using the <u> tag."}</u>
26
+ <br />
27
+ <br />
28
+ </Detail>
29
+ </>
30
+ )
31
+
32
+ export default DetailStyled
@@ -0,0 +1,11 @@
1
+ examples:
2
+
3
+ rails:
4
+ - detail_default: Default
5
+ - detail_colors: Colors
6
+ - detail_bold: Bold
7
+
8
+ react:
9
+ - detail_default: Default
10
+ - detail_colors: Colors
11
+ - detail_bold: Bold
@@ -0,0 +1,4 @@
1
+ export { default as DetailDefault } from './_detail_default.jsx'
2
+ export { default as DetailColors } from './_detail_colors.jsx'
3
+ export { default as DetailStyled } from './_detail_styled.jsx'
4
+ export { default as DetailBold } from './_detail_bold.jsx'