@indico-data/design-system 1.0.30 → 1.0.32
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/lib/components/inputs/SearchInput/SearchInput.d.ts +4 -0
- package/lib/components/inputs/SearchInput/SearchInput.stories.d.ts +8 -0
- package/lib/components/inputs/SearchInput/SearchInput.styles.d.ts +5 -273
- package/lib/index.d.ts +4 -0
- package/lib/index.esm.js +33 -7
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +33 -7
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/inputs/SearchInput/SearchInput.stories.tsx +16 -0
- package/src/components/inputs/SearchInput/SearchInput.styles.ts +35 -3
- package/src/components/inputs/SearchInput/SearchInput.tsx +32 -5
package/lib/index.js
CHANGED
|
@@ -12295,20 +12295,46 @@ const StyledSearchField = styled.div `
|
|
|
12295
12295
|
input {
|
|
12296
12296
|
${inputCommon};
|
|
12297
12297
|
|
|
12298
|
-
padding: 5px
|
|
12298
|
+
padding: 5px;
|
|
12299
12299
|
font-size: ${typography.fontSize.base};
|
|
12300
12300
|
margin-bottom: 0;
|
|
12301
|
-
|
|
12301
|
+
${(props) => props.border &&
|
|
12302
|
+
styled.css `
|
|
12303
|
+
border: 1px solid currentColor;
|
|
12304
|
+
border-radius: 4px;
|
|
12305
|
+
`}
|
|
12306
|
+
${(props) => props.showSearchIcon &&
|
|
12307
|
+
styled.css `
|
|
12308
|
+
padding: 5px 5px 5px 25px;
|
|
12309
|
+
`}
|
|
12310
|
+
}
|
|
12311
|
+
|
|
12312
|
+
${(props) => props.showClearInputIcon &&
|
|
12313
|
+
styled.css `
|
|
12314
|
+
.clear-input {
|
|
12315
|
+
cursor: pointer;
|
|
12316
|
+
height: 10px;
|
|
12317
|
+
width: 10px;
|
|
12318
|
+
position: absolute;
|
|
12319
|
+
right: 10px;
|
|
12320
|
+
top: 50%;
|
|
12321
|
+
transform: translateY(-50%);
|
|
12322
|
+
&:hover {
|
|
12323
|
+
opacity: 0.5;
|
|
12324
|
+
}
|
|
12325
|
+
}
|
|
12326
|
+
`}
|
|
12302
12327
|
`;
|
|
12303
12328
|
|
|
12304
12329
|
// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
|
|
12305
12330
|
const SearchInput = (props) => {
|
|
12306
|
-
const { className, inputProps, onChange, onKeyUp, placeholder, value } = props;
|
|
12331
|
+
const { border, showSearchIcon, showClearInputIcon, className, inputProps, onChange, onClear, onKeyUp, placeholder, value, } = props;
|
|
12307
12332
|
const id = v4();
|
|
12308
|
-
return (React.createElement(StyledSearchField, { className: className, "data-cy": props['data-cy'], id: props.id },
|
|
12309
|
-
React.createElement("label", { htmlFor: id },
|
|
12310
|
-
React.createElement(Icon, { name: "fa-search", ariaLabel: "search" })),
|
|
12311
|
-
React.createElement("input", Object.assign({ type: "search", id: id, placeholder: placeholder, value: value, onChange: onChange, onKeyUp: onKeyUp }, inputProps))
|
|
12333
|
+
return (React.createElement(StyledSearchField, { className: className, border: border, showSearchIcon: showSearchIcon, showClearInputIcon: showClearInputIcon, "data-cy": props['data-cy'], id: props.id },
|
|
12334
|
+
showSearchIcon && (React.createElement("label", { htmlFor: id },
|
|
12335
|
+
React.createElement(Icon, { name: "fa-search", ariaLabel: "search" }))),
|
|
12336
|
+
React.createElement("input", Object.assign({ type: "search", id: id, placeholder: placeholder, value: value, onChange: onChange, onKeyUp: onKeyUp }, inputProps)),
|
|
12337
|
+
showClearInputIcon && (React.createElement(Icon, { name: "x-close", ariaLabel: "clear input", className: "clear-input", onClick: onClear }))));
|
|
12312
12338
|
};
|
|
12313
12339
|
SearchInput.defaultProps = {
|
|
12314
12340
|
className: '',
|