diff --git a/packages/components/src/SideDialog/SideDialog.stories.tsx b/packages/components/src/SideDialog/SideDialog.stories.tsx index 6640a3a67..851c9b53e 100644 --- a/packages/components/src/SideDialog/SideDialog.stories.tsx +++ b/packages/components/src/SideDialog/SideDialog.stories.tsx @@ -12,6 +12,8 @@ import { SideDialogActions } from '../SideDialogActions'; import { SideDialogContent } from '../SideDialogContent'; import { SideDialogContentText } from '../SideDialogContentText'; import { SideDialogHeader } from '../SideDialogHeader'; +import { Typography } from '../Typography'; +import { DescriptionList, type DescriptionListItem } from '../DescriptionList'; import { SideDialog } from './SideDialog'; @@ -261,3 +263,206 @@ export const CustomFooter = () => { ); }; + +/** + * prop `size` определяет размер SideDialog, по дефолту `sm` + * */ +export const Sizes = () => { + const [openXs, setOpenXs] = useState(false); + const [openSm, setOpenSm] = useState(false); + const [openMd, setOpenMd] = useState(false); + const [openLg, setOpenLg] = useState(false); + + const items: DescriptionListItem[] = [ + { + name: 'Дата поступления', + value: '12.06.2024 в 11:11', + }, + { + name: 'Тип заявки', + value: 'Создание', + }, + { + name: 'ID учетной записи', + value: '4d1f0594-bc22-4660-8e7d-83a024126ef3', + }, + { + name: 'ID док-оборота', + value: '222a1343-rf12-6660-1e3q-88a911143yr1', + }, + { + name: 'Полное наименование', + value: 'ООО «АкцептЗайчатинаСТОНал»', + }, + { + name: 'ИНН', + value: '77724528768', + }, + { + name: 'КПП', + value: '772401001', + }, + { + name: 'Конфигурация', + value: 'Значение показателя', + }, + { + name: 'Удостоверенный центр', + value: 'УЦ «Калуга Астрал»', + }, + ]; + + const partnerItems: DescriptionListItem[] = [ + { + name: 'Офис', + value: 'АО «Калуга Астрал» ОПС ЭДО', + }, + { + name: 'Центр продаж', + value: 'АО «Калуга Астрал»', + }, + { + name: 'ID партнера', + value: '4d1f0594-bc22-4660-8e7d-83a024126ef3', + }, + ]; + const handleCloseXs = () => { + setOpenXs(false); + }; + const handleCloseSm = () => { + setOpenSm(false); + }; + const handleCloseMd = () => { + setOpenMd(false); + }; + const handleCloseLg = () => { + setOpenLg(false); + }; + + return ( + <> + + + + + + + + + Реквизиты абонента +
+ +
+ Данные партнера +
+ +
+ + + + + +
+ + + Реквизиты абонента +
+ +
+ Данные партнера +
+ +
+ + + + + +
+ + + Реквизиты абонента +
+ +
+ Данные партнера +
+ +
+ + + + + +
+ + + Реквизиты абонента +
+ +
+ Данные партнера +
+ +
+ + + + + +
+ + ); +}; diff --git a/packages/components/src/SideDialog/SideDialog.tsx b/packages/components/src/SideDialog/SideDialog.tsx index f3d33fc8e..31e71ffc2 100644 --- a/packages/components/src/SideDialog/SideDialog.tsx +++ b/packages/components/src/SideDialog/SideDialog.tsx @@ -5,10 +5,17 @@ import { type WithoutEmotionSpecific } from '../types'; import { StyledDrawer } from './styles'; +type SideDialogSize = 'xs' | 'sm' | 'md' | 'lg'; + export type SideDialogProps = WithoutEmotionSpecific< Omit > & { title?: string; + /** + * Размер SideDialog + * @default sm + */ + size?: SideDialogSize; }; export const SideDialog = ({ @@ -16,10 +23,17 @@ export const SideDialog = ({ title, onClose, open, + size = 'sm', ...props }: SideDialogProps) => { return ( - + {title && {title}} {children} diff --git a/packages/components/src/SideDialog/constants.ts b/packages/components/src/SideDialog/constants.ts new file mode 100644 index 000000000..0dd48d925 --- /dev/null +++ b/packages/components/src/SideDialog/constants.ts @@ -0,0 +1,6 @@ +export const SIZES = { + xs: '460px', + sm: '520px', + md: '620px', + lg: '800px', +}; diff --git a/packages/components/src/SideDialog/styles.ts b/packages/components/src/SideDialog/styles.ts index 87670a3af..34cf3921b 100644 --- a/packages/components/src/SideDialog/styles.ts +++ b/packages/components/src/SideDialog/styles.ts @@ -3,13 +3,23 @@ import { Drawer, type DrawerProps, drawerClasses } from '@mui/material'; import { styled } from '../styles'; import { type WithoutEmotionSpecific } from '../types'; -export const StyledDrawer = styled(Drawer)>` +import { SIZES } from './constants'; + +type SideDialogSize = 'xs' | 'sm' | 'md' | 'lg'; + +const getSize = (size: SideDialogSize) => { + return SIZES[size] || SIZES.sm; +}; + +export const StyledDrawer = styled(Drawer, { + shouldForwardProp: (prop) => !['$size'].includes(prop), +})<{ $size: SideDialogSize } & WithoutEmotionSpecific>` height: 100vh; @supports (height: 100dvh) { height: 100dvh; } .${drawerClasses.paper} { - width: 30%; + width: ${({ $size }) => getSize($size)}; } `;