Build custom unorder list component

src/components/atoms/UnorderedList/UnorderedList.css

@@ -0,0 +1,3 @@
+::slotted(li) {
+  list-style-type: none;
+}

src/components/atoms/UnorderedList/UnorderedList.js

@@ -0,0 +1,51 @@
+import styles from '!!raw-loader!./UnorderedList.css';
+import varStyles from '!!raw-loader!../../../shared/variables.css';
+import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css';
+
+const template = document.createElement('template');
+template.innerHTML = `
+<ul>
+  <slot name="list-item">
+  </slot>
+</ul>
+`;
+
+class UnorderedList extends HTMLElement {
+  static observedAttributes = [];
+
+  constructor() {
+    // Always call super first in constructor
+    super();
+    // Create a shadow root
+    const shadow = this.attachShadow({ mode: 'open' });
+    shadow.appendChild(template.content.cloneNode(true));
+
+    // Add styles
+    const bootStyles = document.createElement('style');
+    bootStyles.textContent = bootstrapStyles;
+    const variableStyles = document.createElement('style');
+    variableStyles.textContent = varStyles;
+    const itemStyles = document.createElement('style');
+    itemStyles.textContent = styles;
+    shadow.appendChild(bootStyles);
+    shadow.appendChild(variableStyles);
+    shadow.appendChild(itemStyles);
+  }
+
+  connectedCallback() {
+    const icon = this.getAttribute('icon');
+    // TODO: Move this logic into the slotchange event (to avoid the global queryselector).
+    const listItems = document.querySelectorAll('li[slot="list-item"]');
+    listItems.forEach((listItem) => {
+      if (listItem.querySelector('cod-icon') !== null) {
+        return;
+      }
+      const codIcon = document.createElement('cod-icon');
+      codIcon.setAttribute('data-icon', icon);
+      codIcon.setAttribute('data-size', 'small');
+      listItem.prepend(codIcon);
+    });
+  }
+}
+
+export { UnorderedList as default };

src/components/atoms/UnorderedList/cod-ul.js

@@ -0,0 +1,2 @@
+import UnorderedList from './UnorderedList';
+customElements.define('cod-ul', UnorderedList);

src/stories/unorderedlist.stories.js

@@ -0,0 +1,80 @@
+import { html } from 'lit-html';
+import '../components/atoms/Icon/cod-icon';
+import '../components/atoms/UnorderedList/cod-ul';
+
+export default {
+  title: 'Components/Atoms/UnorderedList',
+  argTypes: {
+    icon: {
+      description: 'Determines the icon used in the list in place of a list bullet.',
+      control: { type: 'select' },
+      options: [
+        'chevron-right',
+        'chevron-right-circle',
+        'chevron-right-circle-fill',
+        'chevron-left',
+        'chevron-left-circle',
+        'chevron-left-circle-fill',
+        'chevron-up',
+        'chevron-up-circle',
+        'chevron-up-circle-fill',
+        'chevron-down',
+        'chevron-down-circle',
+        'chevron-down-circle-fill',
+        'house',
+        'house-fill',
+        'exclamation-circle',
+        'exclamation-circle-fill',
+        'exclamation-triangle',
+        'check-circle',
+        'check-circle-fill',
+        'calendar',
+        'calendar-fill',
+        'calendar-date',
+        'calendar-date-fill',
+        'newspaper',
+        'building',
+        'building-fill',
+        'buildings',
+        'buildings-fill',
+        'currency-dollar',
+        'file-earmark',
+        'list-task',
+        'journals',
+      ].sort(),
+    },
+  },
+  args: {
+    icon: 'list-task',
+  },
+};
+
+export const Default = (args) => {
+  const codList = document.createElement('cod-ul');
+  codList.setAttribute('icon', args.icon);
+  ['Item 1', 'Item 2', 'Item 3'].forEach((innerText) => {
+    const listItem = document.createElement('li');
+    listItem.innerText = innerText;
+    listItem.setAttribute('slot', 'list-item');
+    codList.appendChild(listItem);
+
+    // Create an inner element to demo style 
+    // change for inner list items.
+    const innerList = document.createElement('ul');
+    const innerListItem = document.createElement('li');
+    innerListItem.innerText = 'Inner list';
+    innerList.appendChild(innerListItem);
+    listItem.appendChild(innerList);
+  });
+  return codList;
+}
+
+// export const StaticIcon = () => html`
+// <cod-ul icon="checkmark-fill">
+//   <li slot="list-item">
+//     Item 1
+//     <ul> <li>Inner element </li></ul>
+//   </li>
+//   <li slot="list-item">Item 2</li>
+// </cod-ul>
+// `;