playbook_ui 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/_playbook.scss +1 -0
- data/app/pb_kits/playbook/index.js +1 -0
- data/app/pb_kits/playbook/pb_date/_date.tsx +96 -42
- data/app/pb_kits/playbook/pb_date/date.html.erb +22 -2
- data/app/pb_kits/playbook/pb_date/date.rb +2 -0
- 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/_detail.scss +44 -0
- data/app/pb_kits/playbook/pb_detail/_detail.tsx +51 -0
- data/app/pb_kits/playbook/pb_detail/_detail_mixins.scss +29 -0
- data/app/pb_kits/playbook/pb_detail/detail.html.erb +7 -0
- data/app/pb_kits/playbook/pb_detail/detail.rb +23 -0
- data/app/pb_kits/playbook/pb_detail/detail.test.jsx +33 -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/_multi_level_select.tsx +0 -13
- 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_multi_level_select/multi_level_select.rb +0 -3
- data/app/pb_kits/playbook/pb_time/_time.tsx +71 -35
- 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/app/pb_kits/playbook/pb_time/time.html.erb +26 -7
- data/app/pb_kits/playbook/pb_time/time.rb +2 -0
- data/app/pb_kits/playbook/pb_title/_title.scss +2 -1
- data/app/pb_kits/playbook/pb_title/_title.tsx +3 -2
- data/app/pb_kits/playbook/pb_title/title.rb +10 -3
- data/app/pb_kits/playbook/pb_title/title.test.js +3 -3
- data/app/pb_kits/playbook/playbook-doc.js +2 -0
- data/dist/menu.yml +1 -0
- data/dist/playbook-rails.js +5 -5
- data/lib/playbook/forms/builder.rb +0 -1
- data/lib/playbook/version.rb +2 -2
- metadata +24 -4
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +0 -72
- data/lib/playbook/forms/builder/multi_level_select_field.rb +0 -12
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 0e2ca337968fddb4b7339377411e960bfe5a908c7236bd183a5cf1175abb1d45
|
|
4
|
+
data.tar.gz: 1dae2d3a4a0e5af085133891b141a46806bc6245559dae96b474d27c6143f5b0
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 7840f0f79113c13267b17e9cc6dc68058b8cd9abc24618caee84177c0b4baf168ee163f76bc847bdbec9b132190f01f80ff6107d9868a115a3793165899b11c1
|
|
7
|
+
data.tar.gz: 22eeca8bbc3b6474277b8ae9adb61338b87a7537404a081fd707949559840dfbdf64a202eaa73d88ef81b100f3c45112153baebf9f495f5d8b3a64aaf532d61f
|
|
@@ -31,6 +31,7 @@ export { default as DateStacked } from './pb_date_stacked/_date_stacked'
|
|
|
31
31
|
export { default as DateTime } from './pb_date_time/_date_time'
|
|
32
32
|
export { default as DateTimeStacked } from './pb_date_time_stacked/_date_time_stacked'
|
|
33
33
|
export { default as DateYearStacked } from './pb_date_year_stacked/_date_year_stacked'
|
|
34
|
+
export { default as Detail} from './pb_detail/_detail'
|
|
34
35
|
export { default as Dialog } from './pb_dialog/_dialog'
|
|
35
36
|
export { default as DistributionBar } from './pb_distribution_bar/_distribution_bar'
|
|
36
37
|
export { default as FileUpload } from './pb_file_upload/_file_upload'
|
|
@@ -19,6 +19,7 @@ type PbDateProps = {
|
|
|
19
19
|
showDayOfWeek?: boolean;
|
|
20
20
|
showIcon?: boolean;
|
|
21
21
|
size?: "sm" | "md" | "lg";
|
|
22
|
+
unstyled?: boolean;
|
|
22
23
|
value: string | Date;
|
|
23
24
|
};
|
|
24
25
|
|
|
@@ -32,6 +33,7 @@ const PbDate = (props: PbDateProps) => {
|
|
|
32
33
|
showDayOfWeek = false,
|
|
33
34
|
showIcon = false,
|
|
34
35
|
size = "md",
|
|
36
|
+
unstyled = false,
|
|
35
37
|
value,
|
|
36
38
|
} = props;
|
|
37
39
|
|
|
@@ -52,48 +54,100 @@ const PbDate = (props: PbDateProps) => {
|
|
|
52
54
|
);
|
|
53
55
|
|
|
54
56
|
return (
|
|
55
|
-
<div {...ariaProps}
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
57
|
+
<div {...ariaProps}
|
|
58
|
+
{...dataProps}
|
|
59
|
+
className={classes}
|
|
60
|
+
id={id}
|
|
61
|
+
>
|
|
62
|
+
{unstyled
|
|
63
|
+
? <>
|
|
64
|
+
{showIcon && (
|
|
65
|
+
<div>
|
|
66
|
+
<Icon fixedWidth
|
|
67
|
+
icon="calendar-alt"
|
|
68
|
+
/>
|
|
69
|
+
</div>
|
|
70
|
+
)}
|
|
71
|
+
|
|
72
|
+
{showDayOfWeek && (
|
|
73
|
+
<>
|
|
74
|
+
<div>
|
|
75
|
+
{weekday}
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
<div>{"•"}</div>
|
|
79
|
+
</>
|
|
80
|
+
)}
|
|
81
|
+
|
|
82
|
+
<span>
|
|
83
|
+
<span>
|
|
84
|
+
{month} {day}
|
|
85
|
+
</span>
|
|
86
|
+
|
|
87
|
+
{currentYear != year && <span>{`, ${year}`}</span>}
|
|
88
|
+
</span>
|
|
89
|
+
</>
|
|
90
|
+
: size == "md" || size == "lg"
|
|
91
|
+
? (
|
|
92
|
+
<Title size={4}
|
|
93
|
+
tag="h4"
|
|
94
|
+
>
|
|
95
|
+
{showIcon && (
|
|
96
|
+
<Body className="pb_icon_kit_container"
|
|
97
|
+
color="light"
|
|
98
|
+
tag="span"
|
|
99
|
+
>
|
|
100
|
+
<Icon fixedWidth
|
|
101
|
+
icon="calendar-alt"
|
|
102
|
+
/>
|
|
103
|
+
</Body>
|
|
104
|
+
)}
|
|
105
|
+
|
|
106
|
+
{showDayOfWeek && (
|
|
107
|
+
<>
|
|
108
|
+
{weekday}
|
|
109
|
+
<Body color="light"
|
|
110
|
+
tag="span"
|
|
111
|
+
text=" • "
|
|
112
|
+
/>
|
|
113
|
+
</>
|
|
114
|
+
)}
|
|
115
|
+
|
|
116
|
+
<span>
|
|
117
|
+
{month} {day}
|
|
118
|
+
</span>
|
|
119
|
+
{currentYear != year && <span>{`, ${year}`}</span>}
|
|
120
|
+
</Title>
|
|
121
|
+
)
|
|
122
|
+
: (
|
|
123
|
+
<>
|
|
124
|
+
{showIcon && (
|
|
125
|
+
<Caption className="pb_icon_kit_container"
|
|
126
|
+
tag="span"
|
|
127
|
+
>
|
|
128
|
+
<Icon fixedWidth
|
|
129
|
+
icon="calendar-alt"
|
|
130
|
+
size="sm"
|
|
131
|
+
/>
|
|
132
|
+
</Caption>
|
|
133
|
+
)}
|
|
134
|
+
|
|
135
|
+
{showDayOfWeek && (
|
|
136
|
+
<>
|
|
137
|
+
<Caption tag="div">{weekday}</Caption>
|
|
138
|
+
<Caption color="light"
|
|
139
|
+
tag="div"
|
|
140
|
+
text=" • "
|
|
141
|
+
/>
|
|
142
|
+
</>
|
|
143
|
+
)}
|
|
144
|
+
|
|
145
|
+
<Caption tag="span">
|
|
146
|
+
{month} {day}
|
|
147
|
+
{currentYear != year && <>{`, ${year}`}</>}
|
|
148
|
+
</Caption>
|
|
149
|
+
</>
|
|
150
|
+
)}
|
|
97
151
|
</div>
|
|
98
152
|
);
|
|
99
153
|
};
|
|
@@ -4,7 +4,28 @@
|
|
|
4
4
|
class: object.classname,
|
|
5
5
|
aria: object.aria) do %>
|
|
6
6
|
|
|
7
|
-
<% if object.
|
|
7
|
+
<% if object.unstyled %>
|
|
8
|
+
<!-- icon -->
|
|
9
|
+
<% if object.show_icon %>
|
|
10
|
+
<div><%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %></div>
|
|
11
|
+
<% end %>
|
|
12
|
+
|
|
13
|
+
<!-- day_of_week -->
|
|
14
|
+
<% if object.show_day_of_week %>
|
|
15
|
+
<div><%= object.day_of_week %></div>
|
|
16
|
+
<div>•</div>
|
|
17
|
+
<% end %>
|
|
18
|
+
|
|
19
|
+
<!-- month day, year -->
|
|
20
|
+
<%# if not current year %>
|
|
21
|
+
<% if object.year.to_s == DateTime.now.year.to_s %>
|
|
22
|
+
<span><%= "#{object.month} #{object.day}" %></span>
|
|
23
|
+
<%# if is current year %>
|
|
24
|
+
<% else %>
|
|
25
|
+
<span><%= "#{object.month} #{object.day}, #{object.year}" %></span>
|
|
26
|
+
<% end %>
|
|
27
|
+
|
|
28
|
+
<% elsif object.size == "md" || object.size == "lg" %>
|
|
8
29
|
<!-- icon -->
|
|
9
30
|
<% if object.show_icon %>
|
|
10
31
|
<%= pb_rails("body", props: {
|
|
@@ -36,7 +57,6 @@
|
|
|
36
57
|
<% end %>
|
|
37
58
|
|
|
38
59
|
<% else %>
|
|
39
|
-
|
|
40
60
|
<!-- icon -->
|
|
41
61
|
<% if object.show_icon %>
|
|
42
62
|
<%= pb_rails("caption", props: {
|
|
@@ -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,44 @@
|
|
|
1
|
+
@import "./detail_mixins";
|
|
2
|
+
@import "../tokens/titles";
|
|
3
|
+
@import "../tokens/typography";
|
|
4
|
+
|
|
5
|
+
[class^=pb_detail_kit]{
|
|
6
|
+
@include pb_detail;
|
|
7
|
+
|
|
8
|
+
@each $color_name, $color_value in $pb_detail_colors {
|
|
9
|
+
&[class*=_#{$color_name}] {
|
|
10
|
+
@include pb_detail($color_value);
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@each $dark_color_name, $dark_color_value in $pb_dark_detail_colors{
|
|
15
|
+
&[class*=_#{$dark_color_name}][class*=dark]{
|
|
16
|
+
@include pb_detail($dark_color_value)
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
// Styles
|
|
21
|
+
b, strong {
|
|
22
|
+
@include pb_title_4;
|
|
23
|
+
color: inherit;
|
|
24
|
+
font-size: $text_small;
|
|
25
|
+
font-weight: $bold;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
a {
|
|
29
|
+
color: $primary;
|
|
30
|
+
&:hover {
|
|
31
|
+
cursor: pointer;
|
|
32
|
+
color: $text_lt_default;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
em {
|
|
37
|
+
font-weight: $bold;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
small {
|
|
41
|
+
font-size: $font_smaller;
|
|
42
|
+
letter-spacing: $lspace_loose;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import classnames from 'classnames'
|
|
3
|
+
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
|
4
|
+
import { globalProps, GlobalProps } from '../utilities/globalProps'
|
|
5
|
+
|
|
6
|
+
type DetailProps = {
|
|
7
|
+
aria?: { [key: string]: string },
|
|
8
|
+
children?: React.ReactChild[] | React.ReactChild,
|
|
9
|
+
className?: string,
|
|
10
|
+
color?: 'light' | 'default' | 'lighter' | 'link' | 'error' | 'success',
|
|
11
|
+
dark?: boolean,
|
|
12
|
+
data?: { [key: string]: string },
|
|
13
|
+
id?: string,
|
|
14
|
+
tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
|
|
15
|
+
text?: string,
|
|
16
|
+
} & GlobalProps
|
|
17
|
+
|
|
18
|
+
const Detail = (props: DetailProps) => {
|
|
19
|
+
const {
|
|
20
|
+
aria = {},
|
|
21
|
+
children,
|
|
22
|
+
className,
|
|
23
|
+
color = 'light',
|
|
24
|
+
data = {},
|
|
25
|
+
id = '',
|
|
26
|
+
tag = 'div',
|
|
27
|
+
text= ''
|
|
28
|
+
} = props
|
|
29
|
+
|
|
30
|
+
const ariaProps: {[key: string]: any} = buildAriaProps(aria)
|
|
31
|
+
const dataProps: {[key: string]: any} = buildDataProps(data)
|
|
32
|
+
const classes = classnames(
|
|
33
|
+
buildCss('pb_detail_kit', color),
|
|
34
|
+
globalProps(props),
|
|
35
|
+
className
|
|
36
|
+
)
|
|
37
|
+
const Tag: React.ReactElement | any = `${tag}`
|
|
38
|
+
|
|
39
|
+
return (
|
|
40
|
+
<Tag
|
|
41
|
+
{...ariaProps}
|
|
42
|
+
{...dataProps}
|
|
43
|
+
className={classes}
|
|
44
|
+
id={id}
|
|
45
|
+
>
|
|
46
|
+
{text || children}
|
|
47
|
+
</Tag>
|
|
48
|
+
)
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
export default Detail
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
@import "../tokens/colors";
|
|
2
|
+
@import "../tokens/line_height";
|
|
3
|
+
@import "../tokens/typography";
|
|
4
|
+
|
|
5
|
+
$pb_detail_colors: (
|
|
6
|
+
light: $text_lt_light,
|
|
7
|
+
default: $text_lt_default,
|
|
8
|
+
lighter: $text_lt_lighter,
|
|
9
|
+
link: $primary,
|
|
10
|
+
error: $error,
|
|
11
|
+
success: $text_lt_success_sm,
|
|
12
|
+
);
|
|
13
|
+
|
|
14
|
+
$pb_dark_detail_colors: (
|
|
15
|
+
light: $text_dk_light,
|
|
16
|
+
default: $text_dk_default,
|
|
17
|
+
lighter: $text_dk_lighter,
|
|
18
|
+
link: $primary,
|
|
19
|
+
error: $error_dark,
|
|
20
|
+
success: $text_dk_success_sm,
|
|
21
|
+
);
|
|
22
|
+
|
|
23
|
+
@mixin pb_detail($color: $text_lt_light) {
|
|
24
|
+
line-height: $lh_tight;
|
|
25
|
+
color: $color;
|
|
26
|
+
font-size: $text_small;
|
|
27
|
+
font-weight: $regular;
|
|
28
|
+
font-family: $font-family-base;
|
|
29
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Playbook
|
|
4
|
+
module PbDetail
|
|
5
|
+
class Detail < ::Playbook::KitBase
|
|
6
|
+
prop :color, type: Playbook::Props::Enum,
|
|
7
|
+
values: %w[light default lighter link error success],
|
|
8
|
+
default: "light"
|
|
9
|
+
prop :tag, type: Playbook::Props::Enum,
|
|
10
|
+
values: %w[h1 h2 h3 h4 h5 h6 p span div],
|
|
11
|
+
default: "div"
|
|
12
|
+
prop :text
|
|
13
|
+
|
|
14
|
+
def classname
|
|
15
|
+
generate_classname("pb_detail_kit", color)
|
|
16
|
+
end
|
|
17
|
+
|
|
18
|
+
def content
|
|
19
|
+
super.presence || text
|
|
20
|
+
end
|
|
21
|
+
end
|
|
22
|
+
end
|
|
23
|
+
end
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
|
3
|
+
|
|
4
|
+
import Detail from './_detail'
|
|
5
|
+
|
|
6
|
+
test('returns namespaced class name', () => {
|
|
7
|
+
render(
|
|
8
|
+
<Detail
|
|
9
|
+
data={{ testid: 'primary-test' }}
|
|
10
|
+
text="Test colors"
|
|
11
|
+
/>
|
|
12
|
+
)
|
|
13
|
+
|
|
14
|
+
const kit = screen.getByTestId('primary-test')
|
|
15
|
+
expect(kit).toHaveClass('pb_detail_kit_light')
|
|
16
|
+
})
|
|
17
|
+
|
|
18
|
+
test('with colors', () => {
|
|
19
|
+
['light', 'default', 'lighter', 'link', 'success', 'error'].forEach((color) => {
|
|
20
|
+
const testId = `colors-test-${color}`
|
|
21
|
+
|
|
22
|
+
render(
|
|
23
|
+
<Detail
|
|
24
|
+
color={color}
|
|
25
|
+
data={{ testid: testId }}
|
|
26
|
+
text="Test colors"
|
|
27
|
+
/>
|
|
28
|
+
)
|
|
29
|
+
|
|
30
|
+
const kit = screen.getByTestId(testId)
|
|
31
|
+
expect(kit).toHaveClass(`pb_detail_kit_${color}`)
|
|
32
|
+
})
|
|
33
|
+
})
|
|
@@ -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
|
+
}) %>
|