@roadlittledawn/docs-design-system-react 0.12.0 → 0.12.1

package/USAGE.md

@@ -134,6 +134,7 @@ import { Card } from "@roadlittledawn/docs-design-system-react";
 | `href` | `string` | — | Optional link URL. When provided, the entire card becomes clickable |
 | `icon` | `ReactNode` | — | Optional icon to display. Pass a rendered icon component. In MDX, the consuming site's component map resolves string names to rendered components before passing here. |
 | `iconPlacement` | `"left" \| "top-left" \| "top-center"` | `"top-left"` | Where to place the icon: vertically centered on the left, above content flush left, or above content centered |
+| `iconSize` | `string` | — | Override the icon container size (width and height). Accepts any valid CSS length (e.g. `"2rem"`, `"48px"`). Defaults to `--dds-card-icon-size` (`1.5rem`). |
 | `showArrow` | `boolean` | `false` | Show an animated arrow in the lower-right corner to signal the card is navigable. Best used with `href`. |
 | `children` | `ReactNode` | — | Card content |
 | `className` | `string` | `""` | Additional CSS classes |
@@ -161,6 +162,11 @@ import { Card } from "@roadlittledawn/docs-design-system-react";
   Read guides, tutorials, and API references.
 </Card>
 
+{/* Card with custom icon size (48px container) */}
+<Card title="Documentation" icon={<YourIcon />} iconPlacement="top-left" iconSize="3rem">
+  Icon container overridden to 48px × 48px.
+</Card>
+
 {/* Colored background */}
 <Card title="New Feature" titleColor="blue" backgroundColor="blue">
   Check out our latest component additions.

package/dist/components/Card.d.ts

@@ -28,6 +28,11 @@ export interface CardProps {
      * @default 'top-left'
      */
     iconPlacement?: "left" | "top-left" | "top-center";
+    /**
+     * Override the icon container size (width and height). Accepts any valid CSS length value (e.g. `"2rem"`, `"48px"`).
+     * Defaults to the `--dds-card-icon-size` token (`1.5rem`).
+     */
+    iconSize?: string;
     /**
      * Show an animated arrow in the lower-right corner to signal the card is navigable.
      * Best used together with `href`. The arrow animates with a springy motion on hover.
@@ -39,4 +44,4 @@ export interface CardProps {
     /** Additional CSS classes */
     className?: string;
 }
-export declare function Card({ title, titleColor, backgroundColor, href, icon, iconPlacement, showArrow, children, className, }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ title, titleColor, backgroundColor, href, icon, iconPlacement, iconSize, showArrow, children, className, }: CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Card.js

