Merge pull request #116 from lidofinance/feature/modal-extra-content

Extra modal content

packages/modal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lidofinance/modal",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",

packages/modal/src/Modal.stories.tsx

@@ -2,6 +2,7 @@ import { Story, Meta } from '@storybook/react'
 import { ModalProps } from './types'
 import { Button } from '@lidofinance/button'
 import Modal from './Modal'
+import ModalExtra from './ModalExtra'
 import { useCallback, useState } from 'react'
 
 export default {
@@ -36,3 +37,28 @@ export const Basic: Story<ModalProps> = (props) => {
     </>
   )
 }
+
+export const ExtraContent: Story<ModalProps> = (props) => {
+  const { onClose, children, ...rest } = props
+  const [state, setState] = useState(false)
+  const handleOpen = useCallback(() => setState(true), [])
+  const handleClose = useCallback(() => {
+    setState(false)
+    onClose?.()
+  }, [onClose])
+
+  return (
+    <>
+      <Button onClick={handleOpen}>Show modal</Button>
+      {state && (
+        <Modal
+          {...rest}
+          onClose={handleClose}
+          extra={<ModalExtra>Extra content</ModalExtra>}
+        >
+          {children}
+        </Modal>
+      )}
+    </>
+  )
+}

packages/modal/src/Modal.tsx

@@ -2,6 +2,7 @@ import { ForwardedRef, forwardRef } from 'react'
 
 import {
   ModalStyle,
+  ModalBaseStyle,
   ModalHeaderStyle,
   ModalTitleStyle,
   ModalCloseStyle,
@@ -11,7 +12,7 @@ import { ModalProps } from './types'
 import ModalOverlay from './ModalOverlay'
 
 function Modal(props: ModalProps, ref?: ForwardedRef<HTMLDivElement>) {
-  const { children, title, center = false, ...rest } = props
+  const { children, title, center = false, extra, ...rest } = props
   const { onClose } = props
 
   const closable = !!onClose
@@ -20,11 +21,14 @@ function Modal(props: ModalProps, ref?: ForwardedRef<HTMLDivElement>) {
   return (
     <ModalOverlay {...rest} ref={ref}>
       <ModalStyle $center={center}>
-        <ModalHeaderStyle $short={untitled}>
-          <ModalTitleStyle $center={center}>{title}</ModalTitleStyle>
-          {closable && <ModalCloseStyle onClick={onClose} />}
-        </ModalHeaderStyle>
-        <ModalContentStyle>{children}</ModalContentStyle>
+        <ModalBaseStyle>
+          <ModalHeaderStyle $short={untitled}>
+            <ModalTitleStyle $center={center}>{title}</ModalTitleStyle>
+            {closable && <ModalCloseStyle onClick={onClose} />}
+          </ModalHeaderStyle>
+          <ModalContentStyle>{children}</ModalContentStyle>
+        </ModalBaseStyle>
+        {extra}
       </ModalStyle>
     </ModalOverlay>
   )

packages/modal/src/ModalExtra.tsx

@@ -0,0 +1,13 @@
+import { ForwardedRef, forwardRef } from 'react'
+
+import { ModalExtraStyle } from './ModalExtraStyles'
+import { ModalExtraProps } from './types'
+
+function ModalExtra(
+  props: ModalExtraProps,
+  ref?: ForwardedRef<HTMLDivElement>
+) {
+  return <ModalExtraStyle {...props} ref={ref} />
+}
+
+export default forwardRef(ModalExtra)

packages/modal/src/ModalExtraStyles.tsx

@@ -0,0 +1,18 @@
+import styled from 'styled-components'
+
+export const ModalExtraStyle = styled.div`
+  margin-top: ${({ theme }) => -theme.borderRadiusesMap.xl}px;
+  color: ${({ theme }) => theme.colors.accentContrast};
+  background: ${({ theme }) => theme.colors.accent};
+  padding: ${({ theme }) => theme.spaceMap.xxl}px;
+  padding-top: ${({ theme }) =>
+    theme.borderRadiusesMap.xl + theme.spaceMap.xxl}px;
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    padding: ${({ theme }) => theme.spaceMap.lg}px;
+    padding-top: ${({ theme }) =>
+      theme.borderRadiusesMap.xl + theme.spaceMap.lg}px;
+  }
+`

packages/modal/src/ModalStyles.tsx

@@ -3,16 +3,22 @@ import { Close } from '@lidofinance/icons'
 import { ButtonIcon } from '@lidofinance/button'
 
 export const ModalStyle = styled.div<{ $center: boolean }>`
-  text-align: ${({ $center }) => ($center ? 'center' : 'left')};
   width: 432px;
   max-width: 100%;
-  color: ${({ theme }) => theme.colors.text};
-  background: ${({ theme }) => theme.colors.foreground};
+  text-align: ${({ $center }) => ($center ? 'center' : 'left')};
   border-radius: ${({ theme }) => theme.borderRadiusesMap.xl}px;
   box-shadow: ${({ theme }) =>
     `${theme.boxShadows.xxl} ${theme.colors.shadowDark}`};
 `
 
+export const ModalBaseStyle = styled.div`
+  color: ${({ theme }) => theme.colors.text};
+  background: ${({ theme }) => theme.colors.foreground};
+  border-radius: inherit;
+  position: relative;
+  z-index: 1;
+`
+
 export const ModalHeaderStyle = styled.div<{ $short: boolean }>`
   display: flex;
   align-items: center;

packages/modal/src/index.ts

@@ -1,3 +1,4 @@
 export { default as Modal } from './Modal'
+export { default as ModalExtra } from './ModalExtra'
 export { default as ModalOverlay } from './ModalOverlay'
 export * from './types'

packages/modal/src/types.tsx

@@ -10,5 +10,8 @@ export type ModalOverlayProps = LidoComponentProps<
 
 export type ModalProps = {
   title?: React.ReactNode
+  extra?: React.ReactNode
   center?: boolean
 } & Omit<ModalOverlayProps, 'title'>
+
+export type ModalExtraProps = LidoComponentProps<'div'>