playbook_ui 11.6.1.pre.alpha.rubocop.pre.performance1 → 11.7.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/data/menu.yml +0 -13
- data/app/pb_kits/playbook/index.js +1 -1
- data/app/pb_kits/playbook/pb_badge/badge.test.js +80 -0
- data/app/pb_kits/playbook/pb_button/_button.tsx +7 -2
- data/app/pb_kits/playbook/pb_button/_button_mixins.scss +7 -0
- data/app/pb_kits/playbook/pb_button/button.html.erb +11 -0
- data/app/pb_kits/playbook/pb_button/button.rb +3 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_block_content.html.erb +1 -1
- data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx +12 -9
- data/app/pb_kits/playbook/pb_button/docs/_button_block_content.md +1 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.html.erb +2 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx +23 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.md +1 -0
- data/app/pb_kits/playbook/pb_button/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_button/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_date_picker/{_date_picker.jsx → _date_picker.tsx} +58 -66
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +2 -1
- data/app/pb_kits/playbook/pb_date_picker/{date_picker_helper.js → date_picker_helper.ts} +37 -16
- data/app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.ts +171 -0
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss +0 -3
- data/app/pb_kits/playbook/pb_date_range_stacked/{_date_range_stacked.jsx → _date_range_stacked.tsx} +5 -6
- data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.test.js +127 -0
- data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx +90 -0
- data/app/pb_kits/playbook/pb_date_stacked/date_stacked.test.js +151 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.jsx +1 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.jsx +1 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.jsx +1 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reverse.jsx +1 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_sizes.jsx +1 -1
- data/app/pb_kits/playbook/pb_dialog/{_close_icon.jsx → _close_icon.tsx} +1 -3
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +217 -0
- data/app/pb_kits/playbook/pb_dialog/_dialog_context.tsx +3 -0
- data/app/pb_kits/playbook/pb_dialog/child_kits/{_dialog_body.jsx → _dialog_body.tsx} +6 -2
- data/app/pb_kits/playbook/pb_dialog/child_kits/{_dialog_footer.jsx → _dialog_footer.tsx} +8 -11
- data/app/pb_kits/playbook/pb_dialog/child_kits/{_dialog_header.jsx → _dialog_header.tsx} +12 -15
- data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx +2 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx +2 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +2 -2
- data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +34 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx +66 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.md +4 -0
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
- data/app/pb_kits/playbook/pb_filter/filter.rb +3 -0
- data/app/pb_kits/playbook/pb_filter/filter.test.js +76 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.html.erb +32 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +101 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.md +1 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb +2 -1
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx +2 -0
- data/app/pb_kits/playbook/pb_gauge/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +129 -0
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx +2 -2
- data/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js +60 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/{_icon_stat_value.jsx → _icon_stat_value.tsx} +2 -4
- data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +154 -0
- data/app/pb_kits/playbook/pb_icon_value/{_icon_value.jsx → _icon_value.tsx} +2 -4
- data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js +77 -0
- data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +123 -0
- data/app/pb_kits/playbook/pb_label_value/label_value.test.js +109 -0
- data/app/pb_kits/playbook/pb_layout/layout.test.js +1 -2
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +33 -0
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.tsx +1 -3
- data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +3 -1
- data/app/pb_kits/playbook/pb_lightbox/{_lightbox_header.tsx → Header/_lightbox_header.tsx} +8 -8
- data/app/pb_kits/playbook/pb_lightbox/{_lightbox_header_icon.tsx → Header/_lightbox_header_icon.tsx} +2 -2
- data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +2 -1
- data/app/pb_kits/playbook/pb_lightbox/lightbox.scss +8 -60
- data/app/pb_kits/playbook/pb_popover/popover.rb +1 -1
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +5 -5
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +0 -1
- data/app/pb_kits/playbook/pb_title/_title.tsx +1 -1
- data/app/pb_kits/playbook/playbook-rails.js +1 -1
- data/app/pb_kits/playbook/plugins/pb_chart.js +5 -0
- data/app/pb_kits/playbook/tokens/_spacing.scss +2 -0
- data/app/pb_kits/playbook/utilities/_spacing.scss +1 -0
- data/app/pb_kits/playbook/utilities/text.ts +1 -1
- data/lib/playbook/spacing.rb +1 -1
- data/lib/playbook/version.rb +2 -2
- metadata +39 -21
- data/app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.js +0 -137
- data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx +0 -103
- data/app/pb_kits/playbook/pb_dialog/_dialog.jsx +0 -223
- data/app/pb_kits/playbook/pb_dialog/_dialog_context.jsx +0 -3
- data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx +0 -127
- data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +0 -155
@@ -1,127 +0,0 @@
|
|
1
|
-
/* @flow */
|
2
|
-
|
3
|
-
import React from 'react'
|
4
|
-
import classnames from 'classnames'
|
5
|
-
|
6
|
-
import { joinPresent, titleize } from '../utilities/text'
|
7
|
-
import { globalProps } from '../utilities/globalProps'
|
8
|
-
|
9
|
-
import Body from '../pb_body/_body'
|
10
|
-
import Hashtag from '../pb_hashtag/_hashtag'
|
11
|
-
import Title from '../pb_title/_title'
|
12
|
-
|
13
|
-
type HomeAddressStreetProps = {
|
14
|
-
address: string,
|
15
|
-
addressCont: string,
|
16
|
-
city: string,
|
17
|
-
className?: string,
|
18
|
-
dark?: boolean,
|
19
|
-
emphasis: "street" | "city",
|
20
|
-
homeId: number,
|
21
|
-
houseStyle: string,
|
22
|
-
homeUrl: string,
|
23
|
-
newWindow: Boolean,
|
24
|
-
state: string,
|
25
|
-
zipcode: string,
|
26
|
-
territory: string,
|
27
|
-
}
|
28
|
-
|
29
|
-
const HomeAddressStreet = (props: HomeAddressStreetProps) => {
|
30
|
-
const {
|
31
|
-
address,
|
32
|
-
addressCont,
|
33
|
-
city,
|
34
|
-
className,
|
35
|
-
dark = false,
|
36
|
-
emphasis = 'street',
|
37
|
-
homeId,
|
38
|
-
homeUrl,
|
39
|
-
newWindow,
|
40
|
-
houseStyle,
|
41
|
-
state,
|
42
|
-
zipcode,
|
43
|
-
territory,
|
44
|
-
} = props
|
45
|
-
|
46
|
-
const classes = (className, dark) =>
|
47
|
-
classnames(
|
48
|
-
{
|
49
|
-
'pb_home_address_street': !dark,
|
50
|
-
'pb_home_address_street_dark': dark,
|
51
|
-
},
|
52
|
-
globalProps(props),
|
53
|
-
className
|
54
|
-
)
|
55
|
-
return (
|
56
|
-
<div className={classes(className, dark)}>
|
57
|
-
{
|
58
|
-
<Choose>
|
59
|
-
<When condition={emphasis == 'street'}>
|
60
|
-
<div>
|
61
|
-
<Title
|
62
|
-
className="pb_home_address_street_address"
|
63
|
-
dark={dark}
|
64
|
-
size={4}
|
65
|
-
>
|
66
|
-
{joinPresent([titleize(address), houseStyle], ' · ')}
|
67
|
-
</Title>
|
68
|
-
<Title
|
69
|
-
className="pb_home_address_street_address"
|
70
|
-
dark={dark}
|
71
|
-
size={4}
|
72
|
-
>
|
73
|
-
{titleize(addressCont)}
|
74
|
-
</Title>
|
75
|
-
<Body color="light">
|
76
|
-
{`${titleize(city)}, ${state} ${zipcode}`}
|
77
|
-
</Body>
|
78
|
-
</div>
|
79
|
-
</When>
|
80
|
-
<When condition={emphasis == 'city'}>
|
81
|
-
<div>
|
82
|
-
<Body color="light">
|
83
|
-
{joinPresent([titleize(address), houseStyle], ' · ')}
|
84
|
-
</Body>
|
85
|
-
<Body color="light">{titleize(addressCont)}</Body>
|
86
|
-
<div>
|
87
|
-
<Title
|
88
|
-
className="pb_home_address_street_address"
|
89
|
-
dark={dark}
|
90
|
-
size={4}
|
91
|
-
tag="span"
|
92
|
-
>
|
93
|
-
{`${titleize(city)}, ${state}`}
|
94
|
-
</Title>
|
95
|
-
<Body
|
96
|
-
color="light"
|
97
|
-
tag="span"
|
98
|
-
>
|
99
|
-
{` ${zipcode}`}
|
100
|
-
</Body>
|
101
|
-
</div>
|
102
|
-
</div>
|
103
|
-
</When>
|
104
|
-
</Choose>
|
105
|
-
}
|
106
|
-
|
107
|
-
<If condition={homeId}>
|
108
|
-
<Hashtag
|
109
|
-
classname="home-hashtag"
|
110
|
-
dark={dark}
|
111
|
-
newWindow={newWindow}
|
112
|
-
text={homeId}
|
113
|
-
type="home"
|
114
|
-
url={homeUrl || '#'}
|
115
|
-
/>
|
116
|
-
</If>
|
117
|
-
<Body
|
118
|
-
color="light"
|
119
|
-
tag="span"
|
120
|
-
>
|
121
|
-
<small>{territory}</small>
|
122
|
-
</Body>
|
123
|
-
</div>
|
124
|
-
)
|
125
|
-
}
|
126
|
-
|
127
|
-
export default HomeAddressStreet
|
@@ -1,155 +0,0 @@
|
|
1
|
-
/* @flow */
|
2
|
-
|
3
|
-
import React from 'react'
|
4
|
-
import classnames from 'classnames'
|
5
|
-
import DateTime from '../pb_kit/dateTime'
|
6
|
-
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
7
|
-
import { globalProps } from '../utilities/globalProps'
|
8
|
-
|
9
|
-
import Body from '../pb_body/_body'
|
10
|
-
import Caption from '../pb_caption/_caption'
|
11
|
-
import Flex from '../pb_flex/_flex'
|
12
|
-
import Icon from '../pb_icon/_icon'
|
13
|
-
import Title from '../pb_title/_title'
|
14
|
-
|
15
|
-
type LabelValueProps = {
|
16
|
-
active?: boolean,
|
17
|
-
aria?: object,
|
18
|
-
className?: string,
|
19
|
-
dark?: boolean,
|
20
|
-
data?: object,
|
21
|
-
date?: date,
|
22
|
-
id?: string,
|
23
|
-
label: string,
|
24
|
-
value?: string,
|
25
|
-
variant?: "default" | "details",
|
26
|
-
icon?: string,
|
27
|
-
description?: string,
|
28
|
-
title?: string,
|
29
|
-
}
|
30
|
-
|
31
|
-
const dateString = (value: DateTime) => {
|
32
|
-
const month = value.toMonthNum()
|
33
|
-
const day = value.toDay()
|
34
|
-
|
35
|
-
return ` · ${month}/${day}`
|
36
|
-
}
|
37
|
-
|
38
|
-
const LabelValue = (props: LabelValueProps) => {
|
39
|
-
const {
|
40
|
-
active = false,
|
41
|
-
aria = {},
|
42
|
-
className,
|
43
|
-
dark = false,
|
44
|
-
data = {},
|
45
|
-
date,
|
46
|
-
description,
|
47
|
-
icon,
|
48
|
-
id,
|
49
|
-
label,
|
50
|
-
title,
|
51
|
-
value,
|
52
|
-
variant = 'default',
|
53
|
-
} = props
|
54
|
-
|
55
|
-
const ariaProps = buildAriaProps(aria)
|
56
|
-
const dataProps = buildDataProps(data)
|
57
|
-
const formattedDate = new DateTime({ value: date })
|
58
|
-
const variantClass = variant === 'details' ? 'details' : ''
|
59
|
-
const classes = classnames(buildCss('pb_label_value_kit', variantClass), globalProps(props), className)
|
60
|
-
|
61
|
-
return (
|
62
|
-
<div
|
63
|
-
{...ariaProps}
|
64
|
-
{...dataProps}
|
65
|
-
className={classes}
|
66
|
-
description={description}
|
67
|
-
icon={icon}
|
68
|
-
id={id}
|
69
|
-
title={title}
|
70
|
-
>
|
71
|
-
<Caption
|
72
|
-
dark={dark}
|
73
|
-
text={label}
|
74
|
-
/>
|
75
|
-
<If condition={variant === 'details'}>
|
76
|
-
<Flex
|
77
|
-
inline
|
78
|
-
vertical="center"
|
79
|
-
>
|
80
|
-
<If condition={icon}>
|
81
|
-
<Body
|
82
|
-
color="light"
|
83
|
-
dark={dark}
|
84
|
-
marginRight="xs"
|
85
|
-
>
|
86
|
-
<Icon
|
87
|
-
dark={dark}
|
88
|
-
fixedWidth
|
89
|
-
icon={icon}
|
90
|
-
/>
|
91
|
-
</Body>
|
92
|
-
</If>
|
93
|
-
<If condition={description}>
|
94
|
-
<Body
|
95
|
-
color="light"
|
96
|
-
dark={dark}
|
97
|
-
marginRight="xs"
|
98
|
-
text={description}
|
99
|
-
/>
|
100
|
-
</If>
|
101
|
-
<Choose>
|
102
|
-
<When condition={active === true}>
|
103
|
-
<Flex
|
104
|
-
inline
|
105
|
-
vertical="center"
|
106
|
-
>
|
107
|
-
<If condition={title}>
|
108
|
-
<Title
|
109
|
-
dark={dark}
|
110
|
-
size={4}
|
111
|
-
text={title}
|
112
|
-
variant="link"
|
113
|
-
/>
|
114
|
-
</If>
|
115
|
-
<If condition={date}>
|
116
|
-
<Title
|
117
|
-
dark={dark}
|
118
|
-
marginLeft="xs"
|
119
|
-
size={4}
|
120
|
-
text={' ' + dateString(formattedDate)}
|
121
|
-
variant="link"
|
122
|
-
/>
|
123
|
-
</If>
|
124
|
-
</Flex>
|
125
|
-
</When>
|
126
|
-
<Otherwise>
|
127
|
-
<If condition={title}>
|
128
|
-
<Title
|
129
|
-
dark={dark}
|
130
|
-
size={4}
|
131
|
-
text={title}
|
132
|
-
/>
|
133
|
-
</If>
|
134
|
-
<If condition={date}>
|
135
|
-
<Title
|
136
|
-
dark={dark}
|
137
|
-
marginLeft="xs"
|
138
|
-
size={4}
|
139
|
-
text={' ' + dateString(formattedDate)}
|
140
|
-
/>
|
141
|
-
</If>
|
142
|
-
</Otherwise>
|
143
|
-
</Choose>
|
144
|
-
</Flex>
|
145
|
-
<Else />
|
146
|
-
<Body
|
147
|
-
dark={dark}
|
148
|
-
text={value}
|
149
|
-
/>
|
150
|
-
</If>
|
151
|
-
</div>
|
152
|
-
)
|
153
|
-
}
|
154
|
-
|
155
|
-
export default LabelValue
|