playbook_ui 13.3.0 → 13.4.0.pre.alpha.PLAY973Hash1181

Sign up to get free protection for your applications and to get access to all the features.
Files changed (48) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +1 -0
  3. data/app/pb_kits/playbook/pb_button/button.html.erb +2 -2
  4. data/app/pb_kits/playbook/pb_button/button.rb +3 -0
  5. data/app/pb_kits/playbook/pb_card/card.rb +1 -1
  6. data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +1 -1
  7. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +5 -1
  8. data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.rb +2 -2
  9. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +2 -2
  10. data/app/pb_kits/playbook/pb_file_upload/file_upload.rb +1 -1
  11. data/app/pb_kits/playbook/pb_kit/dateTime.ts +54 -23
  12. data/app/pb_kits/playbook/pb_passphrase/passphrase.rb +1 -1
  13. data/app/pb_kits/playbook/pb_radio/radio.rb +1 -1
  14. data/app/pb_kits/playbook/pb_select/select.rb +1 -1
  15. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb +1 -1
  16. data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb +1 -1
  17. data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb +1 -1
  18. data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb +1 -1
  19. data/app/pb_kits/playbook/pb_source/source.rb +1 -1
  20. data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.jsx +3 -3
  21. data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -2
  22. data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +14 -7
  23. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.html.erb +21 -0
  24. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx +36 -0
  25. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.md +1 -0
  26. data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +3 -1
  27. data/app/pb_kits/playbook/pb_timestamp/docs/index.js +1 -0
  28. data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb +5 -1
  29. data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +3 -1
  30. data/app/pb_kits/playbook/pb_title/_title.scss +3 -4
  31. data/app/pb_kits/playbook/pb_toggle/toggle.rb +1 -1
  32. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +1 -1
  33. data/app/pb_kits/playbook/tokens/_spacing.scss +1 -1
  34. data/app/pb_kits/playbook/tokens/_text_align.scss +18 -0
  35. data/app/pb_kits/playbook/utilities/_hover.scss +4 -0
  36. data/app/pb_kits/playbook/utilities/_max_width.scss +4 -0
  37. data/app/pb_kits/playbook/utilities/_spacing.scss +92 -49
  38. data/app/pb_kits/playbook/utilities/_text_align.scss +3 -0
  39. data/app/pb_kits/playbook/utilities/globalProps.ts +30 -2
  40. data/dist/playbook-rails.js +5 -5
  41. data/lib/playbook/classnames.rb +1 -0
  42. data/lib/playbook/hover.rb +6 -2
  43. data/lib/playbook/kit_base.rb +4 -2
  44. data/lib/playbook/props/hash.rb +1 -1
  45. data/lib/playbook/spacing.rb +13 -4
  46. data/lib/playbook/text_align.rb +37 -0
  47. data/lib/playbook/version.rb +2 -2
  48. metadata +13 -7
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 9f58a60dbe08112a0b7b1cea36c7838386d7b7577809d4030a9b139b179df83d
4
- data.tar.gz: 4bfb13a37f222531335ffa4b950026c1f0c7daeb2b33aecf3cf06fd02fa3684a
3
+ metadata.gz: 6d6551f1772a9fb33867a19c0226859cf491c986ccb503c2c7601588582d55c3
4
+ data.tar.gz: 86d1ebafb210c29139963d232e1c52d071ca862cde8aaa283420e756fc39aaab
5
5
  SHA512:
6
- metadata.gz: 8554a0a8db1af2d8ca5e08f92f03354c68df334eeea9c8d33f103e825295fabc25e28c8a2466dadb381e4a11810d0059771ddeff2dd60505ba3f181f1af5e211
7
- data.tar.gz: 06dd58fecce7e733a01e77d54cdad22b051f7ec5036e881726ecc283407d28451c98fce6b05b4649fa13bd7868d601d9d1767dc0cb52393f55352314177b7210
6
+ metadata.gz: 2aabad2326332a49ce487e0ab62d606c76c53bab395b3f04d3aa396342afca0ec57a941fb032da36a6eb13b1a73cff2a0e522256de643fb0bc3ea375f71a4088
7
+ data.tar.gz: 414ad28883507217cc57ed460ad78c83188d0b94d87a7ce8964409d89554af5260e5053b5ff02fbe71149bf3de1a933deff958d82d77e5192fa4db1e67813d53
@@ -112,5 +112,6 @@
112
112
  @import './utilities/focus';
