fix: remove icons

packages/components/outline-core-breadcrumb/src/outline-core-breadcrumb.css

@@ -4,17 +4,17 @@ ol,
 ul {
   list-style: none;
 
-  margin: 10px;
+  margin: .5rem;
 
-  padding: 10px;
+  padding: .5rem;
 
   display: flex;
 
   flex-direction: row;
 
   flex-wrap: wrap;
 
-  gap: 10px;
+  gap: .5rem;
 }
 
 li {
@@ -23,9 +23,9 @@ li {
   flex-direction: row;
   align-items: center;
   position: relative;
-  padding: 10px;
+  padding: .5rem;
 
-  margin: 10px; 
+  margin: .5rem; 
 }
 
 /**
@@ -35,7 +35,7 @@ li {
 li:not(:first-of-type)::before {
   content: '';
   display: flex;
-  margin-right: 10px; 
+  margin-right: .5rem; 
   height: 1em;
   width: 1px;
   background: currentColor;
@@ -47,8 +47,8 @@ a {
   display: inline-flex;
   align-items: center;
 
-  padding:10px;
-  margin:10px; 
+  padding:.5rem;
+  margin:.5rem; 
 
 
   &:hover {
@@ -67,7 +67,7 @@ a {
 }
 
 .separator {
-  margin-left: 10px; 
+  margin-left: .5rem; 
 }
 
 .previous-link {

packages/components/outline-core-breadcrumb/src/outline-core-breadcrumb.ts

@@ -17,13 +17,9 @@ const componentName = 'outline-core-breadcrumb';
  * @element outline-core-breadcrumb
  * @extends OutlineElement
  * @slot - The default slot for this element.
- * @slot home-icon - slot for the home icon
- * @slot back-icon - slot for the back icon
  * @prop {String} breadcrumb - The breadcrumb items to display in an unordered list
  *
- * @todo: Complete component. - Morgan
- * @todo: Update `../docs/outline-core-breadcrumb.mdx` to accurately document the component.
- * @todo: Run `yarn analyze` to generate README.md.
+ * @todo: Run `yarn analyze` to generate README.md. - failed
  * @todo: Update `package.json` to remove the `private` flag.
  * @todo: Update `.changeset/config.json` to remove this component from the `ignore` list.
  * @todo: Create PR for updated and completed component.
@@ -45,74 +41,6 @@ export class OutlineCoreBreadcrumb extends OutlineElement {
     breakpoints: [768, 1440],
   });
 
-  /**
-   * If the `home-icon` slot has been populated, this will return the icon element.
-   *
-   * @returns {Node | null} - The home icon element.
-   */
-  getHomeIcon = (): HTMLElement | null => {
-    const homeIconExists = this.querySelectorAll('[slot="home-icon"]');
-    // Check to prevent duplication
-    if (homeIconExists.length <= 1) {
-      const homeIconSlot =
-        this.querySelector('[slot="home-icon"]')?.cloneNode(true);
-      return homeIconSlot instanceof HTMLElement ? homeIconSlot : null;
-    }
-    return null;
-  };
-
-  /**
-   * If the `back-icon` slot has been populated, this will return the icon element.
-   *
-   * @returns {Node | null} - The back icon element.
-   */
-  getBackIcon = (): HTMLElement | null => {
-    const backIconExists = this.querySelectorAll('[slot="back-icon"]');
-    // Check to prevent duplication
-    if (backIconExists.length <= 1) {
-      const backIconSlot =
-        this.querySelector('[slot="back-icon"]')?.cloneNode(true);
-      return backIconSlot instanceof HTMLElement ? backIconSlot : null;
-    }
-    return null;
-  };
-
-  createBackIcon() {
-    const backIconSlot = this.getBackIcon();
-    if (!backIconSlot) return null;
-
-    const iconElement = backIconSlot as HTMLElement;
-    const backIcon = document.createElement('span');
-    backIcon.classList.add('back-icon');
-    backIcon.innerHTML = iconElement.outerHTML;
-    return backIcon;
-  }
-
-  createHomeIcon() {
-    const homeIconSlot = this.getHomeIcon();
-    if (!homeIconSlot) return null;
-
-    const iconElement = homeIconSlot as HTMLElement;
-    const homeIcon = document.createElement('span');
-    homeIcon.classList.add('home-icon');
-    homeIcon.innerHTML = iconElement.outerHTML;
-    return homeIcon;
-  }
-
-  applyHomeIcon(li: HTMLLIElement) {
-    const homeIcon = this.getHomeIcon();
-    if (homeIcon) {
-      li.getElementsByTagName('a')[0].prepend(homeIcon);
-    }
-  }
-
-  applyBackIcon(li: HTMLLIElement) {
-    const backIcon = this.getBackIcon();
-    if (backIcon) {
-      li.getElementsByTagName('a')[0].prepend(backIcon);
-    }
-  }
-
   render(): TemplateResult {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const isMobile = this.resizeController.currentBreakpointRange === 0;
@@ -123,11 +51,7 @@ export class OutlineCoreBreadcrumb extends OutlineElement {
       true
     ) as HTMLLIElement;
 
-    this.applyBackIcon(backLink);
-
-    return isMobile ? html`${backLink}` : html`<div>
-    <slot name="home-icon"></slot> 
-    <slot name="back-icon"></slot> 
+    return isMobile ? html`${backLink}` : html`<div> 
     <slot></slot>
     </div>`;
   }

packages/documentation/outline-storybook/stories/components/outline-core-breadcrumb.stories.mdx

@@ -18,11 +18,6 @@ import { OutlineCoreBreadcrumb } from '../../../../../packages/components/outlin
 
 
 <outline-core-breadcrumb>
-
-  <outline-icon slot="home-icon" name="home" library="system" size="1em" class="ml-2"></outline-icon>
-
-  <outline-icon slot="back-icon" name="back" library="system" size="1em" class="ml-2"></outline-icon>
-
   <nav>
     <ul>
       <li>