playbook_ui 12.24.0 → 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/_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_docs/kit_example.rb +0 -2
- 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 +51 -0
- data/lib/playbook/version.rb +2 -2
- data/lib/playbook.rb +1 -2
- metadata +34 -41
- data/app/pb_kits/playbook/pb_docs/kit_api.html.erb +0 -311
- data/app/pb_kits/playbook/pb_docs/kit_api.rb +0 -149
- data/lib/playbook/markdown/helper.rb +0 -132
- data/lib/playbook/markdown.rb +0 -3
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
|
+
}) %>
|