113
113
  @import './utilities/border_radius';
114
114
  @import './utilities/hover';
115
+ @import './utilities/text_align';
115
116
 
116
117
  @import 'pb_multi_level_select/multi_level_select';
@@ -18,14 +18,14 @@
18
18
  <% else %>
19
19
  <% if object.icon && !object.icon_right %>
20
20
  <span>
21
- <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_right: "xs" }) %>
21
+ <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_right: "xs", font_style: object.icon_font_family }) %>
22
22
  </span>
23
23
  <% end %>
24
24
  <%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, classname: "loading-icon" }) %>
25
25
  <span class="pb_button_content"><%= content.presence || object.text %></span>
26
26
  <% if object.icon && object.icon_right %>
27
27
  <span>
28
- <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_left: "xs" }) %>
28
+ <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_left: "xs", font_style: object.icon_font_family }) %>
29
29
  </span>
30
30
  <% end %>
31
31
  <% end %>
@@ -29,6 +29,9 @@ module Playbook
29
29
  values: ["sm", "md", "lg", nil],
30
30
  default: nil
31
31
  prop :form, default: nil
32
+ prop :icon_font_family, type: Playbook::Props::Enum,
33
+ values: %w[far fas fab fak],
34
+ default: "far"
32
35
 
33
36
  def options
