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
@@ -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,11 @@
1
+ examples:
2
+
3
+ rails:
4
+ - detail_default: Variants
5
+ - detail_styled: Styled
6
+ - detail_bolded: Bolded
7
+
8
+ react:
9
+ - detail_default: Variants
10
+ - detail_styled: Styled
11
+ - detail_bolded: Bolded
@@ -0,0 +1,3 @@
1
+ export { default as DetailDefault } from './_detail_default.jsx'
2
+ export { default as DetailStyled } from './_detail_styled.jsx'
3
+ export { default as DetailBolded } from './_detail_bolded.jsx'
@@ -10,7 +10,6 @@ type MultiLevelSelectProps = {
10
10
  className?: string;
11
11
  data?: { [key: string]: string };
12
12
  id?: string;
13
- name?: string;
14
13
  returnAllSelected?: boolean;
15
14
  treeData?: { [key: string]: string }[];
16
15
  onSelect?: (prop: { [key: string]: any }) => void;
@@ -22,7 +21,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
22
21
  className,
23
22
  data = {},
24
23
  id,
25
- name,
26
24
  returnAllSelected = false,
27
25
  treeData,
28
26
  onSelect = () => {},
@@ -79,14 +77,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
79
77
  setFormattedData(updatedData);
80
78
  };
81
79
 