@@ -1,6 +1,17 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export function Card(_a) {
-    var title = _a.title, _b = _a.titleColor, titleColor = _b === void 0 ? "gray" : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? "white" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPlacement, iconPlacement = _d === void 0 ? "top-left" : _d, _e = _a.showArrow, showArrow = _e === void 0 ? false : _e, children = _a.children, _f = _a.className, className = _f === void 0 ? "" : _f;
+    var title = _a.title, _b = _a.titleColor, titleColor = _b === void 0 ? "gray" : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? "white" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPlacement, iconPlacement = _d === void 0 ? "top-left" : _d, iconSize = _a.iconSize, _e = _a.showArrow, showArrow = _e === void 0 ? false : _e, children = _a.children, _f = _a.className, className = _f === void 0 ? "" : _f;
     var cardClasses = [
         "dds-card",
         "dds-card-bg-".concat(backgroundColor),
@@ -19,7 +30,7 @@ export function Card(_a) {
             iconPlacement === "top-center" ? "dds-card-icon-top-center" : "",
         ]
             .filter(Boolean)
-            .join(" "), "aria-hidden": "true", children: icon })) : null;
+            .join(" "), style: __assign({}, (iconSize && { width: iconSize, height: iconSize })), "aria-hidden": "true", children: icon })) : null;
     var arrowEl = showArrow ? (_jsx("span", { className: "dds-card-arrow", "aria-hidden": "true", children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M2 8H14M10 4L14 8L10 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) : null;
     var bodyContent = icon && iconPlacement === "left" ? (_jsxs("div", { className: "dds-card-icon-row", children: [iconEl, _jsxs("div", { className: "dds-card-icon-content", children: [title && _jsx("h3", { className: titleClasses, children: title }), _jsx("div", { className: textClasses, children: children })] })] })) : (_jsxs(_Fragment, { children: [iconEl, title && _jsx("h3", { className: titleClasses, children: title }), _jsx("div", { className: textClasses, children: children })] }));
     var content = (_jsxs("div", { className: cardClasses, children: [bodyContent, arrowEl] }));

package/dist/components/Card.stories.d.ts

@@ -46,6 +46,11 @@ export declare const NoTitle: Story;
  * All icon placement variants side by side.
  */
 export declare const IconPlacements: Story;
+/**
+ * Cards with a custom icon size using the `iconSize` prop.
+ * Use any valid CSS length value (e.g. `"2rem"`, `"48px"`).
+ */
+export declare const WithCustomIconSize: Story;
 /**
  * All title color variants.
  */

package/dist/components/Card.stories.js

@@ -38,6 +38,10 @@ var meta = {
             description: 'Placement of the icon within the card.',
             table: { defaultValue: { summary: "'top-left'" } },
         },
+        iconSize: {
+            control: 'text',
+            description: 'Override the icon container size (width and height, e.g. "2rem", "48px"). Defaults to the --dds-card-icon-size token (1.5rem).',
+        },
         showArrow: {
             control: 'boolean',
             description: 'Show an animated arrow in the lower-right corner to signal the card is navigable.',
@@ -235,6 +239,20 @@ export var IconPlacements = {
     },
     render: function () { return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsx(Card, { title: "Icon Left", icon: _jsx(DemoIcon, {}), iconPlacement: "left", children: _jsx("span", { style: { color: 'var(--dds-card-text-gray)' }, children: "Icon is centered vertically beside the content." }) }), _jsx(Card, { title: "Icon Top Left", icon: _jsx(DemoIcon, {}), iconPlacement: "top-left", children: _jsx("span", { style: { color: 'var(--dds-card-text-gray)' }, children: "Icon sits above the title, flush left." }) }), _jsx(Card, { title: "Icon Top Center", icon: _jsx(DemoIcon, {}), iconPlacement: "top-center", children: _jsx("span", { style: { color: 'var(--dds-card-text-gray)' }, children: "Icon sits above the title, horizontally centered." }) })] })); },
 };
+/**
+ * Cards with a custom icon size using the `iconSize` prop.
+ * Use any valid CSS length value (e.g. `"2rem"`, `"48px"`).
+ */
+export var WithCustomIconSize = {
+    parameters: {
+        docs: {
+            source: {
+                code: "{/* 48px icon container */}\n<Card title=\"Large Icon\" icon={<YourIcon />} iconPlacement=\"top-left\" iconSize=\"3rem\">\n  Icon container is 48px \u00D7 48px (3rem).\n</Card>\n\n{/* 16px icon container */}\n<Card title=\"Small Icon\" icon={<YourIcon />} iconPlacement=\"left\" iconSize=\"1rem\">\n  Icon container is 16px \u00D7 16px (1rem).\n</Card>",
+            },
+        },
+    },
+    render: function () { return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsx(Card, { title: "Large Icon", icon: _jsx(DemoIcon, {}), iconPlacement: "top-left", iconSize: "3rem", children: _jsx("span", { style: { color: 'var(--dds-card-text-gray)' }, children: "Icon container is 48px \u00D7 48px (3rem)." }) }), _jsx(Card, { title: "Small Icon", icon: _jsx(DemoIcon, {}), iconPlacement: "left", iconSize: "1rem", children: _jsx("span", { style: { color: 'var(--dds-card-text-gray)' }, children: "Icon container is 16px \u00D7 16px (1rem)." }) })] })); },
+};
 /**
  * All title color variants.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roadlittledawn/docs-design-system-react",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "license": "MIT",
   "description": "React components for documentation design system",
   "repository": {