@inglorious/ui 9.1.0 → 9.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "9.1.0",
+  "version": "9.2.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",
@@ -315,7 +315,7 @@
     "@iconify-icons/fa7-regular": "^2.0.0",
     "@iconify-icons/fa7-solid": "^2.0.0",
     "@iconify-icons/material-symbols": "^2.0.6",
-    "@inglorious/charts": "12.0.0",
+    "@inglorious/charts": "12.1.0",
     "@inglorious/eslint-config": "1.2.0",
     "@inglorious/store": "12.0.0",
     "@inglorious/vite-plugin-jsx": "2.0.5",

package/src/controls/button/template.js

@@ -6,6 +6,7 @@
 import { html, nothing } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 import { ref } from "@inglorious/web/directives/ref"
+import { when } from "@inglorious/web/directives/when"
 
 import { applyElementProps } from "../../shared/apply-element-props.js"
 
@@ -83,18 +84,18 @@ export function render(props) {
     >
       ${children}
     </button>
-    ${
-      onFileSelect
-        ? html`<input
-            type="file"
-            accept=${accept ?? ""}
-            ?multiple=${isMultiple}
-            ?disabled=${isDisabled}
-            hidden
-            @change=${(event) => handleFileChange(event, onFileSelect)}
-          />`
-        : nothing
-    }
+    ${when(
+      onFileSelect,
+      () =>
+        html`<input
+          type="file"
+          accept=${accept ?? ""}
+          ?multiple=${isMultiple}
+          ?disabled=${isDisabled}
+          hidden
+          @change=${(event) => handleFileChange(event, onFileSelect)}
+        />`,
+    )}
   `
 }
 

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

@@ -6,6 +6,7 @@
 import { html } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 import { ref } from "@inglorious/web/directives/ref"
+import { when } from "@inglorious/web/directives/when"
 
 import { applyElementProps } from "../../shared/apply-element-props.js"
 import { Button } from "../button/index.js"
@@ -73,13 +74,12 @@ export function render(props) {
 
         return Button.render({
           children: html`
-            ${icon ? html`<span class="iw-button-icon">${icon}</span>` : null}
+            ${when(icon, () => html`<span class="iw-button-icon">${icon}</span>`)}
             ${children ?? label}
-            ${
-              iconAfter
-                ? html`<span class="iw-button-icon">${iconAfter}</span>`
-                : null
-            }
+            ${when(
+              iconAfter,
+              () => html`<span class="iw-button-icon">${iconAfter}</span>`,
+            )}
           `,
           variant: itemVariant ?? variant,
           color: itemColor ?? color,

package/src/controls/checkbox/checkbox.stories.js

@@ -12,6 +12,12 @@ export default {
       description: "A line of detail under the label.",
     },
     name: { control: "text", description: "Native HTML name attribute." },
+    variant: {
+      control: "select",
+      options: ["default", "card"],
+      description:
+        "`card` draws the checkbox as a card, outlined while checked.",
+    },
     isChecked: { control: "boolean", description: "Current checked state." },
     isDisabled: { control: "boolean", description: "Disables interaction." },
     isRequired: { control: "boolean", description: "Marks input as required." },
@@ -60,3 +66,13 @@ WithDescription.args = {
   name: "summary",
   description: "An email every Monday with last week's totals.",
 }
+
+export const Card = {}
+Card.args = {
+  ...Default.args,
+  label: "Breakfast",
+  name: "breakfast",
+  description: "Served from 7 to 10, €12",
+  variant: "card",
+  isChecked: true,
+}

package/src/controls/checkbox/style.css

@@ -38,6 +38,30 @@
     font-size: var(--iw-font-size-lg);
   }
 
+  .iw-checkbox-media {
+    display: block;
+    margin-block-end: var(--iw-space-2);
+
+    img {
+      display: block;
+      max-inline-size: 100%;
+      border-radius: var(--iw-radius-sm);
+    }
+  }
+
+  &.iw-checkbox-card {
+    display: flex;
+    align-items: flex-start;
+    padding: var(--iw-space-3);
+    border: 1px solid var(--iw-color-border);
+    border-radius: var(--iw-radius-md);
+
+    &:has(:checked) {
+      border-color: var(--iw-checkbox-accent);
+      background: color-mix(in srgb, var(--iw-checkbox-accent) 8%, transparent);
+    }
+  }
+
   &.iw-checkbox-disabled {
     opacity: 0.6;
     cursor: not-allowed;

package/src/controls/checkbox/template.js

@@ -6,6 +6,7 @@
 import { html, nothing } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 import { ref } from "@inglorious/web/directives/ref"
+import { when } from "@inglorious/web/directives/when"
 
 import { applyElementProps } from "../../shared/apply-element-props.js"
 
@@ -22,6 +23,8 @@ export function render(props) {
     name = "",
     label = "",
     description,
+    media,
+    variant = "default",
     isChecked = false,
     isDisabled = false,
     isRequired = false,
@@ -38,6 +41,7 @@ export function render(props) {
   const classes = {
     "iw-checkbox": true,
     "iw-checkbox-disabled": isDisabled,
+    "iw-checkbox-card": variant === "card",
     [`iw-checkbox-${color}`]: color !== "primary",
     [`iw-checkbox-${size}`]: size !== "md",
   }
@@ -55,14 +59,25 @@ export function render(props) {
         @change=${(event) => onChange?.(event.target.checked)}
         ${ref((element) => applyElementProps(element, rest))}
       />
-      ${
-        description
-          ? html`<span class="iw-checkbox-text">
-              <span class="iw-checkbox-label">${label}</span>
-              <span class="iw-checkbox-description">${description}</span>
-            </span>`
-          : html`<span class="iw-checkbox-label">${label}</span>`
-      }
+      ${when(
+        description || media,
+        () =>
+          html`<span class="iw-checkbox-text">
+            ${when(
+              media,
+              () => html`<span class="iw-checkbox-media">${media}</span>`,
+            )}
+            <span class="iw-checkbox-label">${label}</span>
+            ${when(
+              description,
+              () =>
+                html`<span class="iw-checkbox-description"
+                  >${description}</span
+                >`,
+            )}
+          </span>`,
+        () => html`<span class="iw-checkbox-label">${label}</span>`,
+      )}
     </label>
   `
 }

