playbook_ui 9.4.0.pre.alpha2 → 9.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx +2 -1
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +3 -2
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.jsx +67 -9
- data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx +11 -45
- data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb +6 -17
- data/app/pb_kits/playbook/pb_date_stacked/date_stacked.rb +5 -12
- data/app/pb_kits/playbook/pb_date_stacked/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_date_stacked/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.jsx +16 -32
- data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss +4 -23
- data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb +8 -12
- data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.rb +2 -9
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.html.erb +1 -8
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx +1 -19
- data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +1 -1
- data/app/pb_kits/playbook/pb_flex/_flex.jsx +1 -6
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx +3 -7
- data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb +2 -2
- data/lib/playbook/version.rb +1 -1
- metadata +4 -7
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.html.erb +0 -5
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.jsx +0 -38
- data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js +0 -35
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 1c56b74cd258f0a3479d6f6acdaebe1792f3e5a30bbca45c3f2b21493ed2b5f4
|
4
|
+
data.tar.gz: 151e4c6b8f15c191ca1358de007a3ba373fb7da32d8d1f3afd5d0743a86ae364
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: a079d327c1a318bb826104f242c104286dd0d996e8adfe325ca719488d790fd73ef71d6ab302c835a368852e5b993f3831480faf0b609aeccdd99e37a9aaee4b
|
7
|
+
data.tar.gz: 3cf8ead3bf3712caaf275ef4559207108d655315d2c5c43505aba4a0203e91c788ce50cfe51c36d85a0cacf2c364ad65e593b6607a8003fcdd8da48aabd0396f
|
@@ -53,9 +53,10 @@ const Checkbox = (props: CheckboxProps) => {
|
|
53
53
|
|
54
54
|
useEffect(() => {
|
55
55
|
if (checkRef.current) {
|
56
|
+
checkRef.current.checked = checked
|
56
57
|
checkRef.current.indeterminate = indeterminate
|
57
58
|
}
|
58
|
-
}, [indeterminate])
|
59
|
+
}, [indeterminate, checked])
|
59
60
|
|
60
61
|
return (
|
61
62
|
<label
|
@@ -4,12 +4,13 @@
|
|
4
4
|
$transition: $transition_cubic;
|
5
5
|
|
6
6
|
[class^=pb_checkbox_kit] {
|
7
|
-
display: inline-flex;
|
8
7
|
cursor: pointer;
|
8
|
+
display: inline-flex;
|
9
|
+
vertical-align: middle;
|
9
10
|
.pb_checkbox_label {
|
10
|
-
padding-left: $space_xs;
|
11
11
|
cursor: pointer;
|
12
12
|
font-size: $text_lt_default;
|
13
|
+
padding-left: $space_xs;
|
13
14
|
user-select: none;
|
14
15
|
}
|
15
16
|
|
@@ -1,15 +1,73 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Checkbox } from '../..'
|
1
|
+
import React, { useState } from 'react'
|
2
|
+
import { Checkbox, Table } from '../..'
|
3
3
|
|
4
4
|
const CheckboxIndeterminate = (props) => {
|
5
|
+
const [checkboxes, setCheckboxes] = useState([
|
6
|
+
{ name: 'Coffee', checked: false },
|
7
|
+
{ name: 'Ice Cream', checked: false },
|
8
|
+
{ name: 'Chocolate', checked: true },
|
9
|
+
])
|
10
|
+
|
11
|
+
const isAllChecked = !checkboxes.find((checkbox) => !checkbox.checked)
|
12
|
+
const isNoneChecked = !checkboxes.find((checkbox) => checkbox.checked)
|
13
|
+
|
14
|
+
const processCheckboxes = (checked) =>
|
15
|
+
checkboxes.slice(0).map((checkbox) => {
|
16
|
+
checkbox.checked = checked
|
17
|
+
return checkbox
|
18
|
+
})
|
19
|
+
|
20
|
+
const onToggleAll = () => {
|
21
|
+
setCheckboxes(
|
22
|
+
isNoneChecked ? processCheckboxes(true) : processCheckboxes(false)
|
23
|
+
)
|
24
|
+
}
|
25
|
+
|
26
|
+
const updateCheckboxes = (checkbox, index) => {
|
27
|
+
const newCheckboxes = checkboxes.slice(0)
|
28
|
+
newCheckboxes[index].checked = !checkbox.checked
|
29
|
+
setCheckboxes(newCheckboxes)
|
30
|
+
}
|
31
|
+
|
5
32
|
return (
|
6
|
-
<
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
33
|
+
<Table
|
34
|
+
container={false}
|
35
|
+
size="md"
|
36
|
+
>
|
37
|
+
<thead>
|
38
|
+
<tr>
|
39
|
+
<th>
|
40
|
+
<Checkbox
|
41
|
+
checked={isAllChecked}
|
42
|
+
indeterminate={!isAllChecked && !isNoneChecked}
|
43
|
+
name="checkbox-name"
|
44
|
+
onChange={onToggleAll}
|
45
|
+
text={isNoneChecked ? 'Check All' : 'Uncheck All'}
|
46
|
+
value="check-box value"
|
47
|
+
{...props}
|
48
|
+
/>
|
49
|
+
</th>
|
50
|
+
</tr>
|
51
|
+
</thead>
|
52
|
+
<tbody>
|
53
|
+
{checkboxes.map((checkbox, index) => (
|
54
|
+
<tr key={index}>
|
55
|
+
<td>
|
56
|
+
<Checkbox
|
57
|
+
checked={checkbox.checked}
|
58
|
+
name={checkbox.name}
|
59
|
+
onChange={() => {
|
60
|
+
updateCheckboxes(checkbox, index)
|
61
|
+
}}
|
62
|
+
text={checkbox.name}
|
63
|
+
value="check-box value"
|
64
|
+
{...props}
|
65
|
+
/>
|
66
|
+
</td>
|
67
|
+
</tr>
|
68
|
+
))}
|
69
|
+
</tbody>
|
70
|
+
</Table>
|
13
71
|
)
|
14
72
|
}
|
15
73
|
|
@@ -9,7 +9,6 @@ import { globalProps } from '../utilities/globalProps.js'
|
|
9
9
|
|
10
10
|
type DateStackedProps = {
|
11
11
|
align?: "left" | "center" | "right",
|
12
|
-
bold?: boolean,
|
13
12
|
className?: string | array<string>,
|
14
13
|
dark?: boolean,
|
15
14
|
data?: string,
|
@@ -27,7 +26,6 @@ const sizes = {
|
|
27
26
|
const DateStacked = (props: DateStackedProps) => {
|
28
27
|
const {
|
29
28
|
align = 'left',
|
30
|
-
bold = false,
|
31
29
|
reverse = false,
|
32
30
|
className,
|
33
31
|
dark = false,
|
@@ -48,51 +46,19 @@ const DateStacked = (props: DateStackedProps) => {
|
|
48
46
|
const inputYear = dateTimestamp.toYear().toString()
|
49
47
|
|
50
48
|
return (
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
/>
|
63
|
-
</div>
|
64
|
-
<If condition={currentYear != inputYear}>
|
65
|
-
<Caption size="xs">{inputYear}</Caption>
|
66
|
-
</If>
|
67
|
-
</div>
|
68
|
-
<Else />
|
69
|
-
<>
|
70
|
-
<div className={classes}>
|
71
|
-
<div className="pb_date_stacked_day_month">
|
72
|
-
|
73
|
-
<Title
|
74
|
-
bold
|
75
|
-
dark={dark}
|
76
|
-
size="4"
|
77
|
-
text={dateTimestamp.toMonth()}
|
78
|
-
/>
|
79
|
-
<Title
|
80
|
-
bold
|
81
|
-
dark={dark}
|
82
|
-
size="4"
|
83
|
-
text={dateTimestamp.toDay()}
|
84
|
-
/>
|
85
|
-
<If condition={currentYear != inputYear}>
|
86
|
-
<Title size="4">{inputYear}</Title>
|
87
|
-
</If>
|
88
|
-
</div>
|
89
|
-
|
90
|
-
</div>
|
91
|
-
|
92
|
-
</>
|
49
|
+
<div className={classes}>
|
50
|
+
<div className="pb_date_stacked_day_month">
|
51
|
+
<Caption text={dateTimestamp.toMonth().toUpperCase()} />
|
52
|
+
<Title
|
53
|
+
dark={dark}
|
54
|
+
size={sizes[size]}
|
55
|
+
text={dateTimestamp.toDay()}
|
56
|
+
/>
|
57
|
+
</div>
|
58
|
+
<If condition={currentYear != inputYear}>
|
59
|
+
<Caption size="xs">{inputYear}</Caption>
|
93
60
|
</If>
|
94
61
|
</div>
|
95
|
-
|
96
62
|
)
|
97
63
|
}
|
98
64
|
|
@@ -3,22 +3,11 @@
|
|
3
3
|
data: object.data,
|
4
4
|
class: object.classname) do %>
|
5
5
|
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
</div>
|
13
|
-
|
14
|
-
<% else %>
|
15
|
-
<div class="pb_date_stacked_day_month">
|
16
|
-
<%= pb_rails("title", props: { text: object.month, size: 4 }) %>
|
17
|
-
<%= pb_rails("title", props: { text: object.day, size: 4 }) do %><% end %>
|
18
|
-
<%= pb_rails("title", props: { text: object.year, size:4 }) %>
|
19
|
-
|
20
|
-
</div>
|
21
|
-
|
22
|
-
<% end %>
|
6
|
+
<div class="pb_date_stacked_day_month">
|
7
|
+
<%= pb_rails("caption", props: { text: object.month }) %>
|
8
|
+
<%= pb_rails("title", props: { text: object.day , size: object.title_size }) do %>
|
9
|
+
<% end %>
|
10
|
+
</div>
|
11
|
+
<%= pb_rails("caption", props: { text: object.year, size:"xs" }) %>
|
23
12
|
|
24
13
|
<% end %>
|
@@ -14,11 +14,9 @@ module Playbook
|
|
14
14
|
default: false
|
15
15
|
prop :dark, type: Playbook::Props::Boolean,
|
16
16
|
default: false
|
17
|
-
prop :bold, type: Playbook::Props::Boolean,
|
18
|
-
default: false
|
19
17
|
|
20
18
|
def classname
|
21
|
-
generate_classname("pb_date_stacked_kit", align, size,
|
19
|
+
generate_classname("pb_date_stacked_kit", align, size, reverse_class, dark_class)
|
22
20
|
end
|
23
21
|
|
24
22
|
def title_size
|
@@ -33,7 +31,10 @@ module Playbook
|
|
33
31
|
end
|
34
32
|
|
35
33
|
def month
|
36
|
-
|
34
|
+
month = Playbook::PbKit::PbDateTime.new(date)
|
35
|
+
content_tag(:time, datetime: month.to_iso) do
|
36
|
+
"#{month.to_month}"
|
37
|
+
end
|
37
38
|
end
|
38
39
|
|
39
40
|
def year
|
@@ -47,16 +48,8 @@ module Playbook
|
|
47
48
|
end
|
48
49
|
end
|
49
50
|
|
50
|
-
def bold_class
|
51
|
-
bold ? "bold" : nil
|
52
|
-
end
|
53
|
-
|
54
51
|
private
|
55
52
|
|
56
|
-
def pb_date_time
|
57
|
-
Playbook::PbKit::PbDateTime.new(date)
|
58
|
-
end
|
59
|
-
|
60
53
|
def reverse_class
|
61
54
|
reverse ? "reverse" : nil
|
62
55
|
end
|
@@ -6,12 +6,10 @@ examples:
|
|
6
6
|
- date_stacked_reverse: Day & Month Reverse
|
7
7
|
- date_stacked_sizes: Sizes
|
8
8
|
- date_stacked_align: Alignment
|
9
|
-
- date_stacked_bold: Bold
|
10
|
-
|
11
9
|
|
12
10
|
react:
|
13
11
|
- date_stacked_default: Default
|
14
12
|
- date_stacked_not_current_year: Not Current Year
|
15
13
|
- date_stacked_reverse: Day & Month Reverse
|
16
14
|
- date_stacked_sizes: Sizes
|
17
|
-
-
|
15
|
+
- date_stacked_align: Alignment
|
@@ -1,4 +1,3 @@
|
|
1
|
-
export { default as DateStackedBold } from './_date_stacked_bold.jsx'
|
2
1
|
export { default as DateStackedDefault } from './_date_stacked_default.jsx'
|
3
2
|
export { default as DateStackedNotCurrentYear } from './_date_stacked_not_current_year.jsx'
|
4
3
|
export { default as DateStackedReverse } from './_date_stacked_reverse.jsx'
|
@@ -1,59 +1,43 @@
|
|
1
|
-
|
2
1
|
/* @flow */
|
3
2
|
|
4
3
|
import React from 'react'
|
5
|
-
import {
|
6
|
-
import {
|
7
|
-
|
8
|
-
import { DateStacked, Flex, FlexItem, SectionSeparator, TimeStacked } from '../'
|
4
|
+
import { DateStacked, Flex, FlexItem, TimeStacked } from '../'
|
5
|
+
import { buildDataProps } from '../utilities/props'
|
6
|
+
import { globalProps } from '../utilities/globalProps.js'
|
9
7
|
|
10
8
|
type DateTimeStackedProps = {
|
9
|
+
data?: string,
|
11
10
|
id?: string,
|
12
|
-
date:
|
13
|
-
datetime: string,
|
11
|
+
date: date,
|
14
12
|
dark: boolean,
|
15
|
-
timeZone?: string,
|
16
13
|
}
|
17
14
|
|
18
15
|
const DateTimeStacked = (props: DateTimeStackedProps) => {
|
19
|
-
|
20
|
-
|
21
|
-
const {
|
22
|
-
date,
|
23
|
-
datetime,
|
24
|
-
dark,
|
25
|
-
timeZone = 'America/New_York',
|
26
|
-
} = props
|
27
|
-
|
28
|
-
const classes = buildCss('pb_date_time_stacked_kit', globalProps(props))
|
16
|
+
const { date, data = {}, dark } = props,
|
17
|
+
dataProps = buildDataProps(data)
|
29
18
|
|
30
19
|
return (
|
31
20
|
<Flex
|
32
|
-
|
33
|
-
|
34
|
-
|
21
|
+
className={globalProps(props)}
|
22
|
+
orientation="row"
|
23
|
+
vertical="center"
|
24
|
+
{...dataProps}
|
35
25
|
>
|
36
26
|
<FlexItem>
|
37
27
|
<DateStacked
|
38
28
|
align="right"
|
39
|
-
bold
|
40
29
|
dark={dark}
|
41
|
-
date={date
|
42
|
-
|
30
|
+
date={date}
|
31
|
+
reverse
|
32
|
+
size="sm"
|
43
33
|
/>
|
44
34
|
</FlexItem>
|
45
|
-
|
46
|
-
<SectionSeparator
|
47
|
-
className="date-time-padding"
|
48
|
-
orientation="vertical"
|
49
|
-
/>
|
50
35
|
<FlexItem>
|
51
36
|
<TimeStacked
|
52
|
-
className=
|
37
|
+
className="pb_date_time_stacked_kit"
|
53
38
|
dark={dark}
|
54
|
-
date={date || datetime}
|
55
39
|
tag="caption"
|
56
|
-
|
40
|
+
time={date}
|
57
41
|
/>
|
58
42
|
</FlexItem>
|
59
43
|
</Flex>
|
@@ -1,25 +1,6 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
[class^=padding_month] {
|
4
|
-
padding-bottom: ($space_xs + 2) !important;
|
5
|
-
}
|
6
|
-
|
7
|
-
[class^=padding_day] {
|
8
|
-
padding-bottom: ($space_xs + 2) !important;
|
9
|
-
}
|
10
|
-
|
11
|
-
&[class*=_dark] {
|
12
|
-
& > * [class^=pb_title_kit] {
|
13
|
-
color: $text_dk_default;
|
14
|
-
}
|
15
|
-
& > * [class^=pb_caption_kit] {
|
16
|
-
color: $text_dk_light;
|
17
|
-
}
|
18
|
-
}
|
1
|
+
@import "../pb_title/title";
|
2
|
+
@import "../pb_body/body";
|
19
3
|
|
4
|
+
.pb_date_time_stacked_kit {
|
5
|
+
padding-left: $space-xs;
|
20
6
|
}
|
21
|
-
.date-time-padding {
|
22
|
-
padding-right: ($space_xs / 2);
|
23
|
-
padding-left: ($space_xs / 2);
|
24
|
-
}
|
25
|
-
|
@@ -1,17 +1,13 @@
|
|
1
1
|
<%= content_tag(:div,
|
2
2
|
id: object.id,
|
3
3
|
data: object.data,
|
4
|
-
class: object.classname
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
<%= pb_rails("body", props: {classname: "flex-item"}) do %>
|
9
|
-
<%= pb_rails("date_stacked", props: { date: object.date_time_value, size: "sm", align: "right", bold: true, dark: object.dark }) %>
|
4
|
+
class: object.classname) do %>
|
5
|
+
<%= pb_rails("flex", props: { orientation: "row", vertical: "center" }) do %>
|
6
|
+
<%= pb_rails("flex/flex_item") do %>
|
7
|
+
<%= pb_rails("date_stacked", props: { align: "right", date: object.date, reverse: true, size: "sm", dark: object.dark }) %>
|
10
8
|
<% end %>
|
11
|
-
<%= pb_rails("
|
12
|
-
|
13
|
-
<%= pb_rails("time_stacked", props: { time: object.date_time_value, dark: object.dark, timezone: object.timezone }) %>
|
9
|
+
<%= pb_rails("flex/flex_item") do %>
|
10
|
+
<%= pb_rails("time_stacked", props: { classname: "pb_date_time_stacked_kit", time: object.date, tag: "caption" }) %>
|
14
11
|
<% end %>
|
15
|
-
|
16
|
-
|
17
|
-
<% end %>
|
12
|
+
<% end %>
|
13
|
+
<% end %>
|
@@ -3,17 +3,10 @@
|
|
3
3
|
module Playbook
|
4
4
|
module PbDateTimeStacked
|
5
5
|
class DateTimeStacked < Playbook::KitBase
|
6
|
-
prop :date,
|
7
|
-
prop :date_time, type: Playbook::Props::Date,
|
6
|
+
prop :date, type: Playbook::Props::Date,
|
8
7
|
default: ::DateTime.current
|
9
8
|
prop :dark, type: Playbook::Props::Boolean,
|
10
9
|
default: false
|
11
|
-
prop :timezone, type: Playbook::Props::String,
|
12
|
-
default: "America/New_York"
|
13
|
-
|
14
|
-
def date_time_value
|
15
|
-
date || date_time
|
16
|
-
end
|
17
10
|
end
|
18
11
|
end
|
19
|
-
end
|
12
|
+
end
|
@@ -1,8 +1 @@
|
|
1
|
-
<%= pb_rails("date_time_stacked"
|
2
|
-
<br>
|
3
|
-
<%= pb_rails("date_time_stacked", props: { date_time: Date.new(2018, 03, 20) }) %>
|
4
|
-
<br>
|
5
|
-
<%= pb_rails("date_time_stacked", props: { date_time: DateTime.now, timezone: "Asia/Tokyo" }) %>
|
6
|
-
<br>
|
7
|
-
<%= pb_rails("date_time_stacked", props: { date_time: DateTime.now, timezone: "America/Denver" }) %>
|
8
|
-
|
1
|
+
<%= pb_rails("date_time_stacked") %>
|
@@ -4,28 +4,10 @@ import { DateTimeStacked } from '../../'
|
|
4
4
|
const DateTimeStackedDefault = (props) => (
|
5
5
|
<div>
|
6
6
|
<DateTimeStacked
|
7
|
-
|
7
|
+
date={new Date()}
|
8
8
|
{...props}
|
9
9
|
/>
|
10
|
-
<br />
|
11
|
-
<DateTimeStacked
|
12
|
-
datetime={new Date()}
|
13
|
-
timeZone="Asia/Tokyo"
|
14
|
-
|
15
|
-
{...props}
|
16
|
-
/>
|
17
|
-
<br />
|
18
|
-
<DateTimeStacked
|
19
|
-
datetime={new Date()}
|
20
|
-
timeZone="America/Denver"
|
21
|
-
|
22
|
-
{...props}
|
23
|
-
/>
|
24
|
-
|
25
10
|
</div>
|
26
11
|
)
|
27
12
|
|
28
13
|
export default DateTimeStackedDefault
|
29
|
-
|
30
|
-
// *Development Note* - We are reviewing this kit for a potential name change due to naming collisions when `new Date()` is used.
|
31
|
-
// To avoid this bug, please use name spacing as shown in the code examples. ie `import { Date as AliasedComponentName } from '../../'
|
@@ -2,12 +2,11 @@
|
|
2
2
|
|
3
3
|
import React from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
|
-
import { buildCss
|
5
|
+
import { buildCss } from '../utilities/props'
|
6
6
|
import { globalProps } from '../utilities/globalProps.js'
|
7
7
|
type FlexProps = {
|
8
8
|
children: array<React.ReactNode> | React.ReactNode,
|
9
9
|
className?: string,
|
10
|
-
data?: object,
|
11
10
|
horizontal?: "left" | "center" | "right" | "stretch" | "none",
|
12
11
|
justify?: "start" | "center" | "end" | "around" | "between" | "evenly" | "none",
|
13
12
|
id?: string,
|
@@ -28,7 +27,6 @@ const Flex = (props: FlexProps) => {
|
|
28
27
|
align = 'none',
|
29
28
|
children,
|
30
29
|
className,
|
31
|
-
data = {},
|
32
30
|
inline = false,
|
33
31
|
horizontal = 'left',
|
34
32
|
justify = 'none',
|
@@ -53,8 +51,6 @@ const Flex = (props: FlexProps) => {
|
|
53
51
|
const columnGapClass = columnGap !== 'none' ? `columnGap_${columnGap}` : ''
|
54
52
|
const wrapClass = wrap === true ? 'wrap' : ''
|
55
53
|
const reverseClass = reverse === true ? 'reverse' : ''
|
56
|
-
const dataProps = buildDataProps(data)
|
57
|
-
|
58
54
|
return (
|
59
55
|
<div
|
60
56
|
className={classnames(
|
@@ -74,7 +70,6 @@ const Flex = (props: FlexProps) => {
|
|
74
70
|
globalProps(props),
|
75
71
|
className
|
76
72
|
)}
|
77
|
-
{...dataProps}
|
78
73
|
>
|
79
74
|
{children}
|
80
75
|
</div>
|
@@ -38,13 +38,9 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
|
|
38
38
|
className={classes}
|
39
39
|
id={id}
|
40
40
|
>
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
<Caption text={text} />
|
45
|
-
</span>
|
46
|
-
</If>
|
47
|
-
|
41
|
+
<span>
|
42
|
+
<Caption text={text} />
|
43
|
+
</span>
|
48
44
|
</div>
|
49
45
|
)
|
50
46
|
}
|
@@ -3,10 +3,10 @@
|
|
3
3
|
data: object.data,
|
4
4
|
class: object.classname) do %>
|
5
5
|
|
6
|
-
<%= pb_rails("body", props: { color: "light",
|
6
|
+
<%= pb_rails("body", props: { color: "light", classname: "pb_time_stacked time-spacing" }) do %>
|
7
7
|
<time>
|
8
8
|
<%= object.format_time_string %>
|
9
|
-
<%= pb_rails("caption", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase,
|
9
|
+
<%= pb_rails("caption", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase, classname: "pb_time_stacked" }) %>
|
10
10
|
</time>
|
11
11
|
<% end %>
|
12
12
|
<% end %>
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 9.4.0
|
4
|
+
version: 9.4.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2021-04-
|
12
|
+
date: 2021-04-14 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -809,8 +809,6 @@ files:
|
|
809
809
|
- app/pb_kits/playbook/pb_date_stacked/date_stacked.rb
|
810
810
|
- app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.html.erb
|
811
811
|
- app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.jsx
|
812
|
-
- app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.html.erb
|
813
|
-
- app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.jsx
|
814
812
|
- app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.html.erb
|
815
813
|
- app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx
|
816
814
|
- app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.html.erb
|
@@ -840,7 +838,6 @@ files:
|
|
840
838
|
- app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss
|
841
839
|
- app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb
|
842
840
|
- app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.rb
|
843
|
-
- app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js
|
844
841
|
- app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.html.erb
|
845
842
|
- app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx
|
846
843
|
- app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml
|
@@ -2106,9 +2103,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
2106
2103
|
version: '0'
|
2107
2104
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
2108
2105
|
requirements:
|
2109
|
-
- - "
|
2106
|
+
- - ">="
|
2110
2107
|
- !ruby/object:Gem::Version
|
2111
|
-
version:
|
2108
|
+
version: '0'
|
2112
2109
|
requirements: []
|
2113
2110
|
rubyforge_project:
|
2114
2111
|
rubygems_version: 2.7.3
|
@@ -1,5 +0,0 @@
|
|
1
|
-
<%= pb_rails("date_stacked", props: { date: DateTime.now, align: "left", bold: true }) %>
|
2
|
-
<br>
|
3
|
-
<%= pb_rails("date_stacked", props: { date: Date.new(2018, 03, 20), align: "center", bold: true }) %>
|
4
|
-
<br>
|
5
|
-
<%= pb_rails("date_stacked", props: { date: DateTime.now, align: "right", bold: true }) %>
|
@@ -1,38 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import DateStacked from '../_date_stacked.jsx'
|
3
|
-
|
4
|
-
const DateStackedBold = (props) => {
|
5
|
-
return (
|
6
|
-
<div>
|
7
|
-
<DateStacked
|
8
|
-
align="left"
|
9
|
-
bold
|
10
|
-
date={new Date()}
|
11
|
-
{...props}
|
12
|
-
/>
|
13
|
-
|
14
|
-
<br />
|
15
|
-
|
16
|
-
<DateStacked
|
17
|
-
align="center"
|
18
|
-
bold
|
19
|
-
date={new Date('20 Mar 2018')}
|
20
|
-
{...props}
|
21
|
-
/>
|
22
|
-
|
23
|
-
<br />
|
24
|
-
|
25
|
-
<DateStacked
|
26
|
-
align="right"
|
27
|
-
bold
|
28
|
-
date={new Date()}
|
29
|
-
{...props}
|
30
|
-
/>
|
31
|
-
|
32
|
-
<br />
|
33
|
-
|
34
|
-
</div>
|
35
|
-
)
|
36
|
-
}
|
37
|
-
|
38
|
-
export default DateStackedBold
|
@@ -1,35 +0,0 @@
|
|
1
|
-
import { ensureAccessible, renderKit } from '../utilities/test-utils'
|
2
|
-
import { DateTimeStacked } from '../'
|
3
|
-
|
4
|
-
/* eslint-disable jsx-control-statements/jsx-jcs-no-undef */
|
5
|
-
|
6
|
-
const props = {
|
7
|
-
data: { testid: 'datetimestacked' },
|
8
|
-
datetime: new Date('Wed Mar 31 2021 12:00:00 GMT-0500'),
|
9
|
-
}
|
10
|
-
|
11
|
-
test('Kit renders date time', () => {
|
12
|
-
const kit = renderKit(DateTimeStacked, props)
|
13
|
-
expect(kit).toBeInTheDocument()
|
14
|
-
})
|
15
|
-
|
16
|
-
it('Should be accessible', async () => {
|
17
|
-
ensureAccessible(DateTimeStacked, props)
|
18
|
-
})
|
19
|
-
|
20
|
-
test('renders time in default timezone', () => {
|
21
|
-
const kit = renderKit(DateTimeStacked, props)
|
22
|
-
expect(kit).toHaveTextContent(/Mar311:00pEDT/i)
|
23
|
-
})
|
24
|
-
|
25
|
-
test('renders time in timezone', () => {
|
26
|
-
props.timeZone = 'Asia/Tokyo'
|
27
|
-
const kit = renderKit(DateTimeStacked, props)
|
28
|
-
expect(kit).toHaveTextContent(/Mar312:00aJST/i)
|
29
|
-
})
|
30
|
-
|
31
|
-
test('renders time in timezone', () => {
|
32
|
-
props.timeZone = 'America/Denver'
|
33
|
-
const kit = renderKit(DateTimeStacked, props)
|
34
|
-
expect(kit).toHaveTextContent(/Mar3111:00aMDT/i)
|
35
|
-
})
|