@equinor/eds-core-react
Version:
The React implementation of the Equinor Design System
60 lines (57 loc) • 1.83 kB
JavaScript
import { forwardRef } from 'react';
import styled, { ThemeProvider, css } from 'styled-components';
import { List } from '../List/index.js';
import { useToken, typographyTemplate } from '@equinor/eds-utils';
import { tableOfContents } from './TableOfContents.tokens.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useEds } from '../EdsProvider/eds.context.js';
import { Typography } from '../Typography/Typography.js';
const StyledTableOfContents = styled.nav.withConfig({
displayName: "TableOfContents__StyledTableOfContents",
componentId: "sc-q23s6y-0"
})(({
theme,
$sticky
}) => {
return css(["margin-top:", ";margin-bottom:", ";", ""], theme.spacings.top, theme.spacings.bottom, $sticky && css(["position:fixed;top:", ";right:", ";"], theme.entities.sticky.spacings.top, theme.entities.sticky.spacings.right));
});
const TocList = styled(List).withConfig({
displayName: "TableOfContents__TocList",
componentId: "sc-q23s6y-1"
})(["margin:0;padding:0;"]);
const TocLabel = styled(Typography).withConfig({
displayName: "TableOfContents__TocLabel",
componentId: "sc-q23s6y-2"
})(({
theme
}) => {
return css(["", ""], typographyTemplate(theme.typography));
});
const TableOfContents = /*#__PURE__*/forwardRef(function TableOfContents({
children,
sticky = false,
label = '',
...rest
}, ref) {
const {
density
} = useEds();
const token = useToken({
density
}, tableOfContents);
return /*#__PURE__*/jsx(ThemeProvider, {
theme: token,
children: /*#__PURE__*/jsxs(StyledTableOfContents, {
ref: ref,
$sticky: sticky,
...rest,
children: [/*#__PURE__*/jsx(TocLabel, {
variant: "overline",
children: label
}), /*#__PURE__*/jsx(TocList, {
children: children
})]
})
});
});
export { TableOfContents };