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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +1 -0
- data/app/pb_kits/playbook/pb_button/button.html.erb +2 -2
- data/app/pb_kits/playbook/pb_button/button.rb +3 -0
- data/app/pb_kits/playbook/pb_card/card.rb +1 -1
- data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +1 -1
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +5 -1
- data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.rb +2 -2
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +2 -2
- data/app/pb_kits/playbook/pb_file_upload/file_upload.rb +1 -1
- data/app/pb_kits/playbook/pb_kit/dateTime.ts +54 -23
- data/app/pb_kits/playbook/pb_passphrase/passphrase.rb +1 -1
- data/app/pb_kits/playbook/pb_radio/radio.rb +1 -1
- data/app/pb_kits/playbook/pb_select/select.rb +1 -1
- data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb +1 -1
- data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb +1 -1
- data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb +1 -1
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb +1 -1
- data/app/pb_kits/playbook/pb_source/source.rb +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.jsx +3 -3
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -2
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +14 -7
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.html.erb +21 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx +36 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb +5 -1
- data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +3 -1
- data/app/pb_kits/playbook/pb_title/_title.scss +3 -4
- data/app/pb_kits/playbook/pb_toggle/toggle.rb +1 -1
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +1 -1
- data/app/pb_kits/playbook/tokens/_spacing.scss +1 -1
- data/app/pb_kits/playbook/tokens/_text_align.scss +18 -0
- data/app/pb_kits/playbook/utilities/_hover.scss +4 -0
- data/app/pb_kits/playbook/utilities/_max_width.scss +4 -0
- data/app/pb_kits/playbook/utilities/_spacing.scss +92 -49
- data/app/pb_kits/playbook/utilities/_text_align.scss +3 -0
- data/app/pb_kits/playbook/utilities/globalProps.ts +30 -2
- data/dist/playbook-rails.js +5 -5
- data/lib/playbook/classnames.rb +1 -0
- data/lib/playbook/hover.rb +6 -2
- data/lib/playbook/kit_base.rb +4 -2
- data/lib/playbook/props/hash.rb +1 -1
- data/lib/playbook/spacing.rb +13 -4
- data/lib/playbook/text_align.rb +37 -0
- data/lib/playbook/version.rb +2 -2
- metadata +13 -7
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 6d6551f1772a9fb33867a19c0226859cf491c986ccb503c2c7601588582d55c3
|
4
|
+
data.tar.gz: 86d1ebafb210c29139963d232e1c52d071ca862cde8aaa283420e756fc39aaab
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 2aabad2326332a49ce487e0ab62d606c76c53bab395b3f04d3aa396342afca0ec57a941fb032da36a6eb13b1a73cff2a0e522256de643fb0bc3ea375f71a4088
|
7
|
+
data.tar.gz: 414ad28883507217cc57ed460ad78c83188d0b94d87a7ce8964409d89554af5260e5053b5ff02fbe71149bf3de1a933deff958d82d77e5192fa4db1e67813d53
|
@@ -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 %>
|
@@ -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::
|
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],
|
@@ -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
|
-
|
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::
|
9
|
+
prop :stat_change, type: Playbook::Props::HashProp,
|
10
10
|
default: {}
|
11
11
|
prop :stat_label
|
12
|
-
prop :stat_value, type: Playbook::Props::
|
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::
|
37
|
+
prop :input_aria, type: Playbook::Props::HashProp,
|
38
38
|
default: {}
|
39
|
-
prop :input_data, type: Playbook::Props::
|
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
|
@@ -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
|
125
|
-
const
|
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
|
-
|
128
|
-
|
129
|
-
const
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
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::
|
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::
|
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::
|
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
|
@@ -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::
|
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="
|
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="
|
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="
|
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::
|
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::
|
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
|
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
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
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
|
-
|
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
|
34
|
+
def timestamp_text
|
33
35
|
case variant
|
34
36
|
when "updated"
|
35
37
|
format_updated_string
|
@@ -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::
|
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::
|
22
|
+
prop :input_options, type: Playbook::Props::HashProp,
|
23
23
|
default: {}
|
24
24
|
|
25
25
|
prop :is_multi, type: Playbook::Props::Boolean,
|
@@ -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
|
+
);
|