@inglorious/ui 9.1.1 → 9.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "9.1.1",
+  "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",

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

@@ -23,6 +23,8 @@ export function render(props) {
     name = "",
     label = "",
     description,
+    media,
+    variant = "default",
     isChecked = false,
     isDisabled = false,
     isRequired = false,
@@ -39,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",
   }
@@ -57,11 +60,21 @@ export function render(props) {
         ${ref((element) => applyElementProps(element, rest))}
       />
       ${when(
-        description,
+        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>
-            <span class="iw-checkbox-description">${description}</span>
+            ${when(
+              description,
+              () =>
+                html`<span class="iw-checkbox-description"
+                  >${description}</span
+                >`,
+            )}
           </span>`,
         () => html`<span class="iw-checkbox-label">${label}</span>`,
       )}

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

@@ -25,6 +25,7 @@ export function render(props) {
     value,
     options = [],
     direction = "column",
+    variant = "default",
     color = "primary",
     isDisabled = false,
     onChange,
@@ -38,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,
   }
@@ -56,6 +58,7 @@ export function render(props) {
         const {
           label: optionLabel,
           description: optionDescription,
+          media,
           value: optionValue,
           isDisabled: optionDisabled = false,
           ...optionRest
@@ -75,11 +78,21 @@ export function render(props) {
               ${ref((element) => applyElementProps(element, optionRest))}
             />
             ${when(
-              optionDescription,
+              optionDescription || media,
               () =>
                 html`<span class="iw-radio-text">
+                  ${when(
+                    media,
+                    () => html`<span class="iw-radio-media">${media}</span>`,
+                  )}
                   <span>${optionLabel}</span>
-                  <span class="iw-radio-description">${optionDescription}</span>
+                  ${when(
+                    optionDescription,
+                    () =>
+                      html`<span class="iw-radio-description"
+                        >${optionDescription}</span
+                      >`,
+                  )}
                 </span>`,
               () => html`<span>${optionLabel}</span>`,
             )}

package/src/data-display/chip/chip.stories.js

@@ -10,6 +10,10 @@ export default {
   render: createRender(Chip),
   argTypes: {
     children: { control: "text", description: "Chip label content." },
+    isSelected: {
+      control: "boolean",
+      description: "Makes the chip a toggle button, pressed while true.",
+    },
     icon: {
       control: false,
       description: "Shown before the label, such as an `Icon.render(...)`.",
@@ -72,3 +76,12 @@ export const WithIcon = {
     color: "success",
   },
 }
+
+export const Selectable = {
+  args: {
+    ...Default.args,
+    children: "Vegan",
+    isRemovable: false,
+    isSelected: true,
+  },
+}

package/src/data-display/chip/style.css

@@ -64,6 +64,28 @@
     border-radius: var(--iw-radius-none);
   }
 
+  &.iw-chip-selectable {
+    border: 1px solid var(--iw-color-border);
+    font: inherit;
+    font-size: var(--iw-font-size-sm);
+    cursor: pointer;
+
+    &:focus-visible {
+      outline: 2px solid var(--iw-color-primary);
+      outline-offset: 2px;
+    }
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+
+  &.iw-chip-selected {
+    border-color: var(--iw-color-primary);
+    background: color-mix(in srgb, var(--iw-color-primary) 20%, transparent);
+  }
+
   &.iw-chip-primary {
     background: color-mix(in srgb, var(--iw-color-primary) 20%, transparent);
   }

package/src/data-display/chip/template.js

@@ -21,6 +21,8 @@ export function render(props) {
     color = "default",
     size = "md",
     shape = "pill",
+    isSelected,
+    isDisabled = false,
     onClick,
   } = props
 
@@ -31,9 +33,30 @@ export function render(props) {
     [`iw-chip-shape-${shape}`]: shape !== "pill",
   }
 
+  const content = html`${when(
+      icon,
+      () => html`<span class="iw-chip-icon" aria-hidden="true">${icon}</span>`,
+    )} <span class="iw-chip-label">${children}</span>`
+
+  // A chip that can be picked is a toggle button, pressed while selected.
+  if (isSelected !== undefined) {
+    return html`<button
+      type="button"
+      class=${classMap({
+        ...classes,
+        "iw-chip-selectable": true,
+        "iw-chip-selected": isSelected,
+      })}
+      aria-pressed=${String(isSelected)}
+      ?disabled=${isDisabled}
+      @click=${onClick}
+    >
+      ${content}
+    </button>`
+  }
+
   return html`<span class=${classMap(classes)}>
-    ${when(icon, () => html`<span class="iw-chip-icon" aria-hidden="true">${icon}</span>`)}
-    <span class="iw-chip-label">${children}</span>
+    ${content}
     ${when(
       isRemovable,
       () =>

package/types/controls/checkbox.d.ts

@@ -6,6 +6,10 @@ export interface CheckboxProps {
   label?: string
   /** A line of detail under the label. */
   description?: string
+  /** Shown above the label, such as an icon or an image. */
+  media?: TemplateResult
+  /** `"card"` draws the checkbox as a card, outlined while checked. */
+  variant?: "default" | "card"
   isChecked?: boolean
   isDisabled?: boolean
   isRequired?: boolean

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

@@ -4,6 +4,8 @@ export interface RadioOption {
   label: string
   /** A line of detail under the label. */
   description?: string
+  /** Shown above the label, such as an icon or an image. */
+  media?: TemplateResult
   value: string
   isDisabled?: boolean
   [key: string]: unknown
@@ -16,6 +18,8 @@ export interface RadioGroupProps {
   value?: string
   options?: RadioOption[]
   direction?: "column" | "row"
+  /** `"card"` draws each option as a card in a grid, outlined while checked. */
+  variant?: "default" | "card"
   color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
   isDisabled?: boolean
   onChange?: (value: string) => void

package/types/data-display/chip.d.ts

@@ -16,6 +16,13 @@ export interface ChipProps {
     | "info"
   size?: "sm" | "md" | "lg"
   shape?: "pill" | "rounded" | "square"
+  /**
+   * Makes the chip a toggle button, pressed while true, for picking options:
+   * `onClick` toggles it. Left out, the chip is a plain label.
+   */
+  isSelected?: boolean
+  /** Only for a chip with `isSelected`. */
+  isDisabled?: boolean
   onClick?: () => void
   [key: string]: unknown
 }