@indico-data/design-system 1.0.30 → 1.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "1.0.30",
+  "version": "1.0.31",
   "description": "",
   "private": false,
   "author": "",

package/src/components/inputs/SearchInput/SearchInput.stories.tsx

@@ -15,3 +15,19 @@ export default meta;
 type Story = StoryObj<typeof SearchInput>;
 
 export const Base: Story = {};
+
+export const Border: Story = {
+  args: { border: true },
+};
+
+export const SearchIcon: Story = {
+  args: { showSearchIcon: true },
+};
+
+export const ClearInputIcon: Story = {
+  args: { showClearInputIcon: true },
+};
+
+export const ClearInputIconWithBorder: Story = {
+  args: { showClearInputIcon: true, border: true },
+};

package/src/components/inputs/SearchInput/SearchInput.styles.ts

@@ -1,10 +1,14 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { TYPOGRAPHY } from '@/tokens';
 
 import { inputCommon } from '../inputsCommon.styles';
 
-export const StyledSearchField = styled.div`
+export const StyledSearchField = styled.div<{
+  border?: boolean;
+  showSearchIcon?: boolean;
+  showClearInputIcon?: boolean;
+}>`
   position: relative;
   background: transparent;
 
@@ -18,8 +22,36 @@ export const StyledSearchField = styled.div`
   input {
     ${inputCommon};
 
-    padding: 5px 5px 5px 25px;
+    padding: 5px;
     font-size: ${TYPOGRAPHY.fontSize.base};
     margin-bottom: 0;
+    ${(props) =>
+      props.border &&
+      css`
+        border: 1px solid currentColor;
+        border-radius: 4px;
+      `}
+    ${(props) =>
+      props.showSearchIcon &&
+      css`
+        padding: 5px 5px 5px 25px;
+      `}
   }
+
+  ${(props) =>
+    props.showClearInputIcon &&
+    css`
+      .clear-input {
+        cursor: pointer;
+        height: 10px;
+        width: 10px;
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        &:hover {
+          opacity: 0.5;
+        }
+      }
+    `}
 `;

package/src/components/inputs/SearchInput/SearchInput.tsx

@@ -9,23 +9,47 @@ import { PermafrostComponent } from '@/types';
 import { StyledSearchField } from './SearchInput.styles';
 
 type Props = PermafrostComponent & {
+  border?: boolean;
+  showClearInputIcon?: boolean;
+  showSearchIcon?: boolean;
   inputProps?: { [key: string]: string };
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onClear?(): void;
   onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
   placeholder?: string;
   value?: string;
 };
 
 export const SearchInput = (props: Props) => {
-  const { className, inputProps, onChange, onKeyUp, placeholder, value } = props;
+  const {
+    border,
+    showSearchIcon,
+    showClearInputIcon,
+    className,
+    inputProps,
+    onChange,
+    onClear,
+    onKeyUp,
+    placeholder,
+    value,
+  } = props;
 
   const id = uuid();
 
   return (
-    <StyledSearchField className={className} data-cy={props['data-cy']} id={props.id}>
-      <label htmlFor={id}>
-        <Icon name="fa-search" ariaLabel="search" />
-      </label>
+    <StyledSearchField
+      className={className}
+      border={border}
+      showSearchIcon={showSearchIcon}
+      showClearInputIcon={showClearInputIcon}
+      data-cy={props['data-cy']}
+      id={props.id}
+    >
+      {showSearchIcon && (
+        <label htmlFor={id}>
+          <Icon name="fa-search" ariaLabel="search" />
+        </label>
+      )}
 
       <input
         type="search"
@@ -36,6 +60,9 @@ export const SearchInput = (props: Props) => {
         onKeyUp={onKeyUp}
         {...inputProps}
       />
+      {showClearInputIcon && (
+        <Icon name="x-close" ariaLabel="clear input" className="clear-input" onClick={onClear} />
+      )}
     </StyledSearchField>
   );
 };