| 1 | (function (global, factory) {
|
| 2 | if (typeof define === "function" && define.amd) {
|
| 3 | define(['module'], factory);
|
| 4 | } else if (typeof exports !== "undefined") {
|
| 5 | factory(module);
|
| 6 | } else {
|
| 7 | var mod = {
|
| 8 | exports: {}
|
| 9 | };
|
| 10 | factory(mod);
|
| 11 | global.uiShellConfig = mod.exports;
|
| 12 | }
|
| 13 | })(this, function (module) {
|
| 14 | 'use strict';
|
| 15 |
|
| 16 | var _extends = Object.assign || function (target) {
|
| 17 | for (var i = 1; i < arguments.length; i++) {
|
| 18 | var source = arguments[i];
|
| 19 |
|
| 20 | for (var key in source) {
|
| 21 | if (Object.prototype.hasOwnProperty.call(source, key)) {
|
| 22 | target[key] = source[key];
|
| 23 | }
|
| 24 | }
|
| 25 | }
|
| 26 |
|
| 27 | return target;
|
| 28 | };
|
| 29 |
|
| 30 | var header = {
|
| 31 | company: 'IBM',
|
| 32 | platform: '[Platform]',
|
| 33 | links: [{
|
| 34 | href: '/component/ui-shell--default',
|
| 35 | title: 'L1 link 1'
|
| 36 | }, {
|
| 37 | href: '/component/ui-shell--default',
|
| 38 | title: 'L1 link 2'
|
| 39 | }, {
|
| 40 | href: '/component/ui-shell--default',
|
| 41 | title: 'L1 link 3'
|
| 42 | }, {
|
| 43 | href: '/component/ui-shell--default',
|
| 44 | title: 'L1 link 4'
|
| 45 | }],
|
| 46 | actions: [{
|
| 47 | title: 'Action 1'
|
| 48 | }, {
|
| 49 | title: 'Action 2'
|
| 50 | }, {
|
| 51 | title: 'Action 3'
|
| 52 | }, {
|
| 53 | title: 'Action 4'
|
| 54 | }],
|
| 55 | navLinks: [{
|
| 56 | href: '/component/ui-shell--default',
|
| 57 | title: 'L1 link 1'
|
| 58 | }, {
|
| 59 | href: '/component/ui-shell--default',
|
| 60 | title: 'L1 link 2'
|
| 61 | }, {
|
| 62 | title: 'L1 link 3'
|
| 63 | }, {
|
| 64 | title: 'L1 link 4'
|
| 65 | }]
|
| 66 | };
|
| 67 |
|
| 68 | var sidenav = {
|
| 69 | state: {
|
| 70 | expanded: false
|
| 71 | },
|
| 72 | title: {
|
| 73 | text: '[L1 name here]'
|
| 74 | },
|
| 75 | links: [{
|
| 76 | category: 'Category label',
|
| 77 | links: createSidebarLinks(2)
|
| 78 | }, {
|
| 79 | category: 'Category label',
|
| 80 | links: createSidebarLinks(3, 1),
|
| 81 | active: true
|
| 82 | }, {
|
| 83 | category: 'Category label',
|
| 84 | links: createSidebarLinks(4)
|
| 85 | }]
|
| 86 | };
|
| 87 |
|
| 88 | var nav = {
|
| 89 | state: {
|
| 90 | expanded: false
|
| 91 | },
|
| 92 | sections: [{
|
| 93 | items: [{
|
| 94 | type: 'link',
|
| 95 | title: 'Item link',
|
| 96 | href: '/component/ui-shell--platform-navigation-expanded',
|
| 97 | hasIcon: true
|
| 98 | }, {
|
| 99 | type: 'link',
|
| 100 | title: 'Item link',
|
| 101 | href: '/component/ui-shell--platform-navigation-expanded',
|
| 102 | hasIcon: true
|
| 103 | }]
|
| 104 | }, {
|
| 105 | items: [{
|
| 106 | type: 'link',
|
| 107 | title: 'Item link',
|
| 108 | href: '/component/ui-shell--platform-navigation-expanded',
|
| 109 | hasIcon: true,
|
| 110 | active: true
|
| 111 | }, {
|
| 112 | type: 'link',
|
| 113 | title: 'Item link',
|
| 114 | href: '/component/ui-shell--platform-navigation-expanded',
|
| 115 | hasIcon: true
|
| 116 | }, {
|
| 117 | type: 'link',
|
| 118 | title: 'Item link',
|
| 119 | href: '/component/ui-shell--platform-navigation-expanded',
|
| 120 | hasIcon: true
|
| 121 | }, {
|
| 122 | type: 'category',
|
| 123 | title: 'L1 category',
|
| 124 | hasIcon: true,
|
| 125 | links: [{
|
| 126 | title: 'Nested link',
|
| 127 | href: '/component/ui-shell--platform-navigation-expanded'
|
| 128 | }, {
|
| 129 | title: 'Nested link',
|
| 130 | href: '/component/ui-shell--platform-navigation-expanded',
|
| 131 | active: true
|
| 132 | }, {
|
| 133 | title: 'Nested link',
|
| 134 | href: '/component/ui-shell--platform-navigation-expanded'
|
| 135 | }]
|
| 136 | }]
|
| 137 | }]
|
| 138 | };
|
| 139 |
|
| 140 | var switcher = {
|
| 141 | state: {
|
| 142 | expanded: false,
|
| 143 | showAll: false
|
| 144 | },
|
| 145 | links: [{
|
| 146 | href: '/component/ui-shell--default',
|
| 147 | title: 'My Product'
|
| 148 | }, {
|
| 149 | href: '/component/ui-shell--default',
|
| 150 | title: 'My Product 2'
|
| 151 | }],
|
| 152 | allLinks: [{
|
| 153 | href: '/component/ui-shell--default',
|
| 154 | title: 'All Products'
|
| 155 | }, {
|
| 156 | href: '/component/ui-shell--default',
|
| 157 | title: 'All Products'
|
| 158 | }, {
|
| 159 | href: '/component/ui-shell--default',
|
| 160 | title: 'All Products'
|
| 161 | }, {
|
| 162 | href: '/component/ui-shell--default',
|
| 163 | title: 'All Products'
|
| 164 | }, {
|
| 165 | href: '/component/ui-shell--default',
|
| 166 | title: 'All Products'
|
| 167 | }]
|
| 168 | };
|
| 169 |
|
| 170 | module.exports = {
|
| 171 | preview: 'ui-shell-preview',
|
| 172 | meta: {
|
| 173 | xVersionOnly: true
|
| 174 | },
|
| 175 | context: {
|
| 176 | header: header,
|
| 177 | nav: nav,
|
| 178 | sidenav: sidenav,
|
| 179 | switcher: switcher
|
| 180 | },
|
| 181 | variants: [{
|
| 182 | name: 'Side-nav expanded',
|
| 183 | context: {
|
| 184 | sidenav: {
|
| 185 | state: {
|
| 186 | expanded: true
|
| 187 | }
|
| 188 | }
|
| 189 | }
|
| 190 | }, {
|
| 191 | name: 'Side-nav with no title bar',
|
| 192 | context: {
|
| 193 | sidenav: {
|
| 194 | state: {
|
| 195 | expanded: true
|
| 196 | },
|
| 197 | title: false
|
| 198 | }
|
| 199 | }
|
| 200 | }, {
|
| 201 | name: 'Side-nav with title bar',
|
| 202 | context: {
|
| 203 | sidenav: {
|
| 204 | state: {
|
| 205 | expanded: true
|
| 206 | },
|
| 207 | title: {
|
| 208 | text: 'Section title'
|
| 209 | }
|
| 210 | }
|
| 211 | }
|
| 212 | }, {
|
| 213 | name: 'Side-nav with title bar and sub-menu',
|
| 214 | context: {
|
| 215 | sidenav: {
|
| 216 | state: {
|
| 217 | expanded: true
|
| 218 | },
|
| 219 | title: {
|
| 220 | text: 'Section title',
|
| 221 | subMenu: {
|
| 222 | label: 'Inline select',
|
| 223 | options: [{
|
| 224 | text: 'Option 1',
|
| 225 | value: 'option1'
|
| 226 | }, {
|
| 227 | text: 'Option 2',
|
| 228 | value: 'option2'
|
| 229 | }, {
|
| 230 | text: 'Option 3',
|
| 231 | value: 'option3'
|
| 232 | }]
|
| 233 | }
|
| 234 | }
|
| 235 | }
|
| 236 | }
|
| 237 | }, {
|
| 238 | name: 'Platform nav expanded',
|
| 239 | context: {
|
| 240 | nav: {
|
| 241 | state: {
|
| 242 | expanded: true
|
| 243 | }
|
| 244 | }
|
| 245 | }
|
| 246 | }, {
|
| 247 | name: 'Platform nav category expanded',
|
| 248 | context: {
|
| 249 | nav: {
|
| 250 | state: {
|
| 251 | expanded: true,
|
| 252 | category: true
|
| 253 | }
|
| 254 | }
|
| 255 | }
|
| 256 | }, {
|
| 257 | name: 'Switcher Expanded Default',
|
| 258 | context: {
|
| 259 | switcher: {
|
| 260 | state: {
|
| 261 | expanded: true,
|
| 262 | showAll: false
|
| 263 | }
|
| 264 | }
|
| 265 | }
|
| 266 | }, {
|
| 267 | name: 'Switcher All Products',
|
| 268 | context: {
|
| 269 | switcher: {
|
| 270 | state: {
|
| 271 | expanded: true,
|
| 272 | showAll: true
|
| 273 | }
|
| 274 | }
|
| 275 | }
|
| 276 | }, {
|
| 277 | name: 'Platform nav with no icons',
|
| 278 | context: {
|
| 279 | nav: {
|
| 280 | state: {
|
| 281 | expanded: true,
|
| 282 | category: true
|
| 283 | },
|
| 284 | sections: nav.sections.map(function (section) {
|
| 285 | return {
|
| 286 | items: section.items.map(function (item) {
|
| 287 | return _extends({}, item, {
|
| 288 | hasIcon: false
|
| 289 | });
|
| 290 | })
|
| 291 | };
|
| 292 | })
|
| 293 | }
|
| 294 | }
|
| 295 | }]
|
| 296 | };
|
| 297 |
|
| 298 | function createSidebarLinks(count, activeIndex) {
|
| 299 | return Array.from({ length: count }, function (_, i) {
|
| 300 | var link = {
|
| 301 | title: 'Nested link',
|
| 302 | href: '/component/ui-shell--default'
|
| 303 | };
|
| 304 | if (i === activeIndex) {
|
| 305 | link.active = true;
|
| 306 | }
|
| 307 | return link;
|
| 308 | });
|
| 309 | }
|
| 310 | }); |
| \ | No newline at end of file |