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
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 638051af443b06b03b9de8a9092d21f8ce06f3806e60bd43cec8463ce428a69a
|
4
|
+
data.tar.gz: c43d207810694a318a13280bb917b8a295cb44310e05433a262639bee6b8778e
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 80aad4d2179d46bc3332b631a1f4e4e90640d61b3cbd3bfa1894cd8e5710f20ecea86f8d71cada0811e9ac434a99c70cd31a7622c33df2434d82370b5f0a9157
|
7
|
+
data.tar.gz: 8a8562a4d3efced667089ca24567758a341255de55f885d1068c7722b301886d427f07943a03ae391d47a1b1d5b4ce279d7bb80a42d7e53042ed9b22ab71d4dc
|
@@ -8,10 +8,10 @@ import Icon from '../pb_icon/_icon'
|
|
8
8
|
type EventHandler = (React.MouseEventHandler<HTMLElement>)
|
9
9
|
|
10
10
|
type ButtonPropTypes = {
|
11
|
-
aria?: {[key: string]: string},
|
11
|
+
aria?: { [key: string]: string },
|
12
12
|
children?: React.ReactChild[] | React.ReactChild,
|
13
13
|
className?: string | string[],
|
14
|
-
data?: {[key: string]: string},
|
14
|
+
data?: { [key: string]: string },
|
15
15
|
disabled?: boolean,
|
16
16
|
fixedWidth?: boolean,
|
17
17
|
form?: string,
|
@@ -24,11 +24,11 @@ type ButtonPropTypes = {
|
|
24
24
|
onClick?: EventHandler,
|
25
25
|
size?: 'sm' | 'md' | 'lg',
|
26
26
|
text?: string,
|
27
|
-
type
|
27
|
+
type?: 'inline' | null,
|
28
28
|
htmlType: 'submit' | 'reset' | 'button' | undefined,
|
29
29
|
value?: string | null,
|
30
30
|
variant: 'primary' | 'secondary' | 'link',
|
31
|
-
wrapperClass
|
31
|
+
wrapperClass?: string,
|
32
32
|
} & GlobalProps
|
33
33
|
|
34
34
|
const buttonClassName = (props: ButtonPropTypes) => {
|
@@ -99,8 +99,8 @@ const Button = (props: ButtonPropTypes) => {
|
|
99
99
|
)
|
100
100
|
|
101
101
|
const ifLoading = () => {
|
102
|
-
if (loading){
|
103
|
-
return(
|
102
|
+
if (loading) {
|
103
|
+
return (
|
104
104
|
<>
|
105
105
|
{loadingIcon}
|
106
106
|
</>
|
data/app/pb_kits/playbook/pb_circle_icon_button/{_circle_icon_button.jsx → _circle_icon_button.tsx}
RENAMED
@@ -1,11 +1,7 @@
|
|
1
|
-
/* @flow */
|
2
|
-
|
3
1
|
import React from 'react'
|
4
2
|
import classnames from 'classnames'
|
5
3
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
6
4
|
|
7
|
-
import type { Callback } from '../types'
|
8
|
-
|
9
5
|
import { noop } from '../utilities/props'
|
10
6
|
import { globalProps } from '../utilities/globalProps'
|
11
7
|
|
@@ -13,21 +9,21 @@ import Button from '../pb_button/_button'
|
|
13
9
|
import Icon from '../pb_icon/_icon'
|
14
10
|
|
15
11
|
type CircleIconButtonProps = {
|
16
|
-
aria?:
|
12
|
+
aria?: { [key: string]: string },
|
17
13
|
className?: string,
|
18
14
|
dark?: boolean,
|
19
|
-
data?:
|
15
|
+
data?: { [key: string]: string },
|
20
16
|
disabled?: boolean,
|
21
17
|
icon: string,
|
22
18
|
id?: string,
|
23
19
|
link?: string,
|
24
|
-
onClick?:
|
20
|
+
onClick?: React.MouseEventHandler<HTMLElement>,
|
25
21
|
newWindow?: boolean,
|
26
|
-
type?: 'button' | 'submit' | 'reset',
|
22
|
+
type?: 'button' | 'submit' | 'reset' | undefined,
|
27
23
|
variant?: 'primary' | 'secondary' | 'link',
|
28
24
|
}
|
29
25
|
|
30
|
-
const CircleIconButton = (props: CircleIconButtonProps) => {
|
26
|
+
const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
|
31
27
|
const {
|
32
28
|
aria = {},
|
33
29
|
className,
|
@@ -61,11 +57,11 @@ const CircleIconButton = (props: CircleIconButtonProps) => {
|
|
61
57
|
<Button
|
62
58
|
dark={dark}
|
63
59
|
disabled={disabled}
|
60
|
+
htmlType={type}
|
64
61
|
link={link}
|
65
62
|
newWindow={newWindow}
|
66
63
|
onClick={onClick}
|
67
64
|
text={null}
|
68
|
-
type={type}
|
69
65
|
variant={variant}
|
70
66
|
>
|
71
67
|
<Icon
|
@@ -17,7 +17,7 @@ test('returns namespaced class name', () => {
|
|
17
17
|
})
|
18
18
|
|
19
19
|
test('returns correct icon', () => {
|
20
|
-
|
20
|
+
render(
|
21
21
|
<>
|
22
22
|
<Contact
|
23
23
|
contactDetail="Cell"
|
@@ -85,3 +85,47 @@ test('returns correct icon', () => {
|
|
85
85
|
expect(screen.getByTestId('test-extension').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-plus')
|
86
86
|
expect(screen.getByTestId('test-empty').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
|
87
87
|
})
|
88
|
+
|
89
|
+
test("not compliant values return null in phone related contact types", () => {
|
90
|
+
const notCompliantValues = [
|
91
|
+
"349-185-998223",
|
92
|
+
"349-1858",
|
93
|
+
"",
|
94
|
+
"2",
|
95
|
+
"string",
|
96
|
+
]
|
97
|
+
const contactTypes = [
|
98
|
+
"cell",
|
99
|
+
"work",
|
100
|
+
"work-cell",
|
101
|
+
"wrong-number",
|
102
|
+
"wrong-phone",
|
103
|
+
"wrong-type",
|
104
|
+
"extension",
|
105
|
+
]
|
106
|
+
|
107
|
+
const buildData = contactTypes.reduce((response, type) => {
|
108
|
+
notCompliantValues.forEach((value) => response.push({ type, value }))
|
109
|
+
return response
|
110
|
+
}, [])
|
111
|
+
|
112
|
+
const { rerender } = render(
|
113
|
+
<Contact
|
114
|
+
contactType=""
|
115
|
+
contactValue=""
|
116
|
+
data={{ testid: `contact-kit-null-test` }}
|
117
|
+
/>
|
118
|
+
)
|
119
|
+
buildData.map(({ type, value }) => {
|
120
|
+
rerender(
|
121
|
+
<Contact
|
122
|
+
contactType={type}
|
123
|
+
contactValue={value}
|
124
|
+
data={{ testid: `contact-kit-null-test` }}
|
125
|
+
/>
|
126
|
+
)
|
127
|
+
expect(screen.getByTestId("contact-kit-null-test")).toHaveTextContent(
|
128
|
+
"null"
|
129
|
+
)
|
130
|
+
})
|
131
|
+
})
|
@@ -1,5 +1,3 @@
|
|
1
|
-
/* @flow */
|
2
|
-
|
3
1
|
import React from 'react'
|
4
2
|
import classnames from 'classnames'
|
5
3
|
|
@@ -14,10 +12,10 @@ type CurrencyProps = {
|
|
14
12
|
abbreviate?: boolean,
|
15
13
|
align?: 'center' | 'left' | 'right',
|
16
14
|
amount: string,
|
17
|
-
aria?:
|
15
|
+
aria?: {[key:string]:string},
|
18
16
|
className?: string,
|
19
17
|
dark?: boolean,
|
20
|
-
data?:
|
18
|
+
data?: {[key:string]:string},
|
21
19
|
decimals?: 'default' | 'matching',
|
22
20
|
emphasized?: boolean,
|
23
21
|
id?: string,
|
@@ -28,7 +26,7 @@ type CurrencyProps = {
|
|
28
26
|
unit?: string,
|
29
27
|
}
|
30
28
|
|
31
|
-
const sizes = {
|
29
|
+
const sizes: {lg: 1, md: 3, sm: 4} = {
|
32
30
|
lg: 1,
|
33
31
|
md: 3,
|
34
32
|
sm: 4,
|
@@ -68,12 +66,12 @@ const Currency = (props: CurrencyProps) => {
|
|
68
66
|
const ariaProps = buildAriaProps(aria)
|
69
67
|
const dataProps = buildDataProps(data)
|
70
68
|
const classes = classnames(
|
71
|
-
buildCss('pb_currency_kit', align, size
|
69
|
+
buildCss('pb_currency_kit', align, size),
|
72
70
|
globalProps(props),
|
73
71
|
className
|
74
72
|
)
|
75
73
|
|
76
|
-
const getFormattedNumber = (input) => new Intl.NumberFormat('en-US', {
|
74
|
+
const getFormattedNumber = (input: number | any ) => new Intl.NumberFormat('en-US', {
|
77
75
|
notation: 'compact',
|
78
76
|
maximumFractionDigits: 1,
|
79
77
|
}).format(input)
|
@@ -126,11 +124,18 @@ const Currency = (props: CurrencyProps) => {
|
|
126
124
|
dark={dark}
|
127
125
|
>
|
128
126
|
{getAbbreviation}
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
127
|
+
{
|
128
|
+
unit ? (
|
129
|
+
<>
|
130
|
+
{unit}
|
131
|
+
</>
|
132
|
+
) : (
|
133
|
+
<>
|
134
|
+
{getDecimalValue}
|
135
|
+
</>
|
136
|
+
)
|
137
|
+
}
|
138
|
+
|
134
139
|
</Body>
|
135
140
|
</div>
|
136
141
|
</div>
|
@@ -0,0 +1,101 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import classnames from "classnames";
|
3
|
+
|
4
|
+
import DateTime from "../pb_kit/dateTime";
|
5
|
+
import { buildAriaProps, buildCss, buildDataProps } 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
|
+
import Title from "../pb_title/_title";
|
12
|
+
|
13
|
+
type PbDateProps = {
|
14
|
+
alignment?: "left" | "center" | "right";
|
15
|
+
aria: { [key: string]: string };
|
16
|
+
className?: string;
|
17
|
+
data?: { [key: string]: string };
|
18
|
+
id?: string;
|
19
|
+
showDayOfWeek?: boolean;
|
20
|
+
showIcon?: boolean;
|
21
|
+
size?: "sm" | "md" | "lg";
|
22
|
+
value: string | Date;
|
23
|
+
};
|
24
|
+
|
25
|
+
const PbDate = (props: PbDateProps) => {
|
26
|
+
const {
|
27
|
+
aria = {},
|
28
|
+
alignment = "left",
|
29
|
+
className,
|
30
|
+
data = {},
|
31
|
+
id,
|
32
|
+
showDayOfWeek = false,
|
33
|
+
showIcon = false,
|
34
|
+
size = "md",
|
35
|
+
value,
|
36
|
+
} = props;
|
37
|
+
|
38
|
+
const dateTimestamp = new DateTime({ value: value });
|
39
|
+
const weekday = dateTimestamp.toWeekday();
|
40
|
+
const month = dateTimestamp.toMonth();
|
41
|
+
const day = dateTimestamp.toDay();
|
42
|
+
const year = dateTimestamp.toYear();
|
43
|
+
const currentYear = new Date().getFullYear().toString();
|
44
|
+
|
45
|
+
const ariaProps = buildAriaProps(aria);
|
46
|
+
const dataProps = buildDataProps(data);
|
47
|
+
|
48
|
+
const classes = classnames(
|
49
|
+
buildCss("pb_date_kit", alignment),
|
50
|
+
globalProps(props),
|
51
|
+
className
|
52
|
+
);
|
53
|
+
|
54
|
+
return (
|
55
|
+
<div {...ariaProps} {...dataProps} className={classes} id={id}>
|
56
|
+
{size == "md" || size == "lg" ? (
|
57
|
+
<Title size={4} tag="h4">
|
58
|
+
{showIcon && (
|
59
|
+
<Body className="pb_icon_kit_container" color="light" tag="span">
|
60
|
+
<Icon fixedWidth icon="calendar-alt" />
|
61
|
+
</Body>
|
62
|
+
)}
|
63
|
+
|
64
|
+
{showDayOfWeek && (
|
65
|
+
<>
|
66
|
+
{weekday}
|
67
|
+
<Body color="light" tag="span" text=" • " />
|
68
|
+
</>
|
69
|
+
)}
|
70
|
+
|
71
|
+
<span>
|
72
|
+
{month} {day}
|
73
|
+
</span>
|
74
|
+
{currentYear != year && <span>{`, ${year}`}</span>}
|
75
|
+
</Title>
|
76
|
+
) : (
|
77
|
+
<>
|
78
|
+
{showIcon && (
|
79
|
+
<Caption className="pb_icon_kit_container" tag="span">
|
80
|
+
<Icon fixedWidth icon="calendar-alt" size="sm" />
|
81
|
+
</Caption>
|
82
|
+
)}
|
83
|
+
|
84
|
+
{showDayOfWeek && (
|
85
|
+
<>
|
86
|
+
<Caption tag="div">{weekday}</Caption>
|
87
|
+
<Caption color="light" tag="div" text=" • " />
|
88
|
+
</>
|
89
|
+
)}
|
90
|
+
|
91
|
+
<Caption tag="span">
|
92
|
+
{month} {day}
|
93
|
+
{currentYear != year && <>{`, ${year}`}</>}
|
94
|
+
</Caption>
|
95
|
+
</>
|
96
|
+
)}
|
97
|
+
</div>
|
98
|
+
);
|
99
|
+
};
|
100
|
+
|
101
|
+
export default PbDate;
|
@@ -5,16 +5,15 @@ import { fireEvent, render, screen, waitFor, within } from '../utilities/test-ut
|
|
5
5
|
import DatePicker from './_date_picker'
|
6
6
|
import { getTimezoneText } from './plugins/timeSelect'
|
7
7
|
|
8
|
+
|
9
|
+
|
10
|
+
jest.setSystemTime(new Date('01/01/2020'));
|
8
11
|
const DEFAULT_DATE = new Date()
|
9
|
-
|
10
|
-
DEFAULT_DATE.setMonth(1)
|
11
|
-
DEFAULT_DATE.setDate(1)
|
12
|
-
DEFAULT_DATE.setHours(12)
|
13
|
-
DEFAULT_DATE.setMinutes(0)
|
12
|
+
|
14
13
|
|
15
14
|
describe('DatePicker Kit', () => {
|
16
15
|
beforeEach(() => {
|
17
|
-
jest.spyOn(console, 'error').mockImplementation(() => {});
|
16
|
+
jest.spyOn(console, 'error').mockImplementation(() => { });
|
18
17
|
});
|
19
18
|
|
20
19
|
test('renders DatePicker input field', () => {
|
@@ -44,10 +43,12 @@ describe('DatePicker Kit', () => {
|
|
44
43
|
|
45
44
|
const kit = screen.getByTestId(testId)
|
46
45
|
|
46
|
+
|
47
47
|
const input = within(kit).getByPlaceholderText('Select Date')
|
48
48
|
expect(input).toBeInTheDocument()
|
49
|
+
|
49
50
|
await waitFor(() => {
|
50
|
-
expect(input).toHaveValue('
|
51
|
+
expect(input).toHaveValue('01/01/2020')
|
51
52
|
})
|
52
53
|
})
|
53
54
|
|
@@ -143,7 +144,7 @@ describe('DatePicker Kit', () => {
|
|
143
144
|
}),
|
144
145
|
)
|
145
146
|
await waitFor(() => {
|
146
|
-
expect(input).toHaveValue('
|
147
|
+
expect(input).toHaveValue('01/01/2020 at 12:00 AM')
|
147
148
|
})
|
148
149
|
|
149
150
|
fireEvent(
|
@@ -154,7 +155,7 @@ describe('DatePicker Kit', () => {
|
|
154
155
|
}),
|
155
156
|
)
|
156
157
|
await waitFor(() => {
|
157
|
-
expect(input).toHaveValue('
|
158
|
+
expect(input).toHaveValue('01/01/2020 at 12:00 PM')
|
158
159
|
})
|
159
160
|
})
|
160
161
|
})
|
@@ -0,0 +1,80 @@
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
2
|
+
import classnames from "classnames";
|
3
|
+
|
4
|
+
import { globalProps } from "../utilities/globalProps";
|
5
|
+
|
6
|
+
import Icon from "../pb_icon/_icon";
|
7
|
+
import Title from "../pb_title/_title";
|
8
|
+
|
9
|
+
const iconMap = {
|
10
|
+
success: "check",
|
11
|
+
error: "exclamation-triangle",
|
12
|
+
neutral: "info-circle",
|
13
|
+
tip: "info-circle",
|
14
|
+
};
|
15
|
+
|
16
|
+
type FixedConfirmationToastProps = {
|
17
|
+
className?: string;
|
18
|
+
closeable?: boolean;
|
19
|
+
data?: string;
|
20
|
+
horizontal?: "right" | "left" | "center";
|
21
|
+
id?: string;
|
22
|
+
multiLine?: boolean;
|
23
|
+
onClose?: () => void;
|
24
|
+
open?: boolean;
|
25
|
+
status?: "success" | "error" | "neutral" | "tip";
|
26
|
+
text: string;
|
27
|
+
vertical?: "top" | "bottom";
|
28
|
+
};
|
29
|
+
|
30
|
+
const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
|
31
|
+
const [showToast, toggleToast] = useState(true);
|
32
|
+
const {
|
33
|
+
className,
|
34
|
+
closeable = false,
|
35
|
+
horizontal,
|
36
|
+
multiLine = false,
|
37
|
+
onClose = () => {},
|
38
|
+
open = true,
|
39
|
+
status = "neutral",
|
40
|
+
text,
|
41
|
+
vertical,
|
42
|
+
} = props;
|
43
|
+
const css = classnames(
|
44
|
+
`pb_fixed_confirmation_toast_kit_${status}`,
|
45
|
+
{ _multi_line: multiLine },
|
46
|
+
{ [`positioned_toast ${vertical} ${horizontal}`]: vertical && horizontal },
|
47
|
+
globalProps(props),
|
48
|
+
className
|
49
|
+
);
|
50
|
+
const icon = iconMap[status];
|
51
|
+
|
52
|
+
useEffect(() => {
|
53
|
+
toggleToast(open);
|
54
|
+
}, [open]);
|
55
|
+
|
56
|
+
const handleClick = () => {
|
57
|
+
toggleToast(!closeable);
|
58
|
+
onClose();
|
59
|
+
};
|
60
|
+
|
61
|
+
return (
|
62
|
+
<>
|
63
|
+
{showToast && (
|
64
|
+
<div className={css} onClick={handleClick}>
|
65
|
+
{icon && <Icon className="pb_icon" fixedWidth icon={icon} />}
|
66
|
+
<Title
|
67
|
+
className="pb_fixed_confirmation_toast_text"
|
68
|
+
size={4}
|
69
|
+
text={text}
|
70
|
+
/>
|
71
|
+
{closeable && (
|
72
|
+
<Icon className="pb_icon" fixedWidth={false} icon="times" />
|
73
|
+
)}
|
74
|
+
</div>
|
75
|
+
)}
|
76
|
+
</>
|
77
|
+
);
|
78
|
+
};
|
79
|
+
|
80
|
+
export default FixedConfirmationToast;
|
@@ -1,5 +1,3 @@
|
|
1
|
-
/* @flow */
|
2
|
-
|
3
1
|
import React from 'react'
|
4
2
|
|
5
3
|
import classnames from 'classnames'
|
@@ -10,10 +8,10 @@ import { globalProps } from '../utilities/globalProps'
|
|
10
8
|
import Icon from '../pb_icon/_icon'
|
11
9
|
|
12
10
|
type IconCircleProps = {
|
13
|
-
aria?:
|
11
|
+
aria?: {[key:string]: string},
|
14
12
|
className?: string,
|
15
13
|
dark?: boolean,
|
16
|
-
data?:
|
14
|
+
data?: {[key:string]: string},
|
17
15
|
icon: string,
|
18
16
|
id?: string,
|
19
17
|
size?: "base" | "xs" | "sm" | "md" | "lg" | "xl",
|
@@ -1,23 +1,22 @@
|
|
1
|
-
/* @flow */
|
2
|
-
/*eslint-disable flowtype/space-before-type-colon */
|
3
1
|
|
4
|
-
import moment from 'moment'
|
2
|
+
import moment, { Moment } from 'moment'
|
5
3
|
import 'moment-strftime'
|
6
4
|
import 'moment-timezone'
|
7
5
|
|
8
6
|
type DateTimeType = {
|
9
|
-
value:
|
10
|
-
zone?:
|
7
|
+
value: string | Date,
|
8
|
+
zone?: string,
|
11
9
|
}
|
12
10
|
|
13
11
|
const ABBR_DAYS = ['SU', 'M', 'T', 'W', 'TH', 'F', 'S']
|
14
12
|
|
15
13
|
export default class DateTime {
|
14
|
+
value: Moment & any
|
16
15
|
constructor({ value, zone = 'America/New_York' }: DateTimeType) {
|
17
16
|
this.value = this.convertToTimestampZone(value, zone)
|
18
17
|
}
|
19
18
|
|
20
|
-
convertToTimestampZone(value, zone) {
|
19
|
+
convertToTimestampZone(value: string | Date, zone: string) {
|
21
20
|
return moment(value).tz(zone)
|
22
21
|
}
|
23
22
|
|
@@ -1,5 +1,3 @@
|
|
1
|
-
/* @flow */
|
2
|
-
|
3
1
|
import React from 'react'
|
4
2
|
import classnames from 'classnames'
|
5
3
|
import { globalProps } from '../utilities/globalProps'
|
@@ -10,9 +8,9 @@ import Pill from '../pb_pill/_pill'
|
|
10
8
|
import Caption from '../pb_caption/_caption'
|
11
9
|
|
12
10
|
type LabelPillProps = {
|
13
|
-
aria?:
|
11
|
+
aria?: {[key: string]:string},
|
14
12
|
className?: string,
|
15
|
-
data?:
|
13
|
+
data?: {[key: string]:string},
|
16
14
|
id?: string,
|
17
15
|
label?: string,
|
18
16
|
pillValue?: string,
|
@@ -2,7 +2,7 @@
|
|
2
2
|
|
3
3
|
import React from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
|
-
import DateTime from '../pb_kit/dateTime
|
5
|
+
import DateTime from '../pb_kit/dateTime'
|
6
6
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
7
7
|
import { globalProps } from '../utilities/globalProps'
|
8
8
|
|
@@ -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 { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
8
8
|
import { globalProps } from '../utilities/globalProps'
|
9
9
|
|
@@ -11,7 +11,7 @@ type PillProps = {
|
|
11
11
|
data?: {[key: string]: string},
|
12
12
|
id?: string,
|
13
13
|
text: string,
|
14
|
-
variant?: "success" | "warning" | "error" | "info" | "neutral",
|
14
|
+
variant?: "success" | "warning" | "error" | "info" | "neutral" | "primary",
|
15
15
|
textTransform?: "none" | "lowercase"
|
16
16
|
} & GlobalProps
|
17
17
|
|
data/app/pb_kits/playbook/pb_section_separator/{_section_separator.jsx → _section_separator.tsx}
RENAMED
@@ -1,4 +1,3 @@
|
|
1
|
-
/* @flow */
|
2
1
|
import React from 'react'
|
3
2
|
import classnames from 'classnames'
|
4
3
|
|
@@ -8,10 +7,10 @@ import { globalProps } from '../utilities/globalProps'
|
|
8
7
|
import Caption from '../pb_caption/_caption'
|
9
8
|
|
10
9
|
type SectionSeparatorProps = {
|
11
|
-
aria:
|
10
|
+
aria: { [key: string]: string; },
|
12
11
|
className: string,
|
13
12
|
dark?: boolean,
|
14
|
-
data:
|
13
|
+
data: { [key: string]: string; },
|
15
14
|
id: string,
|
16
15
|
orientation?: "horizontal" | "vertical",
|
17
16
|
text: string,
|
@@ -40,13 +39,13 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
|
|
40
39
|
className={classes}
|
41
40
|
id={id}
|
42
41
|
>
|
43
|
-
|
44
|
-
|
45
|
-
|
42
|
+
{
|
43
|
+
text && (
|
44
|
+
<span>
|
46
45
|
<Caption text={text} />
|
47
46
|
</span>
|
48
|
-
|
49
|
-
|
47
|
+
)
|
48
|
+
}
|
50
49
|
</div>
|
51
50
|
)
|
52
51
|
}
|