Doc: More Prettier Changes on SearchComponent

zimmerman-team · Nov 29, 2024 · 93f8b6f · 93f8b6f
1 parent ff28991
commit 93f8b6f
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 105 deletions.
diff --git a/src/components/SearchInput/SearchInput.stories.tsx b/src/components/SearchInput/SearchInput.stories.tsx
@@ -1,60 +1,58 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { MySearchInput } from './SearchInput';
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { MySearchInput } from "./SearchInput";
 import { ReactComponent as ExplorerSearchIcon } from "../../assets/vectors/ExplorerSearchIcon.svg";
-import  colors  from "../../theme/colorsSeaerchInput";
-import { Box } from '@mui/material';
+import colors from "../../theme/colorsSeaerchInput";
+import { Box } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import ClearIcon from "@mui/icons-material/Clear";
-import IconButton from '@mui/material/IconButton';
-
+import IconButton from "@mui/material/IconButton";
 
 const meta = {
-  title: 'Example/SearchInput',
+  title: "Example/SearchInput",
   component: MySearchInput,
   parameters: {
-    layout: 'centered',
+    layout: "centered",
   },
-  tags: ['autodocs'],
+  tags: ["autodocs"],
 } satisfies Meta<typeof MySearchInput>;
 
 export default meta;
 type Story = StoryObj<typeof MySearchInput>;
 
