summaryrefslogtreecommitdiffstats
path: root/browser/components/storybook/stories/fxview-category-navigation.stories.mjs
diff options
context:
space:
mode:
Diffstat (limited to 'browser/components/storybook/stories/fxview-category-navigation.stories.mjs')
-rw-r--r--browser/components/storybook/stories/fxview-category-navigation.stories.mjs113
1 files changed, 0 insertions, 113 deletions
diff --git a/browser/components/storybook/stories/fxview-category-navigation.stories.mjs b/browser/components/storybook/stories/fxview-category-navigation.stories.mjs
deleted file mode 100644
index 74a379a5a8..0000000000
--- a/browser/components/storybook/stories/fxview-category-navigation.stories.mjs
+++ /dev/null
@@ -1,113 +0,0 @@
-/* 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 "lit.all.mjs";
-// eslint-disable-next-line import/no-unassigned-import
-import "browser/components/firefoxview/fxview-category-navigation.mjs";
-
-export default {
- title: "Domain-specific UI Widgets/Firefox View/Category Navigation",
- component: "fxview-category-navigation",
- parameters: {
- status: "in-development",
- actions: {
- handles: ["change-category"],
- },
- fluent: `
-fxview-category-button-one = Category 1
- .title = Category 1
-fxview-category-button-two = Category 2
- .title = Category 2
-fxview-category-button-three = Category 3
- .title = Category 3
-fxview-category-footer-button = Settings
- .title = Settings
- `,
- },
-};
-
-const Template = () => html`
- <style>
- #page {
- height: 100%;
- display: grid;
- grid-template-columns: var(--in-content-sidebar-width) 1fr;
- }
- fxview-category-navigation {
- margin-inline-start: 10px;
- }
- fxview-category-button[name="category-one"]::part(icon) {
- background-image: url("chrome://browser/skin/preferences/category-general.svg");
- }
- fxview-category-button[name="category-two"]::part(icon) {
- background-image: url("chrome://browser/skin/preferences/category-general.svg");
- }
- fxview-category-button[name="category-three"]::part(icon) {
- background-image: url("chrome://browser/skin/preferences/category-general.svg");
- }
- .footer-button {
- display: flex;
- gap: 12px;
- font-weight: normal;
- min-width: unset;
- padding: 8px;
- margin: 0;
- }
- .footer-button .cat-icon {
- background-image: url("chrome://browser/skin/preferences/category-general.svg");
- background-color: initial;
- background-size: 20px;
- background-repeat: no-repeat;
- background-position: center;
- height: 20px;
- width: 20px;
- display: inline-block;
- -moz-context-properties: fill;
- fill: currentColor;
- }
- @media (max-width: 52rem) {
- #page {
- grid-template-columns: 82px 1fr;
- }
- .cat-name {
- display: none;
- }
- }
- </style>
- <div id="page">
- <fxview-category-navigation>
- <h2 slot="category-nav-header">Header</h2>
- <fxview-category-button
- slot="category-button"
- name="category-one"
- data-l10n-id="fxview-category-button-one"
- >
- </fxview-category-button>
- <fxview-category-button
- slot="category-button"
- name="category-two"
- data-l10n-id="fxview-category-button-two"
- >
- </fxview-category-button>
- <fxview-category-button
- slot="category-button"
- name="category-three"
- data-l10n-id="fxview-category-button-three"
- >
- </fxview-category-button>
- <div slot="category-nav-footer" class="category-nav-footer">
- <button class="footer-button ghost-button">
- <span class="cat-icon"></span>
- <span
- class="cat-name"
- data-l10n-id="fxview-category-footer-button"
- ></span>
- </button>
- </div>
- </fxview-category-navigation>
- </div>
-`;
-
-export const Default = Template.bind({});
-Default.args = {};