playbook_ui 11.6.1.pre.alpha.rubocop.pre.performance1 → 11.7.0.pre.alpha.pre.guagechart1
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/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.rb +2 -1
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss +0 -3
- 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_popover/popover.rb +1 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +0 -1
- data/app/pb_kits/playbook/plugins/pb_chart.js +5 -0
- data/app/pb_kits/playbook/utilities/text.ts +1 -1
- data/lib/playbook/version.rb +2 -2
- metadata +22 -6
- 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,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
|