-
 // AIDA search input
 export const AIDASearchInput: Story = {
   args: {
-    placeholder: 'Search',
+    placeholder: "Search",
     startAdornment: <ExplorerSearchIcon />,
     showBorder: true,
-    gap: '4px',
-    display: 'flex',
-    alignItems: 'center',
-    background: colors.secondary.disableButton, 
-    padding: '4px 8px',
-    borderRadius: '5px',
-    width: '100%',
-    inputBorder: 'none',
-    inputWidth: '255px',
-    inputOutline: 'none',
-    inputBackground: 'transparent',
-    inputLineHeight: '20px',
-    inputFontSize: '14px',
+    gap: "4px",
+    display: "flex",
+    alignItems: "center",
+    background: colors.secondary.disableButton,
+    padding: "4px 8px",
+    borderRadius: "5px",
+    width: "100%",
+    inputBorder: "none",
+    inputWidth: "255px",
+    inputOutline: "none",
+    inputBackground: "transparent",
+    inputLineHeight: "20px",
+    inputFontSize: "14px",
     inputColor: colors.secondary.grayText,
     inputPlaceholderFontSize: colors.secondary.grayText,
   },
   parameters: {
     design: {
-      type: 'figma',
-      url: 'https://www.figma.com/design/vgdX46lAwjQwfV6YyEfaG4/AIDA-V3-Main-Design?node-id=1545-368913&t=NBjQ0fD59Wjtejp8-4',
+      type: "figma",
+      url: "https://www.figma.com/design/vgdX46lAwjQwfV6YyEfaG4/AIDA-V3-Main-Design?node-id=1545-368913&t=NBjQ0fD59Wjtejp8-4",
     },
   },
 };
 
 // Openaid search input
 export const OpenaidSearchInput: Story = {
-  args:{
+  args: {
     endAdornment: (
       <Box
         sx={{
@@ -63,7 +61,7 @@ export const OpenaidSearchInput: Story = {
           height: "32px",
           borderRadius: "50%",
           alignItems: "center",
-          position: "relative", 
+          position: "relative",
           justifyContent: "center",
           display: "flex",
           backgroundColor: colors.secondary.grayLight,
@@ -79,56 +77,56 @@ export const OpenaidSearchInput: Story = {
       </Box>
     ),
     showBorder: false,
-    placeholder: 'Search',
+    placeholder: "Search",
     inputFontSize: 16,
     inputBorderRadius: 30,
     inputColor: colors.primary.blue,
     inputBackground: "rgba(227, 227, 227, 0.5)",
     inputBoxShadow: "0px 2px 3px 0px rgba(97, 97, 97, 0.20) inset",
     inputOpacity: 1,
-    inputWidth:"600px",
-    inputpadding: "6px 40px 6px 22px",    
+    inputWidth: "600px",
+    inputpadding: "6px 40px 6px 22px",
   },
   parameters: {
     design: {
-      type: 'figma',
-      url: 'https://www.figma.com/design/uZX8k1fv1MfzGTEBXuvjeV/MFA---Main-Design-2.0?node-id=7038-257366&t=bv9BC7T69S3II3az-4',
-    }
-  }
+      type: "figma",
+      url: "https://www.figma.com/design/uZX8k1fv1MfzGTEBXuvjeV/MFA---Main-Design-2.0?node-id=7038-257366&t=bv9BC7T69S3II3az-4",
+    },
+  },
 };
 
 // Data explorer search input
 export const DataExplorerInput: Story = {
   args: {
-     endAdornment: (
+    endAdornment: (
       <ExplorerSearchIcon
-      style={{
-        color: colors.primary.black,
-        transform: "rotate(90deg)",
-      }}
-    />
-     ),
-    placeholder: 'E.g Kenya',
-    display: 'flex',
-    padding: '8px 20px',
-    position: 'relative',
-    borderRadius: '8px',
+        style={{
+          color: colors.primary.black,
+          transform: "rotate(90deg)",
+        }}
+      />
+    ),
+    placeholder: "E.g Kenya",
+    display: "flex",
+    padding: "8px 20px",
+    position: "relative",
+    borderRadius: "8px",
     background: "#F1F3F4",
-    width: '100%',
-    inputWidth: '100%',
-    inputFontSize: '14px',
-    inputOutline: 'none',
+    width: "100%",
+    inputWidth: "100%",
+    inputFontSize: "14px",
+    inputOutline: "none",
     inputFontWeight: 400,
-    inputBorder: 'none',
+    inputBorder: "none",
     inputBackground: "#F1F3F4",
     inputColor: colors.primary.black,
   },
   parameters: {
     design: {
-      type: 'figma',
-      url: 'https://www.figma.com/design/U3wokyt1snyPxQyHWytR0v/GLOBAL-FUND---V3?node-id=4948-263242&t=NOLx3NFpHxY7gK5x-4'
-    }
-  }
+      type: "figma",
+      url: "https://www.figma.com/design/U3wokyt1snyPxQyHWytR0v/GLOBAL-FUND---V3?node-id=4948-263242&t=NOLx3NFpHxY7gK5x-4",
+    },
+  },
 };
 
 // Search Input with both icons
@@ -140,12 +138,12 @@ export const WithBothIcons: StoryObj = {
       <IconButton
         size="small"
         aria-label="clear search"
-        onClick={() => console.log('clear search')}
-        sx={{ 
-          padding: '4px',
-          '&:hover': {
-            backgroundColor: 'transparent'
-          }
+        onClick={() => console.log("clear search")}
+        sx={{
+          padding: "4px",
+          "&:hover": {
+            backgroundColor: "transparent",
+          },
         }}
       >
         <ClearIcon />
@@ -167,4 +165,4 @@ export const CustomStyle: StoryObj = {
       },
     },
   },
-};
+};
diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx
@@ -5,24 +5,22 @@ import Box from "@mui/material/Box";
 import colors from "../../theme/colorsSeaerchInput";
 import { SxProps, Theme } from "@mui/material";
 
