diff options
Diffstat (limited to 'comm/mail/components/storybook/stories')
3 files changed, 186 insertions, 0 deletions
diff --git a/comm/mail/components/storybook/stories/colors.stories.mjs b/comm/mail/components/storybook/stories/colors.stories.mjs new file mode 100644 index 0000000000..a61c49a560 --- /dev/null +++ b/comm/mail/components/storybook/stories/colors.stories.mjs @@ -0,0 +1,89 @@ +/* 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"; +import "mail/themes/shared/mail/colors.css"; //eslint-disable-line import/no-unassigned-import + +const FORMATTER = new Intl.NumberFormat("en", { + numberingSystem: "latn", + style: "decimal", + minimumIntegerDigits: 2, + maximumFractionDigits: 0, +}); + +const VARIANT_RANGE = { + white: [], + gray: [10, 90], + red: [30, 90], + orange: [30, 90], + amber: [30, 90], + yellow: [30, 90], + green: [30, 90], + teal: [30, 90], + blue: [0, 90], + purple: [0, 90], + magenta: [30, 90], + brown: [30, 90], + ink: [30, 90], +}; + +const ALL_COLORS = Object.entries(VARIANT_RANGE).flatMap(([color, range]) => { + if (!range.length) { + return [color]; + } + const colors = []; + for (let variant = range[0]; variant <= range[1]; variant += 10) { + colors.push(`${color}-${FORMATTER.format(variant)}`); + } + return colors; +}); + +export default { + title: "Design System/Colors", + argTypes: { + color1: { + options: ALL_COLORS, + control: { type: "select" }, + }, + color2: { + options: ALL_COLORS, + control: { type: "select" }, + }, + }, +}; + +function createColor(colorName) { + const cssVariableName = `--color-${colorName}`; + const color = document.createElement("div"); + color.style.padding = "0.5em"; + const preview = document.createElement("div"); + preview.style.width = "200px"; + preview.style.height = "50px"; + preview.style.background = `var(${cssVariableName})`; + const legend = document.createElement("span"); + legend.textContent = cssVariableName; + color.append(preview, legend); + return color; +} + +export const Colors = { + render: () => { + const container = document.createElement("div"); + container.append(...ALL_COLORS.map(createColor)); + return container; + }, +}; + +const Template = ({ color1, color2 }) => html` + <div style="display: grid"> + <div style="height: 40vh; background: var(--color-${color1})"></div> + <div style="height: 40vh; background: var(--color-${color2})"></div> + </div> +`; + +export const CompareColors = Template.bind({}); +CompareColors.args = { + color1: "white", + color2: "ink-90", +}; diff --git a/comm/mail/components/storybook/stories/pane-splitter.stories.mjs b/comm/mail/components/storybook/stories/pane-splitter.stories.mjs new file mode 100644 index 0000000000..6cc0418e06 --- /dev/null +++ b/comm/mail/components/storybook/stories/pane-splitter.stories.mjs @@ -0,0 +1,60 @@ +/* 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"; +import "mail/base/content/widgets/pane-splitter.js"; //eslint-disable-line import/no-unassigned-import + +export default { + title: "Widgets/Pane Splitter", + argTypes: { + resizeDirection: { + options: ["", "vertical", "horizontal"], + control: { type: "radio" }, + }, + }, +}; + +const Template = ({ resizeDirection, collapseWidth, collapseHeight }) => html` + <style> + hr[is="pane-splitter"] { + border: none; + z-index: 1; + margin: ${resizeDirection === "horizontal" ? "0 -3px" : "-3px 0"}; + opacity: .4; + background-color: red; + } + + .wrapper { + display: inline-grid; + grid-template-${ + resizeDirection === "horizontal" ? "columns" : "rows" + }: minmax(auto, var(--splitter-${ + resizeDirection === "horizontal" ? "width" : "height" +})) 0 auto; + width: 500px; + height: 500px; + margin: 1em; + --splitter-width: 200px; + --splitter-height: 200px; + } + </style> + <div class="wrapper"> + <div id="resizeme" style="background: lightblue"></div> + <hr is="pane-splitter" + resize-direction="${resizeDirection}" + resize-id="resizeme" + collapse-width="${collapseWidth}" + collapse-height="${collapseHeight}" + id="splitter" + ></hr> + <div id="fill" style="background: lightslategrey"></div> + </div> +`; + +export const PaneSplitter = Template.bind({}); +PaneSplitter.args = { + resizeDirection: "", + collapseWidth: 0, + collapseHeight: 0, +}; diff --git a/comm/mail/components/storybook/stories/search-bar.stories.mjs b/comm/mail/components/storybook/stories/search-bar.stories.mjs new file mode 100644 index 0000000000..40bf74f28f --- /dev/null +++ b/comm/mail/components/storybook/stories/search-bar.stories.mjs @@ -0,0 +1,37 @@ +/* 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"; +import { action } from "@storybook/addon-actions"; +import "mail/components/unifiedtoolbar/content/search-bar.mjs"; //eslint-disable-line import/no-unassigned-import + +export default { + title: "Widgets/Search Bar", +}; + +export const SearchBar = () => html` + <template id="searchBarTemplate"> + <form> + <input type="search" placeholder="" required="required" /> + <div aria-hidden="true"><slot name="placeholder"></slot></div> + <button class="button button-flat icon-button"> + <slot name="button"></slot> + </button> + </form> + </template> + <search-bar + @search="${action("search")}" + @autocomplete="${action("autocomplete")}" + > + <span slot="placeholder" + >Search Field Placeholder <kbd>Ctrl</kbd> + <kbd>K</kbd> + </span> + <img + alt="Search" + slot="button" + class="search-button" + src="chrome://messenger/skin/icons/new/compact/search.svg" + /> + </search-bar> +`; |