@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
18 lines (17 loc) • 1.19 kB
JavaScript
import * as React from 'react';
import { createSubcomponent } from '@workday/canvas-kit-react/common';
import { Popup } from '@workday/canvas-kit-react/popup';
import { useModalCard, useModalModel } from './hooks';
import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
export const modalCardStencil = createStencil({
base: { name: "d5h458", styles: "box-sizing:border-box;margin:var(--cnvs-sys-space-x10);width:calc(calc(var(--cnvs-sys-space-x20) * 5) + var(--cnvs-sys-space-x10));border-width:var(--cnvs-sys-space-zero);outline:0.0625rem solid transparent;box-shadow:var(--cnvs-sys-depth-6);@media screen and (max-width: 768px){margin:var(--cnvs-sys-space-x4);padding:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-space-x6);}" }
}, "modal-card-5f9a86");
export const ModalCard = createSubcomponent('div')({
displayName: 'Modal.Card',
modelHook: useModalModel,
elemPropsHook: useModalCard,
})((elemProps, Element) => {
return React.createElement(Popup.Card, { as: Element, ...mergeStyles(elemProps, modalCardStencil()) });
});