@sproutsocial/racine 12.2.0-partner-logos.1 → 12.2.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.
- package/CHANGELOG.md +3272 -0
- package/__flow__/Checkbox/styles.js +75 -75
- package/__flow__/Collapsible/index.js +2 -3
- package/__flow__/Image/index.js +2 -10
- package/__flow__/SegmentedControl/index.js +2 -3
- package/__flow__/TableCell/index.js +2 -9
- package/__flow__/ToggleHint/index.js +2 -9
- package/__flow__/index.js +1 -0
- package/__flow__/systemProps/color.js +2 -1
- package/__flow__/utils/responsiveProps/index.test.js +2 -10
- package/commonjs/index.js +6 -1
- package/lib/index.js +2 -1
- package/package.json +2 -2
|
@@ -182,90 +182,90 @@ const getIcon = (type, color) => {
|
|
|
182
182
|
|
|
183
183
|
// eslint-disable-next-line prettier/prettier
|
|
184
184
|
export const CheckboxContainer: StyledComponent<any, TypeTheme, *> = styled.span(
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
&:hover:before {
|
|
216
|
-
opacity: ${props.disabled && !props.checked ? 0 : 1};
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
${props.disabled &&
|
|
220
|
-
css`
|
|
221
|
-
opacity: 0.4;
|
|
222
|
-
`}
|
|
223
|
-
|
|
224
|
-
input[type='checkbox'] {
|
|
225
|
-
box-sizing: border-box;
|
|
226
|
-
appearance: none;
|
|
227
|
-
margin: 0;
|
|
228
|
-
padding: 0;
|
|
229
|
-
width: ${props.theme.space[400]};
|
|
230
|
-
height: ${props.theme.space[400]};
|
|
231
|
-
border: 1px solid ${props.theme.colors.form.border.base};
|
|
232
|
-
border-radius: 4px;
|
|
233
|
-
background-color: ${props.theme.colors.form.background.base};
|
|
234
|
-
transition: all ${props.theme.duration.fast}
|
|
235
|
-
${props.theme.easing.ease_in};
|
|
236
|
-
cursor: ${props.disabled ? "not-allowed" : "pointer"};
|
|
237
|
-
flex-shrink: 0;
|
|
238
|
-
|
|
239
|
-
&:not(:checked) {
|
|
240
|
-
${!props.indeterminate &&
|
|
241
|
-
css`
|
|
242
|
-
border-color: ${props.theme.colors
|
|
243
|
-
.neutral[300]} !important; /* We don't want the focus ring to remove the border */
|
|
244
|
-
background-color: ${props.theme.colors.form.background.base};
|
|
245
|
-
`}
|
|
185
|
+
(props) => css`
|
|
186
|
+
display: inline-flex;
|
|
187
|
+
align-items: center;
|
|
188
|
+
box-sizing: border-box;
|
|
189
|
+
position: relative;
|
|
190
|
+
transition: all ${props.theme.duration.fast} ${props.theme.easing.ease_in};
|
|
191
|
+
|
|
192
|
+
@supports (-webkit-appearance: none) {
|
|
193
|
+
&:before {
|
|
194
|
+
/* stylelint-disable */
|
|
195
|
+
content: url("data:image/svg+xml;utf8,${getIcon(
|
|
196
|
+
props.indeterminate ? "indeterminate" : "check",
|
|
197
|
+
|
|
198
|
+
props.checked
|
|
199
|
+
? props.theme.colors.form.background.base
|
|
200
|
+
: props.theme.colors.form.border.base
|
|
201
|
+
)}");
|
|
202
|
+
opacity: ${props.checked ? 1 : 0};
|
|
203
|
+
position: absolute;
|
|
204
|
+
width: ${props.theme.space[400]};
|
|
205
|
+
height: ${props.theme.space[400]};
|
|
206
|
+
text-align: center;
|
|
207
|
+
transform: translateY(1px);
|
|
208
|
+
line-height: 1;
|
|
209
|
+
margin: auto;
|
|
210
|
+
pointer-events: none;
|
|
211
|
+
transition: ${props.theme.duration.fast}
|
|
212
|
+
${props.theme.easing.ease_inout};
|
|
246
213
|
}
|
|
247
214
|
|
|
248
|
-
&:
|
|
249
|
-
|
|
250
|
-
background-color: ${props.theme.colors.form.background.selected};
|
|
215
|
+
&:hover:before {
|
|
216
|
+
opacity: ${props.disabled && !props.checked ? 0 : 1};
|
|
251
217
|
}
|
|
252
218
|
|
|
253
|
-
${props.
|
|
254
|
-
props.checked &&
|
|
219
|
+
${props.disabled &&
|
|
255
220
|
css`
|
|
256
|
-
|
|
257
|
-
background-color: ${props.theme.colors.form.background
|
|
258
|
-
.selected} !important;
|
|
221
|
+
opacity: 0.4;
|
|
259
222
|
`}
|
|
260
223
|
|
|
261
|
-
|
|
262
|
-
|
|
224
|
+
input[type='checkbox'] {
|
|
225
|
+
box-sizing: border-box;
|
|
226
|
+
appearance: none;
|
|
227
|
+
margin: 0;
|
|
228
|
+
padding: 0;
|
|
229
|
+
width: ${props.theme.space[400]};
|
|
230
|
+
height: ${props.theme.space[400]};
|
|
231
|
+
border: 1px solid ${props.theme.colors.form.border.base};
|
|
232
|
+
border-radius: 4px;
|
|
233
|
+
background-color: ${props.theme.colors.form.background.base};
|
|
234
|
+
transition: all ${props.theme.duration.fast}
|
|
235
|
+
${props.theme.easing.ease_in};
|
|
236
|
+
cursor: ${props.disabled ? "not-allowed" : "pointer"};
|
|
237
|
+
flex-shrink: 0;
|
|
238
|
+
|
|
239
|
+
&:not(:checked) {
|
|
240
|
+
${!props.indeterminate &&
|
|
241
|
+
css`
|
|
242
|
+
border-color: ${props.theme.colors
|
|
243
|
+
.neutral[300]} !important; /* We don't want the focus ring to remove the border */
|
|
244
|
+
background-color: ${props.theme.colors.form.background.base};
|
|
245
|
+
`}
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
&:checked {
|
|
249
|
+
border-color: ${props.theme.colors.form.border.selected};
|
|
250
|
+
background-color: ${props.theme.colors.form.background.selected};
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
${props.indeterminate &&
|
|
254
|
+
props.checked &&
|
|
255
|
+
css`
|
|
256
|
+
border-color: ${props.theme.colors.form.border.selected} !important;
|
|
257
|
+
background-color: ${props.theme.colors.form.background
|
|
258
|
+
.selected} !important;
|
|
259
|
+
`}
|
|
260
|
+
|
|
261
|
+
&:focus {
|
|
262
|
+
${focusRing}
|
|
263
|
+
}
|
|
263
264
|
}
|
|
264
265
|
}
|
|
265
|
-
}
|
|
266
266
|
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
);
|
|
267
|
+
${COMMON}
|
|
268
|
+
`
|
|
269
|
+
);
|
|
270
270
|
|
|
271
271
|
export default Container;
|
|
@@ -73,9 +73,8 @@ const Trigger = ({ children, ...rest }) => {
|
|
|
73
73
|
};
|
|
74
74
|
|
|
75
75
|
const Panel = ({ children, ...rest }) => {
|
|
76
|
-
const { isOpen, id, offset, collapsedHeight, openHeight } =
|
|
77
|
-
CollapsibleContext
|
|
78
|
-
);
|
|
76
|
+
const { isOpen, id, offset, collapsedHeight, openHeight } =
|
|
77
|
+
useContext(CollapsibleContext);
|
|
79
78
|
const ref = useRef();
|
|
80
79
|
const measurement = useMeasure(ref);
|
|
81
80
|
const [isHidden, setIsHidden] = useState(undefined);
|
package/__flow__/Image/index.js
CHANGED
|
@@ -80,16 +80,8 @@ export default class Image extends React.Component<TypeProps, TypeState> {
|
|
|
80
80
|
};
|
|
81
81
|
|
|
82
82
|
render() {
|
|
83
|
-
const {
|
|
84
|
-
|
|
85
|
-
title,
|
|
86
|
-
onClick,
|
|
87
|
-
onError,
|
|
88
|
-
onLoad,
|
|
89
|
-
src,
|
|
90
|
-
qa,
|
|
91
|
-
...rest
|
|
92
|
-
} = this.props;
|
|
83
|
+
const { alt, title, onClick, onError, onLoad, src, qa, ...rest } =
|
|
84
|
+
this.props;
|
|
93
85
|
|
|
94
86
|
return (
|
|
95
87
|
<ImageContainer
|
|
@@ -17,9 +17,8 @@ type TypeSegmentedControlContext = {
|
|
|
17
17
|
onChange: (e: SyntheticInputEvent<HTMLInputElement>) => void,
|
|
18
18
|
};
|
|
19
19
|
|
|
20
|
-
const SegmentedControlContext =
|
|
21
|
-
null
|
|
22
|
-
);
|
|
20
|
+
const SegmentedControlContext =
|
|
21
|
+
React.createContext<?TypeSegmentedControlContext>(null);
|
|
23
22
|
|
|
24
23
|
type TypeSegmentedControlItemProps = {
|
|
25
24
|
/** The value of this item. Should be unique among sibling items. */
|
|
@@ -22,15 +22,8 @@ export type TypeTableCell = {
|
|
|
22
22
|
*/
|
|
23
23
|
export default class TableCell extends React.Component<TypeTableCell> {
|
|
24
24
|
render() {
|
|
25
|
-
const {
|
|
26
|
-
|
|
27
|
-
content,
|
|
28
|
-
colSpan,
|
|
29
|
-
width,
|
|
30
|
-
align,
|
|
31
|
-
children,
|
|
32
|
-
...rest
|
|
33
|
-
} = this.props;
|
|
25
|
+
const { id, content, colSpan, width, align, children, ...rest } =
|
|
26
|
+
this.props;
|
|
34
27
|
|
|
35
28
|
return (
|
|
36
29
|
<Container
|
|
@@ -32,15 +32,8 @@ export default class ToggleHint extends React.Component<TypeProps> {
|
|
|
32
32
|
};
|
|
33
33
|
|
|
34
34
|
render() {
|
|
35
|
-
const {
|
|
36
|
-
|
|
37
|
-
isOpen,
|
|
38
|
-
openString,
|
|
39
|
-
closeString,
|
|
40
|
-
qa,
|
|
41
|
-
className,
|
|
42
|
-
...rest
|
|
43
|
-
} = this.props;
|
|
35
|
+
const { icon, isOpen, openString, closeString, qa, className, ...rest } =
|
|
36
|
+
this.props;
|
|
44
37
|
|
|
45
38
|
return (
|
|
46
39
|
<Container
|
package/__flow__/index.js
CHANGED
|
@@ -72,3 +72,4 @@ export { default as Listbox, ListboxButton } from "./Listbox";
|
|
|
72
72
|
export { default as OverflowList } from "./OverflowList";
|
|
73
73
|
export { SingleDatePicker, DateRangePicker } from "./DatePicker";
|
|
74
74
|
export { VisuallyHidden } from "./VisuallyHidden";
|
|
75
|
+
export { default as PartnerLogo } from "./PartnerLogo";
|
|
@@ -14,7 +14,8 @@ import type {
|
|
|
14
14
|
|
|
15
15
|
// https://styled-system.com/table#color
|
|
16
16
|
|
|
17
|
-
type TypeBackgroundColorSystemProp =
|
|
17
|
+
type TypeBackgroundColorSystemProp =
|
|
18
|
+
TypeResponsiveBaseSystemProp<BackgroundColorProperty>;
|
|
18
19
|
export type TypeColorSystemProps = $ReadOnly<{|
|
|
19
20
|
backgroundColor?: TypeBackgroundColorSystemProp,
|
|
20
21
|
bg?: TypeBackgroundColorSystemProp,
|
|
@@ -19,21 +19,13 @@ describe("normalizeResponsiveProp", () => {
|
|
|
19
19
|
|
|
20
20
|
it("should handle arrays with 4 values", () => {
|
|
21
21
|
expect(normalizeResponsiveProp([0, 1, 2, 3])).toMatchObject([
|
|
22
|
-
0,
|
|
23
|
-
1,
|
|
24
|
-
2,
|
|
25
|
-
3,
|
|
26
|
-
3,
|
|
22
|
+
0, 1, 2, 3, 3,
|
|
27
23
|
]);
|
|
28
24
|
});
|
|
29
25
|
|
|
30
26
|
it("should handle arrays with 5 values", () => {
|
|
31
27
|
expect(normalizeResponsiveProp([0, 1, 2, 3, 4])).toMatchObject([
|
|
32
|
-
0,
|
|
33
|
-
1,
|
|
34
|
-
2,
|
|
35
|
-
3,
|
|
36
|
-
4,
|
|
28
|
+
0, 1, 2, 3, 4,
|
|
37
29
|
]);
|
|
38
30
|
});
|
|
39
31
|
});
|
package/commonjs/index.js
CHANGED
|
@@ -62,6 +62,7 @@ var _exportNames = {
|
|
|
62
62
|
Menu: true,
|
|
63
63
|
Listbox: true,
|
|
64
64
|
OverflowList: true,
|
|
65
|
+
PartnerLogo: true,
|
|
65
66
|
sproutLightTheme: true,
|
|
66
67
|
sproutDarkTheme: true,
|
|
67
68
|
toast: true,
|
|
@@ -73,7 +74,7 @@ var _exportNames = {
|
|
|
73
74
|
DateRangePicker: true,
|
|
74
75
|
VisuallyHidden: true
|
|
75
76
|
};
|
|
76
|
-
exports.visuallyHidden = exports.useTextContent = exports.useSelect = exports.useMultiselect = exports.useInteractiveColor = exports.toast = exports.theme = exports.sproutLightTheme = exports.sproutDarkTheme = exports.focusRing = exports.disabled = exports.darkTheme = exports.VisuallyHidden = exports.Tooltip = exports.TokenInput = exports.Token = exports.ToggleHint = exports.ToastContainer = exports.ThemeProvider = exports.Textarea = exports.Text = exports.Tabs = exports.TableRowAccordion = exports.TableHeaderCell = exports.TableCell = exports.Table = exports.Switch = exports.Stack = exports.Skeleton = exports.SingleDatePicker = exports.Select = exports.SegmentedControl = exports.Radio = exports.Popout = exports.OverflowList = exports.Numeral = exports.Modal = exports.Message = exports.MenuItemContainer = exports.MenuButtonContext = exports.MenuButton = exports.Menu = exports.LoaderButton = exports.Loader = exports.ListboxButton = exports.Listbox = exports.Link = exports.Label = exports.KeyboardKey = exports.Input = exports.Indicator = exports.Image = exports.Icon = exports.FormField = exports.Fieldset = exports.EmptyState = exports.Drawer = exports.DateRangePicker = exports.Collapsible = exports.Checkbox = exports.ChartLegend = exports.CharacterCounter = exports.Card = exports.Button = exports.Breadcrumb = exports.Box = exports.Banner = exports.Badge = exports.Avatar = exports.Alert = void 0;
|
|
77
|
+
exports.visuallyHidden = exports.useTextContent = exports.useSelect = exports.useMultiselect = exports.useInteractiveColor = exports.toast = exports.theme = exports.sproutLightTheme = exports.sproutDarkTheme = exports.focusRing = exports.disabled = exports.darkTheme = exports.VisuallyHidden = exports.Tooltip = exports.TokenInput = exports.Token = exports.ToggleHint = exports.ToastContainer = exports.ThemeProvider = exports.Textarea = exports.Text = exports.Tabs = exports.TableRowAccordion = exports.TableHeaderCell = exports.TableCell = exports.Table = exports.Switch = exports.Stack = exports.Skeleton = exports.SingleDatePicker = exports.Select = exports.SegmentedControl = exports.Radio = exports.Popout = exports.PartnerLogo = exports.OverflowList = exports.Numeral = exports.Modal = exports.Message = exports.MenuItemContainer = exports.MenuButtonContext = exports.MenuButton = exports.Menu = exports.LoaderButton = exports.Loader = exports.ListboxButton = exports.Listbox = exports.Link = exports.Label = exports.KeyboardKey = exports.Input = exports.Indicator = exports.Image = exports.Icon = exports.FormField = exports.Fieldset = exports.EmptyState = exports.Drawer = exports.DateRangePicker = exports.Collapsible = exports.Checkbox = exports.ChartLegend = exports.CharacterCounter = exports.Card = exports.Button = exports.Breadcrumb = exports.Box = exports.Banner = exports.Badge = exports.Avatar = exports.Alert = void 0;
|
|
77
78
|
|
|
78
79
|
var _systemProps = require("./systemProps");
|
|
79
80
|
|
|
@@ -334,6 +335,10 @@ var _VisuallyHidden = require("./VisuallyHidden");
|
|
|
334
335
|
|
|
335
336
|
exports.VisuallyHidden = _VisuallyHidden.VisuallyHidden;
|
|
336
337
|
|
|
338
|
+
var _PartnerLogo = _interopRequireDefault(require("./PartnerLogo"));
|
|
339
|
+
|
|
340
|
+
exports.PartnerLogo = _PartnerLogo.default;
|
|
341
|
+
|
|
337
342
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
338
343
|
|
|
339
344
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
package/lib/index.js
CHANGED
|
@@ -60,4 +60,5 @@ export { MenuItemContainer } from "./Menu/styles";
|
|
|
60
60
|
export { default as Listbox, ListboxButton } from "./Listbox";
|
|
61
61
|
export { default as OverflowList } from "./OverflowList";
|
|
62
62
|
export { SingleDatePicker, DateRangePicker } from "./DatePicker";
|
|
63
|
-
export { VisuallyHidden } from "./VisuallyHidden";
|
|
63
|
+
export { VisuallyHidden } from "./VisuallyHidden";
|
|
64
|
+
export { default as PartnerLogo } from "./PartnerLogo";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/racine",
|
|
3
|
-
"version": "12.2.0
|
|
3
|
+
"version": "12.2.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"files": [
|
|
6
6
|
"__flow__",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"lib",
|
|
10
10
|
"codemods",
|
|
11
11
|
"bin/racine-codemod.js",
|
|
12
|
-
"
|
|
12
|
+
"CHANGELOG.md"
|
|
13
13
|
],
|
|
14
14
|
"bin": {
|
|
15
15
|
"racine-codemod": "bin/racine-codemod.js",
|