@pearson-ux/list
Version:
List web component
159 lines (134 loc) • 7.27 kB
JavaScript
export async function loadAndApplyTokens(theme, shadowRoot, darkModeMediaQuery, customTokensGetter, callback) {
const basePath = './@pearson-ux/master-tokens/dist';
const tokenPath = `${basePath}/${theme}/js-es6/tokens.js`;
try {
const module = await import(tokenPath);
if (module) {
const isDarkMode = darkModeMediaQuery.matches;
const tokens = customTokensGetter(module, isDarkMode);
if (tokens) {
const styles = `
:host {
--list-item-background: ${tokens.listItemBackground};
--list-item-text-color: ${tokens.listItemTextColor};
--list-item-button-background: ${tokens.listItemButtonBackground};
--list-item-button-text-color: ${tokens.listItemButtonTextColor};
--list-item-button-hover: ${tokens.listItemButtonHover};
--list-item-button-hover-text: ${tokens.listItemButtonHoverText};
--list-item-button-disabled: ${tokens.listItemButtonDisabled};
--list-item-button-disabled-text: ${tokens.listItemButtonDisabledText};
--list-item-box-shadow: ${tokens.listItemBoxShadow};
--spacing-extra-small: ${tokens.spacingExtraSmall};
--spacing-small: ${tokens.spacingSmall};
--spacing-medium: ${tokens.spacingMedium};
--spacing-large: ${tokens.spacingLarge};
--font-family-open-sans: ${tokens.fontFamilyOpenSans};
--font-weight-normal: ${tokens.fontWeightNormal};
--line-height-small: ${tokens.lineHeightSmall};
--line-height-medium: ${tokens.lineHeightMedium};
--line-height-large: ${tokens.lineHeightLarge};
--list-item-title-font-size: ${tokens.listItemTitleFontSize};
--list-item-title-font-weight: ${tokens.listItemTitleFontWeight};
--list-item-title-line-height: ${tokens.listItemTitleLineHeight};
--list-item-description-font-size: ${tokens.listItemDescriptionFontSize};
--list-item-description-font-weight: ${tokens.listItemDescriptionFontWeight};
--list-item-description-line-height: ${tokens.listItemDescriptionLineHeight};
--list-item-button-font-size: ${tokens.listItemButtonFontSize};
--list-item-button-font-weight: ${tokens.listItemButtonFontWeight};
--list-item-button-line-height: ${tokens.listItemButtonLineHeight};
--list-item-border-color: ${tokens.listItemBorderColor};
}
ul.pearson-list {
list-style: none;
padding: 0;
margin: 0;
}
li.list-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-small);
background-color: var(--list-item-background);
color: var(--list-item-text-color);
border-bottom: 1px solid var(--list-item-border-color);
box-shadow: var(--list-item-box-shadow);
}
.list-item-header {
flex: 1;
font-size: var(--list-item-title-font-size);
font-weight: var(--list-item-title-font-weight);
line-height: var(--list-item-title-line-height);
}
.list-item-description {
flex: 2;
font-size: var(--list-item-description-font-size);
font-weight: var(--list-item-description-font-weight);
line-height: var(--list-item-description-line-height);
}
.list-item-button {
flex-shrink: 0;
background-color: var(--list-item-button-background);
color: var(--list-item-button-text-color);
padding: var(--spacing-small) var(--spacing-large);
border: none;
width: 200px;
border-radius: 40px;
cursor: pointer;
font-size: var(--list-item-button-font-size);
font-weight: var(--list-item-button-font-weight);
line-height: var(--list-item-button-line-height);
}
.list-item-button:hover {
background-color: var(--list-item-button-hover);
color: var(--list-item-button-hover-text);
}
.list-item-button:disabled {
background-color: var(--list-item-button-disabled);
cursor: not-allowed;
color: var(--list-item-button-disabled-text);
}
@media (max-width: 767px) {
li.list-item {
flex-direction: column;
align-items: flex-start;
padding-bottom: var(--spacing-large);
}
.list-item-description {
margin-left: 0;
}
.list-item-button {
align-self: flex-start;
margin-top: var(--spacing-small);
}
}
@media (max-width: 480px) {
li.list-item {
flex-direction: column;
align-items: flex-start;
padding-bottom: var(--spacing-large);
}
.list-item-description {
margin-left: 0;
}
.list-item-button {
align-self: flex-start;
margin-top: var(--spacing-small);
}
}
`;
const styleSheet = new CSSStyleSheet();
styleSheet.replaceSync(styles);
shadowRoot.adoptedStyleSheets = [styleSheet];
if (callback) {
callback();
}
} else {
console.error('Error: Tokens are undefined or invalid.');
}
} else {
console.error('Error: Token module is undefined or null.');
}
} catch (error) {
console.error('Error loading token module:', error);
}
}