-interface Boxprops{
-
-   icon?: React.ReactNode;
-   placeholder?: string;
-   gap?: string;
-   showBorder?: boolean;
-   fullWidth?: boolean;
-   value?: string;
-   shape?: "rounded" | "sharp" | "circle";
-   background?: string;
-   padding?: string;
-   width?: string;
-   display?: string;
-   alignItems?: string;
-   border?: string;
-   borderRadius?: string;
-   position?: string;
-
+interface Boxprops {
+  icon?: React.ReactNode;
+  placeholder?: string;
+  gap?: string;
+  showBorder?: boolean;
+  fullWidth?: boolean;
+  value?: string;
+  shape?: "rounded" | "sharp" | "circle";
+  background?: string;
+  padding?: string;
+  width?: string;
+  display?: string;
+  alignItems?: string;
+  border?: string;
+  borderRadius?: string;
+  position?: string;
 }
 interface SearchInputProps extends Boxprops {
   // InputBase props
@@ -31,10 +29,10 @@ interface SearchInputProps extends Boxprops {
   inputOutline?: string;
   inputBackground?: string;
   inputLineHeight?: string;
-  inputFontSize?: string|number;
+  inputFontSize?: string | number;
   inputPlaceholderFontSize?: string;
   inputColor?: string;
-  inputBorderRadius?: string|number;
+  inputBorderRadius?: string | number;
   inputBoxShadow?: string;
   inputOpacity?: number;
   inputFontWeight?: number;
@@ -47,7 +45,6 @@ interface SearchInputProps extends Boxprops {
   inputpadding?: string;
 }
 
-
 export function MySearchInput(props: Readonly<SearchInputProps>) {
   const {
     display,
@@ -66,17 +63,25 @@ export function MySearchInput(props: Readonly<SearchInputProps>) {
 
   return (
     <Box
-      sx={{
-        display: display,
-        alignItems: "center",
-        border: showBorder ? "1px solid #A1AEBD" : "none",
-        backgroundColor: background,
-        gap: gap,
-        position: position,
-        padding: padding,
-        borderRadius: borderRadius ? borderRadius : shape === "circle" ? "50%" : shape === "rounded" ? "30px" : "5px",
-        width: width,
-      } as SxProps<Theme>}
+      sx={
+        {
+          display: display,
+          alignItems: "center",
+          border: showBorder ? "1px solid #A1AEBD" : "none",
+          backgroundColor: background,
+          gap: gap,
+          position: position,
+          padding: padding,
+          borderRadius: borderRadius
+            ? borderRadius
+            : shape === "circle"
+              ? "50%"
+              : shape === "rounded"
+                ? "30px"
+                : "5px",
+          width: width,
+        } as SxProps<Theme>
+      }
     >
       <InputBase
         placeholder={placeholder}
@@ -87,29 +92,29 @@ export function MySearchInput(props: Readonly<SearchInputProps>) {
         onFocus={props.onFocus}
         onBlur={props.onBlur}
         aria-label={props.ariaLabel}
-        sx={{ 
+        sx={{
           width: props.inputWidth,
           border: props.inputBorder,
           outline: props.inputOutline,
           background: props.inputBackground,
           lineHeight: props.inputLineHeight,
           fontSize: props.inputFontSize,
           borderRadius: props.inputBorderRadius,
-          color:props.inputColor,
+          color: props.inputColor,
           boxShadow: props.inputBoxShadow,
-          opacity:props.inputOpacity,
+          opacity: props.inputOpacity,
           fontWeight: props.inputFontWeight,
           padding: props.inputpadding,
-          '& .MuiInputBase-input': {
-            paddingLeft: props.startAdornment ? '8px' : '0', 
+          "& .MuiInputBase-input": {
+            paddingLeft: props.startAdornment ? "8px" : "0",
           },
         }}
         inputProps={{
           style: {
-            textIndent: props.startAdornment ? '8px' : '0',  
+            textIndent: props.startAdornment ? "8px" : "0",
           },
-        }}      
+        }}
       />
     </Box>
   );
-}
+}
diff --git a/src/components/SearchInput/index.ts b/src/components/SearchInput/index.ts
@@ -1 +1 @@
-export {MySearchInput} from "./SearchInput";
+export { MySearchInput } from "./SearchInput";
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export {MySearchInput} from "./SearchInput";
		export { MySearchInput } from "./SearchInput";