playbook_ui 12.24.0 → 12.25.0.pre.alpha.play822bolddefaultfortitle3764

Sign up to get free protection for your applications and to get access to all the features.
Files changed (31) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date/_date.tsx +96 -42
  3. data/app/pb_kits/playbook/pb_date/date.html.erb +22 -2
  4. data/app/pb_kits/playbook/pb_date/date.rb +2 -0
  5. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.html.erb +30 -0
  6. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +47 -0
  7. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.md +1 -0
  8. data/app/pb_kits/playbook/pb_date/docs/example.yml +4 -4
  9. data/app/pb_kits/playbook/pb_date/docs/index.js +1 -0
  10. data/app/pb_kits/playbook/pb_docs/kit_example.rb +0 -2
  11. data/app/pb_kits/playbook/pb_time/_time.tsx +71 -35
  12. data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.html.erb +37 -0
  13. data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.jsx +58 -0
  14. data/app/pb_kits/playbook/pb_time/docs/_time_unstyled.md +1 -0
  15. data/app/pb_kits/playbook/pb_time/docs/example.yml +2 -0
  16. data/app/pb_kits/playbook/pb_time/docs/index.js +1 -0
  17. data/app/pb_kits/playbook/pb_time/time.html.erb +26 -7
  18. data/app/pb_kits/playbook/pb_time/time.rb +2 -0
  19. data/app/pb_kits/playbook/pb_title/_title.scss +1 -0
  20. data/app/pb_kits/playbook/pb_title/_title.tsx +1 -1
  21. data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb +1 -0
  22. data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx +6 -0
  23. data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md +1 -2
  24. data/dist/playbook-rails.js +51 -0
  25. data/lib/playbook/version.rb +2 -2
  26. data/lib/playbook.rb +1 -2
  27. metadata +18 -41
  28. data/app/pb_kits/playbook/pb_docs/kit_api.html.erb +0 -311
  29. data/app/pb_kits/playbook/pb_docs/kit_api.rb +0 -149
  30. data/lib/playbook/markdown/helper.rb +0 -132
  31. data/lib/playbook/markdown.rb +0 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: f27b3e255fc8158201600b6221f2091e84ceb753c83d6d28a045ca256729ec05
4
- data.tar.gz: d2af8d464afa9225d3a3647dc83c2a241f208849978b39312d49f45b74415937
3
+ metadata.gz: 2f92b0ba0b6815c0e58e6245b7ab5c168f842a740774aae7f42157b772d47b65
4
+ data.tar.gz: 8b6d4937bdf2cd755f0787c25ab8743ea363381f05fcca13627b5363e1f484f0
5
5
  SHA512:
6
- metadata.gz: '018df9baaa8a9b1bc628873a71a2c1a5dde29e228be173511078a8f934cab375c7992f7bdd1b8e50523d401bd3554fb5f491f2fe98daf811c27e88c5ed6534a4'
7
- data.tar.gz: 30cf511832a2ce5021ed6658e76f89c5ecacd040538b67e169e41071eb6451969cc8e0fe71a6855e8a413ae1465837fd122ba26baa07a49788031c21e2c00744
6
+ metadata.gz: 7ef87aa97ccafa5bd9291457af632c5710747f680e300b8ad56060a0b9b65c1ac22738079663831be6a2e9bd3a705a8f201be0b0a2826e28261d88541a70f80b
7
+ data.tar.gz: cbc07ce3495e7df2bccb5c40adc653b824de1506e0a64895ff632897529b4250232317278026ef9d9071071ff1ed4c8245ce514fdf6569162e8720d942c84da8
@@ -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'
@@ -5,8 +5,6 @@
5
5
  module Playbook
6
6
  module PbDocs
7
7
  class KitExample < Playbook::KitBase
8
- include Playbook::Markdown::Helper
9
-
10
8
  prop :kit, type: Playbook::Props::String, required: true
11
9
  prop :example_title, type: Playbook::Props::String, required: true
12
10
  prop :example_key, type: Playbook::Props::String, required: true
@@ -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] {