@wix/design-system
Version:
@wix/design-system
36 lines • 2.26 kB
JavaScript
import React, { useEffect } from 'react';
import { st, classes } from './AnnouncementModalLayout.st.css.js';
import Button from '../Button';
import { dataHooks } from './constants';
import BaseModalLayout from '../BaseModalLayout';
import deprecationLog from '../utils/deprecationLog';
import { WixDesignSystemContext } from '../WixDesignSystemProvider/context';
/** A layout for announcement modals, to be used inside a <Modal /> */
const AnnouncementModalLayout = ({ theme = 'standard', // TODO: add default value for skin once theme is removed
actionsSize = 'medium', ...propsWithoutDefaults }) => {
const { className, children, footnoteSkin, linkText, linkOnClick, sideActions, ...restProps } = {
theme,
actionsSize,
...propsWithoutDefaults,
};
const skin = propsWithoutDefaults.skin || theme;
const { mobile } = React.useContext(WixDesignSystemContext);
useEffect(() => {
if (theme) {
deprecationLog('<AnnouncementModalLayout/> - prop "theme" is deprecated and will be removed in next major release, please use "skin" property instead.');
}
}, [theme]);
const linkButton = linkText || linkOnClick ? (React.createElement(Button, { priority: "tertiary", size: actionsSize, onClick: linkOnClick, skin: skin, dataHook: dataHooks.link }, linkText)) : null;
const combinedSideActions = linkButton ? (React.createElement(React.Fragment, null,
linkButton,
sideActions)) : (sideActions);
return (React.createElement(BaseModalLayout, { className: st(classes.announcementModalLayout, { mobile }, className), ...restProps, sideActions: combinedSideActions || undefined, skin: skin },
React.createElement(BaseModalLayout.Illustration, null),
React.createElement(BaseModalLayout.Header, { titleSize: "extraLarge" }),
React.createElement(BaseModalLayout.Content, { hideTopScrollDivider: true, hideBottomScrollDivider: true }, children),
React.createElement(BaseModalLayout.Footer, null),
React.createElement(BaseModalLayout.Footnote, { skin: footnoteSkin })));
};
AnnouncementModalLayout.displayName = 'AnnouncementModalLayout';
export default AnnouncementModalLayout;
//# sourceMappingURL=AnnouncementModalLayout.js.map