Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
import {
LitElement,
html,
css,
} from "chrome://global/content/vendor/lit.all.mjs";
import componentsData from "./components.json";
/* DS styles */
import dsTokensTable from "toolkit/themes/shared/design-system/tokens-table.css";
export default {
title: "Docs/Component Statuses",
parameters: {
options: { showPanel: false },
docs: { source: { state: "closed" } },
},
};
/**
* A component that displays the UI Widget Reusable Library components.
*
* Features:
* - Lists all reusable UI components from toolkit/content/widgets
* - Provides direct links to:
* - Individual component
* - Component source code in SearchFox
* - Related Bugzilla ticket
* - Shows implementation progress status for each component
*
*/
class ComponentStatusList extends LitElement {
static properties = {
_components: { state: true },
};
static styles = css`
tr td:first-of-type {
color-scheme: unset;
}
tr td {
border-bottom-color: var(--border-color);
}
/* the button look */
a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-xsmall) var(--space-small);
border: var(--border-width) solid var(--border-color);
border-radius: var(--border-radius-small);
background: var(--button-background-color);
color: var(--link-color); /* prevent visited purple */
text-decoration: none;
line-height: 1;
min-inline-size: 0;
cursor: pointer;
}
/* hover/active */
a:hover {
background: var(--button-background-color-hover);
}
/* arrow only on external buttons */
a[target="_blank"]::after {
content: "↗" !important; /* wins over any earlier content:none */
margin-inline-start: var(--space-small);
font-size: var(--font-size-small);
line-height: 1;
opacity: 0.8;
}
`;
constructor() {
super();
this._components = Array.isArray(componentsData?.items)
? componentsData.items
: [];
}
render() {
return html`
<link rel="stylesheet" href=${dsTokensTable} />
<header>
<h1>Component Statuses</h1>
<p>
Tracking
<a
target="_blank"
rel="noreferrer"
>reusable components</a
>
from
<code>toolkit/content/widgets</code>.
</p>
</header>
<div class="table-wrapper">${this._renderTable()}</div>
`;
}
/******** Helpers *********/
// Get story Id href
_storyHrefFromId(storyId) {
return storyId ? `/?path=/story/${storyId}` : "#";
}
_renderLinkGroup(it) {
const storyHref = this._storyHrefFromId(it.storyId);
const links = [["Story", storyHref, { top: true }]];
if (it.sourceUrl) {
links.push(["Source", it.sourceUrl, { top: false }]);
}
const bugUrl = it.bugUrl;
if (bugUrl && /bugzilla\.mozilla\.org/.test(bugUrl)) {
links.push(["Bugzilla", bugUrl, { top: false }]);
}
return html`
${links.map(
([label, href, opts = {}]) => html`
<a
href=${href}
rel="noreferrer"
target=${opts.top ? "_top" : "_blank"}
>
${label}
</a>
`
)}
`;
}
_renderTable() {
return html`
<table class="token-table">
<thead>
<tr>
<th>Component</th>
<th>Status</th>
<th>Links</th>
</tr>
</thead>
<tbody>
${this._components.map(
it => html`
<tr>
<td>
<a
href=${this._storyHrefFromId(it.storyId)}
target="_top"
rel="noreferrer"
>
${it.component}
</a>
</td>
<td>${it.status ?? "unknown"}</td>
<td>${this._renderLinkGroup(it)}</td>
</tr>
`
)}
</tbody>
</table>
`;
}
}
customElements.define("component-status-list", ComponentStatusList);
export const Default = () => {
return html`<component-status-list></component-status-list>`;
};