diff --git a/.changeset/twenty-beds-double.md b/.changeset/twenty-beds-double.md new file mode 100644 index 00000000000..b66bc8df8be --- /dev/null +++ b/.changeset/twenty-beds-double.md @@ -0,0 +1,5 @@ +--- +"@razorpay/blade": minor +--- + +feat(blade): add new icons - IndiaFlag, MagicKonnect, WorldWide diff --git a/packages/blade/scripts/icons.json b/packages/blade/scripts/icons.json index 746f566ebed..87649c8d45a 100644 --- a/packages/blade/scripts/icons.json +++ b/packages/blade/scripts/icons.json @@ -1,5 +1,11 @@ [ { - "signal": "\n\n\n" + "india-flag": "\n\n\n" + }, + { + "Worldwide": "\n\n\n" + }, + { + "magic-konnect": "\n\n\n\n\n" } ] diff --git a/packages/blade/src/components/Icons/IndiaFlagIcon/IndiaFlagIcon.native.test.tsx b/packages/blade/src/components/Icons/IndiaFlagIcon/IndiaFlagIcon.native.test.tsx new file mode 100644 index 00000000000..6ae5101fe15 --- /dev/null +++ b/packages/blade/src/components/Icons/IndiaFlagIcon/IndiaFlagIcon.native.test.tsx @@ -0,0 +1,11 @@ +import IndiaFlagIcon from '.'; +import renderWithTheme from '~utils/testing/renderWithTheme.native'; + +describe('', () => { + it('should render IndiaFlagIcon', () => { + const renderTree = renderWithTheme( + , + ).toJSON(); + expect(renderTree).toMatchSnapshot(); + }); +}); diff --git a/packages/blade/src/components/Icons/IndiaFlagIcon/IndiaFlagIcon.tsx b/packages/blade/src/components/Icons/IndiaFlagIcon/IndiaFlagIcon.tsx new file mode 100644 index 00000000000..9ea9555a71a --- /dev/null +++ b/packages/blade/src/components/Icons/IndiaFlagIcon/IndiaFlagIcon.tsx @@ -0,0 +1,20 @@ +import { Svg, Path } from '../_Svg'; +import type { IconComponent } from '..'; +import useIconProps from '../useIconProps'; + +const IndiaFlagIcon: IconComponent = ({ size, color, ...styledProps }) => { + const { height, width, iconColor } = useIconProps({ size, color }); + + return ( + + + + ); +}; + +export default IndiaFlagIcon; diff --git a/packages/blade/src/components/Icons/IndiaFlagIcon/IndiaFlagIcon.web.test.tsx b/packages/blade/src/components/Icons/IndiaFlagIcon/IndiaFlagIcon.web.test.tsx new file mode 100644 index 00000000000..4082f8d37ed --- /dev/null +++ b/packages/blade/src/components/Icons/IndiaFlagIcon/IndiaFlagIcon.web.test.tsx @@ -0,0 +1,11 @@ +import IndiaFlagIcon from './'; +import renderWithTheme from '~utils/testing/renderWithTheme.web'; + +describe('', () => { + it('should render IndiaFlagIcon', () => { + const { container } = renderWithTheme( + , + ); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/packages/blade/src/components/Icons/IndiaFlagIcon/__snapshots__/IndiaFlagIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/IndiaFlagIcon/__snapshots__/IndiaFlagIcon.native.test.tsx.snap new file mode 100644 index 00000000000..cda78102ce8 --- /dev/null +++ b/packages/blade/src/components/Icons/IndiaFlagIcon/__snapshots__/IndiaFlagIcon.native.test.tsx.snap @@ -0,0 +1,72 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should render IndiaFlagIcon 1`] = ` + + + + + + + +`; diff --git a/packages/blade/src/components/Icons/IndiaFlagIcon/__snapshots__/IndiaFlagIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/IndiaFlagIcon/__snapshots__/IndiaFlagIcon.web.test.tsx.snap new file mode 100644 index 00000000000..1c1931f6547 --- /dev/null +++ b/packages/blade/src/components/Icons/IndiaFlagIcon/__snapshots__/IndiaFlagIcon.web.test.tsx.snap @@ -0,0 +1,23 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should render IndiaFlagIcon 1`] = ` +
+ +
+`; diff --git a/packages/blade/src/components/Icons/IndiaFlagIcon/index.ts b/packages/blade/src/components/Icons/IndiaFlagIcon/index.ts new file mode 100644 index 00000000000..5d7818ca36d --- /dev/null +++ b/packages/blade/src/components/Icons/IndiaFlagIcon/index.ts @@ -0,0 +1 @@ +export { default } from './IndiaFlagIcon'; diff --git a/packages/blade/src/components/Icons/MagicKonnectIcon/MagicKonnectIcon.native.test.tsx b/packages/blade/src/components/Icons/MagicKonnectIcon/MagicKonnectIcon.native.test.tsx new file mode 100644 index 00000000000..1f2ef0ccaa2 --- /dev/null +++ b/packages/blade/src/components/Icons/MagicKonnectIcon/MagicKonnectIcon.native.test.tsx @@ -0,0 +1,11 @@ +import MagicKonnectIcon from '.'; +import renderWithTheme from '~utils/testing/renderWithTheme.native'; + +describe('', () => { + it('should render MagicKonnectIcon', () => { + const renderTree = renderWithTheme( + , + ).toJSON(); + expect(renderTree).toMatchSnapshot(); + }); +}); diff --git a/packages/blade/src/components/Icons/MagicKonnectIcon/MagicKonnectIcon.tsx b/packages/blade/src/components/Icons/MagicKonnectIcon/MagicKonnectIcon.tsx new file mode 100644 index 00000000000..8b355348106 --- /dev/null +++ b/packages/blade/src/components/Icons/MagicKonnectIcon/MagicKonnectIcon.tsx @@ -0,0 +1,32 @@ +import { Svg, Path } from '../_Svg'; +import type { IconComponent } from '..'; +import useIconProps from '../useIconProps'; + +const MagicKonnectIcon: IconComponent = ({ size, color, ...styledProps }) => { + const { height, width, iconColor } = useIconProps({ size, color }); + + return ( + + + + + + ); +}; + +export default MagicKonnectIcon; diff --git a/packages/blade/src/components/Icons/MagicKonnectIcon/MagicKonnectIcon.web.test.tsx b/packages/blade/src/components/Icons/MagicKonnectIcon/MagicKonnectIcon.web.test.tsx new file mode 100644 index 00000000000..af7b849563b --- /dev/null +++ b/packages/blade/src/components/Icons/MagicKonnectIcon/MagicKonnectIcon.web.test.tsx @@ -0,0 +1,11 @@ +import MagicKonnectIcon from './'; +import renderWithTheme from '~utils/testing/renderWithTheme.web'; + +describe('', () => { + it('should render MagicKonnectIcon', () => { + const { container } = renderWithTheme( + , + ); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/packages/blade/src/components/Icons/MagicKonnectIcon/__snapshots__/MagicKonnectIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/MagicKonnectIcon/__snapshots__/MagicKonnectIcon.native.test.tsx.snap new file mode 100644 index 00000000000..6ffeb4ef382 --- /dev/null +++ b/packages/blade/src/components/Icons/MagicKonnectIcon/__snapshots__/MagicKonnectIcon.native.test.tsx.snap @@ -0,0 +1,106 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should render MagicKonnectIcon 1`] = ` + + + + + + + + + +`; diff --git a/packages/blade/src/components/Icons/MagicKonnectIcon/__snapshots__/MagicKonnectIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/MagicKonnectIcon/__snapshots__/MagicKonnectIcon.web.test.tsx.snap new file mode 100644 index 00000000000..f29f200f903 --- /dev/null +++ b/packages/blade/src/components/Icons/MagicKonnectIcon/__snapshots__/MagicKonnectIcon.web.test.tsx.snap @@ -0,0 +1,37 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should render MagicKonnectIcon 1`] = ` +
+ +
+`; diff --git a/packages/blade/src/components/Icons/MagicKonnectIcon/index.ts b/packages/blade/src/components/Icons/MagicKonnectIcon/index.ts new file mode 100644 index 00000000000..f576d28ee80 --- /dev/null +++ b/packages/blade/src/components/Icons/MagicKonnectIcon/index.ts @@ -0,0 +1 @@ +export { default } from './MagicKonnectIcon'; diff --git a/packages/blade/src/components/Icons/WorldwideIcon/WorldwideIcon.native.test.tsx b/packages/blade/src/components/Icons/WorldwideIcon/WorldwideIcon.native.test.tsx new file mode 100644 index 00000000000..965039cc587 --- /dev/null +++ b/packages/blade/src/components/Icons/WorldwideIcon/WorldwideIcon.native.test.tsx @@ -0,0 +1,11 @@ +import WorldwideIcon from '.'; +import renderWithTheme from '~utils/testing/renderWithTheme.native'; + +describe('', () => { + it('should render WorldwideIcon', () => { + const renderTree = renderWithTheme( + , + ).toJSON(); + expect(renderTree).toMatchSnapshot(); + }); +}); diff --git a/packages/blade/src/components/Icons/WorldwideIcon/WorldwideIcon.tsx b/packages/blade/src/components/Icons/WorldwideIcon/WorldwideIcon.tsx new file mode 100644 index 00000000000..218c0ea2511 --- /dev/null +++ b/packages/blade/src/components/Icons/WorldwideIcon/WorldwideIcon.tsx @@ -0,0 +1,20 @@ +import { Svg, Path } from '../_Svg'; +import type { IconComponent } from '..'; +import useIconProps from '../useIconProps'; + +const WorldwideIcon: IconComponent = ({ size, color, ...styledProps }) => { + const { height, width, iconColor } = useIconProps({ size, color }); + + return ( + + + + ); +}; + +export default WorldwideIcon; diff --git a/packages/blade/src/components/Icons/WorldwideIcon/WorldwideIcon.web.test.tsx b/packages/blade/src/components/Icons/WorldwideIcon/WorldwideIcon.web.test.tsx new file mode 100644 index 00000000000..dd48f4a44f6 --- /dev/null +++ b/packages/blade/src/components/Icons/WorldwideIcon/WorldwideIcon.web.test.tsx @@ -0,0 +1,11 @@ +import WorldwideIcon from './'; +import renderWithTheme from '~utils/testing/renderWithTheme.web'; + +describe('', () => { + it('should render WorldwideIcon', () => { + const { container } = renderWithTheme( + , + ); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/packages/blade/src/components/Icons/WorldwideIcon/__snapshots__/WorldwideIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/WorldwideIcon/__snapshots__/WorldwideIcon.native.test.tsx.snap new file mode 100644 index 00000000000..96054242c20 --- /dev/null +++ b/packages/blade/src/components/Icons/WorldwideIcon/__snapshots__/WorldwideIcon.native.test.tsx.snap @@ -0,0 +1,72 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should render WorldwideIcon 1`] = ` + + + + + + + +`; diff --git a/packages/blade/src/components/Icons/WorldwideIcon/__snapshots__/WorldwideIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/WorldwideIcon/__snapshots__/WorldwideIcon.web.test.tsx.snap new file mode 100644 index 00000000000..44e4263fe94 --- /dev/null +++ b/packages/blade/src/components/Icons/WorldwideIcon/__snapshots__/WorldwideIcon.web.test.tsx.snap @@ -0,0 +1,23 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should render WorldwideIcon 1`] = ` +
+ +
+`; diff --git a/packages/blade/src/components/Icons/WorldwideIcon/index.ts b/packages/blade/src/components/Icons/WorldwideIcon/index.ts new file mode 100644 index 00000000000..e9fd7822360 --- /dev/null +++ b/packages/blade/src/components/Icons/WorldwideIcon/index.ts @@ -0,0 +1 @@ +export { default } from './WorldwideIcon'; diff --git a/packages/blade/src/components/Icons/iconMap.ts b/packages/blade/src/components/Icons/iconMap.ts index f6cd298278c..ab9d7f66b60 100644 --- a/packages/blade/src/components/Icons/iconMap.ts +++ b/packages/blade/src/components/Icons/iconMap.ts @@ -168,6 +168,7 @@ import HistoryIconComponent from './HistoryIcon'; import HomeIconComponent from './HomeIcon'; import ImageIconComponent from './ImageIcon'; import InboxIconComponent from './InboxIcon'; +import IndiaFlagIconComponent from './IndiaFlagIcon'; import InfoIconComponent from './InfoIcon'; import InstagramIconComponent from './InstagramIcon'; import InstantSettlementIconComponent from './InstantSettlementIcon'; @@ -185,6 +186,7 @@ import LockIconComponent from './LockIcon'; import LogInIconComponent from './LogInIcon'; import LogOutIconComponent from './LogOutIcon'; import MagicCheckoutIconComponent from './MagicCheckoutIcon'; +import MagicKonnectIconComponent from './MagicKonnectIcon'; import MailIconComponent from './MailIcon'; import MailOpenIconComponent from './MailOpenIcon'; import MapIconComponent from './MapIcon'; @@ -354,6 +356,7 @@ import WatchIconComponent from './WatchIcon'; import WifiIconComponent from './WifiIcon'; import WifiOffIconComponent from './WifiOffIcon'; import WindIconComponent from './WindIcon'; +import WorldwideIconComponent from './WorldwideIcon'; import XCircleIconComponent from './XCircleIcon'; import XSquareIconComponent from './XSquareIcon'; import YoutubeIconComponent from './YoutubeIcon'; @@ -531,6 +534,7 @@ const iconMap: Record = { HomeIcon: HomeIconComponent, ImageIcon: ImageIconComponent, InboxIcon: InboxIconComponent, + IndiaFlagIcon: IndiaFlagIconComponent, InfoIcon: InfoIconComponent, InstagramIcon: InstagramIconComponent, InstantSettlementIcon: InstantSettlementIconComponent, @@ -548,6 +552,7 @@ const iconMap: Record = { LogInIcon: LogInIconComponent, LogOutIcon: LogOutIconComponent, MagicCheckoutIcon: MagicCheckoutIconComponent, + MagicKonnectIcon: MagicKonnectIconComponent, MailIcon: MailIconComponent, MailOpenIcon: MailOpenIconComponent, MapIcon: MapIconComponent, @@ -717,6 +722,7 @@ const iconMap: Record = { WifiIcon: WifiIconComponent, WifiOffIcon: WifiOffIconComponent, WindIcon: WindIconComponent, + WorldwideIcon: WorldwideIconComponent, XCircleIcon: XCircleIconComponent, XSquareIcon: XSquareIconComponent, YoutubeIcon: YoutubeIconComponent, diff --git a/packages/blade/src/components/Icons/index.ts b/packages/blade/src/components/Icons/index.ts index 5ecf33cbf2b..b4366a9a339 100644 --- a/packages/blade/src/components/Icons/index.ts +++ b/packages/blade/src/components/Icons/index.ts @@ -169,6 +169,7 @@ export { default as HistoryIcon } from './HistoryIcon'; export { default as HomeIcon } from './HomeIcon'; export { default as ImageIcon } from './ImageIcon'; export { default as InboxIcon } from './InboxIcon'; +export { default as IndiaFlagIcon } from './IndiaFlagIcon'; export { default as InfoIcon } from './InfoIcon'; export { default as InstagramIcon } from './InstagramIcon'; export { default as InstantSettlementIcon } from './InstantSettlementIcon'; @@ -186,6 +187,7 @@ export { default as LockIcon } from './LockIcon'; export { default as LogInIcon } from './LogInIcon'; export { default as LogOutIcon } from './LogOutIcon'; export { default as MagicCheckoutIcon } from './MagicCheckoutIcon'; +export { default as MagicKonnectIcon } from './MagicKonnectIcon'; export { default as MailIcon } from './MailIcon'; export { default as MailOpenIcon } from './MailOpenIcon'; export { default as MapIcon } from './MapIcon'; @@ -355,6 +357,7 @@ export { default as WatchIcon } from './WatchIcon'; export { default as WifiIcon } from './WifiIcon'; export { default as WifiOffIcon } from './WifiOffIcon'; export { default as WindIcon } from './WindIcon'; +export { default as WorldwideIcon } from './WorldwideIcon'; export { default as XCircleIcon } from './XCircleIcon'; export { default as XSquareIcon } from './XSquareIcon'; export { default as YoutubeIcon } from './YoutubeIcon';