fix: adding a selectlist based solution switcher (#168)

coral-component-shell/examples/index.html

@@ -58,7 +58,7 @@
             <coral-shell-header-actions>
               <!-- Normal quiet button is used here if necessary -->
               <!--<a is="coral-anchorbutton" variant="quiet" href="#">Beta Feedback</a>-->
-              <coral-shell-menubar> 
+              <coral-shell-menubar>
                 <coral-shell-menubar-item menu="#menu_organizations">Microsoft</coral-shell-menubar-item>
                 <coral-shell-menubar-item menu="#menu_solutions" icon="apps" aria-label="Solutions" title="Solutions"></coral-shell-menubar-item>
                 <coral-shell-menubar-item menu="#menu_help" icon="helpOutline" aria-label="Help" title="Help"></coral-shell-menubar-item>
@@ -117,6 +117,14 @@ <h2 class="coral-Heading coral-Heading--4 u-coral-margin">Pulse notifications</h
               </coral-shell-solutions>
             </coral-shell-solutionswitcher>
           </coral-shell-menu>
+          <coral-shell-menu id="menu_selectlistswitcher" placement="right" from="top">
+            <coral-shell-selectlistswitcher>
+              <coral-shell-selectlistswitcher-item  href="http://www.adobe.com/go/aem6_5_experiencecloud">Experience Cloud</coral-shell-selectlistswitcher-item>
+              <coral-shell-selectlistswitcher-item  href="http://www.adobe.com/go/aem6_5_advertisingcloud">Advertising Cloud</coral-shell-selectlistswitcher-item>
+              <coral-shell-selectlistswitcher-item  href="http://www.adobe.com/go/aem6_5_analytics">Analytics</coral-shell-selectlistswitcher-item>
+              <coral-shell-selectlistswitcher-item  href="http://www.adobe.com/go/aem6_5_audiencemanager">Audience Manager</coral-shell-selectlistswitcher-item>
+            </coral-shell-selectlistswitcher>
+          </coral-shell-menu>
           <coral-shell-menu id="menu_user">
             <coral-shell-user avatar="https://wwwimages2.adobe.com/content/dam/acom/en/leaders/photos/shantanu-narayen.jpg">
               <coral-shell-user-name>Shantanu Narayen</coral-shell-user-name>
@@ -142,7 +150,7 @@ <h2 class="coral-Heading coral-Heading--4 u-coral-margin">Pulse notifications</h
               <a href="#" class="coral-Link scale" onclick="document.body.classList.remove('coral--large')">Medium</a> |
               <a href="#" class="coral-Link scale" onclick="document.body.classList.add('coral--large')">Large</a>
             </div>
-            
+
             <!-- Main application goes here -->
             <section class="u-coral-padding" id="workspace1">
               <h1 class="coral-Heading--XXL">Shell</h1>

coral-component-shell/index.js

@@ -49,6 +49,8 @@ import ShellSolutions from './src/scripts/ShellSolutions';
 import ShellSolutionsHeader from './src/scripts/ShellSolutionsHeader';
 import ShellSolution from './src/scripts/ShellSolution';
 import ShellSolutionLabel from './src/scripts/ShellSolutionLabel';
+import ShellSelectListSwitcher from './src/scripts/ShellSelectListSwitcher';
+import ShellSelectListSwitcherItem from './src/scripts/ShellSelectListSwitcherItem';
 
 import ShellOrgSwitcher from './src/scripts/ShellOrgSwitcher';
 import ShellOrgSwitcherFooter from './src/scripts/ShellOrgSwitcherFooter';
@@ -81,6 +83,8 @@ commons._define('coral-shell-suborganization', ShellSuborganization);
 commons._define('coral-shell-organization', ShellOrganization);
 commons._define('coral-shell-orgswitcher', ShellOrgSwitcher);
 commons._define('coral-shell', Shell);
+commons._define('coral-shell-selectlistswitcher', ShellSelectListSwitcher);
+commons._define('coral-shell-selectlistswitcher-item', ShellSelectListSwitcherItem);
 
 Shell.Content = ShellContent;
 Shell.Header = ShellHeader;
@@ -109,5 +113,7 @@ Shell.OrgSwitcher = ShellOrgSwitcher;
 Shell.OrgSwitcher.Footer = ShellOrgSwitcherFooter;
 Shell.Organization = ShellOrganization;
 Shell.Suborganization = ShellSuborganization;
+Shell.SelectListSwitcher = ShellSelectListSwitcher;
+Shell.SelectListSwitcherItem = ShellSelectListSwitcherItem;
 
 export {Shell};

coral-component-shell/src/scripts/ShellSelectListSwitcher.js

@@ -0,0 +1,112 @@
+/**
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {BaseComponent} from '../../../coral-base-component';
+import {SelectableCollection} from '../../../coral-collection';
+import selectListSwitcher from '../templates/selectListSwitcher';
+import {SelectList} from '../../../coral-component-list';
+import {commons} from '../../../coral-utils';
+
+const CLASSNAME =  '_coral-Shell-selectListSwitcher';
+
+/**
+ @class Coral.Shell.SelectListSwitcher
+ @classdesc A Shell SelectList Switcher component
+ @htmltag coral-shell-selectlistswitcher
+ @extends {HTMLElement}
+ @extends {BaseComponent}
+ */
+class ShellSelectListSwitcher extends BaseComponent(HTMLElement) {
+  /** @ignore */
+  constructor() {
+    super();
+
+    // Template
+    this._elements = {};
+
+    selectListSwitcher.call(this._elements);
+
+    this._delegateEvents({
+      'coral-selectlist:change':'_onSelectListChange',
+      'coral-shell-selectlistswitcher-item:change': '_onUpdateHref'
+    });
+  }
+
+  /**
+   The item collection.
+   @type {Collection}
+   @readonly
+   */
+  get items() {
+    // Construct the collection on first request
+    if (!this._items) {
+      this._items = new SelectableCollection({
+        host: this,
+        itemTagName: 'coral-shell-selectlistswitcher-item',
+        onItemAdded: this._onItemAdded,
+        onItemRemoved: this._onItemRemoved
+      });
+    }
+    return this._items;
+  }
+
+  _onItemAdded(item) {
+    item.id = item.id || commons.getUID();
+
+    let selectListItem = document.createElement('coral-selectlist-item');
+    if (item.href){
+      selectListItem.setAttribute("href", item.href);
+    }
+    selectListItem.textContent = item.textContent;
+    selectListItem.id = item.id + "-selectlist-item";
+
+    this._elements.container.items.add(selectListItem);
+  }
+
+  _onItemRemoved(item) {
+    let selectListItemId = item.id + "-selectlist-item";
+    let selectListItem = this._elements.container.querySelector('#'+ selectListItemId);
+
+    this._elements.container.items.remove(selectListItem);
+  }
+
+  _onSelectListChange(event) {
+     const selectList = event.target;
+     const selectListItem = selectList.selectedItem;
+     if (selectListItem.hasAttribute("href")) {
+      const href = selectListItem.getAttribute("href");
+      window.open(href, '_self');
+     }
+  }
+
+  _onUpdateHref(event){
+    const switcherListItem = event.target;
+    let selectListItemId = switcherListItem.id + "-selectlist-item";
+    let selectListItem = this._elements.container.querySelector('#'+ selectListItemId);
+    if (switcherListItem.href){
+      selectListItem.setAttribute("href", switcherListItem.getAttribute("href"));
+    }
+  }
+
+  /** @ignore */
+  render() {
+    super.render();
+
+    this.classList.add(CLASSNAME);
+    const container = this.querySelector('._coral-Shell-selectList-container') || this._elements.container;
+    // Put the container as first child
+    this.insertBefore(container, this.firstChild);
+    this.items._startHandlingItems();
+  }
+}
+
+export default ShellSelectListSwitcher;

coral-component-shell/src/scripts/ShellSelectListSwitcherItem.js

@@ -0,0 +1,60 @@
+/**
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {BaseComponent} from '../../../coral-base-component';
+import {transform} from '../../../coral-utils';
+
+const CLASSNAME = '_coral-Shell-selectlistswitcher-item';
+
+/**
+ @class Coral.Shell.SelectListSwitcherItem
+ @classdesc A Shell SelectListSwitcherItem component
+ @htmltag coral-shell-selectlistswitcher-item
+ @extends {HTMLElement}
+ @extends {BaseComponent}
+ */
+class ShellSelectListSwitcherItem extends BaseComponent(HTMLElement) {
+
+/**
+   href property of item
+   @type {String}
+   @htmlattribute href
+   @htmlattributereflected
+   */
+  get href() {
+    return this._href;
+  }
+
+  set href(value) {
+    var href = transform.string(value);
+    var update = false;
+    if(this._href) {
+      update = true;
+    }
+    this._href = href;
+    this._reflectAttribute('href', this._href);
+    if(update) {
+      this.trigger('coral-shell-selectlistswitcher-item:change');
+    }
+  }
+  /** @ignore */
+  static get observedAttributes() {
+    return super.observedAttributes.concat(['href']);
+  }
+    /** @ignore */
+    render() {
+      super.render();
+      this.classList.add(CLASSNAME);
+    }
+  }
+
+  export default ShellSelectListSwitcherItem;

coral-component-shell/src/styles/index.styl

@@ -36,5 +36,6 @@ coral-shell-content {
 @require 'menubar';
 @require 'orgswitcher';
 @require 'solutionswitcher';
+@require 'selectlistswitcher';
 @require 'user';
 @require 'workspaces';

coral-component-shell/src/styles/selectlistswitcher/index.styl

@@ -0,0 +1,24 @@
+/**
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+._coral-Shell-selectListSwitcher {
+  display: block;
+  box-sizing: border-box;
+  width: 170px;
+  float: right;
+}
+._coral-Shell-selectlistswitcher-item {
+  display: none;
+  padding: 7px 12px 7px 10px;
+}
+

coral-component-shell/src/templates/selectListSwitcher.html

@@ -0,0 +1,2 @@
+<coral-selectlist handle="container" class="_coral-Shell-selectList-container"></coral-selectlist>
+

coral-component-shell/src/tests/snippets/Shell.SelectListSwitcher.base.html

@@ -0,0 +1,6 @@
+<coral-shell-selectlistswitcher>
+  <coral-shell-selectlistswitcher-item linked href="http://www.adobe.com/go/aem6_5_experiencecloud">Experience Cloud</coral-shell-selectlistswitcher-item>
+  <coral-shell-selectlistswitcher-item linked href="http://www.adobe.com/go/aem6_5_advertisingcloud">Advertising Cloud</coral-shell-selectlistswitcher-item>
+  <coral-shell-selectlistswitcher-item linked href="http://www.adobe.com/go/aem6_5_analytics">Analytics</coral-shell-selectlistswitcher-item>
+  <coral-shell-selectlistswitcher-item linked href="http://www.adobe.com/go/aem6_5_audiencemanager">Audience Manager</coral-shell-selectlistswitcher-item>
+</coral-shell-selectlistswitcher>

coral-component-shell/src/tests/spec.js

@@ -21,3 +21,4 @@ import './test.Shell.User';
 import './test.Shell.Workspaces';
 import './test.Shell.SolutionSwitcher';
 import './test.Shell.OrgSwitcher';
+import './test.Shell.SelectListSwitcher';

coral-component-shell/src/tests/test.Shell.SelectListSwitcher.js

@@ -0,0 +1,67 @@
+/**
+ * Copyright 2019 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {helpers} from '../../../coral-utils/src/tests/helpers';
+import {Shell} from '../../../coral-component-shell';
+
+describe('Shell.SelectListSwitcher', function () {
+  describe('Namespace', function () {
+    it('should be defined in the Shell namespace', function () {
+      expect(Shell).to.have.property('SelectListSwitcher');
+      expect(Shell).to.have.property('SelectListSwitcherItem');
+    });
+  });
+
+  describe('Initialization', function () {
+    it('should support creation from markup', function () {
+      const el = helpers.build(window.__html__['Shell.SelectListSwitcher.base.html']);
+      expect(el instanceof Shell.SelectListSwitcher).to.equal(true);
+    });
+
+    it('should support creation from js', function () {
+      var el = new Shell.SelectListSwitcher();
+      expect(el instanceof Shell.SelectListSwitcher).to.equal(true);
+    });
+
+    it('should support dynamic addition of items', function () {
+      var el = helpers.build(window.__html__['Shell.SelectListSwitcher.base.html']);
+      var switcherItem = document.createElement('coral-shell-selectlistswitcher-item');
+      switcherItem.setAttribute("linked", true);
+      switcherItem.setAttribute("href", "http://www.adobe.com/go/aem6_5_primetime");
+      switcherItem.textContent = "PrimeTime";
+      el.appendChild(switcherItem);
+      var selectList = el.querySelector("coral-selectlist");
+      var selectListItem = selectList.querySelectorAll("coral-selectlist-item[href=\"http://www.adobe.com/go/aem6_5_primetime\"]");
+      expect(selectListItem).to.not.be.null;
+    });
+    it('should support href changes in items', function () {
+          var el = helpers.build(window.__html__['Shell.SelectListSwitcher.base.html']);
+          var switcherItem = el.querySelector("coral-shell-selectlistswitcher-item[href=\"http://www.adobe.com/go/aem6_5_audiencemanager\"]");
+          switcherItem.setAttribute("href", "http://www.adobe.com/go/aem6_5_target");
+          var selectList = el.querySelector("coral-selectlist");
+          var selectListItem = selectList.querySelectorAll("coral-selectlist-item[href=\"http://www.adobe.com/go/aem6_5_target\"]");
+          expect(selectListItem).to.not.be.null;
+        });
+
+    helpers.cloneComponent(
+      'should be possible to clone using markup',
+      window.__html__['Shell.SelectListSwitcher.base.html']
+    );
+
+    const el = new Shell.SelectListSwitcher();
+
+    helpers.cloneComponent(
+      'should be possible to clone using js',
+      el
+    );
+  });
+});