release: WRNexusJS 0.3.5

.publish/ui/components/button.wrn

@@ -1,40 +1,161 @@
 component Button {
   props {
     label = "Button"
+    loadingLabel = "Loading…"
+    description = ""
+    as = ""
+    href = ""
+    target = ""
+    rel = ""
     type = "button"
-    variant = "primary"
-    size = "md"
+    variant = "default"
+    color = "primary"
+    size = "default"
     disabled = false
     loading = false
+    pill = false
+    fullWidth = false
     icon = ""
     iconPosition = "start"
-    fullWidth = false
-    className = ""
+    ariaLabel = ""
+    ariaPressed = ""
+    ariaExpanded = ""
+    ariaControls = ""
+    title = ""
+    autofocus = false
+    controlClass = ""
+    class = ""
   }
 
   view {
-    <button
-      type="{type}"
-      disabled="{disabled || loading}"
-      aria-busy="{loading}"
-      class="wire-btn wire-btn--{variant} wire-btn--{size} {className}"
-      class:w-full='{fullWidth}'
+    <span
+      class="wire-action {fullWidth ? 'w-full' : ''} {class}"
     >
-      {#if loading}
-        <span class="wire-spinner" aria-hidden="true"></span>
+      {#if as === "a" || (as === "" && href)}
+        <a
+          {...attrs}
+          href="{disabled || loading ? '' : href}"
+          target="{target}"
+          rel="{rel}"
+          title="{title}"
+          aria-label="{ariaLabel || ((size === 'icon' || size === 'icon-xs' || size === 'icon-sm' || size === 'icon-lg') ? label : '')}"
+          aria-disabled="{disabled || loading}"
+          aria-busy="{loading}"
+          aria-pressed="{ariaPressed}"
+          aria-expanded="{ariaExpanded}"
+          aria-controls="{ariaControls}"
+          tabindex="{disabled || loading ? '-1' : '0'}"
+          class="wire-btn wire-btn--variant-{variant} wire-btn--color-{color} wire-btn--size-{size} {pill ? 'wire-btn--pill' : ''} {description ? 'wire-btn--with-description' : ''} {fullWidth ? 'w-full' : ''} {controlClass}"
+        >
+          {#if loading}
+            <span
+              class="wire-spinner wire-spinner--inline"
+              aria-hidden="true"
+            >
+            </span>
+          {/if}
+          {#if icon && !loading && iconPosition === "start"}
+            <span
+              class="wire-btn__icon {icon}"
+              aria-hidden="true"
+            >
+            </span>
+          {/if}
+          <span
+            class="wire-btn__copy {(size === 'icon' || size === 'icon-xs' || size === 'icon-sm' || size === 'icon-lg') ? 'wire-visually-hidden' : ''}"
+          >
+            <span
+              class="wire-btn__label"
+            >
+              <slot>{loading ? loadingLabel : label}</slot>
+            </span>
+            {#if description && !loading}
+              <span
+                class="wire-btn__description"
+              >
+                {description}
+              </span>
+            {/if}
+          </span>
+          {#if icon && !loading && iconPosition === "end"}
+            <span
+              class="wire-btn__icon {icon}"
+              aria-hidden="true"
+            >
+            </span>
+          {/if}
+          {#if (size === "icon" || size === "icon-xs" || size === "icon-sm" || size === "icon-lg") && (ariaLabel || label)}
+            <span
+              class="wire-btn__tooltip"
+              role="tooltip"
+              aria-hidden="true"
+            >
+              {ariaLabel || label}
+            </span>
+          {/if}
+        </a>
+      {:else}
+        <button
+          {...attrs}
+          type="{type}"
+          title="{title}"
+          autofocus="{autofocus}"
+          disabled="{disabled || loading}"
+          aria-label="{ariaLabel || ((size === 'icon' || size === 'icon-xs' || size === 'icon-sm' || size === 'icon-lg') ? label : '')}"
+          aria-busy="{loading}"
+          aria-pressed="{ariaPressed}"
+          aria-expanded="{ariaExpanded}"
+          aria-controls="{ariaControls}"
+          class="wire-btn wire-btn--variant-{variant} wire-btn--color-{color} wire-btn--size-{size} {pill ? 'wire-btn--pill' : ''} {description ? 'wire-btn--with-description' : ''} {fullWidth ? 'w-full' : ''} {controlClass}"
+        >
+          {#if loading}
+            <span
+              class="wire-spinner wire-spinner--inline"
+              aria-hidden="true"
+            >
+            </span>
+          {/if}
+          {#if icon && !loading && iconPosition === "start"}
+            <span
+              class="wire-btn__icon {icon}"
+              aria-hidden="true"
+            >
+            </span>
+          {/if}
+          <span
+            class="wire-btn__copy {(size === 'icon' || size === 'icon-xs' || size === 'icon-sm' || size === 'icon-lg') ? 'wire-visually-hidden' : ''}"
+          >
+            <span
+              class="wire-btn__label"
+            >
+              <slot>{loading ? loadingLabel : label}</slot>
+            </span>
+            {#if description && !loading}
+              <span
+                class="wire-btn__description"
+              >
+                {description}
+              </span>
+            {/if}
+          </span>
+          {#if icon && !loading && iconPosition === "end"}
+            <span
+              class="wire-btn__icon {icon}"
+              aria-hidden="true"
+            >
+            </span>
+          {/if}
+          {#if (size === "icon" || size === "icon-xs" || size === "icon-sm" || size === "icon-lg") && (ariaLabel || label)}
+            <span
+              class="wire-btn__tooltip"
+              role="tooltip"
+              aria-hidden="true"
+            >
+              {ariaLabel || label}
+            </span>
+          {/if}
+        </button>
       {/if}
-
-      {#if icon && !loading && iconPosition === "start"}
-        <span class="{icon} size-4 shrink-0" aria-hidden="true"></span>
-      {/if}
-
-      <span>{label}</span>
-
-      {#if icon && !loading && iconPosition === "end"}
-        <span class="{icon} size-4 shrink-0" aria-hidden="true"></span>
-      {/if}
-
-      <slot />
-    </button>
+    </span>
   }
 }