element-book
Version:
An [`element-vir`](https://npmjs.com/package/element-vir) drop-in element for building, testing, and demonstrating a collection of elements (or, in other words, a design system).
35 lines (34 loc) • 1.21 kB
JavaScript
import { css, html } from 'element-vir';
import { BookMainRoute } from '../../../../routing/book-routing.js';
import { colorThemeCssVars } from '../../../color-theme/color-theme.js';
import { BookRouteLink } from '../../common/book-route-link.element.js';
import { defineBookElement } from '../../define-book-element.js';
export const BookElementExampleControls = defineBookElement()({
tagName: 'book-element-example-controls',
styles: css `
:host {
display: flex;
color: ${colorThemeCssVars['element-book-page-foreground-faint-level-1-color'].value};
border-bottom: 1px solid currentColor;
padding: 0 8px 4px;
}
`,
render({ inputs }) {
const linkPaths = [
BookMainRoute.Book,
...inputs.elementExampleNode.fullUrlBreadcrumbs,
];
return html `
<${BookRouteLink.assign({
route: {
paths: linkPaths,
hash: undefined,
search: undefined,
},
router: inputs.router,
})}>
${inputs.elementExampleNode.entry.title}
</${BookRouteLink}>
`;
},
});