release: WRNexusJS 0.5.0

packages/ui/components/Blockquote.wrn

@@ -1,19 +1,67 @@
 component Blockquote {
   props {
-    size = "default"
+    quote = "I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."
+    citation = ""
+    citationTitle = ""
+    citationUrl = ""
+    avatarSrc = ""
+    avatarAlt = ""
+    size = "md"
     color = "primary"
-    title = "Blockquote"
-    description = ""
-    items = []
+    align = "left"
     variant = "default"
+    quoteMark = true
+    italic = true
     class = ""
   }
+
   view {
-    <section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--blockquote wire-next--variant-{variant} {class}">
-      {#if title}<strong>{title}</strong>{/if}
-      {#if description}<p>{description}</p>{/if}
-      {#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
-      <slot />
-    </section>
+    <figure
+      {...attrs}
+      class="wire-next wire-next--blockquote wire-next--color-{color} wire-next--size-{size} {class}"
+      data-size="{size}"
+      data-color="{color}"
+      data-align="{align}"
+      data-variant="{variant}"
+      data-italic="{italic}"
+    >
+      <blockquote cite="{citationUrl}">
+        {#if quoteMark}
+          <span class="wire-next__blockquote-mark" aria-hidden="true">“</span>
+        {/if}
+
+        <div class="wire-next__blockquote-copy">
+          {#if quote}
+            <p>{quote}</p>
+          {:else}
+            <slot />
+          {/if}
+        </div>
+      </blockquote>
+
+      {#if citation || citationTitle || avatarSrc}
+        <figcaption class="wire-next__blockquote-citation">
+          {#if avatarSrc}
+            <img
+              class="wire-next__blockquote-avatar"
+              src="{avatarSrc}"
+              alt="{avatarAlt}"
+              loading="lazy"
+            />
+          {/if}
+
+          <span class="wire-next__blockquote-attribution">
+            {#if citation}
+              {#if citationUrl}
+                <cite><a href="{citationUrl}">{citation}</a></cite>
+              {:else}
+                <cite>{citation}</cite>
+              {/if}
+            {/if}
+            {#if citationTitle}<span>{citationTitle}</span>{/if}
+          </span>
+        </figcaption>
+      {/if}
+    </figure>
   }
 }