82
- const updateHiddenInputValue = (value: any) => {
83
- const hiddenInput = document.querySelector('input#'+id) as HTMLInputElement;
84
- if (hiddenInput) {
85
- hiddenInput.value = JSON.stringify(value);
86
- }
87
- };
88
-
89
-
90
80
  useEffect(() => {
91
81
  if (returnAllSelected) {
92
82
  const selected = selectedItems.filter(
@@ -105,7 +95,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
105
95
  if (el) {
106
96
  el.setAttribute("data-tree", JSON.stringify(checkedData));
107
97
  }
108
- updateHiddenInputValue(checkedData);
109
98
  if (returnAllSelected) {
110
99
  onSelect(checkedData);
111
100
  }
@@ -132,8 +121,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
132
121
 
133
122
  return (
134
123
  <div {...ariaProps} {...dataProps} className={classes} id={id}>
135
-
136
- <input type="hidden" id={id} name={name} value="" />
137
124
  {returnAllSelected ? (
138
125
  <MultiSelectHelper
139
126
  treeData={formattedData}
@@ -64,9 +64,9 @@
64
64
  }] %>
65
65
 
66
66
 
67
- <%= pb_rails("multi_level_select", props: {
68
- id: "default-multi-level-select",
69
- tree_data:treeData
70
- }) %>
67
+ <%= pb_rails("multi_level_select", props: {
68
+ id: "default-multi-level-select",
69
+ tree_data:treeData
70
+ }) %>
71
71
 
72
72
 
@@ -2,7 +2,6 @@ examples:
2
2
  rails:
3
3
  - multi_level_select_default: Default
4
4
  - multi_level_select_return_all_selected: Return All Selected
5
- - multi_level_select_with_form: With Form
6
5
 
7
6
  react:
8
7
  - multi_level_select_default: Default
@@ -3,8 +3,6 @@
3
3
  module Playbook
4
4
  module PbMultiLevelSelect
5
5
  class MultiLevelSelect < Playbook::KitBase
6
- prop :id
7
- prop :name
8
6
  prop :tree_data, type: Playbook::Props::Array,
9
7
  default: []
10
8
  prop :return_all_selected, type: Playbook::Props::Boolean,
@@ -17,7 +15,6 @@ module Playbook
17
15
  def multi_level_select_options
18
16
  {
19
17
  id: id,
20
- name: name,
21
18
  treeData: tree_data,
22
19
  returnAllSelected: return_all_selected,
23
20
  }
@@ -20,6 +20,7 @@ type TimeProps = {
20
20
  size?: "md" | "sm";
21
21
  showTimezone?: boolean;
22
22
  timeZone?: string;
23
+ unstyled?: boolean;
23
24
  } & GlobalProps
24
25
 
25
26
  const Time = (props: TimeProps) => {
@@ -30,8 +31,10 @@ const Time = (props: TimeProps) => {
30
31
  showIcon,
31
32
  size,
32
33
  timeZone,
34
+ unstyled = false,
33
35
  showTimezone = true,
34
36
  } = props;
37
+
35
38
  const classes = classnames(
36
39
  buildCss("pb_time_kit", align, size),
37
40
  globalProps(props),
@@ -43,46 +46,79 @@ const Time = (props: TimeProps) => {
43
46
  return (
44
47
  <div className={classes}>
45
48
  {showIcon && (
46
- <>
47
- <Body color="light" tag="span">
48
- <Icon fixedWidth icon="clock" size={size === "md" ? "" : "sm"} />
49
- </Body>{" "}
50
- </>
51
- )}
52
-
53
- <time dateTime={date}>
54
- <span>
55
- {size === "md" ? (
56
- <>
57
- <Body
58
- className="pb_time"
59
- tag="span"
60
- text={dateTimestamp.toTimeWithMeridian()}
61
- />{" "}
62
- {showTimezone && (
63
- <Body
64
- color="light"
65
- tag="span"
66
- text={dateTimestamp.toTimezone()}
49
+ unstyled
50
+ ? (
51
+ <span>
52
+ <Icon fixedWidth
53
+ icon="clock"
67
54
  />
68
- )}
69
- </>
70
- ) : (
55
+ {" "}
56
+ </span>
57
+ )
58
+ : (
71
59
  <>
72
- <Caption
73
- color="light"
74
- tag="span"
75
- text={dateTimestamp.toTimeWithMeridian()}
76
- />{" "}
77
- {showTimezone && (
78
- <Caption
79
- color="light"
60
+ <Body color="light"
80
61
  tag="span"
81
- text={dateTimestamp.toTimezone()}
62
+ >
63
+ <Icon fixedWidth
64
+ icon="clock"
65
+ size={size === "md" ? "" : "sm"}
82
66
  />
83
- )}
67
+ {" "}
68
+ </Body>
84
69
  </>
85
- )}
70
+ )
71
+ )}
72
+
73
+ <time dateTime={date}>
74
+ <span>
75
+ {unstyled
76
+ ? (
77
+ <>
78
+ <span>
79
+ {dateTimestamp.toTimeWithMeridian()}
80
+ </span>
81
+ {" "}
82
+ {showTimezone && (
83
+ <span>
84
+ {dateTimestamp.toTimezone()}
85
+ </span>
86
+ )}
87
+ </>
88
+ )
89
+ : size === "md"
90
+ ? (
91
+ <>
92
+ <Body
93
+ className="pb_time"
94
+ tag="span"
95
+ text={dateTimestamp.toTimeWithMeridian()}
96
+ />{" "}
97
+ {showTimezone && (
98
+ <Body
99
+ color="light"
100
+ tag="span"
101
+ text={dateTimestamp.toTimezone()}
102
+ />
103
+ )}
104
+ </>
105
+ )
106
+ : (
107
+ <>
108
+ <Caption
109
+ color="light"
110
+ tag="span"
111
+ text={dateTimestamp.toTimeWithMeridian()}
112
+ />{" "}
113
+ {showTimezone && (
114
+ <Caption
115
+ color="light"
116
+ tag="span"
117
+ text={dateTimestamp.toTimezone()}
118
+ />
119
+ )}
120
+ </>
121
+ )}
86
122
  </span>
87
123
  </time>
88
124
  </div>
@@ -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'
@@ -8,25 +8,44 @@
8
8
  size = "sm" if object.size == "xs"
9
9
  size = "md" if object.size == "lg"
10
10
  %>
11
- <% if size == "md" %>
11
+
12
+ <% if object.unstyled %>
13
+ <% if object.show_icon %>
14
+ <span>
15
+ <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
16
+ </span>
17
+ <% end %>
18
+
19
+ <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
20
+ <span><%= object.format_time_string %></span>
21
+ <% if object.show_timezone %>
22
+ <span><%= object.pb_date_time.to_timezone.upcase %></span>
23
+ <% end %>
24
+ <% end %>
25
+
26
+ <% elsif size == "md" %>
12
27
  <% if object.show_icon %>
13
28
  <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
14
29
  <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
15
30
  <% end %>
16
31
  <% end %>
17
- <%= pb_rails("body", props: { tag: "span", text: object.format_time_string, classname: "pb_time" }) %>
18
- <% if object.show_timezone %>
19
- <%= pb_rails("body", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase }) %>
32
+
33
+ <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
34
+ <%= pb_rails("body", props: { tag: "span", text: object.format_time_string, classname: "pb_time" }) %>
35
+ <% if object.show_timezone %>
36
+ <%= pb_rails("body", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase }) %>
37
+ <% end %>
20
38
  <% end %>
39
+
21
40
  <% else %>
22
41
  <% if object.show_icon %>
23
42
  <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
24
43
  <%= pb_rails("icon", props: { icon: "clock", fixed_width: true, size: "sm" }) %>
25
44
  <% end %>
26
45
  <% end %>
27
-
28
- <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.format_time_string }) do %>
29
- <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
46
+
47
+ <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
48
+ <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.format_time_string }) do %>
30
49
  <%= object.format_time_string %>
31
50
  <% if object.show_timezone %>
32
51
  <span class="pb_time_timezone">
@@ -15,6 +15,8 @@ module Playbook
15
15
  default: false
16
16
  prop :show_timezone, type: Playbook::Props::Boolean,
17
17
  default: true
18
+ prop :unstyled, type: Playbook::Props::Boolean,
19
+ default: false
18
20
 
19
21
  def classname
20
22
  # convert deprecated prop values
@@ -18,6 +18,7 @@
18
18
  &[class*=_3] {
19
19
  @include pb_title_3;
20
20
  @include title_colors;
21
+ @include pb_title_bold;
21
22
  }
22
23
 
23
24
  &[class*=_4] {
@@ -29,7 +30,7 @@
29
30
  @include pb_title_dark;
30
31
  }
31
32
 
32
- &[class*=_thin] {
33
+ &[class*=thin] {
33
34
  @include pb_title_thin;
34
35
  }
35
36
  }
@@ -21,13 +21,13 @@ const Title = (props: TitleProps): React.ReactElement => {
21
21
  if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
22
22
  const {
23
23
  aria = {},
24
- bold = true,
25
24
  children,
26
25
  className,
27
26
  color,
28
27
  data = {},
29
28
  id,
30
29
  size = 3,
30
+ bold = size === 3 ? false : true,
31
31
  tag = 'h3',
32
32
  text,
33
33
  variant = null,
@@ -35,9 +35,10 @@ const Title = (props: TitleProps): React.ReactElement => {
35
35
 
36
36
  const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
37
37
  const dataProps: {[key: string]: string | number} = buildDataProps(data)
38
+
38
39
  const getBold = bold ? '' : 'thin'
39
40
  const classes = classnames(
40
- buildCss('pb_title_kit', `size_${size}`, variant, color, getBold),
41
+ buildCss("pb_title_kit", `size_${size}`, variant, color) + ` ${getBold}`,
41
42
  globalProps(props),
42
43
  className
43
44
  )
@@ -17,14 +17,21 @@ module Playbook
17
17
  values: [nil, "link"],
18
18
  default: nil,
19
19
  deprecated: true
20
- prop :bold, type: Playbook::Props::Boolean, default: true
20
+
21
+ def initialize(props)
22
+ props[:bold] = [1, 2, 4].include?(props[:size]) unless props.key?(:bold)
23
+ props[:bold] = false if props[:size].nil? && !props.key?(:bold)
24
+ super(props)
25
+ end
26
+
27
+ prop :bold, type: Playbook::Props::Boolean
21
28
 
22
29
  def classname
23
- generate_classname("pb_title_kit", size, variant, color, is_bold)
30
+ generate_classname("pb_title_kit", size, variant, color) + is_bold
24
31
  end
25
32
 
26
33
  def is_bold
27
- bold ? nil : "thin"
34
+ bold ? "" : " thin"
28
35
  end
29
36
  end
30
37
  end
@@ -12,7 +12,7 @@ test('returns namespaced class name', () => {
12
12
  )
13
13
 
14
14
  const kit = screen.getByTestId('primary-test')
15
- expect(kit).toHaveClass('pb_title_kit_size_3')
15
+ expect(kit).toHaveClass('pb_title_kit_size_3 thin')
16
16
  })
17
17
 
18
18
  test('with thin font weight', () => {
@@ -25,7 +25,7 @@ test('with thin font weight', () => {
25
25
  )
26
26
 
27
27
  const kit = screen.getByTestId('primary-test')
28
- expect(kit).toHaveClass('pb_title_kit_size_3_thin')
28
+ expect(kit).toHaveClass('pb_title_kit_size_3 thin')
29
29
  })
30
30
 
31
31
  test('with colors', () => {
@@ -38,5 +38,5 @@ test('with colors', () => {
38
38
  )
39
39
 
40
40
  const kit = screen.getByTestId('primary-test')
41
- expect(kit).toHaveClass('pb_title_kit_size_3_success')
41
+ expect(kit).toHaveClass('pb_title_kit_size_3_success thin')
42
42
  })
@@ -30,6 +30,7 @@ import * as DateStacked from 'pb_date_stacked/docs'
30
30
  import * as DateTime from 'pb_date_time/docs'
31
31
  import * as DateTimeStacked from 'pb_date_time_stacked/docs'
32
32
  import * as DateYearStacked from 'pb_date_year_stacked/docs'
33
+ import * as Detail from 'pb_detail/docs'
33
34
  import * as Dialog from 'pb_dialog/docs'
34
35
  import * as DistributionBarDocs from 'pb_distribution_bar/docs'
35
36
  import * as FileUpload from 'pb_file_upload/docs'
@@ -130,6 +131,7 @@ WebpackerReact.setup({
130
131
  ...DateTime,
131
132
  ...DateTimeStacked,
132
133
  ...DateYearStacked,
134
+ ...Detail,
133
135
  ...Dialog,
134
136
  ...DistributionBarDocs,
135
137
  ...FileUpload,
data/dist/menu.yml CHANGED
@@ -90,6 +90,7 @@ kits:
90
90
  - typography:
91
91
  - body
92
92
  - caption
93
+ - detail
93
94
  - title
94
95
  - typography_patterns:
95
96
  - contact