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).
38 lines (37 loc) • 1.26 kB
JavaScript
import { css, html } from 'element-vir';
import { viraTheme } from 'vira';
import { BookMainRoute } from '../../../../routing/book-routing.js';
import { BookRouteLink } from '../../common/book-route-link.element.js';
import { defineBookElement } from '../../define-book-element.js';
export const BookElementExampleTitle = defineBookElement()({
tagName: 'book-element-example-title',
styles: css `
:host {
display: flex;
color: ${viraTheme.colors['vira-grey-foreground-placeholder'].foreground.value};
border-bottom: 1px solid currentColor;
padding: 0 8px 4px;
}
`,
render({ inputs }) {
if (inputs.blockNavigation) {
return inputs.elementExampleNode.entry.title;
}
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}>
`;
},
});