setting-group.stories.mjs (5173B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 import { html } from "chrome://global/content/vendor/lit.all.mjs"; 6 import "chrome://browser/content/preferences/widgets/setting-group.mjs"; 7 8 export default { 9 title: "Domain-specific UI Widgets/Settings/Setting Group", 10 component: "setting-group", 11 parameters: { 12 status: "in-development", 13 handles: ["click", "input", "change"], 14 fluent: ` 15 group-example-label = 16 .label = Complicated grouping 17 .description = This group is showing that there can be a complicated config, not necessarily that this level of nesting should be used. 18 checkbox-example-input = 19 .label = Checkbox example of setting-control 20 .description = Could have a description like moz-checkbox. 21 checkbox-example-input2 = 22 .label = Another checkbox 23 browser-layout-label = 24 .label = Browser layout 25 browser-layout-radio-horizontal = 26 .label = Horizontal tabs 27 .description = Displayed at the top of the browser 28 browser-layout-radio-vertical = 29 .label = Vertical tabs 30 .description = Displayed on the side, in the sidebar 31 browser-layout-sidebar = 32 .label = Show sidebar 33 .description = Quickly access bookmarks, tabs from your phone, AI chatbots, and more without leaving your main view 34 cookies-and-site-data = 35 .label = Cookies and Site Data 36 .description = Manage and delete cookies, history, cache, and site settings. 37 clear-browsing-data = 38 .label = Clear browsing data 39 storage-usage = 40 .label = Your stored cookies, site data, and cache are currently using { $value } { $unit } of disk space. 41 manage-browsing-data = 42 .label = Manage browsing data 43 manage-exceptions = 44 .label = Manage exceptions 45 .description = You can specify which websites are always or never allowed to use cookies and site data. 46 radio-example-input = 47 .label = This is a radio group 48 .description = With a lovely description. 49 radio-one = 50 .label = One 51 .description = This is the first option. 52 radio-two = 53 .label = Two 54 radio-three = 55 .label = Three 56 `, 57 }, 58 }; 59 60 function getSetting() { 61 return { 62 value: true, 63 on() {}, 64 off() {}, 65 userChange() {}, 66 visible: () => true, 67 getControlConfig: c => c, 68 controllingExtensionInfo: {}, 69 }; 70 } 71 72 const Template = ({ config }) => html` 73 <setting-group .config=${config} .getSetting=${getSetting}></setting-group> 74 `; 75 76 const BOX_GROUP_CONFIG = { 77 id: "data-usage-group", 78 control: "moz-box-group", 79 items: [ 80 { 81 id: "data-usage", 82 l10nId: "storage-usage", 83 control: "moz-box-item", 84 controlAttrs: { 85 "data-l10n-args": JSON.stringify({ 86 value: 1.8, 87 unit: "GB", 88 }), 89 }, 90 }, 91 { 92 id: "manage-browsing-data", 93 l10nId: "manage-browsing-data", 94 control: "moz-box-button", 95 }, 96 { 97 id: "manage-exceptions", 98 l10nId: "manage-exceptions", 99 control: "moz-box-button", 100 }, 101 ], 102 }; 103 104 export const Group = Template.bind({}); 105 Group.args = { 106 config: { 107 id: "group-example", 108 l10nId: "group-example-label", 109 items: [ 110 { 111 id: "checkbox-example", 112 l10nId: "checkbox-example-input", 113 }, 114 { 115 id: "checkbox-example2", 116 l10nId: "checkbox-example-input2", 117 supportPage: "example-support", 118 iconSrc: "chrome://global/skin/icons/highlights.svg", 119 items: [ 120 { 121 id: "checkbox-example", 122 l10nId: "checkbox-example-input", 123 }, 124 { 125 id: "radio-example", 126 l10nId: "radio-example-input", 127 control: "moz-radio-group", 128 options: [ 129 { 130 l10nId: "radio-one", 131 value: "one", 132 }, 133 { 134 l10nId: "radio-two", 135 value: "two", 136 items: [BOX_GROUP_CONFIG], 137 }, 138 { 139 l10nId: "radio-three", 140 value: "three", 141 }, 142 ], 143 }, 144 ], 145 }, 146 ], 147 }, 148 }; 149 150 export const BrowserLayout = Template.bind({}); 151 BrowserLayout.args = { 152 config: { 153 id: "browser-layout-example", 154 l10nId: "browser-layout-label", 155 items: [ 156 { 157 id: "tabs-layout", 158 control: "moz-radio-group", 159 options: [ 160 { 161 id: "horizontal-tabs", 162 l10nId: "browser-layout-radio-horizontal", 163 value: true, 164 }, 165 { 166 id: "vertical-tabs", 167 l10nId: "browser-layout-radio-vertical", 168 value: false, 169 }, 170 ], 171 }, 172 { 173 id: "show-sidebar", 174 l10nId: "browser-layout-sidebar", 175 }, 176 ], 177 }, 178 }; 179 180 export const BoxGroup = Template.bind({}); 181 BoxGroup.args = { 182 config: { 183 id: "cookies-data", 184 l10nId: "cookies-and-site-data", 185 supportPage: "sure", 186 items: [ 187 { 188 l10nId: "clear-browsing-data", 189 control: "moz-box-button", 190 controlAttrs: { 191 iconsrc: "chrome://browser/skin/flame.svg", 192 }, 193 }, 194 BOX_GROUP_CONFIG, 195 ], 196 }, 197 };