playbook_ui_docs 12.24.0.pre.alpha.railsmultilevelimprovements749 → 12.25.0.pre.alpha.PLAY733DetailKit761
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.
- 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'
|