Update Webmentions and Toast NetworkStatus components to use Icon component

Author: webstackdev

src/components/Callout/index.astro

@@ -21,9 +21,9 @@ const typeLabelMap = {
 const iconMap = {
   warning: 'warning',
   action: 'warning',
-  info: 'info-circled',
+  info: 'info',
   tip: 'lightbulb',
-  note: 'info-circled',
+  note: 'info',
   success: 'check',
   danger: 'warning',
 } as const

…components/Icon/icons/info-circled.astro src/components/Icon/icons/a.astrosrc/components/Icon/icons/info-circled.astro renamed to src/components/Icon/icons/a.astro src/components/Icon/icons/info-circled.astro renamed to src/components/Icon/icons/a.astro

@@ -22,11 +22,11 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
   aria-hidden={accessible ? "false" : "true"}
   focusable={focusable ? "true" : "false"}
 >
-  {accessible && <title>info circled icon</title>}
+  {accessible && <title>Example Icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-width="2"
-    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
   ></path>
 </svg>

src/components/Icon/icons/background-broken.astro

@@ -0,0 +1,32 @@
+---
+export type Props = {
+  color: string
+  classes?: string
+  size: number
+  accessible: boolean
+  focusable: boolean
+  isListMarker?: boolean
+  id?: string
+}
+
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
+---
+
+<svg
+  id={id}
+  xmlns="http://www.w3.org/2000/svg"
+  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  fill="currentColor"
+  stroke="none"
+  viewBox="0 0 24 24"
+  aria-hidden={accessible ? "false" : "true"}
+  focusable={focusable ? "true" : "false"}
+>
+  {accessible && <title>Example Icon</title>}
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M4.5 12c0-1.232.046-2.453.138-3.662a4.006 4.006 0 013.7-3.7 48.678 48.678 0 017.324 0 4.006 4.006 0 013.7 3.7c.017.22.032.441.046.662M4.5 12l-3-3m3 3l3-3m12 3c0 1.232-.046 2.453-.138 3.662a4.006 4.006 0 01-3.7 3.7 48.657 48.657 0 01-7.324 0 4.006 4.006 0 01-3.7-3.7c-.017-.22-.032-.441-.046-.662M19.5 12l-3 3m3-3l3 3"
+  ></path>
+</svg>

src/components/Icon/icons/check-circled-open.astro

@@ -0,0 +1,32 @@
+---
+export type Props = {
+  color: string
+  classes?: string
+  size: number
+  accessible: boolean
+  focusable: boolean
+  isListMarker?: boolean
+  id?: string
+}
+
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
+---
+
+<svg
+  id={id}
+  xmlns="http://www.w3.org/2000/svg"
+  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  fill="none"
+  stroke="currentColor"
+  viewBox="0 0 24 24"
+  aria-hidden={accessible ? "false" : "true"}
+  focusable={focusable ? "true" : "false"}
+>
+  {accessible && <title>Check Circled Open Icon</title>}
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+  ></path>
+</svg>

src/components/Icon/icons/heart-filled.astro

@@ -0,0 +1,32 @@
+---
+export type Props = {
+  color: string
+  classes?: string
+  size: number
+  accessible: boolean
+  focusable: boolean
+  isListMarker?: boolean
+  id?: string
+}
+
+const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.props
+---
+
+<svg
+  id={id}
+  xmlns="http://www.w3.org/2000/svg"
+  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  fill="currentColor"
+  stroke="none"
+  viewBox="0 0 24 24"
+  aria-hidden={accessible ? "false" : "true"}
+  focusable={focusable ? "true" : "false"}
+>
+  {accessible && <title>Heart Filled Icon</title>}
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z"
+  ></path>
+</svg>

src/components/Icon/icons/info.astro

@@ -22,11 +22,11 @@ const { color, classes, size, accessible, focusable, isListMarker, id } = Astro.
   aria-hidden={accessible ? "false" : "true"}
   focusable={focusable ? "true" : "false"}
 >
-  {accessible && <title>info icon</title>}
+  {accessible && <title>info circled icon</title>}
   <path
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-width="2"
-    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
   ></path>
 </svg>

src/components/List/layouts/ZebraList.astro

@@ -31,7 +31,7 @@ const textClass = ["text-sm text-content-offset"]
           <span class:list={textClass}>{item.text}</span>
         </div>
         <Icon
-          icon={"info-circled"}
+          icon={"info"}
           color={"text-trim"}
           size={4}
           classes={`group-hover:${item.color ?? "text-primary"} transition-colors`}

src/components/Toasts/NetworkStatus/client/index.ts

@@ -1,11 +1,13 @@
 import { LitElement, html } from 'lit'
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'
 import { defineCustomElement } from '@components/scripts/utils'
 import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
-import { queryConnectionStatusIndicator } from './selectors'
+import { queryConnectionStatusIndicator, queryNetworkStatusIconMarkup } from './selectors'
 
 type ToastType = 'success' | 'error'
 
 const TOAST_HIDE_TIMEOUT = 3000
+const ICON_BANK_ID = 'network-status-toast-icon-bank'
 
 export class NetworkStatusToastElement extends LitElement {
   static registeredName = 'network-status-toast'
@@ -118,6 +120,22 @@ export class NetworkStatusToastElement extends LitElement {
   }
 
   protected override render() {
+    const canUseDocument = typeof document !== 'undefined'
+    const successIconMarkup = canUseDocument
+      ? queryNetworkStatusIconMarkup({
+          iconBankId: ICON_BANK_ID,
+          iconName: 'success',
+          root: document,
+        })
+      : null
+    const errorIconMarkup = canUseDocument
+      ? queryNetworkStatusIconMarkup({
+          iconBankId: ICON_BANK_ID,
+          iconName: 'error',
+          root: document,
+        })
+      : null
+
     return html`
       <div
         data-network-status-toast
@@ -128,36 +146,8 @@ export class NetworkStatusToastElement extends LitElement {
         aria-atomic="true"
       >
         <div class="flex items-center space-x-2">
-          <svg
-            class="w-5 h-5 success-icon"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            aria-hidden="true"
-            focusable="false"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-            ></path>
-          </svg>
-          <svg
-            class="w-5 h-5 error-icon hidden"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            aria-hidden="true"
-            focusable="false"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            ></path>
-          </svg>
+          <span class="success-icon">${successIconMarkup ? unsafeHTML(successIconMarkup) : null}</span>
+          <span class="error-icon hidden">${errorIconMarkup ? unsafeHTML(errorIconMarkup) : null}</span>
           <span class="toast-message">${this.message}</span>
         </div>
       </div>

src/components/Toasts/NetworkStatus/client/selectors.ts

@@ -55,3 +55,28 @@ export function queryConnectionStatusIndicator(root: ParentNode = document): HTM
 
   return candidate
 }
+
+export function queryNetworkStatusIconMarkup(params: {
+  iconBankId: string
+  iconName: 'success' | 'error'
+  root?: Document
+}): string | null {
+  const { iconBankId, iconName, root = document } = params
+
+  if (!iconBankId || !iconName) {
+    return null
+  }
+
+  const iconBankCandidate = root.getElementById(iconBankId)
+  if (!isDivElement(iconBankCandidate)) {
+    return null
+  }
+
+  const iconHostCandidate = iconBankCandidate.querySelector(`[data-network-status-icon="${iconName}"]`)
+  if (!isSpanElement(iconHostCandidate)) {
+    return null
+  }
+
+  const markup = iconHostCandidate.innerHTML.trim()
+  return markup ? markup : null
+}

src/components/Toasts/NetworkStatus/index.astro

@@ -11,9 +11,21 @@
  * <NetworkStatus />
  * ```
  */
+import Icon from '@components/Icon/index.astro'
 import styles from './index.module.css'
+
+const iconBankId = 'network-status-toast-icon-bank'
 ---
 
+<div id={iconBankId} hidden aria-hidden="true">
+  <span data-network-status-icon="success">
+    <Icon icon="check-circled-open" color="inherit" size={5} isListMarker={false} />
+  </span>
+  <span data-network-status-icon="error">
+    <Icon icon="info" color="inherit" size={5} isListMarker={false} />
+  </span>
+</div>
+
 <network-status-toast
   class:list={['network-status-toast', styles.toastHost]}
   data-testid="network-status-toast"></network-status-toast>