Icon Component Update

src/experimental/index-experimental.js

@@ -23,7 +23,6 @@ import './components/atoms/FormCheck/cod-formcheck';
 import './components/atoms/FormControl/cod-formcontrol';
 import './components/atoms/FormLabel/cod-formlabel';
 import './components/atoms/FormSelect/cod-formselect';
-import './components/atoms/Icon/cod-icon';
 import './components/atoms/Image/cod-image';
 import './components/atoms/LegacyButton/cod-legacy-button';
 import './components/atoms/LegacyIcon/cod-legacy-icon';

src/experimental/stories/actionbutton.stories.js

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 import '../components/atoms/ActionButton/cod-action-button';
-import '../components/atoms/Icon/cod-icon';
+import '../../stable/components/Icon/cod-icon';
 import { COMMON_STORY_ARGS } from '../../shared/js/storybook/args-utils';
 
 export default {

src/experimental/stories/actionbuttonV2.stories.js

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 import '../components/atoms/ActionButtonV2/cod-action-button-v2';
-import '../components/atoms/Icon/cod-icon';
+import '../../stable/components/Icon/cod-icon';
 import { COMMON_STORY_ARGS } from '../../shared/js/storybook/args-utils';
 
 export default {

src/experimental/stories/button.stories.js

@@ -1,5 +1,5 @@
 import '../components/atoms/Button/cod-button';
-import '../components/atoms/Icon/cod-icon';
+import '../../stable/components/Icon/cod-icon';
 import { COMMON_STORY_ARGS } from '../../shared/js/storybook/args-utils';
 
 export default {

src/experimental/stories/infobutton.stories.js

@@ -1,5 +1,5 @@
 import { html } from 'lit-html';
-import '../components/atoms/Icon/cod-icon';
+import '../../stable/components/Icon/cod-icon';
 import '../components/atoms/InfoButton/cod-info-button';
 
 export default {

src/stable/components/Icon/Icon.js

@@ -0,0 +1,129 @@
+import styles from '!!raw-loader!./Icon.css';
+import { getIcon } from './icon-helpers.js';
+
+const template = document.createElement('template');
+template.innerHTML = `
+  <style>
+    ${styles}
+  </style>
+  <div class="icon-container">
+    <slot class="icon"></slot>
+  </div>
+`;
+
+class Icon extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  // Define reflective properties
+  static get observedAttributes() {
+    return ['name', 'library', 'size', 'label', 'is-highlighted'];
+  }
+  // Getters and Setters for the attributes
+  get name() {
+    return this.getAttribute('name');
+  }
+
+  set name(value) {
+    this.setAttribute('name', value);
+  }
+
+  get library() {
+    return this.getAttribute('library');
+  }
+
+  set library(value) {
+    this.setAttribute('library', value);
+  }
+
+  get size() {
+    return this.getAttribute('size');
+  }
+
+  set size(value) {
+    this.setAttribute('size', value);
+  }
+
+  get isHighlighted() {
+    return this.hasAttribute('is-highlighted');
+  }
+
+  connectedCallback() {
+    if (this.isIconConnected()) {
+      return;
+    }
+    this._renderIcon();
+  }
+
+  isIconConnected() {
+    return this.shadowRoot.querySelector('.icon').innerHTML !== '';
+  }
+
+  _renderIcon() {
+    const container = this.shadowRoot.querySelector('.icon-container');
+    const iconElement = this.shadowRoot.querySelector('.icon');
+
+    // Get attributes (using the getter methods)
+    const icon = this.name || this.getAttribute('data-icon');
+    const label = this.label || icon;
+    let size = this.size || '24'; // Default to 24 if no size provided
+    const library = this.library || 'fontawesome';
+
+    // Check if the font-size is set in the light DOM
+    const style = window.getComputedStyle(this);
+    const lightDomSize = style.fontSize;
+
+    if (lightDomSize && lightDomSize !== 'auto') {
+      size = lightDomSize; // Use the font-size from light DOM if set
+    } else {
+      switch (size) {
+        case 'small':
+          size = '16';
+          break;
+        case 'medium':
+          size = '24';
+          break;
+        case 'large':
+          size = '36';
+          break;
+        case 'x-large':
+          size = '54';
+          break;
+        default:
+          size = '24';
+      }
+    }
+
+    // Check if slot has content (SVG provided by the user)
+    const slotContent = this.querySelector('svg');
+    if (slotContent) {
+      // Return if SVG is provided by the user, as it will render automatically
+      return;
+    }
+
+    // Set label for accessibility
+    if (label) {
+      container.setAttribute('aria-label', label);
+    }
+
+    // Set icon using getIcon() with the determined size
+    iconElement.innerHTML = getIcon(icon, size, library);
+
+    // Handle boolean attribute
+    if (this.isHighlighted) {
+      container.classList.add('highlighted');
+    }
+  }
+
+  // Handle attribute changes for reflective properties
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      this._renderIcon(); // Re-render the icon if any of the attributes change
+    }
+  }
+}
+
+export { Icon as default };

src/stable/components/Icon/Icon.scss

@@ -0,0 +1,26 @@
+:host {
+  display: inline-block;
+}
+
+// /* Highlighted styles */
+.icon-container {
+  display: inline-block;
+  color: inherit;
+
+  // Size will be controlled via the element itself or inherited from parent
+  svg {
+    width: 100%;
+    height: 100%;
+    // Ensure the SVG also inherits the color
+    fill: currentColor;
+    stroke: currentColor;
+  }
+}
+
+.icon-container.highlighted {
+  background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2049%2019%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cellipse%20cx%3D%2224.5%22%20cy%3D%229.5%22%20rx%3D%2224.5%22%20ry%3D%229.5%22%20fill%3D%22%239FD5B3%22%2F%3E%3C%2Fsvg%3E');
+  background-repeat: no-repeat;
+  background-position-y: bottom;
+  background-size: 100% auto;
+  padding-bottom: 0.9%;
+}