playbook_ui 11.3.0.pre.alpha1 → 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/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_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/dist/reset.css +1 -60
- data/lib/playbook/version.rb +2 -2
- metadata +15 -13
- 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,92 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import classnames from "classnames";
|
|
3
|
+
|
|
4
|
+
import DateTime from "../pb_kit/dateTime";
|
|
5
|
+
import { buildCss } from "../utilities/props";
|
|
6
|
+
import { globalProps } from "../utilities/globalProps";
|
|
7
|
+
|
|
8
|
+
import Body from "../pb_body/_body";
|
|
9
|
+
import Caption from "../pb_caption/_caption";
|
|
10
|
+
import Icon from "../pb_icon/_icon";
|
|
11
|
+
|
|
12
|
+
type TimeProps = {
|
|
13
|
+
align?: "left" | "center" | "right";
|
|
14
|
+
className?: string | string[];
|
|
15
|
+
data?: string;
|
|
16
|
+
date: string;
|
|
17
|
+
dark?: boolean;
|
|
18
|
+
id?: string;
|
|
19
|
+
showIcon?: boolean;
|
|
20
|
+
size?: "md" | "sm";
|
|
21
|
+
showTimezone?: boolean;
|
|
22
|
+
timeZone?: string;
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
const Time = (props: TimeProps) => {
|
|
26
|
+
const {
|
|
27
|
+
align,
|
|
28
|
+
className,
|
|
29
|
+
date,
|
|
30
|
+
showIcon,
|
|
31
|
+
size,
|
|
32
|
+
timeZone,
|
|
33
|
+
showTimezone = true,
|
|
34
|
+
} = props;
|
|
35
|
+
const classes = classnames(
|
|
36
|
+
buildCss("pb_time_kit", align, size),
|
|
37
|
+
globalProps(props),
|
|
38
|
+
className
|
|
39
|
+
);
|
|
40
|
+
|
|
41
|
+
const dateTimestamp = new DateTime({ value: date, zone: timeZone });
|
|
42
|
+
|
|
43
|
+
return (
|
|
44
|
+
<div className={classes}>
|
|
45
|
+
{showIcon && (
|
|
46
|
+
<>
|
|
47
|
+
<Body color="light" tag="span">
|
|
48
|
+
<Icon fixedWidth icon="clock" size={size === "md" ? "" : "sm"} />
|
|
49
|
+
</Body>{" "}
|
|
50
|
+
</>
|
|
51
|
+
)}
|
|
52
|
+
|
|
53
|
+
<time dateTime={date}>
|
|
54
|
+
<span>
|
|
55
|
+
{size === "md" ? (
|
|
56
|
+
<>
|
|
57
|
+
<Body
|
|
58
|
+
className="pb_time"
|
|
59
|
+
tag="span"
|
|
60
|
+
text={dateTimestamp.toTimeWithMeridian()}
|
|
61
|
+
/>{" "}
|
|
62
|
+
{showTimezone && (
|
|
63
|
+
<Body
|
|
64
|
+
color="light"
|
|
65
|
+
tag="span"
|
|
66
|
+
text={dateTimestamp.toTimezone()}
|
|
67
|
+
/>
|
|
68
|
+
)}
|
|
69
|
+
</>
|
|
70
|
+
) : (
|
|
71
|
+
<>
|
|
72
|
+
<Caption
|
|
73
|
+
color="light"
|
|
74
|
+
tag="span"
|
|
75
|
+
text={dateTimestamp.toTimeWithMeridian()}
|
|
76
|
+
/>{" "}
|
|
77
|
+
{showTimezone && (
|
|
78
|
+
<Caption
|
|
79
|
+
color="light"
|
|
80
|
+
tag="span"
|
|
81
|
+
text={dateTimestamp.toTimezone()}
|
|
82
|
+
/>
|
|
83
|
+
)}
|
|
84
|
+
</>
|
|
85
|
+
)}
|
|
86
|
+
</span>
|
|
87
|
+
</time>
|
|
88
|
+
</div>
|
|
89
|
+
);
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
export default Time;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
import React from 'react'
|
|
4
4
|
import classnames from 'classnames'
|
|
5
5
|
|
|
6
|
-
import DateTime from '../pb_kit/dateTime
|
|
6
|
+
import DateTime from '../pb_kit/dateTime'
|
|
7
7
|
import { buildCss, buildDataProps } from '../utilities/props'
|
|
8
8
|
import { deprecatedProps, globalProps } from '../utilities/globalProps'
|
|
9
9
|
|
|
@@ -5,7 +5,7 @@ import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalPr
|
|
|
5
5
|
|
|
6
6
|
type TitleProps = {
|
|
7
7
|
aria?: {[key: string]: string},
|
|
8
|
-
children?: React.ReactChild[],
|
|
8
|
+
children?: React.ReactChild[] | React.ReactChild,
|
|
9
9
|
className?: string,
|
|
10
10
|
color?: "default" | "light" | "lighter" | "success" | "error" | "link",
|
|
11
11
|
data?: {[key: string]: string},
|
|
@@ -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",
|
data/dist/reset.css
CHANGED
|
@@ -1,61 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
/* Headings */
|
|
3
|
-
/* Standard Font Weights */
|
|
4
|
-
/* Non_Standard Font Weights */
|
|
5
|
-
/*=====================================
|
|
6
|
-
Base colors should not be documented.
|
|
7
|
-
Only document color use.
|
|
8
|
-
|
|
9
|
-
Colors -----------------------------*/
|
|
10
|
-
/* Specialty Gradient -----------------*/
|
|
11
|
-
/* Interface colors -------------------*/
|
|
12
|
-
/* Main colors ------------------------*/
|
|
13
|
-
/*=====================================
|
|
14
|
-
|
|
15
|
-
Background colors ------------------*/
|
|
16
|
-
/* Card colors ------------------*/
|
|
17
|
-
/* Active colors ----------------------*/
|
|
18
|
-
/* Hover colors -----------------------*/
|
|
19
|
-
/* Focus colors -----------------------*/
|
|
20
|
-
/* Border colors ----------------------*/
|
|
21
|
-
/* Shadow colors ----------------------*/
|
|
22
|
-
/* Text colors ------------------------*/
|
|
23
|
-
/* Data colors ------------------------*/
|
|
24
|
-
/* Status colors ----------------------*/
|
|
25
|
-
/* Link colors ------------------------*/
|
|
26
|
-
/* Product colors ---------------------*/
|
|
27
|
-
/* Category colors ---------------------*/
|
|
28
|
-
* {
|
|
29
|
-
box-sizing: border-box;
|
|
30
|
-
margin: 0;
|
|
31
|
-
padding: 0; }
|
|
32
|
-
*:before, *:after {
|
|
33
|
-
box-sizing: border-box; }
|
|
34
|
-
|
|
35
|
-
html {
|
|
36
|
-
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
37
|
-
height: 100vh;
|
|
38
|
-
overflow-x: hidden; }
|
|
39
|
-
|
|
40
|
-
body {
|
|
41
|
-
font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
|
|
42
|
-
font-size: 16px;
|
|
43
|
-
line-height: 1.5;
|
|
44
|
-
background-color: #F3F7FB;
|
|
45
|
-
height: 100%;
|
|
46
|
-
letter-spacing: 0;
|
|
47
|
-
font-weight: 400;
|
|
48
|
-
font-style: normal;
|
|
49
|
-
text-rendering: optimizeLegibility;
|
|
50
|
-
-moz-font-feature-settings: "liga" on;
|
|
51
|
-
color: #242B42;
|
|
52
|
-
margin: 0 !important;
|
|
53
|
-
padding: 0 !important;
|
|
54
|
-
box-sizing: border-box;
|
|
55
|
-
min-height: 100vh;
|
|
56
|
-
padding: 50px; }
|
|
57
|
-
|
|
58
|
-
a {
|
|
59
|
-
text-decoration: none;
|
|
60
|
-
color: #0056CF; }
|
|
1
|
+
*{box-sizing:border-box;margin:0;padding:0}*:before,*:after{box-sizing:border-box}html{-webkit-tap-highlight-color:rgba(0,0,0,0);height:100vh;overflow-x:hidden}body{font-family:"Proxima Nova","Helvetica Neue",Helvetica,Arial,sans_serif;font-size:16px;line-height:1.5;background-color:#F3F7FB;height:100%;letter-spacing:0;font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-moz-font-feature-settings:"liga" on;color:#242B42;margin:0 !important;padding:0 !important;box-sizing:border-box;min-height:100vh;padding:50px}a{text-decoration:none;color:#0056CF}
|
|
61
2
|
|
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
|
|
@@ -2064,6 +2064,8 @@ files:
|
|
|
2064
2064
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.html.erb
|
|
2065
2065
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx
|
|
2066
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
|
|
2067
2069
|
- app/pb_kits/playbook/pb_typeahead/docs/example.yml
|
|
2068
2070
|
- app/pb_kits/playbook/pb_typeahead/docs/index.js
|
|
2069
2071
|
- app/pb_kits/playbook/pb_typeahead/index.js
|
|
@@ -2264,9 +2266,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
|
2264
2266
|
version: '0'
|
|
2265
2267
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
2266
2268
|
requirements:
|
|
2267
|
-
- - "
|
|
2269
|
+
- - ">="
|
|
2268
2270
|
- !ruby/object:Gem::Version
|
|
2269
|
-
version:
|
|
2271
|
+
version: '0'
|
|
2270
2272
|
requirements: []
|
|
2271
2273
|
rubygems_version: 3.3.7
|
|
2272
2274
|
signing_key:
|
|
@@ -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
|