From 5f4e38e5bac4da5efc957d2cf27028d5167f902c Mon Sep 17 00:00:00 2001 From: Svyatoslav Date: Thu, 2 May 2024 17:39:46 +0300 Subject: [PATCH] feat(Alert): add new icon components --- .../documentation/components/IconsDemo.tsx | 28 ++++++++++++++++++- packages/react/src/icons/IconAlertDuo.tsx | 24 ++++++++++++++++ packages/react/src/icons/IconAlertFill.tsx | 18 ++++++++++++ packages/react/src/icons/IconAlertLine.tsx | 15 ++++++++++ packages/react/src/icons/IconError2Duo.tsx | 20 +++++++++++++ packages/react/src/icons/IconError2Fill.tsx | 15 ++++++++++ packages/react/src/icons/IconError2Line.tsx | 15 ++++++++++ packages/react/src/icons/IconErrorDuo.tsx | 23 +++++++++++++++ packages/react/src/icons/IconErrorFill.tsx | 17 +++++++++++ packages/react/src/icons/IconErrorLine.tsx | 14 ++++++++++ packages/react/src/icons/IconInfo2Duo.tsx | 27 ++++++++++++++++++ packages/react/src/icons/IconInfo2Fill.tsx | 21 ++++++++++++++ packages/react/src/icons/IconInfo2Line.tsx | 18 ++++++++++++ packages/react/src/icons/IconInfoDuo.tsx | 24 ++++++++++++++++ packages/react/src/icons/IconInfoFill.tsx | 18 ++++++++++++ packages/react/src/icons/IconInfoLine.tsx | 15 ++++++++++ packages/react/src/icons/IconSuccessDuo.tsx | 19 +++++++++++++ packages/react/src/icons/IconSuccessFill.tsx | 19 +++++++++++++ packages/react/src/icons/IconSuccessLine.tsx | 10 +++++++ packages/react/src/icons/IconWarningDuo.tsx | 24 ++++++++++++++++ packages/react/src/icons/IconWarningFill.tsx | 18 ++++++++++++ packages/react/src/icons/IconWarningLine.tsx | 15 ++++++++++ packages/react/src/icons/index.ts | 21 ++++++++++++++ 23 files changed, 437 insertions(+), 1 deletion(-) create mode 100644 packages/react/src/icons/IconAlertDuo.tsx create mode 100644 packages/react/src/icons/IconAlertFill.tsx create mode 100644 packages/react/src/icons/IconAlertLine.tsx create mode 100644 packages/react/src/icons/IconError2Duo.tsx create mode 100644 packages/react/src/icons/IconError2Fill.tsx create mode 100644 packages/react/src/icons/IconError2Line.tsx create mode 100644 packages/react/src/icons/IconErrorDuo.tsx create mode 100644 packages/react/src/icons/IconErrorFill.tsx create mode 100644 packages/react/src/icons/IconErrorLine.tsx create mode 100644 packages/react/src/icons/IconInfo2Duo.tsx create mode 100644 packages/react/src/icons/IconInfo2Fill.tsx create mode 100644 packages/react/src/icons/IconInfo2Line.tsx create mode 100644 packages/react/src/icons/IconInfoDuo.tsx create mode 100644 packages/react/src/icons/IconInfoFill.tsx create mode 100644 packages/react/src/icons/IconInfoLine.tsx create mode 100644 packages/react/src/icons/IconSuccessDuo.tsx create mode 100644 packages/react/src/icons/IconSuccessFill.tsx create mode 100644 packages/react/src/icons/IconSuccessLine.tsx create mode 100644 packages/react/src/icons/IconWarningDuo.tsx create mode 100644 packages/react/src/icons/IconWarningFill.tsx create mode 100644 packages/react/src/icons/IconWarningLine.tsx diff --git a/packages/react/src/documentation/components/IconsDemo.tsx b/packages/react/src/documentation/components/IconsDemo.tsx index 40650074d..3581fcf59 100644 --- a/packages/react/src/documentation/components/IconsDemo.tsx +++ b/packages/react/src/documentation/components/IconsDemo.tsx @@ -1,3 +1,5 @@ +import React, { useEffect, useState } from 'react'; + import { styled } from '@mui/material/styles'; import Tooltip from '@mui/material/Tooltip'; @@ -20,6 +22,27 @@ const IconsDemoIcon = styled('div')(({ theme }) => ({ })); export const IconsDemo = () => { + const [oversizedIcons, setOversizedIcons] = useState({}); + const [wideIcons, setWideIcons] = useState({}); + + const containerSize = 48; + + useEffect(() => { + Object.keys(icons).forEach((name) => { + const iconElement = document.getElementById(name); + + if (iconElement) { + const { width, height } = iconElement.getBoundingClientRect(); + + if (height > containerSize) { + setOversizedIcons((prev) => ({ ...prev, [name]: true })); + } else if (width > containerSize) { + setWideIcons((prev) => ({ ...prev, [name]: true })); + } + } + }); + }, []); + return ( {Object.keys(icons).map((name) => { @@ -28,7 +51,10 @@ export const IconsDemo = () => { return ( {name}}> - + ); diff --git a/packages/react/src/icons/IconAlertDuo.tsx b/packages/react/src/icons/IconAlertDuo.tsx new file mode 100644 index 000000000..d8916af60 --- /dev/null +++ b/packages/react/src/icons/IconAlertDuo.tsx @@ -0,0 +1,24 @@ +import { SvgIcon, SvgIconProps } from '../components/SvgIcon'; + +interface DuoColorIconProps extends SvgIconProps { + primaryColor?: string; + secondaryColor?: string; +} + +export const IconAlertDuo = ({ + primaryColor = 'currentColor', + secondaryColor = 'currentColor', + ...props +}: DuoColorIconProps) => { + return ( + + + + + + ); +}; diff --git a/packages/react/src/icons/IconAlertFill.tsx b/packages/react/src/icons/IconAlertFill.tsx new file mode 100644 index 000000000..c6e5e9fbd --- /dev/null +++ b/packages/react/src/icons/IconAlertFill.tsx @@ -0,0 +1,18 @@ +import { useTheme } from '@mui/material'; + +import { SvgIcon, SvgIconProps } from '../components/SvgIcon'; + +export const IconAlertFill = (props: SvgIconProps) => { + const theme = useTheme(); + + return ( + + + + + + ); +}; diff --git a/packages/react/src/icons/IconAlertLine.tsx b/packages/react/src/icons/IconAlertLine.tsx new file mode 100644 index 000000000..4f9ab20b9 --- /dev/null +++ b/packages/react/src/icons/IconAlertLine.tsx @@ -0,0 +1,15 @@ +import { SvgIcon, SvgIconProps } from '../components/SvgIcon'; + +export const IconAlertLine = (props: SvgIconProps) => { + return ( + + + + + + ); +}; diff --git a/packages/react/src/icons/IconError2Duo.tsx b/packages/react/src/icons/IconError2Duo.tsx new file mode 100644 index 000000000..a15c14871 --- /dev/null +++ b/packages/react/src/icons/IconError2Duo.tsx @@ -0,0 +1,20 @@ +import { SvgIcon, SvgIconProps } from '../components/SvgIcon'; + +interface DuoColorIconProps extends SvgIconProps { + primaryColor?: string; + secondaryColor?: string; +} + +export const IconError2Duo = ({ + primaryColor = 'currentColor', + secondaryColor = 'currentColor', + ...props +}: DuoColorIconProps) => { + return ( + + + + + + ); +}; diff --git a/packages/react/src/icons/IconError2Fill.tsx b/packages/react/src/icons/IconError2Fill.tsx new file mode 100644 index 000000000..5c49f967d --- /dev/null +++ b/packages/react/src/icons/IconError2Fill.tsx @@ -0,0 +1,15 @@ +import { useTheme } from '@mui/material'; + +import { SvgIcon, SvgIconProps } from '../components/SvgIcon'; + +export const IconError2Fill = (props: SvgIconProps) => { + const theme = useTheme(); + + return ( + + + + + + ); +}; diff --git a/packages/react/src/icons/IconError2Line.tsx b/packages/react/src/icons/IconError2Line.tsx new file mode 100644 index 000000000..9ec007255 --- /dev/null +++ b/packages/react/src/icons/IconError2Line.tsx @@ -0,0 +1,15 @@ +import { SvgIcon, SvgIconProps } from '../components/SvgIcon'; + +export const IconError2Line = (props: SvgIconProps) => { + return ( + + + + + + ); +}; diff --git a/packages/react/src/icons/IconErrorDuo.tsx b/packages/react/src/icons/IconErrorDuo.tsx new file mode 100644 index 000000000..1f5a99b42 --- /dev/null +++ b/packages/react/src/icons/IconErrorDuo.tsx @@ -0,0 +1,23 @@ +import { SvgIcon, SvgIconProps } from '../components/SvgIcon'; + +interface DuoColorIconProps extends SvgIconProps { + primaryColor?: string; + secondaryColor?: string; +} + +export const IconErrorDuo = ({ + primaryColor = 'currentColor', + secondaryColor = 'currentColor', + ...props +}: DuoColorIconProps) => { + return ( + + + + + ); +}; diff --git a/packages/react/src/icons/IconErrorFill.tsx b/packages/react/src/icons/IconErrorFill.tsx new file mode 100644 index 000000000..32345241b --- /dev/null +++ b/packages/react/src/icons/IconErrorFill.tsx @@ -0,0 +1,17 @@ +import { useTheme } from '@mui/material'; + +import { SvgIcon, SvgIconProps } from '../components/SvgIcon'; + +export const IconErrorFill = (props: SvgIconProps) => { + const theme = useTheme(); + + return ( + + + + + ); +}; diff --git a/packages/react/src/icons/IconErrorLine.tsx b/packages/react/src/icons/IconErrorLine.tsx new file mode 100644 index 000000000..7f7313935 --- /dev/null +++ b/packages/react/src/icons/IconErrorLine.tsx @@ -0,0 +1,14 @@ +import { SvgIcon, SvgIconProps } from '../components/SvgIcon'; + +export const IconErrorLine = (props: SvgIconProps) => { + return ( + + + + + ); +}; diff --git a/packages/react/src/icons/IconInfo2Duo.tsx b/packages/react/src/icons/IconInfo2Duo.tsx new file mode 100644 index 000000000..6e533212e --- /dev/null +++ b/packages/react/src/icons/IconInfo2Duo.tsx @@ -0,0 +1,27 @@ +import { SvgIcon, SvgIconProps } from '../components/SvgIcon'; + +interface DuoColorIconProps extends SvgIconProps { + primaryColor?: string; + secondaryColor?: string; +} + +export const IconInfo2Duo = ({ + primaryColor = 'currentColor', + secondaryColor = 'currentColor', + ...props +}: DuoColorIconProps) => { + return ( + + + + + + ); +}; diff --git a/packages/react/src/icons/IconInfo2Fill.tsx b/packages/react/src/icons/IconInfo2Fill.tsx new file mode 100644 index 000000000..9126c1175 --- /dev/null +++ b/packages/react/src/icons/IconInfo2Fill.tsx @@ -0,0 +1,21 @@ +import { useTheme } from '@mui/material'; + +import { SvgIcon, SvgIconProps } from '../components/SvgIcon'; + +export const IconInfo2Fill = (props: SvgIconProps) => { + const theme = useTheme(); + + return ( + + + + + + ); +}; diff --git a/packages/react/src/icons/IconInfo2Line.tsx b/packages/react/src/icons/IconInfo2Line.tsx new file mode 100644 index 000000000..9dcfa33ad --- /dev/null +++ b/packages/react/src/icons/IconInfo2Line.tsx @@ -0,0 +1,18 @@ +import { SvgIcon, SvgIconProps } from '../components/SvgIcon'; + +export const IconInfo2Line = (props: SvgIconProps) => { + return ( + + + + + + ); +}; diff --git a/packages/react/src/icons/IconInfoDuo.tsx b/packages/react/src/icons/IconInfoDuo.tsx new file mode 100644 index 000000000..d191c3913 --- /dev/null +++ b/packages/react/src/icons/IconInfoDuo.tsx @@ -0,0 +1,24 @@ +import { SvgIcon, SvgIconProps } from '../components/SvgIcon'; + +interface DuoColorIconProps extends SvgIconProps { + primaryColor?: string; + secondaryColor?: string; +} + +export const IconInfoDuo = ({ + primaryColor = 'currentColor', + secondaryColor = 'currentColor', + ...props +}: DuoColorIconProps) => { + return ( + + + + + + ); +}; diff --git a/packages/react/src/icons/IconInfoFill.tsx b/packages/react/src/icons/IconInfoFill.tsx new file mode 100644 index 000000000..2fb8ef564 --- /dev/null +++ b/packages/react/src/icons/IconInfoFill.tsx @@ -0,0 +1,18 @@ +import { useTheme } from '@mui/material'; + +import { SvgIcon, SvgIconProps } from '../components/SvgIcon'; + +export const IconInfoFill = (props: SvgIconProps) => { + const theme = useTheme(); + + return ( + + + + + + ); +}; diff --git a/packages/react/src/icons/IconInfoLine.tsx b/packages/react/src/icons/IconInfoLine.tsx new file mode 100644 index 000000000..8d402f8f1 --- /dev/null +++ b/packages/react/src/icons/IconInfoLine.tsx @@ -0,0 +1,15 @@ +import { SvgIcon, SvgIconProps } from '../components/SvgIcon'; + +export const IconInfoLine = (props: SvgIconProps) => { + return ( + + + + + + ); +}; diff --git a/packages/react/src/icons/IconSuccessDuo.tsx b/packages/react/src/icons/IconSuccessDuo.tsx new file mode 100644 index 000000000..a794739ae --- /dev/null +++ b/packages/react/src/icons/IconSuccessDuo.tsx @@ -0,0 +1,19 @@ +import { SvgIcon, SvgIconProps } from '../components/SvgIcon'; + +interface DuoColorIconProps extends SvgIconProps { + primaryColor?: string; + secondaryColor?: string; +} + +export const IconSuccessDuo = ({ + primaryColor = 'currentColor', + secondaryColor = 'currentColor', + ...props +}: DuoColorIconProps) => { + return ( + + + + + ); +}; diff --git a/packages/react/src/icons/IconSuccessFill.tsx b/packages/react/src/icons/IconSuccessFill.tsx new file mode 100644 index 000000000..e4f0c8d03 --- /dev/null +++ b/packages/react/src/icons/IconSuccessFill.tsx @@ -0,0 +1,19 @@ +import { useTheme } from '@mui/material'; + +import { SvgIcon, SvgIconProps } from '../components/SvgIcon'; + +export const IconSuccessFill = (props: SvgIconProps) => { + const theme = useTheme(); + + return ( + + + + + ); +}; diff --git a/packages/react/src/icons/IconSuccessLine.tsx b/packages/react/src/icons/IconSuccessLine.tsx new file mode 100644 index 000000000..a7331eb12 --- /dev/null +++ b/packages/react/src/icons/IconSuccessLine.tsx @@ -0,0 +1,10 @@ +import { SvgIcon, SvgIconProps } from '../components/SvgIcon'; + +export const IconSuccessLine = (props: SvgIconProps) => { + return ( + + + + + ); +}; diff --git a/packages/react/src/icons/IconWarningDuo.tsx b/packages/react/src/icons/IconWarningDuo.tsx new file mode 100644 index 000000000..abb09711b --- /dev/null +++ b/packages/react/src/icons/IconWarningDuo.tsx @@ -0,0 +1,24 @@ +import { SvgIcon, SvgIconProps } from '../components/SvgIcon'; + +interface DuoColorIconProps extends SvgIconProps { + primaryColor?: string; + secondaryColor?: string; +} + +export const IconWarningDuo = ({ + primaryColor = 'currentColor', + secondaryColor = 'currentColor', + ...props +}: DuoColorIconProps) => { + return ( + + + + + + ); +}; diff --git a/packages/react/src/icons/IconWarningFill.tsx b/packages/react/src/icons/IconWarningFill.tsx new file mode 100644 index 000000000..d8bb00ddf --- /dev/null +++ b/packages/react/src/icons/IconWarningFill.tsx @@ -0,0 +1,18 @@ +import { useTheme } from '@mui/material'; + +import { SvgIcon, SvgIconProps } from '../components/SvgIcon'; + +export const IconWarningFill = (props: SvgIconProps) => { + const theme = useTheme(); + + return ( + + + + + + ); +}; diff --git a/packages/react/src/icons/IconWarningLine.tsx b/packages/react/src/icons/IconWarningLine.tsx new file mode 100644 index 000000000..a22d4e662 --- /dev/null +++ b/packages/react/src/icons/IconWarningLine.tsx @@ -0,0 +1,15 @@ +import { SvgIcon, SvgIconProps } from '../components/SvgIcon'; + +export const IconWarningLine = (props: SvgIconProps) => { + return ( + + + + + + ); +}; diff --git a/packages/react/src/icons/index.ts b/packages/react/src/icons/index.ts index af5db3480..3dd6e067a 100644 --- a/packages/react/src/icons/index.ts +++ b/packages/react/src/icons/index.ts @@ -4,7 +4,10 @@ export { IconAddCircle } from './IconAddCircle'; export { IconAlertCircleLc } from './IconAlertCircleLc'; export { IconAlertCircleW300 } from './IconAlertCircleW300'; export { IconAlertCircleW500 } from './IconAlertCircleW500'; +export { IconAlertDuo } from './IconAlertDuo'; +export { IconAlertFill } from './IconAlertFill'; export { IconAlertLc } from './IconAlertLc'; +export { IconAlertLine } from './IconAlertLine'; export { IconAlertW300 } from './IconAlertW300'; export { IconAlertW500 } from './IconAlertW500'; export { IconApple } from './IconApple'; @@ -108,7 +111,13 @@ export { IconEmoticonPlus } from './IconEmoticonPlus'; export { IconEmotionHappy } from './IconEmotionHappy'; export { IconEmotionHappy2 } from './IconEmotionHappy2'; export { IconEnter } from './IconEnter'; +export { IconError2Duo } from './IconError2Duo'; +export { IconError2Fill } from './IconError2Fill'; +export { IconError2Line } from './IconError2Line'; +export { IconErrorDuo } from './IconErrorDuo'; +export { IconErrorFill } from './IconErrorFill'; export { IconErrorLc } from './IconErrorLc'; +export { IconErrorLine } from './IconErrorLine'; export { IconErrorW300 } from './IconErrorW300'; export { IconErrorW500 } from './IconErrorW500'; export { IconExclamation } from './IconExclamation'; @@ -136,6 +145,12 @@ export { IconHeart } from './IconHeart'; export { IconHome } from './IconHome'; export { IconImageLc } from './IconImageLc'; export { IconImageMultiple } from './IconImageMultiple'; +export { IconInfo2Duo } from './IconInfo2Duo'; +export { IconInfo2Fill } from './IconInfo2Fill'; +export { IconInfo2Line } from './IconInfo2Line'; +export { IconInfoDuo } from './IconInfoDuo'; +export { IconInfoFill } from './IconInfoFill'; +export { IconInfoLine } from './IconInfoLine'; export { IconInformation2W400 } from './IconInformation2W400'; export { IconInformation2W500 } from './IconInformation2W500'; export { IconInformationFillW200 } from './IconInformationFillW200'; @@ -236,6 +251,9 @@ export { IconStarLineW500 } from './IconStarLineW500'; export { IconStopW300 } from './IconStopW300'; export { IconStopW400 } from './IconStopW400'; export { IconStopW500 } from './IconStopW500'; +export { IconSuccessDuo } from './IconSuccessDuo'; +export { IconSuccessFill } from './IconSuccessFill'; +export { IconSuccessLine } from './IconSuccessLine'; export { IconTrash2 } from './IconTrash2'; export { IconTrashFill } from './IconTrashFill'; export { IconTrashLine } from './IconTrashLine'; @@ -253,3 +271,6 @@ export { IconVolumeHigh } from './IconVolumeHigh'; export { IconVolumeLow } from './IconVolumeLow'; export { IconVolumeMute } from './IconVolumeMute'; export { IconVolumeUp } from './IconVolumeUp'; +export { IconWarningDuo } from './IconWarningDuo'; +export { IconWarningFill } from './IconWarningFill'; +export { IconWarningLine } from './IconWarningLine';