named-deck.stories.mjs (4944B)
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 "lit.all.mjs"; 6 // Imported for side-effects. 7 import "toolkit-widgets/named-deck.js"; 8 9 export default { 10 title: "UI Widgets/Named Deck", 11 component: "named-deck", 12 parameters: { 13 status: "stable", 14 fluent: ` 15 named-deck-tab-one = Tab 1 16 named-deck-tab-two = Tab 2 17 named-deck-tab-three = Tab 3 18 named-deck-content-one = This is tab 1 19 named-deck-content-two = This is tab 2 20 named-deck-content-three = This is tab 3 21 button-group-one = One 22 button-group-two = Two 23 button-group-three = Three 24 button-group-four = Four 25 `, 26 }, 27 }; 28 29 export const Tabs = () => html` 30 <style> 31 button[selected] { 32 outline: 2px dashed var(--focus-outline-color); 33 } 34 </style> 35 <button-group> 36 <button is="named-deck-button" deck="tabs-deck" name="tab-1" data-l10n-id="named-deck-tab-one"></button> 37 <button is="named-deck-button" deck="tabs-deck" name="tab-2" data-l10n-id="named-deck-tab-two"></button> 38 <button is="named-deck-button" deck="tabs-deck" name="tab-3" data-l10n-id="named-deck-tab-three"></button> 39 </button-group> 40 <named-deck id="tabs-deck" is-tabbed> 41 <p name="tab-1" data-l10n-id="named-deck-content-one"></p> 42 <p name="tab-2" data-l10n-id="named-deck-content-two"></p> 43 <p name="tab-3" data-l10n-id="named-deck-content-three"></p> 44 </named-deck> 45 46 <hr> 47 48 <p> 49 The dashed outline is added for emphasis here. It applies to the button with 50 the <code>selected</code> attribute, but matches the deck's 51 <code>selected-view</code> name. 52 </p> 53 54 <p> 55 These tabs are a combination of <code>button-group</code>, 56 <code>named-deck-button</code>, and <code>named-deck</code>. 57 <ul> 58 <li> 59 <code>button-group</code> makes the tabs a single focusable group, 60 using left/right to switch between focused buttons. 61 </li> 62 <li> 63 <code>named-deck-button</code>s are <code>button</code> subclasses 64 that are used to control the <code>named-deck</code>. 65 </li> 66 <li> 67 <code>named-deck</code> show only one selected child at a time. 68 </li> 69 </ul> 70 </p> 71 `; 72 73 export const ListMenu = () => html` 74 <style> 75 .icon-button { 76 background-image: url("chrome://global/skin/icons/arrow-left.svg"); 77 } 78 79 .vertical-group { 80 display: flex; 81 flex-direction: column; 82 width: 200px; 83 } 84 </style> 85 <named-deck id="list-deck" is-tabbed> 86 <section name="list"> 87 <button-group orientation="vertical" class="vertical-group"> 88 <button is="named-deck-button" deck="list-deck" name="tab-1"> 89 Tab 1 90 </button> 91 <button is="named-deck-button" deck="list-deck" name="tab-2"> 92 Tab 2 93 </button> 94 <button is="named-deck-button" deck="list-deck" name="tab-3"> 95 Tab 3 96 </button> 97 </button-group> 98 </section> 99 <section name="tab-1"> 100 <button 101 class="icon-button ghost-button" 102 is="named-deck-button" 103 deck="list-deck" 104 name="list" 105 ></button> 106 <p>This is tab 1</p> 107 </section> 108 <section name="tab-2"> 109 <button 110 class="icon-button ghost-button" 111 is="named-deck-button" 112 deck="list-deck" 113 name="list" 114 ></button> 115 <p>This is tab 2</p> 116 </section> 117 <section name="tab-3"> 118 <button 119 class="icon-button ghost-button" 120 is="named-deck-button" 121 deck="list-deck" 122 name="list" 123 ></button> 124 <p>This is tab 3</p> 125 </section> 126 </named-deck> 127 128 <hr /> 129 130 <p> 131 This is an alternate layout for creating a menu navigation. In this case, 132 the first view in the <code>named-deck</code> is the list view which 133 contains the <code>named-deck-button</code>s to link to the other views. 134 Each view then includes a back <code>named-deck-button</code> which is used 135 to navigate back to the first view. 136 </p> 137 `; 138 139 const FocusGroupTemplate = ({ orientation }) => html` 140 <button-group orientation=${orientation}> 141 <button data-l10n-id="button-group-one"></button> 142 <button data-l10n-id="button-group-two"></button> 143 <button data-l10n-id="button-group-three"></button> 144 <button data-l10n-id="button-group-four"></button> 145 </button-group> 146 147 <p> 148 The <code>button-group</code> element will group focus to the buttons, 149 requiring left/right or up/down to switch focus between its child elements. 150 It accepts an <code>orientation</code> property, which determines if 151 left/right or up/down are used to change the focused button. 152 </p> 153 `; 154 155 export const FocusGroup = FocusGroupTemplate.bind({}); 156 FocusGroup.args = { 157 orientation: "horizontal", 158 }; 159 FocusGroup.argTypes = { 160 orientation: { 161 options: ["horizontal", "vertical"], 162 control: { type: "radio" }, 163 }, 164 };