@heymantle/litho 0.0.3 → 0.0.4

package/dist/esm/stories/Loading.stories.js

@@ -0,0 +1,850 @@
+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 _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 ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(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);
+}
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { transformStorySource } from "../utilities/transformers.js";
+import Loading from "../components/Loading.js";
+import Text from "../components/Text.js";
+import Card from "../components/Card.js";
+import Button from "../components/Button.js";
+import VerticalStack from "../components/VerticalStack.js";
+import HorizontalStack from "../components/HorizontalStack.js";
+import Box from "../components/Box.js";
+import { useState } from "react";
+export default {
+    title: 'Litho/Loading',
+    component: Loading,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A Loading component that displays loading states and spinner animations. Loading components help indicate when content is being fetched or processed, improving user experience during wait times."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        maxDuration: {
+            control: 'number',
+            description: 'Maximum duration in milliseconds for the loading progress bar to reach 100%'
+        }
+    }
+};
+export var Default = {
+    render: function(args) {
+        return /*#__PURE__*/ _jsx(Loading, _object_spread({}, args));
+    }
+};
+export var Sizes = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(HorizontalStack, {
+            gap: "2",
+            blockAlign: "center",
+            children: [
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    gap: "2",
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Loading, {
+                            size: "small"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            children: "Small"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    gap: "2",
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Loading, {
+                            size: "medium"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            children: "Medium"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    gap: "2",
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Loading, {
+                            size: "large"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            children: "Large"
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Different sizes of loading spinners.'
+            }
+        }
+    }
+};
+export var Colors = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(HorizontalStack, {
+            gap: "12",
+            children: [
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    gap: "4",
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Loading, {
+                            color: "default"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            children: "Default"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    gap: "4",
+                    inlineAlign: "center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Loading, {
+                            color: "subdued"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            children: "Subdued"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    gap: "4",
+                    inlineAlign: "center",
+                    as: Box,
+                    padding: "8",
+                    background: "bg-surface-dark",
+                    borderRadius: "2",
+                    children: [
+                        /*#__PURE__*/ _jsx(Loading, {
+                            color: "white"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            color: "text-inverse",
+                            children: "White"
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Different colors for loading spinners to match various backgrounds.'
+            }
+        }
+    }
+};
+export var InlineLoading = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(HorizontalStack, {
+            gap: "2",
+            blockAlign: "center",
+            children: [
+                /*#__PURE__*/ _jsx(Loading, {
+                    size: "small"
+                }),
+                /*#__PURE__*/ _jsx(Text, {
+                    children: "Loading data..."
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Inline loading spinner with descriptive text.'
+            }
+        }
+    }
+};
+export var CardLoading = {
+    render: function() {
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "User Profile",
+            padded: true,
+            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                gap: "4",
+                inlineAlign: "center",
+                blockAlign: "center",
+                as: Box,
+                padding: "12",
+                children: [
+                    /*#__PURE__*/ _jsx(Loading, {
+                        size: "large"
+                    }),
+                    /*#__PURE__*/ _jsx(Text, {
+                        children: "Loading user information..."
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Loading state within a card container.'
+            }
+        }
+    }
+};
+export var OverlayLoading = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(false), 2), isLoading = _useState[0], setIsLoading = _useState[1];
+        var handleLoadData = function() {
+            setIsLoading(true);
+            setTimeout(function() {
+                return setIsLoading(false);
+            }, 3000);
+        };
+        return /*#__PURE__*/ _jsx(Box, {
+            position: "relative",
+            children: /*#__PURE__*/ _jsxs(Card, {
+                title: "Data Dashboard",
+                padded: true,
+                children: [
+                    /*#__PURE__*/ _jsxs(VerticalStack, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                align: "space-between",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        variant: "headingSm",
+                                        children: "Sales Data"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        onClick: handleLoadData,
+                                        disabled: isLoading,
+                                        children: "Refresh Data"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Box, {
+                                padding: "8",
+                                background: "surface-neutral-subdued",
+                                borderRadius: "1",
+                                children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                                    gap: "1",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Text, {
+                                            children: "Revenue: $125,000"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Text, {
+                                            children: "Orders: 1,250"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Text, {
+                                            children: "Customers: 847"
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
+                    }),
+                    isLoading && /*#__PURE__*/ _jsxs(VerticalStack, {
+                        gap: "4",
+                        inlineAlign: "center",
+                        blockAlign: "center",
+                        as: Box,
+                        position: "absolute",
+                        insetBlockStart: "0",
+                        insetInlineStart: "0",
+                        insetInlineEnd: "0",
+                        insetBlockEnd: "0",
+                        borderRadius: "2",
+                        style: {
+                            backgroundColor: 'rgba(255, 255, 255, 0.8)'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Loading, {
+                                size: "large"
+                            }),
+                            /*#__PURE__*/ _jsx(Text, {
+                                children: "Refreshing data..."
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Loading overlay that covers content during data refresh.'
+            }
+        }
+    }
+};
+export var ButtonLoading = {
+    render: function() {
+        var _useState = _sliced_to_array(useState({
+            save: false,
+            upload: false,
+            process: false
+        }), 2), loadingStates = _useState[0], setLoadingStates = _useState[1];
+        var handleButtonClick = function(action) {
+            setLoadingStates(function(prev) {
+                return _object_spread_props(_object_spread({}, prev), _define_property({}, action, true));
+            });
+            setTimeout(function() {
+                setLoadingStates(function(prev) {
+                    return _object_spread_props(_object_spread({}, prev), _define_property({}, action, false));
+                });
+            }, 2000);
+        };
+        return /*#__PURE__*/ _jsxs(HorizontalStack, {
+            gap: "4",
+            children: [
+                /*#__PURE__*/ _jsx(Button, {
+                    primary: true,
+                    onClick: function() {
+                        return handleButtonClick('save');
+                    },
+                    disabled: loadingStates.save,
+                    children: loadingStates.save ? /*#__PURE__*/ _jsxs(HorizontalStack, {
+                        gap: "2",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ _jsx(Loading, {
+                                size: "small",
+                                color: "white"
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                children: "Saving..."
+                            })
+                        ]
+                    }) : 'Save Changes'
+                }),
+                /*#__PURE__*/ _jsx(Button, {
+                    onClick: function() {
+                        return handleButtonClick('upload');
+                    },
+                    disabled: loadingStates.upload,
+                    children: loadingStates.upload ? /*#__PURE__*/ _jsxs(HorizontalStack, {
+                        gap: "2",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ _jsx(Loading, {
+                                size: "small"
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                children: "Uploading..."
+                            })
+                        ]
+                    }) : 'Upload File'
+                }),
+                /*#__PURE__*/ _jsx(Button, {
+                    onClick: function() {
+                        return handleButtonClick('process');
+                    },
+                    disabled: loadingStates.process,
+                    children: loadingStates.process ? /*#__PURE__*/ _jsxs(HorizontalStack, {
+                        gap: "2",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ _jsx(Loading, {
+                                size: "small"
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                children: "Processing..."
+                            })
+                        ]
+                    }) : 'Process Data'
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Loading spinners integrated into button states.'
+            }
+        }
+    }
+};
+export var TableLoading = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(true), 2), loadingTable = _useState[0], setLoadingTable = _useState[1];
+        var toggleLoading = function() {
+            return setLoadingTable(!loadingTable);
+        };
+        return /*#__PURE__*/ _jsxs(Card, {
+            title: "Customer Data",
+            padded: true,
+            children: [
+                /*#__PURE__*/ _jsx(Box, {
+                    marginBlockEnd: "4",
+                    children: /*#__PURE__*/ _jsx(Button, {
+                        onClick: toggleLoading,
+                        children: loadingTable ? 'Show Data' : 'Show Loading'
+                    })
+                }),
+                loadingTable ? /*#__PURE__*/ _jsxs(VerticalStack, {
+                    gap: "4",
+                    inlineAlign: "center",
+                    blockAlign: "center",
+                    as: Box,
+                    padding: "16",
+                    children: [
+                        /*#__PURE__*/ _jsx(Loading, {
+                            size: "large"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            children: "Loading customer data..."
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            color: "subdued",
+                            variant: "bodyXs",
+                            children: "This may take a few moments"
+                        })
+                    ]
+                }) : /*#__PURE__*/ _jsx(Box, {
+                    borderWidth: "1",
+                    borderColor: "border-subdued",
+                    borderRadius: "1",
+                    children: /*#__PURE__*/ _jsxs("table", {
+                        style: {
+                            width: '100%',
+                            borderCollapse: 'collapse'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("thead", {
+                                children: /*#__PURE__*/ _jsxs("tr", {
+                                    style: {
+                                        backgroundColor: '#f9f9f9'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx("th", {
+                                            style: {
+                                                padding: '0.75rem',
+                                                textAlign: 'left',
+                                                borderBottom: '1px solid #e1e1e1'
+                                            },
+                                            children: "Name"
+                                        }),
+                                        /*#__PURE__*/ _jsx("th", {
+                                            style: {
+                                                padding: '0.75rem',
+                                                textAlign: 'left',
+                                                borderBottom: '1px solid #e1e1e1'
+                                            },
+                                            children: "Email"
+                                        }),
+                                        /*#__PURE__*/ _jsx("th", {
+                                            style: {
+                                                padding: '0.75rem',
+                                                textAlign: 'left',
+                                                borderBottom: '1px solid #e1e1e1'
+                                            },
+                                            children: "Status"
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ _jsxs("tbody", {
+                                children: [
+                                    /*#__PURE__*/ _jsxs("tr", {
+                                        children: [
+                                            /*#__PURE__*/ _jsx("td", {
+                                                style: {
+                                                    padding: '0.75rem',
+                                                    borderBottom: '1px solid #e1e1e1'
+                                                },
+                                                children: "John Doe"
+                                            }),
+                                            /*#__PURE__*/ _jsx("td", {
+                                                style: {
+                                                    padding: '0.75rem',
+                                                    borderBottom: '1px solid #e1e1e1'
+                                                },
+                                                children: "john@example.com"
+                                            }),
+                                            /*#__PURE__*/ _jsx("td", {
+                                                style: {
+                                                    padding: '0.75rem',
+                                                    borderBottom: '1px solid #e1e1e1'
+                                                },
+                                                children: "Active"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("tr", {
+                                        children: [
+                                            /*#__PURE__*/ _jsx("td", {
+                                                style: {
+                                                    padding: '0.75rem',
+                                                    borderBottom: '1px solid #e1e1e1'
+                                                },
+                                                children: "Jane Smith"
+                                            }),
+                                            /*#__PURE__*/ _jsx("td", {
+                                                style: {
+                                                    padding: '0.75rem',
+                                                    borderBottom: '1px solid #e1e1e1'
+                                                },
+                                                children: "jane@example.com"
+                                            }),
+                                            /*#__PURE__*/ _jsx("td", {
+                                                style: {
+                                                    padding: '0.75rem',
+                                                    borderBottom: '1px solid #e1e1e1'
+                                                },
+                                                children: "Pending"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Loading state for table data with descriptive messaging.'
+            }
+        }
+    }
+};
+export var ProgressiveLoading = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(0), 2), currentStep = _useState[0], setCurrentStep = _useState[1];
+        var _useState1 = _sliced_to_array(useState(false), 2), isRunning = _useState1[0], setIsRunning = _useState1[1];
+        var steps = [
+            'Initializing...',
+            'Connecting to server...',
+            'Authenticating user...',
+            'Loading data...',
+            'Processing results...',
+            'Complete!'
+        ];
+        var startProcess = function() {
+            setIsRunning(true);
+            setCurrentStep(0);
+            var interval = setInterval(function() {
+                setCurrentStep(function(prev) {
+                    if (prev >= steps.length - 1) {
+                        clearInterval(interval);
+                        setIsRunning(false);
+                        return prev;
+                    }
+                    return prev + 1;
+                });
+            }, 1000);
+        };
+        var resetProcess = function() {
+            setCurrentStep(0);
+            setIsRunning(false);
+        };
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Data Import Process",
+            padded: true,
+            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                gap: "8",
+                children: [
+                    /*#__PURE__*/ _jsxs(HorizontalStack, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                primary: true,
+                                onClick: startProcess,
+                                disabled: isRunning,
+                                children: "Start Import"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                onClick: resetProcess,
+                                disabled: isRunning,
+                                children: "Reset"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(VerticalStack, {
+                        gap: "4",
+                        inlineAlign: "center",
+                        as: Box,
+                        padding: "8",
+                        background: "subdued",
+                        borderRadius: "lg",
+                        children: isRunning || currentStep > 0 ? /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Loading, {
+                                    size: "large",
+                                    color: currentStep === steps.length - 1 ? 'success' : 'default'
+                                }),
+                                /*#__PURE__*/ _jsx(Text, {
+                                    variant: "headingSm",
+                                    children: steps[currentStep]
+                                }),
+                                /*#__PURE__*/ _jsx(Box, {
+                                    style: {
+                                        width: '200px',
+                                        height: '4px',
+                                        backgroundColor: '#e1e1e1',
+                                        borderRadius: '2px',
+                                        overflow: 'hidden'
+                                    },
+                                    children: /*#__PURE__*/ _jsx("div", {
+                                        style: {
+                                            height: '100%',
+                                            backgroundColor: currentStep === steps.length - 1 ? '#4caf50' : '#2196f3',
+                                            width: "".concat((currentStep + 1) / steps.length * 100, "%"),
+                                            transition: 'width 0.3s ease'
+                                        }
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsxs(Text, {
+                                    color: "subdued",
+                                    variant: "bodyXs",
+                                    children: [
+                                        "Step ",
+                                        currentStep + 1,
+                                        " of ",
+                                        steps.length
+                                    ]
+                                })
+                            ]
+                        }) : /*#__PURE__*/ _jsx(Text, {
+                            color: "subdued",
+                            children: 'Click "Start Import" to begin the process'
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Progressive loading with step-by-step status updates and progress bar.'
+            }
+        }
+    }
+};
+export var SkeletonLoading = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(true), 2), showSkeleton = _useState[0], setShowSkeleton = _useState[1];
+        return /*#__PURE__*/ _jsxs(Card, {
+            title: "Article Preview",
+            padded: true,
+            children: [
+                /*#__PURE__*/ _jsx(Box, {
+                    marginBlockEnd: "4",
+                    children: /*#__PURE__*/ _jsx(Button, {
+                        onClick: function() {
+                            return setShowSkeleton(!showSkeleton);
+                        },
+                        children: showSkeleton ? 'Show Content' : 'Show Skeleton'
+                    })
+                }),
+                showSkeleton ? /*#__PURE__*/ _jsxs(VerticalStack, {
+                    gap: "4",
+                    children: [
+                        /*#__PURE__*/ _jsxs(HorizontalStack, {
+                            gap: "4",
+                            blockAlign: "center",
+                            children: [
+                                /*#__PURE__*/ _jsx(Loading, {
+                                    size: "small"
+                                }),
+                                /*#__PURE__*/ _jsx(Text, {
+                                    color: "subdued",
+                                    children: "Loading article..."
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(Box, {
+                            style: {
+                                height: '24px',
+                                backgroundColor: '#e1e1e1',
+                                borderRadius: '4px',
+                                width: '70%'
+                            }
+                        }),
+                        /*#__PURE__*/ _jsx(Box, {
+                            style: {
+                                height: '16px',
+                                backgroundColor: '#e1e1e1',
+                                borderRadius: '4px',
+                                width: '100%'
+                            }
+                        }),
+                        /*#__PURE__*/ _jsx(Box, {
+                            style: {
+                                height: '16px',
+                                backgroundColor: '#e1e1e1',
+                                borderRadius: '4px',
+                                width: '85%'
+                            }
+                        }),
+                        /*#__PURE__*/ _jsx(Box, {
+                            style: {
+                                height: '16px',
+                                backgroundColor: '#e1e1e1',
+                                borderRadius: '4px',
+                                width: '60%'
+                            }
+                        }),
+                        /*#__PURE__*/ _jsx(Box, {
+                            style: {
+                                height: '120px',
+                                backgroundColor: '#e1e1e1',
+                                borderRadius: '4px',
+                                width: '100%'
+                            }
+                        })
+                    ]
+                }) : /*#__PURE__*/ _jsxs(VerticalStack, {
+                    gap: "4",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingLg",
+                            children: "How to Build Better User Interfaces"
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            children: "Creating intuitive and accessible user interfaces requires careful consideration of user needs, design principles, and modern development practices."
+                        }),
+                        /*#__PURE__*/ _jsx(Text, {
+                            children: "In this article, we'll explore the key concepts that make interfaces both beautiful and functional, from color theory and typography to interaction design and usability testing."
+                        }),
+                        /*#__PURE__*/ _jsx(VerticalStack, {
+                            inlineAlign: "center",
+                            blockAlign: "center",
+                            as: Box,
+                            style: {
+                                height: '120px',
+                                backgroundColor: '#f0f8ff',
+                                borderRadius: '4px',
+                                border: '1px dashed #2196f3'
+                            },
+                            children: /*#__PURE__*/ _jsx(Text, {
+                                color: "subdued",
+                                children: "[Article Image]"
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Skeleton loading placeholders that mimic the final content structure.'
+            }
+        }
+    }
+};