playbook_ui 7.3.0 → 7.4.0.pre.alpha6
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 -3
- data/app/pb_kits/playbook/data/menu.yml +2 -2
- data/app/pb_kits/playbook/index.js +2 -2
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb +3 -2
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx +2 -1
- data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +4 -1
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.html.erb +5 -2
- data/app/pb_kits/playbook/pb_date/_date.html.erb +8 -64
- data/app/pb_kits/playbook/pb_date/_date.jsx +66 -115
- data/app/pb_kits/playbook/pb_date/_date.scss +0 -30
- data/app/pb_kits/playbook/pb_date/date.rb +9 -20
- data/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb +6 -21
- data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +12 -43
- data/app/pb_kits/playbook/pb_date/docs/example.yml +0 -4
- data/app/pb_kits/playbook/pb_date/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +14 -19
- data/app/pb_kits/playbook/pb_flex/_flex.jsx +1 -1
- data/app/pb_kits/playbook/pb_flex/_flex.scss +0 -4
- data/app/pb_kits/playbook/pb_flex/flex.rb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -52
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +1 -19
- data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb +1 -1
- data/app/pb_kits/playbook/pb_list/_list.jsx +9 -2
- data/app/pb_kits/playbook/pb_progress_step/progress_step.rb +2 -2
- data/app/pb_kits/playbook/pb_radio/_radio.jsx +0 -3
- data/app/pb_kits/playbook/pb_selectable_list/_item.jsx +90 -0
- data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.html.erb +11 -0
- data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx +47 -0
- data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss +17 -0
- data/app/pb_kits/playbook/pb_selectable_list/_selectable_list_item.html.erb +18 -0
- data/app/pb_kits/playbook/pb_selectable_list/docs/_description.md +3 -0
- data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.html.erb +30 -0
- data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx +32 -0
- data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.html.erb +30 -0
- data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx +32 -0
- data/app/pb_kits/playbook/pb_selectable_list/docs/example.yml +12 -0
- data/app/pb_kits/playbook/pb_selectable_list/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list.rb +24 -0
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb +28 -0
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +19 -46
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +10 -46
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb +4 -4
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +2 -3
- data/lib/playbook/version.rb +1 -1
- metadata +18 -38
- data/app/pb_kits/playbook/pb_background/_background.html.erb +0 -14
- data/app/pb_kits/playbook/pb_background/_background.jsx +0 -63
- data/app/pb_kits/playbook/pb_background/_background.scss +0 -35
- data/app/pb_kits/playbook/pb_background/background.rb +0 -35
- data/app/pb_kits/playbook/pb_background/docs/_background_dark.html.erb +0 -3
- data/app/pb_kits/playbook/pb_background/docs/_background_dark.jsx +0 -13
- data/app/pb_kits/playbook/pb_background/docs/_background_gradient.html.erb +0 -3
- data/app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx +0 -13
- data/app/pb_kits/playbook/pb_background/docs/_background_image.html.erb +0 -13
- data/app/pb_kits/playbook/pb_background/docs/_background_image.jsx +0 -30
- data/app/pb_kits/playbook/pb_background/docs/_background_light.html.erb +0 -3
- data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx +0 -13
- data/app/pb_kits/playbook/pb_background/docs/_background_white.html.erb +0 -3
- data/app/pb_kits/playbook/pb_background/docs/_background_white.jsx +0 -14
- data/app/pb_kits/playbook/pb_background/docs/_description.md +0 -1
- data/app/pb_kits/playbook/pb_background/docs/example.yml +0 -15
- data/app/pb_kits/playbook/pb_background/docs/index.js +0 -6
- 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 -35
- 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 -43
- data/app/pb_kits/playbook/pb_date_time/_date_time.html.erb +0 -31
- data/app/pb_kits/playbook/pb_date_time/_date_time.jsx +0 -73
- data/app/pb_kits/playbook/pb_date_time/_date_time.scss +0 -26
- data/app/pb_kits/playbook/pb_date_time/date_time.rb +0 -29
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.html.erb +0 -17
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.jsx +0 -35
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.html.erb +0 -20
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx +0 -38
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.html.erb +0 -26
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx +0 -75
- data/app/pb_kits/playbook/pb_date_time/docs/_description.md +0 -1
- data/app/pb_kits/playbook/pb_date_time/docs/example.yml +0 -11
- data/app/pb_kits/playbook/pb_date_time/docs/index.js +0 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 84234e5245ed8198a33015e8a1f990c70d38b788b41a951cbbb2d15150abae31
|
4
|
+
data.tar.gz: a7dfea6cb2cfcff7daf6393c744d0e3a8b3959f314ee5d02ba0f376c996d253d
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 6c28070ae0ee1907e7f9b9543c3bba8fd3b781886dd05a522b73d633d3cc30db2e14f24e63eabdc74670a582adb33bf41d21f5aea14028287dfa7906d5a03c24
|
7
|
+
data.tar.gz: 766165343399fac0c7a821488262d632a033dc48fc93867d9414a24eaa2ec2059b861015ef0013edee061164a47d2b55c3af123cdb107a84be83c70be47e4a01
|
@@ -1,5 +1,4 @@
|
|
1
1
|
@import "tokens/fonts";
|
2
|
-
@import "pb_background/background";
|
3
2
|
@import "pb_body/body";
|
4
3
|
@import "pb_button/button";
|
5
4
|
@import 'pb_button_toolbar/button_toolbar';
|
@@ -18,7 +17,6 @@
|
|
18
17
|
@import 'pb_dashboard_value/dashboard_value';
|
19
18
|
@import 'pb_date/date';
|
20
19
|
@import 'pb_date_picker/date_picker';
|
21
|
-
@import 'pb_date_time/date_time';
|
22
20
|
@import 'pb_date_range_inline/date_range_inline';
|
23
21
|
@import 'pb_date_range_stacked/date_range_stacked';
|
24
22
|
@import 'pb_date_stacked/date_stacked';
|
@@ -64,6 +62,7 @@
|
|
64
62
|
@import 'pb_selectable_card/selectable_card';
|
65
63
|
@import 'pb_selectable_card_icon/selectable_card_icon';
|
66
64
|
@import 'pb_selectable_icon/selectable_icon';
|
65
|
+
@import 'pb_selectable_list/selectable_list';
|
67
66
|
@import 'pb_source/source';
|
68
67
|
@import 'pb_star_rating/star_rating';
|
69
68
|
@import 'pb_stat_change/stat_change';
|
@@ -85,4 +84,3 @@
|
|
85
84
|
@import 'pb_time_stacked/time_stacked';
|
86
85
|
@import 'pb_weekday_stacked/weekday_stacked';
|
87
86
|
@import './utilities/spacing';
|
88
|
-
|
@@ -7,7 +7,6 @@ samples:
|
|
7
7
|
kits:
|
8
8
|
- avatar
|
9
9
|
- avatar_action_button
|
10
|
-
- background
|
11
10
|
- buttons:
|
12
11
|
- button
|
13
12
|
- button_toolbar
|
@@ -21,6 +20,7 @@ kits:
|
|
21
20
|
- gauge
|
22
21
|
- legend
|
23
22
|
- line_graph
|
23
|
+
|
24
24
|
- filter
|
25
25
|
- fixed_confirmation_toast
|
26
26
|
- flex
|
@@ -34,6 +34,7 @@ kits:
|
|
34
34
|
- selectable_card
|
35
35
|
- selectable_card_icon
|
36
36
|
- selectable_icon
|
37
|
+
- selectable_list
|
37
38
|
- text_input
|
38
39
|
- textarea
|
39
40
|
- typeahead
|
@@ -78,7 +79,6 @@ kits:
|
|
78
79
|
- date_range_inline
|
79
80
|
- date_range_stacked
|
80
81
|
- date_stacked
|
81
|
-
- date_time
|
82
82
|
- date_time_stacked
|
83
83
|
- date_year_stacked
|
84
84
|
- home_address_street
|
@@ -5,7 +5,6 @@ import 'lazysizes'
|
|
5
5
|
// React Component JSX Imports from the React Kits
|
6
6
|
export Avatar from './pb_avatar/_avatar.jsx'
|
7
7
|
export AvatarActionButton from './pb_avatar_action_button/_avatar_action_button.jsx'
|
8
|
-
export Background from 'pb_background/_background.jsx'
|
9
8
|
export Badge from './pb_badge/_badge.jsx'
|
10
9
|
export BarGraph from './pb_bar_graph/_bar_graph.jsx'
|
11
10
|
export Body from './pb_body/_body.jsx'
|
@@ -24,7 +23,6 @@ export DatePicker from './pb_date_picker/_date_picker.jsx'
|
|
24
23
|
export DateRangeInline from './pb_date_range_inline/_date_range_inline.jsx'
|
25
24
|
export DateRangeStacked from './pb_date_range_stacked/_date_range_stacked.jsx'
|
26
25
|
export DateStacked from './pb_date_stacked/_date_stacked.jsx'
|
27
|
-
export DateTime from './pb_date_time/_date_time.jsx'
|
28
26
|
export DateTimeStacked from './pb_date_time_stacked/_date_time_stacked.jsx'
|
29
27
|
export DateYearStacked from './pb_date_year_stacked/_date_year_stacked.jsx'
|
30
28
|
export DistributionBar from './pb_distribution_bar/_distribution_bar.jsx'
|
@@ -70,6 +68,8 @@ export Select from './pb_select/_select.jsx'
|
|
70
68
|
export SelectableCard from './pb_selectable_card/_selectable_card.jsx'
|
71
69
|
export SelectableCardIcon from './pb_selectable_card_icon/_selectable_card_icon.jsx'
|
72
70
|
export SelectableIcon from './pb_selectable_icon/_selectable_icon.jsx'
|
71
|
+
export SelectableList from './pb_selectable_list/_selectable_list.jsx'
|
72
|
+
export SelectableListItem from './pb_selectable_list/_item.jsx'
|
73
73
|
export Source from './pb_source/_source.jsx'
|
74
74
|
export StarRating from './pb_star_rating/_star_rating.jsx'
|
75
75
|
export StatChange from './pb_stat_change/_stat_change.jsx'
|
@@ -1,10 +1,11 @@
|
|
1
1
|
<%= content_tag(:label, aria: object.aria,
|
2
2
|
id: object.id,
|
3
3
|
data: object.data,
|
4
|
-
class: object.classname
|
4
|
+
class: object.classname,
|
5
|
+
for: object.for_attribute ) do %>
|
5
6
|
<% if object.children %>
|
6
7
|
<%= capture(&object.children) %>
|
7
|
-
<% else %>
|
8
|
+
<% else %>
|
8
9
|
<%= object.input %>
|
9
10
|
<% end %>
|
10
11
|
<span class="pb_checkbox_checkmark">
|
@@ -51,13 +51,14 @@ const Checkbox = (props: CheckboxProps) => {
|
|
51
51
|
{...ariaProps}
|
52
52
|
{...dataProps}
|
53
53
|
className={classes}
|
54
|
-
|
54
|
+
htmlFor={id}
|
55
55
|
>
|
56
56
|
<If condition={children}>
|
57
57
|
{children}
|
58
58
|
<Else />
|
59
59
|
<input
|
60
60
|
defaultChecked={checked}
|
61
|
+
id={id}
|
61
62
|
name={name}
|
62
63
|
onChange={onChange}
|
63
64
|
type="checkbox"
|
@@ -14,7 +14,6 @@ module Playbook
|
|
14
14
|
prop :text
|
15
15
|
prop :value
|
16
16
|
prop :name
|
17
|
-
|
18
17
|
prop :input_options, type: Playbook::Props::Hash,
|
19
18
|
default: {}
|
20
19
|
prop :required, type: Playbook::Props::Boolean,
|
@@ -34,6 +33,10 @@ module Playbook
|
|
34
33
|
check_box_tag(name, value, checked, input_options)
|
35
34
|
end
|
36
35
|
|
36
|
+
def for_attribute
|
37
|
+
input_options[:id]
|
38
|
+
end
|
39
|
+
|
37
40
|
def checkbox_label_status
|
38
41
|
error ? "negative" : nil
|
39
42
|
end
|
@@ -1,70 +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
|
-
<%= pb_rails("body", props: {
|
11
|
-
color: "light",
|
12
|
-
tag: "div",
|
13
|
-
}) do %>
|
14
|
-
<%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
|
15
|
-
<% end %>
|
16
|
-
<% end %>
|
17
|
-
|
18
|
-
<!-- day_of_week -->
|
19
|
-
<% if object.show_day_of_week %>
|
20
|
-
<%= pb_rails("title", props: { tag: "div", text: object.day_of_week, size: 4 }) %>
|
21
|
-
<%= pb_rails("body", props: {
|
22
|
-
text: "•",
|
23
|
-
color: "light",
|
24
|
-
tag: "div",
|
25
|
-
}) %>
|
26
|
-
<% end %>
|
27
|
-
|
28
|
-
<!-- month day, year -->
|
29
|
-
|
30
|
-
<%# if not current year %>
|
31
|
-
<% if object.year.to_s == DateTime.now.year.to_s %>
|
32
|
-
<%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}", size: 4 }) %>
|
33
|
-
<%# if is current year %>
|
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 }) %>
|
34
10
|
<% else %>
|
35
|
-
<%= pb_rails("title", props: {
|
36
|
-
<% end %>
|
37
|
-
|
38
|
-
<% else %>
|
39
|
-
|
40
|
-
<!-- icon -->
|
41
|
-
<% if object.show_icon %>
|
42
|
-
<%= pb_rails("body", props: {
|
43
|
-
color: "light",
|
44
|
-
tag: "div",
|
45
|
-
}) do %>
|
46
|
-
<%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
|
47
|
-
<% end %>
|
48
|
-
<% end %>
|
49
|
-
|
50
|
-
<!-- day_of_week -->
|
51
|
-
<% if object.show_day_of_week %>
|
52
|
-
<%= pb_rails("caption", props: { tag: "div", text: object.day_of_week }) %>
|
53
|
-
<%= pb_rails("caption", props: {
|
54
|
-
text: "•",
|
55
|
-
color: "light",
|
56
|
-
tag: "div",
|
57
|
-
}) %>
|
58
|
-
<% end %>
|
59
|
-
|
60
|
-
<!-- month day, year -->
|
61
|
-
|
62
|
-
<%# if not current year %>
|
63
|
-
<% if object.year.to_s == DateTime.now.year.to_s %>
|
64
|
-
<%= pb_rails("caption", props: { tag: "span", text: "#{object.month} #{object.day}" }) %>
|
65
|
-
<%# if is current year %>
|
66
|
-
<% else %>
|
67
|
-
<%= pb_rails("caption", props: { tag: "span", text: "#{object.month} #{object.day}, #{object.year}" }) %>
|
68
|
-
<% end %>
|
11
|
+
<%= pb_rails("title", props: { text: object.xs_date, size: 4 }) %>
|
69
12
|
<% end %>
|
70
13
|
<% end %>
|
14
|
+
|
@@ -2,131 +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
|
-
showDayOfWeek?: boolean,
|
17
|
-
showIcon?: boolean,
|
18
|
-
size?: string,
|
19
|
-
value: string | date,
|
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}`
|
20
15
|
}
|
21
16
|
|
22
|
-
const
|
23
|
-
const
|
24
|
-
|
25
|
-
alignment = 'left',
|
26
|
-
className,
|
27
|
-
data = {},
|
28
|
-
id,
|
29
|
-
showDayOfWeek = false,
|
30
|
-
showIcon = false,
|
31
|
-
size = 'md',
|
32
|
-
value,
|
33
|
-
} = props
|
17
|
+
const largeDateString = (value: DateTime) => {
|
18
|
+
const month = value.toMonth().toUpperCase()
|
19
|
+
const day = value.toDay()
|
34
20
|
|
35
|
-
|
36
|
-
|
37
|
-
const month = dateTimestamp.toMonth()
|
38
|
-
const day = dateTimestamp.toDay()
|
39
|
-
const year = dateTimestamp.toYear()
|
40
|
-
const currentYear = new Date().getFullYear().toString()
|
21
|
+
return `${month} ${day}`
|
22
|
+
}
|
41
23
|
|
42
|
-
|
43
|
-
|
24
|
+
type DateSubcomponent = {
|
25
|
+
value: DateTime,
|
26
|
+
}
|
44
27
|
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
28
|
+
const ExtraSmallDate = ({ value, ...props }: DateSubcomponent) => (
|
29
|
+
<h3 className={classnames('pb_title_kit_4', globalProps(props))}>
|
30
|
+
{defaultDateString(value)}
|
31
|
+
</h3>
|
32
|
+
)
|
50
33
|
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
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
|
+
)
|
59
43
|
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
<If condition={showIcon}>
|
98
|
-
<Body
|
99
|
-
className="pb_icon_kit_container"
|
100
|
-
color="light"
|
101
|
-
tag="span"
|
102
|
-
>
|
103
|
-
<Icon
|
104
|
-
fixedWidth
|
105
|
-
icon="calendar-alt"
|
106
|
-
/>
|
107
|
-
</Body>
|
108
|
-
</If>
|
109
|
-
<If condition={showDayOfWeek}>
|
110
|
-
<Caption tag="div">
|
111
|
-
{weekday}
|
112
|
-
</Caption>
|
113
|
-
<Caption
|
114
|
-
color="light"
|
115
|
-
tag="div"
|
116
|
-
text=" • "
|
117
|
-
/>
|
118
|
-
</If>
|
119
|
-
<Caption tag="span">
|
120
|
-
{month}
|
121
|
-
{' '}
|
122
|
-
{day}
|
123
|
-
<If condition={currentYear != year}>
|
124
|
-
{`, ${year}`}
|
125
|
-
</If>
|
126
|
-
</Caption>
|
127
|
-
</>
|
128
|
-
</If>
|
129
|
-
</div>
|
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
|
+
)
|
75
|
+
return (
|
76
|
+
<SmallDate
|
77
|
+
{...props}
|
78
|
+
className={className}
|
79
|
+
value={date}
|
80
|
+
/>
|
130
81
|
)
|
131
82
|
}
|
132
83
|
|
@@ -1,32 +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, .pb_icon_kit_container {
|
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
|
-
&.dark {
|
28
|
-
[class^=pb_title_kit] {
|
29
|
-
color: $text_dk_default !important;
|
30
|
-
}
|
31
|
-
}
|
32
|
-
}
|