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 +4 -4
- data/app/pb_kits/playbook/pb_detail/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.html.erb +34 -0
- data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.jsx +49 -0
- data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.md +1 -0
- data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.html.erb +24 -0
- data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.jsx +38 -0
- data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.md +6 -0
- data/app/pb_kits/playbook/pb_detail/docs/_detail_default.html.erb +3 -0
- data/app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx +13 -0
- data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.html.erb +22 -0
- data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx +32 -0
- data/app/pb_kits/playbook/pb_detail/docs/example.yml +11 -0
- data/app/pb_kits/playbook/pb_detail/docs/index.js +4 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +26 -594
- data/dist/menu.yml +1 -0
- data/dist/playbook-doc.js +4 -4
- metadata +14 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 2737ce30ca3cb270e8e3f6a2f9eafd78b76b07436b9d0337f2b235595b7b95f7
|
4
|
+
data.tar.gz: 44de39157e02ee1fd45ec9bb1e148288b63347ae020830ea6c98f92e72eded81
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
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,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
|