playbook_ui_docs 12.24.0.pre.alpha.railsmultilevelimprovements749 → 12.25.0.pre.alpha.PLAY733DetailKit761
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_date/docs/_date_unstyled.html.erb +30 -0
- data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +47 -0
- data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.md +1 -0
- data/app/pb_kits/playbook/pb_date/docs/example.yml +4 -4
- data/app/pb_kits/playbook/pb_date/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_detail/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_detail/docs/_detail_bolded.html.erb +33 -0
- data/app/pb_kits/playbook/pb_detail/docs/_detail_bolded.jsx +47 -0
- data/app/pb_kits/playbook/pb_detail/docs/_detail_default.html.erb +28 -0
- data/app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx +43 -0
- data/app/pb_kits/playbook/pb_detail/docs/_detail_default.md +6 -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 +3 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +4 -4
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.html.erb +37 -0
- data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.jsx +58 -0
- data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.md +1 -0
- data/app/pb_kits/playbook/pb_time/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_time/docs/index.js +1 -0
- data/dist/menu.yml +1 -0
- data/dist/playbook-doc.js +6 -6
- metadata +18 -3
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +0 -72
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: ba554f1afe5c122a7822ac59e187aaf7b1c067096f2aef601ed4ada60c33b535
|
|
4
|
+
data.tar.gz: 3909a5bd74bd3a85fd4083454961a90fa5def4c96d2f2d09597ce6fda9f2245b
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 134a4849a3aed8b2749cd6f2c381631cb194ea37b20a342766593595e01f61e2a03a9e79babad33e05e150f254066fb96814eb0010e769597ac3a5e6a24d83bb
|
|
7
|
+
data.tar.gz: 3ba4b5278c4c629ae59a19551df1675a1b1e04c7cd643223240b23d85840288066aa328d9e94e4a098426c1459b3686a56b3cb612db27be67ca6089d81dd6a53
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<%= pb_rails("caption", props: { size: "xs", text: "Example with no year" }) %>
|
|
2
|
+
|
|
3
|
+
<%= pb_rails("date", props: {
|
|
4
|
+
date: Date.today,
|
|
5
|
+
unstyled: true
|
|
6
|
+
}) %>
|
|
7
|
+
|
|
8
|
+
<br />
|
|
9
|
+
|
|
10
|
+
<%= pb_rails("caption", props: { size: "xs", text: "Example with wrapping typography kit" }) %>
|
|
11
|
+
|
|
12
|
+
<%= pb_rails("title", props: { size: 1 }) do %>
|
|
13
|
+
<%= pb_rails("date", props: {
|
|
14
|
+
date: "2012-08-02T15:49:29Z",
|
|
15
|
+
unstyled: true
|
|
16
|
+
}) %>
|
|
17
|
+
<% end %>
|
|
18
|
+
|
|
19
|
+
<br />
|
|
20
|
+
|
|
21
|
+
<%= pb_rails("caption", props: { size: "xs", text: "Example with icon + subcaption" }) %>
|
|
22
|
+
|
|
23
|
+
<%= pb_rails("caption", props: { size: "xs" }) do %>
|
|
24
|
+
<%= pb_rails("date", props: {
|
|
25
|
+
date: "2012-08-02T15:49:29Z",
|
|
26
|
+
show_icon: true,
|
|
27
|
+
unstyled: true,
|
|
28
|
+
show_day_of_week: true
|
|
29
|
+
}) %>
|
|
30
|
+
<% end %>
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Caption, Date as FormattedDate, Title } from '../../'
|
|
3
|
+
|
|
4
|
+
const DateUnstyled = (props) => {
|
|
5
|
+
return (
|
|
6
|
+
<>
|
|
7
|
+
<Caption size="xs"
|
|
8
|
+
text="Basic unstyled example"
|
|
9
|
+
/>
|
|
10
|
+
<FormattedDate
|
|
11
|
+
unstyled
|
|
12
|
+
value={new Date()}
|
|
13
|
+
{...props}
|
|
14
|
+
/>
|
|
15
|
+
|
|
16
|
+
<br />
|
|
17
|
+
|
|
18
|
+
<Caption size="xs"
|
|
19
|
+
text="Example with wrapping typography kit"
|
|
20
|
+
/>
|
|
21
|
+
<Title size={1}>
|
|
22
|
+
<FormattedDate
|
|
23
|
+
unstyled
|
|
24
|
+
value="1995-12-25"
|
|
25
|
+
{...props}
|
|
26
|
+
/>
|
|
27
|
+
</Title>
|
|
28
|
+
|
|
29
|
+
<br />
|
|
30
|
+
|
|
31
|
+
<Caption size="xs"
|
|
32
|
+
text="Example with icon + subcaption"
|
|
33
|
+
/>
|
|
34
|
+
<Caption size="xs">
|
|
35
|
+
<FormattedDate
|
|
36
|
+
showDayOfWeek
|
|
37
|
+
showIcon
|
|
38
|
+
unstyled
|
|
39
|
+
value="1995-12-25"
|
|
40
|
+
{...props}
|
|
41
|
+
/>
|
|
42
|
+
</Caption>
|
|
43
|
+
</>
|
|
44
|
+
)
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
export default DateUnstyled
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
For alternative typography styles, you can pass a boolean prop called `unstyled` to the `Date` kit and wrap it in any of our typography kits (`Title`, `Body`, `Caption`, etc.). This will allow the `Date` kit to inherit any of our typography styles.
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
examples:
|
|
2
|
-
|
|
2
|
+
|
|
3
3
|
rails:
|
|
4
4
|
- date_default: Default
|
|
5
5
|
- date_variants: Variants
|
|
6
6
|
- date_alignment: Alignment
|
|
7
7
|
- date_timezone: Timezones
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
- date_unstyled: Unstyled
|
|
9
|
+
|
|
10
10
|
react:
|
|
11
11
|
- date_default: Default
|
|
12
12
|
- date_variants: Variants
|
|
13
13
|
- date_alignment: Alignment
|
|
14
|
-
|
|
14
|
+
- date_unstyled: Unstyled
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Used for tables or designs with large amounts of data or text. This kit's font size is smaller than the `Body` kit and larger than the Caption's kit `subcaption` variant.
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
<%= pb_rails("detail") do %>
|
|
2
|
+
<b>I am a bolded detail kit (Default)</b>
|
|
3
|
+
<% end %>
|
|
4
|
+
|
|
5
|
+
<%= pb_rails("detail", props: {
|
|
6
|
+
color: "default"
|
|
7
|
+
}) do %>
|
|
8
|
+
<b>I am a bolded detail kit (Default as a color)</b>
|
|
9
|
+
<% end %>
|
|
10
|
+
|
|
11
|
+
<%= pb_rails("detail", props: {
|
|
12
|
+
color: "lighter"
|
|
13
|
+
}) do %>
|
|
14
|
+
<b>I am a bolded detail kit (lighter)</b>
|
|
15
|
+
<% end %>
|
|
16
|
+
|
|
17
|
+
<%= pb_rails("detail", props: {
|
|
18
|
+
color: "link"
|
|
19
|
+
}) do %>
|
|
20
|
+
<b>I am a bolded detail kit (link)</b>
|
|
21
|
+
<% end %>
|
|
22
|
+
|
|
23
|
+
<%= pb_rails("detail", props: {
|
|
24
|
+
color: "error"
|
|
25
|
+
}) do %>
|
|
26
|
+
<b>I am a bolded detail kit (Error)</b>
|
|
27
|
+
<% end %>
|
|
28
|
+
|
|
29
|
+
<%= pb_rails("detail", props: {
|
|
30
|
+
color: "success"
|
|
31
|
+
}) do %>
|
|
32
|
+
<b>I am a bolded detail kit (Success)</b>
|
|
33
|
+
<% end %>
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Detail } from '../..'
|
|
3
|
+
|
|
4
|
+
const DetailBolded = (props) => (
|
|
5
|
+
<div>
|
|
6
|
+
<Detail {...props}>
|
|
7
|
+
<b>{"I am a bolded detail kit (Default)"}</b>
|
|
8
|
+
</Detail>
|
|
9
|
+
|
|
10
|
+
<Detail
|
|
11
|
+
color="default"
|
|
12
|
+
{...props}
|
|
13
|
+
>
|
|
14
|
+
<b>{"I am a bolded detail kit (Default as a color)"}</b>
|
|
15
|
+
</Detail>
|
|
16
|
+
|
|
17
|
+
<Detail
|
|
18
|
+
color="lighter"
|
|
19
|
+
{...props}
|
|
20
|
+
>
|
|
21
|
+
<b>{"I am a bolded detail kit (Lighter)"}</b>
|
|
22
|
+
</Detail>
|
|
23
|
+
|
|
24
|
+
<Detail
|
|
25
|
+
color="link"
|
|
26
|
+
{...props}
|
|
27
|
+
>
|
|
28
|
+
<b>{"I am a bolded detail kit (Link)"}</b>
|
|
29
|
+
</Detail>
|
|
30
|
+
|
|
31
|
+
<Detail
|
|
32
|
+
color="error"
|
|
33
|
+
{...props}
|
|
34
|
+
>
|
|
35
|
+
<b>{"I am a bolded detail kit (Error)"}</b>
|
|
36
|
+
</Detail>
|
|
37
|
+
|
|
38
|
+
<Detail
|
|
39
|
+
color="success"
|
|
40
|
+
{...props}
|
|
41
|
+
>
|
|
42
|
+
<b>{"I am a bolded detail kit (Success)"}</b>
|
|
43
|
+
</Detail>
|
|
44
|
+
</div>
|
|
45
|
+
)
|
|
46
|
+
|
|
47
|
+
export default DetailBolded
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
<%= pb_rails("detail", props: {
|
|
2
|
+
text: "I am a detail kit (Default)"
|
|
3
|
+
}) %>
|
|
4
|
+
|
|
5
|
+
<%= pb_rails("detail", props: {
|
|
6
|
+
text: "I am a detail kit (Default as a color)",
|
|
7
|
+
color: "default"
|
|
8
|
+
}) %>
|
|
9
|
+
|
|
10
|
+
<%= pb_rails("detail", props: {
|
|
11
|
+
text: "I am a detail kit (Lighter)",
|
|
12
|
+
color: "lighter"
|
|
13
|
+
}) %>
|
|
14
|
+
|
|
15
|
+
<%= pb_rails("detail", props: {
|
|
16
|
+
text: "I am a detail kit (Link)",
|
|
17
|
+
color: "link"
|
|
18
|
+
}) %>
|
|
19
|
+
|
|
20
|
+
<%= pb_rails("detail", props: {
|
|
21
|
+
text: "I am a detail kit (Error)",
|
|
22
|
+
color: "error"
|
|
23
|
+
}) %>
|
|
24
|
+
|
|
25
|
+
<%= pb_rails("detail", props: {
|
|
26
|
+
text: "I am a detail kit (Success)",
|
|
27
|
+
color: "success"
|
|
28
|
+
}) %>
|
|
@@ -0,0 +1,43 @@
|
|
|
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 (Default)"
|
|
8
|
+
{...props}
|
|
9
|
+
/>
|
|
10
|
+
|
|
11
|
+
<Detail
|
|
12
|
+
color="default"
|
|
13
|
+
text="I am a detail kit (Default as a color)"
|
|
14
|
+
{...props}
|
|
15
|
+
/>
|
|
16
|
+
|
|
17
|
+
<Detail
|
|
18
|
+
color="lighter"
|
|
19
|
+
text="I am a detail kit (Lighter)"
|
|
20
|
+
{...props}
|
|
21
|
+
/>
|
|
22
|
+
|
|
23
|
+
<Detail
|
|
24
|
+
color="link"
|
|
25
|
+
text="I am a detail kit (Link)"
|
|
26
|
+
{...props}
|
|
27
|
+
/>
|
|
28
|
+
|
|
29
|
+
<Detail
|
|
30
|
+
color="error"
|
|
31
|
+
text="I am a detail kit (Error)"
|
|
32
|
+
{...props}
|
|
33
|
+
/>
|
|
34
|
+
|
|
35
|
+
<Detail
|
|
36
|
+
color="success"
|
|
37
|
+
text="I am a detail kit (Success)"
|
|
38
|
+
{...props}
|
|
39
|
+
/>
|
|
40
|
+
</div>
|
|
41
|
+
)
|
|
42
|
+
|
|
43
|
+
export default DetailDefault
|
|
@@ -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
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<%= pb_rails("caption", props: { size: "xs", text: "Example with no year" }) %>
|
|
2
|
+
|
|
3
|
+
<%= pb_rails("time", props: {
|
|
4
|
+
show_icon: true,
|
|
5
|
+
show_timezone: true,
|
|
6
|
+
time: DateTime.now,
|
|
7
|
+
timezone: "America/New_York",
|
|
8
|
+
unstyled: true
|
|
9
|
+
}) %>
|
|
10
|
+
|
|
11
|
+
<br />
|
|
12
|
+
|
|
13
|
+
<%= pb_rails("caption", props: { size: "xs", text: "Example with wrapping typography kit" }) %>
|
|
14
|
+
|
|
15
|
+
<%= pb_rails("title", props: { size: 1 }) do %>
|
|
16
|
+
<%= pb_rails("time", props: {
|
|
17
|
+
show_icon: true,
|
|
18
|
+
show_timezone: true,
|
|
19
|
+
time: DateTime.now,
|
|
20
|
+
timezone: "America/New_York",
|
|
21
|
+
unstyled: true
|
|
22
|
+
}) %>
|
|
23
|
+
<% end %>
|
|
24
|
+
|
|
25
|
+
<br />
|
|
26
|
+
|
|
27
|
+
<%= pb_rails("caption", props: { size: "xs", text: "Example with icon + subcaption" }) %>
|
|
28
|
+
|
|
29
|
+
<%= pb_rails("caption", props: { size: "xs" }) do %>
|
|
30
|
+
<%= pb_rails("time", props: {
|
|
31
|
+
show_icon: true,
|
|
32
|
+
show_timezone: true,
|
|
33
|
+
time: DateTime.now,
|
|
34
|
+
timezone: "America/New_York",
|
|
35
|
+
unstyled: true
|
|
36
|
+
}) %>
|
|
37
|
+
<% end %>
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import Time from '../_time'
|
|
3
|
+
import Caption from '../../pb_caption/_caption'
|
|
4
|
+
import Title from '../../pb_title/_title'
|
|
5
|
+
|
|
6
|
+
const TimeUnstyled = (props) => {
|
|
7
|
+
return (
|
|
8
|
+
<>
|
|
9
|
+
<Caption size="xs"
|
|
10
|
+
text="Basic unstyled example"
|
|
11
|
+
/>
|
|
12
|
+
<Time
|
|
13
|
+
date={new Date()}
|
|
14
|
+
showIcon
|
|
15
|
+
showTimezone
|
|
16
|
+
timeZone="America/New_York"
|
|
17
|
+
unstyled
|
|
18
|
+
{...props}
|
|
19
|
+
/>
|
|
20
|
+
|
|
21
|
+
<br />
|
|
22
|
+
|
|
23
|
+
<Caption size="xs"
|
|
24
|
+
text="Example with wrapping typography kit"
|
|
25
|
+
/>
|
|
26
|
+
<Title size={1}>
|
|
27
|
+
<Time
|
|
28
|
+
date={new Date()}
|
|
29
|
+
showIcon
|
|
30
|
+
showTimezone
|
|
31
|
+
timeZone="America/New_York"
|
|
32
|
+
unstyled
|
|
33
|
+
{...props}
|
|
34
|
+
/>
|
|
35
|
+
</Title>
|
|
36
|
+
|
|
37
|
+
<br />
|
|
38
|
+
|
|
39
|
+
<Caption size="xs"
|
|
40
|
+
text="Example with icon + subcaption"
|
|
41
|
+
/>
|
|
42
|
+
<Caption size="xs">
|
|
43
|
+
<Time
|
|
44
|
+
date={new Date()}
|
|
45
|
+
showIcon
|
|
46
|
+
showTimezone
|
|
47
|
+
timeZone="America/New_York"
|
|
48
|
+
unstyled
|
|
49
|
+
{...props}
|
|
50
|
+
/>
|
|
51
|
+
</Caption>
|
|
52
|
+
|
|
53
|
+
<br />
|
|
54
|
+
</>
|
|
55
|
+
)
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
export default TimeUnstyled
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
For alternative typography styles, you can pass a boolean prop called `unstyled` to the `Time` kit and wrap it in any of our typography kits (`Title`, `Body`, `Caption`, etc.). This will allow the `Time` kit to inherit any of our typography styles.
|
|
@@ -6,6 +6,7 @@ examples:
|
|
|
6
6
|
- time_timestamp: Timestamp Values
|
|
7
7
|
- time_timezone: Handling Timezones
|
|
8
8
|
- time_align: Alignment
|
|
9
|
+
- time_unstyled: Unstyled
|
|
9
10
|
|
|
10
11
|
react:
|
|
11
12
|
- time_default: Default
|
|
@@ -13,3 +14,4 @@ examples:
|
|
|
13
14
|
- time_timestamp: Timestamp Values
|
|
14
15
|
- time_timezone: Handling Timezones
|
|
15
16
|
- time_align: Alignment
|
|
17
|
+
- time_unstyled: Unstyled
|
|
@@ -3,3 +3,4 @@ export { default as TimeSizes } from './_time_sizes.jsx'
|
|
|
3
3
|
export { default as TimeTimestamp } from './_time_timestamp.jsx'
|
|
4
4
|
export { default as TimeAlign } from './_time_align.jsx'
|
|
5
5
|
export { default as TimeTimezone } from './_time_timezone.jsx'
|
|
6
|
+
export { default as TimeUnstyled } from './_time_unstyled.jsx'
|