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.
Files changed (51) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +1 -0
  3. data/app/pb_kits/playbook/index.js +1 -0
  4. data/app/pb_kits/playbook/pb_date/_date.tsx +96 -42
  5. data/app/pb_kits/playbook/pb_date/date.html.erb +22 -2
  6. data/app/pb_kits/playbook/pb_date/date.rb +2 -0
  7. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.html.erb +30 -0
  8. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +47 -0
  9. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.md +1 -0
  10. data/app/pb_kits/playbook/pb_date/docs/example.yml +4 -4
  11. data/app/pb_kits/playbook/pb_date/docs/index.js +1 -0
  12. data/app/pb_kits/playbook/pb_detail/_detail.scss +44 -0
  13. data/app/pb_kits/playbook/pb_detail/_detail.tsx +51 -0
  14. data/app/pb_kits/playbook/pb_detail/_detail_mixins.scss +29 -0
  15. data/app/pb_kits/playbook/pb_detail/detail.html.erb +7 -0
  16. data/app/pb_kits/playbook/pb_detail/detail.rb +23 -0
  17. data/app/pb_kits/playbook/pb_detail/detail.test.jsx +33 -0
  18. data/app/pb_kits/playbook/pb_detail/docs/_description.md +1 -0
  19. data/app/pb_kits/playbook/pb_detail/docs/_detail_bolded.html.erb +33 -0
  20. data/app/pb_kits/playbook/pb_detail/docs/_detail_bolded.jsx +47 -0
  21. data/app/pb_kits/playbook/pb_detail/docs/_detail_default.html.erb +28 -0
  22. data/app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx +43 -0
  23. data/app/pb_kits/playbook/pb_detail/docs/_detail_default.md +6 -0
  24. data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.html.erb +22 -0
  25. data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx +32 -0
  26. data/app/pb_kits/playbook/pb_detail/docs/example.yml +11 -0
  27. data/app/pb_kits/playbook/pb_detail/docs/index.js +3 -0
  28. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +0 -13
  29. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +4 -4
  30. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -1
  31. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +0 -3
  32. data/app/pb_kits/playbook/pb_time/_time.tsx +71 -35
  33. data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.html.erb +37 -0
  34. data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.jsx +58 -0
  35. data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.md +1 -0
  36. data/app/pb_kits/playbook/pb_time/docs/example.yml +2 -0
  37. data/app/pb_kits/playbook/pb_time/docs/index.js +1 -0
  38. data/app/pb_kits/playbook/pb_time/time.html.erb +26 -7
  39. data/app/pb_kits/playbook/pb_time/time.rb +2 -0
  40. data/app/pb_kits/playbook/pb_title/_title.scss +2 -1
  41. data/app/pb_kits/playbook/pb_title/_title.tsx +3 -2
  42. data/app/pb_kits/playbook/pb_title/title.rb +10 -3
  43. data/app/pb_kits/playbook/pb_title/title.test.js +3 -3
  44. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  45. data/dist/menu.yml +1 -0
  46. data/dist/playbook-rails.js +5 -5
  47. data/lib/playbook/forms/builder.rb +0 -1
  48. data/lib/playbook/version.rb +2 -2
  49. metadata +24 -4
  50. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +0 -72
  51. 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: c6fe605ba32fd5f0d1b3a69fa8dc0459b1f15336526f1f615bcd35b271adcdaf
4
- data.tar.gz: 696f4ef6e81087809a81f79a4c04a9a719eeac93b00c27365d365c151da9c37c
3
+ metadata.gz: 0e2ca337968fddb4b7339377411e960bfe5a908c7236bd183a5cf1175abb1d45
4
+ data.tar.gz: 1dae2d3a4a0e5af085133891b141a46806bc6245559dae96b474d27c6143f5b0
5
5
  SHA512:
6
- metadata.gz: 1d402c24afb0d5c5d45131ab241dd8b3fc3906c4e79f0fd7d00337ab2299456676e2c892b31b11fe186cc3beaee8e5124061f6fbe18d76405dafc5722bdfbaea
7
- data.tar.gz: 0b94788ff8de309a8b6e2649523ceef0ef17b0bdda8c691425fccf18d30bec309cdc1d062d37266227962dc5c2448a046b8c7dd373649152c877e26f6764493d
6
+ metadata.gz: 7840f0f79113c13267b17e9cc6dc68058b8cd9abc24618caee84177c0b4baf168ee163f76bc847bdbec9b132190f01f80ff6107d9868a115a3793165899b11c1
7
+ data.tar.gz: 22eeca8bbc3b6474277b8ae9adb61338b87a7537404a081fd707949559840dfbdf64a202eaa73d88ef81b100f3c45112153baebf9f495f5d8b3a64aaf532d61f
@@ -5,6 +5,7 @@
5
5
  @import 'pb_button_toolbar/button_toolbar';
6
6
  @import 'pb_caption/caption';
7
7
  @import 'pb_card/card';
8
+ @import 'pb_detail/detail';
8
9
  @import 'pb_title/title';
9
10
  @import 'pb_avatar/avatar';
10
11
  @import 'pb_avatar_action_button/avatar_action_button';
@@ -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} {...dataProps} className={classes} id={id}>
56
- {size == "md" || size == "lg" ? (
57
- <Title size={4} tag="h4">
58
- {showIcon && (
59
- <Body className="pb_icon_kit_container" color="light" tag="span">
60
- <Icon fixedWidth icon="calendar-alt" />
61
- </Body>
62
- )}
63
-
64
- {showDayOfWeek && (
65
- <>
66
- {weekday}
67
- <Body color="light" tag="span" text=" • " />
68
- </>
69
- )}
70
-
71
- <span>
72
- {month} {day}
73
- </span>
74
- {currentYear != year && <span>{`, ${year}`}</span>}
75
- </Title>
76
- ) : (
77
- <>
78
- {showIcon && (
79
- <Caption className="pb_icon_kit_container" tag="span">
80
- <Icon fixedWidth icon="calendar-alt" size="sm" />
81
- </Caption>
82
- )}
83
-
84
- {showDayOfWeek && (
85
- <>
86
- <Caption tag="div">{weekday}</Caption>
87
- <Caption color="light" tag="div" text=" • " />
88
- </>
89
- )}
90
-
91
- <Caption tag="span">
92
- {month} {day}
93
- {currentYear != year && <>{`, ${year}`}</>}
94
- </Caption>
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.size == "md" %>
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: {
@@ -15,6 +15,8 @@ module Playbook
15
15
  values: %w[lg md sm xs],
16
16
  default: "md"
17
17
  prop :timezone, default: "America/New_York"
18
+ prop :unstyled, type: Playbook::Props::Boolean,
19
+ default: false
18
20
 
19
21
  def classname
20
22
  generate_classname("pb_date_kit", alignment)
@@ -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
@@ -1,3 +1,4 @@
1
1
  export { default as DateDefault } from './_date_default.jsx'
2
2
  export { default as DateVariants } from './_date_variants.jsx'
3
3
  export { default as DateAlignment } from './_date_alignment.jsx'
4
+ export { default as DateUnstyled } from './_date_unstyled.jsx'
@@ -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,7 @@
1
+ <%= content_tag(object.tag,
2
+ aria: object.aria,
3
+ class: object.classname,
4
+ data: object.data,
5
+ id: object.id) do %>
6
+ <%= object.content %>
7
+ <% end %>
@@ -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
+ }) %>