@inglorious/ui 9.11.1 → 9.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "9.11.1",
+  "version": "9.12.0",
   "description": "A design system for Inglorious Web with render-function components and customizable themes",
   "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",

package/src/controls/button/button.stories.js

@@ -57,6 +57,10 @@ export default {
       options: ["button", "submit", "reset", "menu"],
       description: "Native HTML button type attribute.",
     },
+    href: {
+      control: "text",
+      description: "Renders a link styled as a button.",
+    },
     accept: {
       control: "text",
       description: "File types the picker offers (with `onFileSelect`).",
@@ -178,6 +182,14 @@ FilePicker.args = {
   onFileSelect: () => {},
 }
 
+export const Link = {}
+Link.args = {
+  ...Default.args,
+  children: "Open events",
+  color: "primary",
+  href: "#events",
+}
+
 export const CustomContent = {}
 CustomContent.args = {
   ...Default.args,

package/src/controls/button/template.js

@@ -14,6 +14,7 @@ import { applyElementProps } from "../../shared/apply-element-props.js"
  * Renders a themed button for actions and form submission.
  * Supports variants, sizes, shapes, pressed state, and full-width layout.
  * With `onFileSelect`, the button also opens a file picker on click.
+ * With `href`, it is a link that looks like a button.
  * @example
  * // Stateless usage
  * button.render({ children: 'Click me', color: 'primary' })
@@ -21,6 +22,9 @@ import { applyElementProps } from "../../shared/apply-element-props.js"
  * // File picker
  * button.render({ children: 'Upload', accept: 'image/*', onFileSelect })
  *
+ * // Link
+ * button.render({ children: 'Open', href: '/events' })
+ *
  * @param {ButtonProps} props
  * @returns {TemplateResult}
  */
@@ -36,6 +40,7 @@ export function render(props) {
     isPressed = false,
     isFullWidth = false,
     buttonType = "button",
+    href,
     ariaLabel,
     isAriaPressed,
     className = "",
@@ -72,6 +77,18 @@ export function render(props) {
       }
     : onClick
 
+  if (href != null) {
+    return html`<a
+      href=${isDisabled ? nothing : href}
+      aria-label=${ariaLabel || nothing}
+      aria-disabled=${isDisabled ? "true" : nothing}
+      class=${classMap(classes)}
+      @click=${isDisabled ? nothing : onClick}
+      ${ref((element) => applyElementProps(element, rest))}
+      >${children}</a
+    >`
+  }
+
   return html`
     <button
       type=${buttonType}

package/src/controls/button-group/template.js

@@ -33,9 +33,11 @@ export function render(props) {
     ...rest
   } = props
 
+  const isSelection = value != null || isMultiple
+
   const groupClasses = {
     "iw-button-group": true,
-    "iw-button-group-selection": value != null || isMultiple,
+    "iw-button-group-selection": isSelection,
     [`iw-button-group-${direction}`]: true,
     "iw-button-group-attached": isAttached,
   }
@@ -86,7 +88,8 @@ export function render(props) {
           size: itemSize ?? size,
           isDisabled: isDisabled || !!itemDisabled,
           isPressed,
-          isAriaPressed: isPressed ? true : undefined,
+          isAriaPressed: isSelection ? isPressed : undefined,
+          ariaLabel: children != null ? label : undefined,
           onClick: () => {
             if (!onChange) return
 

package/types/controls/button-group.d.ts

@@ -5,6 +5,7 @@ import type { Renderable } from "../shared/renderable"
 export interface ButtonGroupItem {
   id?: string
   value?: string
+  /** The button's text, or its accessible name when `children` are given */
   label: string
   children?: Renderable
   isDisabled?: boolean

package/types/controls/button.d.ts

@@ -21,6 +21,8 @@ export interface ButtonProps {
   isPressed?: boolean
   isFullWidth?: boolean
   buttonType?: "button" | "submit" | "reset" | "menu"
+  /** Renders a link styled as a button instead of a `<button>` */
+  href?: string
   ariaLabel?: string
   isAriaPressed?: boolean
   className?: string