34
37
  {
@@ -4,7 +4,7 @@ module Playbook
4
4
  module PbCard
5
5
  class Card < Playbook::KitBase
6
6
  prop :selected, type: Playbook::Props::Boolean, default: false
7
- prop :highlight, type: Playbook::Props::Hash,
7
+ prop :highlight, type: Playbook::Props::HashProp,
8
8
  default: {}
9
9
  prop :tag, type: Playbook::Props::Enum,
10
10
  values: %w[div section footer header article aside main nav],
@@ -10,7 +10,7 @@ module Playbook
10
10
  prop :value
11
11
  prop :name
12
12
 
13
- prop :input_options, type: Playbook::Props::Hash,
13
+ prop :input_options, type: Playbook::Props::HashProp,
14
14
  default: {}
15
15
  prop :required, type: Playbook::Props::Boolean,
16
16
  default: false
@@ -99,8 +99,12 @@ const CollapsibleMain = ({
99
99
  const mainSpacing = globalProps(props, { cursor })
100
100
 
101
101
  const handleCollapsibleClick = () => {
102
+ onClick && onClick();
103
+ //To disable default toggling behavior return "true" in the onClick()
104
+ const disableToggle = onClick && onClick();
105
+ if (disableToggle !== true) {
102
106
  toggle();
103
- onClick && onClick()
107
+ }
104
108
  }
105
109
 
106
110
  return (
@@ -6,10 +6,10 @@ module Playbook
6
6
  prop :align, type: Playbook::Props::Enum,
7
7
  values: %w[left center right],
8
8
  default: "left"
9
- prop :stat_change, type: Playbook::Props::Hash,
9
+ prop :stat_change, type: Playbook::Props::HashProp,
10
10
  default: {}
11
11
  prop :stat_label
12
- prop :stat_value, type: Playbook::Props::Hash,
12
+ prop :stat_value, type: Playbook::Props::HashProp,
13
13
  default: {}
14
14
 
15
15
  def formatted_stat_value
@@ -34,9 +34,9 @@ module Playbook
34
34
  default: false
35
35
  prop :label, type: Playbook::Props::String,
36
36
  default: "Date Picker"
37
- prop :input_aria, type: Playbook::Props::Hash,
37
+ prop :input_aria, type: Playbook::Props::HashProp,
38
38
  default: {}
39
- prop :input_data, type: Playbook::Props::Hash,
39
+ prop :input_data, type: Playbook::Props::HashProp,
40
40
  default: {}
41
41
  prop :max_date, type: Playbook::Props::String
42
42
  prop :min_date, type: Playbook::Props::String
@@ -18,7 +18,7 @@ module Playbook
18
18
  prop :full_width, type: Playbook::Props::Boolean,
19
19
  default: false
20
20
 
21
- prop :input_options, type: Playbook::Props::Hash,
21
+ prop :input_options, type: Playbook::Props::HashProp,
22
22
  default: {}
23
23
 
24
24
  def classname
@@ -121,30 +121,61 @@ export const toIso = (newDate: Date | string): string => {
121
121
  }
122
122
 
123
123
  export const fromNow = (newDate: Date | string): string => {
124
- const startDate = formatDate(newDate).getTime()
125
- const endDate = new Date().getTime()
124
+ const today = new Date()
125
+ const formattedDate = formatDate(newDate)
126
+
127
+ const startDate = formattedDate.getTime()
128
+ const endDate = today.getTime()
126
129
  const elapsedTime = endDate - startDate
127
- let elapsedTimeString = `${Math.round(elapsedTime / (365.25 * 24 * 60 * 60 * 1000))} years ago`; // 730+ days
128
-
129
- const MILLISECONDS_IN_A_MONTH = 30.44 * 24 * 60 * 60 * 1000
130
-
131
- const elapsedTimeData = [
132
- { min: 0, max: 44999, value: "a few seconds ago" }, // 0-44 seconds
133
- { min: 45000, max: 89999, value: "a minute ago" }, // 45-89 seconds
134
- { min: 90000, max: 2649999, value: `${Math.round(elapsedTime / 60000)} minutes ago`}, // 90s-44 minutes
135
- { min: 2650000, max: 7299999, value: "an hour ago" }, // 45-120 minutes
136
- { min: 7300000, max: 75699999, value: `${Math.round(elapsedTime / 3600000)} hours ago`}, // 2-21 hours
137
- { min: 75700000, max: 172899999, value: "a day ago" }, // 22-48 hours
138
- { min: 172900000, max: 2169999999, value: `${Math.round(elapsedTime / 86400000)} days ago`}, // 2-25 days
139
- { min: 2170000000, max: 5184999999, value: "a month ago"}, // 26-60 days
140
- { min: 5185000000, max: 27561699999, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_MONTH)} months ago`}, // 60-319 days
141
- { min: 27561700000, max: 63072999999, value: "a year ago"}, // 320-730 days
142
- ];
143
-
144
- for (const timeDate of elapsedTimeData) {
145
- if (elapsedTime >= timeDate.min && elapsedTime <= timeDate.max) {
146
- elapsedTimeString = timeDate.value;
147
- break;
130
+
131
+ // For years/months, don't use elapsedTime due to rounding
132
+ const differenceInYears = today.getFullYear() - formattedDate.getFullYear()
133
+ const differenceInMonths = () => {
134
+ let months = differenceInYears * 12
135
+ months -= formattedDate.getMonth()
136
+ months += today.getMonth()
137
+ return months
138
+ }
139
+
140
+ const FORTY_FIVE_SECONDS = 45000
141
+ const NINETY_SECONDS = 90000
142
+
143
+ const FORTY_FIVE_MINUTES = 2670000
144
+ const NINETY_MINUTES = 5400000
145
+
146
+ const TWENTY_TWO_HOURS = 77400000
147
+ const THIRTY_SIX_HOURS = 129600000
148
+
149
+ const TWENTY_SIX_DAYS = 2203200000
150
+ const FORTY_FIVE_DAYS = 3888000000
151
+
152
+ const TEN_AND_A_HALF_MONTHS = 27560000000
153
+
154
+ const MILLISECONDS_IN_A_MINUTE = 60000
155
+ const MILLISECONDS_IN_A_HOUR = 3600000
156
+ const MILLISECONDS_IN_A_DAY = 86400000
157
+
158
+ let elapsedTimeString = differenceInYears === 1 ? `${differenceInYears} year ago` : `${differenceInYears} years ago` // 320 days to 1+ year: "x year(s) ago"
159
+
160
+ // Inspiration: https://momentjs.com/docs/#/displaying/fromnow/
161
+ const intervals = [
162
+ { min: 0, max: FORTY_FIVE_SECONDS, value: "a few seconds ago" }, // 0-44.99 seconds
163
+ { min: FORTY_FIVE_SECONDS, max: NINETY_SECONDS, value: "a minute ago" }, // 45-89.99 seconds
164
+ { min: NINETY_SECONDS, max: FORTY_FIVE_MINUTES, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_MINUTE)} minutes ago` }, // 90s-44.49 minutes: "2 minutes ago ... 44 minutes ago"
165
+ { min: FORTY_FIVE_MINUTES, max: NINETY_MINUTES, value: "an hour ago" }, // 44.5-89.99 minutes
166
+ { min: NINETY_MINUTES, max: TWENTY_TWO_HOURS, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_HOUR)} hours ago` }, // 90m-21.49 hours: "2 hours ago ... 21 hours ago"
167
+ { min: TWENTY_TWO_HOURS, max: THIRTY_SIX_HOURS, value: "a day ago" }, // 21.5-35.99 hours
168
+ { min: THIRTY_SIX_HOURS, max: TWENTY_SIX_DAYS, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_DAY)} days ago` }, // 36h-25.49 days: "2 days ago ... 25 days ago"
169
+ { min: TWENTY_SIX_DAYS, max: FORTY_FIVE_DAYS, value: "a month ago" }, // 25.5-44.99 days
170
+ { min: FORTY_FIVE_DAYS, max: TEN_AND_A_HALF_MONTHS, value: `${differenceInMonths()} months ago` }, // 45 days to 319 days: "2 months ago ... 10 months ago"
171
+ ]
172
+
173
+ for (const interval of intervals) {
174
+ const { min, max, value } = interval
175
+
176
+ if (elapsedTime >= min && elapsedTime < max) {
177
+ elapsedTimeString = value
178
+ break
148
179
  }
149
180
  }
150
181
 
@@ -4,7 +4,7 @@ module Playbook
4
4
  module PbPassphrase
5
5
  class Passphrase < Playbook::KitBase
6
6
  prop :confirmation, type: Playbook::Props::Boolean, default: false
7
- prop :input_props, type: Playbook::Props::Hash, default: {}
7
+ prop :input_props, type: Playbook::Props::HashProp, default: {}
8
8
  prop :label
9
9
  prop :show_tips_below, type: Playbook::Props::Enum,
10
10
  values: %w[always xs sm md lg xl],
@@ -11,7 +11,7 @@ module Playbook
11
11
  default: false
12
12
  prop :error, type: Playbook::Props::Boolean,
13
13
  default: false
14
- prop :input_options, type: Playbook::Props::Hash,
14
+ prop :input_options, type: Playbook::Props::HashProp,
15
15
  default: {}
16
16
  prop :name, type: Playbook::Props::String,
17
17
  default: "radio_name"
@@ -6,7 +6,7 @@ require "action_view"
6
6
  module Playbook
7
7
  module PbSelect
8
8
  class Select < Playbook::KitBase
9
- prop :attributes, type: Playbook::Props::Hash,
9
+ prop :attributes, type: Playbook::Props::HashProp,
10
10
  default: {}
11
11
  prop :blank_selection
12
12
  prop :compact, type: Playbook::Props::Boolean, default: false
@@ -15,7 +15,7 @@ module Playbook
15
15
  default: true
16
16
  prop :input_id, type: Playbook::Props::String
17
17
 
18
- prop :input_options, type: Playbook::Props::Hash,
18
+ prop :input_options, type: Playbook::Props::HashProp,
19
19
  default: {}
20
20
  prop :name
21
21
  prop :text
@@ -23,7 +23,7 @@ module Playbook
23
23
  default: false
24
24
  prop :value
25
25
 
26
- prop :input_options, type: Playbook::Props::Hash,
26
+ prop :input_options, type: Playbook::Props::HashProp,
27
27
  default: {}
28
28
 
29
29
  def classname
@@ -21,7 +21,7 @@ module Playbook
21
21
  default: false
22
22
  prop :value
23
23
 
24
- prop :input_options, type: Playbook::Props::Hash,
24
+ prop :input_options, type: Playbook::Props::HashProp,
25
25
  default: {}
26
26
 
27
27
  # Conditional rendering for input field
@@ -12,7 +12,7 @@ module Playbook
12
12
  prop :variant, type: Playbook::Props::Enum,
13
13
  values: %w[radio checkbox],
14
14
  default: "radio"
15
- prop :input_options, type: Playbook::Props::Hash,
15
+ prop :input_options, type: Playbook::Props::HashProp,
16
16
  default: {}
17
17
 
18
18
  def classname
@@ -10,7 +10,7 @@ module Playbook
10
10
  prop :type, type: Playbook::Props::Enum,
11
11
  values: %w[user retail inbound outbound prospecting events referral],
12
12
  default: "inbound"
13
- prop :user, type: Playbook::Props::Hash, default: {}
13
+ prop :user, type: Playbook::Props::HashProp, default: {}
14
14
 
15
15
  def type_text
16
16
  if type == "user" || (type == "referral" && user.present?)
@@ -28,7 +28,7 @@ const TableOneAction = (props) => {
28
28
  <Button
29
29
  onClick={() => alert('button clicked!')}
30
30
  paddingLeft="none"
31
- text="Tetriary Action"
31
+ text="Tertiary Action"
32
32
  variant="link"
33
33
  {...props}
34
34
  />
@@ -49,7 +49,7 @@ const TableOneAction = (props) => {
49
49
  <Button
50
50
  onClick={() => alert('button clicked!')}
51
51
  paddingLeft="none"
52
- text="Tetriary Action"
52
+ text="Tertiary Action"
53
53
  variant="link"
54
54
  {...props}
55
55
  />
@@ -70,7 +70,7 @@ const TableOneAction = (props) => {
70
70
  <Button
71
71
  onClick={() => alert('button clicked!')}
72
72
  paddingLeft="none"
73
- text="Tetriary Action"
73
+ text="Tertiary Action"
74
74
  variant="link"
75
75
  {...props}
76
76
  />
@@ -11,7 +11,7 @@ module Playbook
11
11
  prop :error
12
12
  prop :inline, type: Playbook::Props::Boolean,
13
13
  default: false
14
- prop :input_options, type: Playbook::Props::Hash,
14
+ prop :input_options, type: Playbook::Props::HashProp,
15
15
  default: {}
16
16
  prop :label
17
17
  prop :name
@@ -19,7 +19,7 @@ module Playbook
19
19
  prop :required, type: Playbook::Props::Boolean,
20
20
  default: false
21
21
  prop :type, default: "text"
22
- prop :validation, type: Playbook::Props::Hash,
22
+ prop :validation, type: Playbook::Props::HashProp,
23
23
  default: {}
24
24
  prop :value
25
25
  prop :add_on, type: Playbook::Props::NestedProps,
@@ -5,7 +5,6 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
5
5
  import { globalProps } from '../utilities/globalProps'
6
6
  import DateTime from '../pb_kit/dateTime';
7
7
 
8
-
9
8
  import Caption from '../pb_caption/_caption'
10
9
 
11
10
  type TimestampProps = {
@@ -22,6 +21,7 @@ type TimestampProps = {
22
21
  showUser?: boolean,
23
22
  hideUpdated?: boolean,
24
23
  showTimezone?: boolean,
24
+ unstyled?: boolean,
25
25
  variant?: "default" | "elapsed" | "updated"
26
26
  }
27
27
 
@@ -39,6 +39,7 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
39
39
  showUser = false,
40
40
  hideUpdated = false,
41
41
  showTimezone = false,
42
+ unstyled = false,
42
43
  variant = 'default',
43
44
  } = props
44
45
 
@@ -85,7 +86,7 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
85
86
  return `${updatedText} ${userDisplay} ${DateTime.fromNow(timestamp)}`
86
87
  }
87
88
 
88
- const captionText = () => {
89
+ const timestampText = () => {
89
90
  switch (variant) {
90
91
  case 'updated':
91
92
  return formatUpdatedString()
@@ -103,11 +104,17 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
103
104
  className={classes}
104
105
  >
105
106
  <div className="pb_timestamp_kit">
106
- <Caption
107
- dark={dark}
108
- size="xs"
109
- text={captionText()}
110
- />
107
+ {unstyled ? (
108
+ <div>
109
+ {timestampText()}
110
+ </div>
111
+ ) : (
112
+ <Caption
113
+ dark={dark}
114
+ size="xs"
115
+ text={timestampText()}
116
+ />
117
+ )}
111
118
  </div>
112
119
  </div>
113
120
  )
@@ -0,0 +1,21 @@
1
+ <%= pb_rails("caption", props: { size: "xs", text: "Basic unstyled example" }) %>
2
+
3
+ <%= pb_rails("timestamp", props: {
4
+ timestamp: DateTime.now,
5
+ show_date: true,
6
+ align: "left",
7
+ unstyled: true,
8
+ }) %>
9
+
10
+ <br />
11
+
12
+ <%= pb_rails("caption", props: { size: "xs", text: "Example with wrapping typography kit" }) %>
13
+
14
+ <%= pb_rails("title", props: { size: 1 }) do %>
15
+ <%= pb_rails("timestamp", props: {
16
+ timestamp: DateTime.now,
17
+ show_date: true,
18
+ align: "left",
19
+ unstyled: true,
20
+ }) %>
21
+ <% end %>
@@ -0,0 +1,36 @@
1
+ import React from 'react'
2
+ import { Caption, Timestamp, Title } from '../../'
3
+
4
+ const TimestampUnstyled = (props) => {
5
+ return (
6
+ <>
7
+ <Caption size="xs"
8
+ text="Basic unstyled example"
9
+ />
10
+ <Timestamp
11
+ align="left"
12
+ showDate
13
+ timestamp={new Date()}
14
+ unstyled
15
+ {...props}
16
+ />
17
+
18
+ <br />
19
+
20
+ <Caption size="xs"
21
+ text="Example with wrapping typography kit"
22
+ />
23
+ <Title size={1}>
24
+ <Timestamp
25
+ align="left"
26
+ showDate
27
+ timestamp={new Date()}
28
+ unstyled
29
+ {...props}
30
+ />
31
+ </Title>
32
+ </>
33
+ )
34
+ }
35
+
36
+ export default TimestampUnstyled
@@ -0,0 +1 @@
1
+ For alternative typography styles, you can pass a boolean prop called `unstyled` to the `Timestamp` kit and wrap it in any of our typography kits (`Title`, `Body`, etc.). This will allow the `Timestamp` kit to inherit any of our typography styles.
@@ -6,6 +6,7 @@ examples:
6
6
  - timestamp_timezones: Timezones
7
7
  - timestamp_updated: Last Updated by
8
8
  - timestamp_elapsed: Time Ago
9
+ - timestamp_unstyled: Unstyled
9
10
 
10
11
  react:
11
12
  - timestamp_default: Default
@@ -13,7 +14,8 @@ examples:
13
14
  - timestamp_timezones: Timezones
14
15
  - timestamp_updated: Last Updated by
15
16
  - timestamp_elapsed: Time Ago
16
-
17
+ - timestamp_unstyled: Unstyled
18
+
17
19
  swift:
18
20
  - timestamp_default_swift: Default
19
21
  - timestamp_align_swift: Alignments
@@ -3,3 +3,4 @@ export { default as TimestampAlign } from './_timestamp_align.jsx'
3
3
  export { default as TimestampTimezones } from './_timestamp_timezones.jsx'
4
4
  export { default as TimestampUpdated } from './_timestamp_updated.jsx'
5
5
  export { default as TimestampElapsed } from './_timestamp_elapsed.jsx'
6
+ export { default as TimestampUnstyled } from './_timestamp_unstyled.jsx'
@@ -4,5 +4,9 @@
4
4
  data: object.data,
5
5
  class: object.classname) do %>
6
6
 
7
- <%= pb_rails("caption", props: { text: object.caption_text, size: 'xs', dark: object.dark }) %>
7
+ <% if object.unstyled %>
8
+ <div><%= object.timestamp_text %></div>
9
+ <% else %>
10
+ <%= pb_rails("caption", props: { text: object.timestamp_text, size: 'xs', dark: object.dark }) %>
11
+ <% end %>
8
12
  <% end %>
@@ -21,6 +21,8 @@ module Playbook
21
21
  prop :show_user, type: Playbook::Props::Boolean,
22
22
  default: false
23
23
  prop :timezone, default: "America/New_York"
24
+ prop :unstyled, type: Playbook::Props::Boolean,
25
+ default: false
24
26
  prop :variant, type: Playbook::Props::Enum,
25
27
  values: %w[default elapsed updated],
26
28
  default: "default"
@@ -29,7 +31,7 @@ module Playbook
29
31
  generate_classname("pb_timestamp_kit", variant_class, align)
30
32
  end
31
33
 
32
- def caption_text
34
+ def timestamp_text
33
35
  case variant
34
36
  when "updated"
35
37
  format_updated_string
@@ -27,10 +27,6 @@
27
27
  @include title_colors;
28
28
  }
29
29
 
30
- &.dark {
31
- @include pb_title_dark;
32
- }
33
-
34
30
  &[class*=_thin] {
35
31
  @include pb_title_thin;
36
32
  }
@@ -56,4 +52,7 @@
56
52
  }
57
53
  }
58
54
  }
