@equinor/eds-core-react
Version:
The React implementation of the Equinor Design System
62 lines (59 loc) • 2 kB
JavaScript
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 };