diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:13:33 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:13:33 +0000 |
commit | 086c044dc34dfc0f74fbe41f4ecb402b2cd34884 (patch) | |
tree | a4f824bd33cb075dd5aa3eb5a0a94af221bbe83a /toolkit/content/widgets/moz-page-nav/moz-page-nav.stories.mjs | |
parent | Adding debian version 124.0.1-1. (diff) | |
download | firefox-086c044dc34dfc0f74fbe41f4ecb402b2cd34884.tar.xz firefox-086c044dc34dfc0f74fbe41f4ecb402b2cd34884.zip |
Merging upstream version 125.0.1.
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'toolkit/content/widgets/moz-page-nav/moz-page-nav.stories.mjs')
-rw-r--r-- | toolkit/content/widgets/moz-page-nav/moz-page-nav.stories.mjs | 77 |
1 files changed, 77 insertions, 0 deletions
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 new file mode 100644 index 0000000000..4ac7b455cf --- /dev/null +++ b/toolkit/content/widgets/moz-page-nav/moz-page-nav.stories.mjs @@ -0,0 +1,77 @@ +/* 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 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +import { html } from "../vendor/lit.all.mjs"; +// eslint-disable-next-line import/no-unassigned-import +import "./moz-page-nav.mjs"; + +export default { + title: "UI Widgets/Page Nav", + component: "moz-page-nav", + parameters: { + status: "in-development", + actions: { + handles: ["change-view"], + }, + fluent: ` +moz-page-nav-button-one = View 1 + .title = View 1 +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-heading = + .heading = Heading + `, + }, +}; + +const Template = () => html` + <style> + #page { + height: 100%; + display: flex; + + @media (max-width: 52rem) { + grid-template-columns: 82px 1fr; + } + } + moz-page-nav { + margin-inline-start: 10px; + --page-nav-margin-top: 10px; + + @media (max-width: 52rem) { + margin-inline-start: 0; + } + } + </style> + <div id="page"> + <moz-page-nav data-l10n-id="moz-page-nav-heading" data-l10n-attrs="heading"> + <moz-page-nav-button + view="view-one" + data-l10n-id="moz-page-nav-button-one" + iconSrc="chrome://browser/skin/preferences/category-general.svg" + > + </moz-page-nav-button> + <moz-page-nav-button + view="view-two" + data-l10n-id="moz-page-nav-button-two" + iconSrc="chrome://browser/skin/preferences/category-general.svg" + > + </moz-page-nav-button> + <moz-page-nav-button + view="view-three" + data-l10n-id="moz-page-nav-button-three" + iconSrc="chrome://browser/skin/preferences/category-general.svg" + > + </moz-page-nav-button> + </moz-page-nav> + <main></main> + </div> +`; + +export const Default = Template.bind({}); +Default.args = {}; |