55
+ &.dark {
56
+ @include pb_title_dark;
57
+ }
59
58
  }
@@ -5,7 +5,7 @@ require "action_view"
5
5
  module Playbook
6
6
  module PbToggle
7
7
  class Toggle < Playbook::KitBase
8
- prop :input_options, type: Playbook::Props::Hash,
8
+ prop :input_options, type: Playbook::Props::HashProp,
9
9
  default: {}
10
10
 
11
11
  prop :checked, type: Playbook::Props::Boolean,
@@ -19,7 +19,7 @@ module Playbook
19
19
  prop :name
20
20
  prop :options, type: Playbook::Props::HashArray,
21
21
  default: []
22
- prop :input_options, type: Playbook::Props::Hash,
22
+ prop :input_options, type: Playbook::Props::HashProp,
23
23
  default: {}
24
24
 
25
25
  prop :is_multi, type: Playbook::Props::Boolean,
@@ -4,7 +4,7 @@ $space_sm: 16px !default;
4
4
  $space_md: 24px !default;
5
5
  $space_lg: 32px !default;
6
6
  $space_xl: 40px !default;
7
- $spaces:(
7
+ $spaces: (
8
8
  space_xxs: $space_xxs,
9
9
  space_xs: $space_xs,
10
10
  space_sm: $space_sm,
@@ -0,0 +1,18 @@
1
+ $text_align_start: start !default;
2
+ $text_align_end: end !default;
3
+ $text_align_left: left !default;
4
+ $text_align_right: right !default;
5
+ $text_align_center: center !default;
6
+ $text_align_justify: justify !default;
7
+ $text_align_justify_all: justify-all !default;
8
+ $text_align_match_parent: match-parent !default;
9
+ $text_align: (
10
+ start: $text_align_start,
11
+ end: $text_align_end,
12
+ left: $text_align_left,
13
+ right: $text_align_right,
14
+ center: $text_align_center,
15
+ justify: $text_align_justify,
16
+ justify_all: $text_align_justify_all,
17
+ match_parent: $text_align_match_parent
18
+ );
@@ -6,6 +6,10 @@
6
6
  background-color: $color !important;
7
7
  transition: background-color $transition-speed ease;
8
8
  }
9
+ .hover_color_#{$name}:hover {
10
+ color: $color !important;
11
+ transition: color $transition-speed ease;
12
+ }
9
13
  }
10
14
  }
11
15
 
@@ -23,3 +23,7 @@
23
23
  .max_width_xl {
24
24
  max-width: 1140px;
25
25
  }
26
+
27
+ .max_width_xxl {
28
+ max-width: 1320px;
29
+ }