@grantbii/design-system 1.26.0 → 1.27.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/README.md +1 -1
- package/core/molecules/Button.d.ts +2 -2
- package/core/molecules/Button.js.map +1 -1
- package/core/molecules/index.d.ts +1 -1
- package/core/molecules/index.js +1 -1
- package/core/molecules/index.js.map +1 -1
- package/core/organisms/SearchBar.d.ts +4 -2
- package/core/organisms/SearchBar.js +2 -2
- package/core/organisms/SearchBar.js.map +1 -1
- package/core/organisms/index.d.ts +1 -1
- package/core/organisms/index.js.map +1 -1
- package/package.json +9 -9
- package/stories/organisms/SearchBar.stories.d.ts +1 -0
- package/stories/organisms/SearchBar.stories.js +5 -2
- package/stories/organisms/SearchBar.stories.js.map +1 -1
- package/tsconfig.tsbuildinfo +1 -1
package/README.md
CHANGED
|
@@ -59,6 +59,6 @@ Check which files would be published with `npm publish --dry-run`
|
|
|
59
59
|
|
|
60
60
|
The package is published to npm automatically with [GitHub Actions](.github/workflows/continuous-delivery.yaml).
|
|
61
61
|
|
|
62
|
-
|
|
62
|
+
The corresponding documentation is published to GitHub pages automatically with [GitHub Actions](.github/workflows/continuous-delivery.yaml).
|
|
63
63
|
|
|
64
64
|
Once a commit has been made on the `prod` branch, a build would be triggered.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { ButtonHTMLAttributes, HTMLAttributeAnchorTarget, MouseEventHandler, ReactNode } from "react";
|
|
2
2
|
import { Color, SystemIcon } from "../atoms";
|
|
3
|
-
type ButtonVariant = "primary" | "secondary" | "tertiary" | "outline" | "ghost" | "text" | "danger";
|
|
4
|
-
type ButtonSize = "small" | "medium" | "large";
|
|
3
|
+
export type ButtonVariant = "primary" | "secondary" | "tertiary" | "outline" | "ghost" | "text" | "danger";
|
|
4
|
+
export type ButtonSize = "small" | "medium" | "large";
|
|
5
5
|
type CustomButtonProps = {
|
|
6
6
|
label?: ReactNode;
|
|
7
7
|
Icon?: SystemIcon.Icon;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../core/molecules/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import Link from \"next/link\";\nimport type {\n ButtonHTMLAttributes,\n HTMLAttributeAnchorTarget,\n MouseEventHandler,\n ReactNode,\n} from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Color, Spacing, SystemIcon, Typography } from \"../atoms\";\n\ntype ButtonVariant =\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"outline\"\n | \"ghost\"\n | \"text\"\n | \"danger\";\n\ntype ButtonSize = \"small\" | \"medium\" | \"large\";\n\ntype CustomButtonProps = {\n label?: ReactNode;\n Icon?: SystemIcon.Icon;\n iconRight?: boolean;\n onClick?: MouseEventHandler<HTMLElement>;\n type?: ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n disabled?: boolean;\n target?: HTMLAttributeAnchorTarget;\n href?: string;\n};\n\ntype ButtonProps = {\n variant?: ButtonVariant;\n size?: ButtonSize;\n} & CustomButtonProps;\n\nconst Button = ({\n variant = \"primary\",\n size = \"medium\",\n ...restOfProps\n}: ButtonProps) => {\n const variantProps = VARIANT_PROPS_MAP[variant];\n const sizeProps = SIZE_PROPS_MAP[size];\n\n return <RawButton {...variantProps} {...sizeProps} {...restOfProps} />;\n};\n\nexport default Button;\n\ntype VariantStyleProps = {\n defaultColor: Color.DesignColor;\n hoverColor?: Color.DesignColor;\n disabledColor?: Color.DesignColor;\n defaultBackgroundColor: Color.DesignColor;\n hoverBackgroundColor?: Color.DesignColor;\n disabledBackgroundColor?: Color.DesignColor;\n borderColor?: Color.DesignColor;\n textDecoration?: string;\n};\n\nconst VARIANT_PROPS_MAP: { [variant in ButtonVariant]: VariantStyleProps } = {\n primary: {\n defaultColor: Color.typography.whiteHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.brand.grantbiiBlue,\n hoverBackgroundColor: Color.accent.blue2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n secondary: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.brand.grantbiiYellow,\n hoverBackgroundColor: Color.accent.yellow2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n tertiary: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.neutral.grey3,\n hoverBackgroundColor: Color.accent.blue3,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n outline: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: \"transparent\",\n hoverBackgroundColor: Color.accent.blue3,\n borderColor: Color.neutral.grey2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n ghost: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: \"transparent\",\n hoverBackgroundColor: Color.accent.blue3,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n text: {\n defaultColor: Color.typography.blackHigh,\n hoverColor: Color.typography.blackMedium,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: \"transparent\",\n textDecoration: \"underline\",\n },\n danger: {\n defaultColor: Color.typography.whiteHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.accent.red1,\n hoverBackgroundColor: Color.accent.red2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n};\n\ntype SizeStyleProps = {\n width?: string;\n height?: string;\n padding?: string;\n fontSize?: string;\n};\n\nconst SIZE_PROPS_MAP: { [size in ButtonSize]: SizeStyleProps } = {\n small: {\n height: \"40px\",\n padding: `10px ${Spacing.px16}`, // not following spacing scale\n fontSize: \"14px\",\n },\n medium: {\n height: \"46px\",\n padding: `12px ${Spacing.px16}`, // not following spacing scale\n fontSize: \"16px\",\n },\n large: {\n height: \"52px\",\n padding: `14px ${Spacing.px16}`, // not following spacing scale\n fontSize: \"18px\",\n },\n};\n\ntype RawButtonProps = CustomButtonProps & VariantStyleProps & SizeStyleProps;\n\nexport const RawButton = ({\n Icon,\n iconRight = false,\n label,\n href,\n target,\n disabled,\n type,\n width = \"auto\",\n height = \"46px\",\n padding = `12px ${Spacing.px16}`,\n fontSize = \"16px\",\n textDecoration = \"none\",\n defaultColor,\n hoverColor = defaultColor,\n disabledColor = defaultColor,\n defaultBackgroundColor,\n hoverBackgroundColor = defaultBackgroundColor,\n disabledBackgroundColor = defaultBackgroundColor,\n borderColor,\n ...restOfProps\n}: RawButtonProps) => {\n const isActionIcon = !!Icon && !label;\n\n const styleProps: ButtonStyleProps = {\n $isActionIcon: isActionIcon,\n $width: width,\n $height: height,\n $padding: padding,\n $fontSize: fontSize,\n $textDecoration: textDecoration,\n $defaultColor: defaultColor,\n $hoverColor: hoverColor,\n $disabledColor: disabledColor,\n $defaultBackgroundColor: defaultBackgroundColor,\n $hoverBackgroundColor: hoverBackgroundColor,\n $disabledBackgroundColor: disabledBackgroundColor,\n $borderColor: borderColor,\n };\n\n const content = (\n <>\n {Icon && !iconRight && <Icon size={20} />}\n {label}\n {Icon && iconRight && <Icon size={20} />}\n </>\n );\n\n const isLink = !!href && !disabled;\n\n return isLink ? (\n <BaseLink {...restOfProps} {...styleProps} href={href} target={target}>\n {content}\n </BaseLink>\n ) : (\n <BaseButton\n {...restOfProps}\n {...styleProps}\n disabled={disabled}\n type={type}\n >\n {content}\n </BaseButton>\n );\n};\n\ntype ButtonStyleProps = {\n $isActionIcon: boolean;\n $width: string;\n $height: string;\n $padding: string;\n $fontSize: string;\n $textDecoration: string;\n $defaultColor: Color.DesignColor;\n $hoverColor: Color.DesignColor;\n $disabledColor: Color.DesignColor;\n $defaultBackgroundColor: Color.DesignColor;\n $hoverBackgroundColor: Color.DesignColor;\n $disabledBackgroundColor: Color.DesignColor;\n $borderColor?: Color.DesignColor;\n};\n\nconst ButtonStyle = css<ButtonStyleProps>`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: ${Spacing.px8};\n\n box-sizing: border-box;\n width: ${(props) => (props.$isActionIcon ? props.$height : props.$width)};\n min-width: ${(props) => (props.$isActionIcon ? props.$height : \"auto\")};\n height: ${(props) => props.$height};\n padding: ${(props) => (props.$isActionIcon ? \"0px\" : props.$padding)};\n\n font-weight: ${Typography.weight.medium};\n font-size: ${(props) => props.$fontSize};\n white-space: nowrap;\n\n color: ${(props) => props.$defaultColor};\n background-color: ${(props) => props.$defaultBackgroundColor};\n\n border: ${(props) =>\n props.$borderColor ? `1px solid ${props.$borderColor}` : \"none\"};\n border-radius: ${Spacing.px8};\n\n text-decoration: ${(props) => props.$textDecoration};\n\n &:hover {\n color: ${(props) => props.$hoverColor};\n background-color: ${(props) => props.$hoverBackgroundColor};\n }\n\n &:disabled {\n color: ${(props) => props.$disabledColor};\n background-color: ${(props) => props.$disabledBackgroundColor};\n }\n`;\n\nconst BaseLink = styled(Link)<ButtonStyleProps>`\n ${ButtonStyle}\n`;\n\nconst BaseButton = styled.button<ButtonStyleProps>`\n ${ButtonStyle}\n`;\n"]}
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../core/molecules/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import Link from \"next/link\";\nimport type {\n ButtonHTMLAttributes,\n HTMLAttributeAnchorTarget,\n MouseEventHandler,\n ReactNode,\n} from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Color, Spacing, SystemIcon, Typography } from \"../atoms\";\n\nexport type ButtonVariant =\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"outline\"\n | \"ghost\"\n | \"text\"\n | \"danger\";\n\nexport type ButtonSize = \"small\" | \"medium\" | \"large\";\n\ntype CustomButtonProps = {\n label?: ReactNode;\n Icon?: SystemIcon.Icon;\n iconRight?: boolean;\n onClick?: MouseEventHandler<HTMLElement>;\n type?: ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n disabled?: boolean;\n target?: HTMLAttributeAnchorTarget;\n href?: string;\n};\n\ntype ButtonProps = {\n variant?: ButtonVariant;\n size?: ButtonSize;\n} & CustomButtonProps;\n\nconst Button = ({\n variant = \"primary\",\n size = \"medium\",\n ...restOfProps\n}: ButtonProps) => {\n const variantProps = VARIANT_PROPS_MAP[variant];\n const sizeProps = SIZE_PROPS_MAP[size];\n\n return <RawButton {...variantProps} {...sizeProps} {...restOfProps} />;\n};\n\nexport default Button;\n\ntype VariantStyleProps = {\n defaultColor: Color.DesignColor;\n hoverColor?: Color.DesignColor;\n disabledColor?: Color.DesignColor;\n defaultBackgroundColor: Color.DesignColor;\n hoverBackgroundColor?: Color.DesignColor;\n disabledBackgroundColor?: Color.DesignColor;\n borderColor?: Color.DesignColor;\n textDecoration?: string;\n};\n\nconst VARIANT_PROPS_MAP: { [variant in ButtonVariant]: VariantStyleProps } = {\n primary: {\n defaultColor: Color.typography.whiteHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.brand.grantbiiBlue,\n hoverBackgroundColor: Color.accent.blue2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n secondary: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.brand.grantbiiYellow,\n hoverBackgroundColor: Color.accent.yellow2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n tertiary: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.neutral.grey3,\n hoverBackgroundColor: Color.accent.blue3,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n outline: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: \"transparent\",\n hoverBackgroundColor: Color.accent.blue3,\n borderColor: Color.neutral.grey2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n ghost: {\n defaultColor: Color.typography.blackHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: \"transparent\",\n hoverBackgroundColor: Color.accent.blue3,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n text: {\n defaultColor: Color.typography.blackHigh,\n hoverColor: Color.typography.blackMedium,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: \"transparent\",\n textDecoration: \"underline\",\n },\n danger: {\n defaultColor: Color.typography.whiteHigh,\n disabledColor: Color.typography.blackLow,\n defaultBackgroundColor: Color.accent.red1,\n hoverBackgroundColor: Color.accent.red2,\n disabledBackgroundColor: Color.neutral.grey3,\n },\n};\n\ntype SizeStyleProps = {\n width?: string;\n height?: string;\n padding?: string;\n fontSize?: string;\n};\n\nconst SIZE_PROPS_MAP: { [size in ButtonSize]: SizeStyleProps } = {\n small: {\n height: \"40px\",\n padding: `10px ${Spacing.px16}`, // not following spacing scale\n fontSize: \"14px\",\n },\n medium: {\n height: \"46px\",\n padding: `12px ${Spacing.px16}`, // not following spacing scale\n fontSize: \"16px\",\n },\n large: {\n height: \"52px\",\n padding: `14px ${Spacing.px16}`, // not following spacing scale\n fontSize: \"18px\",\n },\n};\n\ntype RawButtonProps = CustomButtonProps & VariantStyleProps & SizeStyleProps;\n\nexport const RawButton = ({\n Icon,\n iconRight = false,\n label,\n href,\n target,\n disabled,\n type,\n width = \"auto\",\n height = \"46px\",\n padding = `12px ${Spacing.px16}`,\n fontSize = \"16px\",\n textDecoration = \"none\",\n defaultColor,\n hoverColor = defaultColor,\n disabledColor = defaultColor,\n defaultBackgroundColor,\n hoverBackgroundColor = defaultBackgroundColor,\n disabledBackgroundColor = defaultBackgroundColor,\n borderColor,\n ...restOfProps\n}: RawButtonProps) => {\n const isActionIcon = !!Icon && !label;\n\n const styleProps: ButtonStyleProps = {\n $isActionIcon: isActionIcon,\n $width: width,\n $height: height,\n $padding: padding,\n $fontSize: fontSize,\n $textDecoration: textDecoration,\n $defaultColor: defaultColor,\n $hoverColor: hoverColor,\n $disabledColor: disabledColor,\n $defaultBackgroundColor: defaultBackgroundColor,\n $hoverBackgroundColor: hoverBackgroundColor,\n $disabledBackgroundColor: disabledBackgroundColor,\n $borderColor: borderColor,\n };\n\n const content = (\n <>\n {Icon && !iconRight && <Icon size={20} />}\n {label}\n {Icon && iconRight && <Icon size={20} />}\n </>\n );\n\n const isLink = !!href && !disabled;\n\n return isLink ? (\n <BaseLink {...restOfProps} {...styleProps} href={href} target={target}>\n {content}\n </BaseLink>\n ) : (\n <BaseButton\n {...restOfProps}\n {...styleProps}\n disabled={disabled}\n type={type}\n >\n {content}\n </BaseButton>\n );\n};\n\ntype ButtonStyleProps = {\n $isActionIcon: boolean;\n $width: string;\n $height: string;\n $padding: string;\n $fontSize: string;\n $textDecoration: string;\n $defaultColor: Color.DesignColor;\n $hoverColor: Color.DesignColor;\n $disabledColor: Color.DesignColor;\n $defaultBackgroundColor: Color.DesignColor;\n $hoverBackgroundColor: Color.DesignColor;\n $disabledBackgroundColor: Color.DesignColor;\n $borderColor?: Color.DesignColor;\n};\n\nconst ButtonStyle = css<ButtonStyleProps>`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: ${Spacing.px8};\n\n box-sizing: border-box;\n width: ${(props) => (props.$isActionIcon ? props.$height : props.$width)};\n min-width: ${(props) => (props.$isActionIcon ? props.$height : \"auto\")};\n height: ${(props) => props.$height};\n padding: ${(props) => (props.$isActionIcon ? \"0px\" : props.$padding)};\n\n font-weight: ${Typography.weight.medium};\n font-size: ${(props) => props.$fontSize};\n white-space: nowrap;\n\n color: ${(props) => props.$defaultColor};\n background-color: ${(props) => props.$defaultBackgroundColor};\n\n border: ${(props) =>\n props.$borderColor ? `1px solid ${props.$borderColor}` : \"none\"};\n border-radius: ${Spacing.px8};\n\n text-decoration: ${(props) => props.$textDecoration};\n\n &:hover {\n color: ${(props) => props.$hoverColor};\n background-color: ${(props) => props.$hoverBackgroundColor};\n }\n\n &:disabled {\n color: ${(props) => props.$disabledColor};\n background-color: ${(props) => props.$disabledBackgroundColor};\n }\n`;\n\nconst BaseLink = styled(Link)<ButtonStyleProps>`\n ${ButtonStyle}\n`;\n\nconst BaseButton = styled.button<ButtonStyleProps>`\n ${ButtonStyle}\n`;\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { default as Badge, RawBadge } from "./Badge";
|
|
2
|
-
export { default as Button, RawButton } from "./Button";
|
|
2
|
+
export { default as Button, RawButton, type ButtonSize, type ButtonVariant, } from "./Button";
|
|
3
3
|
export { default as Checkbox } from "./Checkbox";
|
|
4
4
|
export { default as Input } from "./Input";
|
|
5
5
|
export { default as Overlay } from "./Overlay";
|
package/core/molecules/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { default as Badge, RawBadge } from "./Badge";
|
|
2
|
-
export { default as Button, RawButton } from "./Button";
|
|
2
|
+
export { default as Button, RawButton, } from "./Button";
|
|
3
3
|
export { default as Checkbox } from "./Checkbox";
|
|
4
4
|
export { default as Input } from "./Input";
|
|
5
5
|
export { default as Overlay } from "./Overlay";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EACL,OAAO,IAAI,MAAM,EACjB,SAAS,GAGV,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default as Badge, RawBadge } from \"./Badge\";\nexport {\n default as Button,\n RawButton,\n type ButtonSize,\n type ButtonVariant,\n} from \"./Button\";\nexport { default as Checkbox } from \"./Checkbox\";\nexport { default as Input } from \"./Input\";\nexport { default as Overlay } from \"./Overlay\";\nexport { default as PageLoader } from \"./PageLoader\";\nexport { default as RadioButton } from \"./RadioButton\";\nexport { default as Textarea } from \"./Textarea\";\n"]}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import type { ChangeEventHandler, MouseEventHandler } from "react";
|
|
2
|
+
import { type ButtonVariant } from "../molecules";
|
|
3
|
+
export type SearchBarSize = "small" | "medium";
|
|
2
4
|
type SearchBarProps = {
|
|
3
5
|
queryText: string;
|
|
4
6
|
onChangeQueryText: ChangeEventHandler<HTMLInputElement, HTMLInputElement>;
|
|
@@ -7,9 +9,9 @@ type SearchBarProps = {
|
|
|
7
9
|
handlePressEnter: () => void;
|
|
8
10
|
autoFocus?: boolean;
|
|
9
11
|
disableSearch?: boolean;
|
|
12
|
+
searchButtonVariant?: ButtonVariant;
|
|
10
13
|
placeholder?: string;
|
|
11
14
|
size?: SearchBarSize;
|
|
12
15
|
};
|
|
13
|
-
|
|
14
|
-
declare const SearchBar: ({ queryText, onChangeQueryText, onClickSearch, onClickReset, handlePressEnter, autoFocus, disableSearch, placeholder, size, }: SearchBarProps) => import("react").JSX.Element;
|
|
16
|
+
declare const SearchBar: ({ queryText, onChangeQueryText, onClickSearch, onClickReset, handlePressEnter, autoFocus, disableSearch, searchButtonVariant, placeholder, size, }: SearchBarProps) => import("react").JSX.Element;
|
|
15
17
|
export default SearchBar;
|
|
@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import styled from "styled-components";
|
|
3
3
|
import { Color, Responsive, Spacing, SystemIcon } from "../atoms";
|
|
4
4
|
import { Button } from "../molecules";
|
|
5
|
-
const SearchBar = ({ queryText, onChangeQueryText, onClickSearch, onClickReset, handlePressEnter, autoFocus = false, disableSearch = false, placeholder = "Search grant or describe your project", size = "medium", }) => {
|
|
5
|
+
const SearchBar = ({ queryText, onChangeQueryText, onClickSearch, onClickReset, handlePressEnter, autoFocus = false, disableSearch = false, searchButtonVariant = "primary", placeholder = "Search grant or describe your project", size = "medium", }) => {
|
|
6
6
|
const { height, fontSize } = sizePropsMap[size];
|
|
7
|
-
return (_jsxs(BaseSearchBar, { children: [_jsxs(SearchArea, { "$height": height, "$hasQueryText": queryText !== "", children: [_jsx(TextInput, { queryText: queryText, onChangeQueryText: onChangeQueryText, handlePressEnter: handlePressEnter, autoFocus: autoFocus, disableSearch: disableSearch, placeholder: placeholder, fontSize: fontSize }), queryText === "" ? (_jsx(ResetButtonPlaceholder, {})) : (_jsx(ResetButton, { onClickReset: onClickReset }))] }), _jsx(Button, { disabled: disableSearch, Icon: SystemIcon.MagnifyingGlassIcon,
|
|
7
|
+
return (_jsxs(BaseSearchBar, { children: [_jsxs(SearchArea, { "$height": height, "$hasQueryText": queryText !== "", children: [_jsx(TextInput, { queryText: queryText, onChangeQueryText: onChangeQueryText, handlePressEnter: handlePressEnter, autoFocus: autoFocus, disableSearch: disableSearch, placeholder: placeholder, fontSize: fontSize }), queryText === "" ? (_jsx(ResetButtonPlaceholder, {})) : (_jsx(ResetButton, { onClickReset: onClickReset }))] }), _jsx(Button, { onClick: onClickSearch, disabled: disableSearch, Icon: SystemIcon.MagnifyingGlassIcon, variant: searchButtonVariant, size: size })] }));
|
|
8
8
|
};
|
|
9
9
|
export default SearchBar;
|
|
10
10
|
const sizePropsMap = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../core/organisms/SearchBar.tsx"],"names":[],"mappings":";AAKA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAClE,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../core/organisms/SearchBar.tsx"],"names":[],"mappings":";AAKA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAClE,OAAO,EAAE,MAAM,EAAsB,MAAM,cAAc,CAAC;AAiB1D,MAAM,SAAS,GAAG,CAAC,EACjB,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,gBAAgB,EAChB,SAAS,GAAG,KAAK,EACjB,aAAa,GAAG,KAAK,EACrB,mBAAmB,GAAG,SAAS,EAC/B,WAAW,GAAG,uCAAuC,EACrD,IAAI,GAAG,QAAQ,GACA,EAAE,EAAE;IACnB,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAEhD,OAAO,CACL,MAAC,aAAa,eACZ,MAAC,UAAU,eAAU,MAAM,mBAAiB,SAAS,KAAK,EAAE,aAC1D,KAAC,SAAS,IACR,SAAS,EAAE,SAAS,EACpB,iBAAiB,EAAE,iBAAiB,EACpC,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,GAClB,EAED,SAAS,KAAK,EAAE,CAAC,CAAC,CAAC,CAClB,KAAC,sBAAsB,KAAG,CAC3B,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,IAAC,YAAY,EAAE,YAAY,GAAI,CAC5C,IACU,EAEb,KAAC,MAAM,IACL,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,aAAa,EACvB,IAAI,EAAE,UAAU,CAAC,mBAAmB,EACpC,OAAO,EAAE,mBAAmB,EAC5B,IAAI,EAAE,IAAI,GACV,IACY,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC;AAOzB,MAAM,YAAY,GAAgD;IAChE,KAAK,EAAE;QACL,MAAM,EAAE,OAAO,CAAC,IAAI;QACpB,QAAQ,EAAE,MAAM;KACjB;IACD,MAAM,EAAE;QACN,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,MAAM;KACjB;CACF,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;SAIvB,OAAO,CAAC,GAAG;;;;oBAIA,UAAU,CAAC,eAAe,CAAC,MAAM;;;;qBAIhC,UAAU,CAAC,eAAe,CAAC,MAAM;qBACjC,OAAO,CAAC,IAAI;;CAEhC,CAAC;AAOF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAiB;;;;;YAKlC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO;;;sBAGd,CAAC,KAAK,EAAE,EAAE,CAC5B,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK;;MAE7D,CAAC,KAAK,EAAE,EAAE,CACV,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK;mBACnD,OAAO,CAAC,GAAG;;;wBAGN,KAAK,CAAC,OAAO,CAAC,KAAK;0BACjB,KAAK,CAAC,MAAM,CAAC,OAAO;;CAE7C,CAAC;AAYF,MAAM,SAAS,GAAG,CAAC,EACjB,SAAS,EACT,iBAAiB,EACjB,gBAAgB,EAChB,SAAS,EACT,aAAa,EACb,WAAW,EACX,QAAQ,GACO,EAAE,EAAE;IACnB,MAAM,SAAS,GAAG,CAAC,KAAsC,EAAE,EAAE;QAC3D,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC;YAC7D,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,gBAAgB,EAAE,CAAC;QACrB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE,SAAS,EAChB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,iBAAiB,EAC3B,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,eACT,QAAQ,GACnB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAuB;;iBAExC,OAAO,CAAC,IAAI;;eAEd,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS;;;;;;CAMxC,CAAC;AAMF,MAAM,WAAW,GAAG,CAAC,EAAE,YAAY,EAAoB,EAAE,EAAE,CAAC,CAC1D,KAAC,eAAe,IAAC,OAAO,EAAE,YAAY,EAAE,IAAI,EAAC,QAAQ,YACnD,KAAC,UAAU,CAAC,KAAK,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,GAAI,GAC1C,CACnB,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;;mBASlB,OAAO,CAAC,GAAG;CAC7B,CAAC;AAEF,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;mBAItB,OAAO,CAAC,GAAG;CAC7B,CAAC","sourcesContent":["import type {\n ChangeEventHandler,\n KeyboardEvent,\n MouseEventHandler,\n} from \"react\";\nimport styled from \"styled-components\";\nimport { Color, Responsive, Spacing, SystemIcon } from \"../atoms\";\nimport { Button, type ButtonVariant } from \"../molecules\";\n\nexport type SearchBarSize = \"small\" | \"medium\";\n\ntype SearchBarProps = {\n queryText: string;\n onChangeQueryText: ChangeEventHandler<HTMLInputElement, HTMLInputElement>;\n onClickReset: MouseEventHandler<HTMLButtonElement>;\n onClickSearch: MouseEventHandler<HTMLButtonElement>;\n handlePressEnter: () => void;\n autoFocus?: boolean;\n disableSearch?: boolean;\n searchButtonVariant?: ButtonVariant;\n placeholder?: string;\n size?: SearchBarSize;\n};\n\nconst SearchBar = ({\n queryText,\n onChangeQueryText,\n onClickSearch,\n onClickReset,\n handlePressEnter,\n autoFocus = false,\n disableSearch = false,\n searchButtonVariant = \"primary\",\n placeholder = \"Search grant or describe your project\",\n size = \"medium\",\n}: SearchBarProps) => {\n const { height, fontSize } = sizePropsMap[size];\n\n return (\n <BaseSearchBar>\n <SearchArea $height={height} $hasQueryText={queryText !== \"\"}>\n <TextInput\n queryText={queryText}\n onChangeQueryText={onChangeQueryText}\n handlePressEnter={handlePressEnter}\n autoFocus={autoFocus}\n disableSearch={disableSearch}\n placeholder={placeholder}\n fontSize={fontSize}\n />\n\n {queryText === \"\" ? (\n <ResetButtonPlaceholder />\n ) : (\n <ResetButton onClickReset={onClickReset} />\n )}\n </SearchArea>\n\n <Button\n onClick={onClickSearch}\n disabled={disableSearch}\n Icon={SystemIcon.MagnifyingGlassIcon}\n variant={searchButtonVariant}\n size={size}\n />\n </BaseSearchBar>\n );\n};\n\nexport default SearchBar;\n\ntype SizeStyleProps = {\n height: string;\n fontSize: string;\n};\n\nconst sizePropsMap: { [size in SearchBarSize]: SizeStyleProps } = {\n small: {\n height: Spacing.px40,\n fontSize: \"12px\",\n },\n medium: {\n height: \"44px\",\n fontSize: \"14px\",\n },\n};\n\nconst BaseSearchBar = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ${Spacing.px8};\n\n width: 100%;\n\n @media (width < ${Responsive.widthBreakpoint.laptop}) {\n border-radius: 0px;\n }\n\n @media (width >= ${Responsive.widthBreakpoint.laptop}) {\n border-radius: ${Spacing.px12};\n }\n`;\n\ntype SearchAreaProps = {\n $height: string;\n $hasQueryText: boolean;\n};\n\nconst SearchArea = styled.div<SearchAreaProps>`\n display: flex;\n align-items: center;\n\n box-sizing: border-box;\n height: ${(props) => props.$height};\n width: 100%;\n\n background-color: ${(props) =>\n props.$hasQueryText ? Color.neutral.white : Color.neutral.grey4};\n border: 0.5px solid\n ${(props) =>\n props.$hasQueryText ? Color.accent.yellow1 : Color.neutral.grey2};\n border-radius: ${Spacing.px8};\n\n &:focus-within {\n background-color: ${Color.neutral.white};\n border: 0.5px solid ${Color.accent.yellow1};\n }\n`;\n\ntype TextInputProps = {\n queryText: string;\n onChangeQueryText?: ChangeEventHandler<HTMLInputElement, HTMLInputElement>;\n handlePressEnter: () => void;\n autoFocus: boolean;\n disableSearch: boolean;\n placeholder: string;\n fontSize: string;\n};\n\nconst TextInput = ({\n queryText,\n onChangeQueryText,\n handlePressEnter,\n autoFocus,\n disableSearch,\n placeholder,\n fontSize,\n}: TextInputProps) => {\n const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === \"Enter\" && !event.repeat && !disableSearch) {\n event.preventDefault();\n handlePressEnter();\n }\n };\n\n return (\n <BaseTextInput\n value={queryText}\n placeholder={placeholder}\n onChange={onChangeQueryText}\n onKeyDown={onKeyDown}\n autoFocus={autoFocus}\n $fontSize={fontSize}\n />\n );\n};\n\nconst BaseTextInput = styled.input<{ $fontSize: string }>`\n width: 100%;\n margin-left: ${Spacing.px16};\n\n font-size: ${(props) => props.$fontSize};\n text-overflow: ellipsis;\n\n background-color: transparent;\n outline: none;\n border: none;\n`;\n\ntype ResetButtonProps = {\n onClickReset: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst ResetButton = ({ onClickReset }: ResetButtonProps) => (\n <BaseResetButton onClick={onClickReset} type=\"button\">\n <SystemIcon.XIcon size={14} color={Color.neutral.black} />\n </BaseResetButton>\n);\n\nconst BaseResetButton = styled.button`\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 38px;\n min-width: 38px;\n height: 38px;\n\n border-radius: ${Spacing.px8};\n`;\n\nconst ResetButtonPlaceholder = styled.div`\n width: 38px;\n height: 38px;\n\n border-radius: ${Spacing.px8};\n`;\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { default as Dropdown, type DropdownProps } from "./Dropdown";
|
|
2
2
|
export { default as FileDrop, useFileDrop } from "./FileDrop";
|
|
3
3
|
export { default as Modal, useModal } from "./Modal";
|
|
4
|
-
export { default as SearchBar } from "./SearchBar";
|
|
4
|
+
export { default as SearchBar, type SearchBarSize } from "./SearchBar";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/organisms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAsB,MAAM,YAAY,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,SAAS,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/organisms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAsB,MAAM,YAAY,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAsB,MAAM,aAAa,CAAC","sourcesContent":["export { default as Dropdown, type DropdownProps } from \"./Dropdown\";\nexport { default as FileDrop, useFileDrop } from \"./FileDrop\";\nexport { default as Modal, useModal } from \"./Modal\";\nexport { default as SearchBar, type SearchBarSize } from \"./SearchBar\";\n"]}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@grantbii/design-system",
|
|
3
3
|
"author": "Grantbii",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
|
-
"version": "1.
|
|
5
|
+
"version": "1.27.0",
|
|
6
6
|
"description": "Grantbii's Design System",
|
|
7
7
|
"homepage": "https://design.grantbii.com",
|
|
8
8
|
"repository": {
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@phosphor-icons/react": "2.1.10",
|
|
24
|
-
"country-flag-icons": "1.6.
|
|
24
|
+
"country-flag-icons": "1.6.19",
|
|
25
25
|
"react-dropzone": "15.0.0",
|
|
26
26
|
"react-spinners": "0.17.0"
|
|
27
27
|
},
|
|
@@ -43,9 +43,9 @@
|
|
|
43
43
|
"@types/node": "22.19.17",
|
|
44
44
|
"@types/react": "19.2.17",
|
|
45
45
|
"@types/react-dom": "19.2.3",
|
|
46
|
-
"@vitest/browser": "4.1.
|
|
47
|
-
"@vitest/browser-playwright": "4.1.
|
|
48
|
-
"@vitest/coverage-v8": "4.1.
|
|
46
|
+
"@vitest/browser": "4.1.9",
|
|
47
|
+
"@vitest/browser-playwright": "4.1.9",
|
|
48
|
+
"@vitest/coverage-v8": "4.1.9",
|
|
49
49
|
"eslint": "9.39.4",
|
|
50
50
|
"eslint-config-next": "16.2.9",
|
|
51
51
|
"eslint-config-prettier": "10.1.8",
|
|
@@ -53,14 +53,14 @@
|
|
|
53
53
|
"husky": "9.1.7",
|
|
54
54
|
"lint-staged": "17.0.8",
|
|
55
55
|
"next": "16.2.9",
|
|
56
|
-
"playwright": "1.61.
|
|
57
|
-
"prettier": "3.
|
|
56
|
+
"playwright": "1.61.1",
|
|
57
|
+
"prettier": "3.9.4",
|
|
58
58
|
"react": "19.2.7",
|
|
59
59
|
"react-dom": "19.2.7",
|
|
60
60
|
"storybook": "10.4.6",
|
|
61
|
-
"styled-components": "6.4.
|
|
61
|
+
"styled-components": "6.4.3",
|
|
62
62
|
"typescript": "6.0.3",
|
|
63
|
-
"vitest": "4.1.
|
|
63
|
+
"vitest": "4.1.9"
|
|
64
64
|
},
|
|
65
65
|
"lint-staged": {
|
|
66
66
|
"**/*.{html,css,json,md,yaml}": [
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { SearchBar } from "@/.";
|
|
3
3
|
import { useState } from "react";
|
|
4
|
-
const SearchBarExample = ({ size }) => {
|
|
4
|
+
const SearchBarExample = ({ size, searchButtonVariant, }) => {
|
|
5
5
|
const [queryText, setQueryText] = useState("");
|
|
6
6
|
const performSearch = () => {
|
|
7
7
|
if (queryText.trim() !== "") {
|
|
8
8
|
alert(`Searching for ${queryText}`);
|
|
9
9
|
}
|
|
10
10
|
};
|
|
11
|
-
return (_jsx(SearchBar, { queryText: queryText,
|
|
11
|
+
return (_jsx(SearchBar, { queryText: queryText, onClickReset: () => setQueryText(""), onClickSearch: () => performSearch(), handlePressEnter: () => performSearch(), onChangeQueryText: (event) => setQueryText(event.target.value), searchButtonVariant: searchButtonVariant, size: size }));
|
|
12
12
|
};
|
|
13
13
|
const meta = {
|
|
14
14
|
title: "Organisms/SearchBar",
|
|
@@ -25,4 +25,7 @@ export const Small = {
|
|
|
25
25
|
export const Medium = {
|
|
26
26
|
args: { size: "medium" },
|
|
27
27
|
};
|
|
28
|
+
export const OutlineSearchButton = {
|
|
29
|
+
args: { size: "medium", searchButtonVariant: "outline" },
|
|
30
|
+
};
|
|
28
31
|
//# sourceMappingURL=SearchBar.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.stories.js","sourceRoot":"","sources":["../../../stories/organisms/SearchBar.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"SearchBar.stories.js","sourceRoot":"","sources":["../../../stories/organisms/SearchBar.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAA0C,MAAM,KAAK,CAAC;AAExE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAOjC,MAAM,gBAAgB,GAAG,CAAC,EACxB,IAAI,EACJ,mBAAmB,GACG,EAAE,EAAE;IAC1B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE/C,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,SAAS,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC;YAC5B,KAAK,CAAC,iBAAiB,SAAS,EAAE,CAAC,CAAC;QACtC,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,IACR,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,EACpC,aAAa,EAAE,GAAG,EAAE,CAAC,aAAa,EAAE,EACpC,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,EAAE,EACvC,iBAAiB,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAC9D,mBAAmB,EAAE,mBAAmB,EACxC,IAAI,EAAE,IAAI,GACV,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAU;IACxC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,mBAAmB,EAAE,SAAS,EAAE;CACzD,CAAC","sourcesContent":["import { SearchBar, type ButtonVariant, type SearchBarSize } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport { useState } from \"react\";\n\ntype SearchBarExampleProps = {\n size?: SearchBarSize;\n searchButtonVariant?: ButtonVariant;\n};\n\nconst SearchBarExample = ({\n size,\n searchButtonVariant,\n}: SearchBarExampleProps) => {\n const [queryText, setQueryText] = useState(\"\");\n\n const performSearch = () => {\n if (queryText.trim() !== \"\") {\n alert(`Searching for ${queryText}`);\n }\n };\n\n return (\n <SearchBar\n queryText={queryText}\n onClickReset={() => setQueryText(\"\")}\n onClickSearch={() => performSearch()}\n handlePressEnter={() => performSearch()}\n onChangeQueryText={(event) => setQueryText(event.target.value)}\n searchButtonVariant={searchButtonVariant}\n size={size}\n />\n );\n};\n\nconst meta: Meta<typeof SearchBar> = {\n title: \"Organisms/SearchBar\",\n component: SearchBarExample,\n tags: [\"autodocs\"],\n parameters: {\n layout: \"fullscreen\",\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Small: Story = {\n args: { size: \"small\" },\n};\n\nexport const Medium: Story = {\n args: { size: \"medium\" },\n};\n\nexport const OutlineSearchButton: Story = {\n args: { size: \"medium\", searchButtonVariant: \"outline\" },\n};\n"]}
|