playbook_ui 11.3.0 → 11.4.0
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/index.js +1 -0
- data/app/pb_kits/playbook/pb_button/_button.tsx +6 -6
- data/app/pb_kits/playbook/pb_circle_icon_button/{_circle_icon_button.jsx → _circle_icon_button.tsx} +6 -10
- data/app/pb_kits/playbook/pb_contact/contact.test.js +45 -1
- data/app/pb_kits/playbook/pb_currency/{_currency.jsx → _currency.tsx} +17 -12
- data/app/pb_kits/playbook/pb_date/_date.tsx +101 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +10 -9
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +80 -0
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -0
- data/app/pb_kits/playbook/pb_icon_circle/{_icon_circle.jsx → _icon_circle.tsx} +2 -4
- data/app/pb_kits/playbook/pb_kit/{dateTime.js → dateTime.ts} +5 -6
- data/app/pb_kits/playbook/pb_label_pill/{_label_pill.jsx → _label_pill.tsx} +2 -4
- data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +1 -1
- data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +1 -1
- data/app/pb_kits/playbook/pb_pill/_pill.tsx +1 -1
- data/app/pb_kits/playbook/pb_section_separator/{_section_separator.jsx → _section_separator.tsx} +7 -8
- data/app/pb_kits/playbook/pb_time/_time.tsx +92 -0
- data/app/pb_kits/playbook/pb_time/docs/_time_align.jsx +1 -1
- data/app/pb_kits/playbook/pb_time/docs/_time_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_time/docs/_time_sizes.jsx +1 -1
- data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.jsx +1 -1
- data/app/pb_kits/playbook/pb_time/docs/_time_timezone.jsx +1 -1
- data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx +1 -1
- data/app/pb_kits/playbook/pb_title/_title.tsx +1 -1
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +49 -6
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +144 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx +59 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.md +5 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb +10 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx +52 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.md +1 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx +40 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.md +1 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx +39 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.md +3 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb +1 -1
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +7 -1
- data/app/pb_kits/playbook/pb_tooltip/docs/index.js +4 -0
- data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx +50 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.html.erb +37 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -2
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +10 -2
- data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx +1 -1
- data/app/pb_kits/playbook/playbook-doc.js +2 -0
- data/lib/playbook/version.rb +2 -2
- metadata +25 -11
- data/app/pb_kits/playbook/pb_date/_date.jsx +0 -138
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx +0 -93
- data/app/pb_kits/playbook/pb_time/_time.jsx +0 -90
@@ -0,0 +1,37 @@
|
|
1
|
+
<%
|
2
|
+
options = [
|
3
|
+
{ label: 'Windows', value: '#FFA500' },
|
4
|
+
{ label: 'Siding', value: '#FF0000' },
|
5
|
+
{ label: 'Doors', value: '#00FF00' },
|
6
|
+
{ label: 'Roofs', value: '#0000FF' },
|
7
|
+
]
|
8
|
+
%>
|
9
|
+
|
10
|
+
<%= pb_rails("typeahead", props: {
|
11
|
+
id: "typeahead-pills-example1",
|
12
|
+
placeholder: "All Colors",
|
13
|
+
options: options,
|
14
|
+
label: "Colors",
|
15
|
+
name: :foo,
|
16
|
+
is_multi: false
|
17
|
+
})
|
18
|
+
%>
|
19
|
+
|
20
|
+
<!-- This section is an example of the available JavaScript event hooks -->
|
21
|
+
<%= javascript_tag defer: "defer" do %>
|
22
|
+
document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-select", function(event) {
|
23
|
+
console.log('Option selected')
|
24
|
+
console.dir(event.detail)
|
25
|
+
})
|
26
|
+
document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-remove", function(event) {
|
27
|
+
console.log('Option removed')
|
28
|
+
console.dir(event.detail)
|
29
|
+
})
|
30
|
+
document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-clear", function() {
|
31
|
+
console.log('All options cleared')
|
32
|
+
})
|
33
|
+
|
34
|
+
document.querySelector('#clear-pills').addEventListener('click', function() {
|
35
|
+
document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:clear'))
|
36
|
+
})
|
37
|
+
<% end %>
|
@@ -0,0 +1 @@
|
|
1
|
+
Passing `is_multi: false` will allow the user to only select one option from the drop down. Note: this will disable `pills` prop.
|
@@ -3,6 +3,7 @@ examples:
|
|
3
3
|
- typeahead_default: Default
|
4
4
|
- typeahead_with_context: With Context
|
5
5
|
- typeahead_with_pills: With Pills
|
6
|
+
- typeahead_without_pills: Without Pills (Single Select)
|
6
7
|
- typeahead_with_pills_async: With Pills (Async Data)
|
7
8
|
- typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
|
8
9
|
- typeahead_inline: Inline
|
@@ -19,6 +19,10 @@ module Playbook
|
|
19
19
|
default: []
|
20
20
|
prop :input_options, type: Playbook::Props::Hash,
|
21
21
|
default: {}
|
22
|
+
|
23
|
+
prop :is_multi, type: Playbook::Props::Boolean,
|
24
|
+
default: true
|
25
|
+
|
22
26
|
prop :pills, type: Playbook::Props::Boolean,
|
23
27
|
default: false
|
24
28
|
|
@@ -45,13 +49,17 @@ module Playbook
|
|
45
49
|
)
|
46
50
|
end
|
47
51
|
|
48
|
-
def
|
52
|
+
def is_react?
|
53
|
+
pills || !is_multi
|
54
|
+
end
|
55
|
+
|
56
|
+
def typeahead_react_options
|
49
57
|
base_options = {
|
50
58
|
dark: dark,
|
51
59
|
defaultValue: default_options,
|
52
60
|
id: id,
|
53
61
|
inline: inline,
|
54
|
-
isMulti:
|
62
|
+
isMulti: is_multi,
|
55
63
|
label: label,
|
56
64
|
multiKit: multi_kit,
|
57
65
|
name: name,
|
@@ -8,7 +8,7 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
|
8
8
|
import Caption from '../pb_caption/_caption'
|
9
9
|
import Title from '../pb_title/_title'
|
10
10
|
|
11
|
-
import DateTime from '../pb_kit/dateTime
|
11
|
+
import DateTime from '../pb_kit/dateTime'
|
12
12
|
|
13
13
|
type WeekdayStackedProps = {
|
14
14
|
align?: "left" | "center" | "right",
|
@@ -92,6 +92,7 @@ import * as Title from 'pb_title/docs'
|
|
92
92
|
import * as TitleCount from 'pb_title_count/docs'
|
93
93
|
import * as TitleDetail from 'pb_title_detail/docs'
|
94
94
|
import * as Toggle from 'pb_toggle/docs'
|
95
|
+
import * as Tooltip from 'pb_tooltip/docs'
|
95
96
|
import * as TreemapChart from 'pb_treemap_chart/docs'
|
96
97
|
import * as Typeahead from 'pb_typeahead/docs'
|
97
98
|
import * as User from 'pb_user/docs'
|
@@ -188,6 +189,7 @@ WebpackerReact.setup({
|
|
188
189
|
...TitleCount,
|
189
190
|
...TitleDetail,
|
190
191
|
...Toggle,
|
192
|
+
...Tooltip,
|
191
193
|
...TreemapChart,
|
192
194
|
...Typeahead,
|
193
195
|
...User,
|
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: 11.
|
4
|
+
version: 11.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: 2022-08-
|
12
|
+
date: 2022-08-30 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -553,8 +553,8 @@ files:
|
|
553
553
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx
|
554
554
|
- app/pb_kits/playbook/pb_circle_chart/docs/example.yml
|
555
555
|
- app/pb_kits/playbook/pb_circle_chart/docs/index.js
|
556
|
-
- app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx
|
557
556
|
- app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss
|
557
|
+
- app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx
|
558
558
|
- app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb
|
559
559
|
- app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb
|
560
560
|
- app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js
|
@@ -597,8 +597,8 @@ files:
|
|
597
597
|
- app/pb_kits/playbook/pb_contact/docs/_description.md
|
598
598
|
- app/pb_kits/playbook/pb_contact/docs/example.yml
|
599
599
|
- app/pb_kits/playbook/pb_contact/docs/index.js
|
600
|
-
- app/pb_kits/playbook/pb_currency/_currency.jsx
|
601
600
|
- app/pb_kits/playbook/pb_currency/_currency.scss
|
601
|
+
- app/pb_kits/playbook/pb_currency/_currency.tsx
|
602
602
|
- app/pb_kits/playbook/pb_currency/currency.html.erb
|
603
603
|
- app/pb_kits/playbook/pb_currency/currency.rb
|
604
604
|
- app/pb_kits/playbook/pb_currency/currency.test.js
|
@@ -633,8 +633,8 @@ files:
|
|
633
633
|
- app/pb_kits/playbook/pb_dashboard_value/docs/_description.md
|
634
634
|
- app/pb_kits/playbook/pb_dashboard_value/docs/example.yml
|
635
635
|
- app/pb_kits/playbook/pb_dashboard_value/docs/index.js
|
636
|
-
- app/pb_kits/playbook/pb_date/_date.jsx
|
637
636
|
- app/pb_kits/playbook/pb_date/_date.scss
|
637
|
+
- app/pb_kits/playbook/pb_date/_date.tsx
|
638
638
|
- app/pb_kits/playbook/pb_date/date.html.erb
|
639
639
|
- app/pb_kits/playbook/pb_date/date.rb
|
640
640
|
- app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb
|
@@ -871,8 +871,8 @@ files:
|
|
871
871
|
- app/pb_kits/playbook/pb_filter/docs/index.js
|
872
872
|
- app/pb_kits/playbook/pb_filter/filter.html.erb
|
873
873
|
- app/pb_kits/playbook/pb_filter/filter.rb
|
874
|
-
- app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx
|
875
874
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss
|
875
|
+
- app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx
|
876
876
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_description.md
|
877
877
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.html.erb
|
878
878
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx
|
@@ -1073,8 +1073,8 @@ files:
|
|
1073
1073
|
- app/pb_kits/playbook/pb_icon/docs/index.js
|
1074
1074
|
- app/pb_kits/playbook/pb_icon/icon.html.erb
|
1075
1075
|
- app/pb_kits/playbook/pb_icon/icon.rb
|
1076
|
-
- app/pb_kits/playbook/pb_icon_circle/_icon_circle.jsx
|
1077
1076
|
- app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
|
1077
|
+
- app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx
|
1078
1078
|
- app/pb_kits/playbook/pb_icon_circle/docs/_description.md
|
1079
1079
|
- app/pb_kits/playbook/pb_icon_circle/docs/_footer.md
|
1080
1080
|
- app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.html.erb
|
@@ -1130,10 +1130,10 @@ files:
|
|
1130
1130
|
- app/pb_kits/playbook/pb_image/image.html.erb
|
1131
1131
|
- app/pb_kits/playbook/pb_image/image.rb
|
1132
1132
|
- app/pb_kits/playbook/pb_image/image.test.js
|
1133
|
-
- app/pb_kits/playbook/pb_kit/dateTime.
|
1133
|
+
- app/pb_kits/playbook/pb_kit/dateTime.ts
|
1134
1134
|
- app/pb_kits/playbook/pb_kit/pb_date_time.rb
|
1135
|
-
- app/pb_kits/playbook/pb_label_pill/_label_pill.jsx
|
1136
1135
|
- app/pb_kits/playbook/pb_label_pill/_label_pill.scss
|
1136
|
+
- app/pb_kits/playbook/pb_label_pill/_label_pill.tsx
|
1137
1137
|
- app/pb_kits/playbook/pb_label_pill/docs/_description.md
|
1138
1138
|
- app/pb_kits/playbook/pb_label_pill/docs/_footer.md
|
1139
1139
|
- app/pb_kits/playbook/pb_label_pill/docs/_label_pill_default.html.erb
|
@@ -1567,8 +1567,8 @@ files:
|
|
1567
1567
|
- app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb
|
1568
1568
|
- app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js
|
1569
1569
|
- app/pb_kits/playbook/pb_rich_text_editor/useFocus.js
|
1570
|
-
- app/pb_kits/playbook/pb_section_separator/_section_separator.jsx
|
1571
1570
|
- app/pb_kits/playbook/pb_section_separator/_section_separator.scss
|
1571
|
+
- app/pb_kits/playbook/pb_section_separator/_section_separator.tsx
|
1572
1572
|
- app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss
|
1573
1573
|
- app/pb_kits/playbook/pb_section_separator/docs/_description.md
|
1574
1574
|
- app/pb_kits/playbook/pb_section_separator/docs/_footer.md
|
@@ -1860,8 +1860,8 @@ files:
|
|
1860
1860
|
- app/pb_kits/playbook/pb_textarea/index.js
|
1861
1861
|
- app/pb_kits/playbook/pb_textarea/textarea.html.erb
|
1862
1862
|
- app/pb_kits/playbook/pb_textarea/textarea.rb
|
1863
|
-
- app/pb_kits/playbook/pb_time/_time.jsx
|
1864
1863
|
- app/pb_kits/playbook/pb_time/_time.scss
|
1864
|
+
- app/pb_kits/playbook/pb_time/_time.tsx
|
1865
1865
|
- app/pb_kits/playbook/pb_time/docs/_description.md
|
1866
1866
|
- app/pb_kits/playbook/pb_time/docs/_footer.md
|
1867
1867
|
- app/pb_kits/playbook/pb_time/docs/_time_align.html.erb
|
@@ -1990,15 +1990,27 @@ files:
|
|
1990
1990
|
- app/pb_kits/playbook/pb_toggle/toggle.html.erb
|
1991
1991
|
- app/pb_kits/playbook/pb_toggle/toggle.rb
|
1992
1992
|
- app/pb_kits/playbook/pb_tooltip/_tooltip.scss
|
1993
|
+
- app/pb_kits/playbook/pb_tooltip/_tooltip.tsx
|
1993
1994
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb
|
1995
|
+
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx
|
1996
|
+
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.md
|
1997
|
+
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb
|
1998
|
+
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx
|
1999
|
+
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.md
|
2000
|
+
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx
|
2001
|
+
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.md
|
2002
|
+
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx
|
2003
|
+
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.md
|
1994
2004
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.html.erb
|
1995
2005
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.md
|
1996
2006
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb
|
1997
2007
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb
|
1998
2008
|
- app/pb_kits/playbook/pb_tooltip/docs/example.yml
|
2009
|
+
- app/pb_kits/playbook/pb_tooltip/docs/index.js
|
1999
2010
|
- app/pb_kits/playbook/pb_tooltip/index.js
|
2000
2011
|
- app/pb_kits/playbook/pb_tooltip/tooltip.html.erb
|
2001
2012
|
- app/pb_kits/playbook/pb_tooltip/tooltip.rb
|
2013
|
+
- app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx
|
2002
2014
|
- app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.jsx
|
2003
2015
|
- app/pb_kits/playbook/pb_treemap_chart/docs/_description.md
|
2004
2016
|
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb
|
@@ -2052,6 +2064,8 @@ files:
|
|
2052
2064
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.html.erb
|
2053
2065
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx
|
2054
2066
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.md
|
2067
|
+
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.html.erb
|
2068
|
+
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.md
|
2055
2069
|
- app/pb_kits/playbook/pb_typeahead/docs/example.yml
|
2056
2070
|
- app/pb_kits/playbook/pb_typeahead/docs/index.js
|
2057
2071
|
- app/pb_kits/playbook/pb_typeahead/index.js
|
@@ -1,138 +0,0 @@
|
|
1
|
-
/* @flow */
|
2
|
-
|
3
|
-
import React from 'react'
|
4
|
-
import classnames from 'classnames'
|
5
|
-
|
6
|
-
import DateTime from '../pb_kit/dateTime'
|
7
|
-
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
8
|
-
import { globalProps } from '../utilities/globalProps'
|
9
|
-
|
10
|
-
import Body from '../pb_body/_body'
|
11
|
-
import Caption from '../pb_caption/_caption'
|
12
|
-
import Icon from '../pb_icon/_icon'
|
13
|
-
import Title from '../pb_title/_title'
|
14
|
-
|
15
|
-
type PbDateProps = {
|
16
|
-
alignment?: "left" | "center" | "right",
|
17
|
-
aria: Object,
|
18
|
-
className?: string,
|
19
|
-
data?: Object,
|
20
|
-
id?: string,
|
21
|
-
showDayOfWeek?: boolean,
|
22
|
-
showIcon?: boolean,
|
23
|
-
size?: string,
|
24
|
-
value: string | date,
|
25
|
-
}
|
26
|
-
|
27
|
-
const PbDate = (props: PbDateProps) => {
|
28
|
-
const {
|
29
|
-
aria = {},
|
30
|
-
alignment = 'left',
|
31
|
-
className,
|
32
|
-
data = {},
|
33
|
-
id,
|
34
|
-
showDayOfWeek = false,
|
35
|
-
showIcon = false,
|
36
|
-
size = 'md',
|
37
|
-
value,
|
38
|
-
} = props
|
39
|
-
|
40
|
-
const dateTimestamp = new DateTime({ value: value })
|
41
|
-
const weekday = dateTimestamp.toWeekday()
|
42
|
-
const month = dateTimestamp.toMonth()
|
43
|
-
const day = dateTimestamp.toDay()
|
44
|
-
const year = dateTimestamp.toYear()
|
45
|
-
const currentYear = new Date().getFullYear().toString()
|
46
|
-
|
47
|
-
const ariaProps = buildAriaProps(aria)
|
48
|
-
const dataProps = buildDataProps(data)
|
49
|
-
|
50
|
-
const classes = classnames(
|
51
|
-
buildCss('pb_date_kit', alignment),
|
52
|
-
globalProps(props),
|
53
|
-
className
|
54
|
-
)
|
55
|
-
|
56
|
-
return (
|
57
|
-
<div
|
58
|
-
{...ariaProps}
|
59
|
-
{...dataProps}
|
60
|
-
className={classes}
|
61
|
-
id={id}
|
62
|
-
>
|
63
|
-
<If condition={size == 'md' || size == 'lg'}>
|
64
|
-
|
65
|
-
<Title
|
66
|
-
size={4}
|
67
|
-
tag="h4"
|
68
|
-
>
|
69
|
-
<If condition={showIcon}>
|
70
|
-
<Body
|
71
|
-
className="pb_icon_kit_container"
|
72
|
-
color="light"
|
73
|
-
tag="span"
|
74
|
-
>
|
75
|
-
<Icon
|
76
|
-
fixedWidth
|
77
|
-
icon="calendar-alt"
|
78
|
-
/>
|
79
|
-
</Body>
|
80
|
-
</If>
|
81
|
-
<If condition={showDayOfWeek}>
|
82
|
-
{weekday}
|
83
|
-
<Body
|
84
|
-
color="light"
|
85
|
-
tag="span"
|
86
|
-
text=" • "
|
87
|
-
/>
|
88
|
-
</If>
|
89
|
-
<span>
|
90
|
-
{month}
|
91
|
-
{' '}
|
92
|
-
{day}
|
93
|
-
</span>
|
94
|
-
<If condition={currentYear != year}>
|
95
|
-
<span>
|
96
|
-
{`, ${year}`}
|
97
|
-
</span>
|
98
|
-
</If>
|
99
|
-
</Title>
|
100
|
-
<Else />
|
101
|
-
<>
|
102
|
-
<If condition={showIcon}>
|
103
|
-
<Caption
|
104
|
-
className="pb_icon_kit_container"
|
105
|
-
tag="span"
|
106
|
-
>
|
107
|
-
<Icon
|
108
|
-
fixedWidth
|
109
|
-
icon="calendar-alt"
|
110
|
-
size="sm"
|
111
|
-
/>
|
112
|
-
</Caption>
|
113
|
-
</If>
|
114
|
-
<If condition={showDayOfWeek}>
|
115
|
-
<Caption tag="div">
|
116
|
-
{weekday}
|
117
|
-
</Caption>
|
118
|
-
<Caption
|
119
|
-
color="light"
|
120
|
-
tag="div"
|
121
|
-
text=" • "
|
122
|
-
/>
|
123
|
-
</If>
|
124
|
-
<Caption tag="span">
|
125
|
-
{month}
|
126
|
-
{' '}
|
127
|
-
{day}
|
128
|
-
<If condition={currentYear != year}>
|
129
|
-
{`, ${year}`}
|
130
|
-
</If>
|
131
|
-
</Caption>
|
132
|
-
</>
|
133
|
-
</If>
|
134
|
-
</div>
|
135
|
-
)
|
136
|
-
}
|
137
|
-
|
138
|
-
export default PbDate
|
@@ -1,93 +0,0 @@
|
|
1
|
-
/* @flow */
|
2
|
-
|
3
|
-
import React, { useEffect, useState } from 'react'
|
4
|
-
import classnames from 'classnames'
|
5
|
-
|
6
|
-
import { globalProps } from '../utilities/globalProps'
|
7
|
-
|
8
|
-
import Icon from '../pb_icon/_icon'
|
9
|
-
import Title from '../pb_title/_title'
|
10
|
-
|
11
|
-
const iconMap = {
|
12
|
-
success: 'check',
|
13
|
-
error: 'exclamation-triangle',
|
14
|
-
neutral: 'info-circle',
|
15
|
-
tip: 'info-circle',
|
16
|
-
}
|
17
|
-
|
18
|
-
type FixedConfirmationToastProps = {
|
19
|
-
className?: string,
|
20
|
-
closeable?: boolean,
|
21
|
-
data?: string,
|
22
|
-
horizontal?: 'right' | 'left' | 'center',
|
23
|
-
id?: string,
|
24
|
-
multiLine?: boolean,
|
25
|
-
onClose?: () => void,
|
26
|
-
open?: boolean,
|
27
|
-
status?: 'success' | 'error' | 'neutral' | 'tip',
|
28
|
-
text: string,
|
29
|
-
vertical?: 'top' | 'bottom',
|
30
|
-
}
|
31
|
-
|
32
|
-
const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
|
33
|
-
const [showToast, toggleToast] = useState(true)
|
34
|
-
const {
|
35
|
-
className,
|
36
|
-
closeable = false,
|
37
|
-
horizontal,
|
38
|
-
multiLine = false,
|
39
|
-
onClose = () => {},
|
40
|
-
open = true,
|
41
|
-
status = 'neutral',
|
42
|
-
text,
|
43
|
-
vertical,
|
44
|
-
} = props
|
45
|
-
const css = classnames(
|
46
|
-
`pb_fixed_confirmation_toast_kit_${status}`,
|
47
|
-
{ '_multi_line': multiLine },
|
48
|
-
{ [`positioned_toast ${vertical} ${horizontal}`]: vertical && horizontal },
|
49
|
-
globalProps(props),
|
50
|
-
className
|
51
|
-
)
|
52
|
-
const icon = iconMap[status]
|
53
|
-
|
54
|
-
useEffect(() => {
|
55
|
-
toggleToast(open)
|
56
|
-
}, [open])
|
57
|
-
|
58
|
-
const handleClick = () => {
|
59
|
-
toggleToast(!closeable)
|
60
|
-
onClose()
|
61
|
-
}
|
62
|
-
|
63
|
-
return (
|
64
|
-
<If condition={showToast}>
|
65
|
-
<div
|
66
|
-
className={css}
|
67
|
-
onClick={handleClick}
|
68
|
-
>
|
69
|
-
<If condition={icon}>
|
70
|
-
<Icon
|
71
|
-
className="pb_icon"
|
72
|
-
fixedWidth
|
73
|
-
icon={icon}
|
74
|
-
/>
|
75
|
-
</If>
|
76
|
-
<Title
|
77
|
-
className="pb_fixed_confirmation_toast_text"
|
78
|
-
size={4}
|
79
|
-
text={text}
|
80
|
-
/>
|
81
|
-
<If condition={closeable}>
|
82
|
-
<Icon
|
83
|
-
className="pb_icon"
|
84
|
-
fixedWidth={false}
|
85
|
-
icon="times"
|
86
|
-
/>
|
87
|
-
</If>
|
88
|
-
</div>
|
89
|
-
</If>
|
90
|
-
)
|
91
|
-
}
|
92
|
-
|
93
|
-
export default FixedConfirmationToast
|
@@ -1,90 +0,0 @@
|
|
1
|
-
/* @flow */
|
2
|
-
|
3
|
-
import React from 'react'
|
4
|
-
import classnames from 'classnames'
|
5
|
-
|
6
|
-
import DateTime from '../pb_kit/dateTime.js'
|
7
|
-
import { buildCss } from '../utilities/props'
|
8
|
-
import { globalProps } from '../utilities/globalProps'
|
9
|
-
|
10
|
-
import Body from '../pb_body/_body'
|
11
|
-
import Caption from '../pb_caption/_caption'
|
12
|
-
import Icon from '../pb_icon/_icon'
|
13
|
-
|
14
|
-
type TimeProps = {
|
15
|
-
align?: 'left' | 'center' | 'right',
|
16
|
-
className?: string | array<string>,
|
17
|
-
data?: string,
|
18
|
-
date: string,
|
19
|
-
dark?: boolean,
|
20
|
-
id?: string,
|
21
|
-
showIcon?: boolean,
|
22
|
-
size?: 'md' | 'sm',
|
23
|
-
showTimezone?: boolean,
|
24
|
-
timeZone?: string,
|
25
|
-
}
|
26
|
-
|
27
|
-
const Time = (props: TimeProps) => {
|
28
|
-
const { align, className, date, showIcon, size, timeZone, showTimezone = true } = props
|
29
|
-
const classes = classnames(
|
30
|
-
buildCss('pb_time_kit', align, size),
|
31
|
-
globalProps(props),
|
32
|
-
className
|
33
|
-
)
|
34
|
-
|
35
|
-
const dateTimestamp = new DateTime({ value: date, zone: timeZone })
|
36
|
-
|
37
|
-
return (
|
38
|
-
<div className={classes}>
|
39
|
-
<If condition={showIcon}>
|
40
|
-
<Body
|
41
|
-
color="light"
|
42
|
-
tag="span"
|
43
|
-
>
|
44
|
-
<Icon
|
45
|
-
fixedWidth
|
46
|
-
icon="clock"
|
47
|
-
size={size === 'md' ? '' : 'sm'}
|
48
|
-
/>
|
49
|
-
</Body>
|
50
|
-
{' '}
|
51
|
-
</If>
|
52
|
-
|
53
|
-
<time dateTime={date}>
|
54
|
-
<span>
|
55
|
-
<If condition={size === 'md'}>
|
56
|
-
<Body
|
57
|
-
className="pb_time"
|
58
|
-
tag="span"
|
59
|
-
text={dateTimestamp.toTimeWithMeridian()}
|
60
|
-
/>
|
61
|
-
{' '}
|
62
|
-
<If condition={showTimezone}>
|
63
|
-
<Body
|
64
|
-
color="light"
|
65
|
-
tag="span"
|
66
|
-
text={dateTimestamp.toTimezone()}
|
67
|
-
/>
|
68
|
-
</If>
|
69
|
-
<Else />
|
70
|
-
<Caption
|
71
|
-
color="light"
|
72
|
-
tag="span"
|
73
|
-
text={dateTimestamp.toTimeWithMeridian()}
|
74
|
-
/>
|
75
|
-
{' '}
|
76
|
-
<If condition={showTimezone}>
|
77
|
-
<Caption
|
78
|
-
color="light"
|
79
|
-
tag="span"
|
80
|
-
text={dateTimestamp.toTimezone()}
|
81
|
-
/>
|
82
|
-
</If>
|
83
|
-
</If>
|
84
|
-
</span>
|
85
|
-
</time>
|
86
|
-
</div>
|
87
|
-
)
|
88
|
-
}
|
89
|
-
|
90
|
-
export default Time
|