diff options
Diffstat (limited to 'toolkit/content/widgets/moz-page-nav')
4 files changed, 163 insertions, 24 deletions
diff --git a/toolkit/content/widgets/moz-page-nav/README.stories.md b/toolkit/content/widgets/moz-page-nav/README.stories.md index 800d446478..c2f1b37bb5 100644 --- a/toolkit/content/widgets/moz-page-nav/README.stories.md +++ b/toolkit/content/widgets/moz-page-nav/README.stories.md @@ -4,7 +4,7 @@ intended to change the selected view, provide a heading, and have links to external resources. ```html story -<moz-page-nav heading="This is a nav" style={{ '--page-nav-margin-top': 0, '--page-nav-margin-bottom': 0, height: '200px' }}> +<moz-page-nav heading="This is a nav" style={{ '--page-nav-margin-top': 0, '--page-nav-margin-bottom': 0, height: '275px' }}> <moz-page-nav-button view="view-one" iconSrc="chrome://browser/skin/preferences/category-general.svg" @@ -23,13 +23,27 @@ intended to change the selected view, provide a heading, and have links to exter > <p style={{ margin: 0 }}>Test 3</p> </moz-page-nav-button> + <moz-page-nav-button + support-page="test" + iconSrc="chrome://browser/skin/preferences/category-general.svg" + slot="secondary-nav" + > + <p style={{ margin: 0 }}>Support Link</p> + </moz-page-nav-button> + <moz-page-nav-button + href="https://www.example.com" + iconSrc="chrome://browser/skin/preferences/category-general.svg" + slot="secondary-nav" + > + <p style={{ margin: 0 }}>External Link</p> + </moz-page-nav-button> </moz-page-nav> ``` ## When to use * Use moz-page-nav for single-page navigation to switch between different views. -* moz-page-nav will also support footer buttons for external support links in the future (See [bug 1877826](https://bugzilla.mozilla.org/show_bug.cgi?id=1877826)) +* moz-page-nav also supports footer buttons for external and support links * This component will be used in about: pages such as about:firefoxview, about:preferences, about:addons, about:debugging, etc. ## When not to use @@ -53,18 +67,34 @@ And used as follows: ```html <moz-page-nav> - <moz-page-nav-button + <moz-page-nav-button view="A name for the first view" iconSrc="A url for the icon for the first navigation button"> - </moz-page-nav-button> - <moz-page-nav-button + </moz-page-nav-button> + <moz-page-nav-button view="A name for the second view" iconSrc="A url for the icon for the second navigation button"> - </moz-page-nav-button> - <moz-page-nav-button + </moz-page-nav-button> + <moz-page-nav-button view="A name for the third view" iconSrc="A url for the icon for the third navigation button"> - </moz-page-nav-button> + </moz-page-nav-button> + + <!-- Footer Links --> + + <!-- Support Link --> + <moz-page-nav-button + support-page="A name for a support link" + iconSrc="A url for the icon for the third navigation button" + slot="secondary-nav"> + </moz-page-nav-button> + + <!-- External Link --> + <moz-page-nav-button + href="A url for an external link" + iconSrc="A url for the icon for the third navigation button" + slot="secondary-nav"> + </moz-page-nav-button> </moz-page-nav> ``` diff --git a/toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css b/toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css index 5d00198d65..781398056a 100644 --- a/toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css +++ b/toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css @@ -4,11 +4,13 @@ :host { border-radius: var(--border-radius-small); + font-size: var(--font-size-large); &:focus-visible { outline-offset: var(--page-nav-focus-outline-inset); } } +a[href], button { background-color: var(--page-nav-button-background-color); border: 1px solid var(--page-nav-border-color); @@ -28,11 +30,17 @@ button { padding: var(--page-nav-button-padding); } +a[href] { + text-decoration: none; + box-sizing: border-box; +} + button:hover { cursor: pointer; } @media not (prefers-contrast) { + a[href], button { position: relative; } @@ -55,6 +63,7 @@ button:hover { background-color: var(--icon-color); } + a[href]:hover, button:hover, button[selected]:hover { background-color: var(--page-nav-button-background-color-hover); @@ -72,6 +81,7 @@ button:hover { } } +a[href]:focus-visible, button:focus-visible, button[selected]:focus-visible { outline: var(--focus-outline); @@ -86,13 +96,24 @@ button[selected]:focus-visible { fill: currentColor; } +:host(.secondary-nav-item) { + font-size: var(--font-size-small); + + & .page-nav-icon { + height: var(--icon-size-default); + width: var(--icon-size-default); + } +} + @media (prefers-contrast) { + a[href], button { transition: none; border-color: ButtonText; background-color: var(--button-background-color); } + a[href]:hover, button:hover { color: SelectedItem; } @@ -105,13 +126,13 @@ button[selected]:focus-visible { } slot { - font-size: var(--font-size-large); margin: 0; padding-inline-start: 0; user-select: none; } @media (max-width: 52rem) { + a[href], button { grid-template-columns: min-content; justify-content: center; diff --git a/toolkit/content/widgets/moz-page-nav/moz-page-nav.mjs b/toolkit/content/widgets/moz-page-nav/moz-page-nav.mjs index f998ee735f..c720e76e26 100644 --- a/toolkit/content/widgets/moz-page-nav/moz-page-nav.mjs +++ b/toolkit/content/widgets/moz-page-nav/moz-page-nav.mjs @@ -4,6 +4,8 @@ import { html } from "chrome://global/content/vendor/lit.all.mjs"; import { MozLitElement } from "chrome://global/content/lit-utils.mjs"; +// eslint-disable-next-line import/no-unassigned-import +import "chrome://global/content/elements/moz-support-link.mjs"; /** * A grouping of navigation buttons that is displayed at the page level, @@ -35,6 +37,14 @@ export default class MozPageNav extends MozLitElement { ); } + get secondaryNavButtons() { + return this.secondaryNavGroupSlot + .assignedNodes() + .filter( + node => node?.localName === "moz-page-nav-button" && !node.hidden + ); + } + onChangeView(e) { this.currentView = e.target.view; } @@ -69,6 +79,12 @@ export default class MozPageNav extends MozLitElement { } } + onSecondaryNavChange() { + this.secondaryNavGroupSlot.assignedElements()?.forEach(el => { + el.classList.add("secondary-nav-item"); + }); + } + render() { return html` <link @@ -89,7 +105,10 @@ export default class MozPageNav extends MozLitElement { ></slot> </div> <div id="secondary-nav-group" role="group"> - <slot name="secondary-nav" @keydown=${this.handleFocus}></slot> + <slot + name="secondary-nav" + @slotchange=${this.onSecondaryNavChange} + ></slot> </div> </nav> `; @@ -114,16 +133,18 @@ customElements.define("moz-page-nav", MozPageNav); * A navigation button intended to change the selected view within a page. * * @tagname moz-page-nav-button + * @property {string} href - (optional) The url for an external link if not a support page URL * @property {string} iconSrc - The chrome:// url for the icon used for the button. - * @property {string} l10nId - The fluent ID for the button's text * @property {boolean} selected - Whether or not the button is currently selected. + * @property {string} supportPage - (optional) The short name for the support page a secondary link should launch to * @slot [default] - Used to append the l10n string to the button. */ export class MozPageNavButton extends MozLitElement { static properties = { iconSrc: { type: String }, - l10nId: { type: String }, + href: { type: String }, selected: { type: Boolean }, + supportPage: { type: String, attribute: "support-page" }, }; connectedCallback() { @@ -133,6 +154,7 @@ export class MozPageNavButton extends MozLitElement { static queries = { buttonEl: "button", + linkEl: "a", }; get view() { @@ -148,12 +170,15 @@ export class MozPageNavButton extends MozLitElement { ); } - render() { + itemTemplate() { + if (this.href || this.supportPage) { + return this.linkTemplate(); + } + return this.buttonTemplate(); + } + + buttonTemplate() { return html` - <link - rel="stylesheet" - href="chrome://global/content/elements/moz-page-nav-button.css" - /> <button aria-selected=${this.selected} tabindex=${this.selected ? 0 : -1} @@ -161,10 +186,51 @@ export class MozPageNavButton extends MozLitElement { ?selected=${this.selected} @click=${this.activate} > - <img class="page-nav-icon" src=${this.iconSrc} /> - <slot></slot> + ${this.innerContentTemplate()} </button> `; } + + linkTemplate() { + if (this.supportPage) { + return html` + <a + is="moz-support-link" + class="moz-page-nav-link" + support-page=${this.supportPage} + > + ${this.innerContentTemplate()} + </a> + `; + } + return html` + <a href=${this.href} class="moz-page-nav-link" target="_blank"> + ${this.innerContentTemplate()} + </a> + `; + } + + innerContentTemplate() { + return html` + ${this.iconSrc + ? html`<img + class="page-nav-icon" + src=${this.iconSrc} + role="presentation" + />` + : ""} + <slot></slot> + `; + } + + render() { + return html` + <link + rel="stylesheet" + href="chrome://global/content/elements/moz-page-nav-button.css" + /> + ${this.itemTemplate()} + `; + } } customElements.define("moz-page-nav-button", MozPageNavButton); diff --git a/toolkit/content/widgets/moz-page-nav/moz-page-nav.stories.mjs b/toolkit/content/widgets/moz-page-nav/moz-page-nav.stories.mjs index 4ac7b455cf..d1c565efe9 100644 --- a/toolkit/content/widgets/moz-page-nav/moz-page-nav.stories.mjs +++ b/toolkit/content/widgets/moz-page-nav/moz-page-nav.stories.mjs @@ -2,7 +2,7 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -import { html } from "../vendor/lit.all.mjs"; +import { html, when } from "../vendor/lit.all.mjs"; // eslint-disable-next-line import/no-unassigned-import import "./moz-page-nav.mjs"; @@ -21,15 +21,17 @@ moz-page-nav-button-two = View 2 .title = View 2 moz-page-nav-button-three = View 3 .title = View 3 -moz-page-link-one = Support Page - .title = Support Page +moz-page-nav-button-four = Support Link + .title = Support Link +moz-page-nav-button-five = External Link + .title = External Link moz-page-nav-heading = .heading = Heading `, }, }; -const Template = () => html` +const Template = ({ hasFooterLinks }) => html` <style> #page { height: 100%; @@ -68,10 +70,30 @@ const Template = () => html` iconSrc="chrome://browser/skin/preferences/category-general.svg" > </moz-page-nav-button> + ${when( + hasFooterLinks, + () => html` <moz-page-nav-button + support-page="test" + data-l10n-id="moz-page-nav-button-four" + iconSrc="chrome://browser/skin/preferences/category-general.svg" + slot="secondary-nav" + > + </moz-page-nav-button> + <moz-page-nav-button + href="https://www.example.com" + data-l10n-id="moz-page-nav-button-five" + iconSrc="chrome://browser/skin/preferences/category-general.svg" + slot="secondary-nav" + > + </moz-page-nav-button>` + )} </moz-page-nav> <main></main> </div> `; export const Default = Template.bind({}); -Default.args = {}; +Default.args = { hasFooterLinks: false }; + +export const WithFooterLinks = Template.bind({}); +WithFooterLinks.args = { hasFooterLinks: true }; |