playbook_ui 11.3.0.pre.alpha1 → 11.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_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
|