feat: Add css utilities to Box, Stack and Group components

This commit is contained in:
Ahmed Bouhuolia
2024-10-13 01:06:17 +02:00
parent b7b86bb0c5
commit ddea7be24a
18 changed files with 134 additions and 136 deletions

View File

@@ -1,10 +1,7 @@
// @ts-nocheck
import React from 'react';
import classNames from 'classnames';
import styled from 'styled-components';
import { CLASSES } from '@/constants/classes';
import { Row, Col, Paper } from '@/components';
import { Row, Col, Paper, Stack } from '@/components';
import { CreditNoteFormFooterLeft } from './CreditNoteFormFooterLeft';
import { CreditNoteFormFooterRight } from './CreditNoteFormFooterRight';
import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmentButton';
@@ -14,8 +11,8 @@ import { UploadAttachmentButton } from '@/containers/Attachments/UploadAttachmen
*/
export default function CreditNoteFormFooter() {
return (
<div className={classNames(CLASSES.PAGE_FORM_FOOTER)}>
<CreditNoteFooterPaper>
<Stack mt={'20px'} px={'32px'} pb={'20px'} flex={1}>
<Paper p={'20px'}>
<Row>
<Col md={8}>
<CreditNoteFormFooterLeft />
@@ -26,10 +23,7 @@ export default function CreditNoteFormFooter() {
<CreditNoteFormFooterRight />
</Col>
</Row>
</CreditNoteFooterPaper>
</div>
</Paper>
</Stack>
);
}
const CreditNoteFooterPaper = styled(Paper)`
padding: 20px;
`;

View File

@@ -1,23 +1,28 @@
// @ts-nocheck
import React from 'react';
import intl from 'react-intl-universal';
import classNames from 'classnames';
import { useFormikContext } from 'formik';
import { CLASSES } from '@/constants/classes';
import CreditNoteFormHeaderFields from './CreditNoteFormHeaderFields';
import { getEntriesTotal } from '@/containers/Entries/utils';
import { PageFormBigNumber } from '@/components';
import { Group, PageFormBigNumber } from '@/components';
/**
* Credit note header.
*/
function CreditNoteFormHeader() {
return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
<Group
position="apart"
align={'flex-start'}
display="flex"
bg="white"
p="25px 32px"
borderBottom="1px solid #d2dce2"
>
<CreditNoteFormHeaderFields />
<CreditNoteFormBigNumber />
</div>
</Group>
);
}

View File

@@ -1,11 +1,10 @@
// @ts-nocheck
import React from 'react';
import classNames from 'classnames';
import { FastField } from 'formik';
import { CLASSES } from '@/constants/classes';
import ItemsEntriesTable from '@/containers/Entries/ItemsEntriesTable';
import { useCreditNoteFormContext } from './CreditNoteFormProvider';
import { entriesFieldShouldUpdate } from './utils';
import { Box } from '@/components';
/**
* Credit note items entries editor field.
@@ -14,7 +13,7 @@ export default function CreditNoteItemsEntriesEditorField() {
const { items } = useCreditNoteFormContext();
return (
<div className={classNames(CLASSES.PAGE_FORM_BODY)}>
<Box p="18px 32px 0">
<FastField
name={'entries'}
items={items}
@@ -38,6 +37,6 @@ export default function CreditNoteItemsEntriesEditorField() {
/>
)}
</FastField>
</div>
</Box>
);
}