+
+
+
+
+
+`;
+
+class Linktray extends HTMLElement {
+ constructor() {
+ super();
+
+ // Create a shadow root
+ const shadow = this.attachShadow({ mode: 'open' });
+ shadow.appendChild(template.content.cloneNode(true));
+ }
+
+ connectedCallback() {
+ this._fetchLinks();
+ }
+
+ _fetchLinks() {
+ const slot = this.shadowRoot.querySelector('slot[name="tray-link"]');
+ if (!slot) return;
+
+ const wrapLinks = () => {
+ const assignedElements = slot.assignedElements();
+
+ assignedElements.forEach((element) => {
+ if (element.tagName === 'A') {
+ const li = document.createElement('li');
+ li.setAttribute('slot', 'tray-link');
+ element.removeAttribute('slot');
+ element.parentNode.insertBefore(li, element);
+
+ const chevron = document.createElement('span');
+ chevron.classList.add('chevron');
+ chevron.innerHTML = `
+
`;
+ element.appendChild(chevron);
+ li.appendChild(element);
+ } else if (element.tagName === 'LI') {
+ if (element.querySelector('a')) {
+ element.setAttribute('slot', 'tray-link');
+ } else {
+ element.remove();
+ }
+ } else {
+ element.remove();
+ }
+ });
+ };
+
+ wrapLinks();
+ slot.addEventListener('slotchange', wrapLinks);
+ }
+}
+
+export { Linktray as default };
diff --git a/src/stable/components/Linktray/cod-linktray.js b/src/stable/components/Linktray/cod-linktray.js
new file mode 100644
index 00000000..23ebfb95
--- /dev/null
+++ b/src/stable/components/Linktray/cod-linktray.js
@@ -0,0 +1,2 @@
+import Linktray from './Linktray';
+customElements.define('cod-linktray', Linktray);
diff --git a/src/stable/stories/linktray.stories.js b/src/stable/stories/linktray.stories.js
new file mode 100644
index 00000000..1b9ad94b
--- /dev/null
+++ b/src/stable/stories/linktray.stories.js
@@ -0,0 +1,54 @@
+import '../../stable/components/Linktray/cod-linktray';
+import { html } from 'lit-html';
+
+export default {
+ tags: ['stable'],
+ title: 'Components/Linktray',
+};
+
+export const Linktray = {
+ tags: ['autodocs'],
+ render: () => html`
+
+
+ More from Mayor's Office
+
+ State of the city
+ Properties
+ Special Events
+ Correspondence
+ Renew Detroit Home Repair Program
+ Michigan State Fair Grounds Development
+ Detroit Neighborhood Initiatve
+ LEAN
+ Detroit Opportunities
+ Mayor's Help Desk
+ Executive Orders
+
+ `,
+};