playbook_ui 6.4.1 → 6.4.2
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/pb_date/_date.html.erb +8 -32
- data/app/pb_kits/playbook/pb_date/_date.jsx +67 -76
- data/app/pb_kits/playbook/pb_date/_date.scss +0 -25
- data/app/pb_kits/playbook/pb_date/date.rb +11 -20
- data/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb +9 -1
- data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +28 -0
- data/app/pb_kits/playbook/pb_date/docs/_description.md +0 -2
- data/app/pb_kits/playbook/pb_date/docs/example.yml +2 -6
- data/app/pb_kits/playbook/pb_date/docs/index.js +1 -3
- data/lib/playbook/version.rb +1 -1
- metadata +4 -12
- data/app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb +0 -24
- data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx +0 -32
- data/app/pb_kits/playbook/pb_date/docs/_date_default_react.jsx +0 -20
- data/app/pb_kits/playbook/pb_date/docs/_date_default_react.md +0 -3
- data/app/pb_kits/playbook/pb_date/docs/_date_timezone.html.erb +0 -51
- data/app/pb_kits/playbook/pb_date/docs/_date_timezone.md +0 -6
- data/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb +0 -27
- data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx +0 -39
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 043d8ee7ffc205305e575f5a1b2dbc33a7044509a8907c19b1fdd2496df7995c
|
4
|
+
data.tar.gz: 7c38d3f71179c5f552836a74d7bb85c84035a304d3190b90f3a5d0a9be043a46
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 6c4ba1186d30795d4dc2a85ab19fe898b9ef043d1cb42e0db2aea26df4b7a0ea34ffd3e39f7272db76deb03533777d34798c3e1f9aac0a514d4d0133d3dbac2c
|
7
|
+
data.tar.gz: f6a7e045c41272b2a13c2035fe0b2100d792ab969f2cfd968008646b2c0c1a51bcd5ee467c831a4aba06a24fdebf7c662e7845e8d0e4f41af6af6e2d67070b80
|
@@ -1,38 +1,14 @@
|
|
1
1
|
<%= content_tag(:div,
|
2
2
|
id: object.id,
|
3
3
|
data: object.data,
|
4
|
-
class: object.classname
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
}) do %>
|
13
|
-
<%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
|
14
|
-
<% end %>
|
15
|
-
<% end %>
|
16
|
-
|
17
|
-
<!-- day_of_week -->
|
18
|
-
<% if object.show_day_of_week %>
|
19
|
-
<%= pb_rails("title", props: { tag: "div", text: object.date_day_of_week, size: 4 }) %>
|
20
|
-
<%= pb_rails("body", props: {
|
21
|
-
text: "•",
|
22
|
-
color: "light",
|
23
|
-
tag: "div",
|
24
|
-
}) %>
|
25
|
-
<% end %>
|
26
|
-
|
27
|
-
<!-- month day, year -->
|
28
|
-
|
29
|
-
<%# if not current year %>
|
30
|
-
<% if object.year.to_s == DateTime.now.year.to_s %>
|
31
|
-
<%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}", size: 4 }) %>
|
32
|
-
<%# if is current year %>
|
33
|
-
<% else %>
|
34
|
-
<%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}, #{object.year}", size: 4 }) %>
|
4
|
+
class: object.classname) do %>
|
5
|
+
<% if object.size == "lg" %>
|
6
|
+
<%= pb_rails("title", props: { text: object.lg_date, size: 3 }) %>
|
7
|
+
<% elsif object.size == "sm" %>
|
8
|
+
<%= pb_rails("icon", props: { icon: "calendar", fixed_width: true }) %>
|
9
|
+
<%= pb_rails("title", props: { tag: "span", text: object.sm_date, size: 4 }) %>
|
10
|
+
<% else %>
|
11
|
+
<%= pb_rails("title", props: { text: object.xs_date, size: 4 }) %>
|
35
12
|
<% end %>
|
36
|
-
|
37
13
|
<% end %>
|
38
14
|
|
@@ -2,91 +2,82 @@
|
|
2
2
|
|
3
3
|
import React from 'react'
|
4
4
|
import DateTime from '../pb_kit/dateTime.js'
|
5
|
-
import {
|
5
|
+
import { Icon } from '../'
|
6
6
|
import classnames from 'classnames'
|
7
7
|
import { globalProps } from '../utilities/globalProps.js'
|
8
|
-
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
9
8
|
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
showIcon?: boolean,
|
17
|
-
showDayOfWeek?: boolean,
|
18
|
-
alignment?: "left" | "center" | "right"
|
9
|
+
const defaultDateString = (value: DateTime) => {
|
10
|
+
const weekday = value.toWeekday().toUpperCase()
|
11
|
+
const month = value.toMonth().toUpperCase()
|
12
|
+
const day = value.toDay()
|
13
|
+
|
14
|
+
return `${weekday} · ${month} ${day}`
|
19
15
|
}
|
20
16
|
|
21
|
-
const
|
22
|
-
const
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
data = {},
|
28
|
-
id,
|
29
|
-
showDayOfWeek = false,
|
30
|
-
showIcon = false,
|
31
|
-
} = props
|
17
|
+
const largeDateString = (value: DateTime) => {
|
18
|
+
const month = value.toMonth().toUpperCase()
|
19
|
+
const day = value.toDay()
|
20
|
+
|
21
|
+
return `${month} ${day}`
|
22
|
+
}
|
32
23
|
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
const day = dateTimestamp.toDay()
|
37
|
-
const year = dateTimestamp.toYear()
|
38
|
-
const currentYear = new Date().getFullYear().toString()
|
24
|
+
type DateSubcomponent = {
|
25
|
+
value: DateTime,
|
26
|
+
}
|
39
27
|
|
40
|
-
|
41
|
-
|
28
|
+
const ExtraSmallDate = ({ value, ...props }: DateSubcomponent) => (
|
29
|
+
<h3 className={classnames('pb_title_kit_4', globalProps(props))}>
|
30
|
+
{defaultDateString(value)}
|
31
|
+
</h3>
|
32
|
+
)
|
42
33
|
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
34
|
+
const SmallDate = ({ value, ...props }: DateSubcomponent) => (
|
35
|
+
<h3 className={classnames('pb_title_kit_4', globalProps(props))}>
|
36
|
+
<Icon
|
37
|
+
fixedWidth
|
38
|
+
icon="calendar"
|
39
|
+
/>
|
40
|
+
{defaultDateString(value)}
|
41
|
+
</h3>
|
42
|
+
)
|
43
|
+
|
44
|
+
const LargeDate = ({ value, ...props }: DateSubcomponent) => (
|
45
|
+
<h3 className={classnames('pb_title_kit_3', globalProps(props))}>
|
46
|
+
{largeDateString(value)}
|
47
|
+
</h3>
|
48
|
+
)
|
49
|
+
|
50
|
+
type PbDateProps = {
|
51
|
+
size?: "xs" | "sm" | "lg",
|
52
|
+
value?: string,
|
53
|
+
className?: string
|
54
|
+
}
|
55
|
+
|
56
|
+
const PbDate = ({ size, value, className, ...props }: PbDateProps) => {
|
57
|
+
const date = new DateTime({ value: value })
|
58
|
+
|
59
|
+
if (size == 'xs')
|
60
|
+
return (
|
61
|
+
<ExtraSmallDate
|
62
|
+
{...props}
|
63
|
+
className={className}
|
64
|
+
value={date}
|
65
|
+
/>
|
66
|
+
)
|
67
|
+
if (size == 'lg')
|
68
|
+
return (
|
69
|
+
<LargeDate
|
70
|
+
{...props}
|
71
|
+
className={className}
|
72
|
+
value={date}
|
73
|
+
/>
|
74
|
+
)
|
48
75
|
return (
|
49
|
-
<
|
50
|
-
{...
|
51
|
-
{
|
52
|
-
|
53
|
-
|
54
|
-
>
|
55
|
-
<Title
|
56
|
-
size={4}
|
57
|
-
tag="h4"
|
58
|
-
>
|
59
|
-
<If condition={showIcon}>
|
60
|
-
<Body
|
61
|
-
color="light"
|
62
|
-
tag="span"
|
63
|
-
>
|
64
|
-
<Icon
|
65
|
-
fixedWidth
|
66
|
-
icon="calendar-alt"
|
67
|
-
/>
|
68
|
-
</Body>
|
69
|
-
</If>
|
70
|
-
<If condition={showDayOfWeek}>
|
71
|
-
{weekday}
|
72
|
-
<Body
|
73
|
-
color="light"
|
74
|
-
tag="span"
|
75
|
-
text=" • "
|
76
|
-
/>
|
77
|
-
</If>
|
78
|
-
<span>
|
79
|
-
{month}
|
80
|
-
{' '}
|
81
|
-
{day}
|
82
|
-
</span>
|
83
|
-
<If condition={currentYear != year}>
|
84
|
-
<span>
|
85
|
-
{` , ${year}`}
|
86
|
-
</span>
|
87
|
-
</If>
|
88
|
-
</Title>
|
89
|
-
</div>
|
76
|
+
<SmallDate
|
77
|
+
{...props}
|
78
|
+
className={className}
|
79
|
+
value={date}
|
80
|
+
/>
|
90
81
|
)
|
91
82
|
}
|
92
83
|
|
@@ -1,27 +1,2 @@
|
|
1
1
|
@import "../pb_icon/icon";
|
2
2
|
@import "../pb_title/title";
|
3
|
-
|
4
|
-
[class^=pb_date_kit] {
|
5
|
-
display: flex;
|
6
|
-
flex-direction: row;
|
7
|
-
align-items: center;
|
8
|
-
> div {
|
9
|
-
margin-right: 4px !important;
|
10
|
-
}
|
11
|
-
|
12
|
-
&[class*=_center] {
|
13
|
-
display: flex;
|
14
|
-
flex-direction: row;
|
15
|
-
align-items: center;
|
16
|
-
justify-content: center;
|
17
|
-
margin-right: 4px !important;
|
18
|
-
}
|
19
|
-
|
20
|
-
&[class*=_right] {
|
21
|
-
display: flex;
|
22
|
-
flex-direction: row;
|
23
|
-
align-items: center;
|
24
|
-
justify-content: flex-end;
|
25
|
-
margin-left: 4px !important;
|
26
|
-
}
|
27
|
-
}
|
@@ -10,39 +10,30 @@ module Playbook
|
|
10
10
|
partial "pb_date/date"
|
11
11
|
|
12
12
|
prop :date, required: true
|
13
|
-
prop :
|
14
|
-
|
15
|
-
|
16
|
-
default: "left"
|
17
|
-
prop :show_icon, type: Playbook::Props::Boolean,
|
18
|
-
default: false
|
19
|
-
prop :show_day_of_week, type: Playbook::Props::Boolean,
|
20
|
-
default: false
|
13
|
+
prop :size, type: Playbook::Props::Enum,
|
14
|
+
values: %w[lg sm xs],
|
15
|
+
default: "sm"
|
21
16
|
|
22
17
|
def classname
|
23
|
-
generate_classname("pb_date_kit"
|
18
|
+
generate_classname("pb_date_kit")
|
24
19
|
end
|
25
20
|
|
26
|
-
def
|
27
|
-
pb_date_time.to_day_of_week
|
21
|
+
def xs_date
|
22
|
+
"#{pb_date_time.to_day_of_week.upcase} · #{pb_date_time.to_month.upcase} #{pb_date_time.to_day}".html_safe
|
28
23
|
end
|
29
24
|
|
30
|
-
def
|
31
|
-
pb_date_time.to_day
|
25
|
+
def lg_date
|
26
|
+
"#{pb_date_time.to_month.upcase} #{pb_date_time.to_day}"
|
32
27
|
end
|
33
28
|
|
34
|
-
def
|
35
|
-
pb_date_time.to_month.
|
36
|
-
end
|
37
|
-
|
38
|
-
def year
|
39
|
-
pb_date_time.to_year
|
29
|
+
def sm_date
|
30
|
+
"#{pb_date_time.to_day_of_week.upcase} · #{pb_date_time.to_month.upcase} #{pb_date_time.to_day}".html_safe
|
40
31
|
end
|
41
32
|
|
42
33
|
private
|
43
34
|
|
44
35
|
def pb_date_time
|
45
|
-
Playbook::PbKit::PbDateTime.new(date
|
36
|
+
Playbook::PbKit::PbDateTime.new(date)
|
46
37
|
end
|
47
38
|
end
|
48
39
|
end
|
@@ -1,9 +1,17 @@
|
|
1
1
|
<%= pb_rails("date", props: {
|
2
2
|
date: Date.today,
|
3
|
+
size: "lg"
|
3
4
|
}) %>
|
4
5
|
|
5
|
-
<br
|
6
|
+
<br>
|
7
|
+
|
8
|
+
<%= pb_rails("date", props: {
|
9
|
+
date: DateTime.now
|
10
|
+
}) %>
|
11
|
+
|
12
|
+
<br>
|
6
13
|
|
7
14
|
<%= pb_rails("date", props: {
|
8
15
|
date: "2012-08-02T15:49:29Z",
|
16
|
+
size: "xs"
|
9
17
|
}) %>
|
@@ -0,0 +1,28 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Date } from '../../'
|
3
|
+
|
4
|
+
const DateDefault = () => {
|
5
|
+
return (
|
6
|
+
<div>
|
7
|
+
<Date
|
8
|
+
size="lg"
|
9
|
+
value="1995-12-25"
|
10
|
+
/>
|
11
|
+
|
12
|
+
<br />
|
13
|
+
|
14
|
+
<Date
|
15
|
+
value="17 Mar 69"
|
16
|
+
/>
|
17
|
+
|
18
|
+
<br />
|
19
|
+
|
20
|
+
<Date
|
21
|
+
size="xs"
|
22
|
+
value="2020-04-20T04:20:00.000Z"
|
23
|
+
/>
|
24
|
+
</div>
|
25
|
+
)
|
26
|
+
}
|
27
|
+
|
28
|
+
export default DateDefault
|
@@ -2,12 +2,8 @@ examples:
|
|
2
2
|
|
3
3
|
rails:
|
4
4
|
- date_default: Default
|
5
|
-
|
6
|
-
- date_variants: Variants
|
7
|
-
- date_alignment: Alignment
|
5
|
+
|
8
6
|
|
9
7
|
react:
|
10
|
-
-
|
11
|
-
- date_variants: Variants
|
12
|
-
- date_alignment: Alignment
|
8
|
+
- date_default: Default
|
13
9
|
|
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: 6.4.
|
4
|
+
version: 6.4.2
|
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: 2020-
|
12
|
+
date: 2020-09-04 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -702,15 +702,8 @@ files:
|
|
702
702
|
- app/pb_kits/playbook/pb_date/_date.jsx
|
703
703
|
- app/pb_kits/playbook/pb_date/_date.scss
|
704
704
|
- app/pb_kits/playbook/pb_date/date.rb
|
705
|
-
- app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb
|
706
|
-
- app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx
|
707
705
|
- app/pb_kits/playbook/pb_date/docs/_date_default.html.erb
|
708
|
-
- app/pb_kits/playbook/pb_date/docs/
|
709
|
-
- app/pb_kits/playbook/pb_date/docs/_date_default_react.md
|
710
|
-
- app/pb_kits/playbook/pb_date/docs/_date_timezone.html.erb
|
711
|
-
- app/pb_kits/playbook/pb_date/docs/_date_timezone.md
|
712
|
-
- app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb
|
713
|
-
- app/pb_kits/playbook/pb_date/docs/_date_variants.jsx
|
706
|
+
- app/pb_kits/playbook/pb_date/docs/_date_default.jsx
|
714
707
|
- app/pb_kits/playbook/pb_date/docs/_description.md
|
715
708
|
- app/pb_kits/playbook/pb_date/docs/example.yml
|
716
709
|
- app/pb_kits/playbook/pb_date/docs/index.js
|
@@ -1954,8 +1947,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
1954
1947
|
- !ruby/object:Gem::Version
|
1955
1948
|
version: '0'
|
1956
1949
|
requirements: []
|
1957
|
-
|
1958
|
-
rubygems_version: 2.7.3
|
1950
|
+
rubygems_version: 3.1.4
|
1959
1951
|
signing_key:
|
1960
1952
|
specification_version: 4
|
1961
1953
|
summary: Playbook Design System
|
@@ -1,24 +0,0 @@
|
|
1
|
-
|
2
|
-
<%= pb_rails("date", props: {
|
3
|
-
date: DateTime.now,
|
4
|
-
show_icon: true,
|
5
|
-
show_day_of_week: true
|
6
|
-
}) %>
|
7
|
-
|
8
|
-
<br><br>
|
9
|
-
|
10
|
-
<%= pb_rails("date", props: {
|
11
|
-
date: DateTime.now,
|
12
|
-
show_icon: true,
|
13
|
-
show_day_of_week: true,
|
14
|
-
alignment: "center"
|
15
|
-
}) %>
|
16
|
-
|
17
|
-
<br><br>
|
18
|
-
|
19
|
-
<%= pb_rails("date", props: {
|
20
|
-
date: DateTime.now,
|
21
|
-
show_icon: true,
|
22
|
-
show_day_of_week: true,
|
23
|
-
alignment: "right"
|
24
|
-
}) %>
|
@@ -1,32 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Date as FormattedDate } from '../..'
|
3
|
-
|
4
|
-
const DateAlignment = () => {
|
5
|
-
return (
|
6
|
-
<div>
|
7
|
-
<FormattedDate
|
8
|
-
date="1995-12-25"
|
9
|
-
dayOfWeek
|
10
|
-
icon
|
11
|
-
/>
|
12
|
-
|
13
|
-
<br />
|
14
|
-
|
15
|
-
<FormattedDate
|
16
|
-
alignment="center"
|
17
|
-
date="2020-12-25"
|
18
|
-
dayOfWeek
|
19
|
-
icon
|
20
|
-
/>
|
21
|
-
|
22
|
-
<br />
|
23
|
-
|
24
|
-
<FormattedDate
|
25
|
-
alignment="right"
|
26
|
-
date={new Date()}
|
27
|
-
/>
|
28
|
-
</div>
|
29
|
-
)
|
30
|
-
}
|
31
|
-
|
32
|
-
export default DateAlignment
|
@@ -1,20 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Date as FormattedDate } from '../..'
|
3
|
-
|
4
|
-
const DateDefaultReact = () => {
|
5
|
-
return (
|
6
|
-
<div>
|
7
|
-
<FormattedDate
|
8
|
-
date="2012-12-25"
|
9
|
-
/>
|
10
|
-
|
11
|
-
<br />
|
12
|
-
|
13
|
-
<FormattedDate
|
14
|
-
date={new Date()}
|
15
|
-
/>
|
16
|
-
</div>
|
17
|
-
)
|
18
|
-
}
|
19
|
-
|
20
|
-
export default DateDefaultReact
|
@@ -1,51 +0,0 @@
|
|
1
|
-
<%= pb_rails("caption", props: { text: "East Coast (Default)"}) %>
|
2
|
-
<%= pb_rails("date", props: {
|
3
|
-
date: DateTime.now,
|
4
|
-
timezone: "America/New_York"
|
5
|
-
}) %>
|
6
|
-
|
7
|
-
<br>
|
8
|
-
|
9
|
-
<%= pb_rails("caption", props: { text: "West Coast"}) %>
|
10
|
-
<%= pb_rails("date", props: {
|
11
|
-
date: DateTime.now,
|
12
|
-
timezone: "America/Los_Angeles"
|
13
|
-
}) %>
|
14
|
-
|
15
|
-
<br>
|
16
|
-
|
17
|
-
<%= pb_rails("caption", props: { text: "Toyko, Japan"}) %>
|
18
|
-
<%= pb_rails("date", props: {
|
19
|
-
date: DateTime.now,
|
20
|
-
timezone: "Asia/Tokyo"
|
21
|
-
}) %>
|
22
|
-
|
23
|
-
<br>
|
24
|
-
|
25
|
-
<%= pb_rails("caption", props: { text: "Anti-pattern example"}) %>
|
26
|
-
|
27
|
-
<%= pb_rails("date", props: {
|
28
|
-
date: Date.today,
|
29
|
-
timezone: "Australia/Sydney"
|
30
|
-
}) %>
|
31
|
-
<%= pb_rails("body", props: { text: "Date.today ignores Timezone"}) %>
|
32
|
-
|
33
|
-
<br>
|
34
|
-
|
35
|
-
<%= pb_rails("caption", props: { text: "DateTime respects Timezone"}) %>
|
36
|
-
|
37
|
-
<%= pb_rails("date", props: {
|
38
|
-
date: DateTime.now,
|
39
|
-
timezone: "Australia/Sydney"
|
40
|
-
}) %>
|
41
|
-
|
42
|
-
<%= pb_rails("body", props: { text: "'.now' in Australia is tomorrow (if you're EST after 10am)"}) %>
|
43
|
-
|
44
|
-
<br>
|
45
|
-
|
46
|
-
<%= pb_rails("caption", props: { text: "String Dates"}) %>
|
47
|
-
<%= pb_rails("date", props: {
|
48
|
-
date: "2012-08-02T00:49:29Z",
|
49
|
-
}) %>
|
50
|
-
|
51
|
-
<%= pb_rails("body", props: { text: "Defaults to UTC, then changes due to EST Timezone."}) %>
|
@@ -1,6 +0,0 @@
|
|
1
|
-
Depending on the data you send to the `date` prop you might have unexpected results due to ruby `Date` and `DateTime` classes.
|
2
|
-
|
3
|
-
Don't care about timezones? Use `Date`.
|
4
|
-
|
5
|
-
If you need a date that recognizes a timezone, especially when paired with the [Time kit](/kits/time), leverage `DateTime`.
|
6
|
-
|
@@ -1,27 +0,0 @@
|
|
1
|
-
<div>
|
2
|
-
<%= pb_rails("date", props: {
|
3
|
-
date: DateTime.now,
|
4
|
-
}) %>
|
5
|
-
|
6
|
-
<br><br>
|
7
|
-
|
8
|
-
<%= pb_rails("date", props: {
|
9
|
-
date: DateTime.now,
|
10
|
-
show_icon: true
|
11
|
-
}) %>
|
12
|
-
|
13
|
-
<br><br>
|
14
|
-
|
15
|
-
<%= pb_rails("date", props: {
|
16
|
-
date: DateTime.now,
|
17
|
-
show_day_of_week: true
|
18
|
-
}) %>
|
19
|
-
|
20
|
-
<br><br>
|
21
|
-
|
22
|
-
<%= pb_rails("date", props: {
|
23
|
-
date: DateTime.now,
|
24
|
-
show_icon: true,
|
25
|
-
show_day_of_week: true
|
26
|
-
}) %>
|
27
|
-
</div>
|
@@ -1,39 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { Date as FormattedDate } from '../..'
|
3
|
-
|
4
|
-
const DateVariants = () => {
|
5
|
-
return (
|
6
|
-
<div>
|
7
|
-
<FormattedDate
|
8
|
-
date="1995-12-25"
|
9
|
-
/>
|
10
|
-
|
11
|
-
<br />
|
12
|
-
<br />
|
13
|
-
|
14
|
-
<FormattedDate
|
15
|
-
date="1995-12-25"
|
16
|
-
showIcon
|
17
|
-
/>
|
18
|
-
|
19
|
-
<br />
|
20
|
-
<br />
|
21
|
-
|
22
|
-
<FormattedDate
|
23
|
-
date="1995-12-25"
|
24
|
-
showDayOfWeek
|
25
|
-
/>
|
26
|
-
|
27
|
-
<br />
|
28
|
-
<br />
|
29
|
-
|
30
|
-
<FormattedDate
|
31
|
-
date="1995-12-25"
|
32
|
-
showDayOfWeek
|
33
|
-
showIcon
|
34
|
-
/>
|
35
|
-
</div>
|
36
|
-
)
|
37
|
-
}
|
38
|
-
|
39
|
-
export default DateVariants
|