diff --git a/src/components/SearchInput/SearchInput.stories.tsx b/src/components/SearchInput/SearchInput.stories.tsx index 08f264c..b42d647 100644 --- 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; export default meta; type Story = StoryObj; - // AIDA search input export const AIDASearchInput: Story = { args: { - placeholder: 'Search', + placeholder: "Search", startAdornment: , 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: ( ), 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: ( - ), - 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 = { console.log('clear search')} - sx={{ - padding: '4px', - '&:hover': { - backgroundColor: 'transparent' - } + onClick={() => console.log("clear search")} + sx={{ + padding: "4px", + "&:hover": { + backgroundColor: "transparent", + }, }} > @@ -167,4 +165,4 @@ export const CustomStyle: StoryObj = { }, }, }, -}; \ No newline at end of file +}; diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx index 48c4995..394f264 100644 --- 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) { const { display, @@ -66,17 +63,25 @@ export function MySearchInput(props: Readonly) { return ( } + 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 + } > ) { onFocus={props.onFocus} onBlur={props.onBlur} aria-label={props.ariaLabel} - sx={{ + sx={{ width: props.inputWidth, border: props.inputBorder, outline: props.inputOutline, @@ -95,21 +100,21 @@ export function MySearchInput(props: Readonly) { 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", }, - }} + }} /> ); -} \ No newline at end of file +} diff --git a/src/components/SearchInput/index.ts b/src/components/SearchInput/index.ts index b71bd5c..dbee283 100644 --- a/src/components/SearchInput/index.ts +++ b/src/components/SearchInput/index.ts @@ -1 +1 @@ -export {MySearchInput} from "./SearchInput"; \ No newline at end of file +export { MySearchInput } from "./SearchInput";