UNPKG

@equinor/eds-core-react

Version:

The React implementation of the Equinor Design System

62 lines (59 loc) 2 kB
import { forwardRef } from 'react'; import styled from 'styled-components'; import { clear } from '@equinor/eds-icons'; import { bordersTemplate, spacingsTemplate, typographyTemplate } from '@equinor/eds-utils'; import { Button } from '../Button/index.js'; import { Icon } from '../Icon/index.js'; import { variants, comfortable } from './SideSheet.tokens.js'; import { jsxs, jsx } from 'react/jsx-runtime'; import { Typography } from '../Typography/Typography.js'; const { background, spacings, border, typography } = comfortable; const StyledSideSheet = styled.div.withConfig({ displayName: "SideSheet__StyledSideSheet", componentId: "sc-wkzlnn-0" })(["height:100%;position:absolute;z-index:1200;top:0;right:0;box-sizing:border-box;background:", ";width:", ";", " ", ";", ""], background, ({ width }) => width, bordersTemplate(border), spacingsTemplate(spacings), typographyTemplate(typography)); const Header = styled.div.withConfig({ displayName: "SideSheet__Header", componentId: "sc-wkzlnn-1" })(["display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding-bottom:24px;padding-right:10px;& > button{margin-left:auto;flex-shrink:0;}"]); const SideSheet = /*#__PURE__*/forwardRef(function SideSheet({ variant = 'medium', width, title, children, open, onClose, ...rest }, ref) { const props = { ...rest, ref, width: width || variants[variant] }; return open && /*#__PURE__*/jsxs(StyledSideSheet, { ...props, children: [(title || onClose) && /*#__PURE__*/jsxs(Header, { children: [title && /*#__PURE__*/jsx(Typography, { variant: "h2", children: title }), onClose && /*#__PURE__*/jsx(Button, { variant: "ghost_icon", onClick: onClose, title: "Close", "aria-label": "Close sidesheet", children: /*#__PURE__*/jsx(Icon, { name: "clear", data: clear }) })] }), children] }); }); export { SideSheet };