diff --git a/.changeset/pretty-coats-judge.md b/.changeset/pretty-coats-judge.md new file mode 100644 index 00000000000..712b1c76f98 --- /dev/null +++ b/.changeset/pretty-coats-judge.md @@ -0,0 +1,5 @@ +--- +'@razorpay/blade': minor +--- + +feat(blade): add flask,keyboard and list-search icons diff --git a/packages/blade/scripts/icons.json b/packages/blade/scripts/icons.json index ad5086ddf38..f2349d64cdb 100644 --- a/packages/blade/scripts/icons.json +++ b/packages/blade/scripts/icons.json @@ -1,5 +1,11 @@ [ { - "ray": "\n\n\n" + "list-search": "\n\n\n\n" + }, + { + "flask": "\n\n\n" + }, + { + "keyboard": "\n\n\n" } ] diff --git a/packages/blade/src/components/Icons/FlaskIcon/FlaskIcon.native.test.tsx b/packages/blade/src/components/Icons/FlaskIcon/FlaskIcon.native.test.tsx new file mode 100644 index 00000000000..8574586d917 --- /dev/null +++ b/packages/blade/src/components/Icons/FlaskIcon/FlaskIcon.native.test.tsx @@ -0,0 +1,11 @@ +import FlaskIcon from '.'; +import renderWithTheme from '~utils/testing/renderWithTheme.native'; + +describe('', () => { + it('should render FlaskIcon', () => { + const renderTree = renderWithTheme( + , + ).toJSON(); + expect(renderTree).toMatchSnapshot(); + }); +}); diff --git a/packages/blade/src/components/Icons/FlaskIcon/FlaskIcon.tsx b/packages/blade/src/components/Icons/FlaskIcon/FlaskIcon.tsx new file mode 100644 index 00000000000..e2786d5263e --- /dev/null +++ b/packages/blade/src/components/Icons/FlaskIcon/FlaskIcon.tsx @@ -0,0 +1,20 @@ +import { Svg, Path } from '../_Svg'; +import type { IconComponent } from '..'; +import useIconProps from '../useIconProps'; + +const FlaskIcon: IconComponent = ({ size, color, ...styledProps }) => { + const { height, width, iconColor } = useIconProps({ size, color }); + + return ( + + + + ); +}; + +export default FlaskIcon; diff --git a/packages/blade/src/components/Icons/FlaskIcon/FlaskIcon.web.test.tsx b/packages/blade/src/components/Icons/FlaskIcon/FlaskIcon.web.test.tsx new file mode 100644 index 00000000000..c6458086385 --- /dev/null +++ b/packages/blade/src/components/Icons/FlaskIcon/FlaskIcon.web.test.tsx @@ -0,0 +1,11 @@ +import FlaskIcon from './'; +import renderWithTheme from '~utils/testing/renderWithTheme.web'; + +describe('', () => { + it('should render FlaskIcon', () => { + const { container } = renderWithTheme( + , + ); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/packages/blade/src/components/Icons/FlaskIcon/__snapshots__/FlaskIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/FlaskIcon/__snapshots__/FlaskIcon.native.test.tsx.snap new file mode 100644 index 00000000000..f87a035a7ad --- /dev/null +++ b/packages/blade/src/components/Icons/FlaskIcon/__snapshots__/FlaskIcon.native.test.tsx.snap @@ -0,0 +1,72 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should render FlaskIcon 1`] = ` + + + + + + + +`; diff --git a/packages/blade/src/components/Icons/FlaskIcon/__snapshots__/FlaskIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/FlaskIcon/__snapshots__/FlaskIcon.web.test.tsx.snap new file mode 100644 index 00000000000..1960b6f7029 --- /dev/null +++ b/packages/blade/src/components/Icons/FlaskIcon/__snapshots__/FlaskIcon.web.test.tsx.snap @@ -0,0 +1,23 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should render FlaskIcon 1`] = ` +
+ +
+`; diff --git a/packages/blade/src/components/Icons/FlaskIcon/index.ts b/packages/blade/src/components/Icons/FlaskIcon/index.ts new file mode 100644 index 00000000000..321fcd48fe2 --- /dev/null +++ b/packages/blade/src/components/Icons/FlaskIcon/index.ts @@ -0,0 +1 @@ +export { default } from './FlaskIcon'; diff --git a/packages/blade/src/components/Icons/KeyboardIcon/KeyboardIcon.native.test.tsx b/packages/blade/src/components/Icons/KeyboardIcon/KeyboardIcon.native.test.tsx new file mode 100644 index 00000000000..5adfe04c505 --- /dev/null +++ b/packages/blade/src/components/Icons/KeyboardIcon/KeyboardIcon.native.test.tsx @@ -0,0 +1,11 @@ +import KeyboardIcon from '.'; +import renderWithTheme from '~utils/testing/renderWithTheme.native'; + +describe('', () => { + it('should render KeyboardIcon', () => { + const renderTree = renderWithTheme( + , + ).toJSON(); + expect(renderTree).toMatchSnapshot(); + }); +}); diff --git a/packages/blade/src/components/Icons/KeyboardIcon/KeyboardIcon.tsx b/packages/blade/src/components/Icons/KeyboardIcon/KeyboardIcon.tsx new file mode 100644 index 00000000000..51714c58fd4 --- /dev/null +++ b/packages/blade/src/components/Icons/KeyboardIcon/KeyboardIcon.tsx @@ -0,0 +1,20 @@ +import { Svg, Path } from '../_Svg'; +import type { IconComponent } from '..'; +import useIconProps from '../useIconProps'; + +const KeyboardIcon: IconComponent = ({ size, color, ...styledProps }) => { + const { height, width, iconColor } = useIconProps({ size, color }); + + return ( + + + + ); +}; + +export default KeyboardIcon; diff --git a/packages/blade/src/components/Icons/KeyboardIcon/KeyboardIcon.web.test.tsx b/packages/blade/src/components/Icons/KeyboardIcon/KeyboardIcon.web.test.tsx new file mode 100644 index 00000000000..438b2b9c2e8 --- /dev/null +++ b/packages/blade/src/components/Icons/KeyboardIcon/KeyboardIcon.web.test.tsx @@ -0,0 +1,11 @@ +import KeyboardIcon from './'; +import renderWithTheme from '~utils/testing/renderWithTheme.web'; + +describe('', () => { + it('should render KeyboardIcon', () => { + const { container } = renderWithTheme( + , + ); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/packages/blade/src/components/Icons/KeyboardIcon/__snapshots__/KeyboardIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/KeyboardIcon/__snapshots__/KeyboardIcon.native.test.tsx.snap new file mode 100644 index 00000000000..fca9b6cb2ba --- /dev/null +++ b/packages/blade/src/components/Icons/KeyboardIcon/__snapshots__/KeyboardIcon.native.test.tsx.snap @@ -0,0 +1,72 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should render KeyboardIcon 1`] = ` + + + + + + + +`; diff --git a/packages/blade/src/components/Icons/KeyboardIcon/__snapshots__/KeyboardIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/KeyboardIcon/__snapshots__/KeyboardIcon.web.test.tsx.snap new file mode 100644 index 00000000000..01bd892046d --- /dev/null +++ b/packages/blade/src/components/Icons/KeyboardIcon/__snapshots__/KeyboardIcon.web.test.tsx.snap @@ -0,0 +1,23 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should render KeyboardIcon 1`] = ` +
+ +
+`; diff --git a/packages/blade/src/components/Icons/KeyboardIcon/index.ts b/packages/blade/src/components/Icons/KeyboardIcon/index.ts new file mode 100644 index 00000000000..a7a95d18dd2 --- /dev/null +++ b/packages/blade/src/components/Icons/KeyboardIcon/index.ts @@ -0,0 +1 @@ +export { default } from './KeyboardIcon'; diff --git a/packages/blade/src/components/Icons/ListSearchIcon/ListSearchIcon.native.test.tsx b/packages/blade/src/components/Icons/ListSearchIcon/ListSearchIcon.native.test.tsx new file mode 100644 index 00000000000..346caeca935 --- /dev/null +++ b/packages/blade/src/components/Icons/ListSearchIcon/ListSearchIcon.native.test.tsx @@ -0,0 +1,11 @@ +import ListSearchIcon from '.'; +import renderWithTheme from '~utils/testing/renderWithTheme.native'; + +describe('', () => { + it('should render ListSearchIcon', () => { + const renderTree = renderWithTheme( + , + ).toJSON(); + expect(renderTree).toMatchSnapshot(); + }); +}); diff --git a/packages/blade/src/components/Icons/ListSearchIcon/ListSearchIcon.tsx b/packages/blade/src/components/Icons/ListSearchIcon/ListSearchIcon.tsx new file mode 100644 index 00000000000..d7f3cb3767a --- /dev/null +++ b/packages/blade/src/components/Icons/ListSearchIcon/ListSearchIcon.tsx @@ -0,0 +1,24 @@ +import { Svg, Path } from '../_Svg'; +import type { IconComponent } from '..'; +import useIconProps from '../useIconProps'; + +const ListSearchIcon: IconComponent = ({ size, color, ...styledProps }) => { + const { height, width, iconColor } = useIconProps({ size, color }); + + return ( + + + + + ); +}; + +export default ListSearchIcon; diff --git a/packages/blade/src/components/Icons/ListSearchIcon/ListSearchIcon.web.test.tsx b/packages/blade/src/components/Icons/ListSearchIcon/ListSearchIcon.web.test.tsx new file mode 100644 index 00000000000..7d4c147f3f9 --- /dev/null +++ b/packages/blade/src/components/Icons/ListSearchIcon/ListSearchIcon.web.test.tsx @@ -0,0 +1,11 @@ +import ListSearchIcon from './'; +import renderWithTheme from '~utils/testing/renderWithTheme.web'; + +describe('', () => { + it('should render ListSearchIcon', () => { + const { container } = renderWithTheme( + , + ); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/packages/blade/src/components/Icons/ListSearchIcon/__snapshots__/ListSearchIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/ListSearchIcon/__snapshots__/ListSearchIcon.native.test.tsx.snap new file mode 100644 index 00000000000..3fa37b93439 --- /dev/null +++ b/packages/blade/src/components/Icons/ListSearchIcon/__snapshots__/ListSearchIcon.native.test.tsx.snap @@ -0,0 +1,86 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should render ListSearchIcon 1`] = ` + + + + + + + + +`; diff --git a/packages/blade/src/components/Icons/ListSearchIcon/__snapshots__/ListSearchIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/ListSearchIcon/__snapshots__/ListSearchIcon.web.test.tsx.snap new file mode 100644 index 00000000000..a8ce7b5110e --- /dev/null +++ b/packages/blade/src/components/Icons/ListSearchIcon/__snapshots__/ListSearchIcon.web.test.tsx.snap @@ -0,0 +1,28 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should render ListSearchIcon 1`] = ` +
+ +
+`; diff --git a/packages/blade/src/components/Icons/ListSearchIcon/index.ts b/packages/blade/src/components/Icons/ListSearchIcon/index.ts new file mode 100644 index 00000000000..07c8cd67a0a --- /dev/null +++ b/packages/blade/src/components/Icons/ListSearchIcon/index.ts @@ -0,0 +1 @@ +export { default } from './ListSearchIcon'; diff --git a/packages/blade/src/components/Icons/iconMap.ts b/packages/blade/src/components/Icons/iconMap.ts index bbba6d5de68..9d3c61cfa9d 100644 --- a/packages/blade/src/components/Icons/iconMap.ts +++ b/packages/blade/src/components/Icons/iconMap.ts @@ -149,6 +149,7 @@ import FileZipIconComponent from './FileZipIcon'; import FilmIconComponent from './FilmIcon'; import FilterIconComponent from './FilterIcon'; import FlagIconComponent from './FlagIcon'; +import FlaskIconComponent from './FlaskIcon'; import FolderIconComponent from './FolderIcon'; import ForexManagementIconComponent from './ForexManagementIcon'; import FreelanceIconComponent from './FreelanceIcon'; @@ -175,11 +176,13 @@ import InstantSettlementIconComponent from './InstantSettlementIcon'; import InternationalPaymentsIconComponent from './InternationalPaymentsIcon'; import InvoicesIconComponent from './InvoicesIcon'; import ItalicIconComponent from './ItalicIcon'; +import KeyboardIconComponent from './KeyboardIcon'; import LayersIconComponent from './LayersIcon'; import LayoutIconComponent from './LayoutIcon'; import LifeBuoyIconComponent from './LifeBuoyIcon'; import LinkIconComponent from './LinkIcon'; import ListIconComponent from './ListIcon'; +import ListSearchIconComponent from './ListSearchIcon'; import LoaderIconComponent from './LoaderIcon'; import LoansForBusinessesIconComponent from './LoansForBusinessesIcon'; import LockIconComponent from './LockIcon'; @@ -516,6 +519,7 @@ const iconMap: Record = { FilmIcon: FilmIconComponent, FilterIcon: FilterIconComponent, FlagIcon: FlagIconComponent, + FlaskIcon: FlaskIconComponent, FolderIcon: FolderIconComponent, ForexManagementIcon: ForexManagementIconComponent, FreelanceIcon: FreelanceIconComponent, @@ -542,11 +546,13 @@ const iconMap: Record = { InternationalPaymentsIcon: InternationalPaymentsIconComponent, InvoicesIcon: InvoicesIconComponent, ItalicIcon: ItalicIconComponent, + KeyboardIcon: KeyboardIconComponent, LayersIcon: LayersIconComponent, LayoutIcon: LayoutIconComponent, LifeBuoyIcon: LifeBuoyIconComponent, LinkIcon: LinkIconComponent, ListIcon: ListIconComponent, + ListSearchIcon: ListSearchIconComponent, LoaderIcon: LoaderIconComponent, LoansForBusinessesIcon: LoansForBusinessesIconComponent, LockIcon: LockIconComponent, diff --git a/packages/blade/src/components/Icons/index.ts b/packages/blade/src/components/Icons/index.ts index 9b261421d93..77a219ce5be 100644 --- a/packages/blade/src/components/Icons/index.ts +++ b/packages/blade/src/components/Icons/index.ts @@ -150,6 +150,7 @@ export { default as FileZipIcon } from './FileZipIcon'; export { default as FilmIcon } from './FilmIcon'; export { default as FilterIcon } from './FilterIcon'; export { default as FlagIcon } from './FlagIcon'; +export { default as FlaskIcon } from './FlaskIcon'; export { default as FolderIcon } from './FolderIcon'; export { default as ForexManagementIcon } from './ForexManagementIcon'; export { default as FreelanceIcon } from './FreelanceIcon'; @@ -176,11 +177,13 @@ export { default as InstantSettlementIcon } from './InstantSettlementIcon'; export { default as InternationalPaymentsIcon } from './InternationalPaymentsIcon'; export { default as InvoicesIcon } from './InvoicesIcon'; export { default as ItalicIcon } from './ItalicIcon'; +export { default as KeyboardIcon } from './KeyboardIcon'; export { default as LayersIcon } from './LayersIcon'; export { default as LayoutIcon } from './LayoutIcon'; export { default as LifeBuoyIcon } from './LifeBuoyIcon'; export { default as LinkIcon } from './LinkIcon'; export { default as ListIcon } from './ListIcon'; +export { default as ListSearchIcon } from './ListSearchIcon'; export { default as LoaderIcon } from './LoaderIcon'; export { default as LoansForBusinessesIcon } from './LoansForBusinessesIcon'; export { default as LockIcon } from './LockIcon';