@heymantle/litho 0.0.3 → 0.0.4

package/dist/cjs/stories/SkeletonText.stories.js

@@ -0,0 +1,776 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get Alignment () {
+        return Alignment;
+    },
+    get ArticleLoading () {
+        return ArticleLoading;
+    },
+    get BodyText () {
+        return BodyText;
+    },
+    get Default () {
+        return Default;
+    },
+    get FullWidth () {
+        return FullWidth;
+    },
+    get GapSizes () {
+        return GapSizes;
+    },
+    get HeadingSizes () {
+        return HeadingSizes;
+    },
+    get HeadingText () {
+        return HeadingText;
+    },
+    get InteractiveExample () {
+        return InteractiveExample;
+    },
+    get ListLoading () {
+        return ListLoading;
+    },
+    get ProfileCard () {
+        return ProfileCard;
+    },
+    get Sizes () {
+        return Sizes;
+    },
+    get WithFixedWidth () {
+        return WithFixedWidth;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _transformers = require("../utilities/transformers.js");
+var _SkeletonText = /*#__PURE__*/ _interop_require_default(require("../components/SkeletonText.js"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
+var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
+var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
+var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
+var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
+var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
+var _react = require("react");
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+var _default = {
+    title: 'Litho/SkeletonText',
+    component: _SkeletonText.default,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A SkeletonText component that displays placeholder text content while data is loading. SkeletonText provides visual hints about content structure and improves perceived performance."
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    },
+    args: {
+        lines: 3,
+        type: 'body',
+        size: 'md'
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        lines: {
+            control: 'number',
+            description: 'Number of skeleton lines to display'
+        },
+        type: {
+            control: 'select',
+            options: [
+                'body',
+                'heading'
+            ],
+            description: 'Type of skeleton text (body or heading)'
+        },
+        size: {
+            control: 'select',
+            options: [
+                'xs',
+                'sm',
+                'md',
+                'lg',
+                'xl'
+            ],
+            description: 'Size of the skeleton text'
+        },
+        width: {
+            control: 'number',
+            description: 'Fixed width percentage for all lines'
+        },
+        fullWidth: {
+            control: 'boolean',
+            description: 'Whether lines should be full width'
+        },
+        align: {
+            control: 'select',
+            options: [
+                'start',
+                'center',
+                'end'
+            ],
+            description: 'Alignment of skeleton lines'
+        },
+        gap: {
+            control: 'select',
+            options: [
+                'small',
+                'medium',
+                'large'
+            ],
+            description: 'Spacing between skeleton lines'
+        }
+    }
+};
+var Default = {
+    render: function(args) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, _object_spread({}, args));
+    }
+};
+var BodyText = {
+    args: {
+        lines: 4,
+        type: 'body',
+        size: 'md'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Skeleton placeholder for body text content.'
+            }
+        }
+    }
+};
+var HeadingText = {
+    args: {
+        type: 'heading',
+        size: 'lg'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Skeleton placeholder for heading text (always displays as single line).'
+            }
+        }
+    }
+};
+var Sizes = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            gap: "2",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Extra Small"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
+                            size: "xs",
+                            lines: 2
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Small"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
+                            size: "sm",
+                            lines: 2
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Medium"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
+                            size: "md",
+                            lines: 2
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Large"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
+                            size: "lg",
+                            lines: 2
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Extra Large"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
+                            size: "xl",
+                            lines: 2
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Different sizes of skeleton text.'
+            }
+        }
+    }
+};
+var HeadingSizes = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            gap: "2",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Heading XS"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
+                            type: "heading",
+                            size: "xs"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Heading SM"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
+                            type: "heading",
+                            size: "sm"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Heading MD"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
+                            type: "heading",
+                            size: "md"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Heading LG"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
+                            type: "heading",
+                            size: "lg"
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Different sizes of skeleton headings.'
+            }
+        }
+    }
+};
+var WithFixedWidth = {
+    args: {
+        lines: 3,
+        width: 75
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Skeleton text with a fixed width percentage.'
+            }
+        }
+    }
+};
+var FullWidth = {
+    args: {
+        lines: 4,
+        fullWidth: true
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Skeleton text with all lines at full width.'
+            }
+        }
+    }
+};
+var Alignment = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            gap: "2",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Start Aligned"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
+                            lines: 3,
+                            align: "start"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Center Aligned"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
+                            lines: 3,
+                            align: "center"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "End Aligned"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
+                            lines: 3,
+                            align: "end"
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Different alignment options for skeleton text.'
+            }
+        }
+    }
+};
+var GapSizes = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+            gap: "2",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Small Gap"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
+                            lines: 4,
+                            gap: "small"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Medium Gap"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
+                            lines: 4,
+                            gap: "medium"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Large Gap"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
+                            lines: 4,
+                            gap: "large"
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Different gap sizes between skeleton lines.'
+            }
+        }
+    }
+};
+var ArticleLoading = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "Article",
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                gap: "1.5",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
+                        type: "heading",
+                        size: "lg"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
+                        lines: 1,
+                        size: "sm",
+                        width: 40
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
+                        lines: 5,
+                        gap: "medium"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                        style: {
+                            height: '200px',
+                            backgroundColor: '#f0f0f0',
+                            borderRadius: '8px'
+                        }
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
+                        lines: 3,
+                        gap: "medium"
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Article loading state using skeleton text for different content types.'
+            }
+        }
+    }
+};
+var ProfileCard = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                gap: "1",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                        style: {
+                            width: '80px',
+                            height: '80px',
+                            backgroundColor: '#f0f0f0',
+                            borderRadius: '50%',
+                            flexShrink: 0
+                        }
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                        gap: "1",
+                        style: {
+                            flex: 1
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
+                                type: "heading",
+                                size: "md",
+                                width: 60
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
+                                lines: 2,
+                                size: "sm"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
+                                lines: 1,
+                                size: "xs",
+                                width: 30
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Profile card loading state with avatar and user information skeletons.'
+            }
+        }
+    }
+};
+var ListLoading = {
+    render: function() {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "Items",
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
+                gap: "1",
+                children: [
+                    1,
+                    2,
+                    3,
+                    4,
+                    5
+                ].map(function(item) {
+                    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
+                        gap: "1",
+                        style: {
+                            padding: '1rem',
+                            border: '1px solid #e1e1e1',
+                            borderRadius: '8px'
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                style: {
+                                    width: '50px',
+                                    height: '50px',
+                                    backgroundColor: '#f0f0f0',
+                                    borderRadius: '4px',
+                                    flexShrink: 0
+                                }
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                                style: {
+                                    flex: 1
+                                },
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
+                                        type: "heading",
+                                        size: "sm",
+                                        width: 70
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
+                                        lines: 2,
+                                        size: "xs",
+                                        gap: "small"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                style: {
+                                    width: '80px',
+                                    height: '20px',
+                                    backgroundColor: '#f0f0f0',
+                                    borderRadius: '4px',
+                                    flexShrink: 0
+                                }
+                            })
+                        ]
+                    }, item);
+                })
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'List loading state with repeated skeleton items.'
+            }
+        }
+    }
+};
+var InteractiveExample = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)(true), 2), isLoading = _useState[0], setIsLoading = _useState[1];
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Card.default, {
+            title: "Content Loading Demo",
+            padded: true,
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    paddingBlockEnd: "1",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                        onClick: function() {
+                            return setIsLoading(!isLoading);
+                        },
+                        children: isLoading ? 'Show Content' : 'Show Skeleton'
+                    })
+                }),
+                isLoading ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
+                    gap: "1.5",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
+                            type: "heading",
+                            size: "lg",
+                            width: 80
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
+                            lines: 1,
+                            size: "sm",
+                            width: 30
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
+                            lines: 4,
+                            gap: "medium"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            style: {
+                                height: '120px',
+                                backgroundColor: '#f0f0f0',
+                                borderRadius: '8px'
+                            }
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
+                            lines: 2,
+                            gap: "small"
+                        })
+                    ]
+                }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingLg",
+                            children: "Understanding Design Systems"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            color: "subdued",
+                            children: "Published on March 15, 2024"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            children: "Design systems are comprehensive collections of reusable components, guided by clear standards, that can be assembled together to build any number of applications. They serve as the single source of truth for design and development teams."
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            children: "The benefits of implementing a design system include improved consistency across products, faster development cycles, better collaboration between teams, and reduced maintenance overhead."
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                            style: {
+                                height: '120px',
+                                backgroundColor: '#e3f2fd',
+                                borderRadius: '8px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                border: '1px dashed #2196f3'
+                            },
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                color: "subdued",
+                                children: "[Design System Diagram]"
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            children: "When building a design system, it's important to start with foundational elements like colors, typography, and spacing before moving on to components and patterns."
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Interactive example showing the transition from skeleton to actual content.'
+            }
+        }
+    }
+};