diff --git a/components/baseline-indicator/hook.js b/components/baseline-indicator/hook.js index 80e336cad..42a71e595 100644 --- a/components/baseline-indicator/hook.js +++ b/components/baseline-indicator/hook.js @@ -1,10 +1,13 @@ try { const indicator = document.querySelector(".baseline-indicator"); if (indicator instanceof HTMLDetailsElement) { - indicator.addEventListener("toggle", () => { + const { openByDefault } = indicator.dataset; + if (openByDefault === undefined) { + indicator.addEventListener("toggle", () => { + saveState(indicator.open); + }); saveState(indicator.open); - }); - saveState(indicator.open); + } } /** diff --git a/components/baseline-indicator/icons/browser-check-obsolete.svg b/components/baseline-indicator/icons/browser-check-obsolete.svg new file mode 100644 index 000000000..250030ea2 --- /dev/null +++ b/components/baseline-indicator/icons/browser-check-obsolete.svg @@ -0,0 +1,4 @@ + + + + diff --git a/components/baseline-indicator/icons/browser-cross-obsolete.svg b/components/baseline-indicator/icons/browser-cross-obsolete.svg new file mode 100644 index 000000000..48cb4decc --- /dev/null +++ b/components/baseline-indicator/icons/browser-cross-obsolete.svg @@ -0,0 +1,4 @@ + + + + diff --git a/components/baseline-indicator/icons/status/obsolete-dark.svg b/components/baseline-indicator/icons/status/obsolete-dark.svg new file mode 100644 index 000000000..bd7d0cab7 --- /dev/null +++ b/components/baseline-indicator/icons/status/obsolete-dark.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/components/baseline-indicator/icons/status/obsolete.svg b/components/baseline-indicator/icons/status/obsolete.svg new file mode 100644 index 000000000..13734bc4b --- /dev/null +++ b/components/baseline-indicator/icons/status/obsolete.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/components/baseline-indicator/icons/status/pending-removal-dark.svg b/components/baseline-indicator/icons/status/pending-removal-dark.svg new file mode 100644 index 000000000..64d6df0dc --- /dev/null +++ b/components/baseline-indicator/icons/status/pending-removal-dark.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/components/baseline-indicator/icons/status/pending-removal.svg b/components/baseline-indicator/icons/status/pending-removal.svg new file mode 100644 index 000000000..69629e5a7 --- /dev/null +++ b/components/baseline-indicator/icons/status/pending-removal.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/components/baseline-indicator/server.css b/components/baseline-indicator/server.css index b92475065..cac54cd77 100644 --- a/components/baseline-indicator/server.css +++ b/components/baseline-indicator/server.css @@ -7,7 +7,9 @@ @mixin light-dark --baseline-img, url("./icons/status/limited.svg"), url("./icons/status/limited-dark.svg"); --baseline-check: #1e8e3e; + --baseline-check-img: url("./icons/browser-check.svg"); --baseline-cross: #ea8600; + --baseline-cross-img: url("./icons/browser-cross.svg"); --feedback-link-icon: var(--icon-primary, light-dark(#696969, #ffffff)); padding-left: 3.8125rem; @@ -36,6 +38,27 @@ --baseline-pill-color: #f1f3f4; } + &.discouraged { + --baseline-check: light-dark(#707070, #868686); + --baseline-check-img: url("./icons/browser-check-obsolete.svg"); + --baseline-cross: light-dark(#707070, #868686); + --baseline-cross-img: url("./icons/browser-cross-obsolete.svg"); + + @mixin light-dark --baseline-img, url("./icons/status/obsolete.svg"), + url("./icons/status/obsolete-dark.svg"); + + &.to-be-removed { + --baseline-bg: light-dark(#fceeee, #410e0b); + --baseline-engine-bg: light-dark(#f3dddd, #1a0706); + --baseline-pill-bg: #b3261e; + --baseline-pill-color: #f1f3f4; + + @mixin light-dark --baseline-img, + url("./icons/status/pending-removal.svg"), + url("./icons/status/pending-removal-dark.svg"); + } + } + &[open] { summary .icon-chevron { transform: rotate(180deg); @@ -177,14 +200,14 @@ background-color: var(--baseline-cross); - mask-image: url("./icons/browser-cross.svg"); + mask-image: var(--baseline-cross-img); mask-repeat: no-repeat; mask-size: contain; } &.supported::after { background-color: var(--baseline-check); - mask-image: url("./icons/browser-check.svg"); + mask-image: var(--baseline-check-img); } } } @@ -218,7 +241,7 @@ margin-bottom: 1rem; } - ul { + ul:not(.alternatives) { display: flex; flex-wrap: wrap; @@ -252,5 +275,11 @@ } } } + + ul.alternatives { + padding-left: 1.4rem; + margin-top: -1rem; + margin-bottom: 1rem; + } } } diff --git a/components/baseline-indicator/server.js b/components/baseline-indicator/server.js index 9d9c8897d..4cfc85754 100644 --- a/components/baseline-indicator/server.js +++ b/components/baseline-indicator/server.js @@ -1,5 +1,6 @@ import { html } from "@lit-labs/ssr"; import { nothing } from "lit"; +import { unsafeHTML } from "lit/directives/unsafe-html.js"; import { ServerComponent } from "../server/index.js"; @@ -76,7 +77,10 @@ export class BaselineIndicator extends ServerComponent { ? new Date(status.baseline_low_date.slice(low_date_range ? 1 : 0)) : undefined; - const level = status.baseline || "not"; + const level = status.feature.discouraged + ? "discouraged" + : status.baseline || "not"; + const removalDate = status.feature.discouraged?.removal_date; const feedbackLink = `${SURVEY_URL}?page=${encodeURIComponent(context.url)}&level=${level}`; @@ -128,36 +132,71 @@ export class BaselineIndicator extends ServerComponent { } }; + const renderAlternatives = + /** + * @param {string} instruction + * @param {import("@rari").Alternative[]} [alternatives] + */ + (instruction, alternatives) => + alternatives && alternatives.length > 0 + ? html`

${instruction}

+ ` + : nothing; + + const openByDefault = level === "discouraged"; + return html`
- ${level === "not" - ? html`${context.l10n`Limited availability`}` - : html` - ${context.l10n`Baseline`} - - ${level === "high" - ? context.l10n`Widely available` - : low_date?.getFullYear()} - - ${status.asterisk && " *"} - `} + ${level === "discouraged" + ? html`${context.l10n`Deprecated`}` + : level === "not" + ? html`${context.l10n`Limited availability`}` + : html` + ${context.l10n`Baseline`} + + ${level === "high" + ? context.l10n`Widely available` + : low_date?.getFullYear()} + + ${status.asterisk && " *"} + `}
${level === "low" ? html`
${context.l10n`Newly available`}
` - : nothing} + : level === "discouraged" && removalDate + ? html`
${context.l10n`To be removed`}
` + : nothing}
${ENGINES.map( ({ name, browsers }) => @@ -183,34 +222,55 @@ export class BaselineIndicator extends ServerComponent {
- ${level === "high" && low_date + ${(level === "high" || level === "low") && low_date ? html`

- ${context.l10n.raw({ - id: "baseline-high-extra", - args: { - date: low_date.toLocaleDateString(context.locale, { - year: "numeric", - month: "long", - }), - }, - })} -

` - : level === "low" && low_date - ? html`

- ${context.l10n.raw({ - id: "baseline-low-extra", - args: { - date: low_date.toLocaleDateString(DEFAULT_LOCALE, { - year: "numeric", - month: "long", - }), - }, - })} -

` + ${level === "high" + ? context.l10n.raw({ + id: "baseline-high-extra", + args: { + date: low_date.toLocaleDateString(context.locale, { + year: "numeric", + month: "long", + }), + }, + }) + : context.l10n.raw({ + id: "baseline-low-extra", + args: { + date: low_date.toLocaleDateString(DEFAULT_LOCALE, { + year: "numeric", + month: "long", + }), + }, + })} +

+ ${status.asterisk + ? html`

* ${context.l10n("baseline-asterisk")}

` + : nothing}` + : level === "discouraged" + ? removalDate + ? html`

+ ${context.l10n`This feature is pending removal from browsers. Using it now may lead to broken functionality in future updates.`} + ${unsafeHTML( + status.feature.discouraged?.reason_html || nothing, + )} + ${renderAlternatives( + context.l10n`Use the following features instead:`, + status.alternatives, + )} +

` + : html`

+ ${context.l10n`Avoid using this feature in new projects.`} + ${unsafeHTML( + status.feature.discouraged?.reason_html || nothing, + )} + ${context.l10n`This feature may be a candidate for removal from web standards or browsers.`} +

+ ${renderAlternatives( + context.l10n`Consider using the following features instead:`, + status.alternatives, + )}` : html`

${context.l10n("baseline-not-extra")}

`} - ${status.asterisk - ? html`

* ${context.l10n("baseline-asterisk")}

` - : nothing}