| design-tokens.json |
|
23683 |
| docs |
|
|
| figma-tokens-config.js |
eslint-env node |
4741 |
| package-lock.json |
|
52492 |
| package.json |
|
430 |
| tests |
|
|
| text-and-typography.css |
Typography scale |
1002 |
| tokens-brand.css |
DO NOT EDIT this file directly, instead modify design-tokens.json
and run `npm run build` to see your changes. |
2394 |
| tokens-config.js |
eslint-env node |
16072 |
| tokens-figma.json |
|
11875 |
| tokens-platform.css |
DO NOT EDIT this file directly, instead modify design-tokens.json
and run `npm run build` to see your changes. |
2044 |
| tokens-shared.css |
DO NOT EDIT this file directly, instead modify design-tokens.json
and run `npm run build` to see your changes. |
13717 |
| tokens-storybook.mjs |
DO NOT EDIT this file directly, instead modify design-tokens.json
and run `npm run build` to see your changes. |
41819 |
| tokens-table.css |
Wrapper and filter styles |
7073 |
| tokens-table.stories.mjs |
/
class TablesPage extends LitElement {
#query = "";
static properties = {
surface: { type: String, state: true },
tokensData: { type: Object, state: true },
filteredTokens: { type: Object, state: true },
};
constructor() {
super();
this.surface = "brand";
this.tokensData = storybookTables;
}
handleSurfaceChange(e) {
this.surface = e.target.value;
}
handleInput(e) {
this.#query = e.originalTarget.value.trim().toLowerCase();
e.preventDefault();
this.handleSearch();
}
debounce(fn, delayMs = 300) {
let timeout;
return function () {
clearTimeout(timeout);
timeout = setTimeout(() => {
fn.apply(this, arguments);
}, delayMs);
};
}
handleSearch() {
// Clear filteredTokens to show all data.
if (!this.#query) {
this.filteredTokens = null;
}
let filteredTokens = Object.entries(this.tokensData).reduce(
(acc, [key, tokens]) => {
if (key.includes(this.#query)) {
return { ...acc, [key]: tokens };
}
let filteredItems = tokens.filter(({ name: tokenName, value }) =>
this.filterTokens(this.#query, tokenName, value)
);
if (filteredItems.length) {
return { ...acc, [key]: filteredItems };
}
return acc;
},
{}
);
this.filteredTokens = filteredTokens;
}
filterTokens(searchTerm, tokenName, tokenVal) {
if (
tokenName.includes(searchTerm) ||
(typeof tokenVal == "string" && tokenVal.includes(searchTerm))
) {
return true;
}
if (typeof tokenVal == "object") {
return Object.entries(tokenVal).some(([key, val]) =>
this.filterTokens(searchTerm, key, val)
);
}
return false;
}
handleClearSearch(e) {
this.#query = "";
e.preventDefault();
this.handleSearch();
}
render() {
if (!this.tokensData) {
return "";
}
return html`
<link rel="stylesheet" href=${styles} />
<div class="page-wrapper">
<div class="filters-wrapper">
<div class="search-wrapper">
<div class="search-icon"></div>
<input
type="search"
placeholder="Filter tokens"
@input=${this.debounce(this.handleInput)}
.value=${this.#query}
/>
<div
class="clear-icon"
role="button"
title="Clear"
?hidden=${!this.#query}
@click=${this.handleClearSearch}
></div>
</div>
<fieldset id="surface" @change=${this.handleSurfaceChange}>
<label>
<input
type="radio"
name="surface"
value="brand"
?checked=${this.surface == "brand"}
/>
In-content
</label>
<label>
<input
type="radio"
name="surface"
value="platform"
?checked=${this.surface == "platform"}
/>
Chrome
</label>
</fieldset>
</div>
<div class="tables-wrapper">
${Object.entries(this.filteredTokens ?? this.tokensData).map(
([tableName, tableEntries]) => {
return html`
<tokens-table
name=${tableName}
surface=${this.surface}
.tokens=${tableEntries}
>
</tokens-table>
`;
}
)}
</div>
</div>
`;
}
}
customElements.define("tables-page", TablesPage);
/**
|
12150 |