package/src/controls/file-upload/template.js

@@ -6,6 +6,7 @@
 import { html, nothing } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 import { ref } from "@inglorious/web/directives/ref"
+import { when } from "@inglorious/web/directives/when"
 
 import { applyElementProps } from "../../shared/apply-element-props.js"
 import { fallbackLabel } from "../../shared/fallback-label.js"
@@ -57,20 +58,18 @@ export function render(props) {
 
   return html`
     <div class=${classMap(wrapperClasses)}>
-      ${
-        label
-          ? html`
-              <label for=${uploadId || nothing} class="iw-upload-label">
-                ${label}
-                ${
-                  isRequired
-                    ? html`<span class="iw-upload-required">*</span>`
-                    : null
-                }
-              </label>
-            `
-          : null
-      }
+      ${when(
+        label,
+        () => html`
+          <label for=${uploadId || nothing} class="iw-upload-label">
+            ${label}
+            ${when(
+              isRequired,
+              () => html`<span class="iw-upload-required">*</span>`,
+            )}
+          </label>
+        `,
+      )}
 
       <div class=${classMap(fieldClasses)}>
         <input
@@ -99,19 +98,21 @@ export function render(props) {
 
       <div class="iw-upload-field-summary">${summaryText}</div>
 
-      ${
-        error
-          ? html`<span
-              id=${messageId || nothing}
-              class="iw-upload-error-message"
-              >${error}</span
-            >`
-          : hint
-            ? html`<span id=${messageId || nothing} class="iw-upload-hint"
+      ${when(
+        error,
+        () =>
+          html`<span id=${messageId || nothing} class="iw-upload-error-message"
+            >${error}</span
+          >`,
+        () =>
+          when(
+            hint,
+            () =>
+              html`<span id=${messageId || nothing} class="iw-upload-hint"
                 >${hint}</span
-              >`
-            : null
-      }
+              >`,
+          ),
+      )}
     </div>
   `
 }

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

@@ -4,6 +4,7 @@
  */
 
 import { html } from "@inglorious/web"
+import { when } from "@inglorious/web/directives/when"
 
 import { Button } from "../button/index.js"
 
@@ -25,13 +26,12 @@ export function render(props) {
 
   const children = html`
     <span class="iw-icon-button-content iw-icon-button-content-${direction}">
-      ${icon ? html`<span class="iw-button-icon">${icon}</span>` : null}
+      ${when(icon, () => html`<span class="iw-button-icon">${icon}</span>`)}
       ${label}
-      ${
-        iconAfter
-          ? html`<span class="iw-button-icon">${iconAfter}</span>`
-          : null
-      }
+      ${when(
+        iconAfter,
+        () => html`<span class="iw-button-icon">${iconAfter}</span>`,
+      )}
     </span>
   `
 

package/src/controls/image-cropper/template.js

@@ -6,6 +6,7 @@
 
 import { html } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
+import { when } from "@inglorious/web/directives/when"
 
 import {
   DEFAULT_MIN_SIZE,
@@ -84,7 +85,8 @@ export const ImageCropper = {
       @keydown=${handleKeyDown(props)}
       @wheel=${handleWheel(props)}
     >
-      ${this.renderImage?.(props)} ${isLoaded ? this.renderFrame?.(props) : ""}
+      ${this.renderImage?.(props)}
+      ${when(isLoaded, () => this.renderFrame?.(props))}
     </div>`
   },
 

package/src/controls/radio-group/radio-group.stories.js

@@ -14,6 +14,11 @@ export default {
       options: ["column", "row"],
       description: "Layout direction for options.",
     },
+    variant: {
+      control: "select",
+      options: ["default", "card"],
+      description: "`card` draws each option as a card in a grid.",
+    },
     color: {
       control: "select",
       options: ["primary", "secondary", "success", "warning", "error", "info"],
@@ -72,3 +77,17 @@ WithDescriptions.args = {
     { label: "Express", value: "express", description: "Next day, €9" },
   ],
 }
+
+export const Cards = {}
+Cards.args = {
+  ...Default.args,
+  label: "Room",
+  name: "room",
+  value: "double",
+  variant: "card",
+  options: [
+    { label: "Single", value: "single", description: "One bed, €80" },
+    { label: "Double", value: "double", description: "Two beds, €120" },
+    { label: "Suite", value: "suite", description: "With a view, €200" },
+  ],
+}

package/src/controls/radio-group/style.css

@@ -70,4 +70,34 @@
   &.iw-radio-group-info {
     --iw-radio-accent: var(--iw-color-info);
   }
+
+  /* After the directions, which it overrides with a grid. */
+  &.iw-radio-group-card {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+    gap: var(--iw-space-3);
+
+    .iw-radio-option {
+      align-items: flex-start;
+      padding: var(--iw-space-3);
+      border: 1px solid var(--iw-color-border);
+      border-radius: var(--iw-radius-md);
+
+      &:has(:checked) {
+        border-color: var(--iw-radio-accent);
+        background: color-mix(in srgb, var(--iw-radio-accent) 8%, transparent);
+      }
+    }
+  }
+
+  .iw-radio-media {
+    display: block;
+    margin-block-end: var(--iw-space-2);
+
+    img {
+      display: block;
+      max-inline-size: 100%;
+      border-radius: var(--iw-radius-sm);
+    }
+  }
 }

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

@@ -6,6 +6,7 @@
 import { html, nothing } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 import { ref } from "@inglorious/web/directives/ref"
+import { when } from "@inglorious/web/directives/when"
 
 import { applyElementProps } from "../../shared/apply-element-props.js"
 
@@ -24,6 +25,7 @@ export function render(props) {
     value,
     options = [],
     direction = "column",
+    variant = "default",
     color = "primary",
     isDisabled = false,
     onChange,
@@ -37,6 +39,7 @@ export function render(props) {
   const rootClasses = {
     "iw-radio-group": true,
     [`iw-radio-group-${direction}`]: true,
+    "iw-radio-group-card": variant === "card",
     [`iw-radio-group-${color}`]: color !== "primary",
     "iw-radio-group-disabled": isDisabled,
   }
@@ -47,15 +50,15 @@ export function render(props) {
       ?disabled=${isDisabled}
       ${ref((element) => applyElementProps(element, rest))}
     >
-      ${
-        label
-          ? html`<legend class="iw-radio-group-label">${label}</legend>`
-          : null
-      }
+      ${when(
+        label,
+        () => html`<legend class="iw-radio-group-label">${label}</legend>`,
+      )}
       ${options.map((option, index) => {
         const {
           label: optionLabel,
           description: optionDescription,
+          media,
           value: optionValue,
           isDisabled: optionDisabled = false,
           ...optionRest
@@ -74,16 +77,25 @@ export function render(props) {
               @change=${(event) => onChange?.(event.target.value)}
               ${ref((element) => applyElementProps(element, optionRest))}
             />
-            ${
-              optionDescription
-                ? html`<span class="iw-radio-text">
-                    <span>${optionLabel}</span>
-                    <span class="iw-radio-description"
-                      >${optionDescription}</span
-                    >
-                  </span>`
-                : html`<span>${optionLabel}</span>`
-            }
+            ${when(
+              optionDescription || media,
+              () =>
+                html`<span class="iw-radio-text">
+                  ${when(
+                    media,
+                    () => html`<span class="iw-radio-media">${media}</span>`,
+                  )}
+                  <span>${optionLabel}</span>
+                  ${when(
+                    optionDescription,
+                    () =>
+                      html`<span class="iw-radio-description"
+                        >${optionDescription}</span
+                      >`,
+                  )}
+                </span>`,
+              () => html`<span>${optionLabel}</span>`,
+            )}
           </label>
         `
       })}

package/src/controls/select/template.js

@@ -52,11 +52,10 @@ export const Select = {
           () => html`
             <label for=${id || name || nothing} class="iw-select-label">
               ${label}
-              ${
-                isRequired
-                  ? html`<span class="iw-select-required">*</span>`
-                  : null
-              }
+              ${when(
+                isRequired,
+                () => html`<span class="iw-select-required">*</span>`,
+              )}
             </label>
           `,
         )}
@@ -117,7 +116,7 @@ export const Select = {
     )
 
     return html`<div class="iw-select-frame" @click=${openFromArrowStrip}>
-      ${icon ? Icon.render({ children: icon, size }) : null}
+      ${when(icon, () => Icon.render({ children: icon, size }))}
 
       <select
         id=${controlId || nothing}

package/src/controls/slider/template.js

@@ -6,6 +6,7 @@
 import { html, nothing } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 import { ref } from "@inglorious/web/directives/ref"
+import { when } from "@inglorious/web/directives/when"
 
 import { applyElementProps } from "../../shared/apply-element-props.js"
 import { fallbackLabel } from "../../shared/fallback-label.js"
@@ -60,51 +61,53 @@ export function render(props) {
 
   return html`
     <div class=${classMap(classes)}>
-      ${
-        (label || isValueVisible) &&
-        html`<div class="iw-slider-header">
-          ${
-            label
-              ? html`<label for=${inputId || nothing}>${label}</label>`
-              : html`<span></span>`
-          }
-          ${
-            isValueVisible
-              ? html`<output class="iw-slider-value">${shown}</output>`
-              : null
-          }
-        </div>`
-      }
-      ${
-        isRange
-          ? renderRange({
-              inputId,
-              name,
+      ${when(
+        label || isValueVisible,
+        () =>
+          html`<div class="iw-slider-header">
+            ${when(
               label,
-              value,
-              min,
-              max,
-              step,
-              isDisabled,
-              onChange,
-              rest,
-            })
-          : html`<input
-              id=${inputId || nothing}
-              class="iw-slider-input"
-              aria-label=${fallbackLabel(inputId, label)}
-              type="range"
-              name=${name}
-              min=${min}
-              max=${max}
-              step=${step}
-              .value=${String(value)}
-              ?disabled=${isDisabled}
-              @input=${(event) => onChange?.(Number(event.target.value))}
-              ${ref((element) => applyElementProps(element, rest))}
-            />`
-      }
-      ${hasMarks ? renderMarks({ min, max, step }) : nothing}
+              () => html`<label for=${inputId || nothing}>${label}</label>`,
+              () => html`<span></span>`,
+            )}
+            ${when(
+              isValueVisible,
+              () => html`<output class="iw-slider-value">${shown}</output>`,
+            )}
+          </div>`,
+      )}
+      ${when(
+        isRange,
+        () =>
+          renderRange({
+            inputId,
+            name,
+            label,
+            value,
+            min,
+            max,
+            step,
+            isDisabled,
+            onChange,
+            rest,
+          }),
+        () =>
+          html`<input
+            id=${inputId || nothing}
+            class="iw-slider-input"
+            aria-label=${fallbackLabel(inputId, label)}
+            type="range"
+            name=${name}
+            min=${min}
+            max=${max}
+            step=${step}
+            .value=${String(value)}
+            ?disabled=${isDisabled}
+            @input=${(event) => onChange?.(Number(event.target.value))}
+            ${ref((element) => applyElementProps(element, rest))}
+          />`,
+      )}
+      ${when(hasMarks, () => renderMarks({ min, max, step }))}
     </div>
   `
 }

package/src/controls/switch/template.js

@@ -6,6 +6,7 @@
 import { html, nothing } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 import { ref } from "@inglorious/web/directives/ref"
+import { when } from "@inglorious/web/directives/when"
 
 import { applyElementProps } from "../../shared/apply-element-props.js"
 
@@ -58,16 +59,19 @@ export function render(props) {
       <span class="iw-switch-track" aria-hidden="true">
         <span class="iw-switch-thumb"></span>
       </span>
-      ${
-        description
-          ? html`<span class="iw-switch-text">
-              ${label ? html`<span class="iw-switch-label">${label}</span>` : null}
-              <span class="iw-switch-description">${description}</span>
-            </span>`
-          : label
-            ? html`<span class="iw-switch-label">${label}</span>`
-            : null
-      }
+      ${when(
+        description,
+        () =>
+          html`<span class="iw-switch-text">
+            ${when(label, () => html`<span class="iw-switch-label">${label}</span>`)}
+            <span class="iw-switch-description">${description}</span>
+          </span>`,
+        () =>
+          when(
+            label,
+            () => html`<span class="iw-switch-label">${label}</span>`,
+          ),
+      )}
     </label>
   `
 }