UNPKG

@equinor/eds-core-react

Version:

The React implementation of the Equinor Design System

48 lines (45 loc) 1.42 kB
import { forwardRef } from 'react'; import styled, { css, ThemeProvider } from 'styled-components'; import { spacingsTemplate, typographyTemplate, bordersTemplate, useToken } from '@equinor/eds-utils'; import { applyVariant, tableCell } from './DataCell.tokens.js'; import { jsx } from 'react/jsx-runtime'; import { useEds } from '../../EdsProvider/eds.context.js'; const StyledTableCell = styled.td.withConfig({ displayName: "DataCell__StyledTableCell", componentId: "sc-15tuitc-0" })(({ theme, color }) => { const { height, typography, spacings, border, align } = theme; const backgroundColor = color === 'error' ? theme.validation.error?.background : ''; const base = css(["min-height:", ";height:", ";background:", ";vertical-align:", ";box-sizing:border-box;", " ", " ", ""], height, height, backgroundColor, align.vertical, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(border)); return base; }); const TableDataCell = /*#__PURE__*/forwardRef(function TableDataCell({ children, variant = 'text', ...rest }, ref) { const { density } = useEds(); const token = useToken({ density }, applyVariant(variant, tableCell)); return /*#__PURE__*/jsx(ThemeProvider, { theme: token, children: /*#__PURE__*/jsx(StyledTableCell, { ...rest, ref: ref, children: children }) }); }); export { TableDataCell };